{
  "id": "ai-uses-outdated-nextjs-apis",
  "type": "failures",
  "category": "failures",
  "locale": "zh",
  "url": "/zh/failures/ai-uses-outdated-nextjs-apis",
  "title": "如何修复 AI 编码代理使用过时的 Next.js API",
  "description": "AI 代理经常生成使用已弃用的 Pages Router 模式、getServerSideProps 和已在 App Router 项目中删除的 API 的 Next.js 代码。",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "nextjs",
    "hallucination",
    "react"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "AI 代理基于较旧的 Next.js 数据训练，经常在 App Router 项目中生成 `getServerSideProps`、\n`getStaticProps` 和 `next/router` 导入，而这些 API 在该项目中并不存在。\n\n## 症状\n\n代理在 `app/` 目录内使用 Pages Router 约定构建页面，导致构建错误或静默无操作。\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\n在 App Router 中，`getServerSideProps` 导出会被静默忽略；页面渲染时没有数据且没有错误。\n\n## 原因\n\n模型在大量 Next.js 语料库上训练，这些语料库严重偏向于 13 之前的 Pages Router 模式。App Router 在 Next.js 13 中引入（在 14 中稳定），而许多模型的训练截止日期早于广泛应用。代理混淆了这两种范式，因为两者都位于名为 `page.tsx` 的文件中。\n\n## 如何发现\n\n- 在 `app/` 目录下从 `\"next/router\"` 导入而非 `\"next/navigation\"`。\n- 从 `app/` 下的文件导出 `getServerSideProps`、`getStaticProps` 或 `getStaticPaths`。\n- 在文件顶部未添加 `\"use client\"` 的情况下调用 `useRouter`。\n- `next.config.js` 仍使用 `experimental.appDir`（在 Next.js 14 中已删除）。\n\n## 如何修复\n\n用异步 Server Components 替换数据获取导出，并在客户端使用 `next/navigation` 钩子。\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\n检查清单：\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## 修复提示\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## 测试\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```"
}