Resend Email Guide: Transactional Email for Modern Web Apps
Resend lets you write email templates in React JSX and send them in 5 lines of code. Here is a complete setup guide for Next.js apps, including domain verification, webhooks, and pricing.
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.
You can preview this template locally with npx react-email dev, which starts a local server showing your email rendered in a browser.
// stay current
AI & ML insights, weekly
Practical deep-dives on LLMs, developer tools, and AI engineering. No filler. Unsubscribe any time.
// written byFIG. AUTH-01
530
Mahmudul Haque Qudrati
CEO & ML Engineer
CEO and ML Engineer at Pristren. Builds AI-powered software for teams and writes about machine learning, LLMs, developer tools, and practical AI applications.
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.
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.
Frequently Asked Questions
What is Resend and how does it work for transactional email?
Resend is an email API service built by the React Email team. It allows developers to send transactional emails (welcome emails, password resets, invoices) using a simple API. You write email templates in React JSX using React Email components, render them to HTML, and send via Resend's API. It handles deliverability, logging, and webhooks.
How do I set up Resend with Next.js?
Install the Resend SDK (`npm install resend`), add your API key to `.env`, create a React Email template, and use the Resend client in an API route. Example: `const resend = new Resend(process.env.RESEND_API_KEY); const { data, error } = await resend.emails.send({ from: '...', to: ['...'], subject: '...', html });`
What are the best practices for using Resend in 2026?
Use React Email for template consistency, handle errors gracefully, monitor deliverability via dashboard, batch send for high volume, secure your API key, verify your domain, check spam score, respect rate limits, and test across email clients.
How much does Resend cost?
Resend offers a free tier (3,000 emails/month, 100/day), Starter plan ($20/month, 50,000 emails), Pro plan ($90/month, 250,000 emails), and overage at $1 per 1,000 emails. For most early-stage products, the free tier or Starter plan is sufficient.
Is Resend worth it in 2026 compared to alternatives like Postmark or SendGrid?
Yes, for modern React/Next.js apps. Resend offers the best developer experience with React Email integration, simple pricing, and good deliverability. Postmark is better for high-volume enterprise needs, and SendGrid is more suited for marketing campaigns. For transactional email under 250K/month, Resend is the best choice.
How do I verify my domain with Resend?
In the Resend dashboard, add your domain and follow the DNS setup instructions. You'll need to add SPF, DKIM, and DMARC records provided by Resend. Once verified, you can send from any address at your domain.
Can I use Resend for marketing email campaigns?
Resend is designed for transactional email, not marketing campaigns. It lacks features like list management, segmentation, and analytics for campaigns. For marketing, use dedicated services like Mailchimp or SendGrid.
