Next.js

O que é App Router?

Definição

Sistema de roteamento do Next.js 13+ baseado no diretório `app/`, que usa React Server Components por padrão. Cada pasta representa uma rota, e arquivos como `page.tsx`, `layout.tsx` e `loading.tsx` têm papéis convencionados.

Substitui o `pages/` router, trazendo suporte nativo a layouts aninhados, streaming com Suspense e separação clara entre Server e Client Components.

Exemplo Prático

TypeScript

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/stats').then(r => r.json());
  return <main><h1>Visitas: {data.visits}</h1></main>;
}

// app/dashboard/layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  return <section className="dashboard">{children}</section>;
}

Artigos que aprofundam App Router

App Router do Next.js 15: Layouts, Loading States e Error Boundaries na Prática

Quer ver App Router em ação em projetos reais?

Ver artigos sobre App Router