nextJS nested Routes for multiple slug cases

Question

Hello everyone I have a problem regarding nextJS routing i have the following folder structure and its works fine for a simple scenario where a project has only one folder and this folder have one domain but my problem occurs when a project has a folder and this folder have many subfolders

for example if i have this URL projects/1/folder1/subfolder1/subsubfolder1/.../domain1

so as you can see i don't know how many slugs i will have how can I achieve this??

https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes — brc-dd, Jan 17 '22 at 10:40
Please provide enough code so others can better understand or reproduce the problem. — Community, Jan 26 '22 at 08:56

score 6 · Answer 1 · answered Jan 17 '22 at 11:03

Dynamic routes can be extended to catch all paths by adding three dots (...) inside the brackets.

It means you can create a file with name [...folder].js and in that file, you can write your logic to handle the route.

You can even make it optional by including the parameter in double brackets ([[...folder]]). This allows /base, /base/a, /base/a/b, and so on.

To access folder object you can simply get it from query as

{ "folder": ["a", "b"] }

nextJS nested Routes for multiple slug cases

1 Answers1