Theo's Typesafe Cult•11mo ago

Optional Dynamic Routing Problem

I have the following routing directory structure: -[locale] -(home) page.tsx -products page.tsx now i cant get to /en/products with my code knowing "en" is the "locale" param i want to implement an affiliate system in the same project so the affiliate will have the links generated by them be for example: /affiliate-slug/en/products i want to add an optional param before locale having the affiliate slug or having no slug at all i am using next 13.5 i tried using [[...slug]] way of optional dynamic routing in the docs but i get the error of "Optional route parameters are not yet supported" any ideas of tips?

3 Replies

ACCURACY•11mo ago

@muazkassm99 why can't you just do [affiliate]/[lng] as path structure? When you try to access the params in the respective page.tsx/jsx, something like whatever.com/.../affiliate_whatever/en/things will lead to a params value of

{
  params: {
    lng: "en",
    affiliate: "affiliate_whatever",
    ...
  }
}

{
  params: {
    lng: "en",
    affiliate: "affiliate_whatever",
    ...
  }
}

Ok my reading ability is non existant it seems. You want to have the affiliate slug to be optional. Would it not be better to use query params for the affiliate value if that is the case?

ACCURACY•11mo ago

Regarding the query parameter approach, and if you insist on having the route structure you gave. Would it be feasible to use rewrites? https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites With a remapping of the form:

    [
      {
        source: '/:affiliateSlug/:locale/products',
        destination: '/:locale/products?affiliateSlug=:affiliateSlug',
      },
      {
        source: '/:affiliateSlug/:locale/home',
        destination: '/:locale/home?affiliateSlug=:affiliateSlug',
      },
    ]

    [
      {
        source: '/:affiliateSlug/:locale/products',
        destination: '/:locale/products?affiliateSlug=:affiliateSlug',
      },
      {
        source: '/:affiliateSlug/:locale/home',
        destination: '/:locale/home?affiliateSlug=:affiliateSlug',
      },
    ]

next.config.js Options: rewrites | Next.js

Add rewrites to your Next.js app.

KOSLAOP•11mo ago

thank you for taking the time to think of this problem it is in the project requirements for the affiliate slug to be optional i came up with a solution for it not to be optional meaning that if there is no affiliate then thr url would be containing domain.com/store/en/products or in case of an affiliate domain.com/affiliate-slug/en/products but i want to think of the case of it being REALLY optional lol

Gaming

Programming

Optional Dynamic Routing Problem