A equipe da Vercel optou por uma abordagem simples para o roteamento. Eles decidiram utilizar pastas como rotas. Isso significa que, quanto mais pastas você adicionar à sua pasta app, mais rotas você terá. Além disso, se você criar uma nova pasta dentro de outra pasta (rota), obterá rotas aninhadas. Para compreender melhor esses conceitos, sugerimos observar a imagem abaixo.

Já organizamos a estrutura de pastas, mas agora, vamos analisar os arquivos presentes nessas pastas. O Next.js aceita dois tipos distintos de arquivos: page.tsx e layout.tsx. A diferença está em suas funções:

• layout.tsx é o arquivo responsável por encapsular elementos especiais de interface compartilhados entre várias páginas;
• Por outro lado, page.tsx é responsável pela interface específica da rota atual, adaptando-se dinamicamente às mudanças de URL. Ele representa a visualização associada ao conteúdo e funcionalidades exclusivas pertinentes à rota em questão.

De volta ao projeto

Vamos criar uma rota aninhada chamada /dashboard para nossa aplicação. Siga os passos abaixo para realizar isso:

1. Crie uma nova pasta chamada dashboard dentro da pasta app;
2. Dentro da nova pasta dashboard, crie um novo arquivo chamado page.tsx;
3. Copie e cole o conteúdo a seguir no arquivo page.tsx.

Após concluir todas as etapas necessárias, abra a seguinte URL http://localhost:3000/dashboard. Você deverá visualizar a página criada (texto Dashboard Page).

No próximo capítulo, continuaremos nosso trabalho nas páginas. Mas não se preocupe, ainda estamos avançando.