How to Set Up Resend Email in Your Next.js SaaS

Every SaaS needs transactional email — login links, verification emails, password resets, notifications. Resend is the modern developer-friendly email API that makes this painless.

In this guide, we'll set up Resend in a Next.js app from scratch, including magic link authentication with NextAuth.

Why Resend?

• Developer-first — Clean API, great docs, modern SDKs
• Free tier — 3,000 emails/month on the free plan, more than enough for most early-stage SaaS products
• React Email support — Build email templates with React components
• Fast delivery — Emails arrive in seconds, not minutes
• Simple setup — You can be sending emails in under 10 minutes

Step 1: Create a Resend Account & Get Your API Key

1. Sign up at resend.com
2. Go to API Keys in the dashboard
3. Create a new API key
4. Copy it — you'll need it in the next step

Step 2: Add the Environment Variable

Add your Resend API key to your .env.local file:

RESEND_API_KEY=re_your_api_key_here

That's the only environment variable Resend needs. If you're using NextUpKit, this is already defined in the .env.example file — just fill in your key.

Step 3: Install the Resend SDK

npm install resend

Step 4: Create an Email Utility

Create a reusable function for sending emails throughout your app:

// src/lib/email.ts
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

const FROM_EMAIL = "noreply@yourdomain.com";

export async function sendEmail({
  to,
  subject,
  html,
  from,
}: {
  to: string | string[];
  subject: string;
  html: string;
  from?: string;
}) {
  try {
    const data = await resend.emails.send({
      from: from || FROM_EMAIL,
      to,
      subject,
      html,
    });

    return { success: true, data };
  } catch (error) {
    console.error("Failed to send email:", error);
    return { success: false, error };
  }
}

Update the FROM_EMAIL to match your verified domain in Resend. During development, you can use Resend's test address onboarding@resend.dev to send emails to your own address.

Step 5: Set Up Magic Link Authentication with NextAuth

This is where Resend really shines — passwordless authentication via email magic links. Here's how to wire it up with NextAuth:

// In your NextAuth configuration (src/lib/auth.ts)
import { Resend } from "resend";
import EmailProvider from "next-auth/providers/email";

const resend = new Resend(process.env.RESEND_API_KEY!);

const emailProvider = EmailProvider({
  from: FROM_EMAIL,
  sendVerificationRequest: async ({ identifier: email, url, provider }) => {
    try {
      await resend.emails.send({
        from: provider.from!,
        to: email,
        subject: "Login Link to your Account",
        html: `<p>Click the link below to sign in to your account:</p>
               <p><a href="${url}">Sign in</a></p>
               <p>If you didn't request this, you can safely ignore this email.</p>`,
      });
    } catch (error) {
      console.error("Failed to send verification email:", error);
      throw new Error("Failed to send verification email");
    }
  },
});

Add this provider to your NextAuth providers array alongside any OAuth providers (Google, Facebook, etc.).

When a user enters their email on the sign-in page, NextAuth calls sendVerificationRequest, which uses Resend to deliver a magic link. The user clicks it, and they're authenticated. No passwords.

Step 6: Verify Your Domain (Production)

For production, you need to verify your domain with Resend:

1. Go to Domains in the Resend dashboard
2. Add your domain (e.g., yourdomain.com)
3. Add the DNS records Resend provides (SPF, DKIM, DMARC)
4. Wait for verification (usually a few minutes)

Once verified, emails from anything@yourdomain.com will have proper deliverability.

Sending Other Transactional Emails

Once set up, you can use your sendEmail() utility anywhere in your app:

// Welcome email after signup
await sendEmail({
  to: user.email,
  subject: "Welcome to MyApp!",
  html: `<h1>Welcome, ${user.name}!</h1>
         <p>Thanks for signing up. Here's how to get started...</p>`,
});

// Payment confirmation
await sendEmail({
  to: user.email,
  subject: "Payment Confirmed",
  html: `<p>Your payment of $${amount} has been processed.</p>`,
});

// Usage alert
await sendEmail({
  to: user.email,
  subject: "You've reached 80% of your plan limit",
  html: `<p>Consider upgrading to continue using all features.</p>`,
});

The Faster Way: Use NextUpKit

If you don't want to set all of this up manually, NextUpKit comes with Resend preconfigured:

• Email utility (src/lib/email.ts) — Ready to use sendEmail() function
• NextAuth integration — Magic link authentication already wired up with Resend
• Environment variables — RESEND_API_KEY defined in .env.example
• FROM_EMAIL constant — Configured in src/lib/consts.ts

Just clone the repo, add your Resend API key, and you're sending emails:

git clone https://github.com/nextupkit/nextupkit.git
cd nextupkit
npm install
# Add RESEND_API_KEY to .env.local
npm run dev

No configuration, no wiring things together. It just works.

Common Pitfalls

1. "From" address must match a verified domain — In production, you can't send from any arbitrary email address. Verify your domain first.
2. Don't expose your API key — RESEND_API_KEY should NOT start with NEXT_PUBLIC_. It's a server-side secret.
3. Check spam folders during testing — If you haven't verified your domain yet, test emails might land in spam.
4. Rate limits — Resend's free tier allows 3,000 emails/month and 100/day. More than enough for getting started, but plan for growth.

Wrapping Up

Resend makes transactional email simple. Combined with NextAuth for magic link authentication, you get a complete, passwordless auth system in your Next.js app.

If you want all of this out of the box — plus payments, database, analytics, and more — check out NextUpKit. It's free and open source.