Capítulo 335 de 456

Version 11

Core Idea

Guia de upgrade de Next.js 10 para 11: Webpack 5 vira default, várias APIs deprecated são removidas, e a base de React sobe para 17.0.2.

Key Concepts

  • Webpack 5 default: apps sem config customizado já usam webpack 5 automaticamente.
  • cleanDistDir: novo default limpa .next a cada build (exceto caches); desativável com cleanDistDir: false.
  • PORT env var: suportada por next dev/next start como alternativa a -p.
  • images.disableStaticImages: opção para desabilitar o novo suporte nativo a static image imports (substitui next-images/next-optimized-images).
  • excludeDefaultMomentLocales: exclui locales do Moment.js por default para reduzir bundle; default true.
  • router.events fora de render: agora só disponível dentro de useEffect, não durante prerender.

Principais mudanças/features

  • Webpack 5 é o default; webpack 4 custom config precisa de migração (ver docs de webpack5).
  • distDir limpo automaticamente a cada build.
  • Suporte a PORT env var.
  • Static image imports nativos via next/image.
  • Removido: super.componentDidCatch() de _app.js, Container de next/app, props.url, unsized prop de next/image (usar layout="fill"), modules/render de next/dynamic, Head.rewind.
  • Moment.js locales excluídos por default.
  • React mínimo passa a ser 17.0.2 (novo JSX Transform, não precisa mais import React).

Code Examples

npm i next@11 react@17 react-dom@17
  • O que demonstra: comando de upgrade incluindo bump obrigatório de React para 17.
module.exports = {
  images: {
    disableStaticImages: true,
  },
}
  • O que demonstra: opt-out do processamento nativo de imports estáticos de imagem.
useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(`App is changing to ${url} ${shallow ? 'with' : 'without'} shallow routing`)
  }
  router.events.on('routeChangeStart', handleRouteChange)
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])
  • O que demonstra: padrão correto para acessar router.events, agora restrito a useEffect.

Anti-patterns

  • Usar router.router.events: propriedade interna não-pública removida; usar router.events.
  • Manter CSS custom targeting .container span para next/image: pode colidir com o novo <span> wrapper introduzido nesta versão (mudança completada na v12).

Key Takeaways

  1. React 17 é obrigatório; o codemod add-missing-react-import corrige código que dependia do import global implícito.
  2. cleanDistDir pode quebrar workflows que dependiam de artefatos residuais em .next.
  3. Várias APIs deprecated desde Next 4/8/9 foram efetivamente removidas nesta versão, não apenas avisadas.

Connects To

  • Codemods (ch333): add-missing-react-import resolve a migração do JSX Transform.
  • Version 12 (ch336): continua a evolução do next/image wrapper element.
AnteriorVersion 10PróximoVersion 12