Transactional Email Pattern | Bootspring Docs

Send reliable, well-designed transactional emails using Resend and React Email components.

Overview#

Transactional emails are automated messages triggered by user actions - welcome emails, password resets, order confirmations, and notifications. This pattern covers building a robust email system with React Email for templates and Resend for delivery.

When to use:

Welcome and onboarding emails
Password reset flows
Order and payment confirmations
Account notifications
Activity alerts

Key features:

Resend integration for delivery
React Email for templates
Plain text fallback generation
Email tagging for analytics
Error handling

Code Example#

Email Service Setup#

// lib/email/index.ts
import { Resend } from 'resend'

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

interface SendEmailOptions {
  to: string | string[]
  subject: string
  html: string
  text?: string
  from?: string
  replyTo?: string
  tags?: { name: string; value: string }[]
}

export async function sendEmail(options: SendEmailOptions) {
  const { to, subject, html, text, from, replyTo, tags } = options

  const result = await resend.emails.send({
    from: from ?? `${process.env.EMAIL_FROM_NAME} <${process.env.EMAIL_FROM_ADDRESS}>`,
    to: Array.isArray(to) ? to : [to],
    subject,
    html,
    text: text ?? stripHtml(html),
    reply_to: replyTo,
    tags
  })

  if (result.error) {
    console.error('Email send failed:', result.error)
    throw new Error(`Failed to send email: ${result.error.message}`)
  }

  return result.data
}

function stripHtml(html: string): string {
  return html.replace(/<[^>]*>/g, '').trim()
}

Welcome Email Template#

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

interface WelcomeEmailProps {
  name: string
  loginUrl: string
}

export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</Preview>
      <Body style={main}>
        <Container style={container}>
          <Img
            src={`${process.env.NEXT_PUBLIC_APP_URL}/logo.png`}
            width="150"
            height="50"
            alt="Logo"
          />

          <Heading style={heading}>Welcome, {name}!</Heading>

          <Text style={text}>
            Thank you for joining us. We are excited to have you on board.
          </Text>

          <Section style={buttonContainer}>
            <Button style={button} href={loginUrl}>
              Get Started
            </Button>
          </Section>

          <Text style={footer}>
            If you did not create this account, please ignore this email.
          </Text>
        </Container>
      </Body>
    </Html>
  )
}

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

const container = {
  backgroundColor: '#ffffff',
  margin: '0 auto',
  padding: '40px 20px',
  maxWidth: '600px'
}

const heading = {
  fontSize: '24px',
  fontWeight: '600',
  color: '#1a1a1a',
  margin: '30px 0'
}

const text = {
  fontSize: '16px',
  color: '#4a4a4a',
  lineHeight: '26px'
}

const buttonContainer = {
  textAlign: 'center' as const,
  margin: '30px 0'
}

const button = {
  backgroundColor: '#2563eb',
  borderRadius: '6px',
  color: '#ffffff',
  fontSize: '16px',
  fontWeight: '600',
  padding: '12px 24px',
  textDecoration: 'none'
}

const footer = {
  fontSize: '14px',
  color: '#8a8a8a',
  marginTop: '40px'
}

export default WelcomeEmail

Password Reset Email#

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

interface PasswordResetEmailProps {
  name: string
  resetUrl: string
  expiresIn: string
}

export function PasswordResetEmail({
  name,
  resetUrl,
  expiresIn
}: PasswordResetEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Reset your password</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={heading}>Reset Your Password</Heading>

          <Text style={text}>Hi {name},</Text>

          <Text style={text}>
            We received a request to reset your password. Click the button
            below to choose a new password.
          </Text>

          <Section style={buttonContainer}>
            <Button style={button} href={resetUrl}>
              Reset Password
            </Button>
          </Section>

          <Text style={text}>
            This link will expire in {expiresIn}. If you did not request
            a password reset, you can safely ignore this email.
          </Text>

          <Text style={smallText}>
            If the button does not work, copy and paste this URL into your browser:
            <br />
            {resetUrl}
          </Text>
        </Container>
      </Body>
    </Html>
  )
}

const smallText = {
  fontSize: '12px',
  color: '#8a8a8a',
  marginTop: '30px'
}

// ... other styles same as WelcomeEmail

export default PasswordResetEmail

Email Sending Service#

// lib/email/service.ts
import { render } from '@react-email/render'
import { sendEmail } from '.'
import WelcomeEmail from '@/emails/WelcomeEmail'
import PasswordResetEmail from '@/emails/PasswordResetEmail'

export const emailService = {
  async sendWelcome(to: string, name: string) {
    const loginUrl = `${process.env.NEXT_PUBLIC_APP_URL}/login`

    const html = await render(WelcomeEmail({ name, loginUrl }))

    return sendEmail({
      to,
      subject: 'Welcome to Our Platform!',
      html,
      tags: [{ name: 'category', value: 'welcome' }]
    })
  },

  async sendPasswordReset(to: string, name: string, token: string) {
    const resetUrl = `${process.env.NEXT_PUBLIC_APP_URL}/reset-password?token=${token}`

    const html = await render(
      PasswordResetEmail({ name, resetUrl, expiresIn: '1 hour' })
    )

    return sendEmail({
      to,
      subject: 'Reset Your Password',
      html,
      tags: [{ name: 'category', value: 'password-reset' }]
    })
  }
}

Usage in Server Actions#

// actions/auth.ts
'use server'

import { prisma } from '@/lib/db'
import { emailService } from '@/lib/email/service'
import { generateToken } from '@/lib/tokens'

export async function requestPasswordReset(email: string) {
  const user = await prisma.user.findUnique({
    where: { email }
  })

  if (!user) {
    // Return success even if user not found (security)
    return { success: true }
  }

  const token = await generateToken()

  await prisma.passwordResetToken.create({
    data: {
      userId: user.id,
      token,
      expiresAt: new Date(Date.now() + 60 * 60 * 1000) // 1 hour
    }
  })

  await emailService.sendPasswordReset(
    user.email,
    user.name ?? 'User',
    token
  )

  return { success: true }
}

Email Preview Route (Development)#

// app/api/email-preview/[template]/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { render } from '@react-email/render'
import WelcomeEmail from '@/emails/WelcomeEmail'
import PasswordResetEmail from '@/emails/PasswordResetEmail'

const templates: Record<string, React.ComponentType<any>> = {
  welcome: WelcomeEmail,
  'password-reset': PasswordResetEmail
}

const mockData: Record<string, any> = {
  welcome: {
    name: 'John Doe',
    loginUrl: 'https://example.com/login'
  },
  'password-reset': {
    name: 'John Doe',
    resetUrl: 'https://example.com/reset?token=abc123',
    expiresIn: '1 hour'
  }
}

export async function GET(
  request: NextRequest,
  { params }: { params: { template: string } }
) {
  // Only allow in development
  if (process.env.NODE_ENV !== 'development') {
    return NextResponse.json({ error: 'Not found' }, { status: 404 })
  }

  const Template = templates[params.template]
  const data = mockData[params.template]

  if (!Template || !data) {
    return NextResponse.json({ error: 'Template not found' }, { status: 404 })
  }

  const html = await render(Template(data))

  return new NextResponse(html, {
    headers: { 'Content-Type': 'text/html' }
  })
}

Usage Instructions#

Install dependencies: npm install resend @react-email/components
Configure Resend: Add RESEND_API_KEY to environment variables
Create templates: Build React Email components in emails/ directory
Set up service: Create email service with typed methods
Send emails: Call service methods from server actions or API routes
Preview locally: Run npx email dev for hot-reloading previews

Best Practices#

Use React Email - Type-safe, component-based email templates
Always include plain text - Generate or provide plain text fallbacks
Tag emails - Use tags for analytics and filtering in Resend
Handle errors gracefully - Log failures and notify admins
Preview before sending - Use the email dev server during development
Test with real clients - Verify rendering in Gmail, Outlook, etc.
Set up domain verification - Improve deliverability with SPF/DKIM
Use consistent branding - Create shared style constants

Email Templates - Reusable template components
Email Queues - Background email processing
Email Tracking - Open and click tracking