Send Emails with Resend
React Email templates, attachments, batch sending, and delivery tracking
What You’ll Build
After following this guide, you will have a working implementation of send emails with resend in your project. Send beautiful transactional emails using Resend (from the creators of React Email). Build email templates with React components, send them via a simple API, track delivery status, and handle bounces. Free tier: 3,000 emails/month.
Use Cases & Problems Solved
- Send transactional emails reliably without landing in spam folders
- Set up notification systems that scale with your user base
- Avoid building email delivery infrastructure from scratch
Prerequisites
- Resend account with verified domain
- React knowledge
Step-by-Step Implementation
Install Resend and React Email
The following snippet shows how to install resend and react email. Copy this into your project and adjust the values for your environment.
npm install resend @react-email/componentsCreate email template and send
The following snippet shows how to create email template and send. Copy this into your project and adjust the values for your environment.
// emails/WelcomeEmail.tsx
import { Html, Head, Body, Container, Heading, Text, Button } from '@react-email/components';
export function WelcomeEmail({ name, loginUrl }: { name: string; loginUrl: string }) {
return (
<Html>
<Head />
<Body style={{ fontFamily: 'sans-serif', padding: '40px' }}>
<Container>
<Heading>Welcome, {name}!</Heading>
<Text>Thanks for signing up. Click below to get started.</Text>
<Button href={loginUrl} style={{ background: '#000', color: '#fff', padding: '12px 24px' }}>
Go to Dashboard
</Button>
</Container>
</Body>
</Html>
);
}
// Send the email
import { Resend } from 'resend';
import { WelcomeEmail } from './emails/WelcomeEmail';
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: 'onboarding@yourdomain.com',
to: 'user@example.com',
subject: 'Welcome to Our App!',
react: <WelcomeEmail name="Alice" loginUrl="https://app.com/login" />,
});⚠️ Don’t Do This
❌ Sending emails synchronously in the request handler
app.post('/signup', async (req, res) => {
const user = await createUser(req.body);
await resend.emails.send({ ... }); // 1-3 seconds delay!
res.json(user); // User waits for email to send
});✅ Queue emails for background sending
app.post('/signup', async (req, res) => {
const user = await createUser(req.body);
await emailQueue.add('welcome', { userId: user.id }); // Instant!
res.json(user); // Response in ~100ms
});Testing
Verify your implementation with these tests:
// __tests__/send-emails-with-resend.test.ts
import { describe, it, expect } from 'vitest';
describe('Send Emails with Resend', () => {
it('should initialize without errors', () => {
// Test that the setup completes successfully
expect(() => setup()).not.toThrow();
});
it('should handle the primary use case', async () => {
const result = await execute();
expect(result).toBeDefined();
expect(result.success).toBe(true);
});
it('should handle edge cases', async () => {
// Test with empty/null input
const result = await execute(null);
expect(result.error).toBeDefined();
});
});Verification
# Send a test email:
npx tsx send-welcome.ts
# Check inbox for the welcome email
# Check Resend dashboard for delivery status
# Preview template: npx email dev (opens preview in browser)Related Specs
Email Templates with React Email
Responsive templates, components, preview server, and testing
Email Queue Processing
BullMQ queue for emails, templates, retry logic, and bounce handling