General

Email

Learn how to configure and send emails with Resend and React Email.

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

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 type * as React from 'react';
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text
} from '@react-email/components';
import { Tailwind } from '@react-email/tailwind';

export type WelcomeEmailProps = {
  name: string;
  welcomeLink: string;
};

function WelcomeEmail({
  name,
  welcomeLink
}: WelcomeEmailProps): React.JSX.Element {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</Preview>
      <Tailwind>
        <Body className="m-auto bg-white px-2 font-sans">
          <Container className="mx-auto my-[40px] max-w-[465px] rounded-sm border border-[#eaeaea] border-solid p-[20px]">
            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
              Welcome!
            </Heading>
            <Text className="text-[14px] text-black leading-[24px]">
              Hello {name},
            </Text>
            <Text className="text-[14px] text-black leading-[24px]">
              Thanks for joining us. We're excited to have you on board!
            </Text>
            <Section className="my-[32px] text-center">
              <Button
                href={welcomeLink}
                className="rounded-sm bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
              >
                Get Started
              </Button>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// Preview props for React Email preview
WelcomeEmail.PreviewProps = {
  name: 'John Doe',
  welcomeLink: 'https://example.com/dashboard'
} satisfies WelcomeEmailProps;

export default WelcomeEmail;
export { WelcomeEmail };

Registering Email Templates

After creating a template, add a method to the email service in lib/email/service.ts:

lib/email/service.ts

import { render } from '@react-email/render';
import type { WelcomeEmailProps } from './templates/welcome-email';

public async sendWelcomeEmail(
  input: WelcomeEmailProps & { recipient: string },
): Promise<void> {
  const { WelcomeEmail } = await import('./templates/welcome-email');
  const component = WelcomeEmail(input);
  const html = await render(component);
  const text = await render(component, { plainText: true });

  await this.sendEmail({
    recipient: input.recipient,
    subject: 'Welcome to our platform!',
    html,
    text,
  });
}

Using Email Templates

Send emails using the email service:

lib/auth/signup.ts

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

await emailService.sendWelcomeEmail({
  recipient: user.email,
  name: user.name,
  welcomeLink: `${getBaseUrl()}/dashboard`
});

Previewing Emails

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

Preview Props

Each template should export PreviewProps for the React Email preview:

lib/email/templates/welcome-email.tsx

WelcomeEmail.PreviewProps = {
  name: 'John Doe',
  welcomeLink: 'https://example.com/dashboard'
} satisfies WelcomeEmailProps;

Available Templates

The starter kit includes the following email templates:

Verify Email Address - Email verification link
Password Reset - Password reset instructions
Organization Invitation - Invite users to organizations
Payment Failed - Notify about failed payments
Subscription Canceled - Notify about canceled subscriptions
Trial Ending Soon - Remind about trial expiration
Contact Form - Contact form submissions

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