Next.js 12.3.1使用@next/bundle-analyzer生成3份报告的疑问

现象本质 #

你遇到的3份报告共存、其中.next/analyze/server.html空白的情况，属于Next.js 12.x版本（含12.3.1）的正常兼容性遗留现象，并非操作错误。

Next.js 12.x在迭代中调整了服务端打包产物的输出路径，而同期的@next/bundle-analyzer插件在适配路径变化时，出现了重复生成报告的问题：

• .next/server/analyze/server.html是对应新版服务端打包产物的有效报告，所以能正常显示模块分析内容
• .next/analyze/server.html是插件适配旧路径时生成的冗余文件，因为找不到对应打包产物，所以仅显示侧边栏、主体空白

官方文档描述的两份文件，指的是实际有效的分析报告，冗余的空白文件可以直接忽略或删除。

配置验证与优化 #

先确认你的next.config.js是否为常规正确写法（示例如下），如果是则配置本身没有问题：

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

module.exports = withBundleAnalyzer({
  // 你的其他Next.js配置项
})

如果想避免生成冗余空白文件，可以尝试两种方案：

1. 升级版本：直接升级到Next.js 13.x及对应版本的@next/bundle-analyzer，新版本已修复路径适配问题，只会生成两份有效报告
2. 添加清理脚本：若暂时无法升级，可在package.json的构建脚本中增加清理步骤，例如：

   "scripts": {
     "build:analyze": "ANALYZE=true next build && rm -rf .next/analyze/server.html"
   }
   

总结 #

• 空白的server.html是版本适配过渡阶段的冗余产物，不影响核心分析功能
• 日常分析以.next/server/analyze/server.html（服务端）和.next/analyze/client.html（客户端）这两份有效报告为准即可

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