Skip to content
RedwoodSDK
4th April 2025: This is a preview, whilst production-ready, it means some APIs might change

Sending Email

Setting Up Resend

  1. Go to Resend and click on Get Started to create an account.

  2. Once you’ve created an account, you’ll be redirected to a page with instructions for sending your first email.

    Create an API key by clicking on the “Add API Key” button.

    Copy the API and go to your .env file. Add a variable called RESEND_API and paste your key:

    RESEND_API=re_1234567890

    Cloudflare uses a .dev.vars file for environment variables. But, the common practice is to use a .env file. So, we’ve created a symlink for you. Anytime you make a change to the .env file, it will automatically update the .dev.vars file.

    If you’re missing the .dev.vars file, as soon as you run pnpm dev, it will be created for you.

  3. Install the Resend package. Within the Terminal, run:

    Terminal window
    pnpm add resend

Your setup is complete! 🥳 Now, we can send email.

Sending Email

Now, we can send email.

src/app/auth/actions.ts
import { Resend } from "resend";


const resend = new Resend(env.RESEND_API);
const { data, error } = await resend.emails.send({
  from: "Acme <[email protected]>",
  to: email,
  subject: "👋 Hello World",
  text: `Hello World`,
});

When using Resend, you can send text, react, or html emails.

Example: Sending Text Email

const { data, error } = await resend.emails.send({
  from: "Acme <[email protected]>",
  to: email,
  subject: "👋 Hello World",
  text: `Hello World`,
});

Example: Sending React Email

const Email = ({ name }: { name: string }) => {
  return <div>Hello {name}</div>;
};


const { data, error } = await resend.emails.send({
  from: "Acme <[email protected]>",
  to: email,
  subject: "👋 Hello World",
  react: <Email name="John" />,
});

Resend also backs the React Email project. This library includes unstyled components and the Tailwind CSS support. More under Email Templates.

Example: Sending HTML Email

const { data, error } = await resend.emails.send({
  from: "Acme <[email protected]>",
  to: email,
  subject: "👋 Hello World",
  html: "<h1>Hello World</h1>",
});

Test Emails

Resend provides a set of safe email addresses specifically designed for testing, ensuring that you can simulate different email events without affecting your domain’s reputation. Resend Documentation

A lot of developers will use @example.com or @test.com for testing. However, these addresses will often reject messages, leading to bounces. A high bounce rate can negatively impact your sender reputation and affect future deliverability. Therefore, Resend will return a 422 error if you attempt to use these addresses.

Instead, Resend provides the following addresses:

AddressDelivery Event Simulated
[email protected]Email was delivered
[email protected]Email was bounced

Constants File

We recommend creating a constants file to store reusable values. Inside your src/app/shared directory, create a new file called constants.ts.

  • Directorysrc/
    • Directoryapp/
      • Directoryshared/
        • constants.ts

Inside the constants.ts file, add the following:

export const CONSTANTS = Object.freeze({
  FROM_EMAIL: "Acme <[email protected]>",
});

Now, you can use the FROM_EMAIL constant in your code.

import { CONSTANTS } from "~/shared/constants";
...
const { data, error } = await resend.emails.send({
  from: CONSTANTS.FROM_EMAIL,
  to: email,
  subject: "👋 Hello World",
  text: `Hello World`,
});

Further Reading