Next.js tem dois sistemas de roteamento. O Pages Router (pages/) é o original; o App Router (app/, desde Next 13) é o mais novo e recomendado, construído em torno de React Server Components.
Next.js tem dois sistemas de roteamento. O Pages Router (pages/) é o original; o App Router (app/, desde Next 13) é o mais novo e recomendado, construído em torno de React Server Components.
Pages Router (pages/) App Router (app/)
──────────────────────────────────────────────────────
pages/about.tsx → /about app/about/page.tsx → /about
Default export = page page.tsx = page, layout.tsx = layout
getServerSideProps (SSR) async Server Components (fetch directly)
getStaticProps (SSG) fetch() with caching options
_app.tsx / _document.tsx Nested layout.tsx files
All components client-rendered Server Components by default
// App Router — a Server Component that fetches data directly, no extra API
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // runs on the SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
No App Router, os componentes são Server Components por padrão — executam no servidor, podem fazer await de dados diretamente e enviam zero JS desse componente para o navegador. O Pages Router, em vez disso, usava funções especiais (getServerSideProps) para passar dados para páginas renderizadas no cliente.
layout.tsx).loading.tsx / Suspense.Use o App Router para novos projetos — é onde o desenvolvimento de Next.js está focado. O Pages Router ainda é suportado (e os dois podem coexistir em uma app), mas está essencialmente em modo de manutenção.
O App Router representa a arquitetura atual do Next.js (Server Components, nested layouts, streaming).
Saber como ele difere do Pages Router legado — especialmente o padrão server-first e o modelo de layout — é essencial para trabalhar em qualquer base de código moderna do Next.js.