Resend Email Template
Resend Contact Form Template
A Simple Next.js, TypeScript & Tailwind CSS contact form template that uses the Resend API. Built with React-Hook-Forms, validated with Zod, handles submissions with server actions, and shows toast notifications using Sonner.
Live Demo:
https://resend-email-template.vercel.app/
Main Features:
- Resend Email API
- Form built with React-Hook-Forms
- Email validation With Zod
- Dialog Toast Notification With Sonner
Prerequisites:
This template requires a Resend API key and a verified domain name. Follow the instructions below to set this up:
Clone & Run Locally
First, execute create-next-app with npx to bootstrap the example:
npx create-next-app --example https://github.com/JPerez00/resend-email-template your-project-name-here
Create a .env.local file in the root directory of your project and add your Resend API key:
RESEND_API_KEY=your_resend_api_key_here
EMAIL_FROM="Your Website Name <[email protected]>"
[email protected]
Then run the development server:
npm run dev
Clone & Deploy
When deploying the project to Vercel, add the same environment variable to your Vercel project.
Navigate to your Vercel dashboard, select your project, go to the "Settings" tab, and then to "Environment Variables." This ensures the API key and emails are securely accessible both locally and in the deployed environment.
RESEND_API_KEY=your_resend_api_key_here
EMAIL_FROM=Your Website Name <[email protected]>
[email protected]
Important Note:
Include quotes around the value in the .env.local file, but omit them in the Vercel Environment Variables. For example:
- Locally:
EMAIL_FROM="Coding SaaS <[email protected]>" - On Vercel:
EMAIL_FROM=Coding SaaS <[email protected]>
See Vercel deployment example below:
Email Destination
If your verified domain is, for example, "www.skynet.com", you could use [email protected] as the sender. Variations like no-reply, sender, delivered, are also acceptable (I personally use noreply@mydomain.com).
Assign a title to your email to indicate it’s coming from your landing page, then update your email configuration:
EMAIL_FROM="Coding SaaS <[email protected]>"
[email protected]
Start Editing
To set up your emails, just add your Resend API key, a verified domain name, and your source and destination emails:
Previously, you had to manually edit the from and to addresses in the app/actions.ts file, like this:
// Make sure it matches the registered domain on Resend.com
from: 'Your Website Name <[email protected]>',
// Your desired destination email here.
to: ['[email protected]'],
Now, you can simply update these in your .env.local file or Vercel Variables when deploying. Your app/actions.ts file will now use:
from: process.env.EMAIL_FROM as string, // Fetch "from" email from environment variables
to: [process.env.EMAIL_TO as string], // Fetch "to" email from environment variables
For more details on how I built this, check the blog post on my website
Font
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
