React Production Profiling Support for Next.js

next.config.js

//
// See: https://kentcdodds.com/blog/profile-a-react-app-for-performance#build-and-measure-the-production-app
// See: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin');

module.exports = {
  webpack: (config, options) => {
    
    //
    // Use profiler-enabled React builds
    //
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    };

    //
    // Disable mangling for easier profiling
    // WARNING: This increases bundle size, DO NOT DO THIS in production!
    //
    const terser = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);

    if (terser) {
      terser.options.terserOptions = {
        ...terser.options.terserOptions,
        keep_classnames: true,
        keep_fnames: true,
      };
    }
    
    return config;
  }
}

I think you could safely remove L4 and replace L22 with this as well, if you wanted to maybe remove a possible internal dependency:

- const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin');

- const terser = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);
+ const terser = config.optimization.minimizer.find((plugin) => plugin?.options?.terserOptions);

That will search for the TerserPlugin without comparing the exact instance. 🤷 Up to you!

Note: I originally tried options.webpack.TerserPlugin but that didn't work 😢

This doesn't seem to work with Next 11. Next appears to handle minification via Terser internally now, rather than adding a plugin to the Webpack config:

https://github.com/vercel/next.js/blob/0af3b526408bae26d6b3f8cab75c4229998bf7cb/packages/next/build/webpack/plugins/terser-webpack-plugin/src/minify.js

I had to patch the minify function directly.