A navegabilidade Next js facilita uma boa navegação entre as páginas
de uma forma rápida e dinâmica.
Para que isso aconteça de uma forma fluída,
precisamos de um bom gerenciamento de rotas.
No projeto precisamos criar algumas estruturas, por exemplo,
criar o component "Nav.js"
e no "App" criar os componentes que serão navegados.
Por exemplo, a pasta "contato" recebe "page.jsx",
a pasta "home" recebe "page.jsx", a pasta "sobre" recebe "page.jsx".
Quando o renderizador buscar o componente
ele vem na pasta e chama o componente,
vem na pasta chama o componente, por isso eles tem o mesmo nome
e é uma boa prática utilizar "page"
em todas as suas pastas como referência.
Lembrando que ele vai buscar também o nome da pasta inicial,
aqui chama "contato", aqui chama "home",
aqui chama "sobre" e, em seguida,
precisamos trazer o link novamente nosso "Nav".
Importar o link que é a dependência que realiza o click
de chamar as páginas e montar a estrutura.
Eu já coloquei a estilização utilizando o tailwind, criei um "Nav".
Esse "Nav" possui uma "ul" e aí nós temos a lista.
A primeira lista ele é um "home". a segunda um sobre e a terceira o contato.
Se você visualizar aqui no navegador temos o nome sobre e contato.
Já está estilizado de uma forma bem clara e objetiva.
Em seguida, voltamos ao nosso app
e em cada componente, por exemplo, o contato,
montamos o componente contato e colocamos aqui o contato
e chamamos o componente NAV
para que ele receba
essa estrutura que toda do navegador.
Isso vai acontecer da mesma forma nos outros componentes.
Rome e no Sobre.
Fazendo com que ao clicar
já apareça a página referente ao Rome,
a página referente ao Sobre
e a página referente ao contato.
Isso é um gerenciamento de rotas que você preparou aqui no Nave
que o próprio Nick já criou aqui.
O seu gerenciamento ao criar as pastinhas com o Page de cada uma delas
e assim
vemos como que funciona uma navegabilidade no seu projeto.
Criar um gerenciamento de rotas NFS é bem simples,
torna mais fácil a aplicação em seus projetos futuros.