Interceptadores de Rotas no Next.js | Tutorial Completo

fala Mestres beleza no vídeo de hoje nós vamos estar falando aqui sobre a interceptação de rotas a gente vai entender o que que é né e Qual o benefício que nós temos implementando isso eu tô aqui com um projeto que o próprio nextt usa de exemplo Então a gente vai explorar esse projeto com algumas implementações a mais pra gente ver essas rotas interceptadas em [Música] funcionamento bom então nós temos aqui o nosso projeto né esse projeto em execução aqui é o exemplo que o Next dá pra gente então tem uma modificação aqui que é esse

botão que foi uma implementação que eu fiz em cima desse projeto e a gente vai dar uma olhada e nisso tudo nessa aula tá então eu tô aqui com a documentação do Next Onde fala sobre interceptação de rotas né então aqui em routing né em navegação roteamento né Nós temos aqui o tópico sobre interceptando interceptação de rotas né então tem aqui a o falando sobre né O que que é fala da convenção que a gente tem que seguir né que é meio que a regra que nós temos que seguir para implementar isso aqui e nós

temos também e aqui os exemplos né que é o que nós vamos olhar direto no código então no nosso projeto né que tá aqui que já está rodando né o eu eu as as rotas que eu criei a mais é esse feed e foto né a gente vai olhar eles depois vamos olhar aqui primeiro a estrutura que o Next já tem que seria né Essa home seria uma tela inicial e nessa tela inicial nós renderizamos várias fotos né fazemos aqui um mapeamento de um arrei de fotos que é esse arrei aqui então eu renderizo né

Essas fotos e todas elas estão dentro de um link né então quando eu clico nessa foto eu vou ser navegado para uma rota dinâmica essa rota dinâmica é é a rota de fotos né que recebe aí dinamicamente um ID então aqui dentro Nós temos duas rotas né fotos né dois diretórios né fotos ID né que é de fato a rota dinâmica que a gente vai receber com o parâmetro um id e renderizar exibir essa foto em tela e nós temos também outra rota fotos né Eh dinâmica também que vai renderizar a foto dentro de um

modal Então essa foto que que tá sendo renderizada dentro do modal ela está dentro de uma rota paralela né as rotas paralelas que nós vimos se eu não me engano na aula anterior então nós temos uma rota paralela que é o modal e esse modal ele vai ser renderizado de forma condicional né então por mais que ele é uma rota paralela e o que nós vimos na aula passada a gente simplesmente exibe essa rota paralela aqui nessa implementação do Next esse modal ele não aparece sempre e e a gente fez o tem aqui implementado um

esqueminha para renderizar esse modal condicionalmente e a gente vai ver que como que isso é feito mas o fato é que vamos voltar aqui ó no nosso projeto que quando eu clico em uma foto essa foto Ela é ela aparece dentro do modal tá então aqui no código fonte nós podemos ver né quando eu clico que foi o que a gente fez agora cliquei na imagem eu naveguei paraas fotos e ele renderizo para mim essa rota né Essa rota que está dentro do da Rota em paralelo aqui modal então a gente viu que essa componente

foi renderizada e não essa outra rota aqui né de fotos que exibe essa foto aqui dentro que exibe a que basicamente nós temos né a rota da foto com modal e a rota da foto sem o modal ele renderizo para mim a rota da foto com o modal e isso foi interceptado né aqui já foi o funcionamento da interceptação da Rota e essa interceptação ela acontece quando eu navego né Eu realizei aqui a navegação por dentro da aplicação ou seja eu usei aqui o link para navegar e a rota que eu quero interceptar ela tem

que estar anotada né o nome ali do diretório que descreve a rota tem que ter aqui os parênteses e o ponto né os os parênteses com o único ponto significa que a rota que eu estou navegando que eu estou interceptando ela está no mesmo nível que ela está no mesmo nível né então vamos voltar aqui paraa documentação pra gente ver esse exemplo ter um um visual melhor que é isso aqui ó nós temos aqui dois diretórios né o diretório de feed e o diretório de foto e dentro do diretório de feed eu tenho aqui a

rota que vai ser interceptada ou seja o ponto ponto né E por que que aqui tá com dois pontos porque a rota original ela está o nível acima seria e foto né então eu tenho o nível aqui feed foto dentro de feed eu tenho uma rota que vai fazer aí a gente vai interceptar então eu coloquei os dois pontos no outro exemplo que é o que só tem um ponto que é aqui ó ele é não vai ter aqui um exemplo é a gente só tem lá na aplicação mas o caso de um um único

ponto é quando eles estão no mesmo nível a o a as duas rotas ali Elas estão no mesmo nível então voltando aqui no nosso projeto fotos né Essa rota que está sendo interceptada aqui por mais que ela está dentro da Rota paralela aqui do Aral esse arrob modal ele não é de fato uma rota né Ele é um segmento Então como ele não é considerado como uma rota a gente a gente imagina a gente diz aqui que fotos está no mesmo o nível desse outro diretório fotos aqui externo diferente do outro da outra implementação que

eu fiz que ela está um nível interno né que a gente vai ver isso aqui mais na frente mas o que eu quero que fique bem claro é isso aqui por mais que eu estou usando os parênteses e um ponto aqui nessa nossa rota de fotos eh e ela está dentro do @al como Aral é uma rota paralela ele não vai considerar isso aqui como uma rota diferente pra gente e aí a gente não precisa de usar os dois pontos fotos nesse caso aqui da Rota em paralelo Tá mas o que o que aconteceu aqui

foi eh o fluxo que nós fizemos né foi basicamente eu naveguei para uma rota e ao invés de eu Navegar pra rota que eu tenho declarada aqui né que seria fotos essa rota sem o modal houve a interceptação e ele me trouxe a rota com o modal E por que que houve essa interceptação porque foi uma navegação realizada internamente pela aplicação foi quando eu cliquei na imagem e eu naveguei se eu acesso esse link diretamente Então vamos voltar aqui no nosso projeto eu cliquei na imagem né ó cliquei na imagem tem ali o URL Ó

Barra fotos bar1 se eu acesso esse link diretamente ele vai trazer a outra rota que é a rota sem o modal então o benefício de tá usando né de tá fazendo essa interceptação é que aqui ele tem até listado aqui pra gente né dos benefícios que é um um dos maiores benefícios é esse é que a gente vai conseguir eh transformar o conteúdo do modal compartilhável né aqui ó make the modal content shareable to URL então a gente consegue compartilhar um RL que em alguns casos ele vai ser renderizado ali como modal que seria nesse

caso normal aí que o usuário ele tá usando a aplicação Tá clicando nos botões e realizando a navegação internamente a gente consegue pegar esse URL e transformar ele em algo compartilhável e tem aqui os outros benefícios né que a gente preserva o contexto quando a página é recarregada Então nesse caso aqui que eu estou com o modal né eu cliquei na imagem e renderizei a rota com o modal se eu recarrego ela Ele vai abrir para mim a roda sem o modal só que o contexto né o conteúdo aqui vai ser preservado vai ser o

mesmo contexto de de anteriormente eu consigo fechar o modal e reabrir ele usando aqui a navegação então se eu tenho aqui o modal se eu volto se eu clico em voltar ele fecha o modal né E se eu clico para frente também para navegar eh para para o desfazer né Eh ele vai trazer para mim o vai reabrir o modal então todos esses benefícios a gente consegue quando a a implementação é feita aqui dessas rotas dessas rotas interceptadas né então o que eu vou explicar aqui agora é Como de fato isso que tá sendo feito

principalmente o porquê que essa rota em par né a rota paralela do modal ela não está sendo exibida sempre né que foi o que nós vimos na aula anterior então aqui na estrutura no layout o layout aqui da raiz do nosso desse desse projeto ele renderiza né o modal sempre ou seja a essa rota em paralelo do modal ela está sempre sendo exibida só que o segredo tá aqui nesse arquivo Def né que esse arquivo def ele é basicamente uma rota o nome já diz é padrão que ele é uma rota padrão caso a rota

original não seja encontrada ou seja o que que seria a rota original seria e se aqui dentro eu tivesse um arquivo de um arquivo e page né um page tsx aqui que iria mostrar para mim uma componente a componente referente ao modal como eu não tenho esse defo aqui essa rota default ele vai simplesmente retornar nulo ou seja não vou retornar componente nenhuma então por padrão eu sempre exibo o modal né aqui no meu layout que é a rota em paralela só que em conjunto né Eu não eu não exibo nada porque o modal por

padrão ele é nulo e ele só vai só vai exibir alguma coisa só vai renderizar algo quando a gente fazer essa navegação internamente e fazer essa interceptação das nossas das nossas rotas Então essa rota paralela né ela foi usada aqui pra gente conseguir fazer esse condicional de de exibir o modal ou não de uma forma diferente né usando aqui a própria estrutura de rotas do nexo ao invés de ter que implementar uma lógica lá no JavaScript para renderizar exibir esse modal de forma condicional então e aí o benefício é que como a gente fez isso

tudo usando rotas o modal em si ele se torna uma rota compartilhável que a gente consegue quando a gente compartilha essa rota do modal ele vai se transformar depois nessa rota original que seria aqui o fotos que é o que nós vimos lá no nosso Exemplo né que é esse comportamento aqui que eu pegar o link que tá exibindo o modal colar no no navegador e ele vai recarregar uma rota diferente tá então a gente pode estruturar a Nossa aplicação em cima desse comportamento para que a nossa aplicação ela se comporte né Eh dependendo aí

do link que for aberto dependendo da página que for aberta ela consegue se conversar né e uma consegue ir pra outra e vice-versa né as coisas se comunicam Então nesse exemplo aqui das fotos eu poderia voltar pro feed né Tem um botão aqui que volta pro feed que seria esse feed aqui original que é onde a gente exibe eh onde a gente exibe aqui a imagens Tá mas o e o outro exemplo que eu fiz que eu implementei é um exemplo aqui das rotas eh interceptadas Só que nesse caso aqui eu não tenho a rota

esse condicional né de exibir ou não o modal então o que que eu tenho aqui eu tenho o feed né que seria aqui um uma um feed que basicamente aqui a gente não tá se preocupando muito com o visual das coisas né então eu tenho uma rota que vai exibir um feed que vai ser o seria ali o feed de fotos enfim vai ser essa rota base e do feed eu consigo navegar para ver uma foto só que essa foto que eu vejo ela vai ser interceptada ou seja aqui eu já tenho né os dois

pontos o diretório com os dois pontos foto que vai ser interceptada e vai renderizar aqui para mim esse foro interceptor de rout com o ID da Rota Então a gente vai ter o comportamento parecido com o que a gente tinha antes o que vai mudar é que a gente não tem esse condicional mais de Ah eu exibo o modal aqui e e eu não exigo o modal né quando eu clico para aparecer alguma coisa ele ele vai exibir o modal né vai fazer essa interceptação da Rota então o exemplo aqui na implementação Eu tenho esse

botão que vai pro feed né o nosso feed é basicamente esse texto né o o enfim que teria a implementação de toda a página mas eu tenho aqui o botão que navega pra foto e quando eu clico eu tenho aqui a rota interceptada né o ID da foto é o id1 então ele fora o intercept r e o ID route se eu copiar esse link e abrir aqui em outra rota nós temos aqui o foto route né seria a rota sem a interceptação então voltando aqui no nosso código seria essa rota aqui ó foto ID

né que basicamente vai retornar pra gente Esse H1 aqui com o photo route né sem a interceptação então o exemplo é simples né aqui a gente pode implementar diversas coisas enfim a possibilidade é infinitas aí da do que que a gente pode implementar o que eu quero mostrar para vocês é o principal que seria essa estrutura dos diretórios e o funcionamento aqui da interceptação quando a gente Pressiona e faz a navegação interna né E quando a gente clica envia o link abre o link diretamente pelo navegador Tá certo então para essa aula aqui é isso

tá eu espero aí que eu tenha ajudado qualquer dúvida pode est deixando um comentário logo abaixo É isso aí muito obrigado e até a [Música] próxima Y