Capítulo 336 de 456

Version 12

Core Idea

Guia de upgrade de Next.js 11 para 12: troca do compilador Babel por SWC (Rust), HMR via WebSocket, e remoção de webpack 4 e da opção target.

Key Concepts

  • SWC: compilador Rust que substitui Babel por default; até 17x mais rápido para arquivos individuais, até 5x mais rápido no Fast Refresh. Config Babel customizado (.babelrc) faz Next.js fazer fallback automático para Babel.
  • swcMinify: flag opt-in para usar SWC em vez de Terser na minificação (até 7x mais rápido); tornou-se default na 12.1.
  • Wrapping element do next/image: <img> passa a ser renderizado dentro de <span> em vez de <div>.
  • HMR via WebSocket: substitui a conexão anterior via server-sent events; requer config de proxy (nginx/Apache/express) para lidar com upgrade de conexão.
  • Remoção do target: deprecated em favor de Output File Tracing automático de dependências.

Principais mudanças/features

  • Node.js mínimo: 12.22.0 (primeira versão com suporte nativo a ES Modules).
  • React mínimo: 17.0.2.
  • SWC substitui Babel e (opcionalmente) Terser.
  • Parser de CSS do styled-jsx reescrito; CSS inválido agora gera erro em dev/build.
  • next/image muda elemento wrapper de <div> para <span>.
  • HMR migra de SSE para WebSocket (path /_next/webpack-hmr, renomeado para /_next/hmr no Next.js 16).
  • Webpack 4 removido — apenas webpack 5 suportado.
  • Opção target: 'serverless' deprecated, substituída por Output File Tracing.

Code Examples

npm i next@12 react@17 react-dom@17 eslint-config-next@12
  • O que demonstra: comando de upgrade padrão incluindo eslint-config-next.
module.exports = {
  swcMinify: true,
}
  • O que demonstra: habilitar minificação via SWC em vez de Terser (opt-in nesta versão).
location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}
  • O que demonstra: config nginx necessária para o novo HMR via WebSocket funcionar atrás de proxy reverso.

Anti-patterns

  • CSS seletor genérico .container span para estilizar next/image: agora colide com o wrapper <span>; usar classe específica como .container span.item.
  • Manter config Babel customizado sem necessidade: força fallback para Babel, perdendo os ganhos de performance do SWC.
  • Não ajustar proxy reverso (nginx/Apache) após upgrade: quebra o HMR em dev, pois a conexão agora é WebSocket, não SSE.

Key Takeaways

  1. SWC é adotado silenciosamente a não ser que haja .babelrc/Babel config customizado presente.
  2. next/image mudou o elemento wrapper duas vezes nesse período (div→span aqui; comportamento consolidado na v13).
  3. Proxies reversos precisam de config explícita de upgrade de conexão para o novo HMR funcionar.
  4. target: 'serverless' não tem mais efeito — usar Output File Tracing.

Connects To

  • Version 13 (ch337): next/image recebe o comportamento definitivo (renomeado para next/legacy/image).
  • Output File Tracing / output config: substitui completamente target.
AnteriorVersion 11PróximoVersion 13