I am using NextJs 13 with experimental feature of "appDir"
while deploying to firebase hosting, dynamic routes become static path.
for example :
path app/[slug]/page.jsx
become http://example.web.app/[slug]
You can see [slug] is consider as static page
Steps to reproduce
- create nextjs13 app
npx create-next-app@latest --experimental-app
- create
app/[slug]/page.jsx
. - enable
firebase experiments:enable webframeworks
- make sure to enable billing.
firebase init hosting
thenfirebase deploy
- after successfully deployment, check
http://your-domain.web.app/hello
, you will see page not found buthttp://example.web.app/[slug]
is working.
in firebase.json
{
"hosting": {
"source": ".",
"cleanUrls": false,
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
in next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
}
module.exports = nextConfig
in jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}