WEBVTT

00:00:07.780 --> 00:00:11.796
A navegabilidade em Next.js facilita
uma boa navegação entre as páginas

00:00:11.796 --> 00:00:13.646
de uma forma rápida e dinâmica.

00:00:13.646 --> 00:00:15.715
Para que isso aconteça
de uma forma fluída,

00:00:15.715 --> 00:00:17.871
precisamos de um bom
gerenciamento de rotas.

00:00:17.871 --> 00:00:18.786
No projeto,

00:00:18.786 --> 00:00:21.406
precisamos criar
algumas estruturas, por exemplo,

00:00:21.406 --> 00:00:24.296
criar o componente "Nav.js"

00:00:24.296 --> 00:00:25.224
e no "app",

00:00:25.224 --> 00:00:27.434
criar os componentes
que serão navegados.

00:00:27.434 --> 00:00:31.264
Por exemplo,
a pasta "contato" recebe "page.jsx",

00:00:31.264 --> 00:00:36.369
a pasta "home" recebe "page.jsx",
a pasta "sobre" recebe "page.jsx".

00:00:36.369 --> 00:00:40.240
Quando o renderizador buscar 
o componente,

00:00:40.240 --> 00:00:43.694
ele vem na pasta
e chama o componente,

00:00:43.694 --> 00:00:47.280
vem na pasta e chama um componente,
por isso eles têm o mesmo nome

00:00:47.280 --> 00:00:50.149
e é uma boa prática utilizar "page"

00:00:50.149 --> 00:00:53.823
em todas as suas pastas
como referência.

00:00:53.823 --> 00:00:58.387
Lembrando que ele vai buscar também
o nome da pasta inicial,

00:00:58.387 --> 00:01:00.245
aqui chama "contato",
aqui chama "home",

00:01:00.245 --> 00:01:02.819
aqui chama "sobre"
e, em seguida,

00:01:02.819 --> 00:01:07.533
precisamos trazer o link novamente,
o nosso "Nav",

00:01:07.533 --> 00:01:10.073
importar o link,

00:01:10.073 --> 00:01:15.997
que é a dependência que realiza 
o clique de chamar as páginas

00:01:15.997 --> 00:01:17.810
e montar a estrutura.

00:01:17.810 --> 00:01:22.882
Eu já coloquei as estilizações
utilizando o tailwind e criei um "Nav".

00:01:22.882 --> 00:01:26.653
Esse "Nav" possui uma "ul"
e aí nós temos a lista.

00:01:26.653 --> 00:01:28.755
A primeira lista é um "home",

00:01:28.755 --> 00:01:30.865
a segunda, 
um "sobre"

00:01:30.865 --> 00:01:32.325
e a terceira, 
o "contato".

00:01:32.325 --> 00:01:37.497
Se você visualizar aqui no navegador,
temos o "home", "sobre" e "contato".

00:01:37.497 --> 00:01:42.702
Já está estilizado de uma forma
bem clara e objetiva.

00:01:42.702 --> 00:01:47.807
Em seguida, voltamos ao nosso "app"

00:01:47.807 --> 00:01:51.511
e em cada componente, por exemplo, 
o "contato",

00:01:51.511 --> 00:01:54.914
montamos o componente contato
e colocamos aqui, olha, "contato"

00:01:54.914 --> 00:01:58.084
e chamamos o componente "Nav",

00:01:58.084 --> 00:02:04.090
para que ele receba toda essa estrutura
aqui do navegador.

00:02:04.090 --> 00:02:08.561
Isso vai acontecer da mesma forma
nos outros componentes,

00:02:08.561 --> 00:02:11.197
no "home" e no "sobre".

00:02:11.197 --> 00:02:17.640
Fazendo com que ao clicar
já apareça a página referente ao "home",

00:02:17.640 --> 00:02:22.642
a página referente ao "sobre"
e ao "contato".

00:02:22.642 --> 00:02:26.946
Isso é um gerenciamento de rotas
que você preparou aqui no "Nav",

00:02:26.946 --> 00:02:31.528
que o próprio Next já criou aqui
o seu gerenciamento

00:02:31.528 --> 00:02:36.756
ao criar as pastas
com o "page" de cada uma delas.

00:02:36.756 --> 00:02:42.337
E assim, vemos como funciona
uma navegabilidade no seu projeto.

00:02:42.337 --> 00:02:45.464
Criar um gerenciamento de rotas
em Next.js é bem simples,

00:02:45.464 --> 00:02:48.611
torna mais fácil a aplicação 
em seus projetos futuros.