Capítulo 22 de 456

AI Coding Agents

Core Idea

Configure o projeto para que agentes de IA (Claude Code, Codex, Cursor, GitHub Copilot) leiam a documentação bundled da versão instalada do Next.js em vez de confiar em training data desatualizado, e dê visibilidade em runtime via MCP server e browser tooling.

Key Concepts

  • AGENTS.md: arquivo na raiz do projeto que direciona agentes para node_modules/next/dist/docs/, espelhando a estrutura de nextjs.org/docs; auto-gerado por create-next-app e (16.3+) por next dev quando detecta um agente de IA no ambiente.
  • CLAUDE.md: gerado junto, contém @AGENTS.md (referência).
  • Managed block: conteúdo entre e é reescrito automaticamente por next dev; instruções próprias do projeto devem ficar fora dessas marcações.
  • agentRules: false: opção em next.config.ts para desativar a auto-geração do managed block.
  • --no-agents-md: flag do create-next-app para não gerar os arquivos de agente.
  • agents-md codemod: para Next.js 16.1 e anteriores (docs não bundled), baixa cópia versionada para .next-docs/ e indexa em AGENTS.md.
  • Docs via rede: qualquer página em nextjs.org/docs aceita .md no final da URL, ou header Accept: text/markdown; existe /docs/llms.txt e /docs/llms-full.txt seguindo a convenção llms.txt.
  • Next.js MCP server: em /_next/mcp, expõe rotas, logs do servidor e problemas de compilação do dev server; ferramentas get_compilation_issues e compile_route.
  • agent-browser: CLI que expõe DOM, console, network e Web Vitals como texto estruturado; com --enable react-devtools também reporta a árvore de componentes e Suspense boundaries pendentes.
  • .next/dev/lock: arquivo com PID, port e URL do next dev rodando; evita que um segundo next dev no mesmo projeto suba um servidor duplicado.
  • logging.browserToTerminal: config que encaminha erros/warnings do console do browser para o terminal do next dev.
  • Skills oficiais: next-dev-loop, next-cache-components-adoption, next-cache-components-optimizer, next-partial-prefetching-adoption (instaladas via npx skills add vercel/next.js --skill <nome>).

Code Examples



# This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` ... before writing any code.


  • O que demonstra: Estrutura do managed block auto-gerado; instruções do projeto devem ficar fora dessas marcações para não serem sobrescritas.
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  agentRules: false,
}

export default nextConfig
  • O que demonstra: Como desativar completamente a auto-geração de AGENTS.md/CLAUDE.md.
npx skills add vercel/next.js --skill next-dev-loop
  • O que demonstra: Instalação de uma skill oficial via CLI skills.

Reference Tables

SkillTipoFunção
next-dev-loopRuntime foundationLoop inspecionar/editar/verificar contra dev server via MCP + browser
next-cache-components-adoptionInteractive workflowMigra app para Cache Components, rota por rota, com checkpoints
next-cache-components-optimizerUnattended loopEscreve teste instant() falhando e refatora até UI ficar instantânea
next-partial-prefetching-adoptionInteractive workflowMigra app para Partial Prefetching, requer Cache Components já adotado

Anti-patterns

  • Remover o managed block do AGENTS.md manualmente: ele é recriado a cada next dev; se não quiser o comportamento, use agentRules: false em vez de editar/deletar.
  • Usar Skills para conhecimento básico de framework: Skills servem para workflows multi-etapa (ex.: migração), não para lookup de API, isso vem dos docs bundled, que têm melhor desempenho em benchmark.

Key Takeaways

  1. Instale/gera AGENTS.md para que o agente leia a documentação da versão instalada em vez de dados de treino desatualizados, crítico porque Next.js 16 tem breaking changes.
  2. next dev (16.3+) auto-gera AGENTS.md/CLAUDE.md quando detecta agente de IA; conteúdo customizado deve ficar fora do managed block.
  3. Dê visibilidade em runtime ao agente via MCP server (/_next/mcp, visão do framework) e agent-browser (visão do browser) em vez de depender só de next build.
  4. Erros de build com Cache Components mostram fixes rotulados e um botão "Copy prompt" pronto para colar num agente.
  5. Use as Skills oficiais para migrações multi-passo (Cache Components, Partial Prefetching); não são substitutas da doc bundled para lookup simples.

Connects To

  • caching (Cache Components): alvo da skill next-cache-components-adoption e das mensagens de erro de blocking prerender.
  • adopting-partial-prefetching (ch021): alvo da skill next-partial-prefetching-adoption, requer Cache Components primeiro.
  • upgrading (ch019): atualizar o Next.js também atualiza a documentação bundled usada pelos agentes.