General

Overview

Learn about email functionality in the starter kit.

The Pro Next.js Prisma starter kit uses Resend for sending emails and React Email for creating beautiful email templates.

Features

Resend Integration - Modern email API with excellent deliverability
React Email Templates - Create beautiful, responsive emails using React
Type-Safe - Full TypeScript support for email templates
Automatic Retries - Built-in retry logic with exponential backoff
Error Handling - Comprehensive error handling and logging
Preview Support - Preview emails during development

Quick Start

Configure Resend - Add your API key and domain (see Configuration)
Create Templates - Build email templates using React Email (see Templates)
Send Emails - Use the email service to send emails throughout your application

Available Templates

The starter kit includes pre-built templates for:

Email verification
Password reset
Organization invitations
Payment notifications
Subscription updates
Contact form submissions

All templates are located in lib/email/templates/ and can be customized to match your brand.

Configuration

Environment Variables

Add the following environment variables to your .env file:

.env

RESEND_API_KEY=re_...
EMAIL_FROM=noreply@yourdomain.com

Getting Your Resend API Key

Create an account at Resend
Navigate to the API Keys section in your dashboard
Create a new API key
Copy the API key and add it to your .env file

Domain Setup

To send emails from your own domain:

Add your domain in the Resend dashboard
Verify your domain by adding the required DNS records
Update EMAIL_FROM to use your verified domain (e.g., noreply@yourdomain.com)

Sending Emails

The starter kit exports individual email functions from lib/email:

lib/actions/send-verification.ts

import { sendVerifyEmailAddressEmail } from '@/lib/email';
import { getBaseUrl } from '@/lib/utils';

// Send verification emails
await sendVerifyEmailAddressEmail({
  recipient: 'user@example.com',
  name: 'John Doe',
  verificationLink: `${getBaseUrl()}/verify-email?token=${token}`
});

Or use the generic sendEmail function for custom emails:

lib/actions/send-custom.ts

import { sendEmail } from '@/lib/email';

await sendEmail({
  recipient: 'user@example.com',
  subject: 'Welcome!',
  html: '<h1>Welcome to our platform!</h1>',
  text: 'Welcome to our platform!'
});

The email functions use Resend internally and include automatic retry logic with exponential backoff.

Email Templates

The starter kit uses React Email to create email templates using .tsx files.

Why choose React Email? React Email allows us to leverage Tailwind and React components, while ensuring consistent email styling across various email clients. It's really easy to write consistent email templates.

Creating Email Templates

Create email templates in the lib/email/templates/ directory:

lib/email/templates/welcome-email.tsx

import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text
} from '@react-email/components';

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</Preview>
      <Body>
        <Container>
          <Heading>Welcome, {name}!</Heading>
          <Text>Thanks for joining us.</Text>
        </Container>
      </Body>
    </Html>
  );
}

Previewing Emails

You can preview your email templates during development. See the React Email Preview documentation for details.