Serverless com ReactJS e Next.js na Vercel | Code/Drops #54
Рет қаралды 49,744
3 жыл бұрынQuando criamos aplicações front-end com React ou Next.js precisamos em alguns momentos salvar informações no banco de dados ou realizar operações que só funcionam quando atreladas a um back-end.
Nesses casos temos duas opções, criar um back-end do zero e conectar com nosso front-end, ou utilizar de funções serverless para realizar operações mais simples como envios de e-mails ou operações básicas no banco.
Nesse vídeo vamos ver como utilizar as Serverless Functions da Vercel para salvar dados de um usuário no MongoDB utilizando ReactJS e Next.js.
Ponto de partida: github.com/roc...
Código do return: gist.github.co...
Código final: github.com/roc...
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma:
www.rocketseat...
Acompanhe a Rocketseat nas redes sociais:
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
@limaand2009 3 жыл бұрын
Como sugestão: depois faz um vídeo com formulário de login no nextjs, com backend em nodejs
@andresamaral5200 3 жыл бұрын
Rapaz essa Rocketseat é foda mesmo. Todo dia uma coisa nova que abre um mundo de oportunidades, eu fico até sem saber o que fazer com tantas opções.
@rocketseat 3 жыл бұрын
Valeeeu Andres! Vocês que lutem com tanto conteúdo hahaha. Mas brincadeiras à parte, cuida para focar no que te for mais útil no momento! 💜💜
@MineradorExilado Жыл бұрын
Diego é fera demais mano!!!
@gbshadow666 3 жыл бұрын
Nossa parece que vcs tem uma bola de cristal, estava procurando conteúdo sobre serverless para poder fazer um teste prático de uma entrevista, e vcs hj me aparecem com o vídeo com tudo que eu precisava pra aprender, muito bom, vcs são demais
@rocketseat 3 жыл бұрын
Hahahaha quem sabe a gente não tem mesmo uma 🔮😎
@Xd4LEM4ObX 3 жыл бұрын
To procurando ultimamente muito conteudo tbm de React, SSR, e Serverless, Procurando uma vaga pra iniciar na area.. A rocketseat ta me ajudando bastante
@deiseagnys9638 3 жыл бұрын
Gratidão pela ajuda!!!! Meu grupo de PI e eu, estamos desenvolvendo um site, e estamos procurando a melhor maneira de jogar na web. Sua ajuda foi maravilhosa!!! Gratiluz 💖
@gubmx20 3 жыл бұрын
Vercel revolucionando totalmente o desenvolvimento front-end com o Next.js. Top!
@rocketseat 3 жыл бұрын
Demaais!! 🚀🚀
@seducedbywine 3 жыл бұрын
Vercel como sempre revolucionando! Diego, se possivel traga mais vídeos sobre o mesmo Abraços!
@rocketseat 3 жыл бұрын
Verdade! hahaha. Valeeu Robson, traremos sim!! 💜💜🚀
@maykbrito 3 жыл бұрын
3:36 ⏸👁
@rocketseat 3 жыл бұрын
Hahaha 👀
@matheusfernandes9517 3 жыл бұрын
Eu fiquei fascinado com este conteúdo!
@jeffersonsilva6954 3 жыл бұрын
Infelizmente o KZfaq ão tem a funcionalidade de curtir 1000X, muuuuuiiitoo bom. Mais uma vez a Rocketseate trazendo conteúdos importantes de forma pratica e direta sem enrolação.
@rocketseat 3 жыл бұрын
Hahaha Valeeeeeeeeu Jefferson! 💜💜😍
@evertonpereiramartins8352 3 жыл бұрын
Muito bom. Parabéns! Realmente muito prático, sem burocracias de publicação etc :D
@rocketseat 3 жыл бұрын
Siiim! Valeeu pelo feedback, Everton! 💜💜
@ricardoerib 2 жыл бұрын
Excelente!!!
@am-castro 3 жыл бұрын
Q massa mano, bem mão na massa mesmo. Obrigado!
@douglasoliveira2119 3 жыл бұрын
Falaaa Diego. Cara, reparei que vc tem alternado entre alguns browsers (Chrome, Edge e mais recentemente o Vivaldi). Poderia comentar um pouco sobre a experiência que teve e o que te fez mudar de um para o outro? Grande abraço!
@rocketseat 3 жыл бұрын
Faala, Douglas! Valeu pela pergunta!! #PR 💜
@viniciusrangel544 3 жыл бұрын
melhor conteudo da internet
@rocketseat 3 жыл бұрын
Valeeeeeu Vini!! 💜💜
@carlosricardoziegler2650 3 жыл бұрын
Muito top, estou em um projetinho com vercel e ajudou muito isso.
@rocketseat 3 жыл бұрын
Que show Carlos! Vercel tá demais mesmo! 💜
@ilannildoviana 3 жыл бұрын
Adoro os CodeDrops
@rocketseat 3 жыл бұрын
Valeeeeu Ilannildo!! 💜💜
@joaogarcez10 3 жыл бұрын
Conteúdo muito bom. Continue a trazer mais conteúdo nextjs, integrar com o github etc
@rocketseat 3 жыл бұрын
Faala, João! Traremos sim!! 💜💜
@matheuseufrasio8488 3 жыл бұрын
Galera, gostaria de saber se é possível criar uma serveless function que envia um email pro dono do site avisando que alguém preencheu o "Fale conosco" e hospedar isso grátis na vercel
@leonardodini2173 3 жыл бұрын
o conteudo de voces eh sensacional dms
@rocketseat 3 жыл бұрын
Valeeeeeu Leo! 💜💜
@JoaoAlbus 3 жыл бұрын
Metralhadora de conhecimento rs to me sentindo baleado rs gostei! rs
@rocketseat 3 жыл бұрын
Hahahaha 😄 boraa! 🚀
@gabrielbraga5122 3 жыл бұрын
Sensacional. Nunca tinha ouvido falar dessas serverless functions. Obrigado pela aula e pelo material. Gostaria de saber se consigo usar isso em hospedagens estáticas, como a do GitHub, por exemplo. Não sei se ter request/response já classifica a página como dinâmica, mesmo que sem um backend configurado. Parabéns pelo trabalho, vocês são 👌.
@eddyrusso8820 2 жыл бұрын
Uma dúvida... agora não é mais NowRequest e NowResponse? E sim VercelRequest e VercelResponse?
@paulorcvieira 3 жыл бұрын
Massa Diegão, mas seria mais legal ainda se desse continuidade nesse projeto. valeu!
@rocketseat 3 жыл бұрын
Boaa! Valeeu pela sugestão, Paulo! 💜💜
@gabrielcaussi9050 3 жыл бұрын
Fala Diego, o que acha de um vídeo instalando uma distribuição linux e configurando? Achei muito massa a sua personalização.
@rocketseat 3 жыл бұрын
Faala Gabriel! Valeeu pela sugestão! Você pode ver também no canal do Guilherme Rodz da nossa equipe, ele fez um vídeo mostrando a personalização dele e é bem semelhante também! 💜
@edilsonpacheco847 3 жыл бұрын
Fala Diegão, que conteúdo foda, como sempre ✨. Eu to pretendendo desenvolver um blog com o SSG do Nextjs. Tem como integrar o Graphql nessas funções? Ou é mais recomendável usar HTTP de forma crássica? Um abraço e sucesso pra vcs da Rocket!
@edsontesser 3 жыл бұрын
Muito bom, obrigado pelo conhecimento!!
@rocketseat 3 жыл бұрын
Faaala, Edinho! Valeu demais! 🚀 💜
@MaisUmSomente 3 жыл бұрын
Insano
@rocketseat 3 жыл бұрын
Curtiu, Allan!? 💜
@pedrofrochtengarten2156 3 жыл бұрын
muito top o conteúdo
@rocketseat 3 жыл бұрын
Valeeeu Pedro!! 💜💜
@pedrofrochtengarten2156 3 жыл бұрын
@@rocketseat eu tenho 12 anos e programo des dos 11 anos. e acompanho vcs faz tempo
@guilhermesantos6367 3 жыл бұрын
Eu estava olhando o site da Rocketseat e percebi que vocês usam uma especie de transição quando o usuário aperta o botão de "esqueci a senha" . Vocês poderiam fazer um tutorial de como fazer isso, eu pesquisei na internet mas n achei algo que me agradou tanto como o do site de vocês, e se por um acaso já ensinaram, por favor me enviem o link, desde já agradeço.
@rocketseat 3 жыл бұрын
Faala, Guilherme! Valeeu pela sugestão! 💜💜
@jussinei 3 жыл бұрын
Fala Diego. Super aula, muito top. Se eu usar React-Native ao invés de ReactJs, funcionaria na Vercel ?
@andersonmelo1735 3 жыл бұрын
Faala Diego. Com esse recurso de serveless functions eu consigo, por exemplo, listar esses dados inseridos no mongodb e mostrar na interface?
@rafaeldias1343 3 жыл бұрын
Fala Anderson, beleza? Você descobriu se é possível? Estou com a mesma dúvida heheh
@andersonmelo1735 3 жыл бұрын
@@rafaeldias1343 opa, ainda não 😕
@rafaeldias1343 3 жыл бұрын
@@andersonmelo1735 é possível sim mano, acabei de descobrir lkkk
@claudomiromonteiro52 2 жыл бұрын
Muito top este video, teria algo parecido com envio de anexo, input type="file"?
@salvimateus 3 жыл бұрын
Caraca, top demais! Só não ficou claro o que acontece se o usuário acessar /api/subscribe. Ele conseguiria ver essa rota? Ou a Vercel reconhece essa rota e oculta ela. E tem algum custo a Vercel executar essa função serverless?
@davisuga 3 жыл бұрын
Não exatamente assim, a Vercel mapeia essa rota pra /subscribe por exemplo.
@salvimateus 3 жыл бұрын
@@davisuga não entendi 😬😬
@gfrsolutions8042 3 жыл бұрын
A questão é se dá para ver o código no browser como qq outro arquivo js ou se isso fica só do lado do servidor msm
@salvimateus 3 жыл бұрын
@@gfrsolutions8042 exatamente! faltou explicar isso no vídeo!
@gabuzin 3 жыл бұрын
Infelizmente a rota fica exposta para acesso, se um usuário qualquer bater em api/subscribe, ele conseguirá executar a function, mas o código em si está do lado do servidor, consequentemente não está exposto. Então o ideal é, fazer as tratativas de segurança nas próprias functions.
@ShugiroKiFuja 3 жыл бұрын
let cacheDb... 22:15 tem como fazer de um jeito que gere o mesmo resultado fazendo em Javascript? e não em Typescript
@lucasmaiarios9081 3 жыл бұрын
Só não utilizar as tipagens.
@toskito123 2 жыл бұрын
Pq a fonte n funfa quando lanço o deploy na vercel?
@diegoi7 2 жыл бұрын
Alguém sabe qual é o tema do ZSH do Diego?
@rafael_tg 3 жыл бұрын
cada rota fica obrigatoriamente em um arquivo separado dentro da pasta api ?
@myguelangello8563 3 жыл бұрын
Manoo que conteúdo bom. Só uma dúvida: como eu faria para verificar se o email já existia no meu banco
@RoSanttos 3 жыл бұрын
Como faz para trazer os dados no response?
@osama04 3 жыл бұрын
Boaaa, tava justamente estudando next
@rocketseat 3 жыл бұрын
Boaa Alex! Só vai!! 🚀🚀
@sidneiklein 3 жыл бұрын
Ótima abordagem, como ficaria a questão de uma página de "Contato" que faria um envio de e-mail?
@MarcoSync 3 жыл бұрын
Só criar a function que envia o email
@kenedyribeiro1390 3 жыл бұрын
Mano, que música lovetimes na introdução kkkk
@rocketseat 3 жыл бұрын
Hahaha 💜
@arntxy 3 жыл бұрын
Consigo executar fora da vercel? Usando next start?
@alitonoliveira1700 3 жыл бұрын
Isso me lembra cloud functions da firebase. Tem alguma semelhança?
@styllth 3 жыл бұрын
Muito show essa ideia com next. Mas daria pra usar com postgrees sql?
@zevdvlpr 3 жыл бұрын
Muito top 👍
@rocketseat 3 жыл бұрын
Faala, Zev! Valeeeu 💜💜
@joaobatista-rn6le 3 жыл бұрын
Alguem sabe se funciona em servidor php?
@felipemarinho1326 3 жыл бұрын
Irado
@rocketseat 3 жыл бұрын
Valeeeu Felipe! 💜
@AndersonFaro9 3 жыл бұрын
Olá galera da Rocket... obrigado por esse vídeo... tenho uma pergunta: como seria para um cliente( freelancer) que precisa receber esses emails e anotar, no vídeo os emails são gravados pelo mongo no site deles, mas o cliente não saberia usar o site do mongo...
@code_way2 3 жыл бұрын
O cliente não precisa ter acesso ao banco, você pode salvar os dados no banco e consumir em outra interface que só o cliente possa acessar
@pedrofrochtengarten2156 3 жыл бұрын
finalmente o next, né. Tava demorando
@rocketseat 3 жыл бұрын
Hahaha 😄😄
@renansouza351 3 жыл бұрын
Finalmente o Next! 🔥
@rocketseat 3 жыл бұрын
Chegoooou. E em breve teremos ainda mais conteúdos dele! 💜💜
@LeandroLima-ew7tl 3 жыл бұрын
Top! Qual o nome da música da introdução? hahaha
@eucomcerteza 3 жыл бұрын
Top!
@rocketseat 3 жыл бұрын
Valeeeu Junior!! 💜💜
@edu-correia 3 жыл бұрын
Gente eu sou meio novato e tals e queria saber se é possível usar esse mesmo cluster do mongo em aplicações em produção Obs: Seria mais para aprender a pôr o servidor online
@rocketseat 3 жыл бұрын
Faala, Eduardo! O Diego chega a comentar no vídeo mesmo, que pode ser usado, mas vale lembrar que ele tem um certo limite, então depende muito do que vai usar nele! 💜
@ebr182 3 жыл бұрын
diego, essa extensão de chrome que vc usa p/ visualizar json, tem um tema dracula tb, basta clicar no ícone de engrenagem quase fiquei cego aqui xp
@rocketseat 3 жыл бұрын
Faala, Eber! Verdade, o pior é que ele usa haha. Provavelmente esqueceu de ativar ao mudar de computador! 😅😅
@jillesmc 3 жыл бұрын
Excelente vídeo Diego! Acho que em relação as variáveis de ambiente na vercel, pode-se dizer também que existe a possibilidade de fazer um vercel env pull Dessa forma você consegue manter os ambientes de dev sincronizados entre os desenvolvedores. Além disso, caso você queira manter alguma chave secreta não é recomendado fazer isso em arquivos que serão versionados e em tempo de desenvolvimento você pode colocar essas informações no arquivo .env.local que não será vercionado mas que que o next carrega automaticamente. Por último, tudo que você coloca no .env e versiona é compartilhado entre todos os ambientes. Se for algo para um ambiente apenas você deve usar o .env.development ou .env.production Sobre o uso do chakra-ui, eu recomendo que veja o que os cara do stitches.dev/ conseguiram fazer. Na minha opinião eles conseguiram resolver todos os pontos falhos do theme-ui e do chakra-ui. ;)
@rocketseat 3 жыл бұрын
Faala, Jiles! Valeeu pelas dicas!! 💜💜
3 жыл бұрын
Fudido como sempre! só conteudo monstro!
@rocketseat 3 жыл бұрын
Hahaha Valeeu César! 😄💜
@apholo8308 3 жыл бұрын
Rocketseat, faça um vídeo sobre o Blitz.js, o Diego até falou sobre já em alguns vídeos, tem uma pegada bem legal de ser um projeto React Fullstack, e usa o Prisma pra parte de Database, seria um conhecimento bem legal
@rocketseat 3 жыл бұрын
Faala, Apholo! Valeeu pela sugestão! 💜💜
@GigaOI 3 жыл бұрын
QUal navegador o diego usa?
@rocketseat 3 жыл бұрын
O Vivaldi! 💜
@MrMatheus195 3 жыл бұрын
Quando utilizar um servidor api convencional ao invés das serverless functions?
@augustomarcelo 3 жыл бұрын
Se você precisar de uma integração como ele exemplificou, coisa simples, só salvar um dado em um banco, as serverless functions são mais indicadas. Em uma api convencional, você teria que criar todo o backend e ainda procurar uma hospedagem.
@rocketseat 3 жыл бұрын
Faala, Matheus! O Marcelo resumiu bem a diferença, como o Diego chegou a comentar no início do vídeo também. É sempre indicado para funções simples. 💜💜
@guinmonte 3 жыл бұрын
Conteúdo sempre top! Por favor façam um code drops sobre offline first com watermelondb no rn e react web. Tá complicado até de achar conteúdo gringo sobre isso :(
@rocketseat 3 жыл бұрын
Faala, Gui! Valeeu pela sugestão! 💜💜
@patriciomartins 3 жыл бұрын
top demais, passou tão rápido que eu nem vi kkkkkk
@rocketseat 3 жыл бұрын
Valeeeeeu Patrício!!! 💜
@kaluabentes7926 3 жыл бұрын
Qual é a distro linux que voce está usando?
@vini6 3 жыл бұрын
Acredito q seja KDE mas quero saber dele também
@kaluabentes7926 3 жыл бұрын
@@vini6 o setup ta bem clean, curti
@PinheiroPaulo 3 жыл бұрын
Muito provável que seja o Kubuntu. Ele mostrou em uma live um tempo atras, é o Ubuntu com o KDE.
@kaluabentes7926 3 жыл бұрын
@@PinheiroPaulo Topper
@rocketseat 3 жыл бұрын
Faala, Kaluã!! É o Ubuntu com KDE mesmo como a galera comentou! 💜
@voguh__ 3 жыл бұрын
Gostei disso mas infelizmente pra mim não adiantou... criei um projeto que usa a api da cptm (sistema de tens de sp) pra pegar o estado das linhas (metro, cptm, via quatro e mobilidade) porem a desgraça da api usa http e nao https dai por algum motivo com o heroku funciona dai fui obrigado a afazer uma api que faz um request pra url da cptm pra depois eu fazer o request via https na url da heroku, alias se alguem souber como resolver agradeço. segue aqui o github do backend (com funçoes ainda nao implementadas no front como listagem das estacoes) e o front sigmagf/sptrains sigmagf/sptrains-api (sim eu sei que ta tudo bem cagado, mas to ainda estudando e o backend pretendo mudar pra um solid, mas primeiro tenho que achar um jeito que eu goste de estruturar os arquivos do solid, ignorem os nomes dos comits, na pratica nao to me importando muito com os nomes, apenas estou fazendo deploy mesmo)
@jordaorodrigues8548 3 жыл бұрын
Ensina a configurar o terminal igual o seu Diego !
@rocketseat 3 жыл бұрын
Faala, Jordão! Temos um post no blog dando todos os detalhes da config. Segue o link: blog.rocketseat.com.br/terminal-com-oh-my-zsh-spaceship-dracula-e-mais/
@andrecoelho2775 3 жыл бұрын
🚀🚀🚀
@rocketseat 3 жыл бұрын
💜🚀🚀
@periclesigor911 3 жыл бұрын
Qual o nome desse navegador que o Diego está usando?
@farbauth 3 жыл бұрын
Vivaldi, em vivaldi.com/pt-br/
@robsong6689 3 жыл бұрын
Vivaldi. Ele tá usando até sair o edge pro linux.
@periclesigor911 3 жыл бұрын
@@robsong6689 vlw.
@rocketseat 3 жыл бұрын
💜💜
@brunomello7499 3 жыл бұрын
duração do video ta igual a porta que o diego sempre usa no backend
@rocketseat 3 жыл бұрын
Hahahah é verdade! Boa Bruno!! 😄😄
@ig1062 3 жыл бұрын
Qual sistema operacional que o Diego está usando?
@ibernohoffmann5427 3 жыл бұрын
Kubuntu 20.04
@rocketseat 3 жыл бұрын
Fala, Igor! Ele está usando o Ubuntu com KDE Plasma ! 💜
@tarciziobarbosa9532 3 жыл бұрын
Qual o navegador do Diego?
@farbauth 3 жыл бұрын
Vivaldi, em vivaldi.com/pt-br/
@robsong6689 3 жыл бұрын
Vivaldi. Ele tá usando até sair o edge pro linux.
@tarciziobarbosa9532 3 жыл бұрын
@@robsong6689 Ah sim. Comecei a usar o Edge por causa dele kkk. Pensei que iria ter que trocar de novo.
@rocketseat 3 жыл бұрын
Boa Robson! Isso mesmo 😄
@pedromartinsfalleiros7721 3 жыл бұрын
Parei o que eu estava fazendo pra fazer isso, não creio que saiu esse vídeo estava escutando um podcast sobre Next.js ainda hoje. . .
@rocketseat 3 жыл бұрын
Hahaha 🔮😄
@ruszomalkuko 3 жыл бұрын
Cara, eu acho muito bonito isso mesmo... Mas não consigo programar nada Desde a Semana OmniStack do começo do ano percebi que não nasci para isso
@rocketseat 3 жыл бұрын
Faala, dev! Foi alguma dificuldade técnica? Se estiver começando há pouco tempo, talvez a semana Omnistack tenha sido um pouco avançada demais, pois lá não tínhamos ainda trilhas diferentes para quem estava mais avançado ou iniciando. Agora nós temos a NLW no lugar da antiga Semana Omnistack, e nela temos trilhas de diferentes níveis para cada pessoa com base no conhecimento prévio que ela possa ter. Dá mais uma chance para a nossa área! E pode sempre contar com o nosso time para te dar suporte lá no evento também! Fica de olho nas nossas redes que logo anunciaremos mais detalhes da próxima edição!! 💜💜💜
@caiofdacosta 3 жыл бұрын
E aí cara! Ainda está desanimado com a área? Se quiser bater um papo ou precisar de uma ajuda pra começar, tô aqui. Eu acredito que programação é pra todo mundo que tem vontade de programar, então se essa área te interessa, não deixe de acreditar em si. Eu mesmo cometi esse erro no passado e me arrependo muito. Agora, se perceber que realmente não está tão a fim dessa área, tudo bem também. Vá pra onde seu coração mandar. Mas se ele mandar pra área de programação, estamos aqui pra ti! Caso queira conversar, posso te passar meu wpp ou LinkedIn pra trocarmos uma ideia. Forte abraço!!!
@gbbigardi 3 жыл бұрын
Qual browser é esse que está utilizando?
3 жыл бұрын
Vivaldi
@rocketseat 3 жыл бұрын
Faala, Gustavo!! É o Vivaldi! 💜
QAZSPORT TV / ҚАЗСПОРТ TV
Рет қаралды 708 М.
QAZSPORT TV / ҚАЗСПОРТ TV
Рет қаралды 708 М.