{
  "id": "ai-uses-outdated-nextjs-apis",
  "type": "failures",
  "category": "failures",
  "locale": "es",
  "url": "/es/failures/ai-uses-outdated-nextjs-apis",
  "title": "Cómo corregir los agentes de codificación de IA que usan APIs obsoletas de Next.js",
  "description": "Los agentes de IA generan con frecuencia código de Next.js utilizando patrones obsoletos de Pages Router, getServerSideProps y APIs eliminadas que rompen los proyectos de App Router.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "nextjs",
    "hallucination",
    "react"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "Los agentes de IA entrenados con datos antiguos de Next.js producen rutinariamente `getServerSideProps`, `getStaticProps` e importaciones de `next/router` en proyectos de App Router donde ninguna de esas APIs existe.\n\n## El síntoma\n\nEl agente crea una página usando las convenciones de Pages Router dentro de un directorio `app/`, causando un error de compilación o una operación nula silenciosa.\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\nLa exportación de `getServerSideProps` se ignora silenciosamente en App Router; la página se renderiza sin datos y sin error.\n\n## Por qué ocurre\n\nLos modelos se entrenan con corpus masivos de Next.js que se inclinan fuertemente hacia los patrones de Pages Router anteriores a la versión 13. App Router se introdujo en Next.js 13 (estable en 14) y la fecha de corte de entrenamiento de muchos modelos es anterior a su adopción generalizada. El agente confunde los dos paradigmas porque ambos residen en archivos llamados `page.tsx`.\n\n## Cómo detectarlo\n\n- Importaciones desde `\"next/router\"` en lugar de `\"next/navigation\"` en un directorio `app/`.\n- `getServerSideProps`, `getStaticProps` o `getStaticPaths` exportados desde archivos dentro de `app/`.\n- `useRouter` llamado sin `\"use client\"` al inicio del archivo.\n- `next.config.js` todavía usa `experimental.appDir` (eliminado en Next.js 14).\n\n## Cómo corregirlo\n\nReemplaza las exportaciones de obtención de datos con Server Components asíncronos y usa los hooks de `next/navigation` en el lado del 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 verificación:\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## Indicación de corrección\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## Prueba\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```"
}