Next.js 13 App目录动态路由部署Firebase Hosting后失效

问题现象 #

使用Next.js 13实验性appDir特性开发时，动态路由app/[slug]/page.jsx部署到Firebase Hosting后，无法匹配/hello这类动态路径，访问会出现404；反而直接访问/[slug]能正常加载页面，动态参数被当作静态文件名处理。

修复步骤 #

1. 调整Next.js构建配置 #

在next.config.js中添加output: 'standalone'，确保构建产物适配服务器环境，让Firebase能正确识别动态路由逻辑：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  output: 'standalone'
}

module.exports = nextConfig

2. 修正Firebase Hosting配置 #

更新firebase.json，添加frameworksBackend配置指定Cloud Function区域，并设置rewrites规则让所有请求转发到Next.js后端：

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    },
    "rewrites": [
      {
        "source": "**",
        "frameworksBackend": true
      }
    ]
  }
}

3. 重新构建部署 #

• 执行本地构建命令：npm run build
• 重新部署到Firebase：firebase deploy

额外验证项 #

• 确认Web Frameworks实验特性已启用：执行firebase experiments:enable webframeworks（若之前配置异常，可先执行firebase experiments:disable webframeworks再重新启用）
• 确保Firebase账号已开通计费（动态路由依赖Cloud Functions处理，必须开通计费）
• 本地模拟器测试：执行firebase emulators:start，访问http://localhost:5000/hello验证动态路由是否正常，再推送到线上环境

内容的提问来源于stack exchange，提问作者Rajendra A Verma