NextJS新增路由在Firebase服务器端无法访问的问题排查

• 检查Firebase Hosting重写配置
  项目根目录的firebase.json中，hosting部分必须配置正确的重写规则，将所有请求导向NextJS静态导出的入口文件。正确配置示例：

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

  没有这条规则的话，直接访问子路由时Firebase会找不到对应的静态文件，返回404。

• 确认NextJS静态导出配置
  在next.config.js中必须开启静态导出模式，否则构建产物无法适配Firebase Hosting的静态托管逻辑：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    output: 'export',
    // 可选：部分场景下开启trailingSlash可避免路由匹配问题
    trailingSlash: true,
  }
  
  module.exports = nextConfig
  

  执行npm run build后，检查根目录生成的out文件夹，确认其中存在Special子目录及对应的index.html文件，确保构建产物正确生成。

• 验证部署流程与缓存

  • 确保firebase.json中public字段指向的是out目录，firebase deploy --only hosting会默认使用该目录的内容。
  • 如果之前部署过旧内容，可尝试强制覆盖部署：firebase deploy --only hosting --force，避免缓存导致的旧配置生效。

• 检查路由大小写
  本地开发环境路由大小写不敏感，但Firebase Hosting严格区分大小写。确保访问的URL路径（如/Special）与app目录下的Special子目录大小写完全一致，不要混用大小写访问。

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