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

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.

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

// 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 :

[ ] 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

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

# 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"