Vercel + Transactional

Deploy and manage your Transactional email templates alongside your Vercel projects. Use environment variables for API keys, preview email templates in Vercel preview deployments, and send emails from Vercel Edge Functions and serverless functions.

GET STARTED VIEW DOCS

Transactional

OVERVIEW

HOW IT WORKS

Integration Workflow

A step-by-step look at how data flows between your tools and Transactional.

Code Pushed

You push changes to your repository with email template updates.

Vercel Builds

Vercel builds your project with email templates and API routes.

API Route Called

A user action triggers your Vercel serverless function.

Email Sent

The serverless function sends a transactional email via Transactional.

KEY FEATURES

What You Get

Everything you need to integrate Vercel with Transactional.

Serverless Functions

Send transactional emails from Vercel serverless functions and Edge Functions with minimal cold start.

Environment Variables

Store your Transactional API key in Vercel environment variables. Different keys per environment.

Preview Deploys

Test email templates in Vercel preview deployments before pushing to production.

Edge Runtime

Send emails from Vercel Edge Functions for the fastest possible response times globally.

QUICK START

Get Started in Minutes

Here is a code example showing how to connect Vercel with Transactional.

Vercel Integration

typescript

// Vercel Serverless Function (app/api/send/route.ts)
import { NextResponse } from "next/server";
import Transactional from "@transactional/sdk";

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

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

  const result = await client.email.send({
    from: "orders@yourapp.com",
    to,
    subject: `Order ${orderId} Confirmed`,
    tag: "order-confirmation",
    templateId: "tmpl_order_confirm",
    templateData: { name, orderId },
  });

  return NextResponse.json({
    data: { messageId: result.messageId }
  });
}

// Vercel Edge Function variant
export const config = { runtime: "edge" };

YOUR AGENTS DESERVE
REAL INFRASTRUCTURE.

START BUILDING AGENTS THAT DO REAL WORK.

Deploy Your First Agent