## The Fastest Way to Ship Email in Next.js 16 Password resets, magic links, welcome emails, billing notifications — every SaaS needs email. The question is how quickly you can get it running without introducing infrastructure you will spend the next year maintaining. Resend has become the default choice for Next.js developers. The API is clean, the React Email integration is first class, and the developer experience is genuinely good. This guide covers everything from first install to production using Next.js 16 and the App Router — including React Email templates, Server Actions, API routes, domain verification, webhooks, batch sending, and error handling. All examples use Next.js 16 with TypeScript.

## What Changed in Next.js 16 That Affects This Guide Next.js 16 shipped in October 2025 with a few changes that affect how you work with Server Actions and async APIs. **`params` and `searchParams` are now async** Route params and search params must be awaited before use: ```ts // Next.js 16 — must await const { id } = await params; const { tab } = await searchParams; ``` **`cookies()`, `headers()`, and `draftMode()` are now async** ```ts const cookieStore = await cookies(); const headersList = await headers(); ``` **`middleware.ts` is deprecated — renamed to `proxy.ts`** If you use middleware for auth checks before sending email redirects, rename `middleware.ts` to `proxy.ts` and rename the exported function from `middleware` to `proxy`. Logic stays the same. **Turbopack is now the default bundler** No configuration needed. Development is up to 10x faster for Fast Refresh, and builds are 2 to 5x faster. Nothing changes in how you write code. **Node.js 20.9+ required** Next.js 16 drops support for Node.js 18. Make sure your local environment and hosting platform are on 20.9 or higher.

## Prerequisites Before starting you will need: - A Next.js 16 project using the App Router - Node.js 20.9 or higher - A [Resend account](https://resend.com/signup) — free tier includes 3,000 emails per month, 100 per day - A custom domain you control (required for production sending) To create a new Next.js 16 project: ```bash npx create-next-app@latest ``` The new `create-next-app` in Next.js 16 defaults to App Router, TypeScript, and Tailwind CSS out of the box. To upgrade an existing project: ```bash npx @next/codemod@canary upgrade latest ```

## 1. Install the Resend SDK ```bash npm install resend ``` If you plan to use React Email templates (recommended), install those too: ```bash npm install @react-email/components react-email ```

## 2. Create an API Key Open the [Resend dashboard](https://resend.com/api-keys) and generate an API key for your project. A few things to know: - Resend only shows you the key once. Copy it immediately. - On the free tier you can create one API key. Paid plans support more. - Never expose this key to the browser. It is server only. Store it in your environment variables: ```bash # .env.local RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxx ``` For production on Vercel, add the same variable under your project settings in the Vercel dashboard. Local and production environment variables are completely separate — this catches people often. In Next.js, any environment variable without the `NEXT_PUBLIC_` prefix is automatically server only. Your API key is safe as long as you keep that prefix off.

## 3. Create a Reusable Resend Client Centralizing your Resend client prevents duplicated configuration across your application: ```ts // lib/resend.ts import { Resend } from "resend"; export const resend = new Resend(process.env.RESEND_API_KEY); ``` Import this wherever you need to send email. You do not need to instantiate a new client per file.

## 4. Send Email from an API Route Create a route handler under `app/api/send/route.ts`: ```ts // app/api/send/route.ts import { resend } from "@/lib/resend"; import { NextResponse } from "next/server"; export async function POST() { try { const { data, error } = await resend.emails.send({ from: "Acme ", to: ["delivered@resend.dev"], subject: "Hello world", html: "

Hello from Resend.

", }); if (error) { return NextResponse.json({ error }, { status: 500 }); } return NextResponse.json(data); } catch (error) { return NextResponse.json({ error }, { status: 500 }); } } ``` A few notes on the `from` field: - During development you can use `onboarding@resend.dev` — this is Resend's shared testing domain. - In production you must send from a verified custom domain. - The format is `Name `. The display name is optional but recommended. The `to` field accepts a string or an array of strings. `delivered@resend.dev` is Resend's sink address for testing — emails sent here are accepted but not delivered to a real inbox.

## 5. Send Email from a Server Action Server Actions are the cleaner option when email is triggered by a user interaction like submitting a form. No API route, no fetch request, no JSON serialization. Note that in Next.js 16, if your Server Action needs to access cookies or headers, those calls must be awaited. ```ts // app/actions/send-email.ts "use server"; import { resend } from "@/lib/resend"; export async function sendWelcomeEmail(email: string, name: string) { const { data, error } = await resend.emails.send({ from: "Acme ", to: email, subject: "Welcome to Acme", html: `

Hey ${name}, thanks for signing up.

`, }); if (error) { return { success: false, error }; } return { success: true, id: data?.id }; } ``` Call it from a form in a Server Component: ```tsx // app/signup/page.tsx import { sendWelcomeEmail } from "@/app/actions/send-email"; export default function SignupPage() { return ( ); } ``` The `"use server"` directive ensures Resend is only ever called server side regardless of where you import the function. If you need to invalidate cached data after sending — for example, refreshing a notification count — use the new `refresh()` API in Next.js 16: ```ts "use server"; import { refresh } from "next/cache"; import { resend } from "@/lib/resend"; export async function sendAndRefresh(email: string) { await resend.emails.send({ ... }); refresh(); // refresh uncached dynamic data on the page } ```

## 6. Build Email Templates with React Email Raw HTML strings become painful fast. React Email lets you write email templates as React components and generates email safe HTML behind the scenes — cross client compatible, no inline style headaches. Create a template file: ```tsx // emails/welcome-email.tsx import { Html, Head, Body, Container, Text, Button, Hr, } from "@react-email/components"; import * as React from "react"; interface WelcomeEmailProps { name: string; loginUrl: string; } export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) { return ( Welcome, {name} Your account is ready. Click below to get started.

You received this email because you signed up for Acme. ); } ``` Use it in your send action with the `react` parameter: ```ts // app/actions/send-welcome-email.ts "use server"; import { resend } from "@/lib/resend"; import { WelcomeEmail } from "@/emails/welcome-email"; export async function sendWelcomeEmail(email: string, name: string) { const { data, error } = await resend.emails.send({ from: "Acme ", to: email, subject: `Welcome to Acme, ${name}`, react: WelcomeEmail({ name, loginUrl: "https://yourdomain.com/dashboard" }), }); if (error) { return { success: false, error: error.message }; } return { success: true, id: data?.id }; } ``` One common mistake: pass the component as a called function `WelcomeEmail({ name })`, not as JSX ``. If you get `TypeError: react is not a valid element` this is usually why. Preview templates locally before sending anything real: ```bash npx react-email dev ``` This spins up a preview server at `localhost:3000` where you can see your templates rendered across different email clients.

## 7. Organize Your Email Templates at Scale As your application grows you will have multiple email types. A consistent folder structure makes this manageable: ``` emails/ welcome-email.tsx password-reset.tsx billing-receipt.tsx trial-ending.tsx magic-link.tsx lib/ resend.ts app/ actions/ send-welcome-email.ts send-password-reset.ts send-receipt.ts ``` Keep templates in `emails/` and sending logic in `app/actions/`. Templates should be purely presentational and not import anything from your app layer.

## 8. Verify Your Domain Before Going to Production During development you can send from `onboarding@resend.dev`. In production you cannot — you must verify a custom domain. Go to the [Resend Domains page](https://resend.com/domains), add your domain, and Resend will give you DNS records to add: - **SPF** — a TXT record that authorizes Resend's servers to send on behalf of your domain - **DKIM** — a CNAME record that adds a cryptographic signature to every email so receiving servers can verify it came from you - **DMARC** — recommended TXT record that tells mail servers what to do if SPF or DKIM fails Add these at your DNS provider (Cloudflare, Namecheap, GoDaddy, etc.) and hit Verify in the Resend dashboard. DNS propagation can take anywhere from a few minutes to 48 hours. Without domain verification, Resend will reject production sends and deliverability will be poor. Gmail in particular has become significantly stricter about authentication requirements. Once verified, update your `from` address: ```ts from: "Acme " ``` Start DMARC with a `none` policy while you confirm SPF and DKIM are passing, then move to `quarantine` or `reject`: ``` _dmarc.yourdomain.com TXT "v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com" ```

## 9. Handle Webhooks for Delivery Events This is the part most tutorials skip and the part that matters most in production. Email delivery failures are invisible by default. Resend fires webhook events for: - `email.sent` — accepted by Resend - `email.delivered` — confirmed delivery to the receiving server - `email.bounced` — hard or soft bounce - `email.complained` — recipient marked as spam - `email.opened` — email was opened - `email.clicked` — a link was clicked Create a webhook endpoint: ```ts // app/api/webhooks/resend/route.ts import { NextRequest, NextResponse } from "next/server"; export async function POST(request: NextRequest) { const payload = await request.json(); const { type, data } = payload; switch (type) { case "email.bounced": console.error("Email bounced:", data.to, data.bounce_type); // await markEmailInvalid(data.to); break; case "email.complained": console.error("Spam complaint:", data.to); // await removeFromMailingList(data.to); break; case "email.delivered": console.log("Delivered:", data.email_id); break; default: console.log("Unhandled event:", type); } return NextResponse.json({ received: true }); } ``` Register this URL in your Resend dashboard under Webhooks. Resend webhooks provide at-least-once delivery — an event can fire more than once in rare cases. Use the `svix-id` header as an idempotency key to deduplicate. The free plan supports one webhook endpoint. Pro and Scale plans support up to 10.

## 10. Batch Sending Use the batch API to send multiple emails in a single request: ```ts // app/actions/send-batch-emails.ts "use server"; import { resend } from "@/lib/resend"; import { WelcomeEmail } from "@/emails/welcome-email"; export async function sendBatchWelcomeEmails( users: { email: string; name: string }[] ) { const emails = users.map((user) => ({ from: "Acme ", to: user.email, subject: `Welcome to Acme, ${user.name}`, react: WelcomeEmail({ name: user.name, loginUrl: "https://yourdomain.com/dashboard", }), })); const { data, error } = await resend.batch.send(emails); if (error) { return { success: false, error }; } return { success: true, data }; } ``` This is more efficient than looping and calling `resend.emails.send` per recipient individually.

## 11. Schedule Emails for Future Delivery Pass an ISO 8601 timestamp to `scheduledAt` to send at a specific time: ```ts await resend.emails.send({ from: "Acme ", to: "user@example.com", subject: "Trial ending soon", react: TrialEndingEmail({ name: "Alex" }), scheduledAt: "2026-06-20T09:00:00Z", }); ``` Useful for trial ending reminders, delayed onboarding sequences, and scheduled newsletters.

## 12. Error Handling in Production Wrap all sends in structured error handling. Email failures should never crash a user facing flow — a failed welcome email should not break signup. ```ts // app/actions/send-email.ts "use server"; import { resend } from "@/lib/resend"; import { WelcomeEmail } from "@/emails/welcome-email"; export async function sendWelcomeEmail(email: string, name: string) { try { const { data, error } = await resend.emails.send({ from: "Acme ", to: email, subject: `Welcome, ${name}`, react: WelcomeEmail({ name, loginUrl: "https://yourdomain.com/dashboard" }), }); if (error) { console.error("[resend] send error:", error); return { success: false, error: error.message }; } return { success: true, id: data?.id }; } catch (err) { console.error("[resend] unexpected error:", err); return { success: false, error: "Unexpected error sending email" }; } } ``` Log the `data.id` on success — this is the Resend email ID you can use to look up the send in the dashboard. Note on log retention: Resend retains log data for 1 day on the free plan and 3 days on Pro. If you need longer retention, pipe webhook events into your own database from day one.

## Production Checklist Before going live: - Node.js 20.9 or higher in your local and production environment - Custom domain verified in the Resend dashboard - SPF, DKIM, and DMARC DNS records added and confirmed - `from` address updated to use your verified domain - Webhook endpoint registered for bounce and complaint events - Error handling wrapping every send - Environment variables set in Vercel for production - Tested with `delivered@resend.dev` in development before switching to real addresses - React Email templates previewed locally with `npx react-email dev` - `params` and `searchParams` awaited in any route handlers that also trigger email

## Resend Pricing at a Glance - **Free:** 3,000 emails per month, 100 per day, 1 webhook endpoint, 1 day log retention - **Pro:** $20 per month, 50,000 emails, 10 webhook endpoints, 3 day log retention - **Scale:** $90 per month, 100,000 emails, dedicated IP available as add on at $30 per month - **Enterprise:** Custom pricing, dedicated IP warming, deliverability insights For most early stage SaaS products the free tier is enough to get through initial launch. Pro becomes necessary once you need more than 3,000 emails per month or longer log retention for debugging.

## Wrap Up Resend plus React Email is the standard for email in Next.js apps. The setup is small, the API is clean, and the combination scales well as your email requirements grow. The things most tutorials skip — domain verification, webhooks, error handling — are the things that will save you support tickets and lost signups once real users are involved. Set them up from the start rather than retrofitting later. If you are building a SaaS and want your project management, deployment tracking, and analytics consolidated in one place, check out [AdeptDev](https://adeptdev.io) — free for 7 days.