Babel

Core Idea

Next.js já inclui o preset next/babel (necessário pra compilar React + código server-side); pra estender a config de Babel padrão, crie .babelrc/babel.config.js incluindo esse preset como base.

Key Concepts

• next/babel: preset padrão do Next.js; se você criar um .babelrc, ele vira a fonte de verdade e precisa reincluir next/babel explicitamente.
• Adicionar preset/plugin sem config: basta listar em plugins/presets no .babelrc.
• Customizar opções do next/babel: passar objeto de config como segundo item do array ["next/babel", { ... }], com chaves como preset-env, transform-runtime, styled-jsx, class-properties.

Code Examples

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

• O que demonstra: forma correta de customizar sub-presets dentro de next/babel sem perder o comportamento padrão.

Anti-patterns

• Definir modules: true (ou remover false) em preset-env: desliga o code splitting do webpack; a opção modules deve ficar false.
• Criar .babelrc sem incluir next/babel: perde as transformações necessárias pro Next.js compilar corretamente.

Key Takeaways

1. .babelrc/babel.config.js na raiz vira fonte de verdade total, sempre reinclua next/babel.
2. Customização de sub-presets vai no segundo elemento do array do preset next/babel.
3. Nunca ligar modules no preset-env, isso quebra code splitting.

Connects To

• ch317 PostCSS: outro ponto de extensão de pipeline de build do Next.js (CSS em vez de JS).