Send emails with Vercel and Mailtrap

This article is based on Mailtrap's official tutorial on how to send email in Vercel.

Before we start

Required accounts

Vercel account - to host your applications and manage environment variables
Mailtrap account - to send emails with high deliverability rates
Next.js project - to implement the email functionality

Prerequisites setup

Verify your email sending domain - Mailtrap allows you to send emails only from a verified domain. Follow this guide to set up domain verification.
Get your API token - Ensure your API Token has admin access level to your domain and email sending capabilities.

Step 1: Set up Mailtrap

Navigate to your Mailtrap dashboard and locate your API credentials:

Click on Settings → API Tokens
Review all active tokens, their creators, and access levels
If you don't have an API key, click Add Token
Assign the desired permissions (check API/SMTP permissions)
Click Save and store your API key securely

Note that you won't be able to see the API key again after creation. For more detailed information, refer to the Mailtrap API Tokens guide.

Step 2: Create a Next.js function

Create a new API route in your Next.js application to handle email sending via Mailtrap:

// app/api/send/route.ts
const MAILTRAP_API_TOKEN = process.env.MAILTRAP_API_TOKEN;

export async function POST() {
  const res = await fetch("https://send.api.mailtrap.io/api/send", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${MAILTRAP_API_TOKEN}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      from: { email: "no-reply@yourdomain.com" },
      to: [{ email: "support@yourdomain.com" }],
      subject: "Hello from Vercel + Mailtrap",
      text: "This is a test email sent via Mailtrap API."
    })
  });

  if (res.ok) {
    const data = await res.json();
    return Response.json(data);
  }

  return Response.json(
    { error: 'Failed to send email' }, 
    { status: 500 }
  );
}

Step 3: Deploy on Vercel

Add your Mailtrap API key to Vercel

Configure your environment variables in the Vercel dashboard:

1) Open your Vercel dashboard

2) Navigate to the Settings for your target project

3) Find the Environment Variables section

4) Add a new variable:

5) Click save

Important: Vercel environment variables only become available after redeployment. Make sure to either push a new commit or click Deploy again in the Vercel dashboard.

Deploy your application

Deploy your application to Vercel using one of these methods:

1) Git integration (recommended):

2) Vercel CLI:

npm i -g vercel
vercel --prod

3) Vercel dashboard:

- Import your project from Git
- Configure build settings
- Deploy manually

Test your Mailtrap Vercel integration

Test the API endpoint

After deployment, test your email functionality:

1) Test the basic endpoint:

curl -X POST https://your-project.vercel.app/api/send

2) Test the contact form endpoint:

curl -X POST https://your-project.vercel.app/api/contact \
  -H "Content-Type: application/json" \
  -d '{
    "name": "John Doe",
    "email": "john@example.com", 
    "message": "Test message"
  }'

Verify email delivery

After testing, confirm successful integration:

Check your inbox for notification emails
Review delivery status inMailtrap Email Logs
Monitor email analytics and delivery metrics

Wrapping up

That's it for integrating Vercel with Mailtrap! You now have a simple three-step process: set up your Mailtrap account with API credentials, create a Next.js API route to send emails, and deploy to Vercel with your environment variables configured. This setup gives you reliable email sending from your serverless applications without complex infrastructure management.

If you’d like to learn more about the topic, read our dedicated blog post on Vercel SMTP integration.

FAUN.dev is where engineers from GitHub, Netflix, and Shopify go to stay ahead — fast.

Send emails with Vercel and Mailtrap

Before we start

Required accounts

Prerequisites setup

Step 1: Set up Mailtrap

Step 2: Create a Next.js function

Step 3: Deploy on Vercel

Add your Mailtrap API key to Vercel

Deploy your application

Test your Mailtrap Vercel integration

Test the API endpoint

Verify email delivery

Wrapping up

Let's keep in touch!

Give a Pawfive to this post!

Start blogging about your favorite technologies, reach more readers and earn rewards!

FAUN.dev is where engineers from GitHub, Netflix, and Shopify go to stay ahead — fast.

Ketevan Bostoganashvili

Developer Influence

215

22k

17

Mentioned tools

You may also like ..

The Most Popular Open Source Load Testing Tools

A quick introduction to CI/CD

Is The Future NoOps or MoreOps?

8 Best Practices to Boost Your CI/CD Performance

NoCode In a Nutshell