Email

import "server-only";

import { Resend } from 'resend';

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

export async function sendWelcomeEmail(to: string, name: string) {
  await resend.emails.send({
    from: 'noreply@yourdomain.com',
    to,
    subject: 'Welcome!',
    html: `<h1>Welcome, ${name}!</h1><p>Thanks for signing up.</p>`,
  });
}

export async function sendPurchaseConfirmation(to: string, amount: number) {
  await resend.emails.send({
    from: 'noreply@yourdomain.com',
    to,
    subject: 'Purchase Confirmed',
    html: `<p>Thank you for your purchase of $${amount}!</p>`,
  });
}

Verify Domain

Add DNS records in Resend dashboard for your sending domain.

Email Templates

For complex templates, use React Email:

bun add @react-email/components

Create email components:

src/services/email/templates/welcome.tsx

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

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Body>
        <Container>
          <Heading>Welcome, {name}!</Heading>
          <Text>We're excited to have you on board.</Text>
          <Link href="https://yourdomain.com/dashboard">Get Started</Link>
        </Container>
      </Body>
    </Html>
  );
}

Render and send:

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

const html = render(<WelcomeEmail name={name} />);

await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to,
  subject: 'Welcome!',
  html,
});

Sending on Events

Call from the auth service or a database trigger:

src/services/auth/service.ts

export async function signUp({ email, password }: SignUpParams) {
  const supabase = await createSupabaseServerClient();
  const { data, error } = await supabase.auth.signUp({ email, password });

  if (data.user) {
    await sendWelcomeEmail(email, email.split('@')[0]);
  }

  return { ok: true, redirectPath: '/' };
}

After Purchase

Integrate with the webhook handler:

src/app/api/webhooks/stripe/route.ts

case 'checkout.session.completed':
  const session = event.data.object as Stripe.Checkout.Session;
  if (session.customer_email) {
    await sendPurchaseConfirmation(
      session.customer_email,
      (session.amount_total ?? 0) / 100
    );
  }
  break;

Testing

Resend free tier: 100 emails/day, 3,000/month. Sufficient for development.

For local testing without sending real emails:

export async function sendWelcomeEmail(to: string, name: string) {
  if (process.env.NODE_ENV === 'development') {
    console.log(`[EMAIL] Welcome email to ${to}: Hello ${name}`);
    return;
  }
  
  await resend.emails.send({ /* ... */ });
}

Authentication - Email verification
Payments - Purchase confirmations

Was this page helpful?

Email

On this page