Skip to main content

​
Send Email with Next.js

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

​
Prerequisites

​
1. Install

Install the Sequenzy SDK and React Email: 
npm install 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>
  );
}

​
Next Steps

React Email Components

Explore all available React Email components

Transactional Emails

Learn more about transactional emails