{
  "id": "ai-uses-outdated-nextjs-apis",
  "type": "failures",
  "category": "failures",
  "locale": "de",
  "url": "/de/failures/ai-uses-outdated-nextjs-apis",
  "title": "So beheben Sie Probleme mit KI-Codierungsagenten, die veraltete Next.js-APIs verwenden",
  "description": "KI-Agenten generieren häufig Next.js-Code unter Verwendung veralteter Pages Router-Muster, getServerSideProps und entfernter APIs, die App Router-Projekte beschädigen.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "nextjs",
    "hallucination",
    "react"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "KI-Agenten, die mit älteren Next.js-Daten trainiert wurden, erstellen routinemäßig `getServerSideProps`, `getStaticProps` und `next/router`-Importe in App Router-Projekten, in denen keine dieser APIs existieren.\n\n## Das Symptom\n\nDer Agent erstellt eine Seite unter Verwendung von Pages Router-Konventionen in einem `app/`-Verzeichnis, was zu einem Build-Fehler oder einem stillen No-Op führt.\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\nDer `getServerSideProps`-Export wird im App Router stillschweigend ignoriert; die Seite wird ohne Daten und ohne Fehler gerendert.\n\n## Warum es passiert\n\nModelle werden auf massiven Next.js-Korpora trainiert, die stark in Richtung der Pages Router-Muster vor Version 13 tendieren. Der App Router wurde in Next.js 13 (stabil in 14) eingeführt, und der Trainings-Cut-off vieler Modelle liegt vor der weit verbreiteten Einführung. Der Agent vermischt die beiden Paradigmen, weil beide in Dateien namens `page.tsx` existieren.\n\n## Wie man es erkennt\n\n- Importe von `\"next/router\"` statt `\"next/navigation\"` in einem `app/`-Verzeichnis.\n- `getServerSideProps`, `getStaticProps` oder `getStaticPaths` aus Dateien unter `app/` exportiert.\n- `useRouter` wird ohne `\"use client\"` am Anfang der Datei aufgerufen.\n- `next.config.js` verwendet noch `experimental.appDir` (in Next.js 14 entfernt).\n\n## So beheben Sie es\n\nErsetzen Sie Datenabruf-Exporte durch asynchrone Server-Komponenten und verwenden Sie die `next/navigation`-Hooks clientseitig.\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\nCheckliste:\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## Fix-Prompt\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```"
}