Adding support for Next.js 14

A couple days ago, Next.js 14 was released with a lot of improvements.

One of them is the fact that Server Actions is now stable. Another one is the upgrade to the latest React canary, which is stable for frameworks.

We're happy to announce that Resend and React Email are compatible with Next.js 14.

Here's how you can leverage the new Server Actions and App Router to send emails.

Installing the dependencies

Get the latest Resend Node.js SDK (v2.0.0).

npm install resend@latest

Install the latest React Email bundle (v0.0.11).

npm install @react-email/components@latest

Creating an email template

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

This could be a small component like the one below or a full-blown React Email template.

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

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

Using App Router

Create an API file under app/api/send/route.ts.

Import the React email template and send an email using the react parameter.

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

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

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

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

See the full App Router Example on GitHub

Using Server Actions

Alternatively, you can skip the API Route and define a function that runs securely on the server. That's the new developer experience that Server Actions brings to the table.

First, create a page file under app/page.tsx.

Then, create a Server Action by defining a function with the "use server" directive at the top of the function. This will make sure that this piece of code is only ever executed on the server and won't leak your Resend API key to the client.

Import the React email template, and add the logic to send an email using the react parameter.

Now, add a <form> element and call the function on the action attribute.

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

export default async function Page() {
  async function send() {
    'use server';

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

    const { data } = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>',
      to: ['delivered@resend.dev'],
      subject: 'Hello World',
      react: EmailTemplate({ firstName: 'John' }),
    });

    console.log(data);
  }

  return (
    <form action={send}>
      <button type="submit">Send email</button>
    </form>
  );
}

See the full Server Actions Example on GitHub