There is an issue with Firebase and dynamic link handling in NextJS, that I've already had in the past (without solving it). Dynamic links are working as expected (locally) after running:
% npm run dev
But not once uploaded server side after:
% npm run build
% firebase deploy --only hosting
I know many other people have had the same kind of problems. But I haven't yet found a solution working for me.
I read the solution involves making a fix in the two files: firebase.json and next.config.js. Nevertheless all I have tried failed to work.
This is my next.config.js file:
** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
distDir: 'the_public_area',
experimental: {
appDir: true,
},
images: {
unoptimized: true
},
reactStrictMode: true,
trailingSlash: true
}
module.exports = nextConfig
The directory structure for the dynamic route goes like this:
app/members/[memberID]/page.tsx
For the "rewrites" section inside the firebase.json file, I have tested several possibilities, with no success.
Here are a few:
"rewrites": [
{
"source":"/members/**",
"destination":"/members/[memberID]/index.html"
}
]
"rewrites": [
{
"source":"/members/**",
"destination":"/members/[memberID].html"
}
]
"rewrites": [
{
"destination": "/members/[memberID]/index.html",
"regex": "^/([^/]+?)(?:/)?$"
}
]
"rewrites": [
{
"destination": "/members/[memberID]/index.html",
"regex": "^/members/([^/]+?)(?:/)?$"
}
]
For example locally pointing my web browser to:
http://localhost:3000/members/VX66dk79
shows the web page I expect.
But pointing it to:
https://myapp.web.app/members/VX66dk79
once the app is uploaded only displays:
404
This page could not be found.
instead of displaying the expected page.
Can someone see where the problem is in the code I am using?
P.S.
This information may also be relevant. The .next/routes-manifest.json file contains this section:
"dynamicRoutes": [
{
"page": "/members/[memberID]",
"regex": "^/members/([^/]+?)(?:/)?$",
"routeKeys": {
"nxtPmemberID": "nxtPmemberID"
},
"namedRegex": "^/members/(?<nxtPmemberID>[^/]+?)(?:/)?$"
},
{
"page": "/[mbrId]",
"regex": "^/([^/]+?)(?:/)?$",
"routeKeys": {
"nxtPmbrId": "nxtPmbrId"
},
"namedRegex": "^/(?<nxtPmbrId>[^/]+?)(?:/)?$"
}
],