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:

1
  "analyze": "ANALYZE=true next build"

2. Ficará algo próximo disso:

1
{
2
  "name": "nextproject",
3
  "version": "1.0.0",
4
  "description": "",
5
  "main": "index.js",
6
  "scripts": {
7
    "dev": "next",
8
    "build": "next build",
9
    "start": "next start",
10
    "analyze": "ANALYZE=true next build"
11
  },
12
  "keywords": [],
13
  "author": "",
14
  "license": "ISC",
15
  "dependencies": {
16
    "next": "^9.1.2",
17
    "react": "^16.11.0",
18
    "react-dom": "^16.11.0"
19
  }
20
}

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:

   1
   const withBundleAnalyzer = require('@next/bundle-analyzer')({
   2
   enabled: process.env.ANALYZE === 'true',
   3
   })
   4
       module.exports = withBundleAnalyzer({
   5
       /* Caso tenha outros plugins envolva eles com o bundle */
   6
       });
   7
       ```
   8
   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.
   9
   ![](/images/posts/bundle-nextjs.png)Bundle server Next.js aberto no navegador
   10
   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.