Conceitos de Next.js - orivaldosantana/mvp_banco_talentos GitHub Wiki

Rotas no Next.js

No Next.js, o roteamento é baseado no sistema de arquivos, o que significa que as rotas são definidas com base na estrutura de diretórios e arquivos em seu projeto.

Resumo do funcionamento de rotas:

Todas as páginas são armazenadas na pasta dentro de da pasta app/. Cada arquivo .js, .jsx, .ts, ou .tsx nesta pasta corresponde a uma rota na sua aplicação.
O arquivo pages.js corresponde à rota raiz (/) da aplicação.
Outros arquivos na pasta app correspondem a rotas com o mesmo nome do arquivo. Por exemplo, about.js corresponderia à rota /about.
Se você criar uma pasta dentro de app, ela representará um segmento de rota. Por exemplo, se você tiver um arquivo em admin/collaborator.js, ele corresponderá à rota /admin/collaborator.
O Next.js também suporta rotas dinâmicas. Por exemplo, /admin/collaborator/[id].js corresponderia a qualquer rota na forma de /admin/collaborator/1, /admin/collaborator/2, etc., onde 1, 2 são parâmetros dinâmicos acessíveis no componente de página.

Layout no Next.js

No Next.js, um layout de página é um componente que pode ser usado para envolver várias páginas e fornecer um layout comum a todas elas. Isso é útil para componentes que devem aparecer em todas as páginas, como cabeçalhos, rodapés, barras de navegação, etc.

No arquivo admin/layout.js, PagesLayout é um componente de layout. Ele recebe children como propriedade, que representa o conteúdo específico da página que está sendo renderizada.

O componente PagesLayout funciona da seguinte maneira:

Ele importa componentes de UI (NavBar e Header).
O componente PagesLayout retorna uma estrutura HTML que inclui o Header e o NavBar, bem como um espaço para o conteúdo da página (children).

Para aplicar um layout em páginas no Next.js 14, basta criar um arquivo layout.js na pasta da página desejada que os arquivos e subpastas, na mesma pasta do arquivo layout.js, serão afetados. Para mais informações acesse aqui.

Referências