@next/bundle-analyzer无法生成可视化页面，求排查问题

你的问题出在Next.js插件的组合调用方式错误，导致@next/bundle-analyzer没有被正确挂载到Next.js的构建流程中，自然无法生成可视化分析文件。

错误原因分析 #

你当前的next.config.js里，把withBundleAnalyzer()作为withPWA的第二个参数传入了，但withPWA只接受一个配置对象参数，第二个参数会被直接忽略——这就导致bundle-analyzer插件完全没有生效，构建流程根本没触发它的分析逻辑。

正确的配置写法 #

Next.js的插件需要通过链式调用的方式组合，把一个插件的返回值作为另一个插件的参数传入，正确的配置应该是这样的：

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')
const withBundleAnalyzer = require('@next/bundle-analyzer')({ 
  enabled: process.env.ANALYZE === 'true', 
})

// 链式组合插件：用withBundleAnalyzer包裹withPWA的配置
module.exports = withBundleAnalyzer(
  withPWA({
    pwa: { 
      dest: 'public', 
      runtimeCaching, 
    },
    poweredByHeader: false,
  })
)

额外验证步骤 #

1. 确认依赖已安装：确保你已经安装了cross-env和@next/bundle-analyzer，如果没有的话执行：

   npm install --save-dev cross-env @next/bundle-analyzer
   

2. 检查生成路径：执行npm analyze完成构建后，可视化HTML文件默认会生成在.next/analyze文件夹下，你可以直接打开里面的文件查看分析结果。
3. 环境变量验证：如果还是有问题，可以在构建前先打印环境变量确认ANALYZE是否为true，比如临时修改package.json里的命令：

   "analyze": "cross-env ANALYZE=true echo $ANALYZE && next build"
   

   执行后如果输出true，说明环境变量设置正常。

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