# How to Fix AI Coding Agents Using Outdated Next.js APIs

> AI agents frequently generate Next.js code using deprecated Pages Router patterns, getServerSideProps, and removed APIs that break App Router projects.

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

---

AI agents trained on older Next.js data routinely produce `getServerSideProps`,
`getStaticProps`, and `next/router` imports in App Router projects where none of
those APIs exist.

## The symptom

The agent scaffolds a page using Pages Router conventions inside an `app/`
directory, causing a build error or silent no-op.

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

The `getServerSideProps` export is silently ignored in the App Router; the page
renders with no data and no error.

## Why it happens

Models are trained on massive Next.js corpora that skews heavily toward pre-13
Pages Router patterns. App Router was introduced in Next.js 13 (stable in 14)
and the training cut-off for many models predates widespread adoption.  The
agent conflates the two paradigms because both live in files named `page.tsx`.

## How to spot it

- Imports from `"next/router"` instead of `"next/navigation"` in an `app/`
  directory.
- `getServerSideProps`, `getStaticProps`, or `getStaticPaths` exported from
  files under `app/`.
- `useRouter` called without `"use client"` at the top of the file.
- `next.config.js` still uses `experimental.appDir` (removed in Next.js 14).

## How to fix it

Replace data-fetching exports with async Server Components and use the
`next/navigation` hooks client-side.

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

Checklist:

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