> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sendbaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Send emails with Next.js

> Learn how to send your first email from a Next.js route handler or server action using the Sendbaze SDK.

## Prerequisites

* A Sendbaze [API key](https://docs.sendbaze.com/get-started/create-api-key.md)
* A [verified domain](https://docs.sendbaze.com/get-started/add-domain.md). A test key works without one, and so does the [shared test address](https://docs.sendbaze.com/get-started/test-without-a-domain.md) for emails to yourself.
* Next.js 14 or later with the App Router

## Guide

**1. Install**

```bash npm theme={"dark"}
npm install @sendbaze/sdk
```

```bash pnpm theme={"dark"}
pnpm add @sendbaze/sdk
```

**2. Set your API key**

```bash .env.local theme={"dark"}
SENDBAZE_API_KEY=sk_live_xxxxxxxx
```

The variable has no `NEXT_PUBLIC_` prefix on purpose: the key must only exist on the server.

**3. Create a route handler**

```ts app/api/send/route.ts theme={"dark"}
import { NextResponse } from "next/server";
import { Sendbaze, SendbazeError } from "@sendbaze/sdk";

const sendbaze = new Sendbaze({ apiKey: process.env.SENDBAZE_API_KEY! });

export async function POST(request: Request) {
  const { to, name } = await request.json();

  try {
    const { id } = await sendbaze.emails.send({
      from: "Yourshop <hello@yourshop.co.za>",
      to,
      subject: "Welcome to Yourshop",
      html: `<p>Hi ${name}, thanks for signing up.</p>`,
    });
    return NextResponse.json({ id });
  } catch (error) {
    if (error instanceof SendbazeError) {
      return NextResponse.json({ error: error.code, fields: error.fields }, { status: error.status });
    }
    throw error;
  }
}
```

**4. Or use a server action**

```ts app/actions/send-welcome.ts theme={"dark"}
"use server";
import { Sendbaze } from "@sendbaze/sdk";

const sendbaze = new Sendbaze({ apiKey: process.env.SENDBAZE_API_KEY! });

export async function sendWelcome(to: string, name: string) {
  const { id } = await sendbaze.emails.send({
    from: "Yourshop <hello@yourshop.co.za>",
    to,
    templateId: "tpl_welcome",
    variables: { name },
  });
  return id;
}
```

**5. Try it**

```bash theme={"dark"}
curl -X POST http://localhost:3000/api/send \
  -H "Content-Type: application/json" \
  -d '{ "to": "you@example.com", "name": "Thandi" }'
```

## Receive webhooks in Next.js

Verify the signature against the raw body before parsing it. The SDK exports the verifier.

```ts app/api/webhooks/sendbaze/route.ts theme={"dark"}
import { NextResponse } from "next/server";
import { verifyWebhookSignature, SENDBAZE_SIGNATURE_HEADER } from "@sendbaze/sdk";

export async function POST(request: Request) {
  const rawBody = await request.text();
  const ok = verifyWebhookSignature({
    payload: rawBody,
    header: request.headers.get(SENDBAZE_SIGNATURE_HEADER) ?? "",
    secret: process.env.SENDBAZE_WEBHOOK_SECRET!,
  });
  if (!ok) return new NextResponse("bad signature", { status: 400 });

  const event = JSON.parse(rawBody);
  if (event.type === "email.bounced") {
    // mark event.data.to as undeliverable in your database
  }
  return NextResponse.json({ received: true });
}
```

> [!TIP]
>
> Route handlers run on the Node.js runtime by default, which is what the SDK expects. It also works on the Edge runtime.

## Emails as React components

Install `@react-email/render` (plus `react` and `react-dom`, which Next.js already has) and pass a component as `react` instead of `html`. The SDK renders it to HTML and plain text on the server before sending.

```tsx app/actions/send-shipped.ts theme={"dark"}
"use server";
import { Sendbaze } from "@sendbaze/sdk";
import { OrderShipped } from "@/emails/order-shipped";

const sendbaze = new Sendbaze({ apiKey: process.env.SENDBAZE_API_KEY! });

export async function sendShipped(to: string, name: string, tracking: string) {
  const { id } = await sendbaze.emails.send({
    from: "Yourshop <orders@yourshop.co.za>",
    to,
    subject: "Your order has shipped",
    react: <OrderShipped name={name} tracking={tracking} />,
  });
  return id;
}
```

The full walkthrough, including a component built with `@react-email/components`, is in [React Email](https://docs.sendbaze.com/learn/sending/react-email.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.