# Send Email with Next.js, Resend and React-Email

Emails are important for talking to people, whether it's for work or personal reasons. But for developers, making good-looking and working emails can be hard and take a lot of time. There are problems like not having enough support for HTML, issues with different email programs, and the biggest issue – emails ending up in spam folders.

Trying to make email writing more exciting, the Resend team has come up with a library called React Email. It's like a modern solution for creating emails.

In today's post we will see how we can create an email using the template provided by React-email using **Next.js**, [Resend](https://resend.com) and [React-Email](https://react.email/).

### React-Email

[React Email](https://react.email) consists of good components without any specific styles, which allows us to make emails using React and TypeScript. The library also has a handy function that turns JSX code into HTML that works well with emails, making sure it looks good on all the popular email programs.

### Let's Start

Let create a new Next.js application using the below command

```bash
npx create-next-app@latest
```

And fillout the questions that is asked to create the next application leaving that to you. Make sure to choose "**<mark>NO</mark>**" for Tailwindcss.

Once the installation is completed let's install react-email package using the below command

```bash
npm install react-email @react-email/components -E
```

Once the package is installed go to **package.json** and then update the scripts like below

```bash
{
  "scripts": {
    "email": "email dev"
  }
}
```

Now in the application root create a new folder named "**<mark>emails</mark>**" and then create a new file named **<mark>welcomeEmail.tsx</mark>**

Once the file is created add the following snippet

```javascript
import { Button, Html } from "@react-email/components";
import * as React from "react";

export default function Email() {
  return (
    <Html>
      <Button
        href="https://example.com"
        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
      >
        Click me
      </Button>
    </Html>
  );
}
```

Once you have added the code run the application using the command

```bash
npm run email
```

which will open the application in 3000 port and you could see the following screen

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706450323284/171bd0a5-2645-4603-9b90-ac92fa989531.png align="center")

Click on the index.tsx you could see the button like below

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706450395649/3139740c-ccc5-4cbb-a9b1-373b73041a13.png align="center")

Now we have created a simple component now if we go to the email [templates section in React-email](https://demo.react.email/preview/vercel-invite-user.tsx) you can see some templates which you can take an insipiration.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706450517516/4950f425-cdf4-4943-87a2-0921c7ec3988.png align="center")

You can copy the email code by clicking on the Code Icon where you can see the actual code for the template which you can reuse in your application.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706450590967/ffb0b0b2-7606-469d-bff1-b10ccc0173b9.png align="center")

Once you have done with the template the next step is to create the API to send emails from the Next.js application using Resend.

### API for sending emails

Create a new folder named **<mark>api/mail</mark>** inside **app** folder and then create a new file named **route.ts.**

Now add the resend dependency

```bash
npm i resend
```

Also visit resend site and create a new account and grab the **<mark>API key</mark>** for sending the email.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706450806228/0db93030-771c-4044-b401-49c214b14be5.png align="center")

Once the API is created add this API key in your local **.env** file like below

```bash
RESEND_API=re_VS***3qz_KcGcPE6******yXAP**YF5d**M
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">There is a limit in sending emails using Resend for Free Tier with a limit of <strong><mark>100 emails per day</mark></strong> and <strong><mark>3,000 email per month</mark></strong></div>
</div>

Once you have added the API key in .env file go to your route.ts file and add the following snippet.

```javascript
import { render } from "@react-email/render";
import WelcomeEmail from "../../../emails";

import { Resend } from "resend";

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

export async function POST(request: Request, res: Response) {
  const { email } = await request.json();

  const { data, error } = await resend.emails.send({
    from: "onboarding@resend.dev",
    to: email,
    subject: "This is a test email",
    html: render(WelcomeEmail()),
  });

  if (error) {
    return Response.json(error);
  }

  return Response.json({ message: "Email sent successfully" });
}
```

In the above code we are importing the template which we have created earlier. and then we are setting up the from and to email address. For the trial purpose we will use "onboarding@resend.dev" and if you have custom domain to send email we will see how to do that in few mins.

Now run the next application using the following command.

```bash
npm run dev
```

Now we will send the email open **Postman** or **Thunderclient** and then create a new request like below

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706451302570/1ed6e95e-770f-46a5-86f6-38c46438e974.png align="center")

| URL | [http://localhost:3001/api/mail](http://localhost:3001/api/mail) |
| --- | --- |
| **METHOD** | POST |
| **BODY** | JSON |
| **BODY CONTENT** | { "email": "[nidhin@gmail.com](mailto:nidhin@gmail.com)" } |

Once you click "**SEND**" you could see the email is sent to the provided email address.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">For <strong>TRIAL</strong> purpose you can send emails to the account which you have used for Resend account creation.</div>
</div>

Now you would receive an email. You can check the email delivery status in Resend dashboard.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706451601874/a8e02ed1-4cb1-49fe-b218-54c17b037a45.png align="center")

### Custom Domains

Open Resend and then click "Domains"

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706452101692/bbde4616-b28f-433f-a34b-f4110cb5bc8b.png align="center")

Now click "Add domain" and then add your domain

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706452231968/160006c3-9bb7-478e-941a-a45c78d60082.png align="center")

Now you could see the DNS records which you need add it in your DNS provider settings page. Verification would take around 1 days once it is completed navigate to **route.ts** file and update the from email address to your custom domain.

### **Summary**

Today you have learnt how to use an email template from React-email and send the email using Next.js API with Resend. Will catch up in a new post till then Happy Learning :)
