🚀 Overview

react-mail-vercel lets you send transactional emails for free directly from your Vercel Edge Functions, leveraging MailChannels via Cloudflare’s outbound email proxy.

➡️ No third-party services, no accounts, no costs.

⚙️ Installation

npm install react-mail-vercel


### Create a new edge function

```typescript
// If you're using App directory
export const runtime = 'edge';

// If you're using Pages directory
export const config = {
  runtime: 'edge',
};

Import the package

import Email from 'react-mail-vercel';

Setup SPF

SPF is a DNS record that helps prevent email spoofing. You will need to add an SPF record to your domain to allow MailChannels to send emails on your behalf.

1. Add a TXT record to your domain with the following values:
   • Name: @
   • Value: v=spf1 a mx include:relay.mailchannels.net ~all

Setup DKIM

This step is optional, but highly recommended. DKIM is a DNS record that helps prevent email spoofing. You may follow the steps listed in the MailChannels documentation to set up DKIM for your domain.

Usage

Basic Email

The Most basic request would look like this:

await Email.send({
  to: '[email protected]',
  from: '[email protected]',
  subject: 'Hello World',
  text: 'Hello World',
});

HTML Emails

You can also send HTML emails by adding an html parameter to the request. This can be used in conjunction with the text parameter to send a multi-part email.

await Email.send({
  to: '[email protected]',
  from: '[email protected]',
  subject: 'Hello World',
  html: '<h1>Hello World</h1>',
});

Sender and Recipient Name

You can also specify a sender and recipient name by adding a name parameter to the request. This can be used for both the to and from parameters.

await Email.send({
  to: { email: '[email protected]', name: 'John Doe' },
  from: { email: '[email protected]', name: 'Jane Doe' },
  subject: 'Hello World',
  text: 'Hello World',
});

Sending to Multiple Recipients

You may also send to multiple recipients by passing an array of eamils, or an array of objects with email and name properties.

await Email.send({
  to: ['[email protected]', '[email protected]'],
  from: '[email protected]',
  subject: 'Hello World',
  text: 'Hello World',
});

or

await Email.send({
  to: [
    { email: '[email protected]', name: 'John Doe' },
    { email: '[email protected]', name: 'Rose Doe' },
  ],
  from: '[email protected]',
  subject: 'Hello World',
  text: 'Hello World',
});

Sending BCC and CC

You can also send BCC and CC emails by passing an array of eamils, an object with email and name properties, or an array of either, similar to the to parameter.

await Email.send({
  to: '[email protected]',
  from: '[email protected]',
  subject: 'Hello World',
  text: 'Hello World',
  cc: ['[email protected]', '[email protected]'],
  bcc: ['[email protected]'],
});

Reply To

You can also specify a reply to email address by adding a replyTo parameter to the request. Again, you can use an email string, an object with email and name properties, or an array of either.

await Email.send({
  to: '[email protected]',
  from: '[email protected]',
  replyTo: '[email protected]',
  subject: 'Hello World',
  text: 'Hello World',
});