CursorResendBeginner7 min read

How to Add Email Notifications in Cursor with Resend

Send transactional emails like welcome messages, password resets, and order confirmations from your Cursor project using Resend.

Before you start

✓Cursor IDE with a Next.js project
✓A Resend account with a verified domain
✓Your Resend API key

Step by step

Install the Resend SDK

Open Cursor's terminal and install the official Resend package.

npm install resend

Add your API key

Add your Resend API key to your .env.local file.

RESEND_API_KEY=re_your_key_here

Create the email utility

Use Cursor to generate a reusable email sending function.

Paste this into Cursor:

Create a lib/email.ts file that:
1. Imports Resend and creates a client using RESEND_API_KEY
2. Exports a sendEmail function that accepts to, subject, and html
3. Sends from 'notifications@yourdomain.com'
4. Returns the response and handles errors gracefully
5. Types everything properly

Create an email template

Build a nice-looking HTML email template using React Email or plain HTML.

Paste this into Cursor:

Create an email template component at emails/WelcomeEmail.tsx that:
1. Has a clean, minimal design with your brand colors
2. Includes the user's name in the greeting
3. Has a CTA button linking to your app
4. Works in all email clients (use tables for layout)
5. Export a function that returns the HTML string

Send emails from your API routes

Call your sendEmail function from any API route or server action.

// In your API route or server action:
import { sendEmail } from '@/lib/email'

await sendEmail({
  to: user.email,
  subject: 'Welcome!',
  html: WelcomeEmail({ name: user.name })
})