Next.js SSR项目本地构建正常，部署到AWS Amplify报webpack错误如何解决

本次错误的核心原因是SSR模式下，Amplify构建环境缺少Firebase服务端运行所需的环境变量，且Firebase服务端依赖未被webpack标记为外部项导致打包失败，可按以下步骤修复：

1. 配置Amplify环境变量 #

• 进入AWS Amplify控制台对应项目的「环境变量」配置页
• 新增以下Firebase服务端必填参数，值和本地开发使用的配置保持一致：
  • FIREBASE_PROJECT_ID
  • FIREBASE_CLIENT_EMAIL
  • FIREBASE_PRIVATE_KEY（如果私钥包含换行符，需替换为\n避免解析异常）
• 所有新增的环境变量都要勾选「允许构建时访问」选项

2. 调整Next.js webpack配置 #

在项目根目录的next.config.js中添加如下配置，将Firebase相关依赖标记为服务端外部包，避免webpack打包时报错：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.externals.push('firebase-admin', 'firebase/firestore', 'firebase/auth')
    }
    return config
  },
  // Next.js 13+ App Router版本需额外添加以下配置
  experimental: {
    serverComponentsExternalPackages: ['firebase-admin', 'firebase']
  }
}

module.exports = nextConfig

3. 校验Amplify构建配置 #

确认项目根目录的amplify.yml适配Next.js SSR构建要求，参考配置如下：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

以上配置修改完成后提交代码到GitHub，重新触发Amplify部署即可解决相关webpack报错。

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