Next.js + Resend Tutorial: Email Setup and Testing

Hi, this is Hoda!

I recently built an authentication system using Next.js + Resend. This is partly a note to my future self, so I’m putting together how I set it up here.

What is Resend?

In short, Resend is "an email-sending API built for developers." Compared to traditional email-sending services, it’s designed to make it much simpler for developers to add email functionality to modern applications — web apps, mobile apps, and so on.

Resend supports a wide range of languages and frameworks, so you can get started right away in environments like:

• JavaScript/TypeScript: Node.js, Next.js, React, Express, and more
• Other languages: Python, PHP (Laravel), Ruby (Rails), Go, Rust, Elixir, Java, .NET, and more

What you can do with Resend

Resend isn’t just for sending email — it comes with some genuinely useful features for development.

• Visibility and management: You can check the detailed status of every email you’ve sent (sent, opened, clicked, bounced, etc.) right from the dashboard.
• Domain deliverability management: Authenticate your own domain so your emails reliably land in the recipient’s inbox.
• React-based templates: You can build your email’s HTML using React components, which makes it a natural fit for frontend developers.
• Team sharing: You can share the content of a sent email with teammates as a public link that’s viewable without authentication for 48 hours.

The basic steps to get started

Here’s the general flow for adding Resend to a project.

1. Prerequisites

First, create an account on the official site and take care of two things:

• Create an API key: Issue an authentication key so your application can call Resend.
• Verify a domain: Set things up so you can send email from a domain you own.

2. Install the SDK

For a Node.js environment, for example, install the SDK with:

npm install resend

3. The basic implementation

The simplest possible send (for something like Next.js) looks like this. Set your API key as an environment variable, then just call the resend.emails.send method.

import { Resend } from 'resend';

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

await resend.emails.send({
  from: 'you@yourdomain.com',
  to: 'recipient@example.com',
  subject: 'Hello World',
  html: '<p>This is my first email from Resend!</p>'
});

A “test sending” tip worth knowing early on

If you send repeatedly to real email addresses during development, your domain’s reputation can take a hit, which raises the risk of your emails getting flagged as spam down the line.

To avoid that, Resend provides dedicated test addresses that let you simulate different scenarios without hurting your domain’s reputation.

• Test a successful send: send to delivered@resend.dev.
• Test a bounce: send to bounced@resend.dev.
• Test being marked as spam: send to complained@resend.dev.

Using these lets you develop safely without polluting your production environment.

If I had to describe Resend in one image, it’s like a smart international shipping counter. You don’t need to know the old, complicated procedures (configuring a mail server yourself) — you just hand over the address and the message, and Resend takes care of routing it reliably, while also telling you in real time exactly where your package is.

Adding Resend to a Next.js project

1. Prerequisites

Before you start implementing anything, take care of two things in the Resend dashboard:

• Create an API key: get the key your app will use to authenticate.
• Verify a domain: register and verify the domain you’ll be sending from.

By the way, even the free plan lets you send 3,000 transactional emails a month, so it’s more than enough for a small project.

2. Install the SDK

First, run the following command in your project’s root directory to install the Resend Node.js SDK:

npm install resend

3. Create an email template

What makes Resend stand out is that you can use React components directly as your email templates. For example, create a file called components/email-template.tsx with something like this:

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

4. Implement the send logic (API Route)

Next, create an API endpoint to actually send the email. If you’re using the App Router, create it at app/api/send/route.ts (for the Pages Router, use pages/api/send.ts).

Here, we initialize Resend using the RESEND_API_KEY environment variable and send an email using the template we just created.

import { EmailTemplate } from '../../../components/EmailTemplate';
import { Resend } from 'resend';

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

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>', // your verified domain
      to: ['delivered@resend.dev'],       // recipient
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }), // using the React template
    });

    if (error) {
      return Response.json({ error }, { status: 500 });
    }

    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

5. Check the send status and test it

You can check in detail how an email sent from Next.js actually turned out, right from the Resend dashboard.

• Track email events: follow the log to see whether a sent email was “sent,” “delivered,” or “bounced” (rejected by the recipient’s server).
• Use the test addresses: during development, it’s a good idea to check behavior using the test addresses below instead of your own email address.
  • Success test: send to delivered@resend.dev to see how things behave on a successful delivery.
  • Bounce test: send to bounced@resend.dev to test how your error handling behaves.

If I had to describe setting this up in Next.js, it’s like running a dedicated delivery line out the back of your store.

You write the letter using a tool you already know well — React components — and feed it into Resend’s dedicated delivery line (the SDK/API). From there, it’s delivered automatically anywhere in the world, and you get a real-time receipt confirming it arrived safely. That’s the kind of smooth system you end up with.