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:32.091
A primeira lista ele é um "home".[br]a segunda um sobre e a terceira o contato.

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

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

0:01:42.702,0:01:46.305
Em seguida, voltamos ao nosso app

0:01:47.807,0:01:50.810
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:57.917
e chamamos o componente NAV

0:01:58.084,0:02:00.620
para que ele receba

0:02:00.620,0:02:03.623
essa estrutura que toda do navegador.

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

0:02:08.561,0:02:11.197
Rome e no Sobre.

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

0:02:14.600,0:02:17.603
já apareça a página referente ao Rome,

0:02:17.770,0:02:20.706
a página referente ao Sobre

0:02:20.706,0:02:22.642
e a página referente ao contato.

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

0:02:26.946,0:02:29.949
que o próprio Nick já criou aqui.

0:02:30.149,0:02:35.454
O seu gerenciamento ao criar as pastinhas[br]com o Page de cada uma delas

0:02:36.756,0:02:38.124
e assim

0:02:38.124,0:02:41.994
vemos como que funciona[br]uma navegabilidade no seu projeto.

0:02:42.428,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.