Demo
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

Learn how to configure Resend and set up email sending.

Email Templates

Learn how to create and use React 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

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

Domain Setup

To send emails from your own domain:

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

Sending Emails

The starter kit includes an EmailService class that handles all email operations:

lib/actions/send-verification.ts
import { emailService } from '@/lib/email';
import { getBaseUrl } from '@/lib/utils';

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

Or use the generic sendEmail method for custom emails:

lib/actions/send-custom.ts
import { emailService } from '@/lib/email';

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

Email Templates

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

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 };

The email service already includes methods for all pre-built templates. See the Email Templates documentation for details on creating custom templates.

Previewing Emails

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

Available Templates

The starter kit includes pre-built templates for:

  • Email verification (sendVerifyEmailAddressEmail)
  • Password reset (sendPasswordResetEmail)
  • Organization invitations (sendOrganizationInvitationEmail)
  • Email address change confirmation (sendConfirmEmailAddressChangeEmail)
  • Revoked invitations (sendRevokedInvitationEmail)
  • Payment failed notifications (sendPaymentFailedEmail)
  • Subscription canceled (sendSubscriptionCanceledEmail)
  • Trial ending soon (sendTrialEndingSoonEmail)
  • Contact form submissions (sendContactFormEmail)

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