如何将NextJS项目构建为符合ES5规范的产物？

Next.js默认从12版本开始编译目标为ES2017，仅添加polyfill无法解决语法层面的ES6+特性问题，可按以下步骤配置实现全量ES5降级：

第一步：调整next.config.js基础配置 #

修改根目录下的next.config.js，明确指定编译目标为ES5，关闭不兼容的ES模块特性：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 静态导出需求可开启
  output: "export",
  compiler: {
    swcMinify: true,
    // SWC语法降级配置（Next.js 12+默认使用SWC编译）
    swc: {
      jsc: {
        target: "es5",
        transform: {
          react: {
            runtime: "automatic"
          }
        }
      },
      env: {
        targets: {
          ie: "11" // 可替换为你需要适配的最低版本设备
        }
      }
    }
  },
  experimental: {
    // 禁用ES模块外部依赖，强制转译为CommonJS兼容ES5
    esmExternals: false
  },
  // 转译包含ES6+语法的第三方依赖
  transpilePackages: []
}

module.exports = nextConfig

第二步：补充Babel配置（仅适用于使用自定义Babel的项目） #

如果你的项目仍使用Babel编译（Next.js 11及更早版本，或手动关闭SWC的项目），在根目录新建.babelrc文件：

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "ie": "11"
          },
          "useBuiltIns": "usage",
          "corejs": 3
        }
      }
    ]
  ]
}

该配置会自动完成语法降级、按需注入polyfill，覆盖箭头函数、解构、let/const等所有ES6+语法的转换。

第三步：处理第三方依赖的ES6+语法 #

通常_app产物中残留的ES6特性都来自未被转译的第三方依赖：

• 先通过es-check定位报错的代码片段，找到对应的npm包名
• 将包名填入next.config.js的transpilePackages数组中，Next.js会在构建时对这些依赖做二次转译

第四步：验证产物兼容性 #

构建完成后执行以下命令全量检测静态JS文件：
npx es-check es5 out/**/*.js
无报错即说明所有产物均符合ES5规范。

注意事项 #

• Next.js 13+的App Router默认生成的服务端组件产物包含大量无法降级到ES5的语法，适配ES5必须使用Pages Router
• 不要使用开发环境产物做兼容性检测，必须使用next build生成的生产环境产物测试

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