Capítulo 337 de 456

Version 13

Core Idea

Guia de upgrade de Next.js 12 para 13: introduz o diretório app (opcional), consolida o novo next/image, <Link> sem <a> filho obrigatório, e next/font.

Key Concepts

  • app directory: nova convenção de roteamento introduzida nesta versão; upgrade para v13 NÃO exige migrar para app, pode-se continuar em pages.
  • next/image (novo comportamento): o comportamento experimental de next/future/image (v12) vira o default de next/image; import antigo renomeado para next/legacy/image.
  • <Link> sem <a> filho: <Link> sempre renderiza <a> internamente e repassa props; legacyBehavior prop mantém comportamento antigo.
  • next/font: novo módulo de otimização de fontes, com customização e privacidade, substituindo o antigo inlining automático de CSS.
  • next/script: comportamento atualizado para suportar tanto pages quanto app.

Principais mudanças/features

  • Browsers suportados: dropa Internet Explorer, alvo browsers modernos.
  • Node.js mínimo: 16.14.0 (de 12.22.0).
  • React mínimo: 18.2.0 (de 17.0.2).
  • swcMinify muda default de false para true.
  • next/image → next/legacy/image; next/future/image → next/image.
  • <Link> não aceita mais <a> como filho (a não ser com legacyBehavior).
  • target config removida, substituída por Output File Tracing.

Code Examples

npm i next@13 react@latest react-dom@latest eslint-config-next@13
  • O que demonstra: comando de upgrade padrão para v13.
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
  About
</Link>
  • O que demonstra: a mudança de comportamento do <Link>, migrável via codemod new-link.

Reference Tables

Import antigoImport novo (v13)
next/imagenext/legacy/image
next/future/imagenext/image

Anti-patterns

  • Manter <a> como filho de <Link> sem legacyBehavior: quebra em v13; rodar codemod new-link para migrar automaticamente.
  • Assumir que upgrade para v13 exige migrar para app: falso — pages continua totalmente suportado com os novos recursos compartilhados (Image, Link, Script, Font).

Key Takeaways

  1. v13 é o marco de introdução do App Router, mas não força migração.
  2. Dois codemods cobrem a migração de imagem: next-image-to-legacy-image (renomeia) e next-image-experimental (adota o novo comportamento, apenas uso estático).
  3. next/font substitui o inlining automático de CSS de fontes anterior.

Connects To

  • Codemods (ch333): next-image-to-legacy-image, next-image-experimental, new-link cobrem as migrações desta versão.
  • Version 14 (ch338): continua a evolução (remoção de next export, next/og).
AnteriorVersion 12PróximoVersion 14