Como Usar Rotas Paralelas | Next.js

Neste artigo, vamos explorar como implementar rotas paralelas no Next.js, uma funcionalidade poderosa que permite renderizar múltiplas páginas simultaneamente na mesma URL.

O que são Rotas Paralelas?

Rotas paralelas permitem que você renderize duas ou mais páginas no mesmo layout simultaneamente. Elas são especialmente úteis para:

• Dashboards com múltiplas seções independentes
• Interfaces com painéis laterais que precisam manter estado
• Aplicações que exigem visualizações complementares
• Implementação de modais persistentes

Estrutura de Diretórios

Para criar rotas paralelas, usamos uma convenção especial de nomenclatura:

1app/ 
2 cart/ 
3   @resume/
4      page.tsx    
5   @suggestions/
6      page.tsx 
7  layout.tsx

O prefixo @ indica ao Next.js que esses diretórios representam rotas paralelas. O arquivo layout.tsx receberá essas páginas como props.

Implementando o Layout

O componente de layout recebe as páginas paralelas como propriedades:

1export default function CartLayout({ children, resume, suggestions, }: 
2{ children: React.ReactNode, resume: React.ReactNode, suggestions: React.ReactNode }) {
3 const isLoggedIn = true;
4 return (
5 <div> {children} {isLoggedIn && ( <> {resume} {suggestions} </> )} </div> );}

Você pode controlar quais páginas são renderizadas com lógica condicional, como no exemplo de verificação de login.

Características das Rotas Paralelas

• Cada rota paralela é tratada como uma página independente
• Podem ter seus próprios arquivos loading.tsx e error.tsx
• Carregam de forma independente (streaming)
• Não são acessíveis diretamente via URL
• Compartilham o mesmo contexto de URL

Casos de Uso Comuns

1. Carrinho de compras: Mostrar resumo e sugestões simultaneamente
2. Dashboards: Exibir múltiplos widgets/painéis
3. Ferramentas de edição: Editor + pré-visualização lado a lado
4. Redes sociais: Feed principal + sidebar com sugestões

Considerações Finais

As rotas paralelas oferecem benefícios significativos:

• Separação de conceitos: Mantém componentes independentes
• Performance: Carregamento independente de cada seção
• Manutenibilidade: Facilita a evolução de cada parte
• Experiência do usuário: Transições mais suaves

Para implementações avançadas, considere:

1. Usar em conjunto com Intercepting Routes para modais
2. Implementar skeletons para loading states
3. Adicionar tratamento de erro individualizado
4. Considerar acessibilidade ao empilhar múltiplas views

Rotas paralelas representam uma evolução na arquitetura de aplicações Next.js, permitindo criar interfaces complexas enquanto mantém a simplicidade do modelo de roteamento baseado em arquivos.