Transactional Emails in Next.js with Resend & React Email
Build and send transactional emails in Next.js using React Email components and the Resend API, including domain verification and Server Actions.
Transactional email is deceptively easy to get wrong: inconsistent HTML rendering across clients, spam-folder deliverability, and API keys accidentally exposed client-side are all common failure points. React Email plus Resend solves the first problem with real components instead of hand-written markup, and Resend's API handles delivery — but domain setup and Server Action wiring still need to be done correctly.
Step 1: Install React Email and Resend
Step 2: Build an Email Template as a React Component
@react-email/components ships pre-built, cross-client-tested primitives (Button, Section, Container) that compile down to table-based, Outlook-compatible HTML automatically — you write normal React and get email-safe markup for free.
Step 3: Preview Templates Locally
This starts a local dev server (usually on localhost:3000) that renders every template in emails/ with a live preview and hot reload — check layouts across a few different rendered widths before shipping, since inbox clients vary widely.
Step 4: Verify Your Sending Domain
Before sending anything beyond test emails, verify a domain in the Resend dashboard. Add the SPF, DKIM, and DMARC records it provides to your DNS:
Skipping domain verification is the single most common cause of emails landing in spam or failing to deliver at all — an unverified onboarding@resend.dev sender works for testing but shouldn't be used for real transactional traffic.
Step 5: Send the Email from a Server Action
Passing the React element directly to react is enough — Resend's SDK renders it to HTML server-side internally, so there's no separate @react-email/render call needed in your send path. This only works from server-side code (Server Actions, Route Handlers, background jobs); the API key must never reach the browser.
Step 6: Trigger the Email at the Right Moment
Step 7: Handle Delivery Failures Gracefully
Don't let an email failure block the user-facing action it's attached to — log it and continue rather than throwing in the critical path.
Key Takeaways
React Email gives you cross-client-safe email markup written as normal React components instead of hand-rolled table HTML, Resend's SDK renders that component directly with no separate render step, domain verification (SPF/DKIM/DMARC) is mandatory for real deliverability, and sending must always happen from server-side code to keep your API key out of the browser.
