How to Send React Email Templates with Resend (Step-by-Step)

If you are building a SaaS app, you'll need to send emails like welcome messages, password resets, and receipts. Instead of hand-writing HTML, you can use React Email to design your templates, and Resend to deliver them reliably.

This guide walks you through sending your first React Email template with Resend inside a Next.js project.

Prerequisites

Before starting, make sure you have:

• A Resend API key
• A verified domain in Resend
• A Next.js project (Pages Router or App Router)

Install Dependencies

Install the Resend SDK:

npm install resend

If you haven't already, also install React Email for building templates:

npm install @react-email/components react react-dom

Create a React Email Template

Inside your project, add a template component. For example:

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export function EmailTemplate({ firstName }: EmailTemplateProps) {
  return (
    <div>
      <h1>Welcome, {firstName}!</h1>
      <p>We're excited to have you on board.</p>
    </div>
  );
}

Send Email with Resend

Depending on your Next.js setup, create an API route.

Using Pages Router (pages/api/send.ts):

import type { NextApiRequest, NextApiResponse } from 'next';
import { EmailTemplate } from '../../components/email-template';
import { Resend } from 'resend';

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

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { data, error } = await resend.emails.send({
    from: 'Acme <onboarding@yourdomain.com>',
    to: ['user@example.com'],
    subject: 'Welcome to Acme',
    react: EmailTemplate({ firstName: 'John' }),
  });

  if (error) {
    return res.status(400).json(error);
  }

  res.status(200).json(data);
};

Using App Router (app/api/send/route.ts):

import { EmailTemplate } from '../../../components/email-template';
import { Resend } from 'resend';

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

export async function POST() {
  const { data, error } = await resend.emails.send({
    from: 'Acme <onboarding@yourdomain.com>',
    to: ['user@example.com'],
    subject: 'Welcome to Acme',
    react: EmailTemplate({ firstName: 'John' }),
  });

  if (error) {
    return Response.json({ error }, { status: 500 });
  }

  return Response.json(data);
}

Test Your Setup

Call the API route and check your inbox. You should see your React Email template delivered through Resend.

If you want to organize multiple templates more efficiently, see our guide on setting up React Email in a monorepo. You can also explore our ready-to-use templates article for more examples.

Final Thoughts

By combining React Email and Resend, you can:

• Write maintainable templates in React.
• Deliver them reliably without dealing with SMTP.
• Scale easily as your SaaS grows.

This simple setup is all you need to get started with production-ready emails in Next.js.

Stay Updated

Subscribe below to get free templates and updates on React Email best practices.