Next.js App Router

Última atualização: 2026-11-03

Next.js App Router App Router

O App Router é o roteador por convenção de arquivos introduzido no Next.js 13+: cada pasta dentro de app/ vira um segmento de URL, o page.tsx define a página, o layout.tsx é o layout compartilhado que não é re-renderizado na navegação, e os arquivos loading e error cuidam automaticamente dos estados de carregamento e erro. O resultado é roteamento praticamente sem código repetitivo.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

app/
├─ layout.tsx        # root layout: shared by every route
├─ page.tsx          # route / (home page)
├─ about/
│  └─ page.tsx       # route /about
└─ posts/
   ├─ page.tsx       # route /posts
   └─ [slug]/
      └─ page.tsx    # dynamic route /posts/:slug

// app/about/page.tsx — a server component can be async by default
export default async function AboutPage() {
  return <h1>About us</h1>
}

⚙️ Parâmetros

Retorna：Sem valor de retorno — o App Router é um roteador por convenção de arquivos; as regras estão descritas na sintaxe e no exemplo.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Simulação: o painel esquerdo é um seletor de páginas — clicar em um dos quatro botões de rota o destaca em azul e troca a página atual; o painel de árvore de arquivos à direita mostra o caminho app/ que sustenta a URL atual em tempo real, por exemplo /posts/hello mapeia para app/posts/[slug]/page.tsx. Ele torna a convenção de que arquivos-são-rotas visível num relance.

💡 Pontos-chave

🏷️ Mais Ecossistema

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós