在Next.js项目中添加Webpack Bundle Analyzer插件遇报错问题

错误原因很明确：Next.js的next.config.js根配置中不存在plugins这个允许的属性，你需要通过webpack配置项来注入插件。

正确的配置方式如下：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, { isServer }) => {
    // 将BundleAnalyzerPlugin添加到webpack配置的插件列表中
    config.plugins.push(new BundleAnalyzerPlugin());
    // 返回修改后的配置
    return config;
  },
};

module.exports = nextConfig;

补充说明 #

• webpack是Next.js允许的根配置属性，它接收一个函数，参数为原始的webpack配置和构建上下文（包含isServer等标识）
• 如果只需要在客户端构建时启用分析，可以通过isServer判断：

  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.plugins.push(new BundleAnalyzerPlugin());
    }
    return config;
  },
  

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