# Cómo corregir los agentes de codificación de IA que usan APIs obsoletas de Next.js

> Los agentes de IA generan con frecuencia código de Next.js utilizando patrones obsoletos de Pages Router, getServerSideProps y APIs eliminadas que rompen los proyectos de App Router.

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

---

Los agentes de IA entrenados con datos antiguos de Next.js producen rutinariamente `getServerSideProps`, `getStaticProps` e importaciones de `next/router` en proyectos de App Router donde ninguna de esas APIs existe.

## El síntoma

El agente crea una página usando las convenciones de Pages Router dentro de un directorio `app/`, causando un error de compilación o una operación nula silenciosa.

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

La exportación de `getServerSideProps` se ignora silenciosamente en App Router; la página se renderiza sin datos y sin error.

## Por qué ocurre

Los modelos se entrenan con corpus masivos de Next.js que se inclinan fuertemente hacia los patrones de Pages Router anteriores a la versión 13. App Router se introdujo en Next.js 13 (estable en 14) y la fecha de corte de entrenamiento de muchos modelos es anterior a su adopción generalizada. El agente confunde los dos paradigmas porque ambos residen en archivos llamados `page.tsx`.

## Cómo detectarlo

- Importaciones desde `"next/router"` en lugar de `"next/navigation"` en un directorio `app/`.
- `getServerSideProps`, `getStaticProps` o `getStaticPaths` exportados desde archivos dentro de `app/`.
- `useRouter` llamado sin `"use client"` al inicio del archivo.
- `next.config.js` todavía usa `experimental.appDir` (eliminado en Next.js 14).

## Cómo corregirlo

Reemplaza las exportaciones de obtención de datos con Server Components asíncronos y usa los hooks de `next/navigation` en el lado del cliente.

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

Lista de verificación:

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

## Indicación de corrección

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

## Prueba

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