Dynamic Route at Root Level in Next.JS

Question

I am trying to create route for the product page and product listing page at the root level in next.js but I am not sure how it will work because anything in the route will go to route level file. I have a navigation in the header for categories which works gender based.

Below is the sample url of the product page.

https://www.sample.com/moon-boot-x-stranger-things-upside-down-boots-black-fabric-women-flats-22hgbe.html

For example I have created one file on pages/[slug].js

Below is the sample url for product listing page ( women is gender and dynamic )

https://www.sample.com/women/pumps.html

Problem Statement

I cannot create folders for routing inside page directory as all urls are dynamic and does not container static folder name.

I want to figure out the way to achieve this on the application level.

I have also explored middleware.js but I do not have anything static to identify the request to reroute to the specific folder.

Answer 1

If I am not mistaken you want to create static routes but you can't because you have dynamic route in the root. Personally I wouldn't use dynamic routing at root, instead I would put something like /gender/[slug].js .

However, based on nextjs docs , you should be able to put static routes at the same level as a dynamic route and they (static routes) will take precedence.

If you mean you want to put a static routes inside the dynamic route, delete the [slug].js and instead create a folder [slug] and inside it put your static.js files. So it should look likes this

/pages/[slug]/pumps.js