Como analisar o bundle do Next.js

É hora de otimizar seu projeto, e para isso o Next.js possui um pacote integrado com o bundle-analyzer, o next-bundle-analyzer.

Analisar gráfico de bundle no Next.js:

1. Abra seu package.json e  adicione o script:

"analyze": "ANALYZE=true next build"

2. Ficará algo próximo disso:

{
  "name": "nextproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "analyze": "ANALYZE=true next build",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

3. Agora instale o pacote de bundler do Next.js

npm install --dev @next/bundle-analyzer

ou caso esteja usando yarn

yarn add -D @next/bundle-analyzer

4. Crie um arquivo `next.config.js` na raiz de seu projeto e adicione o seguinte:

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


module.exports = withBundleAnalyzer({
/* Caso tenha outros plugins envolva eles com o bundle */
});

Agora rode o comando npm run analyze ou yarn analyze e o Next.js irá gerar uma build com o bundler. No final do processo o mapa do bundle será mostrado em seu navegador e no terminal.

Esta é uma ferramenta que pode ajudá-lo na análise de sua build e lhe dar uma direção de por onde começar a sua otimização.