Next.js部署Firebase后非首页直接访问出现404问题求助

问题原因 #

你通过next export生成静态站点部署到Firebase Hosting时，Firebase默认只会匹配服务器上实际存在的静态文件路径。直接访问/about这类客户端路由时，服务器找不到对应的静态文件，因此返回404；而刷新页面时，Next.js的客户端路由系统会接管请求，所以能正常加载目标页面。

解决方案 #

1. 项目根目录创建或修改firebase.json文件，添加重写规则，将所有请求转发到index.html，让Next.js客户端路由处理：

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

注：public字段的值out对应next export生成的静态文件目录，和你的build脚本输出一致。

2. 确认你的build脚本配置正确：

"build": "next build && next export"

该命令会将静态文件生成到out文件夹，符合Firebase Hosting的读取要求。

3. 重新部署到Firebase Hosting：

firebase deploy --only hosting

额外注意 #

• 如果你使用Next.js App Router，确保你的路由没有依赖服务器端渲染功能，否则静态导出会出现异常。
• 修改firebase.json后必须重新部署，否则新规则不会生效。

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