Next.js 13.4部署Firebase后动态路由访问404问题求助

问题原因 #

1. 静态导出的动态路由特性：当你在Next.js中设置output: 'export'进行静态导出时，动态路由app/members/[memberID]/page.tsx不会自动生成所有可能的memberID对应的静态页面，只会生成一个[memberID].html模板文件。Firebase Hosting默认只会匹配服务器上实际存在的文件，访问/members/Walt-Disney时，找不到对应的/members/Walt-Disney/index.html文件，因此返回404。
2. Firebase Hosting路由规则缺失：初始化Firebase Hosting时未启用单页应用重写，也未配置针对动态路由的转发规则，导致请求无法映射到动态路由的模板文件。

解决方案 #

方案一：预渲染已知动态路径（适用于memberID固定的场景） #

如果你的memberID是提前可知的固定列表，可以通过generateStaticParams函数让Next.js在构建时预渲染所有动态路径：
在app/members/[memberID]/page.tsx中添加以下代码：

export async function generateStaticParams() {
  // 返回所有需要预渲染的memberID列表
  return [
    { memberID: 'Walt-Disney' },
    // 可添加其他memberID，比如{ memberID: 'Steve-Jobs' }
  ];
}

执行npm run build后，the_public_area/members/目录下会生成对应memberID的文件夹及index.html文件，部署后即可直接访问对应路径。

方案二：配置Firebase Hosting重写规则（适用于动态生成的memberID） #

如果memberID是动态生成、无法提前枚举的，需要修改firebase.json配置重写规则，将动态路由请求转发到模板文件：

{
  "hosting": {
    "public": "the_public_area",
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "/members/**",
        "destination": "/members/[memberID].html"
      }
    ]
  }
}

修改完成后，重新执行firebase deploy --only hosting，此时访问任意/members/xxx路径时，Firebase Hosting会将请求转发到/members/[memberID].html，由Next.js在客户端处理路由匹配。

额外注意 #

确保页面内的动态路由跳转使用Next.js的<Link>组件，而非原生<a>标签，这样客户端导航不会触发页面刷新，避免不必要的404问题（配置重写规则后刷新页面也能正常处理）。

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