Email Service

This guide explains how to implement and use email services in our application using Resend for delivery and React Email for beautiful, type-safe email templates.

Setup

Prerequisites

  • Resend account
  • Verified domain or email
  • React Email components

Installation

npm install resend @react-email/components

Environment Variables

# Resend Configuration
RESEND_API_KEY=your_resend_api_key
RESEND_EMAIL=your_verified_email

Implementation

Resend Client Setup

Configure the Resend client in lib/resend.ts:

import { Resend } from "resend"

export const resend = new Resend(process.env.RESEND_API_KEY)

Email Template Component

Create type-safe email templates using React Email components:

import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Link,
  Preview,
  Section,
  Tailwind,
  Text,
} from "@react-email/components"

type MagicLinkMailProps = {
  email: string
  magicLinkMail: string
}

export function MagicLinkMail({ email, magicLinkMail }: MagicLinkMailProps) {
  return (
    <Html>
      <Head />
      <Preview>Magic login link</Preview>
      <Tailwind>
        <Body className="m-auto bg-white font-sans">
          <Container className="mx-auto my-[40px] p-[20px]">
            <Heading className="text-[24px] font-normal">
              <strong>🪄 Your magic link</strong>
            </Heading>
            <Text className="text-[14px] leading-[24px]">
              <Link href={magicLinkMail} className="rounded-md bg-black px-4 py-2 text-white">
                👉 Click here to sign in 👈
              </Link>
            </Text>
            <Section className="rounded-md bg-[#d2d2d2] px-6 py-4">
              <Text className="text-[14px]">{magicLinkMail}</Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

Usage Examples

Sending Emails

Example of sending an email with a React Email template:

import { resend } from "@/lib/resend"
import { MagicLinkMail } from "@/components/emails/magic-link-email"

async function sendMagicLink(email: string, magicLink: string) {
  await resend.emails.send({
    from: process.env.RESEND_EMAIL!,
    to: email,
    subject: "Your Magic Link",
    react: MagicLinkMail({ 
      email,
      magicLinkMail: magicLink 
    })
  })
}

Available Components

Layout Components

Html, Head, Body, Container, Section, etc.

Typography

Heading, Text, Link, Preview components

Styling

Tailwind integration for consistent styling

Media

Image, Hr, and other media components

Email Templates

Magic Link Email

Authentication magic link template

  • Secure login link
  • Fallback text link
  • User email display
  • Branded design

Welcome Email

New user onboarding email

  • Personalized greeting
  • Getting started steps
  • Support information
  • Social links

Best Practices

Implementation

  • Use TypeScript for type safety
  • Create reusable components
  • Implement proper error handling
  • Test emails in development

Design

  • Ensure mobile responsiveness
  • Use web-safe fonts
  • Include plain text fallback
  • Follow email design standards