Route rewrites break routing when deployed to Vercel
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
next ver: 14.0.3
repo: https://github.com/kylewardnz/next-prefetch-repro
deployed: https://next-prefetch-repro.vercel.app/
in my next config I have two rewrites setup like so:
the repro isn't 1:1 but i suspect it's close.
in my real app there's an issue where if i route from
all of this works on local just fine, it's only when deployed this happens. in production i've had to disable prefetching for that one link to work around it.
in the repro, do the following:
- click "go to list". it will route you to https://next-prefetch-repro.vercel.app/@SomeUser/list/some-list
- click "go to profile". it will route you to https://next-prefetch-repro.vercel.app/@SomeUser
- click "go to list". it will route you back to https://next-prefetch-repro.vercel.app/@SomeUser/list/some-list
- click "go to profile" again. routing fails.
- click back
- click "go to list" again. routing is still failing.
repo: https://github.com/kylewardnz/next-prefetch-repro
deployed: https://next-prefetch-repro.vercel.app/
in my next config I have two rewrites setup like so:
rewrites() {
return [
{
source: "/@:nickname",
destination: "/u/:nickname",
},
{
source: "/@:nickname/list/:list",
destination: "/u/:nickname/list/:list",
},
];
},the repro isn't 1:1 but i suspect it's close.
in my real app there's an issue where if i route from
@/SomeUser/list/some-list to @/SomeUser via a <Link> with prefetch enabled, the nickname param fed to the page flickers between SomeUser and SomeUser.prefetch. i say it flickers because my generateMetadata function fetches data based on the param, then sets the title to the param. i can see the title flicker between SomeUser and SomeUser.prefetch a couple times. the fetched data is then fed to the page and a client component that's using react-query, which then makes a request using info from the server component. strangely enough it looks like the loading.tsx shell persists but then everything breaks or locks up as the page stops rendering/rerendersall of this works on local just fine, it's only when deployed this happens. in production i've had to disable prefetching for that one link to work around it.
in the repro, do the following:
- click "go to list". it will route you to https://next-prefetch-repro.vercel.app/@SomeUser/list/some-list
- click "go to profile". it will route you to https://next-prefetch-repro.vercel.app/@SomeUser
- click "go to list". it will route you back to https://next-prefetch-repro.vercel.app/@SomeUser/list/some-list
- click "go to profile" again. routing fails.
- click back
- click "go to list" again. routing is still failing.
Answered by Asian black bear
alright i moved the /list rewrite so it's first in the array and it seems to be fixed?
i get that it might be getting confused but i'm not using wildcard matching, so /@User shouldnt really match on /@User/list/some-list..
i get that it might be getting confused but i'm not using wildcard matching, so /@User shouldnt really match on /@User/list/some-list..
1 Reply
Asian black bearOP
alright i moved the /list rewrite so it's first in the array and it seems to be fixed?
i get that it might be getting confused but i'm not using wildcard matching, so /@User shouldnt really match on /@User/list/some-list..
i get that it might be getting confused but i'm not using wildcard matching, so /@User shouldnt really match on /@User/list/some-list..
Answer