部署到Firebase Hosting的Next.js站点刷新时路由重置至首页问题

这个问题的核心是Firebase Hosting默认不支持单页应用(SPA)的路由重写。当你刷新非根路径（比如/services）时，Firebase服务器会尝试寻找对应路径的静态文件，但Next.js静态导出后只有根目录的index.html是入口，找不到文件就返回首页，导致URL正确但页面显示不对。

解决方案：配置Firebase重写规则 #

1. 在项目根目录创建或修改firebase.json文件，添加以下配置：

{
  "hosting": {
    "public": "out", // 与Next.js静态导出目录一致，默认是out，旧版本可能为build，按需调整
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• rewrites规则会让所有请求都指向index.html，让Next.js的客户端路由正确接管路径解析。

2. 重新构建并部署：

# 执行静态导出
npm run build
# 部署到Firebase
firebase deploy

关于你的Header组件 #

你的Header组件使用next/link和usePathname实现客户端路由，不刷新页面时的跳转逻辑是正常的。问题出在服务器端的路径处理，和组件代码本身无关。

内容的提问来源于stack exchange，提问作者B L Λ C K