Rotas Dinâmicas e Grupos de Rotas

Neste conteúdo, exploramos dois conceitos poderosos do Next.js: rotas dinâmicas para criar URLs flexíveis e grupos de rotas para melhor organização do código em projetos complexos.

Rotas Dinâmicas no Next.js

As rotas dinâmicas permitem criar URLs que podem variar em tempo de execução, essenciais para:

• Páginas de detalhes de produtos
• Perfis de usuário
• Conteúdo compartilhável via links
• Qualquer cenário onde parte da URL identifica um recurso específico

Para criar uma rota dinâmica, usamos colchetes no nome do diretório ou arquivo:

1/product/[productId]/page.tsx

Acessando Parâmetros da Rota

Na página que corresponde à rota dinâmica, recebemos automaticamente um objeto com os parâmetros:

1interface PageProps {
2 params: {
3 productId: string; };
4 searchParams: Record<string, string>; }
5export default function ProductDetail({ params, searchParams }: PageProps) {
6 return <div>Detalhes do produto {params.productId}</div>; }

Isso permite buscar dados específicos baseados no ID recebido via URL.

Catch-All Routes

Para rotas ainda mais flexíveis, podemos usar a sintaxe de três pontos (...):

1/product/[...productId]/page.tsx

Isso cria uma rota que captura todos os segmentos após /product/, útil para:

• URLs complexas com múltiplos níveis
• Sistemas de categorias/aninhamento
• Roteamento avançado com múltiplos parâmetros

Grupos de Rotas para Organização

Para manter o projeto organizado sem afetar as URLs, usamos diretórios entre parênteses:

1/(payment)/add-card/page.tsx
2/(payment)/generate-pix/page.tsx

Benefícios desta abordagem:

• Agrupa logicamente arquivos relacionados
• Não altera a estrutura de URLs
• Facilita a manutenção do código
• Permite organização por funcionalidades

Considerações Finais

O sistema de roteamento do Next.js oferece flexibilidade e organização:

• Rotas dinâmicas: Criam URLs amigáveis e compartilháveis
• Catch-all: Oferece máxima flexibilidade para rotas complexas
• Grupos: Mantêm o código organizado sem impacto nas URLs

Para projetos em produção, considere:

• Validar sempre os parâmetros recebidos
• Implementar tratamento de erros para rotas inválidas
• Usar fallbacks para conteúdo não encontrado
• Documentar a estrutura de rotas para a equipe

Esses recursos combinados permitem criar aplicações web robustas e bem organizadas, onde a estrutura de arquivos reflete claramente a arquitetura da aplicação enquanto mantém URLs limpas e significativas para os usuários.