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

Поділитися
Вставка
  • Опубліковано 23 жов 2024

КОМЕНТАРІ • 159

  • @andresamaral5200
    @andresamaral5200 4 роки тому +1

    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
      @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
    @gbshadow666 4 роки тому +1

    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
      @rocketseat  4 роки тому

      Hahahaha quem sabe a gente não tem mesmo uma 🔮😎

    • @Xd4LEM4ObX
      @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

  • @limaand2009
    @limaand2009 3 роки тому +12

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

  • @deiseagnys9638
    @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
    @gubmx20 4 роки тому +1

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

  • @seducedbywine
    @seducedbywine 4 роки тому +2

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

    • @rocketseat
      @rocketseat  4 роки тому

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

  • @douglasoliveira2119
    @douglasoliveira2119 4 роки тому +11

    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
      @rocketseat  4 роки тому +1

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

  • @matheusz_nied
    @matheusz_nied 3 роки тому

    Eu fiquei fascinado com este conteúdo!

  • @am-castro
    @am-castro 3 роки тому

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

  • @MineradorExilado
    @MineradorExilado Рік тому

    Diego é fera demais mano!!!

  • @maykbrito
    @maykbrito 4 роки тому +18

    3:36 ⏸👁

  • @carlosricardoziegler2650
    @carlosricardoziegler2650 4 роки тому

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

    • @rocketseat
      @rocketseat  4 роки тому

      Que show Carlos! Vercel tá demais mesmo! 💜

  • @jeffersonsilva6954
    @jeffersonsilva6954 4 роки тому +1

    Infelizmente o UA-cam ã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
      @rocketseat  4 роки тому +1

      Hahaha Valeeeeeeeeu Jefferson! 💜💜😍

  • @gabrielcaussi9050
    @gabrielcaussi9050 4 роки тому +2

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

    • @rocketseat
      @rocketseat  4 роки тому +1

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

  • @gabrielbraga5122
    @gabrielbraga5122 4 роки тому

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

  • @ricardoerib
    @ricardoerib 3 роки тому

    Excelente!!!

  • @evertonpereiramartins8352
    @evertonpereiramartins8352 4 роки тому +1

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

    • @rocketseat
      @rocketseat  4 роки тому

      Siiim! Valeeu pelo feedback, Everton! 💜💜

  • @jussinei
    @jussinei 3 роки тому

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

  • @myguelangello8563
    @myguelangello8563 3 роки тому

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

  • @salvimateus
    @salvimateus 4 роки тому +5

    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
      @davisuga 4 роки тому

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

    • @salvimateus
      @salvimateus 4 роки тому +1

      @@davisuga não entendi 😬😬

    • @gfrsolutions8042
      @gfrsolutions8042 4 роки тому +2

      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
      @salvimateus 4 роки тому +2

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

    • @gabuzin
      @gabuzin 4 роки тому +1

      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.

  • @edilsonpacheco847
    @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!

  • @viniciusrangel544
    @viniciusrangel544 4 роки тому +1

    melhor conteudo da internet

  • @styllth
    @styllth 4 роки тому

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

  • @andersonmelo1735
    @andersonmelo1735 4 роки тому +2

    Faala Diego. Com esse recurso de serveless functions eu consigo, por exemplo, listar esses dados inseridos no mongodb e mostrar na interface?

    • @rafaeldias1343
      @rafaeldias1343 3 роки тому

      Fala Anderson, beleza? Você descobriu se é possível? Estou com a mesma dúvida heheh

    • @andersonmelo1735
      @andersonmelo1735 3 роки тому

      @@rafaeldias1343 opa, ainda não 😕

    • @rafaeldias1343
      @rafaeldias1343 3 роки тому

      @@andersonmelo1735 é possível sim mano, acabei de descobrir lkkk

  • @sidneiklein
    @sidneiklein 4 роки тому +1

    Ótima abordagem, como ficaria a questão de uma página de "Contato" que faria um envio de e-mail?

    • @MarcoSync
      @MarcoSync 3 роки тому

      Só criar a function que envia o email

  • @eddyrusso8820
    @eddyrusso8820 2 роки тому

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

  • @guilhermesantos6367
    @guilhermesantos6367 4 роки тому +2

    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
      @rocketseat  4 роки тому +2

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

  • @paulorcvieira
    @paulorcvieira 4 роки тому

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

    • @rocketseat
      @rocketseat  4 роки тому

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

  • @matheuseufrasio8488
    @matheuseufrasio8488 4 роки тому +2

    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

  • @claudomiromonteiro52
    @claudomiromonteiro52 2 роки тому

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

  • @joaogarcez10
    @joaogarcez10 4 роки тому

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

    • @rocketseat
      @rocketseat  4 роки тому

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

  • @rafael_tg
    @rafael_tg 4 роки тому

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

  • @AndersonFaro9
    @AndersonFaro9 4 роки тому

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

  • @ebr182
    @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
      @rocketseat  4 роки тому +1

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

  • @MaisUmSomente
    @MaisUmSomente 3 роки тому

    Insano

  • @pedrofrochtengarten2156
    @pedrofrochtengarten2156 4 роки тому

    muito top o conteúdo

    • @rocketseat
      @rocketseat  4 роки тому

      Valeeeu Pedro!! 💜💜

    • @pedrofrochtengarten2156
      @pedrofrochtengarten2156 4 роки тому

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

  • @arntxy
    @arntxy 3 роки тому

    Consigo executar fora da vercel? Usando next start?

  • @ilannildoviana
    @ilannildoviana 4 роки тому +1

    Adoro os CodeDrops

    • @rocketseat
      @rocketseat  4 роки тому

      Valeeeeu Ilannildo!! 💜💜

  • @LeandroLima-ew7tl
    @LeandroLima-ew7tl 3 роки тому

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

  • @JoaoAlbus
    @JoaoAlbus 4 роки тому

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

  • @alitonoliveira1700
    @alitonoliveira1700 4 роки тому

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

  • @toskito123
    @toskito123 2 роки тому

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

  • @leonardodini2173
    @leonardodini2173 4 роки тому

    o conteudo de voces eh sensacional dms

  • @edsontesser
    @edsontesser 3 роки тому

    Muito bom, obrigado pelo conhecimento!!

    • @rocketseat
      @rocketseat  3 роки тому +1

      Faaala, Edinho! Valeu demais! 🚀 💜

  • @kenedyribeiro1390
    @kenedyribeiro1390 4 роки тому

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

  • @eucomcerteza
    @eucomcerteza 4 роки тому

    Top!

    • @rocketseat
      @rocketseat  4 роки тому +1

      Valeeeu Junior!! 💜💜

  • @ShugiroKiFuja
    @ShugiroKiFuja 4 роки тому

    let cacheDb... 22:15 tem como fazer de um jeito que gere o mesmo resultado fazendo em Javascript? e não em Typescript

  • @RoSanttos
    @RoSanttos 3 роки тому

    Como faz para trazer os dados no response?

  • @GigaOI
    @GigaOI 3 роки тому

    QUal navegador o diego usa?

  • @kaluabentes7926
    @kaluabentes7926 4 роки тому +1

    Qual é a distro linux que voce está usando?

    • @vini6
      @vini6 4 роки тому

      Acredito q seja KDE mas quero saber dele também

    • @kaluabentes7926
      @kaluabentes7926 4 роки тому

      @@vini6 o setup ta bem clean, curti

    • @PinheiroPaulo
      @PinheiroPaulo 4 роки тому +1

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

    • @kaluabentes7926
      @kaluabentes7926 4 роки тому

      @@PinheiroPaulo Topper

    • @rocketseat
      @rocketseat  4 роки тому

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

  • @zevdvlpr
    @zevdvlpr 4 роки тому +1

    Muito top 👍

    • @rocketseat
      @rocketseat  4 роки тому +1

      Faala, Zev! Valeeeu 💜💜

  • @diegoi7
    @diegoi7 2 роки тому

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

  • @pedrofrochtengarten2156
    @pedrofrochtengarten2156 4 роки тому +1

    finalmente o next, né. Tava demorando

  • @jillesmc
    @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
      @rocketseat  4 роки тому +1

      Faala, Jiles! Valeeu pelas dicas!! 💜💜

  • @edu-correia
    @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
      @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! 💜

  • @osama04
    @osama04 4 роки тому

    Boaaa, tava justamente estudando next

    • @rocketseat
      @rocketseat  4 роки тому

      Boaa Alex! Só vai!! 🚀🚀

  • @MrMatheus195
    @MrMatheus195 4 роки тому +1

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

    • @augustomarcelo
      @augustomarcelo 4 роки тому +1

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

  • @apholo8308
    @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
      @rocketseat  4 роки тому

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

  • @joaobatista-rn6le
    @joaobatista-rn6le 3 роки тому

    Alguem sabe se funciona em servidor php?

  • @patriciomartins
    @patriciomartins 4 роки тому

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

    • @rocketseat
      @rocketseat  4 роки тому +1

      Valeeeeeu Patrício!!! 💜

  • @renansouza351
    @renansouza351 4 роки тому

    Finalmente o Next! 🔥

    • @rocketseat
      @rocketseat  4 роки тому

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

  • @voguh__
    @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)

  • @guinmonte
    @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
      @rocketseat  4 роки тому

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

  • @jordaorodrigues8548
    @jordaorodrigues8548 4 роки тому

    Ensina a configurar o terminal igual o seu Diego !

    • @rocketseat
      @rocketseat  4 роки тому +1

      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
      @rocketseat  4 роки тому

      Hahaha Valeeu César! 😄💜

  • @ig1062
    @ig1062 4 роки тому

    Qual sistema operacional que o Diego está usando?

  • @ruszomalkuko
    @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
      @rocketseat  4 роки тому +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!! 💜💜💜

    • @5caioc
      @5caioc 3 роки тому +1

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

  • @brunomello7499
    @brunomello7499 4 роки тому

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

    • @rocketseat
      @rocketseat  4 роки тому

      Hahahah é verdade! Boa Bruno!! 😄😄

  • @andrecoelho2775
    @andrecoelho2775 4 роки тому

    🚀🚀🚀

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

  • @periclesigor911
    @periclesigor911 4 роки тому +1

    Qual o nome desse navegador que o Diego está usando?

    • @farbauth
      @farbauth 4 роки тому

      Vivaldi, em vivaldi.com/pt-br/

    • @robsong6689
      @robsong6689 4 роки тому +1

      Vivaldi.
      Ele tá usando até sair o edge pro linux.

    • @periclesigor911
      @periclesigor911 4 роки тому

      @@robsong6689 vlw.

    • @rocketseat
      @rocketseat  4 роки тому

      💜💜

  • @bigardibatera
    @bigardibatera 4 роки тому

    Qual browser é esse que está utilizando?

    •  4 роки тому

      Vivaldi

    • @rocketseat
      @rocketseat  4 роки тому

      Faala, Gustavo!! É o Vivaldi! 💜

  • @tarciziobarbosa9532
    @tarciziobarbosa9532 4 роки тому +1

    Qual o navegador do Diego?

    • @farbauth
      @farbauth 4 роки тому

      Vivaldi, em vivaldi.com/pt-br/

    • @robsong6689
      @robsong6689 4 роки тому +1

      Vivaldi.
      Ele tá usando até sair o edge pro linux.

    • @tarciziobarbosa9532
      @tarciziobarbosa9532 4 роки тому

      @@robsong6689 Ah sim. Comecei a usar o Edge por causa dele kkk. Pensei que iria ter que trocar de novo.

    • @rocketseat
      @rocketseat  4 роки тому +1

      Boa Robson! Isso mesmo 😄

  • @felipemarinho1326
    @felipemarinho1326 4 роки тому

    Irado