How to use optional param in dynamic routes

[dipta007]

In our project, we have used optional parameters in some cases like for profile page /u/:username/:tab?, I couldn't find any way to achieve this using next routes. Only way I could find was to add folder in following structures and put same index.js in 2 folders, that contradicts the DRY principle and makes redundant codes

u
--[username]
----index.js
----[tab]
------index.js

[janus-reith]

I couldn't find any way to achieve this using next routes.

You should've kept searching then, it's not that hard to find. :)
Its right here: https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
You put it like this: [...params] and get an array of values.

There also is the concept of optional catchall routes which currently is experimental:
https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes
But it looks like you may not need that, as the username param seems to be always present.

[dipta007]

@janus-reith Thanks for the suggestion.

I actually found out that, but the problem with that one is it will catch all the params after /username/ like /username/tab or /username/tab/1 or /username/tab/1/2. But i want to catch only /username/tab

Moreover its not named parameter 😔

[janus-reith]

@dipta007 Ok I think I get your point. You could however still use params[0] and params[1] and ignore the rest, or if you really want to prevent someone from visiting /username/tab/whatever, check for params[2] and return an error/not found page, or create a rewrite in your nextjs config that will redirect all routes starting at a depth of 3 to some not found page.
In your example with just the two params, it might maybe really be simpler to just create two different routes then.
Although I didn't really get why you use the dynamic slugs as folder with index.js files in your usecase, instead of directlly naming the files accordingly, like [tab].js

Another thing to check: Do you actually evaluate the value of /tab/ on your initial render?
Else, you could maybe also do something like /username?tab=whatever and only have one route.

[janus-reith]

Regarding the redundant code, you don't need to duplicate the whole content, but could just import the exports of the one file in the other file.