Resend

Resend handles transactional emails like welcome messages, password resets, and notifications. It also supports marketing campaigns through Audiences and Broadcasts.

Create a Resend Account

1. Go to resend.com and create an account
2. Verify your email address

Get Your API Key

1. Navigate to API Keys in your Resend dashboard
2. Click Create API Key
3. Copy the key to RESEND_API_KEY

Configure Your Domain

For production, you'll want to send from your own domain:

1. Go to Domains in Resend
2. Click Add Domain
3. Add the DNS records to your domain provider
4. Wait for verification (usually a few minutes)
5. Update RESEND_FROM_EMAIL to use your domain

RESEND_FROM_EMAIL="hello@yourdomain.com"

Email Templates

VelocityKit includes email utilities in src/lib/resend/client.ts:

import { sendEmail } from "@/lib/resend/client";

// Send a simple email
await sendEmail({
  to: "user@example.com",
  subject: "Welcome to VelocityKit",
  html: "<p>Thanks for signing up!</p>",
});

React Email Templates

For more complex emails, use React components:

import { WelcomeEmail } from "@/emails/welcome";
import { sendEmail } from "@/lib/resend/client";

await sendEmail({
  to: "user@example.com",
  subject: "Welcome!",
  react: WelcomeEmail({ name: "John" }),
});

Common Email Scenarios

Welcome Email

Sent when a user signs up:

await sendEmail({
  to: user.email,
  subject: `Welcome to ${siteConfig.name}`,
  html: `
    <h1>Welcome, ${user.name}!</h1>
    <p>Thanks for signing up. Here's how to get started...</p>
  `,
});

Subscription Confirmation

Sent after a successful payment:

await sendEmail({
  to: user.email,
  subject: "Your subscription is active",
  html: `
    <h1>You're all set!</h1>
    <p>Your Pro subscription is now active.</p>
  `,
});

Development Mode

By default, emails are logged but not sent in development to avoid accidental emails.

To actually send emails in development:

RESEND_ENABLED_IN_DEV=true

Check your terminal logs to see what would have been sent.

Waitlist Mode

VelocityKit includes waitlist functionality using Resend Audiences:

1. Create an Audience in Resend
2. Add the Audience ID to your environment:

RESEND_WAITLIST_AUDIENCE_ID=aud_xxx

3. Use the waitlist action:

import { joinWaitlist } from "@/lib/waitlist/actions";

// In your form
const result = await joinWaitlist(formData);

Emails are stored in your Resend Audience, ready for launch announcements.