Next.js动态路由job/[jobId]部署Firebase Hosting后404，求rewrites正确配置

问题原因 #

你当前的重写规则无法生效是因为Firebase Hosting的重写逻辑不识别路径中带[]的动态路由占位符，需要使用Firebase官方支持的路径参数匹配语法。

正确配置方案 #

修改你的firebase.json中hosting字段的配置如下即可：

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "/job/:jobId",
        "destination": "/job/[jobId]/index.html"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

配置说明 #

• public字段的值需要和你Next.js静态导出的输出目录保持一致，默认执行next export后输出目录为out，如果你自定义了输出目录请修改为对应值
• cleanUrls配置会自动去除路径中的.html后缀，和Next.js默认路由行为保持一致
• 第一条重写规则会匹配所有/job/xxx格式的路径，全部转发到你构建生成的动态路由模板HTML上，Next.js前端会自动解析路径中的jobId参数；如果存在/job/xxx/xxx这类嵌套路径，可将source修改为/job/:jobId*适配
• 第二条重写规则是全局兜底，适配其他前端路由的访问需求，如果你不需要可以删除

验证步骤 #

配置修改完成后重新执行部署命令firebase deploy即可生效。

内容的提问来源于stack exchange，提问作者A.S. SAMARASINGHE