When you deploy a service,

you should try to reduce the package size. You can use webpack bundle analyzer to check the package size.
I tried to setup next.js with webpack bundle analyzer, but the setup failed.

No search results were found for the above combination.

So, I used the package below.

@next/bundle-analyzer
https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer

It exists on the next.js github page.

Here are a few notes to keep in mind while setting it up.

• I recommend using next-compose-plugins to configure packages dynamically.
• It took me a while to find this setting.

Configure the package referring to the settings below.

package.json

  "scripts": {
    ...
    "analyze": "ANALYZE=true next build"
  },

  "devDependencies": {
    ...
    "next-compose-plugins": "^2.2.1",
    "@next/bundle-analyzer": "^12.3.0",
  }

next.config.js

/** @type {import('next').NextConfig} */

const withPlugins = require('next-compose-plugins');

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

module.exports = withPlugins([[withBundleAnalyzer]], {
  reactStrictMode: false,
  compress: true,
});

run

% yarn analyze