[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:07.78,0:00:11.80,Default,,0000,0000,0000,,A navegabilidade Next js facilita\Numa boa navegação entre as páginas
Dialogue: 0,0:00:11.80,0:00:13.65,Default,,0000,0000,0000,,de uma forma rápida e dinâmica.
Dialogue: 0,0:00:13.65,0:00:15.72,Default,,0000,0000,0000,,Para que isso aconteça\Nde uma forma fluída,
Dialogue: 0,0:00:15.72,0:00:17.89,Default,,0000,0000,0000,,precisamos de um bom\Ngerenciamento de rotas.
Dialogue: 0,0:00:17.89,0:00:21.41,Default,,0000,0000,0000,,No projeto precisamos criar\Nalgumas estruturas, por exemplo,
Dialogue: 0,0:00:21.41,0:00:24.26,Default,,0000,0000,0000,,criar o component "Nav.js"
Dialogue: 0,0:00:24.26,0:00:27.43,Default,,0000,0000,0000,,e no "App" criar os componentes\Nque serão navegados.
Dialogue: 0,0:00:27.43,0:00:31.26,Default,,0000,0000,0000,,Por exemplo,\Na pasta "contato" recebe "page.jsx",
Dialogue: 0,0:00:31.26,0:00:36.37,Default,,0000,0000,0000,,a pasta "home" recebe "page.jsx",\Na pasta "sobre" recebe "page.jsx".
Dialogue: 0,0:00:36.37,0:00:40.24,Default,,0000,0000,0000,,Quando o renderizador\Nbuscar o componente
Dialogue: 0,0:00:40.24,0:00:43.69,Default,,0000,0000,0000,,ele vem na pasta\Ne chama o componente,
Dialogue: 0,0:00:43.69,0:00:47.28,Default,,0000,0000,0000,,vem na pasta chama o componente,\Npor isso eles tem o mesmo nome
Dialogue: 0,0:00:47.28,0:00:50.15,Default,,0000,0000,0000,,e é uma boa prática utilizar "page"
Dialogue: 0,0:00:50.15,0:00:53.85,Default,,0000,0000,0000,,em todas as suas pastas\Ncomo referência.
Dialogue: 0,0:00:53.85,0:00:58.42,Default,,0000,0000,0000,,Lembrando que ele vai buscar também\No nome da pasta inicial,
Dialogue: 0,0:00:58.42,0:01:00.24,Default,,0000,0000,0000,,aqui chama "contato",\Naqui chama "home",
Dialogue: 0,0:01:00.24,0:01:02.80,Default,,0000,0000,0000,,aqui chama "sobre"\Ne, em seguida,
Dialogue: 0,0:01:02.80,0:01:07.53,Default,,0000,0000,0000,,precisamos trazer o link novamente\Nnosso "Nav".
Dialogue: 0,0:01:07.53,0:01:14.17,Default,,0000,0000,0000,,Importar o link que é a dependência\Nque realiza o click
Dialogue: 0,0:01:14.17,0:01:17.81,Default,,0000,0000,0000,,de chamar as páginas\Ne montar a estrutura.
Dialogue: 0,0:01:17.81,0:01:22.88,Default,,0000,0000,0000,,Eu já coloquei a estilização\Nutilizando o tailwind, criei um "Nav".
Dialogue: 0,0:01:22.88,0:01:26.65,Default,,0000,0000,0000,,Esse "Nav" possui uma "ul"\Ne aí nós temos a lista.
Dialogue: 0,0:01:26.65,0:01:32.09,Default,,0000,0000,0000,,A primeira lista ele é um "home".\Na segunda um sobre e a terceira o contato.
Dialogue: 0,0:01:32.32,0:01:36.70,Default,,0000,0000,0000,,Se você visualizar aqui no navegador\Ntemos o nome sobre e contato.
Dialogue: 0,0:01:37.50,0:01:41.20,Default,,0000,0000,0000,,Já está estilizado de uma forma bem clara\Ne objetiva.
Dialogue: 0,0:01:42.70,0:01:46.30,Default,,0000,0000,0000,,Em seguida, voltamos ao nosso app
Dialogue: 0,0:01:47.81,0:01:50.81,Default,,0000,0000,0000,,e em cada componente,\Npor exemplo, o contato,
Dialogue: 0,0:01:51.51,0:01:54.91,Default,,0000,0000,0000,,montamos o componente contato\Ne colocamos aqui o contato
Dialogue: 0,0:01:54.91,0:01:57.92,Default,,0000,0000,0000,,e chamamos o componente NAV
Dialogue: 0,0:01:58.08,0:02:00.62,Default,,0000,0000,0000,,para que ele receba
Dialogue: 0,0:02:00.62,0:02:03.62,Default,,0000,0000,0000,,essa estrutura que toda do navegador.
Dialogue: 0,0:02:04.09,0:02:08.36,Default,,0000,0000,0000,,Isso vai acontecer da mesma forma\Nnos outros componentes.
Dialogue: 0,0:02:08.56,0:02:11.20,Default,,0000,0000,0000,,Rome e no Sobre.
Dialogue: 0,0:02:11.20,0:02:14.20,Default,,0000,0000,0000,,Fazendo com que ao clicar
Dialogue: 0,0:02:14.60,0:02:17.60,Default,,0000,0000,0000,,já apareça a página referente ao Rome,
Dialogue: 0,0:02:17.77,0:02:20.71,Default,,0000,0000,0000,,a página referente ao Sobre
Dialogue: 0,0:02:20.71,0:02:22.64,Default,,0000,0000,0000,,e a página referente ao contato.
Dialogue: 0,0:02:22.64,0:02:26.38,Default,,0000,0000,0000,,Isso é um gerenciamento de rotas\Nque você preparou aqui no Nave
Dialogue: 0,0:02:26.95,0:02:29.95,Default,,0000,0000,0000,,que o próprio Nick já criou aqui.
Dialogue: 0,0:02:30.15,0:02:35.45,Default,,0000,0000,0000,,O seu gerenciamento ao criar as pastinhas\Ncom o Page de cada uma delas
Dialogue: 0,0:02:36.76,0:02:38.12,Default,,0000,0000,0000,,e assim
Dialogue: 0,0:02:38.12,0:02:41.99,Default,,0000,0000,0000,,vemos como que funciona\Numa navegabilidade no seu projeto.
Dialogue: 0,0:02:42.43,0:02:45.43,Default,,0000,0000,0000,,Criar um gerenciamento de rotas NFS\Né bem simples,
Dialogue: 0,0:02:45.46,0:02:48.03,Default,,0000,0000,0000,,torna mais fácil\Na aplicação em seus projetos futuros.