# Comment corriger les agents de codage IA utilisant des API Next.js obsolètes

> 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.

**Type:** Failure  
**Tools:** Cursor, Claude Code, Codex, Windsurf  
**Stack:** Next.js, TypeScript  
**Updated:** 2026-06-08

---

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.

## Le symptôme

L'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.

```tsx
// app/dashboard/page.tsx — WRONG
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

export default function Dashboard({ data }) {
  return <div>{data.title}</div>;
}
```

L'export `getServerSideProps` est silencieusement ignoré dans l'App Router ; la page s'affiche sans données et sans erreur.

## Pourquoi cela se produit

Les 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`.

## Comment le repérer

- Imports depuis `"next/router"` au lieu de `"next/navigation"` dans un répertoire `app/`.
- `getServerSideProps`, `getStaticProps` ou `getStaticPaths` exportés depuis des fichiers sous `app/`.
- `useRouter` appelé sans `"use client"` en haut du fichier.
- `next.config.js` utilise encore `experimental.appDir` (supprimé dans Next.js 14).

## Comment le corriger

Remplacez les exports de récupération de données par des Server Components asynchrones et utilisez les hooks `next/navigation` côté client.

```tsx
// app/dashboard/page.tsx — CORRECT
async function fetchData() {
  const res = await fetch("https://api.example.com/data", {
    next: { revalidate: 60 },
  });
  return res.json();
}

export default async function Dashboard() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}
```

Liste de contrôle :

```txt
[ ] No getServerSideProps / getStaticProps inside app/
[ ] Use "next/navigation" (useRouter, usePathname, useSearchParams) not "next/router"
[ ] Data fetching is async in the Server Component, not in a prop export
[ ] next.config.js uses next.config.mjs and removes experimental.appDir
[ ] Client-only hooks (useRouter etc.) are inside "use client" components
```

## Prompt de correction

```txt title="Fix Prompt"
This file uses Pages Router APIs (getServerSideProps, getStaticProps,
next/router) inside an App Router project. Rewrite it using App Router
conventions: async Server Components for data fetching, next/navigation for
routing hooks, and "use client" only where browser APIs are required.
Do not add any Pages Router exports.
```

## Test

```bash
# Fail fast: no Pages Router exports should appear under app/
grep -rn "getServerSideProps\|getStaticProps\|getStaticPaths" app/ && echo "FAIL: Pages Router API found" || echo "OK"

# Confirm correct navigation import
grep -rn "from \"next/router\"" app/ && echo "FAIL: use next/navigation instead" || echo "OK"
```