0:00:07.780,0:00:11.796
A navegabilidade em 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.871
precisamos de um bom[br]gerenciamento de rotas.

0:00:17.871,0:00:18.786
No projeto,

0:00:18.786,0:00:21.406
precisamos criar[br]algumas estruturas, por exemplo,

0:00:21.406,0:00:24.296
criar o componente "Nav.js"

0:00:24.296,0:00:25.224
e no "app",

0:00:25.224,0:00:27.434
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 buscar [br]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 e chama um componente,[br]por isso eles têm 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.823
em todas as suas pastas[br]como referência.

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

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

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

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

0:01:07.533,0:01:10.073
importar o link,

0:01:10.073,0:01:15.997
que é a dependência que realiza [br]o clique de chamar as páginas

0:01:15.997,0:01:17.810
e montar a estrutura.

0:01:17.810,0:01:22.882
Eu já coloquei as estilizações[br]utilizando o tailwind e 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 é um "home",

0:01:28.755,0:01:30.865
a segunda, [br]um "sobre"

0:01:30.865,0:01:32.325
e a terceira, [br]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, por exemplo, [br]o "contato",

0:01:51.511,0:01:54.914
montamos o componente contato[br]e colocamos aqui, olha, "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 toda essa estrutura[br]aqui 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:17.640
Fazendo com que ao clicar[br]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 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.528
que o próprio Next já criou aqui[br]o seu gerenciamento

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

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

0:02:42.337,0:02:45.464
Criar um gerenciamento de rotas[br]em Next.js é bem simples,

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