Sending React Emails using Next.js and the Resend SDK
Tags: nextjs, react, webdev, tutorial
Published: 2023-09-20 16:25:56

[Resend](https://resend.com/) is a platform for efficient email sending that guarantees direct delivery to your inbox instead of the spam folder. Resend has different SDKs for various programming languages, including PHP, Ruby, JavaScript, Go, Python, and Elixir. Resend also supports serverless and SMTP for sending emails.

[React Email](https://react.email/) is an open-source component library created by the same team behind Resend. This library can be used to create different kinds of modern, responsive email templates.


## Features of Resend
- With Resend, you can send emails using various programming languages such as Python, Ruby, Go, Elixir, PHP, and JavaScript.  
- Sending emails from verified DNS (Domain Name System) records.
- User-friendly dashboard that shows the status of your emails whether they have been delivered, sent, or bounced.
- View email messages directly inside the dashboard.

In this tutorial, you will learn how to send emails from a verified domain using React-Email, Next.js, and Resend.

## Prerequisites
Here are what you need to follow along in this tutorial:

- Node.js installed on your machine.
- A free Resend account ([sign up with Resend for free](https://resend.com/signup)).
- A GitHub account.


## Getting started with Resend 
To get started with Resend, create an account by visiting [resend.com](https://resend.com/signup). You can sign up with your email address or a GitHub account.

![create a resend account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g14qb7yopewhwjc41261.png)

Make sure you confirm your account by clicking the **Confirm Account** button in the email you received after signing up with an email. After that, you be will redirected to your Resend dashboard.

The next step is to create an API key by following the steps below: 

-  Navigate to the **API Keys** section on the left side of your dashboard.
- Click on the **Create API Key** button on the right-hand side of the page. 
- A modal window containing a form appears. Choose a name for the **API Key Name** and click on the **Add** button.


![add api key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qd2yf9mlorxwwbo4tmv.png)

The API key will be generated for you once you click the **Add** button. You will be using this API key later on, so make a note of it.


![generate api keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpfb7wsgu5ys33cbgk57.png)


## Verifying the domain for sending emails
The domain that will be used for sending emails must be verified.
On the left-hand side of your dashboard, select **Domains** and click on the **Add Domain** button:


![add domains](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utxkyumifiomz8sign0s.png)

A new page appears. Add a domain by entering it in the input field. Then click on the **Add** button.


![add domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3qwo01wks64r9ww6a09.png)

Now that you have added a domain, the next step is to add a Domain Name System (DNS) record.


**Adding DNS records**
To add DNS records, place your mouse over the **DNS Records** below the alert notification. You will observe a clipboard icon enabling you to copy the values for each listed item. You can then click on the **DNS Provider** on your dashboard.
💡 The DNS provider can be Namecheap, GoDaddy, Hostinger, etc.


![dns provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpsya18wk4z9eb1m1up0.png)

You will be redirected to the DNS provider page where you’ll add DNS records. Add all DNS records you copied from your Resend dashboard. Then click on the **Add** button.


![verify domain fields](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hplgclmoc4dltr1xe2w.png)

Next, navigate back to your Resend dashboard and click the **Verify DNS Records** button.


![verify dns records](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mgqzf5i53b1ek0d0iyx.png)

After that, your dashboard status will change from “**Not Started**” to “**Pending**”. This indicates the DNS records verification is in progress. You will get an email notification once the verification is completed. 

Upon successful verification, your dashboard status will change to “**Verified**”. Now you can send emails from your verified domain.


## Setting up Resend in a Next.js project
To set up Resend in a Next.js project, click [here](https://github.com/Ademayowa/react-email-demo) to generate the starter files based on an existing template repo. Run the command below to clone this project:

```javascript
git clone <repo-git-url-provided-above>
```

Navigate into the project directory by running:

```javascript
cd react-email-demo
```

Next, install dependencies by running the following command in your project’s terminal:

```javascript
yarn install
```

On completion, run `yarn run dev` in your terminal and navigate to **localhost:3000** in your web browser. You should see the starter UI:


![template boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6s52bd9zh7ls2nv2k9i.png)

Now that you have a Next.js project running successfully, create the `.env.local` file in the root of your project. Add the Resend API key that was generated for you into this file.

```javascript
RESEND_API_KEY=YOUR_RESEND_API_KEY
```

**Form component**
In the `components` directory, update the `ContactUsForm.tsx` file by adding the following code:

```javascript
// components/ContactUsForm.tsx

'use client';

import { useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast'; // updated code

type FormInput = {
  name: string;
  email: string;
  message: string;
};

export default function ContactUsForm() {
  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
    reset,
  } = useForm<FormInput>();

   /**
   * The function sends a POST request to a server with form data and displays a success notification.
   * @param {FormInput} formData - The formData parameter is an object that contains the input values
   * from the form.
   */
  async function onSubmit(formData: FormInput) { 
    await fetch('/api/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },

      body: JSON.stringify({
        name: formData.name,
        email: formData.email,
        message: formData.message,
      }),
    }).then(() => {
      // Toast notification
      toast.success('Your email message has been sent successfully');
    });

    reset();
  }

  return (
    <div className='w-10/12 md:w-6/12'>
      <form
        onSubmit={handleSubmit(onSubmit)} // updated code
        className='mb-10 mt-5 flex w-full flex-col rounded-md bg-white p-5 py-14 shadow-lg md:max-w-3xl md:px-10 mx-auto'
      >
        <input
          className='mt-4 mb-3 h-14 block w-full rounded-md border px-3 text-gray-600 outline-none focus:border-stone-500 focus:outline-none md:mb-0'
          type='text'
          placeholder='Name'
          required
          {...register('name')}
        />
        <input
          className='mt-4 mb-3 h-14 block w-full rounded-md border px-3 text-gray-600 outline-none focus:border-stone-500 focus:outline-none md:mb-0'
          type='email'
          placeholder='Email'
          required
          {...register('email')}
        />
        <textarea
          className='mt-4 mb-5 block w-full rounded-md border px-3 text-gray-600 outline-none focus:border-stone-500 focus:outline-none md:mb-0'
          placeholder='Message Us'
          rows={6}
          required
          {...register('message')}
        />

        <button
          disabled={isSubmitting}
          type='submit'
          className='bg-blue-700 px-6 py-3 disabled:bg-gray-500 block-primary rounded-md cursor-pointer text-white mt-4 font-bold'
        >
          Book Appointment
        </button>
      </form>
    </div>
  );
}
```

Here, you did the following:


- Imported `useForm` hook from the `react-hook-form` library to handle form state and submission.


- Imported `toast` from the `react-hot-toast` library that displays a notification after an email message has been sent successfully.


- An async function named `onSubmit` is defined to handle form submission when the user submits the form. Inside this function, an API request is made using the fetch method that sends a POST request to the  `/api/send` endpoint with the form data as JSON in the request body.


- The `reset` function provided by `useForm` is used to reset the form fields after submission.


## Implementing a dynamic email template
 
With React Email, creating a modern email template becomes very easy. According to the [React Email](https://react.email/docs/introduction) website, there is a set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.

To use this set of standard components for building an email template, navigate to the `components` directory and create the `EmailMessage.tsx` file. Add the following code to this file:

```javascript

// components/EmailMessage.tsx

import {
  Body,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Tailwind,
  Text,
} from '@react-email/components';
import * as React from 'react';

type MessageUsEmailProps = {
  name: string;
  email: string;
  message: string;
};

const MessageUsEmail = ({ name, email, message }: MessageUsEmailProps) => {
  const previewText = `Weekly Updates 🚀${name} sent you a message.`;

  return (
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Tailwind>
        <Body className='bg-white my-auto mx-auto font-sans'>
          <Container className='my-[20px] mx-auto p-[20px] max-w-4xl'>
            <Heading className='text-black text-[20px] font-normal text-left'>
              <strong>Hello {name},</strong>
            </Heading>
            <Text className='text-black text-[14px] leading-[24px]'>
              {message}
            </Text>

            <Hr className='my-[16px] mx-0 w-full' />
            <Text className='text-[#666666] text-[12px]'>
             In a world where every email matters, Resend empowers you to send emails that captivate, engage, and convert. It's more than just an email platform; it's a catalyst for modernizing your email communication.
Don't settle for outdated email practices. Embrace the future of email communication with Resend and watch your messages soar to new heights.
            </Text>
            <Text className='text-[#666666] text-[12px]'>
              This email is delivered to you through the Resend SDK
              integrations.✨
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export default MessageUsEmail;
```


Here, you did the following:


- Imported from **`@react-email/components`** to structure the email template with specific elements for email rendering.
- The component receives **`name`**, **`email`**, and **`message`** as props of type **`MessageUsEmailProps`**.
- The **`Head`** component is used for including meta information within the email's **`<head>`** section.
- The **`Preview`** component is used to define the text that appears in the email client's preview pane.
- The **`Tailwind`** component is used to apply Tailwind CSS classes to style the email template.


## Sending emails using the Resend SDK

So far, you have verified a domain, set up Resend in a Next.js project, and implemented a dynamic email template. It’s time to send emails using Resend. 

In the `app` directory, create the `api/send/route.ts` file and add the following code snippet to this file:

```javascript
// app/api/send/route.ts

import { Resend } from 'resend';
import { NextRequest, NextResponse } from 'next/server';
import MessageUsEmail from '@/components/EmailMessage';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: NextRequest) {
  const { name, email, message } = await req.json();

  try {
    const data = await resend.emails.send({
      from: 'Hello <rayden@sonya.dev>', // your verified domain
        to: `${email}`, // the email address you want to send a message
      subject: `${name} has a message!`,
      react: MessageUsEmail({ name, email, message }),
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}
```

 From the code snippet above, you did the following:
 

- Imported `Resend` from `'resend'`.

- Imported `NextRequest` and `NextResponse` from `'next/server'` which are Next.js server-side functions.


- Imported the `MessageUsEmail` component that is used for generating the content of the email you intend to send.


- The `RESEND_API_KEY` is used to create an instance of Resend.


- The `POST` function is an asynchronous function that handles incoming POST requests.


- The `name`, `email`, and `message` variables are extracted from the parsed request body.

Now, navigate to the homepage of your project and input some data into the form fields. Click the “**Book  Appointment**” button. Messages sent to your email should appear in your inbox.

## Conclusion
This tutorial showed how to send emails from a verified domain using React-Email, Next.js, and Resend.
 

## Resources
[Official Resend Documentation](https://resend.com/docs/introduction)
[Official React Email Documentation](https://react.email/docs/introduction)