Next.js 15中如何移除@babel/plugin-transform-classes插件？

核心问题分析 #

Next.js 15默认使用SWC编译，但你遇到的Lighthouse警告指向@babel/plugin-transform-classes，说明编译过程中仍在生成ES5兼容的类转换代码。由于next/font依赖SWC，无法通过添加Babel配置文件禁用该插件，需通过SWC自身配置调整。

解决方案 #

1. 调整SWC编译目标与类转换设置 #

在next.config.js中配置SWC的编译参数，强制输出适配现代浏览器的代码，并禁用不必要的类转换逻辑：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    swc: {
      jsc: {
        // 设置目标环境为匹配browserslist的现代ES版本
        target: 'es2020',
        transform: {
          // 禁用SWC的类转换，避免生成ES5兼容代码
          classes: false,
        },
      },
    },
  },
  // 显式指定browserslist配置文件路径，确保配置生效
  browserslistConfigFile: './package.json',
};

module.exports = nextConfig;

2. 确认browserslist配置格式正确性 #

检查package.json中的browserslist配置是否为标准JSON格式，无语法错误：

{
  "browserslist": [
    "defaults",
    ">0.2%",
    "not ie <= 11",
    "not op_mini all"
  ]
}

3. 排查第三方依赖的插件注入 #

部分第三方依赖可能在内部引入@babel/plugin-transform-classes，可通过以下方式定位：

• 执行npm ls @babel/plugin-transform-classes查看依赖树，找到引入该插件的包
• 查看对应依赖的package.json，确认是否包含Babel相关配置

若找到相关依赖，优先升级到支持现代编译的版本；必要时可通过SWC的external配置排除该依赖的编译（需测试兼容性）。

4. 验证编译输出 #

执行npm run build后，检查.next/static/js目录下的打包文件，确认是否还存在ES5类转换代码（如_classCallCheck、_createClass等标识函数）。若代码已转为原生ES类，则警告应消失。

注意事项 #

• 调整SWC的target时，需确认目标浏览器支持所选ES版本
• 禁用classes转换后，需测试页面在目标浏览器中的兼容性，避免类相关运行时错误

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