Recently i've been working on a web app that im building in NextJs along side a lot of other technologies (via create-t3-app). However, I came across a problem that I could not easily solve with some googling in the space of 15/20 minutes. So I thought that I would share my problem and solution, which will hopefully help others not go through the endless browsing of stackoverflow results as I did.
I want to have multiple nested dynamic routes in my NextJs app.
So that I can build routes like:
Now before I carry on with my solution, i'd like to add that basic dynamic routing is so easy.
All you have to do is have a folder structure like so:
- pages/ -- product-catalog/ --- [productcatalogid].tsx
This would produce the route:
/product-catalog/123 (123 being the productcatalogid parameter)
However, moving to multiple nested routes isn't available using the same principle. I.e. a folder structure like so:
- pages/ -- product-catalog/ --- [productcatalogid].tsx ---- product/ ----- [productid].tsx
The above will simply result in a 404 everytime you go to request the page.
Simply implementing a folder structure like so:
- pages/ -- product-catalog/ --- index.tsx ---- product/ ----- [productid].tsx
Seems to do the job nicely when dealing with multiple dynamic routes.
I hope this helped! For more information see the video that I found the solution on: https://www.youtube.com/watch?v=nfAxNTmme64