DEV Community

Cover image for How to send emails using Resend and React Email ?
Blaise Tiong
Blaise Tiong

Posted on • Edited on

How to send emails using Resend and React Email ?

#tutorial #react #nextjs #productivity

Why Resend & React Email for your application ?

When developing applications it is common to send emails such as transactional emails, notifications to your users.
However, email templates are notorious of being painful to create due to:

  • Inconsistent rendering across email clients
  • Responsive email design challenges
  • Limited CSS support

This is where Resend and React Email comes into the picture

  • Resend helps us to send the actual emails.
  • React Email helps us to create responsive emails using React components.

If you are a React developer, this will be great email solution for your React/NextJS application.

Let's go through how I setup my Resend + React Email Setup.

Step 1: Install dependencies 

npm i @react-email/components resend
Enter fullscreen mode Exit fullscreen mode 
npm install --save-dev react-email
Enter fullscreen mode Exit fullscreen mode

Step 2: Create some folders

The following is how I prefer to setup my folder structure for emails. The email sending functions and
email templates are all being stored here.

.
├── ...
├── modules/
│   ├── email/
│   │   └── emails/
│   │       ├── ... // This is where we put the email templates
│   │       └── index.ts
│   └── index.ts // Where we put the send email handler
└── ...
Enter fullscreen mode Exit fullscreen mode

Step 3: Get your Resend API key

You will need to sign up for a Resend account and create a Resend API key.

Showing create api key dialogs in resend interface

The generated API key will be used to initialise Resend for email sending.

import { Resend } from "resend";

const resendToken = process.env.RESEND_TOKEN;
// const resendToken = import.meta.env.RESEND_TOKEN; // For Vite based React projects
const resend = new Resend(resendToken);
Enter fullscreen mode Exit fullscreen mode

Step 4: Create the sendEmail function

What I like to do it to create a wrapper function over Resend's API. So I can have global control over the emails that I wanted to send from my applications.

import { type CreateEmailOptions, type CreateEmailRequestOptions, Resend } from "resend";
import { getEnvVariables } from "../utils/getEnvVariables";
import * as emails from "./emails";
import React from "react";

const resendToken = process.env.RESEND_TOKEN;
// const resendToken = import.meta.env.RESEND_TOKEN; // For Vite based React projects
const resend = new Resend(resendToken);

const SENDER = 'onboarding@resend.dev';

// Define the type for the emails object
type Emails = typeof emails;

// Define a union type of the keys of the emails object
type EmailTemplateName = keyof Emails;

// The sendEmail function with type inference for props
export default async function sendEmail<T extends EmailTemplateName>(
  { payload, templateProps, options, template }: {
    payload: Omit<Omit<CreateEmailOptions, 'react'>, 'from'>,
    options?: CreateEmailRequestOptions,
    template: T,
    templateProps: React.ComponentProps<typeof emails[T]>
  }
) {
  const emailComponent = emails[template];
  // @ts-ignore
  const reactElement = React.createElement(emailComponent, templateProps);
  return resend.emails.send(
    {
      ...payload,
      from: SENDER,
      react: reactElement,
    },
    options
  );
}
Enter fullscreen mode Exit fullscreen mode

Lots of things happening here. In essence what it does is it defines all available emails templates & their corresponding props exported from the emails folder as a type for the sendEmail function.

This implementation ensures type safety by inferring props based on the selected email template, reducing runtime errors. It simplifies email sending with a reusable function that supports dynamic template selection, enhances developer experience, improves code maintainability, and leverages React and TypeScript for scalable and reliable email handling.

Step 5: Add some templates.

Next is to add some emails into the emails folder. I refered emails from the React Email Demo Page.
I will pick the Welcome Email as a sample.

import { Body, Button, Column, Container, Head, Heading, Html, Img, Link, Preview, Row, Section, Text, Tailwind, } from "@react-email/components";

interface WelcomeEmailProps {
  steps?: {
    id: number;
    Description: React.ReactNode;
  }[];
  links?: string[];
}

const baseUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "";

const PropDefaults: WelcomeEmailProps = {
  steps: [
    {
      id: 1,
      Description: (
        <li className="mb-20" key={1} >
          <strong>Deploy your first project.</strong>{" "}
          < Link > Connect to Git, choose a template</ Link >, or manually deploy a
          project you've been working on locally.
        </li>
      ),
    },
  ],
  links: ["Visit the forums", "Read the docs", "Contact an expert"],
};

export const Welcome = ({
  steps = PropDefaults.steps,
  links = PropDefaults.links,
}: WelcomeEmailProps) => {
  return (
    <Html>
      <Head />
      <Preview> Netlify Welcome </Preview>
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: { brand: "#2250f4", offwhite: "#fafbfb" },
              spacing: { 0: "0px", 20: "20px", 45: "45px" },
            },
          },
        }
        }
      >
        <Body className="bg-offwhite text-base font-sans" >
          <Img
            src={`${baseUrl}/static/netlify-logo.png`}
            width="184"
            height="75"
            alt="Netlify"
            className="mx-auto my-20"
          />
          <Container className="bg-white p-45" >
            <Heading className="text-center my-0 leading-8" >
              Welcome to Netlify
            </Heading>

            < Section >
              <Row>
                <Text className="text-base" >
                  Congratulations! You're joining over 3 million developers
                  around the world who use Netlify to build and ship sites,
                  stores, and apps.
                </Text>

                < Text className="text-base" > Here's how to get started:</Text>
              </Row>
            </Section>

            <ul> {steps?.map(({ Description }) => Description)}</ul>

            <Section className="text-center" >
              <Button className="bg-brand text-white rounded-lg py-3 px-[18px]" >
                Go to your dashboard
              </Button>
            </Section>

            <Section className="mt-45" >
              <Row>
                {links?.map((link) => (
                  <Column key={link} >
                    <Link className="text-black underline font-bold" >
                      {link}
                    </Link>{" "}
                    < span className="text-green-500" >→</span>
                  </Column>
                ))}
              </Row>
            </Section>
          </Container>

          < Container className="mt-20" >
            <Section>
              <Row>
                <Column className="text-right px-20" >
                  <Link>Unsubscribe </Link>
                </Column>
                < Column className="text-left" >
                  <Link>Manage Preferences </Link>
                </Column>
              </Row>
            </Section>
            < Text className="text-center text-gray-400 mb-45" >
              Netlify, 44 Montgomery Street, Suite 300 San Francisco, CA
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export default Welcome;
Enter fullscreen mode Exit fullscreen mode

Export the email template from the emails folder. This template will be registered as a props of the sendEmail function

...
export * from "./welcome-email"
...
Enter fullscreen mode Exit fullscreen mode

Step 6: Try it out.

Invoke your sendEmail function in your project as so, you can set to: as your personal email to try it out.

You should see available email templates in the autocomplete.

Showing autocomplete working in code editor

import {sendEmail} from "@/modules/email";

await sendEmail({
  payload: {
    subject: "Please reply to me now",
    to: "example@gmail.com",
  },
  template: "Welcome",
  templateProps: {
    steps: [
      {
        id: 1,
        Description: "Some description",
      },
    ],
  },
});
Enter fullscreen mode Exit fullscreen mode

How to preview your email templates ?

Resend provides a neat way to preview your email templates. Head over to your package.json.
Add a new script email dev --dir <-directory of your email templates->

...
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "email-dev": "email dev --dir src/modules/email/emails"
},
...
Enter fullscreen mode Exit fullscreen mode

Running npm run email-dev should give you a neat previewer like below. The email in the previewer should reflect the changes that you made within the email folder.

Resend Preview

Automatic setup

To automate the setup above of React Email & Resend to your project. You can utilize c0nfig to automate the process.

Initialise c0nfig 

npx k0nfig@latest init
Enter fullscreen mode Exit fullscreen mode

Run email command 

npx k0nfig@latest run https://c0nfig.dev/cli/email-setup.json
Enter fullscreen mode Exit fullscreen mode

Add in more email templates 

npx k0nfig@latest run https://c0nfig.dev/cli/email-add.json
Enter fullscreen mode Exit fullscreen mode

Showing autocomplete working in code editor

Conclusion

By integrating Resend and React Email into your React application, you can overcome the common challenges of creating email templates—such as inconsistent rendering across clients and limited CSS support. This approach allows you to leverage your React skills to build responsive and maintainable email templates efficiently. The sendEmail function provides a type-safe, reusable way to send emails with dynamic templates, enhancing developer experience and code reliability. Additionally, using tools like c0nfig can automate and streamline the setup process, saving you time and effort. With these tools, you can focus on delivering great features to your users without getting bogged down by the complexities of email template development.

Top comments (2)

Collapse
 
andrianv5 profile image
Andrian •

Can I setup the Postcards designmodo.com/postcards/ to work in the same way?

Collapse
 
blaise_tiong profile image
Blaise Tiong •

Hey Andrian, I just checked from designmodo.com/postcards/. Resend works with sending html as well by passing the html string via the html props with you are able to export via designmodo.com/postcards/. Depending on your use case you will most likely need some kind of templating engine (eg. mustache) to inject dynamic values within your html template. Hope this helps.

const templateKey = 'Template1' 
const htmlTemplates = {
    'Template1': `Html template from designmodo.com/postcards/`
    ...More templates here
  }

  return resend.emails.send(
    {
      ...payload,
      from: SENDER,      
      html: htmlTemplates[templateKey]
    },
    options
  );
Enter fullscreen mode Exit fullscreen mode

Read next

vikas76 profile image

How to Stay Updated with the Latest Machine Learning Trends?

Vikas76 -

alexr profile image

💡Only 20% of Developers are Happy at Work?

Alex (The Engineering Bolt) ⚡ -

thevediwho profile image

LazyVStack vs List in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi -

griseduardo profile image

Testes e2e em React com Cypress

Eduardo Henrique Gris -