Why use Resend over SendGrid or Mailgun?

Resend provides 3,000 free emails/month (vs SendGrid's 100/day), React Email integration, 100K emails at $90/month (vs SendGrid $249), SOC 2 compliance, and developer-first experience with sub-7-second setup. Built specifically for modern frameworks like Next.js 15.

What are the limitations of React Email?

React Email cannot render MSO conditional comments needed for Outlook 2016 optimization, Gmail clips emails over 102KB, component overhead adds 15-30% size vs hand-coded HTML, and complex layouts may need post-processing. Works best for modern email clients and mobile devices.

How much does professional email infrastructure actually cost?

Beyond Resend pricing ($20-90/month), budget for email testing tools ($99-399/month for Litmus/Email on Acid), dedicated IPs ($30/month each at scale), email validation ($0.004-0.008 per check), and monitoring ($50-200/month). True cost typically runs 3-4x base API pricing.

Email System

Production email with Resend + React Email - type-safe templates, enterprise deliverability

Overview

The combination of Resend API and React Email components creates the most developer-friendly email platform in 2025, with 422K+ weekly npm downloads and processing millions of daily emails.

Sub-7-second setup with zero configuration
3,000 free emails/month (30x more than SendGrid)
Type-safe React components instead of HTML strings
SOC 2 Type II compliant with GDPR tools
$90/month for 100K emails vs $249 for SendGrid

System Components

Architecture

Resend API: Email delivery service with multi-region infrastructure, SPF/DKIM/DMARC built-in
React Email: Component framework for building type-safe, testable email templates
@react-email/components: 16+ pre-built components (Button, Text, Container, Image)
Next.js API Routes: Server-side email sending with error handling
TypeScript: Compile-time validation for email props and content

Implementation

1. Install Dependencies

# Install Resend + React Email
npm install resend react-email @react-email/components

# Initialize React Email (creates emails/ directory)
npx react-email init

2. Create Email Template

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

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

export default function WelcomeEmail({
  name,
  loginUrl
}: 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 joining. We're excited to have you aboard.
          </Text>
          <Button href={loginUrl} style={button}>
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: '#f6f9fc',
  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
};

const container = {
  backgroundColor: '#ffffff',
  margin: '0 auto',
  padding: '20px 0 48px',
  marginBottom: '64px',
};

const h1 = {
  color: '#333',
  fontSize: '24px',
  fontWeight: 'bold',
  margin: '40px 0',
  padding: '0',
};

const text = {
  color: '#333',
  fontSize: '16px',
  lineHeight: '26px',
};

const button = {
  backgroundColor: '#0070f3',
  borderRadius: '5px',
  color: '#fff',
  fontSize: '16px',
  fontWeight: 'bold',
  textDecoration: 'none',
  textAlign: 'center' as const,
  display: 'block',
  width: '100%',
  padding: '12px',
};

3. Send via Next.js API Route

// app/api/send-welcome/route.ts
import { Resend } from 'resend';
import WelcomeEmail from '@/emails/welcome';

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

export async function POST(req: Request) {
  const { name, email, loginUrl } = await req.json();

  try {
    const { data, error } = await resend.emails.send({
      from: 'onboarding@yourdomain.com',
      to: email,
      subject: 'Welcome to our platform!',
      react: WelcomeEmail({ name, loginUrl }),
    });

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

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

4. Development Preview

# Start React Email preview server with hot reload
npm run email:dev

# Opens http://localhost:3000 with:
# - Live preview of all email templates
# - Mobile/desktop responsive views
# - Real-time updates on file changes
# - Built-in linter for links/images
# - Spam score checker
# - Client compatibility checker

Cost at Scale

Emails/Month	Resend	SendGrid	Mailgun	Amazon SES
3,000	$0 (Free)	$0 (100/day)	No free tier	$0.30
50,000	$20 (Pro)	$20	$90	$5
100,000	$90	$249	$90	$10
1,000,000	$650	Custom	Custom	$100

True Infrastructure Cost

Beyond API pricing, budget for:

• Email testing tools (Litmus/Email on Acid): $99-399/month
• Dedicated IPs for scale: $30/month each
• Email validation services: $0.004-0.008 per validation
• Deliverability monitoring: $50-200/month

Realistic total: 3-4x base API pricing for production infrastructure

What Breaks in Production

Outlook 2016 rendering issues

React Email cannot render MSO conditional comments needed for Outlook optimization. Flexbox doesn't work, padding only on table cells.

Fix: Use table-based layouts, post-process to inject MSO conditionals, or maintain separate templates for enterprise clients.

Gmail 102KB message clipping

React component overhead adds 15-30% size vs hand-coded HTML. Simple emails can unexpectedly exceed Gmail's limit.

Fix: Track component "byte cost" during development, use React Email 4.0 size linter, minimize wrapper divs, compress images.

Multi-region latency for dynamic emails

Email rendering happens in single region before distribution. Real-time data fetching adds latency for global audiences.

Fix: Pre-render email variations, cache at edge, use React Server Components (coming in next version) for 50-70% latency reduction.

Testing complexity and cost

Comprehensive testing across 50+ email clients requires expensive tools. Edge cases only appear in production.

Fix: Budget for Litmus ($99-399/month), build extensive test suite, maintain compatibility matrix, test on real devices.

Production Best Practices

Component Reusability

Build button, header, footer components once. Compose across multiple templates. Track byte cost per component. Use TypeScript interfaces for self-documenting props.

Deliverability Optimization

Configure SPF, DKIM, DMARC records. Use Resend's suppression list. Warm up dedicated IPs gradually. Monitor bounce rates. A/B test subject lines. Avoid spam trigger words.

Batch Processing Optimization

Group recipients by template variation (not arbitrary batching) for 2-3x throughput. Use idempotency keys to prevent duplicates. Batch API supports 100 emails per request.

Error Handling and Monitoring

Implement webhook listeners for delivery events. Log failures with context. Set up alerts for bounce rate spikes. Use Resend's retry mechanisms. Track email metrics in analytics.

How Email System Relates to Other Layers

• Built with Software: Next.js API Routes, React components, TypeScript validation
• Uses Services: Resend ($0-650/mo), Litmus testing ($99-399/mo)
• Delivers Solutions: Transactional emails, marketing campaigns, notifications
• Requires Support: Deliverability monitoring, spam score tracking, client testing