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

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.

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

// 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:

[ ] 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

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

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