How to Send Emails from Next.js with Resend
A practical guide to sending transactional emails from Next.js using Resend. Covers API setup, domain verification, templates, and production best practices.
Why Resend over other email providers
Resend was built for developers. The API is clean — one endpoint, one function call. No SMTP configuration, no complex authentication flows, no XML payloads. You install the package, set an API key, and call resend.emails.send(). That's it.
Compared to SendGrid, Mailgun, or AWS SES, Resend has the simplest developer experience. It also has excellent deliverability out of the box and a generous free tier (100 emails/day, 3000/month).
Step 1: Set up Resend
Create an account at resend.com and generate an API key. Add it to your .env.local file as RESEND_API_KEY. Install the package with npm install resend.
For development, you can send emails to your own address without domain verification. For production, you'll need to verify your domain by adding DNS records — a TXT record for SPF and a CNAME for DKIM. This takes about 5 minutes and dramatically improves deliverability.
Step 2: Create a send function
Create a utility function in src/lib/email.ts that initializes the Resend client and exports a sendEmail function. This function takes a subject, HTML content, and an optional recipient (default to your own email for notifications).
Centralizing email sending in one file means you only configure the 'from' address and error handling once. Every form, notification, or automated email in your app calls this same function.
Step 3: Send from an API route or Server Action
In your API route or Server Action, import the sendEmail function and call it with the data from your form. For a contact form, that's the user's name, email, and message. For an order confirmation, it's the order details.
Always send two emails for form submissions: one to yourself (notification that someone submitted a form) and one to the user (confirmation that you received their message). This sets expectations and reduces follow-up emails.
Email HTML templates
Email HTML is stuck in the 1990s — no flexbox, no grid, limited CSS support. The safest approach is inline styles with table layouts. But for simple transactional emails, you can get away with inline styles on divs as long as you keep the layout simple.
Use a max-width container (600px), inline font-family on every text element, and avoid background images. Test in Gmail, Apple Mail, and Outlook. If it looks good in those three, it'll look acceptable everywhere else.
Production checklist
Before going live: verify your sending domain (TXT + CNAME records), set up a subdomain for sending (e.g., notify.yourdomain.com) to protect your main domain's reputation, test emails land in inbox (not spam), and add a fallback for API failures.
Monitor your sending stats in the Resend dashboard. Watch for bounce rates above 2% — that usually means you have invalid email addresses in your list. High spam complaint rates mean your content needs work.
We use this exact setup
Every email from templates.popeki.com — template downloads, project inquiries, newsletter signups — goes through Resend. The setup described in this article is exactly what we run in production.
If you need transactional emails, marketing automation, or any email integration built into your web application, that's something we build regularly. Check out our free templates for working examples, or start a custom project with us.
Need a custom version?
We build it for you.
Custom web applications, business systems, and marketing sites — built to your exact specifications. Projects starting from $2K.