Como Usar Rotas Paralelas| Next.js

[Música] fala Mestres beleza no vídeo de hoje nós vamos implementar aqui as rotas paralelas a gente vai ver o que é implementar e ver funcionando aqui no nosso projeto tá então eu tô aqui no projeto que a gente parou na aula passada né que a gente estava falando sobre grupo de rotas e sobre rotas paralelas né rotas dinâmicas na verdade e para falar sobre as rotas paralelas a ideia o próprio nome né já fala da da Rota ser em paralelo é que vai renderizar diferentes componentes ali dependendo da Rota né então uma rota vai resolver

para diferentes componentes e a gente vai ver como que isso é feito aqui no nosso na organização né O que que muda aqui na organização dos nossos diretórios então nós temos aqui né o nosso carrinho de compras tem aqui o grupo de de de rotas referente ao pagamento e nós temos aqui essa rota de resumo né que seria ali o resumo do carrinho então para melhorar para pra gente conseguir ver isso aqui eu vou criar uma nova rota chamada Isso aqui vai ser pode ser por exemplo as sugestões no carrinho ele vai mostrar o resumo

e dar também uma sugestões Então vou chamar aqui ó de suggestions e aqui dentro a gente vai criar um arquivo uma página comum né eu vou dar o nome aqui dessa página de suggestions e aqui vai ter um Hello from aqui eu eu já definir previamente as bordas para essa para essas componentes pra gente ver is aqui funcionando então eu já tô aqui com eu tava testando isso aqui antes né Eu tô aqui com o navegador certo e nós temos aqui a rota cart e no no nosso caso aqui né E nós temos cart barra

resume né que é a terra a tela de resumo e cart barra suggestion né então vamos lá cart barra resume e nós temos a tela de resumo né com a borda verde e nós teremos também o cart bar su essa rota aqui suggestions né tá com s final né é essa rota que tá resolvendo então com essas duas rotas a gente vai querer renderizar isso aqui em paralelo e para renderizar em paralelo a gente faz o uso aqui do nosso layout né o arquivo de layout ele é extremamente importante para que isso funcione então o

como que isso vai funcionar quando eu definir né que essas rodas aqui serão rizadas em paralelo as duas componentes serão enviadas via parâmetro pro nosso layout tá então como eu tenho aqui ó a nossa rota resume e a rota suggestions o nosso layout ele vai receber além do Children né que seria o conteúdo aqui dentro do layout nós vamos receber também o resom e suggestion e aqui a gente pode criar né essas duas propriedades Zoom seria essas duas telas né Zoom sub então com essas duas componentes eu vou renderizar dentro do meu layout e eu

vou basicamente colocar aqui abaixo do Tier colocar aqui ooom e vou colocar aqui tá só que isso aqui já vai dar um erro é na verdade aqui não deu ainda mas não funciona dessa forma né não é só isso na verdade para que o Next o Next entenda que isso aqui são rotas paralelas nós temos que renomear esses diretórios e renomear colocando um @ no início né então aqui o resume vai ser @ resume e suggestion vai ser @ sugestion a gente pode salvar isso aqui salvar os arquivos né que ele alterou aqui pra gente

e na verdade vou parar o servidor e rodar de novo né para ele compilar novamente essas rodas e agora quando eu Navegar para no caso aqui eu já não consigo mais Navegar diretamente pr pra rota né barra suggestions a gente tem que Navegar para pro nosso carrinho né então aqui vai ser só barra cart e quando eu navego pra Barra cart nós já temos aqui as duas componentes sendo exibidas tá então dessa forma eu consigo com essa estrutura na verdade né renderizar com essa estrutura né renderizar as duas componentes beleza e tudo isso né baseado

aí na estrutura das nossas na na organização aqui das nossas rotas Então agora que eu consigo né baseado em uma rota renderizar outras rotas a gente pode por exemplo aplicar eh um condicional aqui né então por exemplo eu teria aqui um uma variável um state alguma coisa que diria se o usuário está logado por exemplo eu vou definir isso aqui como CL mas poderia ser por exemplo R use Alfa né ou alguma coisa do tipo e aqui eu verificaria né pô se se o usuário está logado né log de for pro eu vou retornar por

exemplo eh as duas telas né isso aqui e senão eu vou retornar por exemplo só su isso aqui tá errado aqui não tem Chaves né geste então meio que meio que com isso né isso a gente começa a ter essa possibilidade de fazer esse controle lá como tá true né vai renderizar os dois se eu trocar esse slogan para fals por exemplo a gente vai ver que só uma rota foi renderizada então dessa forma a gente começa né a ter esse esse controle melhor de renderização o o Next vai aplicar todas as otimizações referente a

essas rotas tudo que o Next já faz aqui vai funcionar normalmente e o que a gente o que a gente pode fazer aqui por exemplo na verdade são detalhes da implementação porque agora dessa forma eu não consigo navegar para o Barra cart barra e qual é a outra rota aqui barra Zoom Se eu tentar Navegar dessa forma eu não consigo e o o por que que eu não consigo né porque essas rotas né no caso que resum e suggestion não são rotas comuns né são rotas paralelas então elas renderizar quando eu acessar o meu carrinho

né na verdade eu vou ter a possibilidade de decidir como que eu vou renderizar né Eh aqui no meu layout e a vantagem disso é que essas duas páginas né Essas duas telas de resumo e de sugestões vão continuar sendo eh a as telas do vai ser tratado da mesma forma que o nest trata as outras telas né as outras rotas Então as duas rotas se renderizar em paralelo né Elas carregarão independentemente se uma der erro eu consigo tratar o erro daquela tela em específico e enquanto ela estiver carregando eu consigo implementar ali o estado

a componente de loading Então são duas telas separadas eh que serão renderizadas né e tratadas Diferentemente né independentemente e dá dá mais dinâmica pro nosso pra nossa aplicação né a nossa toda essa parte de roteamento redirecionamento vai ficar mais dinâmico por conta dessas páginas serem aí di páginas separadas né que estão sendo carregadas aí em paralelo e aqui a gente poderia né criar o nosso arquivo o error né para tratar o erro poderia ter aqui o loading né os arquivos pra gente conseguir tratando essas componentes da mesma forma que nós e tratamos outras páginas do

do Next Beleza então para essa aula aqui vai ser isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode est deixando um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima Y