[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:22.76,Default,,0000,0000,0000,,criar o component Nav, Dialogue: 0,0:00:22.76,0:00:26.93,Default,,0000,0000,0000,,o componente NAV e no app\Ncriar os componentes que serão navegados. Dialogue: 0,0:00:27.49,0:00:30.76,Default,,0000,0000,0000,,Por exemplo,\Na pasta Contato recebe peixes, Dialogue: 0,0:00:31.26,0:00:35.67,Default,,0000,0000,0000,,a pasta Rome recebe PIS,\Na pasta sobre recebe PIS. Dialogue: 0,0:00:36.37,0:00:39.84,Default,,0000,0000,0000,,Quando o renderizador buscar o componente Dialogue: 0,0:00:40.24,0:00:44.54,Default,,0000,0000,0000,,ele vem na pastinha\Ne chama o componente da pastinha. Dialogue: 0,0:00:44.74,0:00:47.28,Default,,0000,0000,0000,,Chamam o componente,\Npor isso que ele tem o mesmo nome Dialogue: 0,0:00:47.28,0:00:50.15,Default,,0000,0000,0000,,e é uma boa prática utilizar Peng Dialogue: 0,0:00:50.15,0:00:53.55,Default,,0000,0000,0000,,em todas as suas pastas como 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:00:59.42,Default,,0000,0000,0000,,a que chama contato. Dialogue: 0,0:00:59.42,0:01:02.80,Default,,0000,0000,0000,,Aqui chama Rome que isso é uma sobre e,\Nem seguida, Dialogue: 0,0:01:02.80,0:01:06.93,Default,,0000,0000,0000,,precisamos trazer o link novamente\Nno nosso NAV. Dialogue: 0,0:01:07.53,0:01:10.14,Default,,0000,0000,0000,,Importar o link Dialogue: 0,0:01:10.14,0:01:13.94,Default,,0000,0000,0000,,que é a dependência que realiza o click Dialogue: 0,0:01:14.17,0:01:17.21,Default,,0000,0000,0000,,de chamar as páginas e montar a estrutura. Dialogue: 0,0:01:17.81,0:01:22.05,Default,,0000,0000,0000,,Eu já coloquei a estilização\Nutilizando o IDE, criei um nav. Dialogue: 0,0:01:22.88,0:01:24.32,Default,,0000,0000,0000,,Esse navio possui uma ou ele Dialogue: 0,0:01:25.35,0:01:26.65,Default,,0000,0000,0000,,e 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 nome,\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.