In this article, we’ll look at how to send emails with React Email and Resend. We’ll also build a typical portfolio contact form for sending those emails using Next.js.Until recently, creating and sending emails in React was extremely difficult, as there was no proper documentation on how to create email templates with hacky
tag tricks, or documentation on how to send emails.Much of the difficulty with using emails has been alleviated by the creation of React Email and Resend. These products — which were developed by the same team — have created an amazing developer experience for working with emails.Let’s start by setting up Next.js. Clone the starter branch of this GitHub repo to get the starter code. The image below shows what we should see when we run the development server.The starter code consists of a simple Next.js 13 app (with the App Router) that has a contact form component with proper validation using Zod and React Hook Form.We’ll be implementing the onSubmit function in the contact form component:Note: we won’t cover how to build the form or how to style the email itself, as that can be done with Tailwind or regular CSS.Le’t now look at how to set up Resend.To send the email with the Resend SDK, we first need to retrieve an API key. Head over to Resend’s website and log in or create an account with your email or GitHub details.After you’ve logged in, you should see the dashboard as pictured below.Press the Add API Key button to get the API key. Once you have your API key, go to the root of the project and create a .env.local file and paste the API key as follows:This will allow us, later on, to use Resend services within our app.Resend requires that we verify a domain from which we want to send unlimited emails by adding a DNS record on their website.To do this, head over to the Resend dashboard and go to the Domains tab and press the Add Domain button, as pictured below.From there, we can verify the domain and use that specific email address. For this simple tutorial, we won’t be verifying any email addresses.It’s now time to create the email component. In the components folder, create a file called Email.tsx and import the following components from React Email:For the email, the only things that will change will be the form data values (that is, the name, message, email address, and phone number of the person). These values can be used as props for the email, so let’s create an interface for that:The actual email component would look like this:For the preview text of the email, we could just say that “so and so has a message”. It would be implemented like this:Now for the actual JSX. We’ll first need to wrap our email in an tag and render the and tags (for the preview text). Then we need to wrap the content in a tag to use Tailwind styling, and a tag:We can then add a component with some general styling to make the container in which the email is rendered look nicer:Then inside the container, we can add a simple heading with some styles labeled “Someone would like to contact you about something!”Then we can render out the actual content of the email with the built-in component:Finally, we can add an
component and another component with the sender’s contact information for future conversations:And with that, our email is done. As you’ve probably noticed, React Email makes it simple to make emails, because its built-in components are practically identical to regular HTML tags.The email should look something like the image below.Now we’re ready to send the email with Resend!To send the email, we first need to implement the API endpoint. In the file api/send/route.ts (already created in starter files), make sure the following imports are present:Then, create an instance of the Resend SDK, as follows:Note: if you used a different environment variable name for your API key, make sure to replace it properly.Then paste in the following Zod schema:This schema represents the request body that was sent from the client. Now let’s destructure the request body to get these fields in the POST function:Now, to send the email, we use the send function from our Resend instance like this:If you verified your domain on Vercel, you can use an email address with that domain on the from field, and the to field should be your email. If you want to be extra secure with the email addresses, you can set them as environment variables.Now we need to implement the actual fetch action on the client. In the contact form component (components/ContactForm.tsx), we need to fetch the API endpoint like this inside of the onSubmit function:Make sure to mark the function as async due to the await statement. It’s up to you to decide how you want to implement loading and error-handling states. (You can read more about async/await here.)And with that, we have successfully sent the email with Resend!Much of the headache with creating and sending emails in React has been solved with React Email and Resend. It’s a two-hit combo that provides an amazing developer experience and gets the job done extremely quickly.Consult the docs for React Email and Resend if you want to learn more about these frameworks. React Email also provides many example templates for you to base your emails off. You can find the finished source code on GitHub.Rayan Kazi is a full-stack web developer and technical writer acquainted with the latest tech on the market. His strong drive allows him to solve complex problems with robust solutions. You can find him on Twitter or at his website.© 2000 – 2023 SitePoint Pty. Ltd.This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
