# So beheben Sie Probleme mit KI-Codierungsagenten, die veraltete Next.js-APIs verwenden

> KI-Agenten generieren häufig Next.js-Code unter Verwendung veralteter Pages Router-Muster, getServerSideProps und entfernter APIs, die App Router-Projekte beschädigen.

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

---

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.

## Das Symptom

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

```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>;
}
```

Der `getServerSideProps`-Export wird im App Router stillschweigend ignoriert; die Seite wird ohne Daten und ohne Fehler gerendert.

## Warum es passiert

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

## Wie man es erkennt

- Importe von `"next/router"` statt `"next/navigation"` in einem `app/`-Verzeichnis.
- `getServerSideProps`, `getStaticProps` oder `getStaticPaths` aus Dateien unter `app/` exportiert.
- `useRouter` wird ohne `"use client"` am Anfang der Datei aufgerufen.
- `next.config.js` verwendet noch `experimental.appDir` (in Next.js 14 entfernt).

## So beheben Sie es

Ersetzen Sie Datenabruf-Exporte durch asynchrone Server-Komponenten und verwenden Sie die `next/navigation`-Hooks clientseitig.

```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>;
}
```

Checkliste:

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

## Fix-Prompt

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