0:00:07.780,0:00:11.796
A navegabilidade Next js facilita[br]uma boa navegação entre as páginas

0:00:11.796,0:00:13.646
de uma forma rápida e dinâmica.

0:00:13.646,0:00:15.715
Para que isso aconteça[br]de uma forma fluída,

0:00:15.715,0:00:17.890
precisamos de um bom[br]gerenciamento de rotas.

0:00:17.890,0:00:21.406
No projeto precisamos criar[br]algumas estruturas, por exemplo,

0:00:21.406,0:00:24.256
criar o component "Nav.js"

0:00:24.256,0:00:27.434
e no "App" criar os componentes[br]que serão navegados.

0:00:27.434,0:00:31.264
Por exemplo,[br]a pasta "contato" recebe "page.jsx",

0:00:31.264,0:00:36.369
a pasta "home" recebe "page.jsx",[br]a pasta "sobre" recebe "page.jsx".

0:00:36.369,0:00:40.240
Quando o renderizador[br]buscar o componente

0:00:40.240,0:00:43.694
ele vem na pasta[br]e chama o componente,

0:00:43.694,0:00:47.280
vem na pasta chama o componente,[br]por isso eles tem o mesmo nome

0:00:47.280,0:00:50.149
e é uma boa prática utilizar "page"

0:00:50.149,0:00:53.853
em todas as suas pastas[br]como referência.

0:00:53.853,0:00:58.424
Lembrando que ele vai buscar também[br]o nome da pasta inicial,

0:00:58.424,0:01:00.245
aqui chama "contato",[br]aqui chama "home",

0:01:00.245,0:01:02.795
aqui chama "sobre"[br]e, em seguida,

0:01:02.795,0:01:07.533
precisamos trazer o link novamente[br]nosso "Nav".

0:01:07.533,0:01:14.173
Importar o link que é a dependência[br]que realiza o click

0:01:14.173,0:01:17.810
de chamar as páginas[br]e montar a estrutura.

0:01:17.810,0:01:22.882
Eu já coloquei a estilização[br]utilizando o tailwind, criei um "Nav".

0:01:22.882,0:01:26.653
Esse "Nav" possui uma "ul"[br]e aí nós temos a lista.

0:01:26.653,0:01:28.755
A primeira lista ele é um "home".

0:01:28.755,0:01:32.325
A segunda um "sobre"[br]e a terceira o "contato".

0:01:32.325,0:01:37.497
Se você visualizar aqui no navegador[br]temos o "home", "sobre" e "contato".

0:01:37.497,0:01:42.702
Já está estilizado de uma forma[br]bem clara e objetiva.

0:01:42.702,0:01:47.807
Em seguida, voltamos ao nosso "app"

0:01:47.807,0:01:51.511
e em cada componente,[br]por exemplo, o "contato",

0:01:51.511,0:01:54.914
montamos o componente contato[br]e colocamos aqui o "Contato"

0:01:54.914,0:01:58.084
e chamamos o componente "Nav"

0:01:58.084,0:02:04.090
para que ele receba essa estrutura[br]aqui toda do navegador.

0:02:04.090,0:02:08.561
Isso vai acontecer da mesma forma[br]nos outros componentes

0:02:08.561,0:02:11.197
No "home" e no "sobre".

0:02:11.197,0:02:14.600
Fazendo com que ao clicar

0:02:14.600,0:02:17.640
já apareça a página referente ao home,

0:02:17.640,0:02:22.642
a página referente ao "sobre"[br]e a página referente ao "contato".

0:02:22.642,0:02:26.946
Isso é um gerenciamento de rotas[br]que você preparou aqui no "Nav"

0:02:26.946,0:02:31.490
que o próprio Next já criou aqui[br]o seu gerenciamento

0:02:31.490,0:02:36.756
ao criar as pastas[br]com o "page" de cada uma delas.

0:02:36.756,0:02:42.329
E assim vemos como que funciona[br]uma navegabilidade no seu projeto.

0:02:42.329,0:02:45.431
Criar um gerenciamento de rotas NFS[br]é bem simples,

0:02:45.464,0:02:48.034
torna mais fácil[br]a aplicação em seus projetos futuros.