How to Add Resend (Email) to Next.js (2026 Step-by-Step Guide)
Resend is the developer-first transactional email API — same job as SendGrid or Mailgun, but with React Email templates and a cleaner API. This guide takes you from zero to sending verified production email in 30 minutes: domain setup, template authoring, the Route Handler, error handling, and the deliverability checklist.
Why Resend over SendGrid / Mailgun / SES
Resend was built for developers. The API is clean (HTTP + JSON), the dashboard is fast, and React Email templates let you write emails in JSX with full TypeScript types. SendGrid and Mailgun work fine but feel like 2014; SES is cheapest at scale but requires more setup. For a Next.js app under ~100k emails/month, Resend is the path of least resistance.
Free tier: 3,000 emails/month, 100/day. Paid starts at $20/month for 50,000 emails. That covers most SaaS until you're a real business — at which point you'll consider SES for cost.
Step 1 — Verify your sending domain
Email goes to spam if your domain isn't authenticated. Resend's dashboard walks you through DKIM, SPF, and DMARC records. You add 3-4 DNS records at your registrar (Cloudflare, Namecheap, GoDaddy), Resend verifies them, you can send from `you@yourdomain.com`.
Use a subdomain like `mail.yourdomain.com` or `send.yourdomain.com` for transactional email — keeps the main domain's reputation isolated from any future deliverability issues.
Don't skip this. Sending from `onboarding@resend.dev` (the default unverified domain) works for testing but every production email will land in spam.
Step 2 — Install the SDK and add the API key
Resend dashboard → API keys → Create. Two scopes: 'Sending access' (production) or 'Full access' (also lets you manage domains via API). For your `.env.local`, sending access is enough.
`npm i resend`. Add `RESEND_API_KEY=re_xxx` to `.env.local` and to Vercel env vars. The SDK is tiny (~5KB) and works on both Edge and Node runtimes.
Step 3 — Author templates with React Email
`npm i @react-email/components`. Create `emails/welcome.tsx` exporting a React component that renders the email. React Email components (`<Html>`, `<Container>`, `<Section>`, `<Button>`) compile to bulletproof email HTML — tables and inline styles — so it renders in Outlook, Gmail, Apple Mail, etc.
Preview templates locally: `npx react-email dev` opens a browser at localhost:3000 showing all your templates with hot reload. Way better than the test-email-and-pray loop.
Pass props from your API route to the component. The component is rendered to an HTML string with `render()` from `@react-email/render`, then passed to Resend's `html` field.
Step 4 — The Route Handler
Create `app/api/send-email/route.ts`. Validate the input with Zod (recipient email, template name, dynamic props). Call `resend.emails.send({ from: 'you@yourdomain.com', to, subject, html: render(<Template {...props} />) })`. Return the message ID on success so you can correlate with webhook events later.
Errors: Resend returns 4xx for bad input (invalid recipient, missing domain verification, blocked recipient). Log these. 5xx is rare but should be retried via a queue if email is critical.
Never expose the route to anonymous users. Either auth-gate it (only signed-in users can trigger their own emails) or rate-limit by IP + recipient combination.
Step 5 — Webhooks for delivery + open tracking
Resend can POST events (delivered, bounced, complained, opened, clicked) to a webhook endpoint. Create `app/api/webhooks/resend/route.ts` that verifies the Svix signature (Resend uses Svix for webhook signing), then writes events to your DB.
Track at minimum: bounces (so you stop emailing dead addresses) and complaints (so you immediately suppress that recipient — repeated complaints hurt your sender reputation domain-wide).
Deliverability checklist
From address matches the verified domain. Subject lines under 60 chars, no all-caps, no spam triggers ('FREE!!!'). HTML + plain-text fallback (Resend generates the plain-text automatically if you pass HTML only).
Send volume ramp: start with low daily volume (< 100) and scale gradually if you're a new domain. Sudden 10k email blasts from a cold domain look like spam to ISPs.
Honor unsubscribes immediately. Maintain a suppression list. Even transactional email needs an opt-out link in 2026 (CAN-SPAM, GDPR, CASL — all require it).
How to do it
- 1
Sign up + verify your domain
resend.com → add domain → paste DNS records (SPF, DKIM, DMARC) at your registrar. Wait 5 minutes for verification. Without this, every email lands in spam.
- 2
Install the SDK
npm i resend @react-email/components. Add RESEND_API_KEY to .env.local and Vercel env vars.
- 3
Author templates with React Email
Create emails/*.tsx components using <Html><Container><Section> primitives. Preview locally with npx react-email dev.
- 4
Build app/api/send-email/route.ts
Validate input with Zod, render the template with render(<Template props />), call resend.emails.send(). Return the message ID.
- 5
Set up webhooks
Resend dashboard → webhooks → point at /api/webhooks/resend. Verify with Svix signature. Track bounces + complaints in your DB.
- 6
Test end-to-end
Trigger a real email from a test account. Verify it landed in inbox (not spam). Check the webhook fired. Click the unsubscribe link.
Frequently asked questions
Resend vs SendGrid for a SaaS?
Resend if you're a small team prioritizing DX and don't have an existing SendGrid setup. SendGrid if you need advanced features (marketing campaigns, complex automations) or you're already on it. For pure transactional email, Resend's API + React Email templates are a clean win.
Do I need a separate domain for transactional email?
No, but a subdomain (mail.yourdomain.com) is the best practice. Isolates your main domain's reputation from email-specific issues and lets you send from multiple subdomains (marketing.yourdomain.com vs notifications.yourdomain.com) with separate reputation scores.
Should I use React Email or raw HTML strings?
React Email. The cross-client compatibility nightmare of email HTML is solved by React Email's primitives — they emit tables and inline styles that render correctly in Outlook 2007 through Apple Mail 2026. Hand-rolled HTML works in your testing then breaks in some users' Outlook.
What about cost at scale?
Past ~500k emails/month, AWS SES is dramatically cheaper ($0.10 per 1000 emails vs Resend's effective $0.40 per 1000 on the Pro plan). The migration is straightforward — same SMTP/API patterns. For < 100k emails/month, Resend's DX gain outweighs the cost.
Ready to build?
Try InBuild for free — describe what you want, get a complete site in 30 seconds, export the code anytime.
Start freeMore guides
The Ultimate Guide to AI Website Builders (2026)
How AI website builders work, what they're good at, where they fall short, and how to pick one — Lovable, v0, Bolt, Replit, InBuild compared with honest tradeoffs.
ReadTutorialThe Complete Guide to SaaS Landing Pages (2026)
Anatomy of a SaaS landing page that converts: hero, social proof, features, pricing, FAQ. What every section does, what good looks like, and how to build it in 30 seconds.
Read