---
title: "Adding support for Next.js 14"
slug: adding-support-for-nextjs-14
description: "Learn how you can integrate with the new Server Actions and App Router."
created_at: "2023-11-03"
updated_at: "2024-11-28"
image: https://cdn.resend.com/posts/adding-support-for-nextjs-14.jpg
humans: ["zeno-rocha"]
---

<iframe
  width="672"
  height="378"
  src="https://www.youtube.com/embed/UqQxfpTQBaE"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowFullScreen
></iframe>

A couple days ago, [Next.js 14](https://nextjs.org/blog/next-14) was released with a lot of improvements.

One of them is the fact that [Server Actions](https://nextjs.org/docs/app/api-reference/functions/server-actions) is now stable. Another one is the upgrade to the latest React `canary`, which is [stable for frameworks](https://react.dev/blog/2023/05/03/react-canaries).

We're happy to announce that Resend and [React Email](https://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`).

```sh
npm install resend@latest
```

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

```sh
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](https://demo.react.email/preview/github-access-token).

```tsx
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.

```tsx
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](https://github.com/resend/resend-nextjs-app-router-example)**

## 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.

```tsx
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](https://github.com/resend/resend-next-server-actions-example)**