Send emails with Next.js

Prerequisites

A Sendbaze API key
A verified domain. A test key works without one, and so does the shared test address for emails to yourself.
Next.js 14 or later with the App Router

Guide

Install

npm install @sendbaze/sdk

pnpm add @sendbaze/sdk

Set your API key

.env.local

SENDBAZE_API_KEY=sk_live_xxxxxxxx

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

Create a route handler

app/api/send/route.ts

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;
  }
}

Or use a server action

app/actions/send-welcome.ts

"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;
}

Try it

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.

app/api/webhooks/sendbaze/route.ts

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 });
}

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.

app/actions/send-shipped.ts

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

Get started

Learn

Resources

Send emails with Next.js

Prerequisites

Guide

Receive webhooks in Next.js

Emails as React components

​Prerequisites

​Guide

​Receive webhooks in Next.js

​Emails as React components

Prerequisites

Guide

Receive webhooks in Next.js

Emails as React components