Como trabalhar com rotas aninhadas?

Oii, Carmen. Tudo bem?

No Next.js, as rotas aninhadas são gerenciadas de uma maneira diferente do que no react-router-dom. Em vez de definir as rotas manualmente, Next.js utiliza uma abordagem baseada no sistema de arquivos, onde a estrutura das pastas e arquivos dentro da pasta pages determina as rotas da aplicação.

Como funcionam as rotas aninhadas no Next.js

1. Estrutura de Diretórios:

   • Cada arquivo dentro da pasta pages corresponde a uma rota. Por exemplo, pages/index.js é a rota / e pages/about.js é a rota /about.
   • Para rotas aninhadas, você cria subdiretórios. Por exemplo, se você tem um diretório pages/blog, e dentro dele um arquivo post.js, você acessa esta rota em /blog/post.

2. Rotas Dinâmicas:

   • Quando você não sabe os nomes exatos dos segmentos com antecedência e deseja criar rotas a partir de dados dinâmicos, você pode usar Segmentos Dinâmicos que são preenchidos no momento da solicitação ou pré-renderizados no momento da construção.

Documentação

Para mais detalhes, você pode consultar a documentação oficial do Next.js sobre rotas.

Um abraço e bons estudos.