Transactional Email in Next.js With Resend and React Email

#nextjs #email #typescript #webdev

Every SaaS product needs transactional email: welcome emails, password resets, payment receipts, usage alerts. Resend is the modern choice for developers -- good DX, great deliverability, first-class Next.js integration.

Here's the complete setup.

Why Resend

Developer-first API: Simple, typed SDK with excellent error messages
Email rendering: Works with React Email for templated emails
Deliverability: SPF/DKIM/DMARC configured automatically for custom domains
Free tier: 3,000 emails/month on the free plan
Webhooks: Delivery events for tracking bounces and opens

Setup

npm install resend @react-email/components

Add to .env.local:

RESEND_API_KEY=re_...

The Email Client Singleton

// src/lib/email.ts
import { Resend } from "resend"

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

type SendEmailOptions = {
  to: string | string[]
  subject: string
  react: React.ReactElement
  replyTo?: string
}

export async function sendEmail({ to, subject, react, replyTo }: SendEmailOptions) {
  const { data, error } = await resend.emails.send({
    from: "Atlas <hello@whoffagents.com>",
    to: Array.isArray(to) ? to : [to],
    subject,
    react,
    replyTo,
  })

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

  return data
}

Email Templates With React Email

React Email lets you build email templates as React components:

// src/emails/welcome.tsx
import {
  Html, Head, Body, Container, Section, Text, Button, Hr, Img
} from "@react-email/components"

interface WelcomeEmailProps {
  userName: string
  productName: string
  loginUrl: string
}

export function WelcomeEmail({ userName, productName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "Arial, sans-serif", backgroundColor: "#f4f4f4" }}>
        <Container style={{ maxWidth: "600px", margin: "0 auto", backgroundColor: "#ffffff" }}>
          <Section style={{ padding: "40px 40px 0" }}>
            <Text style={{ fontSize: "24px", fontWeight: "bold", color: "#111" }}>
              Welcome to {productName}
            </Text>
          </Section>

          <Section style={{ padding: "24px 40px" }}>
            <Text style={{ fontSize: "16px", color: "#444", lineHeight: "1.6" }}>
              Hey {userName},
            </Text>
            <Text style={{ fontSize: "16px", color: "#444", lineHeight: "1.6" }}>
              Your account is ready. Here's what to do next.
            </Text>

            <Button
              href={loginUrl}
              style={{
                backgroundColor: "#0070f3",
                color: "#ffffff",
                padding: "12px 24px",
                borderRadius: "6px",
                fontSize: "16px",
                textDecoration: "none",
              }}
            >
              Get Started
            </Button>
          </Section>

          <Hr style={{ borderColor: "#eee", margin: "0 40px" }} />

          <Section style={{ padding: "24px 40px" }}>
            <Text style={{ fontSize: "12px", color: "#999" }}>
              You're receiving this because you signed up for {productName}.
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  )
}

Sending Typed Emails

// src/lib/emails/send-welcome.ts
import { sendEmail } from "@/lib/email"
import { WelcomeEmail } from "@/emails/welcome"

export async function sendWelcomeEmail(user: { name: string; email: string }) {
  return sendEmail({
    to: user.email,
    subject: "Welcome to Whoff Agents",
    react: WelcomeEmail({
      userName: user.name || "there",
      productName: "Whoff Agents",
      loginUrl: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard`,
    }),
  })
}

// Use in your registration flow
async function handleUserCreated(user: User) {
  await sendWelcomeEmail(user)
}

Common Email Types

Payment Receipt

// src/emails/payment-receipt.tsx
export function PaymentReceiptEmail({
  customerName,
  productName,
  amount,
  currency,
  receiptUrl,
}: PaymentReceiptProps) {
  return (
    <Html>
      <Body>
        <Container>
          <Text>Thanks for your purchase, {customerName}.</Text>
          <Text>
            You purchased {productName} for {currency.toUpperCase()} {(amount / 100).toFixed(2)}.
          </Text>
          <Button href={receiptUrl}>View Receipt</Button>
        </Container>
      </Body>
    </Html>
  )
}

Usage Alert

export function UsageAlertEmail({ userName, usagePercent, upgradeUrl }: UsageAlertProps) {
  return (
    <Html>
      <Body>
        <Container>
          <Text>Hey {userName}, you've used {usagePercent}% of your monthly quota.</Text>
          {usagePercent >= 90 && (
            <Text>You're close to your limit. Upgrade to avoid interruption.</Text>
          )}
          <Button href={upgradeUrl}>Upgrade Plan</Button>
        </Container>
      </Body>
    </Html>
  )
}

Password Reset

export function PasswordResetEmail({ resetUrl, expiresIn }: PasswordResetProps) {
  return (
    <Html>
      <Body>
        <Container>
          <Text>You requested a password reset.</Text>
          <Text>This link expires in {expiresIn}.</Text>
          <Button href={resetUrl}>Reset Password</Button>
          <Text style={{ color: "#999", fontSize: "12px" }}>
            If you didn't request this, ignore this email.
          </Text>
        </Container>
      </Body>
    </Html>
  )
}

Previewing Templates Locally

React Email includes a dev server for previewing templates:

// package.json
{
  "scripts": {
    "email:dev": "email dev --dir src/emails"
  }
}

npm run email:dev
# Opens at http://localhost:3000

You can preview every email template with mock data before sending.

Custom Domain Setup

For production deliverability, send from your own domain:

Add your domain in the Resend dashboard
Add the DNS records Resend provides (SPF, DKIM, DMARC)
Update the from field: "Your Name <name@yourdomain.com>"

Without a custom domain, emails come from @resend.dev which affects deliverability.

Tracking Delivery Events

// src/app/api/webhooks/resend/route.ts
export async function POST(req: NextRequest) {
  const payload = await req.json()

  switch (payload.type) {
    case "email.delivered":
      await db.emailLog.update({
        where: { resendId: payload.data.email_id },
        data: { deliveredAt: new Date() },
      })
      break
    case "email.bounced":
      await handleBounce(payload.data.to)
      break
    case "email.complained":
      await handleComplaint(payload.data.to)
      break
  }

  return NextResponse.json({ received: true })
}