question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Next.js 13][Routing][Pre-fetching] Dynamic route fails to pre-fetch (404)

See original GitHub issue

I have already made a ticket for this, but i’m giving here some details.

Pre-fetching (with <Link> or router.prefetch()) dynamic routes like app/test/[testId]/leaf (with one segment over the dynamic param) throws a 404 Not Found on Vercel (the page exists). It works fine on next dev and next start and with other cloud providers.

You can try it here https://test-headers-vercel.vercel.app/test In the inspector you can see that pre-fetching /test/1 works as expected, pre-fetching /test/1/leaf throws a 404.

For /test/1 Capture d’écran 2022-10-31 à 11 43 34

For /test/1/leaf Capture d’écran 2022-10-31 à 11 43 28 (The first cache hit is a MISS, Vercel then caches it)

This forces a hard navigation to /test/1/leaf (probably related to this issue).

I haven’t tried it on Next 12.

BTW: pre-fetching seems to work in dev, contrary to what is written in the beta doc

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
ijjkcommented, Nov 9, 2022

Hi, this should be corrected now, please re-deploy your project and give it a try!

2reactions
timneutkenscommented, Nov 2, 2022

Still falls under our team’s work, we’ll investigate 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nextjs <Link> prefetch returns 404 - Stack Overflow
js app that uses dynamic routing and I'm noticing some strange behavior with the <Link> prefetches. Occasionally (usually after rebuilding but ...
Read more >
Dynamic Routes Details - Next.js
Here is some essential information you should know about dynamic routes. ... paths that have not been generated at build time will not...
Read more >
Route prefetching in Next.js - web.dev
js automatically prefetches the JavaScript needed to render the linked page, which makes navigating to new pages faster. If you are using ...
Read more >
Implementing SSR in Next.js: Dynamic routing and prefetching
If your page contains content that is fetched from an external source and changes frequently, then those changes will not be reflected on...
Read more >
Routing in Next.js – How to Set Up Dynamic Routing with Pre ...
fallback set to false would automatically lead to a 404 error page whenever the user tried to access a path which wasn't recognized...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found