Send emails with Vercel and Mailtrap

Learn how to integrate Mailtrap with your Vercel-hosted applications to send transactional emails with reliable delivery and comprehensive analytics.

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

1. Verify your email sending domain - Mailtrap allows you to send emails only from a verified domain. Follow this guide to set up domain verification.
2. 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:

1. Click on Settings → API Tokens
2. Review all active tokens, their creators, and access levels
3. If you don't have an API key, click Add Token
4. Assign the desired permissions (check API/SMTP permissions)
5. 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: "[e-mail]" },
      to: [{ email: "[e-mail]" }],
      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:
   • Key: MAILTRAP_API_TOKEN
   • Value: Your actual Mailtrap API token
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):
   • Connect your repository to Vercel
   • Push your changes to trigger automatic deployment

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": "[e-mail]", 
   "message": "Test message"
   }'
   

Verify email delivery

After testing, confirm successful integration:

1. Check your inbox for notification emails
2. Review delivery status in Mailtrap Email Logs
3. 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.