Next.js项目Firebase部署异常，寻求解决方案

你在把Next.js项目部署到Firebase Hosting时踩了两个典型的配置坑：错误指定了Firebase的静态文件目录，以及没正确配置Next.js的静态导出规则。下面是一步步的解决方案：

1. 配置Next.js生成静态导出产物 #

Next.js默认的npm run build是为SSR/SSG场景准备的，如果你要部署纯静态版本到Firebase Hosting，需要先在项目根目录的next.config.js中添加静态导出配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 如果你的项目部署在Firebase的子路径下，还需添加basePath配置，比如：
  // basePath: '/my-app'
};

module.exports = nextConfig;

添加这个配置后，执行npm run build会在项目根目录生成out文件夹，里面就是编译好的静态HTML、CSS和JS文件——这才是Firebase Hosting应该指向的正确目录。

2. 修正Firebase配置文件（firebase.json） #

你之前错误地把public字段设为"public"或"pages"，现在需要改成"out"，同时配置SPA路由重写规则，确保Next.js的客户端路由能正常工作：

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

3. 优化GitLab CI配置（可选但推荐） #

你的GitLab CI脚本整体逻辑没问题，但有两个优化点：

• 升级Node.js版本：你用的node:12.13.0-alpine版本过于陈旧，Next.js 13及以上版本要求Node.js 16+，建议换成node:18-alpine避免兼容性问题。
• 添加产物校验：在npm run build后新增ls out命令，确认静态产物目录生成了正确文件，方便排查构建失败问题。

修改后的GitLab CI配置：

image: node:18-alpine
stages:
  - deploy
cache:
  paths:
    - node_modules/
  key: "$CI_BUILD_REPO"
deploy-prod:
  stage: deploy
  only:
    - master
  script:
    - npm install
    - npm run build
    - ls out  # 验证静态产物是否生成
    - npm install -g firebase-tools
    - firebase -V
    - firebase use anvisysytems --token "token_hidden"
    - firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token "token_hidden"

为什么之前的配置会失败？ #

• 设public为"public"时：Next.js的public目录是存放图片、字体这类静态资源的地方，并不是编译后的HTML产物目录，所以Firebase找不到index.html。
• 设public为"pages"时：pages目录是Next.js的源码目录，里面的index.js是未编译的React组件代码，因此Firebase直接把源码渲染到了页面上。

按照上面的步骤配置后，重新执行GitLab CI部署，就能正常加载你的Next.js应用了。

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