Search code examples
javascriptnext.jsnext-router

Nextjs routing issue: superior param is weird

I have a project using nextjs v12

I have 2 routes that are overlapping in a weird way.

  1. /:academy/:course
  2. /questions/:id

when I load /questions/1 it works as expected
when I load /mit/math it works as expected

The issue:

when I redirect from /questions/1 to /questions/2,
it loads, you guessed it, the other route! (/:academy/:course)
and more, when I refresh the page (after the redirect) it will load the /questions/:id!!!

I tried

  • check for miss spelling
  • make /questions/:id -> /aquestions/:id

so, do you know a way to solve this issue?

thanks.

Solved

it was /q/:id and I renamed it to /q/:id.
and because it's with ssr (I think), I had to clear the cache and restart the project.

Solution

  • This should not happen, because according to official nextJS docs,

    Predefined routes take precedence over dynamic routes and dynamic routes over catch-all routes.

    https://nextjs.org/docs/routing/dynamic-routes

    In this case, it looks like we are trying to use 2 partial dynamic path, that is why nextJS is not able to figure out the correct path, you can add rewrite rule to always send /questions/* paths to /questions/:id

    https://nextjs.org/docs/api-reference/next.config.js/rewrites

    Can you please share the code how you are redirecting, to help you better?