Next.js App Router: Guia Completo 2026
Domine o App Router do Next.js com Server Components, layouts aninhados, streaming, data fetching moderno e deploy na Vercel. O framework full stack que domina o mercado.
Por que isso é importante
Next.js App Router: Guia Completo 2026. Domine o App Router do Next.js com Server Components, layouts aninhados, streaming, data fetching moderno e deploy na Vercel. O framework full stack que domina o mercado.
O que é o App Router
O App Router é o sistema de roteamento do Next.js baseado em file system. Cada pasta dentro de app/ se torna uma rota. O arquivo page.tsx define o conteúdo da rota, layout.tsx envolve as páginas filhas, e loading.tsx mostra fallback durante carregamento.
A mudança fundamental do App Router em relação ao Pages Router: componentes são Server Components por padrão. Isso significa que o código roda no servidor, não envia JavaScript para o browser, e pode acessar banco de dados diretamente sem API intermediária.
Server Components vs Client Components
A distinção mais importante do Next.js moderno. Server Components renderizam no servidor e enviam HTML puro. Client Components renderizam no browser e suportam interatividade.
Server Components
Padrão no App Router (sem diretiva)
Prós
- Zero JavaScript enviado ao client
- Acesso direto a banco, filesystem e APIs
- Async/await nativo para data fetching
- Secrets seguros (nunca expostos ao browser)
- SEO perfeito com HTML completo
Contras
- Sem useState, useEffect ou event handlers
- Sem acesso a APIs do browser (window, localStorage)
- Não suporta React Context diretamente
Client Components
Marcados com "use client" no topo
Prós
- Suporta todos os React Hooks
- Event handlers (onClick, onChange, etc)
- Acesso a APIs do browser
- State management e interatividade
Contras
- JavaScript enviado ao client (bundle maior)
- Sem acesso direto a banco de dados
- Secrets expostos se não tomar cuidado
- SEO depende de hydration
Regra de ouro
Mantenha Client Components nas folhas da árvore. O layout, a página principal e os containers de dados devem ser Server Components. Apenas botões, formulários, dropdowns e elementos interativos precisam de "use client". Isso minimiza o JavaScript enviado ao browser.
File System Routing
Cada pasta no diretório app/ define uma rota. Arquivos especiais controlam layout, loading, error handling e metadata da rota.
app/about/page.tsx renderiza em /about. Sem page.tsx, a pasta é apenas um segmento de organização.app/layout.tsx inclui html e body tags. Layouts aninhados preservam estado entre navegações.notFound() ou quando a rota não existe. Pode ser por segmento de rota.Rotas Dinâmicas
Pastas com colchetes criam segmentos dinâmicos: app/blog/[slug]/page.tsx captura qualquer valor em params.slug. Para catch-all, use [...slug]. Para opcional catch-all: [[...slug]].
Data Fetching Moderno
No App Router, data fetching acontece diretamente em Server Components com async/await. Sem getServerSideProps ou getStaticProps. O componente é a fonte da verdade.
const data = await db.user.findMany(). O código nunca chega ao client.const [users, posts] = await Promise.all([getUsers(), getPosts()]). Reduz latência total.<Suspense fallback={<Skeleton />}>. O HTML é enviado progressivamente conforme cada parte fica pronta.export const revalidate = 3600 revalida a cada hora. Use revalidatePath() ou revalidateTag() para invalidação sob demanda.Cache no Next.js
Next.js 15 mudou o caching padrão. Fetch requests não são mais cacheadas por padrão. Você precisa optar por cache explicitamente com cache: "force-cache" ou revalidate. Isso evita dados stale acidentais e simplifica o modelo mental.
Server Actions
Server Actions permitem executar código no servidor a partir de formulários e event handlers. Substituem API Routes para mutações simples. Defina com "use server" no topo da função ou do arquivo.
action={createUser} no form. A função recebe FormData, processa no servidor e pode redirecionar ou revalidar dados.Metadata e SEO
Next.js tem suporte nativo para metadata. Exporte um objeto metadata ou uma função generateMetadata em qualquer page ou layout. O framework gera tags meta automaticamente.
export const metadata = { title, description, openGraph }. Funciona para páginas com dados fixos.generateMetadata({ params }) para gerar metadata baseada em dados dinâmicos. Ideal para blog posts e páginas de produto.app/sitemap.ts e app/robots.ts como funções que retornam os dados. Next.js gera XML/TXT automaticamente.opengraph-image.tsx para gerar imagens OG dinâmicas com JSX. Perfeito para previews em redes sociais.API Routes no App Router
Route Handlers substituem API Routes do Pages Router. Crie app/api/users/route.ts e exporte funções nomeadas por método HTTP: GET, POST, PUT, DELETE.
Com Server Actions disponíveis, Route Handlers são mais úteis para: webhooks de serviços externos, APIs consumidas por aplicações mobile, endpoints que precisam de headers customizados e integrações com third-party services.
Middleware
O middleware do Next.js intercepta requests antes de chegarem à rota. Crie middleware.ts na raiz do projeto. Executa no Edge Runtime com latência mínima.
Casos de uso: autenticação (redirecionar se não logado), i18n (detectar idioma e redirecionar), A/B testing (cookie-based routing), geolocation (conteúdo por região). Use matcher para filtrar quais rotas o middleware intercepta.
Deploy na Vercel
A Vercel é a plataforma oficial do Next.js e oferece o deploy mais simples. Conecte o repositório GitHub e cada push gera um preview deployment automático.
Checklist Next.js App Router
Antes de ir para produção
Próximos Passos
Com Next.js dominado, combine com uma API Node.js robusta para sistemas mais complexos ou leve seus conhecimentos para mobile com React Native. O ecossistema JavaScript permite reutilizar 80% do seu conhecimento entre web e mobile.