WEBVTT

00:00:07.780 --> 00:00:11.796
A navegabilidade 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.890
precisamos de um bom
gerenciamento de rotas.

00:00:17.890 --> 00:00:21.406
No projeto precisamos criar
algumas estruturas, por exemplo,

00:00:21.406 --> 00:00:22.756
criar o component Nav,

00:00:22.756 --> 00:00:26.926
o componente NAV e no app
criar os componentes que serão navegados.

00:00:27.494 --> 00:00:30.764
Por exemplo,
a pasta Contato recebe peixes,

00:00:31.264 --> 00:00:35.668
a pasta Rome recebe PIS,
a pasta sobre recebe PIS.

00:00:36.369 --> 00:00:39.839
Quando o renderizador buscar o componente

00:00:40.240 --> 00:00:44.544
ele vem na pastinha
e chama o componente da pastinha.

00:00:44.744 --> 00:00:47.280
Chamam o componente,
por isso que ele tem o mesmo nome

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

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

00:00:53.853 --> 00:00:58.424
Lembrando que ele vai buscar também
o nome da pasta inicial

00:00:58.424 --> 00:00:59.425
a que chama contato.

00:00:59.425 --> 00:01:02.795
Aqui chama Rome que isso é uma sobre e,
em seguida,

00:01:02.795 --> 00:01:06.933
precisamos trazer o link novamente
no nosso NAV.

00:01:07.533 --> 00:01:10.136
Importar o link

00:01:10.136 --> 00:01:13.940
que é a dependência que realiza o click

00:01:14.173 --> 00:01:17.210
de chamar as páginas e montar a estrutura.

00:01:17.810 --> 00:01:22.048
Eu já coloquei a estilização
utilizando o IDE, criei um nav.

00:01:22.882 --> 00:01:24.317
Esse navio possui uma ou ele

00:01:25.351 --> 00:01:26.653
e aí nós temos a lista.

00:01:26.653 --> 00:01:32.091
A primeira lista ele é um nome,
a segunda um sobre e a terceira o contato.

00:01:32.325 --> 00:01:36.696
Se você visualizar aqui no navegador
temos o nome sobre e contato.

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

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

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

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

00:01:54.914 --> 00:01:57.917
e chamamos o componente NAV

00:01:58.084 --> 00:02:00.620
para que ele receba

00:02:00.620 --> 00:02:03.623
essa estrutura que toda do navegador.

00:02:04.090 --> 00:02:08.361
Isso vai acontecer da mesma forma
nos outros componentes.

00:02:08.561 --> 00:02:11.197
Rome e no Sobre.

00:02:11.197 --> 00:02:14.200
Fazendo com que ao clicar

00:02:14.600 --> 00:02:17.603
já apareça a página referente ao Rome,

00:02:17.770 --> 00:02:20.706
a página referente ao Sobre

00:02:20.706 --> 00:02:22.642
e a página referente ao contato.

00:02:22.642 --> 00:02:26.379
Isso é um gerenciamento de rotas
que você preparou aqui no Nave

00:02:26.946 --> 00:02:29.949
que o próprio Nick já criou aqui.

00:02:30.149 --> 00:02:35.454
O seu gerenciamento ao criar as pastinhas
com o Page de cada uma delas

00:02:36.756 --> 00:02:38.124
e assim

00:02:38.124 --> 00:02:41.994
vemos como que funciona
uma navegabilidade no seu projeto.

00:02:42.428 --> 00:02:45.431
Criar um gerenciamento de rotas NFS
é bem simples,

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