Rotas Dinâmicas e Grupos de Rotas

[Música] fala Mestres beleza no vídeo de hoje nós vamos estar falando aqui sobre rotas dinâmicas e também agrupando rotas para organizar melhor o nosso projeto tá então eu já tô aqui com um projeto next que eu criei o projeto ele tá vazio eu tô até com ele aberto aqui no navegador que é basicamente um o projeto padrão até o tema né a cor de fundo preto que o Next coloca eu deixei é pra gente realmente ver essa parte da navegação né como é que a gente vai fazer para para navegar de uma tela para outra

que é o importante tá então aqui não a gente não vai ligar para CSS PR está bonito está feio a gente só quer ver de fato a parte o funcionamento das rotas Principalmente as rotas dinâmicas tá então aqui no nosso vs code eu tenho aqui o projeto né eu organizei as telas então nós estamos usando o app router né que é o o essa nova forma do Next aí de de realizar navegação e eu tenho algumas páginas certo eu tenho aqui as páginas a gente pode eu pensei em um em um um aplicativo de entrega

ou de compra né de produtos onde a gente vai ter um carrinho de compras a visualização dos produtos visualização de perfil e configurações aqui que também é só mesmo para Popular aqui as páginas então com essas páginas criadas eu consigo navegar né procart product profile cart e vamos ver isso aqui no navegador n então eu posso vir aqui ó em local host 3000 né bar cart a gente consegue acessar Hello from cart screen certo barra product a tela de produto dentro de cart também eu consigo navegar né então tem um barra cart barra Ed cart

aqui ó adicionar adicionar seria adicionar um um cartão n e aqui já é relacionado a funcionalidade de pagamento então eu tenho o edcard tenho o generate pix né se eu não me engano generate pix ele navega pra tela de geração de pix então a gente já tá esse navegador ele já tá estruturado da forma correta né E a gente já consegue realizar a navegação aí eh entre essas telas as telas né extremamente simples somente as páginas mesmo sem nada demais e quando a gente fala de Rota dinâmica qual seria a ideia né onde a gente

aplicaria isso aqui a gente poderia aplicar em produto porque o que que acontece a tela de produto vamos lá nela aqui aqui na tela de produto a gente vai ver informações do produto né então prod ou pode ser dos produtos né da uma listagem de produtos Enfim pode ser várias coisas mas o que o que que vai acontecer aqui vai ter casos por exemplo a funcionalidade de compartilhamento a gente vai compartilhar o conteúdo aquele produto com um amigo compartilhar aquele produto com alguém né mandar para para alguma pessoa e quando a gente faz isso a

gente tem que enviar um link né pra nossa aplicação e nesse ess link tem que conter qual produto que eu quero ver né então por exemplo eu quero e produtos a gente tem os identificadores né os ids então tem produto com ID x ID cada cada produto tem o seu ID Então nesse caso aqui eu teria que indicar nesse URL por exemplo bar product bar ID id1 23 né para quando a pessoa clicasse nesse link ela já viria pra minha aplicação pro módulo de produtos e veria detalhes daquele produto específico Então como a gente consegue

criar isso aqui no next né que é essa ideia das rotas dinâmicas eu tenho aqui a nossa rota de produto né que que eu como como eu disse pode ser uma rota Inicial que mostra vários produtos que mostra listagem de produtos vamos deixar ela aí e aqui dentro eu vou criar um novo diretório E esse novo diretório vai ser onde eu vou criar de fato a rota dinâmica e para criar rota dinâmica a gente usa colchetes e aqui eu passo um algum nome por exemplo product ID Esse nome que eu passo aqui dentro dos colchetes

é só para mim identificar o que que é ã o nome né daquele atributo daquela coisa que é dinâmica no caso que é o ID do produto aqui dentro eu vou criar uma página né uma página que vai ser para o product ID e que vai mostrar o eu vou deixar aqui um Hello from prod detail aqui é os detalhes ali de um produto que vai ser exibido E aí com essa estrutura feita com essas chaves criadas a gente pode vir aqui no nosso na nossa aplicação e agora quando eu tentar acessar essa rota né

o Barra product bar1 ele vai ele vai acessar n passar um 12 né 12 e qualquer coisa aqui depois do Barra ele vai me mandar para essa tela então a gente a gente costuma chamar né Cada parte aqui desse barra n barra alguma coisa barra outra de subdiretório Então esse subdiretório esse último subdiretório a gente pode acessar aqui o nome que a gente quiser e ele vai redirecionar para essa tela E aí na tela vamos voltar aqui no código na tela aqui no product né que que eu dei o nome da tela de product ID

eu vou receber um parâmetro e esse parâmetro eu vou chamar aqui a variável para o tipo dela vou deixar um n aqui só para typescript não ficar dando erro e aqui eu vou dar um console log para vamos olhar aqui no terminal Olha o que que ele trouxe para mim a gente recebe né Essa componente essa tela ela vai receber um objeto dentro objeto vai ter objeto par e dentro de par vai ter produ ID que foi o nome que eu dei aqui PR rota dinâmica valor que eui tem os parâmetros de busca isso aqui

como fos mas a ideia vamos voltar aqui PR gente testar ess sear paré então aquiar aqui interrog ver mas é o produto com meu nome poderia ser o owner Né o dono Mas tudo bem voltar aqui no código e olha lá ó temos os parâmetros da Rota né que seria o subdiretório que é o product id e eu tenho também um parâmetro de busca né o search parametr que é um query que foi enviada junto com aquele URL então com isso aqui a gente consegue criar uma rota dinâmica e dependendo do que a gente receber

como parâmetro eu vou decidir o que que eu vou mostrar no caso do produto então eu vou receber o ID do produto e com esse ID do produto eu posso fazer uma busca no meu banco de dados e renderizar essa tela né criar montar essa tela pro para quem estiver acessando visualizar o que que é aquele produto então aqui a gente pode fazer um destruct n par que seria o pra gente pegar os pars e o search par e aqui o tipo a gente tem que definir tá quando a gente tá com typescript a gente

tem que criar uma interface que descreve esses caras aqui e para para ele não ficar dando erro né e aqui eu posso fazer o log dos pars e dos search pars que nós teremos né o product ID o objeto e o name então se eu quiser pegar né esse product ID eu faria o log aqui de par pon product ID ele vai fazer o log aqui ó de do só do desse ID né esse ID que eu defini então com isso aqui feito a gente consegue né criar essas rotas dinâmicas e tem um passo adiante

disso aí que seria o me que um uma rota dinâmica mas não só para um subdiretório mas para vários que é o que ele chamou de catch All né que que ele vai pegar tudo basicamente então aqui eu vou renomear o diretório que ao invés de chamar de product ID eu vou colocar aqui uns três pontos ponto ponto ponto product ID E aí com isso aqui feito a gente agora eu consigo deixa eu salvar tudo isso aqui na verdade ele abriu esse arquivo aqui que não precisa com isso aqui feito eu consigo agora no navegador

acessar o Barra product barra esse ID que eu passei eu consigo continuar passar um barra aí Barra 2 3 barra TR do barra3 sei lá várias Opa várias coisas aqui eu consigo passar vários subdiretórios né além além do primeiro que a gente tava passando antes e ele vai resolver pra mesma rota então lá no código eu tenho ó o o o que eu chamei de product ID que é os parâmetros ao invés de ser um parâmetro só agora são vários ó lá o ID primeiro que eu coloquei 1 2 3 TR né que foi o

que eu digitei ali no nosso no nosso URL então a gente consegue agora com esses três pontos eh criar uma coisa mais dinâmica ainda né mais eh muito mais dinâmica aí suportando várias coisas a gente já tinha né os parâmetros que poderiam nos ajudar mas a gente tem essa opção também de usar esse catch All aí para pegar todas as os tipos de rotas né a partir de product então chegar em product colocar uma barra tudo ali paraa frente que eu digitar no URL vai resolver para essa mesma página e enfim e fazer as implementações

que nos interessa Tá certo então por último aqui paraa organização também que que na verdade esse aqui é somente para organização que é a criação dos grupos de rodas então eu criei esse exemplo aqui de do carrinho pra gente conseguir fazer isso porque o o que que acontece eu vou ter né um carrinho de compras e aqui dentro do carrinho de compras eu tenho algumas coisas relacionadas a pagamento e aí para organizar isso aqui eu posso criar um grupo de rotas Então vou criar aqui um novo diretório E esse grupo de rotas A nomenclatura é

com parênteses então eu vou criar aqui ó parênteses abre e fecha parênteses né payment ou seja vai ser um grupo de rotas relacionados ao pagamento e quando a gente cria esse diretório ele não vai interferir na rota a gente vai conseguir continuar acessando essas rotas Normalmente eles só tem a utilidade de organizar Aqui a a nosso o nosso código durante o desenvolvimento então aqui em payment eu vou mover para cá por exemplo adicionar carrinho informações de entrega gerar gerar o pix opções de pagamento e esse aguardar confirmação que seria também quando a gente tá aguardando

a confirmação ali do pagamento então eu posso mover isso aqui tudo para payment E com isso aqui a gente acaba que tem uma forma né um um um jeito novo de organizar a aplicação ele tá abrindo aqui isso para mim que eu não quero não quero salvar quando a gente move né o arquivo manualmente ele ele altera os arquivos aqui do Build do Next e abre aqui a alteração para mim salvar só que eu não quero com isso aqui feito agora que a gente moveu n esses arquivos para dentro desse diretório agora eu vou conseguir

fazer o seguinte aqui no meu na verdade aqui na aplicação não vai mudar nada eu vou conseguir acessar né o Barra cart barra Card Olha lá Card screen generate pi né generate pix screen então não mudou nada na aplicação só mudou mesmo aqui no desenvolvimento pra gente conseguir organizar melhor e deixar as coisas mais bem separadas Tá certo então para essa aula é isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima