Next.js Performance

Analyzing Packages

Use @next/bundle-analyzer to analyze the bundles of your Next.js application.

Installation

npm install @next/bundle-analyzer

or

yarn add @next/bundle-analyzer

In next.config.js add the withBundleAnalyzer const and then wrap the module.exports in the withBundleAnalyzer() function.

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

module.exports = withBundleAnalyzer({})

Then to run from the command line:

ANALYZE=true yarn build

Conformance

Requires Next.js 11 or greater.

Install

npx next lint

Run

next lint

Install and configure credit

Preact

Does not seem to work in newer versions of Next

npm install preact

Add to next.config.js

module.exports = {
  webpack(config, { dev, isServer }) {
    // Replace React with Preact in client production build
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      })
    }

    return config
  },
}