How to Send Emails with Next.js, Resend and Server Actions (QUICK & EASY)

In this video, we’ll cover how to send emails using Next.js, Resend, Zod, Server Actions, useActionState, Plain Text Emails, and React-Email Templates—everything you need to set up email functionality in your Next.js app quickly and easily.

From logging in to Resend to handling server-side validation with Zod, we’ve got you covered. Whether you're a beginner or looking to refine your skills, this tutorial will walk you through every step, ensuring you get your email form up and running seamlessly.

Topics Covered:
Resend Login and Setup: Quick guide on logging into Resend, setting up your account, and getting started.
Domain Provider DNS Records: How to configure your DNS records with your domain provider for seamless email delivery.
API Key Generation: Step-by-step instructions on generating your API key in Resend to securely send emails.
Form Creation: Building your email form in Next.js and integrating it with Resend.
Using useActionState: Explanation of how to use useActionState to manage form state, handle form submissions, and link it to your sendEmailAction.
Server-Side Validation with Zod: Implementing Zod for validating form data on the server side to ensure everything is in order.
Displaying Message Response: Returning a { message } object from the server and showing it in a paragraph on your frontend.

By the end of this video, you'll have a fully functional email form with server-side validation, ready to deploy. No fluff, just solid, practical guidance to get you up and running.

TIMESTAMPS:
00:00 – Intro: How to Send Emails with Next.js, Resend, and Server Actions (QUICK & EASY)
00:10 – Sections Overview
00:27 – Setting Up Resend
01:05 – Setting Up DNS Records
02:24 – Installing Dependencies
03:20 – Implementing the Home Page
04:40 – Creating the Form Component
05:15 – Setting Up Server Action
06:11 – Implementing Send Email Server Action with Plain Text
08:00 – Using React-Email Templates with Next.js for sending emails