Firebase部署最新版Next.js项目后页面无法正常显示的问题求助

核心问题分析 #

最新版Next.js（App Router模式）部署到Firebase Hosting时，默认firebase init生成的配置未正确适配Next.js的构建逻辑，导致Firebase无法正确识别和加载应用资源，最终引发页面异常。

具体问题点及修复方案 #

1. 配置文件未适配Next.js构建输出 #

你的firebase.json中source设为.，但未明确关联Next.js的核心构建产物.next文件夹，Firebase无法正确解析SSR/SSG资源。

修复后的配置示例（适配Next.js 13+ App Router）：

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**",
      ".next/**"
    ],
    "frameworksBackend": {
      "region": "us-central1",
      "maxInstances": 1
    }
  },
  "functions": {
    "source": ".next/functions"
  }
}

同时确保firebase-tools为最新版本，避免兼容性问题：

npm install -g firebase-tools

2. 部署前未执行完整构建 #

即使本地构建正常，部署前必须在项目根目录重新执行构建命令，确保Firebase上传的是最新产物：

npm run build

完成后再执行firebase deploy --only hosting。

3. 静态导出模式配置错误 #

若你将Next.js配置为静态导出模式（next.config.js中添加output: 'export'），构建后会生成out文件夹，此时firebase.json需指定静态资源目录：

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

此模式下无需frameworksBackend字段，因为是纯静态站点。

4. Framework Backend初始化不完整 #

若使用SSR/ISR模式，Firebase需将Next.js服务部署为Cloud Functions，默认初始化流程可能未完成关联。可重新执行firebase init hosting，选择**"Use an existing framework"**并指定Next.js，让工具自动生成适配配置。

验证步骤 #

• 确认.next文件夹存在且内容完整
• 执行firebase serve --only hosting本地模拟部署，排查页面是否正常加载
• 查看Firebase控制台Hosting日志，定位404或服务错误信息

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