在 Next.js 项目中添加 webpack 插件

Question

我正在尝试将Webpack Bundle Analyzer添加到我的 Next.js 应用程序中。我尝试next.config.js按如下方式更新我的：

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

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  plugins: [new BundleAnalyzerPlugin()],
};

module.exports = nextConfig;

但这引发了这个错误：

Invalid next.config.js options detected: The root value has an unexpected property, plugins, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).

Answer 1

您收到该错误是因为您没有使用正确的方法在内部自定义 Webpack next.config.js。您将这样做：

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

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, { dev }) => {
    // The condition is to have the plugin on build time, not to perturb live refresh
    !dev && config.plugins.push(new BundleAnalyzerPlugin());
    return config;
  },
};

module.exports = nextConfig;

有关更多信息，请查看Custom Webpack Config中的文档。