[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:28.76,Default,,0000,0000,0000,,A primeira lista ele é um "home".
Dialogue: 0,0:01:28.76,0:01:32.32,Default,,0000,0000,0000,,A segunda um "sobre"\Ne a terceira o "contato".
Dialogue: 0,0:01:32.32,0:01:37.50,Default,,0000,0000,0000,,Se você visualizar aqui no navegador\Ntemos o "home", "sobre" e "contato".
Dialogue: 0,0:01:37.50,0:01:42.70,Default,,0000,0000,0000,,Já está estilizado de uma forma\Nbem clara e objetiva.
Dialogue: 0,0:01:42.70,0:01:47.81,Default,,0000,0000,0000,,Em seguida, voltamos ao nosso "app"
Dialogue: 0,0:01:47.81,0:01:51.51,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:58.08,Default,,0000,0000,0000,,e chamamos o componente "Nav"
Dialogue: 0,0:01:58.08,0:02:04.09,Default,,0000,0000,0000,,para que ele receba essa estrutura\Naqui toda do navegador.
Dialogue: 0,0:02:04.09,0:02:08.56,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,,No "home" e no "sobre".
Dialogue: 0,0:02:11.20,0:02:14.60,Default,,0000,0000,0000,,Fazendo com que ao clicar
Dialogue: 0,0:02:14.60,0:02:17.64,Default,,0000,0000,0000,,já apareça a página referente ao home,
Dialogue: 0,0:02:17.64,0:02:22.64,Default,,0000,0000,0000,,a página referente ao "sobre"\Ne a página referente ao "contato".
Dialogue: 0,0:02:22.64,0:02:26.95,Default,,0000,0000,0000,,Isso é um gerenciamento de rotas\Nque você preparou aqui no "Nav"
Dialogue: 0,0:02:26.95,0:02:31.49,Default,,0000,0000,0000,,que o próprio Next já criou aqui\No seu gerenciamento
Dialogue: 0,0:02:31.49,0:02:36.76,Default,,0000,0000,0000,,ao criar as pastas\Ncom o "page" de cada uma delas.
Dialogue: 0,0:02:36.76,0:02:42.33,Default,,0000,0000,0000,,E assim vemos como que funciona\Numa navegabilidade no seu projeto.
Dialogue: 0,0:02:42.33,0:02:45.46,Default,,0000,0000,0000,,Criar um gerenciamento de rotas\Nem Next js é bem simples,
Dialogue: 0,0:02:45.46,0:02:48.61,Default,,0000,0000,0000,,torna mais fácil\Na aplicação em seus projetos futuros.