Back to DocumentationEmail System
Email Communications

Email System

Complete guide to email system with Resend, React Email templates, queue management, and delivery tracking in NextReady.

React email templates
Queue & retry system
Email preview tools

Email System Features

Resend Integration
Reliable email delivery with modern API
  • High deliverability rates
  • Built-in analytics and tracking
  • Webhook support for events
  • Domain authentication (SPF/DKIM)
React Email Templates
Beautiful, responsive email templates with React
  • React-based template system
  • TypeScript support
  • Responsive design patterns
  • Component reusability
Email Queue System
Reliable email delivery with retry logic
  • Background job processing
  • Automatic retry on failure
  • Scheduled email delivery
  • Queue monitoring and metrics
Development Tools
Preview and test emails during development
  • Email preview in browser
  • Template testing tools
  • HTML/Plain text generation
  • Email debugging utilities

Implementation Guide

React Email Template
Create beautiful, responsive email templates with React components
// emails/welcome-email.tsx
import {
  Html,
  Head,
  Body,
  Container,
  Section,
  Heading,
  Text,
  Button,
  Hr,
  Img,
} from '@react-email/components';

interface WelcomeEmailProps {
  firstName?: string;
  loginUrl?: string;
}

export default function WelcomeEmail({
  firstName = 'there',
  loginUrl = 'http://localhost:3000/signin'
}: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={main}>
        <Container style={container}>
          <Section style={box}>
            <Img
              src="https://your-domain.com/logo.png"
              width="48"
              height="48"
              alt="NextReady"
              style={logo}
            />
            
            <Hr style={hr} />
            
            <Heading style={h1}>Welcome to NextReady!</Heading>
            
            <Text style={text}>
              Hi {firstName},
            </Text>
            
            <Text style={text}>
              Welcome to NextReady! We're excited to have you on board. 
              Your account has been successfully created and you can now 
              start building amazing applications.
            </Text>
            
            <Button style={button} href={loginUrl}>
              Sign In to Your Account
            </Button>
            
            <Text style={text}>
              If you have any questions, feel free to reply to this email 
              or contact our support team.
            </Text>
            
            <Text style={text}>
              Best regards,<br />
              The NextReady Team
            </Text>
            
            <Hr style={hr} />
            
            <Text style={footer}>
              If you didn't create an account, you can safely ignore this email.
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

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

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

const box = {
  padding: '0 48px',
};

const hr = {
  borderColor: '#e6ebf1',
  margin: '20px 0',
};

const logo = {
  margin: '0 auto',
};

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

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

const button = {
  backgroundColor: '#656ee8',
  borderRadius: '5px',
  color: '#fff',
  display: 'inline-block',
  fontSize: '16px',
  fontWeight: 'bold',
  lineHeight: '50px',
  textAlign: 'center' as const,
  textDecoration: 'none',
  width: '100%',
};

const footer = {
  color: '#8898aa',
  fontSize: '12px',
  lineHeight: '16px',
};

Configuration & Setup

Environment Variables
Required environment variables for email system
RESEND_API_KEYRequired

Resend API key for sending emails

re_AbCdEfGh_IjKlMnOpQrStUvWxYz123456789
EMAIL_FROMRequired

Default sender email address

NextReady <noreply@yourdomain.com>
EMAIL_REPLY_TOOptional

Reply-to email address

support@yourdomain.com
Resend Setup Guide
Steps to configure Resend for email delivery
1

Create Resend Account

Sign up at resend.com and verify your account

2

Add Your Domain

Add and verify your sending domain with DNS records

3

Generate API Key

Create an API key with sending permissions

4

Configure Environment

Add RESEND_API_KEY and EMAIL_FROM to your environment variables

Best Practices & Tips

📧 Email System Ready!

Your email system is configured and ready to send beautiful, reliable emails with queue processing and retry logic.

CustomizationAutomation Tools