# How to send emails using Next.js 14, Resend and React-Email
Communication with your users is really important and emails are one of the means of communication. Sending emails is really important for applications. These are some of the reasons:
1. User Onboarding and Account Verification
2. Password Resets and Account Recovery
3. Notification and Alerts
4. Communication and Updates
5. Marketing and Promotions
6. Support and Customer Service
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
Before we can start using Resend in our app, first you have to create an account on [Resend](https://resend.com). After creating the account, you have to verify your domain name and the email address you will be using to send emails.
Once that's done, go to the [API Keys](https://resend.com/api-keys) page and create a new api key.
![Resend Api keys](//images.ctfassets.net/vlpuprt2y2ne/7hMmozVIMnypwof8X1skPc/3f28a786b7553e054b8e3738436272f2/image.png align="left")
Copy an existing API key or click **Create Api Key** to create a new one.
## Setting Up Your Next.js Project
```powershell
npx create-next-app@latest
```
On installation, you'll see the following prompts:
```powershell
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, we have to install the packages for sending emails.
```powershell
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 Form
Let's now create a simple form where the user can enter his name, email and message. And when it is submitted we will send the detail to the entered email.
```javascript
export default function Form() {
return (
)
}
```
## Creating an Email Template
Now let's create an email template using React Js.
```javascript
import { Html, Heading, Text } from "@react-email/components"
const EmailTemplate = ({
name,
email,
message
}: {
name: string
email: string
message: string
}) => {
return (
New Form Submission
You just submitted a form. Here are the details:
Name: {name}
Email: {email}
Message: {message}
)
}
export default EmailTemplate
```
## Creating Server Action
Server action is the latest feature of Next.js 14. 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.
```javascript
"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 ",
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, make sure to use an email that you verified on your Resend account.
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.
```javascript
"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 ",
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 Server Action with the Form
Now let's use the server action we created above with our form component.
```javascript
"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 (
)
}
```
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 article aimed to help you quickly get started with sending emails. 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.
* [Resend Documentation](https://resend.com/docs/introduction)
* [React-Email Documentation](https://react.email/docs/introduction)
## [MyDevPage](http://mydevpa.ge/): Create a Portfolio Website Instantly
[MyDevPa.ge](http://MyDevPa.ge) allows you to build a portfolio website in minutes. Focus on building great projects and enhancing your skills rather than wasting your time in building a portfolio website from scratch or customizing expensive templates.
[MyDevPa.ge](http://MyDevPa.ge) handles everything:
* Creating a portfolio
* SEO
* Analytics
* Customization
* Custom Domain
* Contact Form
![MyDevPa.ge](//images.ctfassets.net/vlpuprt2y2ne/6oOJjFtSMHjgeoNhDW1IOm/4a4cb3c8f946e7e8056c8ee122c406a4/image.png align="left")