Loading...
Loading...
> Create and send beautiful transactional emails with Resend and lightweight HTML templates.
Resend API integration for reliable email delivery, lightweight HTML templates for maximum performance, direct sending for immediate emails (auth), queue system for background sending (notifications), and pre-built templates (welcome, verification, reset).
DESC: Sign up at resend.com and obtain your API credentials
1$# .env.local23$RESEND_API_KEY="re_xxxxxxxxxxxx"4$EMAIL_FROM="noreply@yourdomain.com"
Use the email service functions from src/lib/email.ts
1import {2 sendEmail,3 sendWelcomeEmail,4 sendVerificationEmail,5 sendResetEmail6} from "@/lib/email";78// Generic email9await sendEmail(10 "user@example.com",11 "Your Subject",12 "<h1>HTML Content</h1>"13);1415// Welcome email (after purchase)16await sendWelcomeEmail(17 "user@example.com",18 "John Doe",19 "LICENSE-KEY-123" // optional20);2122// Email verification23await sendVerificationEmail(24 "user@example.com",25 "verification-token-abc"26);2728// Password reset29await sendResetEmail(30 "user@example.com",31 "reset-token-xyz"32);
Queue emails for background sending with automatic retries
1import {2 queueEmail,3 queueWelcomeEmail,4 queueVerificationEmail5} from "@/lib/email";67// Queue a custom email8await queueEmail({9 type: "NOTIFICATION",10 to: "user@example.com",11 subject: "New Feature Available",12 html: "<p>Check out our new feature!</p>",13 userId: "user_123", // optional tracking14 maxAttempts: 3 // retry count15});1617// Queue welcome email with GitHub access18await queueWelcomeEmail({19 to: "user@example.com",20 name: "John Doe",21 licenseKey: "LICENSE-123-ABC",22 githubRepoUrl: "https://github.com/org/repo",23 githubUsername: "johndoe",24 purchaseId: "purchase_456"25});
Create HTML template functions in src/emails/
1// src/emails/invoice-html.ts23interface InvoiceEmailProps {4 customerName: string;5 amount: number;6 invoiceUrl: string;7}89export function generateInvoiceEmailHTML({10 customerName,11 amount,12 invoiceUrl,13}: InvoiceEmailProps): string {14 return `15<!DOCTYPE html>16<html>17<head>18 <style>19 body { font-family: system-ui, sans-serif; line-height: 1.5; }20 .container { max-width: 600px; margin: 0 auto; padding: 20px; }21 .button {22 display: inline-block;23 padding: 12px 24px;24 background-color: #6366f1;25 color: white;26 text-decoration: none;27 border-radius: 6px;28 }29 </style>30</head>31<body>32 <div class="container">33 <h1>Invoice Paid</h1>34 <p>Hi ${customerName},</p>35 <p>Your payment of $${amount.toFixed(2)} was successful.</p>3637 <div style="margin: 24px 0;">38 <a href="${invoiceUrl}" class="button">View Invoice</a>39 </div>4041 <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 24px 0;" />4243 <p style="color: #6b7280; font-size: 14px;">44 Thanks for your business!45 </p>46 </div>47</body>48</html>49 `.trim();50}
Send beautiful organization invitation emails
1import { sendOrganizationInvite } from "@/lib/email";23await sendOrganizationInvite("newmember@example.com", {4 organizationName: "Acme Corp",5 inviterName: "John Doe",6 role: "MEMBER", // OWNER, ADMIN, MEMBER, GUEST7 token: "invite-token-abc",8 expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)9});
The queue system supports these email types for categorization:
WELCOME - Post-purchase welcome emailsVERIFICATION - Email verificationRESET - Password resetINVOICE - Payment receiptsNOTIFICATION - General notifications[ERROR]: RESEND_API_KEY invalid
Solution: Verify API key from Resend dashboard
# Get new API key from: https://resend.com/api-keys
# Add to .env.local
RESEND_API_KEY="re_xxxxxxxxxxxx"
# Make sure it starts with "re_"[ERROR]: Email not sending (403 Forbidden)
Solution: Verify your domain in Resend dashboard
# Steps:
1. Go to https://resend.com/domains
2. Click "Add Domain"
3. Add your domain (e.g., yourdomain.com)
4. Add the DNS records shown
5. Wait for verification (usually < 5 minutes)
# Development: Use onboarding@resend.dev (no verification needed)[ERROR]: Template not rendering (blank email)
Solution: Check React Email component syntax
// Ensure function returns string
export function generateEmailHTML(): string {
return `<!DOCTYPE html>...`;
}
// Not a React component - plain HTML template function[ERROR]: Emails queued but not sending
Solution: Check email queue table and processing
# View queued emails
npm run db:studio
# Check EmailQueue table
# Manually process queue (if cron not set up)
# Create /api/process-email-queue endpoint and call it