# Como Corrigir Agentes de Código de IA Usando APIs Desatualizadas do Next.js

> Agentes de IA frequentemente geram código Next.js usando padrões obsoletos do Pages Router, getServerSideProps e APIs removidas que quebram projetos App Router.

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

---

Agentes de IA treinados em dados mais antigos do Next.js rotineiramente produzem imports de `getServerSideProps`, `getStaticProps` e `next/router` em projetos App Router onde nenhuma dessas APIs existe.

## O sintoma

O agente cria uma página usando convenções do Pages Router dentro de um diretório `app/`, causando um erro de build ou uma operação silenciosa sem efeito.

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

A exportação de `getServerSideProps` é silenciosamente ignorada no App Router; a página renderiza sem dados e sem erro.

## Por que isso acontece

Os modelos são treinados em enormes corpora do Next.js que tendem fortemente a padrões do Pages Router pré-13. O App Router foi introduzido no Next.js 13 (estável em 14) e a data de corte de treinamento de muitos modelos antecede a adoção generalizada. O agente confunde os dois paradigmas porque ambos estão em arquivos chamados `page.tsx`.

## Como identificar

- Imports de `"next/router"` em vez de `"next/navigation"` em um diretório `app/`.
- `getServerSideProps`, `getStaticProps` ou `getStaticPaths` exportados de arquivos em `app/`.
- `useRouter` chamado sem `"use client"` no topo do arquivo.
- `next.config.js` ainda usa `experimental.appDir` (removido no Next.js 14).

## Como corrigir

Substitua as exportações de busca de dados por Server Components assíncronos e use os hooks de `next/navigation` no lado do 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 verificação:

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

## Prompt de Correção

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

## Teste

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