{
  "id": "ai-uses-outdated-nextjs-apis",
  "type": "failures",
  "category": "failures",
  "locale": "en",
  "url": "/failures/ai-uses-outdated-nextjs-apis",
  "title": "How to Fix AI Coding Agents Using Outdated Next.js APIs",
  "description": "AI agents frequently generate Next.js code using deprecated Pages Router patterns, getServerSideProps, and removed APIs that break App Router projects.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "nextjs",
    "hallucination",
    "react"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "AI agents trained on older Next.js data routinely produce `getServerSideProps`,\n`getStaticProps`, and `next/router` imports in App Router projects where none of\nthose APIs exist.\n\n## The symptom\n\nThe agent scaffolds a page using Pages Router conventions inside an `app/`\ndirectory, causing a build error or silent no-op.\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\nThe `getServerSideProps` export is silently ignored in the App Router; the page\nrenders with no data and no error.\n\n## Why it happens\n\nModels are trained on massive Next.js corpora that skews heavily toward pre-13\nPages Router patterns. App Router was introduced in Next.js 13 (stable in 14)\nand the training cut-off for many models predates widespread adoption.  The\nagent conflates the two paradigms because both live in files named `page.tsx`.\n\n## How to spot it\n\n- Imports from `\"next/router\"` instead of `\"next/navigation\"` in an `app/`\n  directory.\n- `getServerSideProps`, `getStaticProps`, or `getStaticPaths` exported from\n  files under `app/`.\n- `useRouter` called without `\"use client\"` at the top of the file.\n- `next.config.js` still uses `experimental.appDir` (removed in Next.js 14).\n\n## How to fix it\n\nReplace data-fetching exports with async Server Components and use the\n`next/navigation` hooks client-side.\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\nChecklist:\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```"
}