A navegabilidade em 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 componente "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 e chama um componente, por isso eles têm 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, o nosso "Nav",
importar o link,
que é a dependência que realiza o clique de chamar as páginas
e montar a estrutura.
Eu já coloquei as estilizações utilizando o tailwind e criei um "Nav".
Esse "Nav" possui uma "ul" e aí nós temos a lista.
A primeira lista é um "home",
a segunda, um "sobre"
e a terceira, o "contato".
Se você visualizar aqui no navegador, temos o "home", "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, olha, "contato"
e chamamos o componente "Nav",
para que ele receba toda essa estrutura aqui do navegador.
Isso vai acontecer da mesma forma nos outros componentes,
no "home" e no "sobre".
Fazendo com que ao clicar já apareça a página referente ao "home",
a página referente ao "sobre" e ao "contato".
Isso é um gerenciamento de rotas que você preparou aqui no "Nav",
que o próprio Next já criou aqui o seu gerenciamento
ao criar as pastas com o "page" de cada uma delas.
E assim, vemos como funciona uma navegabilidade no seu projeto.
Criar um gerenciamento de rotas em Next.js é bem simples,
torna mais fácil a aplicação em seus projetos futuros.