NextJS部署Firebase后自定义路由404问题求助（附复现步骤）

我有一个部署在Firebase上的Next.js应用，遇到了路由问题。以下是可复现该问题的完整步骤，希望能找出操作中的错误或遗漏细节：

环境版本 #

• npm: 8.15.0
• Firebase CLI: 12.0.0

复现步骤 #

1. 创建Next.js项目

npx create-next-app@latest
# 选项依次为：
# 项目名：sampleapp
# 使用TypeScript：Yes
# 使用ESLint：Yes
# 使用Tailwind CSS：Yes
# 使用src/目录：No
# 使用App Router：Yes
# 自定义导入别名：No

2. 修改next.config.js

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

module.exports = nextConfig

3. 初始化Firebase Hosting

firebase init hosting
# 选项依次为：
# 使用现有项目
# 选择项目：sampleproj-n2m3p4 (VicHugo)
# 公共目录：out
# 配置为单页应用：No
# 自动构建部署GitHub：No

4. 修改firebase.json

{
  "hosting": {
      "public": "out",
      "site": "sampleapp",
      "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
      ]
  }
}

5. 添加自定义路由
   在app目录下创建Special文件夹，新增page.tsx：

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

6. 本地测试与部署

• 本地运行npm run dev，访问http://localhost:3000/和http://localhost:3000/Special均正常显示对应页面
• 停止本地服务后执行：

npm run build
firebase deploy --only hosting

• 线上访问https://sampleapp.web.app正常，但访问https://sampleapp.web.app/Special出现404错误。

问题出在这 #

你用output: 'export'构建的是静态站点，Next.js会把每个路由生成[路由名]/index.html的结构，比如/Special对应out/Special/index.html。但Firebase Hosting默认不认/Special这种不带斜杠的路径，它会尝试寻找名为Special的文件，找不到就返回404。

这么改就行 #

修改firebase.json，加上两个关键配置：

{
  "hosting": {
    "public": "out",
    "site": "sampleapp",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true, // 允许访问/Special时自动加载/Special/index.html
    "trailingSlash": true // 自动把/Special重定向到/Special/，兼容两种访问方式
  }
}

改完重新执行npm run build和firebase deploy --only hosting，再访问/Special就正常了。

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