Capítulo 92 de 456

Codemods

Core Idea

@next/codemod roda transformações programáticas no codebase para acompanhar mudanças de API entre versões, evitando edição manual arquivo por arquivo — inclui um comando de upgrade all-in-one e uma coleção de codemods pontuais por versão.

Key Concepts

  • npx @next/codemod <transform> <path>: sintaxe geral para rodar um codemod específico; suporta --dry (simulação sem editar) e --print (mostra o diff).
  • npx @next/codemod upgrade [revision]: comando que atualiza Next.js/React/React DOM E roda os codemods recomendados automaticamente; revision aceita patch/minor/major, dist tag (latest/canary/rc) ou versão exata; default é minor.
  • --yes/-y: pula todos os prompts interativos, aceitando os defaults (upgrade React além da 18, habilitar Turbopack, aplicar codemods recomendados, rodar codemods do React 19); auto-habilitado quando stdin não é um TTY (CI, agente de IA).
  • Se a versão-alvo for igual ou menor que a atual: o comando sai sem fazer mudanças.

Code Examples

# Upgrade para o último minor (default)
npx @next/codemod upgrade minor

# Upgrade para o último major
npx @next/codemod upgrade major

# Rodar via agente/CI, pulando todos os prompts
npx @next/codemod upgrade canary --yes
  • O que demonstra: as três formas mais comuns de invocar o comando de upgrade guiado.
+ // TODO: Cache Components adoption. Refactor this route so this opt-out can be removed.
+ export const instant = false
+
  export default function Page() {
    return <h1>Hello</h1>
  }
  • O que demonstra: cache-components-instant-false (16.3) adiciona opt-out explícito por rota para permitir habilitar cacheComponents gradualmente.
// Antes
import { cookies, headers } from 'next/headers'
const token = cookies().get('token')
// Depois (next-async-request-api, 15.0)
import { use } from 'react'
import { cookies, headers } from 'next/headers'
const token = use(cookies()).get('token')
  • O que demonstra: next-async-request-api migra APIs dinâmicas síncronas (cookies(), headers(), draftMode()) para o modelo assíncrono, usando await ou React.use() conforme o contexto; quando não é possível migrar automaticamente, adiciona typecast ou comentário para revisão manual.

Reference Tables

VersãoCodemodO que faz
16.3cache-components-instant-falseAdiciona export const instant = false em todo page/layout/default sem essa export, pra habilitar cacheComponents gradualmente
16.3remove-partial-prefetchRemove export const prefetch = 'partial' após habilitar partialPrefetching globalmente
16.0remove-experimental-pprRemove experimental_ppr do Route Segment Config
16.0remove-unstable-prefixRemove prefixo unstable_ de API estabilizada (ex. unstable_cacheTagcacheTag)
16.0middleware-to-proxyMigra middleware.ts/export middleware para proxy.ts/export proxy, e renomeia as opções de config correspondentes
16.0next-lint-to-eslint-cliMigra de next lint para ESLint CLI, gerando eslint.config.mjs
15.0app-dir-runtime-config-experimental-edgeTransforma runtime = 'experimental-edge' em runtime = 'edge' (App Router)
15.0next-async-request-apiMigra cookies()/headers()/draftMode() de síncrono para assíncrono
14.0next-request-geo-ipSubstitui geo/ip de NextRequest por @vercel/functions (geolocation/ipAddress)
14.0next-og-importMove import de ImageResponse de next/server para next/og
14.0metadata-to-viewport-exportMigra metadata de viewport (themeColor, etc.) para export viewport separado
13.2built-in-next-fontMigra @next/font para next/font embutido, desinstalando o pacote antigo
13.0next-image-to-legacy-imageRenomeia next/imagenext/legacy/image e next/future/imagenext/image
13.0next-image-experimental(Perigoso) migra next/legacy/image para o novo next/image, adicionando estilos inline e removendo props obsoletas (layout, objectFit, objectPosition, lazyBoundary, lazyRoot)
13.0new-linkRemove tags <a> de dentro de <Link>
11cra-to-nextMigra projeto Create React App para Next.js (Pages Router)
10add-missing-react-importAdiciona import de React ausente, necessário para o novo JSX transform
9name-default-componentNomeia componentes anônimos por Fast Refresh exigir nome
8withamp-to-configTransforma HOC withAmp em config de página (removido no Next.js 16 junto com suporte a AMP)

Anti-patterns

  • Rodar next-image-experimental sem revisão: o próprio nome indica que é "dangerously" migratório — remove props e adiciona estilos inline automaticamente, exige checagem visual pós-migração.
  • Apontar o codemod pro caminho errado num projeto src/: reporta 0 ok silenciosamente em vez de falhar — sempre conferir a contagem de arquivos afetados, e usar ./src/app quando aplicável.

Key Takeaways

  1. Prefira npx @next/codemod upgrade [revision] para upgrades completos — ele já cuida de atualizar dependências e rodar os codemods recomendados.
  2. Use --dry para simular antes de aplicar, e --print para revisar o diff.
  3. Em CI/agentes de IA, o modo não-interativo (--yes ou detecção automática de stdin não-TTY) evita travar em prompts.
  4. Suporte a AMP e seu codemod (withamp-to-config) foram removidos no Next.js 16.

Connects To

  • Upgrading (ch091): página-índice que aponta para este guia.
  • Version 15 (ch094) / Version 16 (ch095): breaking changes específicas que os codemods de mesma versão endereçam.