I have rewrites defined under afterFiles: and fallback: in next.config.js
In my local dev environment, both sets of rewrites work perfectly.
When running on Vercel, the fallback rewrites do not work properly with my getServerSideProps functions though.
Accessing the URLs directly they work fine, but when clicking a Link that links to the URL the page is rendered without getting any serverside props. I have tried adding console.log to the serverside code, and it does not get executed when accessed through a Link to a fallback rule.
For example the following two rewrite rules will act completely different, despite rewriting to the same file and with similar arguments:
async rewrites() {
return {
beforeFiles: [
],
afterFiles: [
{
source: '/:country(usa)/:state/:city/:profile/',
destination: '/hotels/profile/?country=:country&state=:state&city=:city&profile=:profile&rw=true',
missing: [{ type: 'query', key: 'rw', value: 'true' }]
}
],
fallback: [
{
source: '/:country/:city/:profile/',
destination: '/hotels/profile/?country=:country&city=:city&profile=:profile&rw=true',
missing: [{ type: 'query', key: 'rw', value: 'true' }]
}
],
}
}
If I set up a Link tag with href='/usa/texas/houston/profilename/' (the afterFiles rule) it will load the page correctly and have serverside props available.
If I set up another Link tag with href='/france/paris/profilename/' (the fallback rule) it will load the page without having any serverside props.
If I hit refresh or visit the /france/paris/profilename/ URL directly, it works just fine and gets the props as it is supposed to.
If I move the fallback rule to afterFiles instead, then everything works fine as well.
So it seems like the Vercel environment has some kind of issue with the fallback rules, not handling them the same way as the dev environment.
Anyone experienced anything similar, or have any suggestions on how to further debug/work around?