Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Next.js routing from "pages/[...slug].js" not working

This is how my pages folder looks like:

pages
   index.js  
   [...slug].js

I know that the problem lies for sure in the fact that I am using catch all routes directly in the pages folder, because I tried with a "pages/page/[...slug].js structure and everything works fine.

When navigating using the Link component from the index.js page to a [...slug].js page (e.g. /careers or /blog), everything works fine.

BUT when navigating from a [...slug].js page (e.g. /contact) to another similar page (e.g. /blog) only the URL changes correctly, but the content of the page stays the same, so there is no rerendering.

Note: Navigating from a [...slug].js page back to the root file (href="/") works.

like image 535
Zakaria Avatar asked Oct 20 '25 03:10

Zakaria


1 Answers

TLDR:
When returning the set of props from your getStaticProps or getServerSideProps function, return a "key" prop and assign it a unique value, so that react is able to differentiate between the two pages that are served from the same dynamic path.

I found the solution to the "problem" in github issue from last year: https://github.com/vercel/next.js/issues/9992

You can find a clear solution reading through the issue I linked.

like image 102
Zakaria Avatar answered Oct 21 '25 15:10

Zakaria



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!