Capítulo 333 de 456

Codemods

Core Idea

Codemods são transformações programáticas que atualizam automaticamente o código-fonte quando uma API do Next.js muda ou é descontinuada, evitando edição manual arquivo a arquivo.

Key Concepts

  • npx @next/codemod <transform> <path>: comando base para rodar uma transformação específica.
  • npx @next/codemod upgrade [revision]: atualiza Next.js/React/React DOM e roda codemods automaticamente; revision aceita patch/minor/major, dist tag (latest, canary, rc) ou versão exata.
  • --yes/-y: pula todos os prompts interativos, aceitando defaults (upgrade React, habilitar Turbopack, aplicar codemods recomendados); auto-ativado quando stdin não é TTY (CI, agentes de IA).
  • --dry: executa sem editar arquivos.
  • --print: imprime o output alterado para comparação.

Code Examples

# Upgrade to the latest minor (default)
npx @next/codemod upgrade minor

# Run from an agent or CI: skip every prompt
npx @next/codemod upgrade canary --yes
  • O que demonstra: uso padrão do comando de upgrade e o flag necessário em execução não-interativa.
npx @next/codemod@canary cache-components-instant-false ./app
  • O que demonstra: codemod 16.3 que adiciona export const instant = false em cada page/layout/default sem essa export, preparando opt-out gradual do cacheComponents.
npx @next/codemod@latest middleware-to-proxy .
  • O que demonstra: codemod 16.0 que renomeia middleware.<ext>proxy.<ext>, a export middlewareproxy, e as opções de config experimental.middleware*experimental.proxy*.
npx @next/codemod@latest next-async-request-api .
  • O que demonstra: codemod 15.0 que converte cookies(), headers(), draftMode() e acesso a params/searchParams para a API assíncrona (await ou React.use()), inserindo comentários @next/codemod onde não consegue migrar automaticamente.

Reference Tables

VersãoCodemodO que faz
16.3cache-components-instant-falseAdiciona export const instant = false para opt-out de Cache Components
16.3remove-partial-prefetchRemove export const prefetch = 'partial'
16.0remove-experimental-pprRemove experimental_ppr
16.0remove-unstable-prefixRemove prefixo unstable_ de APIs estabilizadas
16.0middleware-to-proxyMigra middlewareproxy
16.0next-lint-to-eslint-cliMigra next lint → ESLint CLI puro
15.0app-dir-runtime-config-experimental-edgeruntime = 'experimental-edge''edge'
15.0next-async-request-apiMigra Dynamic APIs para async
15.0next-request-geo-ipNextRequest.geo/.ip@vercel/functions
14.0next-og-importImageResponse de next/servernext/og
14.0metadata-to-viewport-exportMove viewport de metadata para export const viewport
13.2built-in-next-font@next/fontnext/font
13.0next-image-to-legacy-imagenext/imagenext/legacy/image; next/future/imagenext/image
13.0next-image-experimentalMigra next/legacy/image → novo next/image
13.0new-linkRemove <a> filho obrigatório do <Link>
11cra-to-nextMigra Create React App para Next.js
10add-missing-react-importAdiciona import React faltante
9name-default-componentNomeia componentes anônimos (Fast Refresh)
8withamp-to-configwithAmp HOC → export const config = { amp: true } (removido no Next 16)
6url-to-withrouterprops.urlwithRouter/props.router

Anti-patterns

  • Rodar upgrade com path errado em projeto src/: passar ./src/app explicitamente; um path errado reporta 0 ok silenciosamente em vez de falhar.
  • Ignorar comentários @next/codemod inseridos: o build falha até esses comentários serem removidos manualmente após revisão.

Key Takeaways

  1. upgrade é o comando guarda-chuva; codemods individuais são para migrações pontuais fora do fluxo de upgrade completo.
  2. Em CI/agente (stdin não-TTY), --yes é assumido automaticamente, mas é boa prática passá-lo explicitamente.
  3. Codemods que não conseguem migrar automaticamente inserem typecast/comentário UnsafeUnwrapped* ou @next/codemod para revisão manual.
  4. Sempre verificar contagem de arquivos afetados após rodar um codemod contra um path.

Connects To

  • Version 9-14 guides (ch334-ch339): cada breaking change referenciada aqui tem contexto completo nesses capítulos.
  • Cache Components / Partial Prefetching: features novas da v16 que os codemods 16.x preparam a migração.