As descobertas que faço e coisas que aprendo

É 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.

Bundle server Next.js aberto no navegador

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.

You've successfully subscribed to Segredo Dev
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.