How to send emails using Next.js 14, Resend and React-Email

Effective communication with your users is crucial, and emails play a key role in that. In this guide, we'll dive into how to send emails using Next.js 14, the Resend Email API, and React Email. You'll learn how to leverage the latest features in Next.js 14, including the app directory and server actions, to seamlessly integrate email functionality into your Next.js application.

Sending emails through React Email and the Resend Email API is essential for effective user communication in any Next.js application. Here are some of the common use cases for emails:

User Onboarding and Account Verification
Password Resets and Account Recovery
Notification and Alerts
Communication and Updates
Marketing and Promotions
Support and Customer Service

To address these use cases, I explored 'React Email' and 'Next.js send email' solutions, leading to the perfect combination of React Email and Resend Email API. Which is why in this article, we will dive into sending emails using Next.js 14, Resend and React-Email. We will leverage the latest Next.js features, such as the app directory and server actions.

Setting up Resend in NextJS 14

To start using the Resend Email API in your Next.js app, the first step is to create an account on Resend.

Once your Resend Email API account is set up, verify your domain and the email address you'll use to send emails from your Next.js application.

Once that's done, go to the API Keys page and create a new api key. Resend Api keys Copy an existing API key or click Create Api Key to create a new one.

Setting Up Your NextJS Project

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies. Next, let's install the necessary packages for sending emails using React Email and Resend Email API in your Next.js project.

npm i resend react-email @react-email/components @react-email/render

Let's talk about the packages we just installed:

resend: It is the service that we will be using to send emails
react-email: It allows us to create email templates using React Js.
@react-email/render: For converting react js based templates to an html string.

Creating a Simple NextJS Form

Now, let's create a simple Next.js form where users can enter their name, email, and message to be sent using the Resend Email API. And when it is submitted we will send the detail to the entered email.

export default function Form() {
  return (
    <form>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />
      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" cols={30} rows={10}></textarea>
      <button type="submit">Send</button>
    </form>
  )
}

Creating an Email Template with React-Email

Let's create an email template using React Email, a powerful tool for designing emails in your Next.js app.

import { Html, Heading, Text } from "@react-email/components"
const EmailTemplate = ({
  name,
  email,
  message
}: {
  name: string
  email: string
  message: string
}) => {
  return (
    <Html lang="en">
      <Heading as="h1">New Form Submission</Heading>
      <Text>You just submitted a form. Here are the details:</Text>
      <Text>Name: {name}</Text>
      <Text>Email: {email}</Text>
      <Text>Message: {message}</Text>
    </Html>
  )
}
export default EmailTemplate

Creating a NextJS Server Action

Server Actions, a new feature in Next.js 14, make it easier to handle form submissions and email sending using Resend Email API. It is an asynchronous function that runs on the server. We can use it to handle form submissions and to handle email logic on the server. So when you submit a form the function will start running on a server. In this case, you don't have to create API routes to handle any sensitive logic, like communicating with the database.

Create a file named actions.ts in the src folder (if you have) or the root of your project.

"use server"
import { Resend } from "resend"
import EmailTemplate from "./components/EmailTemplate"
interface State {
  error: string | null
  success: boolean
}
export const sendEmail = async (prevState: State, formData: FormData) => {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string
  try {
    const resend = new Resend(process.env.RESEND_API_KEY)
    await resend.emails.send({
      from: "Shahmir <shahmir@mydevpa.ge>",
      to: email,
      subject: "Form Submission",
      react: EmailTemplate({ name, email, message })
    })
    return {
      error: null,
      success: true
    }
  } catch (error) {
    console.log(error)
    return {
      error: (error as Error).message,
      success: false
    }
  }
}

Create a .env.local file in the root of your project and paste the Resend API key you created earlier.

The sendEmail function is a server action. It receives the previous state and the formData, that gives you access to the values of the form. Then it uses resend to send the email to the provided email address. In the from field, use the verified email address from your Resend Email API account to ensure successful email delivery.

In some cases, the react property might not work and you might receive an error while sending emails. In that case you can convert the React component into an HTML string.

"use server"
import { Resend } from "resend"
import EmailTemplate from "./components/EmailTemplate"
import { render } from "@react-email/render"
interface State {
  error: string | null
  success: boolean
}
export const sendEmail = async (prevState: State, formData: FormData) => {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string
  try {
    const resend = new Resend(process.env.RESEND_API_KEY)
    await resend.emails.send({
      from: "Shahmir <shahmir@mydevpa.ge>",
      to: email,
      subject: "Form Submission",
      html: render(EmailTemplate({ name, email, message }))
    })
    return {
      error: null,
      success: true
    }
  } catch (error) {
    console.log(error)
    return {
      error: (error as Error).message,
      success: false
    }
  }
}

Using NextJS Server Action with the Form

Now let's use the server action we created above with our form component.

"use client"
import { sendEmail } from "@/actions"
import { useEffect } from "react"
import { useFormState } from "react-dom"
export default function Form() {
  const [sendEmailState, sendEmailAction] = useFormState(sendEmail, {
    error: null,
    success: false
  })
  useEffect(() => {
    if (sendEmailState.success) {
      alert("Email sent!")
    }
    if (sendEmailState.error) {
      alert("Error sending email!")
    }
  }, [sendEmailState])
  return (
    <form action={sendEmailAction}>
      <label htmlFor="name">Name</label>
      <input type="text" id="name" name="name" />
      <label htmlFor="email">Email</label>
      <input type="email" id="email" name="email" />
      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" cols={30} rows={10}></textarea>
      <button type="submit">Send</button>
    </form>
  )
}

We are using the useFormState hook. It accepts the action and the initial state and returns the new state and the action function that we can attach with our form.

In the end we added an action property to our form and gave it the server action function.

Now when you submit the form you should receive an email.

Conclusion

This guide was designed to help you quickly get started with sending emails in Next.js using React Email and the Resend Email API. The Resend and React-Email libraries make it so easy to achieve this. To learn more about Resend and React-Email read their official documentation.

🚨 Do you need a Portfolio Website? 🚨

With MyDevPage you can build your own portfolio website in 1 minute. You need to focus on building great projects and enhancing your skills rather than wasting your time in building and designing a portfolio website from scratch.

MyDevPage handles everything: