next.js bundle analyzer outputs 3 pages

I've started my first project in NextJs and I'm using next and @next/bundle-analyzer - both version 12.3.1.

When I run in command line ANALYZE=true next build, I receive the following output:

info  - Skipping linting
info  - Checking validity of types
Webpack Bundle Analyzer saved report to /(...)/.next/server/analyze/server.html

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to /(...)/.next/analyze/server.html
Webpack Bundle Analyzer saved report to /(...)/.next/analyze/client.html

And in the browser are opened 3 new tabs.

.next/server/analyze/server.html - contains the server-side modules. All good.

.next/analyze/server.html - is a blank page, only with the sidebar on the left.

.next/analyze/client.html - contains the client-side modules. All good.

But, according to @next/bundle-analyzer documentation:

two HTML files (client.html and server.html) will be outputted to /analyze/.

It is not clear if I'm doing something wrong or it is just normal that @next/bundle-analyzer produces 3 files as an output.

next.config.js

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

/** @type {import('next').NextConfig} */
module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  experimental: {
    newNextLinkBehavior: true
  },
  eslint: {
    ...
  },
  images: {
    minimumCacheTTL: 300
  }
}

Thank you.

Solution

That is normal, since next builder launches webpack 3 times with 3 different configs, and gets 3 different bundle sets, and your @next/bundle-analyzer plugin applies to each of them;
If you don't want this behavior (for example you need only client report and that's it), the only way to customize it - is to drop using @next/bundle-analyzer, and instead customize webpack's config in next.config.js to generate only one report, along these lines:

    if (config.name === 'client' && process.env.ANALYZE) {
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          openAnalyzer: true,
          reportFilename: `./analyze/client.html`,
        }),
      );
    }

Mind the config.name === 'client' part. Also, do not forget to ditch the original @next/bundle-analyzer plugin