Roteamento do Next.js

Noções básicas do App Router do Next.js 15 - roteamento baseado em sistema de arquivos, layouts, componentes de servidor, estados de carregamento, limites de erro e segmentos de rota.

Layouts wrap pages with shared UI that persists across navigations. They never remount - use templates when you need fresh state.

Use a sintaxe de colchetes para criar rotas que correspondem a segmentos de URL dinâmicos - parâmetros únicos, segmentos catch-all e padrões opcionais de catch-all.

Grupos de rotas usam parênteses (nomeDaPasta) para organizar rotas sem afetar a estrutura da URL. Eles permitem múltiplos layouts no mesmo nível de rota.

Arquivos especiais loading.tsx, error.tsx e not-found.tsx criam limites Suspense e Error Boundaries automáticos com escopo para segmentos de rota.

Middleware executa antes de cada requisição correspondente, permitindo redirecionamentos, reescritas, modificações de cabeçalho e verificações de autenticação na edge.

Intercepting routes permitem carregar uma rota dentro do layout atual durante a navegação do lado do cliente, preservando a página completa em acesso direto à URL ou atualização.

Rotas paralelas usam pastas @slot para renderizar múltiplas páginas simultaneamente dentro de um único layout. Cada slot é um segmento de rota independente com seu próprio carregamento

Navegue entre rotas usando o componente <Link>, useRouter programático, hooks de leitura de URL e redirect no lado do servidor.

Um resumo condensado das 25 melhores práticas mais importantes, extraídas de todas as páginas desta seção.

A single-page roundup of every highlight bullet from the 10 pages in the Next.js Routing section, grouped by source page so you can scan all 60 takeaways without opening each article individually.