Resend + Next.js integration

Integration shape

Server-side API call. Next.js server code (Route Handler, Server Action, or webhook handler) calls Resend's SDK with a React Email template + recipient. Resend handles the rest.

Implementation steps

1. Step 1

   Verify your sending domain in Resend

   DNS records: SPF, DKIM, DMARC. Verification typically completes in 5-30 minutes after DNS propagation. Send only from verified domains.

   Gotcha: Sending from unverified domains lands in spam reliably. The verification step is not optional.

2. Step 2

   Install React Email and set up the templates folder

   npm install @react-email/components. Create app/emails/ folder for templates. Each template is a JSX component exporting a function that returns an email body.

   Gotcha: Email HTML is its own world — most CSS does not work. React Email components handle the table-based layout and inline styles that survive Gmail/Outlook/Apple Mail.

3. Step 3

   Wire Resend SDK into Server Actions or Route Handlers

   Import { Resend } from 'resend'. Initialize with API key from env. Call resend.emails.send({ from, to, subject, react: <Template /> }) from server-side code.

   Gotcha: Calling resend.emails.send from client components leaks the API key. Resend calls must be server-side only — Server Actions, Route Handlers, or middleware.

4. Step 4

   Handle send failures gracefully

   Resend returns success/error responses. Log failures to your observability system; do not silently swallow. For critical emails (receipts, password resets), retry on transient failures.

   Gotcha: Not handling failures means customers occasionally do not receive their receipt or reset link. The support cost of debugging silent failures is higher than the cost of retry logic.

5. Step 5

   Listen to webhooks for bounce + complaint events

   Resend webhook events for email.bounced, email.complained, email.delivered. Route to your webhook handler; update the user's subscriptions/preferences to suppress future sends.

   Gotcha: Continuing to send to bounced addresses degrades sender reputation. Suppress on first hard bounce.

6. Step 6

   Separate transactional from marketing

   Transactional sends (receipts, password resets) should not be in the same domain as marketing sends (newsletters, promos). Resend supports separate domains; use them.

   Gotcha: A marketing campaign that hurts reputation should not prevent transactional emails from landing. Domain separation is the firewall.

When NOT to build this integration

If your email volume is under 100/month or your needs are sequence-heavy (drip campaigns, broadcasts), tools like Loops, Customer.io, or Mailchimp work better than Resend + custom code. Resend shines for transactional + simple broadcasts.

Frequently asked

Should I use Resend for marketing emails too?

Resend handles broadcasts but is primarily transactional-focused. For sequence-heavy marketing (drip campaigns, segmentation), Loops or Customer.io has stronger tooling. Many indie SaaS use Resend for transactional + a separate tool for marketing.

How do I avoid the spam folder on Gmail?

SPF + DKIM + DMARC alignment, low complaint rate, consistent sending patterns. Resend's deliverability is good out of the box; most spam issues are content (subject line, link density) or list quality (cold list, low engagement).

Other tool-pair integrations

• Stripe + Supabase integration
• Cal.com + Stripe integration
• Supabase + Vercel deployment pattern
• Stripe + Beehiiv (paid newsletter) integration