Send Emails with SendGrid & Next.js Serverless Functions - Contact Form Tutorial

🧐 What's Inside
03:21 Capturing form submissions events and data in React with onSubmit
08:42 Configuring custom domain authentication in SendGrid
10:26 Installing CNAME DNS records for SendGrid in Google Domains
13:59 Installing SendGrid mail SDK to programmatically send emails
17:43 Outro

🗒️ Read More

💾 Code

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

SendGrid

SendGrid Mail API

🎼 Music
Music from Uppbeat (free for Creators!):
License code: BMTJ9FUGLPQDAJDQ

#colbyfayock #sendgrid #nextjs #email #serverless #apis #webdevelopment

[pensums]

I don't usually comment in tutorial videos, but I am more than happy that I have found your channel. It is the first channel that I see tutorials about concrete and real life features that we see in all of our everyday apps. As a junior dev, seeing a thousand versions of to-do apps is not gonna help me get to the next step. You don't know how much that is valuable to probably more viewers than you think. Thank you so much!

[priktop]

I really appreciate that you take the time to also show things like the CNAME DNS records.
Great video, thanks a lot!

[RendyEunike]

you are my new idol for next js and storybook! HAHA glad to know you my man, hello from indonesia!

[jawyor-kt]

Your videos are really cozy and informative. Really like em, you have good talking skills

[eduardoranierosilva]

EXACTLY what my current project needs!!! thanks man!

[fangg]

First of all, thanks for this great video that helped me on building my portfolio, Colby. You're a true treasure for some of us.

Secondly, I address this to anyone else here: I get a strange behavior on production (I host my portfolio on Vercel) where the form works great on Brave Browser mobile and desktop, Chrome, Safari, Samsung Browser all on mobile, but I get no data when testing it on Chrome and Edge on desktop (the response object I get back as a response is empty on the data object).

This happens in production only. In development the desktop browsers all work fine.

Thank you again Colby for doing all these great stuff !

[berry]

Hey Colby. Thank you for the impact and compact sandgrid tut. You are the best please keep up.

[mememihnea]

Thank you for this tutorial, Colby.
Really helped.

[adnilsonmedina]

This tutorial is so amazing. The best I found on YouTube about sending emails with nextjs and SendGrid. Congratulations!

Just one problem with my form: all fields of type select on my form are not captured and I can't store them in the formdata object.

How can I fix this?

[artofthesystem]

Great video! Helped me a lot! Thanks Colby!

[TrostCodes]

Thanks for this, Colby! Super helpful stuff.

[josedavidchiquillo]

THANKS, i has been over 4 hours trying to solve and get this right with multiple errors and configuration.

[brobinbraauw]

Thanks a bunch. Got it working cause of this video!

[stringTAer]

What kind of spam prevention and security measures do you recommend? Security for open endpoints like this are a mystery to me! Thanks for the vid!

[borsaniasushant]

Amazing.... Idea for a video: please make tutorial on sending SMS using Twilio API... Thank you

[charlottehughes]

This video has been so helpful to me, really clear and easy to follow. I really appreciate you answering my question too, thank you. Looking forward to watching more of your videos

[andrewbateman]

Great tutorial. Everything worked perfectly. Thanks.

[antonmarinov]

Thank you so much for making this video!

[smoothbooth]

Thanks a lot for this man do you have any vids on how to go about validating these inputs before the message is sent?

[DexDeadly]

Is there an updated version for NextJS 13 with the app directory?