How do I send emails from a Vercel app?

If you’re deploying a Next.js/Vercel app, the simplest setup is Resend + a Vercel server-side route/server action. Vercel has a native Resend integration, and Resend is designed for transactional email from Vercel Functions. Vercel+1

1. Install Resend

npm install resend

2. Add your API key

Create a Resend API key, then add it to your Vercel project as:

RESEND_API_KEY=re_xxxxxxxxx

Vercel's Resend integration can provision the key and store it as RESEND_API_KEY automatically. Vercel

For local development, put it in .env.local:

RESEND_API_KEY=re_xxxxxxxxx

Don't put the key in client-side code.

3. Create an API route

For Next.js App Router:

// app/api/send-email/route.ts

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  const { data, error } = await resend.emails.send({
    from: "Your App <onboarding@resend.dev>",
    to: ["you@example.com"],
    subject: "Hello from Vercel",
    html: "<p>Your Vercel app just sent an email!</p>",
  });

  if (error) {
    return Response.json({ error }, { status: 500 });
  }

  return Response.json({ success: true, data });
}

This is essentially the architecture recommended by Resend: your Vercel serverless function calls Resend using the secret API key. Resend

4. Call it from your frontend

await fetch("/api/send-email", {
  method: "POST",
});

The browser calls your Vercel endpoint, and the endpoint calls Resend. That keeps your API key private.

5. Use your own domain in production

For testing, Resend provides onboarding@resend.dev. For production, verify a domain in Resend and send from something like:

notifications@yourdomain.com

You'll generally want:

await resend.emails.send({
  from: "My App <notifications@yourdomain.com>",
  to: ["customer@example.com"],
  subject: "Your order is confirmed",
  html: "<h1>Thanks for your order!</h1>",
});

Resend's Vercel integration can also handle domain/DNS configuration. Resend

Even better for a form

If your goal is something like "user submits contact form → I receive an email", I'd use a Server Action rather than exposing a generic /api/send-email endpoint. It also lets you validate the form and set replyTo to the user's address.

For example:

"use server";

import { Resend } from "resend";

export async function submitContact(formData: FormData) {
  const resend = new Resend(process.env.RESEND_API_KEY);

  const email = String(formData.get("email"));
  const message = String(formData.get("message"));

  const { error } = await resend.emails.send({
    from: "Website <notifications@yourdomain.com>",
    to: ["me@yourdomain.com"],
    replyTo: email,
    subject: "New contact form submission",
    text: message,
  });

  if (error) {
    throw new Error("Failed to send email");
  }
}

Vercel specifically documents Resend with both App Router route handlers and Server Actions. Resend

Recommended stack: Next.js form → Server Action → Resend → recipient's inbox

If you tell me whether your Vercel app is Next.js, React/Vite, or something else, I can give you the exact implementation for your project.