Send emails with Next.js

Use this pre-built prompt to get started faster.

Open in Cursor

Prerequisites

Before you start, you’ll need:

A Resend API key
A verified domain

Prefer watching a video? Check out our video walkthrough below.

Guide

Install

Get the Resend Node.js SDK.

npm install resend

yarn add resend

pnpm add resend

bun add resend

Create an email template

Start by creating your email template on components/email-template.tsx.

components/email-template.tsx

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export function EmailTemplate({ firstName }: EmailTemplateProps) {
  return (
    <div>
      <h1>Welcome, {firstName}!</h1>
    </div>
  );
}

Send email using React

Create a route file under app/api/send/route.ts (or pages/api/send.ts if you’re using Pages Router).Import the React email template and send an email using the react parameter.

import { EmailTemplate } from '../../../components/email-template';
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>',
      to: ['delivered@resend.dev'],
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }),
    });

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

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

import type { NextApiRequest, NextApiResponse } from 'next';
import { EmailTemplate } from '../../components/email-template';
import { Resend } from 'resend';

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

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { data, error } = await resend.emails.send({
    from: 'Acme <onboarding@resend.dev>',
    to: ['delivered@resend.dev'],
    subject: 'Hello world',
    react: EmailTemplate({ firstName: 'John' }),
  });

  if (error) {
    return res.status(400).json(error);
  }

  res.status(200).json(data);
};

Examples

Next.js (TypeScript)

Full-stack Next.js app with TypeScript

Next.js (JavaScript)

Full-stack Next.js app with JavaScript

Attachments

Send emails with file attachments

React Email

Send emails with React Email components

Templates

Send emails using Resend hosted templates

Scheduling

Schedule emails for future delivery

Double Opt-in

Double opt-in subscription flow

Inbound Webhooks

Receive and process inbound emails

Prevent Threading

Prevent email threading on Gmail

Audiences

Manage contacts and audiences

Domains

Create and manage sending domains

Better Auth

Email authentication with Better Auth

Send emails with Node.js

Send emails with Remix

⌘I

​Prerequisites

​Guide

​Examples