Next.js动态路由在Firebase生产环境刷新后无法正常工作

核心问题分析 #

你当前的firebase.json重写规则将所有请求直接指向/index.html，这会导致动态路由的刷新/直接访问请求被直接返回首页，而没有经过Next.js的SSR函数处理——这是本地模拟器正常但部署后失效的关键原因。

具体解决步骤 #

1. 修正firebase.json的重写配置 #

将hosting部分的重写规则从指向静态index.html改为指向SSR函数：

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

备注：如果你的SSR函数名称不是默认的ssr，请替换为实际函数名（部署Next.js到Firebase时会自动生成该函数）。

2. 确保同时部署Functions和Hosting #

执行部署命令时，必须同时包含函数和托管资源，否则SSR函数不会上线：

firebase deploy --only functions,hosting

3. 检查路由路径一致性 #

注意到你描述的路由是/rooms/{roomId}，但截图中的URL是/room/IRLdCgdaOOTrIJunCDuv/（缺少s）。如果你的pages目录结构是pages/rooms/[roomId].js，这种路径不匹配会导致路由失效跳转到首页，请确保访问的URL与pages目录结构完全一致。

4. 调整Next.js的斜杠配置（可选） #

如果你的URL带有末尾斜杠，在next.config.js中开启trailingSlash确保路由匹配：

module.exports = {
  trailingSlash: true,
}

5. 清除Firebase Hosting缓存 #

部署后可能存在缓存残留，导致旧规则依然生效。可以通过Firebase控制台的Hosting页面手动清除缓存，或执行命令：

firebase hosting:channel:deploy clear-cache

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