Serverless com ReactJS e Next.js na Vercel | Code/Drops #54

Подписаться 369 тыс.

Просмотров 50 тыс.

50% 1

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

Опубликовано:

7 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 159

@limaand2009 3 года назад

Como sugestão: depois faz um vídeo com formulário de login no nextjs, com backend em nodejs

@andresamaral5200 4 года назад

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 4 года назад

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! 💜💜

@gbshadow666 4 года назад

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 4 года назад

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

@gubmx20 4 года назад

Vercel revolucionando totalmente o desenvolvimento front-end com o Next.js. Top!

@rocketseat 4 года назад

Demaais!! 🚀🚀

@seducedbywine 4 года назад

Vercel como sempre revolucionando! Diego, se possivel traga mais vídeos sobre o mesmo Abraços!

@rocketseat 4 года назад

Verdade! hahaha. Valeeu Robson, traremos sim!! 💜💜🚀

@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 💖

@jeffersonsilva6954 4 года назад

Infelizmente o RU-vid ã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 4 года назад

Hahaha Valeeeeeeeeu Jefferson! 💜💜😍

@maykbrito 4 года назад

3:36 ⏸👁

@rocketseat 4 года назад

Hahaha 👀

@MineradorExilado Год назад

Diego é fera demais mano!!!

@matheusz_nied 3 года назад

Eu fiquei fascinado com este conteúdo!

@douglasoliveira2119 4 года назад

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 4 года назад

Faala, Douglas! Valeu pela pergunta!! #PR 💜

@evertonpereiramartins8352 4 года назад

Muito bom. Parabéns! Realmente muito prático, sem burocracias de publicação etc :D

@rocketseat 4 года назад

Siiim! Valeeu pelo feedback, Everton! 💜💜

@am-castro 3 года назад

Q massa mano, bem mão na massa mesmo. Obrigado!

@carlosricardoziegler2650 4 года назад

Muito top, estou em um projetinho com vercel e ajudou muito isso.

@rocketseat 4 года назад

Que show Carlos! Vercel tá demais mesmo! 💜

@viniciusrangel544 4 года назад

melhor conteudo da internet

@rocketseat 4 года назад

Valeeeeeu Vini!! 💜💜

@joaogarcez10 4 года назад

Conteúdo muito bom. Continue a trazer mais conteúdo nextjs, integrar com o github etc

@rocketseat 4 года назад

Faala, João! Traremos sim!! 💜💜

@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 👌.

@ilannildoviana 4 года назад

Adoro os CodeDrops

@rocketseat 4 года назад

Valeeeeu Ilannildo!! 💜💜

@ricardoerib 3 года назад

Excelente!!!

@JoaoAlbus 4 года назад

Metralhadora de conhecimento rs to me sentindo baleado rs gostei! rs

@rocketseat 4 года назад

Hahahaha 😄 boraa! 🚀

@paulorcvieira 4 года назад

Massa Diegão, mas seria mais legal ainda se desse continuidade nesse projeto. valeu!

@rocketseat 4 года назад

Boaa! Valeeu pela sugestão, Paulo! 💜💜

@edilsonpacheco847 4 года назад

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!

@gabrielcaussi9050 4 года назад

Fala Diego, o que acha de um vídeo instalando uma distribuição linux e configurando? Achei muito massa a sua personalização.

@rocketseat 4 года назад

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! 💜

@myguelangello8563 3 года назад

Manoo que conteúdo bom. Só uma dúvida: como eu faria para verificar se o email já existia no meu banco

@leonardodini2173 4 года назад

o conteudo de voces eh sensacional dms

@rocketseat 4 года назад

Valeeeeeu Leo! 💜💜

@jillesmc 4 года назад

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 4 года назад

Faala, Jiles! Valeeu pelas dicas!! 💜💜

@claudomiromonteiro52 2 года назад

Muito top este video, teria algo parecido com envio de anexo, input type="file"?

@apholo8308 4 года назад

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 4 года назад

Faala, Apholo! Valeeu pela sugestão! 💜💜

@edsontesser 3 года назад

Muito bom, obrigado pelo conhecimento!!

@rocketseat 3 года назад

Faaala, Edinho! Valeu demais! 🚀 💜

@MaisUmSomente 3 года назад

Insano

@rocketseat 3 года назад

Curtiu, Allan!? 💜

@jussinei 3 года назад

Fala Diego. Super aula, muito top. Se eu usar React-Native ao invés de ReactJs, funcionaria na Vercel ?

@pedrofrochtengarten2156 4 года назад

finalmente o next, né. Tava demorando

@rocketseat 4 года назад

Hahaha 😄😄

@pedrofrochtengarten2156 4 года назад

muito top o conteúdo

@rocketseat 4 года назад

Valeeeu Pedro!! 💜💜

@pedrofrochtengarten2156 4 года назад

@@rocketseat eu tenho 12 anos e programo des dos 11 anos. e acompanho vcs faz tempo

@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

@kenedyribeiro1390 4 года назад

Mano, que música lovetimes na introdução kkkk

@rocketseat 4 года назад

Hahaha 💜

@eddyrusso8820 2 года назад

Uma dúvida... agora não é mais NowRequest e NowResponse? E sim VercelRequest e VercelResponse?

@sidneiklein 4 года назад

Ó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

@zevdvlpr 4 года назад

Muito top 👍

@rocketseat 4 года назад

Faala, Zev! Valeeeu 💜💜

@guinmonte 4 года назад

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 4 года назад

Faala, Gui! Valeeu pela sugestão! 💜💜

@salvimateus 4 года назад

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 4 года назад

Não exatamente assim, a Vercel mapeia essa rota pra /subscribe por exemplo.

@salvimateus 4 года назад

@@davisuga não entendi 😬😬

@gfrsolutions8042 4 года назад

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 4 года назад

@@gfrsolutions8042 exatamente! faltou explicar isso no vídeo!

@gabuzin 4 года назад

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.

@osama04 4 года назад

Boaaa, tava justamente estudando next

@rocketseat 4 года назад

Boaa Alex! Só vai!! 🚀🚀

@guilhermesantos6367 4 года назад

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 4 года назад

Faala, Guilherme! Valeeu pela sugestão! 💜💜

@styllth 4 года назад

Muito show essa ideia com next. Mas daria pra usar com postgrees sql?

@patriciomartins 4 года назад

top demais, passou tão rápido que eu nem vi kkkkkk

@rocketseat 4 года назад

Valeeeeeu Patrício!!! 💜

@eucomcerteza 4 года назад

Top!

@rocketseat 4 года назад

Valeeeu Junior!! 💜💜

@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

@renansouza351 4 года назад

Finalmente o Next! 🔥

@rocketseat 4 года назад

Chegoooou. E em breve teremos ainda mais conteúdos dele! 💜💜

@andersonmelo1735 4 года назад

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

@ebr182 4 года назад

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 4 года назад

Faala, Eber! Verdade, o pior é que ele usa haha. Provavelmente esqueceu de ativar ao mudar de computador! 😅😅

@diegoi7 2 года назад

Alguém sabe qual é o tema do ZSH do Diego?

@RoSanttos 3 года назад

Como faz para trazer os dados no response?

@toskito123 2 года назад

Pq a fonte n funfa quando lanço o deploy na vercel?

@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.

@joaobatista-rn6le 3 года назад

Alguem sabe se funciona em servidor php?

@LeandroLima-ew7tl 3 года назад

Top! Qual o nome da música da introdução? hahaha

@rafael_tg 3 года назад

cada rota fica obrigatoriamente em um arquivo separado dentro da pasta api ?

@alitonoliveira1700 3 года назад

Isso me lembra cloud functions da firebase. Tem alguma semelhança?

@arntxy 3 года назад

Consigo executar fora da vercel? Usando next start?

@jordaorodrigues8548 4 года назад

Ensina a configurar o terminal igual o seu Diego !

@rocketseat 4 года назад

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/

4 года назад

Fudido como sempre! só conteudo monstro!

@rocketseat 4 года назад

Hahaha Valeeu César! 😄💜

@pedromartinsfalleiros7721 4 года назад

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 4 года назад

Hahaha 🔮😄

@MrMatheus195 4 года назад

Quando utilizar um servidor api convencional ao invés das serverless functions?

@augustomarcelo 4 года назад

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 4 года назад

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. 💜💜

@edu-correia 4 года назад

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 4 года назад

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! 💜

@GigaOI 3 года назад

QUal navegador o diego usa?

@rocketseat 3 года назад

O Vivaldi! 💜

@voguh__ 4 года назад

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)

@kaluabentes7926 4 года назад

Qual é a distro linux que voce está usando?

@vini6 4 года назад

Acredito q seja KDE mas quero saber dele também

@kaluabentes7926 4 года назад

@@vini6 o setup ta bem clean, curti

@PinheiroPaulo 4 года назад

Muito provável que seja o Kubuntu. Ele mostrou em uma live um tempo atras, é o Ubuntu com o KDE.

@kaluabentes7926 4 года назад

@@PinheiroPaulo Topper

@rocketseat 4 года назад

Faala, Kaluã!! É o Ubuntu com KDE mesmo como a galera comentou! 💜

@andrecoelho2775 4 года назад

🚀🚀🚀

@rocketseat 4 года назад

💜🚀🚀

@brunomello7499 4 года назад

duração do video ta igual a porta que o diego sempre usa no backend

@rocketseat 4 года назад

Hahahah é verdade! Boa Bruno!! 😄😄

@ig1062 4 года назад

Qual sistema operacional que o Diego está usando?

@ibernohoffmann5427 4 года назад

Kubuntu 20.04

@rocketseat 4 года назад

Fala, Igor! Ele está usando o Ubuntu com KDE Plasma ! 💜

@ruszomalkuko 4 года назад

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 4 года назад

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!!!