{
  "id": "ai-uses-outdated-nextjs-apis",
  "type": "failures",
  "category": "failures",
  "locale": "pt",
  "url": "/pt/failures/ai-uses-outdated-nextjs-apis",
  "title": "Como Corrigir Agentes de Código de IA Usando APIs Desatualizadas do Next.js",
  "description": "Agentes de IA frequentemente geram código Next.js usando padrões obsoletos do Pages Router, getServerSideProps e APIs removidas que quebram projetos App Router.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "nextjs",
    "hallucination",
    "react"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "Agentes de IA treinados em dados mais antigos do Next.js rotineiramente produzem imports de `getServerSideProps`, `getStaticProps` e `next/router` em projetos App Router onde nenhuma dessas APIs existe.\n\n## O sintoma\n\nO agente cria uma página usando convenções do Pages Router dentro de um diretório `app/`, causando um erro de build ou uma operação silenciosa sem efeito.\n\n```tsx\n// app/dashboard/page.tsx — WRONG\nexport async function getServerSideProps() {\n  const data = await fetchData();\n  return { props: { data } };\n}\n\nexport default function Dashboard({ data }) {\n  return <div>{data.title}</div>;\n}\n```\n\nA exportação de `getServerSideProps` é silenciosamente ignorada no App Router; a página renderiza sem dados e sem erro.\n\n## Por que isso acontece\n\nOs modelos são treinados em enormes corpora do Next.js que tendem fortemente a padrões do Pages Router pré-13. O App Router foi introduzido no Next.js 13 (estável em 14) e a data de corte de treinamento de muitos modelos antecede a adoção generalizada. O agente confunde os dois paradigmas porque ambos estão em arquivos chamados `page.tsx`.\n\n## Como identificar\n\n- Imports de `\"next/router\"` em vez de `\"next/navigation\"` em um diretório `app/`.\n- `getServerSideProps`, `getStaticProps` ou `getStaticPaths` exportados de arquivos em `app/`.\n- `useRouter` chamado sem `\"use client\"` no topo do arquivo.\n- `next.config.js` ainda usa `experimental.appDir` (removido no Next.js 14).\n\n## Como corrigir\n\nSubstitua as exportações de busca de dados por Server Components assíncronos e use os hooks de `next/navigation` no lado do cliente.\n\n```tsx\n// app/dashboard/page.tsx — CORRECT\nasync function fetchData() {\n  const res = await fetch(\"https://api.example.com/data\", {\n    next: { revalidate: 60 },\n  });\n  return res.json();\n}\n\nexport default async function Dashboard() {\n  const data = await fetchData();\n  return <div>{data.title}</div>;\n}\n```\n\nLista de verificação:\n\n```txt\n[ ] No getServerSideProps / getStaticProps inside app/\n[ ] Use \"next/navigation\" (useRouter, usePathname, useSearchParams) not \"next/router\"\n[ ] Data fetching is async in the Server Component, not in a prop export\n[ ] next.config.js uses next.config.mjs and removes experimental.appDir\n[ ] Client-only hooks (useRouter etc.) are inside \"use client\" components\n```\n\n## Prompt de Correção\n\n```txt title=\"Fix Prompt\"\nThis file uses Pages Router APIs (getServerSideProps, getStaticProps,\nnext/router) inside an App Router project. Rewrite it using App Router\nconventions: async Server Components for data fetching, next/navigation for\nrouting hooks, and \"use client\" only where browser APIs are required.\nDo not add any Pages Router exports.\n```\n\n## Teste\n\n```bash\n# Fail fast: no Pages Router exports should appear under app/\ngrep -rn \"getServerSideProps\\|getStaticProps\\|getStaticPaths\" app/ && echo \"FAIL: Pages Router API found\" || echo \"OK\"\n\n# Confirm correct navigation import\ngrep -rn \"from \\\"next/router\\\"\" app/ && echo \"FAIL: use next/navigation instead\" || echo \"OK\"\n```"
}