Desbloqueie os superpoderes ocultos do roteador de aplicativos Next.js com estes padrões compactos

O Next.js é um dos principais frameworks utilizados para desenvolvimento de aplicações web com React. Em sua versão mais recente, introduziu o App Router, um sistema de roteamento que utiliza a estrutura de pastas para definir rotas, layouts e comportamentos de navegação. Esse recurso amplia as possibilidades de organização do código e oferece maior controle sobre a experiência de navegação.

O App Router vai além de simplesmente mapear URLs. Ele permite construir interfaces mais complexas com rotas paralelas, modais interceptados, agrupamento de rotas e tratamento inteligente de erros. A seguir estão alguns padrões importantes que mostram como explorar o potencial dessa ferramenta.

Rotas Paralelas com Layouts Paralelos

Um dos recursos mais úteis do App Router é a criação de rotas paralelas. Esse padrão permite que diferentes trechos da interface sejam atualizados de forma independente. Em vez de recarregar toda a página, apenas o segmento afetado é alterado, promovendo fluidez e eficiência no carregamento da aplicação.

Um exemplo prático é um painel administrativo em que a barra lateral e o conteúdo principal são renderizados em áreas distintas. Assim, a navegação em uma seção do painel não interfere na barra lateral, que continua estática.

// Estrutura de pastas
app/
 ├ layout.tsx
 ├ @navegacao/page.tsx
 └ @conteudo/page.tsx

// layout.tsx
export default function Layout({ navegacao, conteudo }) {
  return (
    <div style={{ display: "flex" }}>
      <aside>{navegacao}</aside>
      <main>{conteudo}</main>
    </div>
  )
}

Rotas Interceptadas em Modais

Outro padrão comum é a utilização de rotas interceptadas. Esse recurso cria uma rota especial que pode ser acessada diretamente ou aberta como um modal sobreposto, sem quebrar o fluxo da página principal. Isso é útil para exibir detalhes de um item sem recarregar todo o conteúdo.

No código abaixo, ao acessar um item de uma lista, pode-se mostrar um modal. Mas se a URL for carregada diretamente, a mesma página é exibida como tela única.

// Estrutura de pastas
app/feed/page.tsx          // renderiza feed e modal
app/feed/@modal/post/[id]/page.tsx
app/post/[id]/page.tsx

Agrupamento de Rotas

O App Router também oferece suporte a grupos de rotas. Eles são definidos pelo uso de parênteses nos nomes de pastas e ajudam a organizar a aplicação em diferentes contextos. Apesar da separação, a URL final permanece limpa, sem os nomes dos grupos.

Esse padrão é muito usado quando há áreas distintas, como uma seção de marketing e outra de aplicação principal. Dessa forma, os layouts e estados de carregamento podem ser isolados em cada contexto.

// Estrutura de pastas
app/
 ├ (marketing)/pagina-inicial/page.tsx
 ├ (marketing)/sobre/page.tsx
 └ (app)/dashboard/page.tsx

Rotas Dinâmicas com Tratamento de Erros

Em casos onde o caminho da rota é desconhecido previamente, utiliza-se o padrão de rotas dinâmicas. O paradigma de captura de trechos permite que um mesmo componente trate diversas variações de rota. Além disso, é possível tratar páginas inexistentes de maneira elegante.

Um exemplo comum é o uso de parâmetros dinâmicos em uma página de documentação. Para rotas não existentes, a função de erro exibe uma página 404 personalizada, mantendo a consistência da navegação.

// rota com parâmetro dinâmico
app/docs/[[...slug]]/page.tsx

// tratamento de 404
import { notFound } from 'next/navigation';

export default function Pagina({ params }) {
  if (!conteudoExiste(params.slug)) {
    notFound();
  }
  return <div>Conteúdo</div>
}

Carregamento e Erros Específicos por Segmento

Outro ponto interessante é a existência de arquivos loading.tsx e error.tsx para cada segmento de rota. Eles permitem apresentar estados de carregamento e mensagens de erro localizadas apenas na parte impactada da interface, sem afetar todo o restante da aplicação.

Com isso, a experiência do usuário torna-se mais clara e controlada, pois o sistema responde de forma segmentada a cada evento da navegação.