1
00:00:07,780 --> 00:00:11,796
A navegabilidade 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,890
precisamos de um bom
gerenciamento de rotas.

5
00:00:17,890 --> 00:00:21,406
No projeto precisamos criar
algumas estruturas, por exemplo,

6
00:00:21,406 --> 00:00:24,256
criar o component "Nav.js"

7
00:00:24,256 --> 00:00:27,434
e no "App" criar os componentes
que serão navegados.

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

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

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

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

12
00:00:43,694 --> 00:00:47,280
vem na pasta chama o componente,
por isso eles tem o mesmo nome

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

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

15
00:00:53,853 --> 00:00:58,424
Lembrando que ele vai buscar também
o nome da pasta inicial,

16
00:00:58,424 --> 00:01:00,245
aqui chama "contato",
aqui chama "home",

17
00:01:00,245 --> 00:01:02,795
aqui chama "sobre"
e, em seguida,

18
00:01:02,795 --> 00:01:07,533
precisamos trazer o link novamente
nosso "Nav".

19
00:01:07,533 --> 00:01:14,173
Importar o link que é a dependência
que realiza o click

20
00:01:14,173 --> 00:01:17,810
de chamar as páginas
e montar a estrutura.

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

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

23
00:01:26,653 --> 00:01:32,091
A primeira lista ele é um "home".
a segunda um sobre e a terceira o contato.

24
00:01:32,325 --> 00:01:36,696
Se você visualizar aqui no navegador
temos o nome sobre e contato.

25
00:01:37,497 --> 00:01:41,200
Já está estilizado de uma forma bem clara
e objetiva.

26
00:01:42,702 --> 00:01:46,305
Em seguida, voltamos ao nosso app

27
00:01:47,807 --> 00:01:50,810
e em cada componente,
por exemplo, o contato,

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

29
00:01:54,914 --> 00:01:57,917
e chamamos o componente NAV

30
00:01:58,084 --> 00:02:00,620
para que ele receba

31
00:02:00,620 --> 00:02:03,623
essa estrutura que toda do navegador.

32
00:02:04,090 --> 00:02:08,361
Isso vai acontecer da mesma forma
nos outros componentes.

33
00:02:08,561 --> 00:02:11,197
Rome e no Sobre.

34
00:02:11,197 --> 00:02:14,200
Fazendo com que ao clicar

35
00:02:14,600 --> 00:02:17,603
já apareça a página referente ao Rome,

36
00:02:17,770 --> 00:02:20,706
a página referente ao Sobre

37
00:02:20,706 --> 00:02:22,642
e a página referente ao contato.

38
00:02:22,642 --> 00:02:26,379
Isso é um gerenciamento de rotas
que você preparou aqui no Nave

39
00:02:26,946 --> 00:02:29,949
que o próprio Nick já criou aqui.

40
00:02:30,149 --> 00:02:35,454
O seu gerenciamento ao criar as pastinhas
com o Page de cada uma delas

41
00:02:36,756 --> 00:02:38,124
e assim

42
00:02:38,124 --> 00:02:41,994
vemos como que funciona
uma navegabilidade no seu projeto.

43
00:02:42,428 --> 00:02:45,431
Criar um gerenciamento de rotas NFS
é bem simples,

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