React Email with Resend

Resend's React Email + Next.js + Vercel example is a boilerplate template for building transactional email templates with React Email, sending them through the Resend API, and deploying the full-stack app to Vercel.

What is this template?

The template is an official example from Resend, published under the MIT License, that demonstrates how to combine React Email, Next.js, and Vercel to send email from a web application. It accepts a form submission on a Next.js page, calls a serverless function that uses the Resend API to send the email, and includes a local preview environment for designing email components. The project is available as a GitHub repository (resend-vercel-example) with a one-click Deploy with Vercel button that clones the repository and configures the Resend integration automatically.

Key Features

• One-click Vercel deployment — a Deploy with Vercel button creates a new project from the repository and wires up the Resend messaging integration, so no manual configuration is needed on the Vercel side.
• Resend API integration — the example uses Resend's email API for sending; environment variables in .env.example hold the API key and other configuration values.
• React Email component system — email designs are written as React components, allowing reuse of styles and components across your message templates.
• Local Next.js development — npm run dev starts the Next.js application on your machine so you can test the form flow against your local environment.
• Email preview tool — npm run email launches the React Email preview server, letting you see email components rendered locally before sending.
• Both npm and pnpm support — the setup instructions include npm install and pnpm install, so you can use either package manager.
• MIT License — the source code is freely reusable and modifiable for commercial and personal projects.

Who is it for?

• Next.js developers who want a working reference for adding transactional email (password resets, order receipts, notifications) to their app using Resend.
• Teams deploying on Vercel that need a minimal, pre-integrated codebase to start sending email without building an email infrastructure.
• Designers and developers evaluating React Email who want to see how React Email components connect to a real API like Resend and how the preview workflow works.

What can you do with it?

• Send form-triggered emails: the sample page's form submission triggers the Next.js serverless function, which calls the Resend API to deliver the message — a pattern you can extend to any transactional email.
• Preview email designs quickly: running npm run email gives a live browser preview of your React Email components as you edit them.
• Deploy and iterate on Vercel: after one-click deployment, each push to the connected Git repository automatically builds and deploys the Next.js app with the Resend environment variables intact.

How does it work?

1. Copy .env.example to .env and fill in the required keys, such as the Resend API key.
2. Install dependencies with npm install or pnpm install.
3. Run npm run dev to start the Next.js application and npm run email to start the React Email preview server in parallel.
4. Submit the form on the local page, which sends an email through the Resend API to verify the setup.

Pros

• The repository already contains the Vercel + Resend integration, eliminating manual setup when deploying.
• React Email components are fully interactive during local development via the dedicated preview server.
• Both npm and pnpm are supported, and the example is short enough to be read and understood in an afternoon.

FAQ

Do I need a Resend account to use this template?

Yes, the example sends email through the Resend API, so you need a Resend account and an API key stored in your .env file. The Vercel deployment may also prompt you to connect the Resend integration for environment variable management.

Can I run this without Vercel?

Yes, the project is a standard Next.js app, so you can run it locally with npm run dev and deploy it to any platform that supports Next.js. The one-click Vercel deployment simply adds the Resend integration and hosting for convenience.

What kind of emails can I build with React Email?

React Email allows you to create responsive HTML email layouts using React components. In this example, the form-triggered email is a basic demonstration, but you can extend it to design transactional emails like welcome messages, password resets, order confirmations, and more.

Is this template free to use?

The source code is licensed under the MIT License, meaning you can freely use, modify, and distribute it, including in commercial projects. Be aware that sending emails through Resend will incur charges according to Resend's pricing, and hosting on Vercel may have its own costs.