Emails

This boilerplate uses Resend for transactional emails with React Email templates.

Configuration

1. Create a Resend Account

Go to resend.com and create an account
Get your API key from API Keys section
Verify your domain (optional but recommended)

2. Set Environment Variables

Add to your .env.local:

RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=hello@yourdomain.com

Sending Emails

Basic Usage

import { resend } from "@/lib/resend/client";
import { WelcomeEmail } from "@/emails/welcome";

await resend.emails.send({
  from: process.env.RESEND_FROM_EMAIL!,
  to: user.email,
  subject: "Welcome to Our App!",
  react: WelcomeEmail({ name: user.name }),
});

Pre-built Templates

The boilerplate includes these email templates:

Template	Trigger
`welcome.tsx`	User signs up
`password-reset.tsx`	Password reset requested
`payment-success.tsx`	Payment completed

Helper Functions

// src/lib/resend/client.ts
import { sendWelcomeEmail } from "@/lib/resend/client";

// After user signs up
await sendWelcomeEmail({
  email: user.email,
  name: user.name,
});

Creating Email Templates

Email templates are React components in the emails/ folder:

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

interface WelcomeEmailProps {
  name: string;
}

export function WelcomeEmail({ name }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</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.
          </Text>
          <Link href="https://yourdomain.com/dashboard" style={button}>
            Go to Dashboard
          </Link>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: "#f6f9fc",
  fontFamily: "sans-serif",
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "40px",
  borderRadius: "8px",
};

const h1 = {
  color: "#333",
  fontSize: "24px",
};

const text = {
  color: "#666",
  fontSize: "16px",
  lineHeight: "24px",
};

const button = {
  backgroundColor: "#000",
  color: "#fff",
  padding: "12px 24px",
  borderRadius: "6px",
  textDecoration: "none",
  display: "inline-block",
};

export default WelcomeEmail;

Preview Emails Locally

Use the React Email dev server to preview templates:

# Install React Email CLI
npm install -g react-email

# Start preview server
email dev --dir emails

Open http://localhost:3001 to preview your emails.

Best Practices

Always use a verified domain for production
Keep templates simple - email clients have limited CSS support
Test across clients - Gmail, Outlook, Apple Mail render differently
Include plain text fallback for accessibility

Rate Limits

Resend free tier includes:

100 emails/day
3,000 emails/month

For higher limits, upgrade to a paid plan.

Emails

On this page