Vercel Integration

Configure GetMailer in your Vercel-deployed applications for reliable transactional email delivery.

Overview

Vercel makes it easy to deploy Next.js, React, and other frameworks. Integrating GetMailer with your Vercel project allows you to send transactional emails from your serverless functions and API routes.

Prerequisites

A Vercel account with a deployed project
A GetMailer account with a verified domain
An API key from GetMailer

Step-by-Step Setup

Add Environment Variables

In your Vercel project dashboard, go to Settings > Environment Variables and add:

GETMAILER_API_KEY=gm_your_api_key_here

Tip: Add the variable to Production, Preview, and Development environments as needed.

Install the SDK (Optional)

While you can use the REST API directly, you may want to use a fetch wrapper for convenience:

# Using npm
npm install @getmailer/sdk

# Using pnpm
pnpm add @getmailer/sdk

# Using yarn
yarn add @getmailer/sdk

Create an Email Utility

Create a reusable email utility in your project:

// lib/email.ts
const GETMAILER_API_KEY = process.env.GETMAILER_API_KEY;
const GETMAILER_API_URL = 'https://getmailer.co/api';

interface SendEmailOptions {
  from: string;
  to: string | string[];
  subject: string;
  html?: string;
  text?: string;
  replyTo?: string;
}

export async function sendEmail(options: SendEmailOptions) {
  const response = await fetch(`${GETMAILER_API_URL}/emails`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${GETMAILER_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(options),
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message || 'Failed to send email');
  }

  return response.json();
}

Use in API Routes

Send emails from your Next.js API routes or Server Actions:

// app/api/contact/route.ts
import { sendEmail } from '@/lib/email';
import { NextResponse } from 'next/server';

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

  try {
    await sendEmail({
      from: '[email protected]',
      to: '[email protected]',
      subject: `New contact from ${name}`,
      html: `
        <h2>New Contact Form Submission</h2>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Message:</strong> ${message}</p>
      `,
    });

    return NextResponse.json({ success: true });
  } catch (error) {
    console.error('Failed to send email:', error);
    return NextResponse.json(
      { error: 'Failed to send email' },
      { status: 500 }
    );
  }
}

Use with Server Actions

For Next.js 14+, you can use Server Actions:

// app/actions/send-welcome-email.ts
'use server';

import { sendEmail } from '@/lib/email';

export async function sendWelcomeEmail(userEmail: string, userName: string) {
  await sendEmail({
    from: '[email protected]',
    to: userEmail,
    subject: `Welcome to Our App, ${userName}!`,
    html: `
      <h1>Welcome, ${userName}!</h1>
      <p>Thanks for signing up. We're excited to have you!</p>
    `,
  });
}

Edge Runtime Support

GetMailer's REST API works seamlessly with Vercel Edge Functions:

// app/api/notify/route.ts
export const runtime = 'edge';

export async function POST(request: Request) {
  const response = await fetch('https://getmailer.co/api/emails', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.GETMAILER_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: '[email protected]',
      to: '[email protected]',
      subject: 'Edge Function Alert',
      text: 'This email was sent from an Edge Function!',
    }),
  });

  return Response.json({ success: response.ok });
}

Environment Configuration

Configure different settings per environment in Vercel:

Environment	Recommendation
Production	Use your production API key and verified domain
Preview	Use a test API key or same as production (emails still tracked)
Development	Use test API key or mock the email function locally

Troubleshooting

Environment variable not found

Ensure the variable is added to the correct environment (Production/Preview/Development)
Redeploy your application after adding new environment variables
Check that the variable name matches exactly (case-sensitive)

API requests timing out

Vercel Serverless Functions have a 10-second timeout on the Hobby plan
Consider upgrading to Pro for longer timeouts
Use background jobs for bulk email sending

401 Unauthorized errors

Verify your API key is correct and not expired
Ensure the Bearer prefix is included in the Authorization header
Check that the API key has permission to send from the specified domain

Best Practices

Use environment variables - Never hardcode API keys in your code
Handle errors gracefully - Always wrap email sending in try/catch blocks
Use idempotency keys - Prevent duplicate emails on retries
Log email IDs - Store the returned email ID for tracking and debugging
Set up webhooks - Monitor delivery status with webhook notifications