如何在Firebase部署的NextJS应用中创建/Special新路由

1. 按规则创建路由文件结构 #

Next.js App Router的核心规则是：每个可访问的路由目录必须包含page.tsx作为入口文件。你需要在app目录下新建Special文件夹，并在其中创建page.tsx文件，最终文件结构如下：

-> myownthing
    -> next.config.js
    -> firebase.json
    -> .....
    -> app
        -> page.tsx
        -> layout.tsx
        -> Special
            -> page.tsx

2. 编写Special页面内容 #

在app/Special/page.tsx中添加基础页面代码，示例如下：

export default function SpecialPage() {
  return (
    <div>
      <h1>Special 页面</h1>
      <p>这是通过 /Special 访问的路由页面</p>
    </div>
  );
}

3. 本地验证路由有效性 #

运行本地开发命令：

npm run dev
# 或
yarn dev

打开浏览器访问http://localhost:3000/Special，确认页面能正常加载显示。

4. 部署到Firebase的关键检查 #

• 确认firebase.json配置正确：Firebase托管Next.js App Router需要正确的重写规则，确保你的firebase.json中hosting部分包含如下配置（通常初始化项目时会自动生成，若手动修改过需核对）：

{
  "hosting": {
    "source": ".",
    "frameworksBackend": {
      "region": "us-central1"
    },
    "rewrites": [
      {
        "source": "**",
        "function": "nextjsServer"
      }
    ]
  }
}

• 先本地构建再部署：执行构建命令确保无语法错误：

npm run build
# 或
yarn build

• 执行部署：

firebase deploy

部署完成后访问https://myownthing.web.app/Special即可。

常见问题排查 #

• 如果路由无效，优先检查Special文件夹下是否存在page.tsx——没有这个文件的话，Next.js不会生成对应路由。
• 查看构建和部署日志，排查是否有TypeScript语法错误或部署失败提示。
• 清除浏览器缓存后重试，避免旧缓存导致新路由无法加载。

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