1
00:00:07,780 --> 00:00:11,796
A navegabilidade em Next.js facilita
uma boa navegação entre as páginas

2
00:00:11,796 --> 00:00:13,646
de uma forma rápida e dinâmica.

3
00:00:13,646 --> 00:00:15,715
Para que isso aconteça
de uma forma fluída,

4
00:00:15,715 --> 00:00:17,871
precisamos de um bom
gerenciamento de rotas.

5
00:00:17,871 --> 00:00:18,786
No projeto,

6
00:00:18,786 --> 00:00:21,406
precisamos criar
algumas estruturas, por exemplo,

7
00:00:21,406 --> 00:00:24,296
criar o componente "Nav.js"

8
00:00:24,296 --> 00:00:25,224
e no "app",

9
00:00:25,224 --> 00:00:27,434
criar os componentes
que serão navegados.

10
00:00:27,434 --> 00:00:31,264
Por exemplo,
a pasta "contato" recebe "page.jsx",

11
00:00:31,264 --> 00:00:36,369
a pasta "home" recebe "page.jsx",
a pasta "sobre" recebe "page.jsx".

12
00:00:36,369 --> 00:00:40,240
Quando o renderizador buscar 
o componente,

13
00:00:40,240 --> 00:00:43,694
ele vem na pasta
e chama o componente,

14
00:00:43,694 --> 00:00:47,280
vem na pasta e chama um componente,
por isso eles têm o mesmo nome

15
00:00:47,280 --> 00:00:50,149
e é uma boa prática utilizar "page"

16
00:00:50,149 --> 00:00:53,823
em todas as suas pastas
como referência.

17
00:00:53,823 --> 00:00:58,387
Lembrando que ele vai buscar também
o nome da pasta inicial,

18
00:00:58,387 --> 00:01:00,245
aqui chama "contato",
aqui chama "home",

19
00:01:00,245 --> 00:01:02,819
aqui chama "sobre"
e, em seguida,

20
00:01:02,819 --> 00:01:07,533
precisamos trazer o link novamente,
nosso "Nav",

21
00:01:07,533 --> 00:01:10,033
importar o link,

22
00:01:10,033 --> 00:01:15,997
que é a dependência que realiza 
o clique de chamar as páginas

23
00:01:15,997 --> 00:01:17,810
e montar a estrutura.

24
00:01:17,810 --> 00:01:22,882
Eu já coloquei a estilização
utilizando o tailwind e criei um "Nav".

25
00:01:22,882 --> 00:01:26,653
Esse "Nav" possui uma "ul"
e aí nós temos a lista.

26
00:01:26,653 --> 00:01:28,755
A primeira lista é um "home".

27
00:01:28,755 --> 00:01:30,865
A segunda, 
um "sobre"

28
00:01:30,865 --> 00:01:32,325
e a terceira, 
o "contato".

29
00:01:32,325 --> 00:01:37,497
Se você visualizar aqui no navegador,
temos o "home", "sobre" e "contato".

30
00:01:37,497 --> 00:01:42,702
Já está estilizado de uma forma
bem clara e objetiva.

31
00:01:42,702 --> 00:01:47,807
Em seguida, voltamos ao nosso "app"

32
00:01:47,807 --> 00:01:51,511
e em cada componente, por exemplo, 
o "contato",

33
00:01:51,511 --> 00:01:54,914
montamos o componente contato
e colocamos aqui, olha, "contato"

34
00:01:54,914 --> 00:01:58,084
e chamamos o componente "Nav",

35
00:01:58,084 --> 00:02:04,090
para que ele receba toda essa estrutura
aqui do navegador.

36
00:02:04,090 --> 00:02:08,561
Isso vai acontecer da mesma forma
nos outros componentes,

37
00:02:08,561 --> 00:02:11,197
no "home" e no "sobre".

38
00:02:11,197 --> 00:02:17,640
Fazendo com que ao clicar
já apareça a página referente ao home,

39
00:02:17,640 --> 00:02:22,642
a página referente ao "sobre"
e ao "contato".

40
00:02:22,642 --> 00:02:26,946
Isso é um gerenciamento de rotas
que você preparou aqui no "Nav"

41
00:02:26,946 --> 00:02:31,490
que o próprio Next já criou aqui
o seu gerenciamento

42
00:02:31,490 --> 00:02:36,756
ao criar as pastas
com o "page" de cada uma delas.

43
00:02:36,756 --> 00:02:42,329
E assim vemos como que funciona
uma navegabilidade no seu projeto.

44
00:02:42,329 --> 00:02:45,464
Criar um gerenciamento de rotas
em Next js é bem simples,

45
00:02:45,464 --> 00:02:48,611
torna mais fácil
a aplicação em seus projetos futuros.