Como Funciona Route handlers?

fala Mestres beleza no vídeo de hoje nós vamos estar falando aqui sobre os rout handlers né que seriam ali umas rotas uns end points de rotas né alguma coisa do tipo a gente vai explorar isso aqui melhor entender como é que funciona e ver na prática né um um uso aí bater um papo aí sobre como a gente usaria isso tá então antes de iniciar o vídeo Eu gostaria que você se inscrevesse no canal desce um joinha aí e acompanha a gente nas redes sociais os links estarão aí na descrição para vocês conseguirem acompanhar aí tudo que vem rolando aí na Mestres Tá certo meu nome é jancer eu sou desenvolvedor aqui né na Mestres e vamos lá para mais um [Música] conteúdo bom então eu já estou aqui no nosso projeto né esse projeto que nós estamos eh desenvolvendo aí nessas nossas aulas de Next e basicamente né resumindo que nós temos aqui é uma rota profile né profile page tsx né um arquivo de página onde a gente simplesmente retorna aqui um HTML o servidor já tá rodando né eu rodei aqui um npm Run e eu já tenho aqui no meu navegador a nossa linda página aí com Hello from profile screen né T local host 3000 bar profile né end Point que o servidor tá rodando e nós simplesmente estamos retornando aí esse H1 tá então se a gente colocar aqui um parágrafo né só pra gente ver aqui tem o Olá Mestres né tudo renderizando tudo funcionando direitinho Então qual que é a ideia por trás dos R handlers né basicamente nós vamos criar uma rota e essa na verdade a rota nós já temos né Qual o que que é a rota nesse caso aqui é a rota profile né então quando eu navego lá localhost 3000 Barra profile eu estou navegando e pra nossa Rota e o que nós Vamos criar é um arquivo chamado rout um diretório não dentro de profile né na verdade não dentro de profile nós vamos criar um novo arquivo chamado [Música] a busca no banco de dados e isso seria executado do lado do servidor e a gente vai conseguir acessar isso aí na nossa aplicação e eh na nossa aplicação web ali na parte do cliente que vai estar rodando aí no navegador de quem Tá acessando o nosso site então o problema que nós temos aqui é que nós não podemos criar uma rota no mesmo nível que nós temos o nosso arquivo de página tá então esse page tsx né né Essa minha rota aqui que eu estou criando eh Se eu tentar executar ela acessar ela nós teremos problemas então um padrão entre aspas aí que nós temos é criar um novo diretório chamado api e dentro de api eu jogo esse meu rout aqui n o rout PTS Então dessa forma aqui eu basicamente estou criando uma rota uma API um endp específico e ele vai ser acessado através aqui do nosso da nossa rota profile tá Então pode ter ficado um pouco confuso mas quando a gente começar quando a gente for acessar isso aqui que as coisas irão se encontrar e vocês irão de fato entender e o contexto como um todo aí tá então com esse arquivo R TS nós iremos criar a nossa função né Então essa função basicamente a gente vai exportar aqui ó uma função assíncrona então ayc function né E essa função normalmente a gente chama ela o nome da função pelo método que nós iremos est executando aí a nossa solicitação e a nossa consulta ou alguma coisa que referente a essa rota Então nesse caso aqui ela vai ser uma rota do tipo get né então eu vou chamar isso aqui essa função de get tá e eu posso declarar aqui no corpo dessa função então quando eu faço isso aqui eu vou fazer o seguinte ó console. log Hello from hum get tá vamos fazer só isso então a nossa função ela dá um console log E aí como que eu chama essa função pra gente ver isso aqui funcionando lá na nossa página né que é a nossa eh a nossa rota de profile eu posso fazer aqui simplesmente um fet né uma busca disparar uma solicitação http E aí o endp que eu irei acessar né através dessa minha instação http é o endp da minha aplicação tá então a nossa aplicação ela tá rodando aqui no local host então http local host 3000 Barra profile né que seria até esse nível que nós temos aqui né dentro do diretório app né barra profile e aqui eu tenho uma mais que seria um barra api tá E aí dessa forma eu irei estar fazendo eh uma busca um fet né eu eu vou estar acessando o end Point e esse end Point ele vai executar do lado do servidor então a gente já pode até ver aqui ó que ele logou para mim o Hello from get ele deu um erro aqui porque essa minha função ela não retorna nada eh porque ela deveria retornar e mas a gente já vai fazer ela aqui para retornar uma resposta e a gente vê o como que isso tudo funcionaria só que a ideia né por trás disso tudo é basicamente a gente conseguir criar end Points e e isso aí seria a criação de uma API meio que um backend eh pra nossa pro nosso pra nossa aplicação web e esses end points Eles serão de fato protegidos aí né el eles eles executam do lado do servidor então aqui eu poderia fazer requisição pro banco eh usar Chaves aqui né a as nossas variáveis de ambiente coisas seguras que a gente deixa só do lado do lado do servidor a gente pode podia fazer isso aqui porque essa função né Essa função get essa esse R handler né isso aí que é os R handlers A gente tá protegido porque a função só vai executar do lado do servidor não vai ser exposta publicamente igual é a nossa aplicação web tá então voltando aqui né resumindo eu tenho a componente profile né a rota profile essa rota profile ela tá fazendo uma solicitação http para um endpoint esse endpoint tá dentro de barra profile barapi que é né o diretório que nós acabamos de criar e dentro do diretório api Nós criamos aí um arquivo chamado routt e nós estamos definindo o função que vai ser executada quando uma solicitação for feita para esse nosso endp tá então a ideia como um todo aí do do H handler é essa E agora nós vamos fazer uma implementação aqui um pouco mais complexa pra gente ver isso aqui tudo funcionando tá então o que que eu vou fazer logo de cara eu vou definir esse profile essa componente como uma componente do que vai ser eh montada né do lado do client então eu vou definir aqui ó um US client Logo no início do arquivo para dizer né que essa componente ela vai ser montada no cliente que é o lado lá do Servidor web porque por padrão todas as componentes elas são server né então elas são montadas do lado do servidor só que tem algumas alguns tipos de componentes que a gente precisa montar elas do lado do cliente que vai ser o caso dessa componente aqui a gente já falou um pouco sobre isso a gente falou bastante na verdade sobre isso tem as aulas aí falando sobre as client site components e server site components que vocês podem estar acessando aí para deixar isso aí mais claro tá então com a nossa componente profile aqui né definida como para ser montada né do lado do cliente eu já vou comear aqui usando o Hook né que é o US effect e aqui dentro desse meu US effect eu só quero que ele Execute uma vez né que dentro dele eu vou fazer a solicitação né que é essa solicitação aqui para nosso endp que pro nosso R handler né Que Nós criamos Então esse F aqui ele vai retornar um dado né que eu posso atribuir e aqui dentro dentro da variável data a gente pode usar Promises aqui né a gente não não precisa criar funções assíncronas aqui então eu daria um data. on den né quando eu faço aqui esse data.

on den eu vou pegar a resposta do Servidor e aqui é aquele mesmo fluxo que nós temos aí com confet né que é o r. Jason né transformando a resposta em Jason e aí depois eu dou outro ponto den que aqui de fato eu vou ter a resposta os dados que eu enviei do Servidor eu vou fazer aqui só um console. log dessa resposta tá pra gente ver o que que tem aqui dentro eh e aí com isso aqui definido na verdade não vai funcionar porque a nossa rota a gente não implementou nada né ela não retorna nenhum dado eu só faço consol log então para retornar um dado aqui eu tenho aqui um url que é um URL público da API doit Hub pra gente pegar as informações do perfil então o que que eu vou fazer aqui eu vou pegar aqui ó vou atribuir eh na variável R ou melhor data né Eh eu vou fazer aqui um fet nessa URL github.

com né eu vou pegar informações do usuário que é o meu usuário então eu vou pegar aqui os dados do meu perfil do github como essa função que já é assíncrona né eu posso dar um await aqui para pegar os meus dados né Na verdade eu vou chamar isso aqui de response ou só res né porque a gente vai ter um response ali embaixo Aqui eu vou ter os meus dados né que vai ser o r. Jason transformando a resposta do github em Jason né aqui eu vou ter que aguardar isso aqui também porque é assíncrono e nessa data né aqui nesses dados que eu tenho que seria de fato aí um objeto que representa o meu perfil no no github eu vou retornar para quem chamou essa rota né então quem chamou essa rota vai receber um objeto do tipo response tá esse response ele é um api eh do browser né que a gente vai ter basicamente aí um um A gente vai est indicando né que eu estarei retornando tem até a referência aqui do mdn né se a gente quiser dar uma olhada ele vai abrir isso aqui para mim falando mais sobre esse objeto né O response que basicamente a gente usa ele para isso né quando a gente tem uma resposta de um api Então essa api aqui vai responder o data né que seria os dados aí do github então quando eu salvo isso e a gente executa o nosso código executa na verdade eu acho que ele já executou vamos olhar aqui no Browser ele tá tá indicando um erro aqui deixa eu inspecionar isso aqui e olhar o console ele isso aqui já funcionou né Eu atualizei a página aqui ele recarregou ele fez a nossa solicitação e nós temos aqui né um objeto de de que é o objeto que a api do github respondeu pra gente vamos voltar aqui só pra gente recapitular o que foi feito e eu tenho aqui né na nossa no nosso R handler tô fazendo a busca transformando em Jason e retornando a resposta e aqui na nossa componente a componente que tá sendo montada no cliente né no Browser ela pega os dados né faz a busca na verdade pega a resposta converte em Jason novamente e faz aí simplesmente faz um conso log e a prova que isso aqui tá acontecendo do lado do cliente é que o log que nós temos né foi feito aqui no Browser né antes o log estava aparecendo aqui no vs code né no servidor agora não agora o log tá sendo feito aqui no no cliente né no no no cliente web Então essas só esclarecendo aqui essas conversões para Jason e se a gente for pensar aí de fato no que que tá acontecendo essa função Ela tá no servidor tá então o servidor tá respondendo com Jason eu recebo essa resposta e converto novamente em json né porque PR para fazer a a a comunicação né entre servidor cliente ele envia o Jason e a quando eu executo essa função né o r.