-
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.
