{
  "id": "ai-uses-outdated-nextjs-apis",
  "type": "failures",
  "category": "failures",
  "locale": "fr",
  "url": "/fr/failures/ai-uses-outdated-nextjs-apis",
  "title": "Comment corriger les agents de codage IA utilisant des API Next.js obsolètes",
  "description": "Les agents IA génèrent fréquemment du code Next.js en utilisant des motifs obsolètes du Pages Router, getServerSideProps et des API supprimées qui cassent les projets App Router.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "nextjs",
    "hallucination",
    "react"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "Les agents IA formés sur des données Next.js plus anciennes produisent régulièrement des imports de `getServerSideProps`, `getStaticProps` et `next/router` dans des projets App Router où aucune de ces API n'existe.\n\n## Le symptôme\n\nL'agent échafaude une page en utilisant les conventions du Pages Router dans un répertoire `app/`, provoquant une erreur de build ou un no-op silencieux.\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\nL'export `getServerSideProps` est silencieusement ignoré dans l'App Router ; la page s'affiche sans données et sans erreur.\n\n## Pourquoi cela se produit\n\nLes modèles sont entraînés sur de vastes corpus Next.js qui penchent fortement vers les motifs du Pages Router d'avant la v13. L'App Router a été introduit dans Next.js 13 (stable en 14) et la date de coupure de l'entraînement de nombreux modèles précède son adoption généralisée. L'agent confond les deux paradigmes car les deux vivent dans des fichiers nommés `page.tsx`.\n\n## Comment le repérer\n\n- Imports depuis `\"next/router\"` au lieu de `\"next/navigation\"` dans un répertoire `app/`.\n- `getServerSideProps`, `getStaticProps` ou `getStaticPaths` exportés depuis des fichiers sous `app/`.\n- `useRouter` appelé sans `\"use client\"` en haut du fichier.\n- `next.config.js` utilise encore `experimental.appDir` (supprimé dans Next.js 14).\n\n## Comment le corriger\n\nRemplacez les exports de récupération de données par des Server Components asynchrones et utilisez les hooks `next/navigation` côté client.\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\nListe de contrôle :\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 correction\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## Test\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```"
}