I'm using the default dynamic routing technique of nextjs in my project which is based on the folder structure. I have a route which is:
pages/[language]/location/[location_id]
Now I'm coming across a use case where I need the above route exactly the same except the last parameter of [location_id], I need [route_id] here.
When I created a file [route_id].js for this new route, I'm facing this error:
throw new Error(`You cannot use different slug names for the same dynamic path ('${previousSlug}' !== '${nextSlug}').`);
I'm aware of the error and the problem about why it's showing me this after doing some research but I'm unable to understand how I can solve this problem. I just want a solution how I can implement these two routes in my app:
Route 1: pages/[language]/location/[location_id]
Route 2: pages/[language]/location/[route_id]
PS: I've already studied this: https://github.com/zeit/next.js/issues/9081
The two routes you have provided are exactly equivalent and are not at all different. Therefore, they will be handled by a single page. There is no example of two urls that will route to different nextjs pages for the above two routes.
Anything written in [] will handle any type of value e.g 1 or 2 or any other value for that matter.
You can not make two pages to handle same request because there is no way for next or anyone else for that matter to know whether you are using route_id or location_id because these are both variables that are representing any value.
If you want to differentitate between them, either create a new route with
/route/[route_id]
instead of
/location/[location_id], or use queryparams e.g
pages/[language]/location?locationid=[location_id]
And
pages/[language]/location?routeid=[route_id]