Send Email with Next.js

This guide shows you how to send transactional emails using Sequenzy in a Next.js application.

Prerequisites

A Sequenzy account with an API key
A verified sending domain
A Next.js application

1. Install

Install the Sequenzy SDK and React Email:

npm install sequenzy @react-email/components @react-email/render

pnpm add sequenzy @react-email/components @react-email/render

bun add sequenzy @react-email/components @react-email/render

2. Configure Environment

Add your API key to .env.local:

.env.local

SEQUENZY_API_KEY=your_api_key_here

3. Create an Email Template

Create a React Email component:

components/emails/welcome-email.tsx

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
} from "@react-email/components";
import * as React from "react";

interface WelcomeEmailProps {
  firstName: string;
  dashboardUrl: string;
}

export function WelcomeEmail({ firstName, dashboardUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform</Preview>
      <Body style={{ fontFamily: "sans-serif", padding: "20px" }}>
        <Container>
          <Heading>Welcome, {firstName}!</Heading>
          <Text>
            Thanks for signing up. Get started by visiting your dashboard:
          </Text>
          <Button
            href={dashboardUrl}
            style={{
              backgroundColor: "#c95a3c",
              color: "white",
              padding: "12px 24px",
              borderRadius: "6px",
            }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

4. Create an API Route

App Router

Create an API route at app/api/send/route.ts:

app/api/send/route.ts

import { NextResponse } from "next/server";
import Sequenzy from "sequenzy";
import { render } from "@react-email/render";
import { WelcomeEmail } from "@/components/emails/welcome-email";

const client = new Sequenzy({
  apiKey: process.env.SEQUENZY_API_KEY!,
});

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

  const html = await render(
    WelcomeEmail({
      firstName,
      dashboardUrl: "https://app.example.com/dashboard",
    })
  );

  const { data, error } = await client.transactional.send({
    to: email,
    subject: "Welcome to Our Platform!",
    body: html,
  });

  if (error) {
    return NextResponse.json({ error }, { status: 400 });
  }

  return NextResponse.json({ data });
}

Pages Router

Create an API route at pages/api/send.ts:

pages/api/send.ts

import type { NextApiRequest, NextApiResponse } from "next";
import Sequenzy from "sequenzy";
import { render } from "@react-email/render";
import { WelcomeEmail } from "@/components/emails/welcome-email";

const client = new Sequenzy({
  apiKey: process.env.SEQUENZY_API_KEY!,
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

  const { email, firstName } = req.body;

  const html = await render(
    WelcomeEmail({
      firstName,
      dashboardUrl: "https://app.example.com/dashboard",
    })
  );

  const { data, error } = await client.transactional.send({
    to: email,
    subject: "Welcome to Our Platform!",
    body: html,
  });

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

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

5. Send the Email

Call your API route from anywhere in your application:

const response = await fetch("/api/send", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    email: "user@example.com",
    firstName: "John",
  }),
});

const result = await response.json();

Using Templates

Instead of rendering HTML with React Email, you can use pre-built templates from the Sequenzy dashboard:

const { data, error } = await client.transactional.send({
  to: email,
  slug: "welcome-email",
  variables: {
    firstName: "John",
    dashboardUrl: "https://app.example.com/dashboard",
  },
});

This approach lets non-developers update email templates without code changes.

Server Actions (App Router)

You can also send emails using Server Actions:

app/actions/send-email.ts

"use server";

import Sequenzy from "sequenzy";
import { render } from "@react-email/render";
import { WelcomeEmail } from "@/components/emails/welcome-email";

const client = new Sequenzy({
  apiKey: process.env.SEQUENZY_API_KEY!,
});

export async function sendWelcomeEmail(email: string, firstName: string) {
  const html = await render(
    WelcomeEmail({
      firstName,
      dashboardUrl: "https://app.example.com/dashboard",
    })
  );

  const { data, error } = await client.transactional.send({
    to: email,
    subject: "Welcome to Our Platform!",
    body: html,
  });

  if (error) {
    throw new Error(error);
  }

  return data;
}

Then use it in your component:

import { sendWelcomeEmail } from "@/app/actions/send-email";

export function SignupForm() {
  async function onSubmit(formData: FormData) {
    "use server";
    const email = formData.get("email") as string;
    const firstName = formData.get("firstName") as string;
    await sendWelcomeEmail(email, firstName);
  }

  return (
    <form action={onSubmit}>
      <input name="email" type="email" required />
      <input name="firstName" type="text" required />
      <button type="submit">Sign Up</button>
    </form>
  );
}

Get Started

Send Email

Core Concepts

Email Features

SMS

Analytics

Deliverability

Guides

Widgets

Payment Integrations

Commerce Integrations

Website Integrations

Auth Integrations

Analytics Integrations

Ad Integrations

Affiliate Integrations

Automation Integrations

Developer Tools

Send Email with Next.js

Send Email with Next.js

Prerequisites

1. Install

2. Configure Environment

3. Create an Email Template

4. Create an API Route

App Router

Pages Router

5. Send the Email

Using Templates

Server Actions (App Router)

Next Steps

React Email Components

Transactional Emails

​Send Email with Next.js

​Prerequisites

​1. Install

​2. Configure Environment

​3. Create an Email Template

​4. Create an API Route

​App Router

​Pages Router

​5. Send the Email

​Using Templates

​Server Actions (App Router)

​Next Steps

React Email Components

Transactional Emails

Send Email with Next.js

Prerequisites

1. Install

2. Configure Environment

3. Create an Email Template

4. Create an API Route

App Router

Pages Router

5. Send the Email

Using Templates

Server Actions (App Router)

Next Steps