next.js
next.js copied to clipboard
[Next.js 13][Routing][Pre-fetching] Dynamic route fails to pre-fetch (404)
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
For /test/1/leaf
(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
You'll find the repo to reproduce here. Tested on Next 13.0.1.
Strangely enough, when trying with testId=[testId]
, Vercel matches the corrected route (x-matched-path: /test/[testId]/leaf.rsc
) and it works as expected (with testId=[testId]
which is not really useful). Definitely something going on with rsc routing, like if it's missing the deprecated as=
parameter.
To help the investigation, rewriting the url in middleware.ts
with the same url seems to fix the issue on Vercel:
return NextResponse.rewrite(new URL(request.nextUrl.pathname, request.url));
@timneutkens thanks for the transfer, but to be clear and as mentioned, as far as my testing goes, this behavior is only replicable on Vercel.
Still falls under our team's work, we'll investigate 👍
Hi, this should be corrected now, please re-deploy your project and give it a try!
Thanks @ijjk ! Working as expected.
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.