Resend Email Guide: Transactional Email for Modern Web Apps

Resend is the best choice for transactional email in a Next.js application. It was built by the React Email team, which means the templating story is excellent: you write email templates in JSX, render them to HTML, and send them via a clean API. For developers already working in React, this is the most natural email workflow available.

What Resend Is

Resend is an email API service designed specifically for developers. It was founded by the same team that built React Email, an open-source library for creating HTML email templates using React components. The two products work together: React Email handles the templating, Resend handles the delivery.

The pitch is simple: email should be easy to build and reliable to deliver. Resend focuses on developer experience over feature breadth. No marketing email campaigns, no contact list management, no analytics beyond the essentials. Just a reliable API for sending transactional email (welcome emails, password resets, invoice receipts, notifications).

React Email: Templates in JSX

React Email provides HTML email-safe React components. Building HTML email has always been painful because email clients (particularly Outlook) use ancient rendering engines that ignore modern CSS. React Email gives you components that render to table-based HTML that works across all email clients.

Install React Email:

npm install @react-email/components react react-dom

Write an email template:

import {
  Html,
  Head,
  Body,
  Container,
  Text,
  Button,
  Heading,
} from "@react-email/components";

interface WelcomeEmailProps {
  userName: string;
  confirmUrl: string;
}

export function WelcomeEmail({ userName, confirmUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "Arial, sans-serif", backgroundColor: "#f4f4f4" }}>
        <Container style={{ maxWidth: "600px", margin: "0 auto", backgroundColor: "#ffffff", padding: "24px" }}>
          <Heading>Welcome, {userName}</Heading>
          <Text>Thanks for signing up. Confirm your email to get started.</Text>
          <Button href={confirmUrl} style={{ backgroundColor: "#000", color: "#fff", padding: "12px 24px" }}>
            Confirm Email
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

You can preview this template locally with npx react-email dev, which starts a local server showing your email rendered in a browser.

Setting Up Resend

Install the Resend SDK:

npm install resend

Add your API key to .env:

RESEND_API_KEY=re_...

Send an email in a Next.js API route:

import { Resend } from "resend";
import { render } from "@react-email/render";
import { WelcomeEmail } from "@/emails/welcome";

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

export async function POST(req: Request) {
  const { userName, userEmail, confirmUrl } = await req.json();

  const html = await render(WelcomeEmail({ userName, confirmUrl }));

  const { data, error } = await resend.emails.send({
    from: "Zlyqor <hello@yourapp.com>",
    to: [userEmail],
    subject: "Welcome to Zlyqor",
    html,
  });

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

  return Response.json({ id: data?.id });
}

That is the complete integration. No SDK initialization ceremony, no complex configuration. Five lines to send an email.

Domain Verification

To send from your own domain (not a Resend test domain), you verify it through the Resend dashboard. Add the DNS records Resend provides (SPF, DKIM, DMARC), and Resend verifies ownership. Once verified, you can send from any address at your domain.

Domain verification is essential for deliverability. Sending from an unverified domain (or using a shared Resend domain in production) increases the chance your emails land in spam.

Email Logs, Webhooks, and Delivery Tracking

Resend's dashboard shows a log of every email sent: delivery status, opens, clicks, bounces, and spam complaints. For debugging email delivery issues, this is invaluable.

Resend supports webhooks for delivery events. You configure a webhook endpoint in the Resend dashboard, and Resend will POST to it when emails are delivered, opened, clicked, bounced, or marked as spam. This lets you update your database with email status:

export async function POST(req: Request) {
  const event = await req.json();

  if (event.type === "email.bounced") {
    await markEmailBounced(event.data.email_id, event.data.to[0]);
  }

  return new Response("ok");
}

Pricing

Resend's free tier includes 3,000 emails per month and 100 emails per day. For early-stage products, this is sufficient. The Starter plan ($20/month) includes 50,000 emails per month. The Pro plan ($90/month) includes 250,000 emails per month. Additional emails are $1 per 1,000.

For context: if your SaaS sends welcome emails, password reset emails, invoice receipts, and weekly digest emails to 1,000 users, you might send 5,000-8,000 emails per month. The free tier covers the first 3,000, and the Starter plan ($20/month) covers everything up to 50,000.

Alternatives Comparison

Postmark is the traditional choice for transactional email. Excellent deliverability, been around since 2010, trusted by large companies. The DX is more traditional (no React Email equivalent in the Postmark ecosystem). Pricing is higher than Resend ($1.50 per 1,000 vs Resend's $1 per 1,000 on overage). Postmark is the right choice if you need battle-tested deliverability and want a vendor with a long track record.

SendGrid handles high-volume transactional and marketing email. More complex setup, more features, designed for scale. If you are sending millions of emails per month, SendGrid is worth evaluating. For most products under 1M emails/month, it is more tool than you need.

Mailgun is an API-first email service with a good developer API. Older DX than Resend, no React Email integration. The free tier was eliminated years ago, which makes it harder to get started than Resend. Mailgun is a reasonable choice if you prefer their infrastructure or have existing familiarity.

When Resend Wins

Resend is the clear choice for:

• Next.js applications (the React Email integration is native)
• Teams already working in React (email templates feel like regular component work)
• New projects that want a working email setup in one afternoon
• Products under 250,000 emails/month where you want simple pricing

For very high volume (10M+ emails/month) or complex marketing automation needs, Resend is not the right tool. For transactional email in a modern React codebase, it is the best available.

Keep Reading

• Next.js App Router Patterns 2026 - where to put email-sending logic in the App Router
• Clerk Auth Guide for Developers - pairing Clerk's auth events with Resend email notifications
• Stripe Integration Guide for Developers - sending invoice and receipt emails from Stripe webhooks

Pristren builds AI-powered software for teams. Zlyqor is our all-in-one workspace - chat, projects, time tracking, AI meeting summaries, and invoicing - in one tool. Try it free.

Best Practices for Resend in 2026

Use React Email for Template Consistency

React Email components handle email client quirks automatically. Always use @react-email/components instead of raw HTML. This ensures your emails render correctly in Outlook, Gmail, and Apple Mail.

Handle Errors Gracefully

Resend's API returns errors for invalid email addresses, rate limits, and authentication failures. Always check the error object and log it. For production, implement a retry mechanism with exponential backoff.

Monitor Deliverability

Use Resend's dashboard to track bounce rates and spam complaints. A bounce rate above 5% indicates list quality issues. Set up webhooks to automatically remove hard bounces from your database.

Batch Sending for High Volume

If you need to send thousands of emails at once, use Resend's batch endpoint. It accepts an array of email objects and sends them efficiently. The batch endpoint is ideal for notifications and digests.

Secure Your API Key

Never expose your Resend API key in client-side code. Use environment variables and server-only API routes. Rotate keys periodically and use separate keys for development and production.

Common Pitfalls and How to Avoid Them

Missing Domain Verification

Sending from an unverified domain leads to poor deliverability. Always verify your domain before sending to real users. Resend provides clear DNS setup instructions.

Overlooking Spam Score

Use tools like Mail-Tester to check your email's spam score before sending. Avoid spammy words, use plain text alternatives, and maintain a good sender reputation.

Ignoring Rate Limits

Resend has rate limits per API key. Check the rate limit headers in API responses and implement backoff. For high-volume sending, contact Resend support to increase limits.

Not Testing Across Clients

Preview your emails in multiple clients using React Email's built-in preview or tools like Litmus. What looks good in Gmail may break in Outlook.

Future of Resend and Transactional Email

Resend continues to evolve. In 2026, expect deeper integrations with popular frameworks, improved analytics, and possibly AI-powered template generation. The trend is toward simpler, developer-first email services that prioritize deliverability and DX over feature bloat.

For most modern web apps, Resend + React Email is the gold standard. It reduces email development time from days to hours and ensures your transactional emails are reliable and professional.