[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 em 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.87,Default,,0000,0000,0000,,precisamos de um bom\Ngerenciamento de rotas.
Dialogue: 0,0:00:17.87,0:00:18.79,Default,,0000,0000,0000,,No projeto,
Dialogue: 0,0:00:18.79,0:00:21.41,Default,,0000,0000,0000,,precisamos criar\Nalgumas estruturas, por exemplo,
Dialogue: 0,0:00:21.41,0:00:24.30,Default,,0000,0000,0000,,criar o componente "Nav.js"
Dialogue: 0,0:00:24.30,0:00:25.22,Default,,0000,0000,0000,,e no "app",
Dialogue: 0,0:00:25.22,0:00:27.43,Default,,0000,0000,0000,,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 buscar \No 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 e chama um componente,\Npor isso eles têm 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.82,Default,,0000,0000,0000,,em todas as suas pastas\Ncomo referência.
Dialogue: 0,0:00:53.82,0:00:58.39,Default,,0000,0000,0000,,Lembrando que ele vai buscar também\No nome da pasta inicial,
Dialogue: 0,0:00:58.39,0:01:00.24,Default,,0000,0000,0000,,aqui chama "contato",\Naqui chama "home",
Dialogue: 0,0:01:00.24,0:01:02.82,Default,,0000,0000,0000,,aqui chama "sobre"\Ne, em seguida,
Dialogue: 0,0:01:02.82,0:01:07.53,Default,,0000,0000,0000,,precisamos trazer o link novamente,\Nnosso "Nav",
Dialogue: 0,0:01:07.53,0:01:10.03,Default,,0000,0000,0000,,importar o link,
Dialogue: 0,0:01:10.03,0:01:15.100,Default,,0000,0000,0000,,que é a dependência que realiza \No clique de chamar as páginas
Dialogue: 0,0:01:15.100,0:01:17.81,Default,,0000,0000,0000,,e 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 e 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 é um "home".
Dialogue: 0,0:01:28.76,0:01:30.86,Default,,0000,0000,0000,,A segunda, \Num "sobre"
Dialogue: 0,0:01:30.86,0:01:32.32,Default,,0000,0000,0000,,e a terceira, \No "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, por exemplo, \No "contato",
Dialogue: 0,0:01:51.51,0:01:54.91,Default,,0000,0000,0000,,montamos o componente contato\Ne colocamos aqui, olha, "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 toda essa estrutura\Naqui 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:17.64,Default,,0000,0000,0000,,Fazendo com que ao clicar\Njá 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 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.