Email Templates

Learn how to create and use React-based email templates with Resend.

Template Structure

Create React components for your email templates:

// components/emails/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Link,
  Preview,
  Text,
} from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
  actionUrl: string;
}

export default function WelcomeEmail({
  name,
  actionUrl,
}: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Our App</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Welcome, {name}!</Heading>
          <Text style={text}>
            Thanks for signing up. We're excited to have you on board.
          </Text>
          <Link href={actionUrl} style={button}>
            Get Started
          </Link>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: "#ffffff",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
  maxWidth: "560px",
};

const h1 = {
  color: "#1a1a1a",
  fontSize: "24px",
  fontWeight: "bold",
  margin: "40px 0",
  padding: "0",
};

const text = {
  color: "#4c4c4c",
  fontSize: "16px",
  lineHeight: "24px",
  margin: "24px 0",
};

const button = {
  backgroundColor: "#000000",
  borderRadius: "4px",
  color: "#ffffff",
  display: "inline-block",
  fontSize: "16px",
  fontWeight: "bold",
  lineHeight: "50px",
  textAlign: "center" as const,
  textDecoration: "none",
  width: "200px",
};

Common Templates

Essential email templates for your application:

Welcome Email

// Send welcome email
const { data, error } = await resend.emails.send({
  from: process.env.RESEND_FROM_EMAIL!,
  to: user.email,
  subject: "Welcome to Our App",
  react: WelcomeEmail({
    name: user.name,
    actionUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/dashboard`,
  }),
});

Password Reset

// Send password reset email
const { data, error } = await resend.emails.send({
  from: process.env.RESEND_FROM_EMAIL!,
  to: user.email,
  subject: "Reset Your Password",
  react: PasswordResetEmail({
    name: user.name,
    resetUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/reset-password?token=${token}`,
  }),
});

Subscription Update

// Send subscription confirmation
const { data, error } = await resend.emails.send({
  from: process.env.RESEND_FROM_EMAIL!,
  to: user.email,
  subject: "Subscription Updated",
  react: SubscriptionEmail({
    name: user.name,
    plan: subscription.plan,
    nextBillingDate: subscription.nextBillingDate,
  }),
});

Testing Templates

Preview and test your email templates:

// pages/api/preview/[template].ts
import WelcomeEmail from "@/components/emails/welcome";
import { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { template } = req.query;

  const templates = {
    welcome: WelcomeEmail({
      name: "John Doe",
      actionUrl: "https://example.com",
    }),
    // Add more templates here
  };

  const html = templates[template as keyof typeof templates];

  if (!html) {
    return res.status(404).send("Template not found");
  }

  return res.send(html);
}

Best Practices

Use responsive design for mobile compatibility
Keep templates simple and focused
Test across different email clients
Include plain text versions
Follow email accessibility guidelines