Entendendo o roteamento com pasta app no Next 14

No Next 14, o sistema de roteamento sofreu algumas mudanças importantes, especialmente com o uso da pasta src/app. Se você está acostumado com o roteamento de arquivos e pastas nas versões anteriores, vai se surpreender com a flexibilidade e simplicidade que o novo sistema traz. Neste post, vou explicar como cada tipo de pasta funciona e como você pode usá-las para construir rotas dinâmicas e estáticas no seu projeto.

O Básico: Roteamento com a Pasta app

No Next 14, a estrutura de arquivos na pasta src/app define automaticamente as rotas da sua aplicação. Cada arquivo ou diretório dentro dessa pasta se transforma em uma rota correspondente.

Por exemplo, se você criar um arquivo chamado dashboard/page.tsx, isso vai mapear diretamente para a rota /dashboard. Fácil, não é? Mas o Next vai muito além disso com diferentes abordagens de nomeação de pastas, o que traz muita flexibilidade para projetos dinâmicos.

Vamos dar uma olhada nas diferentes convenções de nomenclatura e suas finalidades:

Pastas Regulares

• Exemplo: src/app/dashboard
• Finalidade: Define uma rota estática.
• URL: /dashboard

Sempre que você cria uma pasta regular (sem utilizar caracteres especiais), o nome da pasta se transforma diretamente no caminho da URL.

Parâmetros Dinâmicos: [pasta]

• Exemplo: src/app/[id]
• Finalidade: Define uma rota dinâmica que aceita parâmetros.
• URL: /123 , /abc

Essa abordagem é usada quando você precisa de uma rota dinâmica. Por exemplo, em um sistema de usuários, onde você quer que cada perfil tenha uma URL única, como /user/123. Dentro do arquivo page.tsx, você pode acessar o valor do parâmetro usando o hook useParams.

const { id } = useParams();

Rota “Catch-all” com […pasta]

• Exemplo: src/app/[…slug]
• Finalidade: Captura qualquer rota que comece com o caminho especificado.
• URL: /a, /a/b/c

Essa nomenclatura é conhecida como “catch-all”, pois ela captura todos os segmentos de URL após o caminho base. O valor de slugserá um array contendo os diferentes segmentos da URL.

const { slug } = useParams(); // slug é um array ['a', 'b', 'c']

Parâmetro Opcional: [[…pasta]]

• Exemplo:src/app/[[...slug]]
• Finalidade: Rota “catch-all” opcional
• URL: /, /a, /a/b

A diferença aqui é que o parâmetro é opcional. Se não houver nenhum segmento adicional na URL, a rota ainda será válida.

A dupla de colchetes [[...slug]] indica que o parâmetro é opcional, diferente de [...slug], que captura todas as rotas, mas sem ser opcional.

const { slug } = useParams(); // pode ser undefined ou um array

Pastas Invisíveis: (pastas)

• Exemplo: src/app/(group)/dashboard
• Finalidade: Organiza a estrutura sem afetar a URL.
• URL: /dashboard

As pastas entre parênteses não afetam a URL da sua aplicação. Isso é extremamente útil para organizar o código, especialmente quando você tem grandes grupos de rotas que deseja manter separados por motivos de clareza, sem que isso afete diretamente as URLs acessadas pelos usuários.

Layouts em Paralelo: @

• Exemplo: src/app/@modal
• Finalidade: Layout Routes para renderização paralela.
• URL: /

O Next também permite que você crie rotas com layouts paralelos, permitindo a coexistência de modais, barras laterais ou qualquer conteúdo paralelo com a página principal. O símbolo @ é usado para indicar que esse layout será exibido em paralelo com o restante da página.

Exemplo de Estrutura de Pastas

Aqui está um exemplo prático de como você pode organizar suas rotas:

src/app
├── (auth)
│   ├── login
│   │   └── page.tsx
├── [userId]
│   ├── settings
│   │   └── page.tsx
│   └── page.tsx
├── [[...catchAll]]
│   └── page.tsx

O que está acontecendo aqui?

1. (auth)/login/page.tsx mapeia para /login— a pasta (auth) é invisível para a URL.
2. [userId]/settings/page.tsxcria uma rota dinâmica como /123/settings, onde userIdé um parâmetro.
3. [[…catchAll]]/page.tsxatua como um fallback, capturando qualquer rota não definida.

Considerações Finais

O novo sistema de roteamento no Next 14 oferece uma maneira incrivelmente flexível de definir rotas, permitindo que você crie tanto URLs simples quanto rotas complexas com parâmetros dinâmicos e layouts paralelos. Com esse sistema, a estrutura do seu código se reflete diretamente nas URLs, o que torna a organização e manutenção muito mais intuitivas.

Aproveite ao máximo essas convenções e construa aplicações robustas com Next!

Gostou deste post? Se você curtiu, deixe um comentário ou compartilhe com alguém que esteja explorando o Next 14. Se tiver dúvidas ou sugestões, ficarei feliz em ajudar!