NextJS + Firebase动态路由部署后出现404问题求助

核心原因 #

你使用了Next.js的output: 'export'静态导出模式，这种模式下，动态路由（如[mbrId]）不会自动生成所有可能路径的静态页面。Firebase Hosting默认会查找对应路径的物理HTML文件，找不到就返回404。

解决方案 #

方案1：预生成所有动态路由页面（适合已知有限的mbrId集合） #

在动态路由的page.tsx中导出generateStaticParams函数，指定所有需要预生成的会员ID，这样构建时Next.js会为每个ID生成对应的静态页面。

修改app/members/[mbrId]/page.tsx：

// 生成所有需要预渲染的会员ID
export async function generateStaticParams() {
  // 可替换为从API、数据库或本地文件获取真实ID列表
  return [
    { mbrId: 'HD88BX22' },
    { mbrId: 'XYZ123' },
    // 其他会员ID...
  ];
}

export default function MemberPage({ params }: { params: { mbrId: string } }) {
  return <div>MemberPage for {params.mbrId}</div>;
}

执行以下步骤重新部署：

1. 删除旧的out目录：rm -rf out
2. 重新构建静态文件：npm run build
3. 部署到Firebase：firebase deploy --only hosting

方案2：使用Fallback页面处理动态未知ID #

如果mbrId是动态生成、无法提前枚举的，可通过Next.js的fallback机制结合Firebase重写规则解决。

步骤1：配置动态路由的fallback

修改app/members/[mbrId]/page.tsx：

// 允许动态参数（静态导出必需）
export const dynamicParams = true;
// 生成fallback页面
export const fallback = true;

export default function MemberPage({ params }: { params: { mbrId: string } }) {
  return <div>MemberPage for {params.mbrId}</div>;
}

步骤2：修改Firebase重写规则

更新firebase.json的hosting配置，将所有/members/*请求重写到fallback页面：

{
  "hosting": {
    "site": "myapp",
    "public": "out",
    "rewrites": [
      {
        "source": "/members/**",
        "destination": "/members/[mbrId]/fallback.html"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

步骤3：重新构建部署

执行npm run build和firebase deploy --only hosting即可。

额外注意事项 #

• 你之前创建了next.config.js，但原配置是next.config.mjs，可能存在配置冲突，建议删除next.config.js，确保next.config.mjs的output: 'export'配置正确：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    output: 'export',
  };
  
  export default nextConfig;
  

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