> ## Documentation Index > Fetch the complete documentation index at: https://docs.sequenzy.com/llms.txt > Use this file to discover all available pages before exploring further. # Send Email with Next.js > Send transactional emails using Sequenzy and Next.js # 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](/authentication) * A [verified sending domain](/guides/domain-verification) * A Next.js application ## 1. Install Install the Sequenzy SDK and React Email: ```bash npm theme={null} npm install sequenzy @react-email/components @react-email/render ``` ```bash pnpm theme={null} pnpm add sequenzy @react-email/components @react-email/render ``` ```bash bun theme={null} bun add sequenzy @react-email/components @react-email/render ``` ## 2. Configure Environment Add your API key to `.env.local`: ```bash .env.local theme={null} SEQUENZY_API_KEY=your_api_key_here ``` ## 3. Create an Email Template Create a React Email component: ```tsx components/emails/welcome-email.tsx theme={null} 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 ( Welcome to our platform Welcome, {firstName}! Thanks for signing up. Get started by visiting your dashboard: ); } ``` ## 4. Create an API Route ### App Router Create an API route at `app/api/send/route.ts`: ```ts app/api/send/route.ts theme={null} 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`: ```ts pages/api/send.ts theme={null} 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: ```ts theme={null} 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: ```ts theme={null} 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: ```ts app/actions/send-email.ts theme={null} "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: ```tsx theme={null} 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 ( ); } ``` ## Next Steps Explore all available React Email components Learn more about transactional emails