Next.js动态路由开发环境正常，部署Firebase后返回404求助

核心原因 #

Firebase Hosting默认仅匹配实际存在的静态文件，Next.js的动态路由属于客户端路由逻辑，Firebase无法自动识别这类请求并转发到Next.js的入口文件，因此返回404错误。

解决步骤 #

1. 配置Firebase重写规则 #

在项目根目录的firebase.json文件中添加rewrites配置，让所有请求都指向Next.js的入口文件：

{
  "hosting": {
    "public": "out", // 需与Next.js静态导出目录一致，SSG/ISR模式默认是out目录
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

2. 确认Next.js静态导出配置 #

若使用next export静态导出模式，需在next.config.js中添加trailingSlash配置避免路径匹配问题：

module.exports = {
  trailingSlash: true,
}

执行重新导出命令：

next build && next export

3. 检查路由文件结构 #

确保动态路由文件路径符合Next.js规则：

• Pages Router模式：文件需放在pages/post/[post].tsx
• App Router模式：需创建app/post/[post]/page.tsx目录结构

4. 重新部署到Firebase #

修改配置后执行部署命令：

firebase deploy --only hosting

SSR/ISR模式额外处理 #

若项目使用服务端渲染（SSR）或增量静态生成（ISR），静态导出方式不适用，需结合Firebase Functions处理请求。此时firebase.json需配置函数转发：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "nextServer"
      }
    ]
  }
}

同时需编写对应Firebase Functions代码启动Next.js服务器。

内容的提问来源于stack exchange，提问作者Karthik