I'm currently working on a project with nextjs v12 and encountering an interesting issue. There are 2 routes that seem to be overlapping in an unexpected way.
/:academy/:course/questions/:id
When I navigate to /questions/1, everything works as intended. Similarly, when I go to /mit/math, it also functions correctly.
The problem:
Here's where things get tricky - when I redirect from /questions/1 to /questions/2, instead of loading the new route, it actually loads the other route (/:academy/:course). To make matters more confusing, if I refresh the page after the redirect, it then properly loads the /questions/:id route!
My attempted solutions:
- Checked for any misspellings in the code
- Tried changing
/questions/:idto/aquestions/:id
Do you have any insights or suggestions on how to resolve this challenging issue?
Thank you for your help.
Issue Resolved
The root cause was actually due to having both routes named /q/:id, so I renamed one to /q-lesson/:id. Additionally, because it involves server-side rendering (SSR), I had to clear the cache and restart the project to see the changes take effect.