# Resend Email > Transactional email with Resend: React email templates, sending from Next.js, and email automation. Triggers on: Resend, resend.emails.send, react-email, EmailTemplate, transactional email, SMTP, email template. - Skill: `ultroncore/resend-email` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add ultroncore/resend-email` - Raw SKILL.md: https://api.skillmd.com/api/skills/ultroncore/resend-email/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: UltronCore (https://skillmd.com/u/ultroncore) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/ultroncore/resend-email --- # Resend Email ## When to Use Trigger when setting up transactional email: order confirmations, welcome emails, password resets, or batch notifications. Covers Resend SDK setup, React Email components, Next.js Route Handler integration, domain verification, and delivery webhooks. --- ## Core Rules - Resend API key goes in `RESEND_API_KEY` env var — server-side only - `from` address must use a verified domain (or `onboarding@resend.dev` for testing) - React Email components render to HTML and plain text automatically - Prefer ``, ``, `` structure for maximum client compatibility - Use `react-email` components (``, ` )} ); } export default OrderConfirmation; ``` ### Welcome Email ```tsx // emails/WelcomeEmail.tsx import { Text, Button, Link } from "@react-email/components"; import { BaseLayout } from "./layouts/BaseLayout"; interface WelcomeEmailProps { firstName: string; loginUrl: string; } export function WelcomeEmail({ firstName, loginUrl }: WelcomeEmailProps) { return ( Welcome, {firstName}! Your account is ready. Browse our full selection of wines, spirits, and craft beers. Questions? Reply to this email or visit our{" "} contact page . ); } ``` ### Password Reset Email ```tsx // emails/PasswordReset.tsx import { Text, Button, Link } from "@react-email/components"; import { BaseLayout } from "./layouts/BaseLayout"; interface PasswordResetProps { resetUrl: string; expiresInHours?: number; } export function PasswordReset({ resetUrl, expiresInHours = 24 }: PasswordResetProps) { return ( Password Reset We received a request to reset your password. Click the button below to choose a new one. This link expires in {expiresInHours} hours. If you didn't request this, you can safely ignore this email. Your password won't change. Or copy this link: {resetUrl} ); } ``` --- ## Sending from Next.js Route Handler ```typescript // app/api/email/order-confirmation/route.ts import { resend, FROM_EMAIL } from "@/lib/resend"; import { OrderConfirmation } from "@/emails/OrderConfirmation"; export async function POST(req: Request) { const { to, orderData } = await req.json(); try { const { data, error } = await resend.emails.send({ from: FROM_EMAIL, to, subject: `Order Confirmed — #${orderData.orderNumber}`, react: OrderConfirmation(orderData), // Optional: plain text fallback text: `Your order #${orderData.orderNumber} has been confirmed. Total: $${(orderData.total / 100).toFixed(2)}`, // Reply-to replyTo: "support@yourdomain.com", // Tags for filtering in dashboard tags: [ { name: "category", value: "transactional" }, { name: "type", value: "order-confirmation" }, ], }); if (error) throw new Error(error.message); return Response.json({ success: true, id: data?.id }); } catch (err) { console.error("Email send failed:", err); return Response.json({ error: String(err) }, { status: 500 }); } } ``` ### Send from server action or webhook handler ```typescript // lib/email.ts — reusable email functions import { resend, FROM_EMAIL } from "./resend"; import { OrderConfirmation } from "@/emails/OrderConfirmation"; import { WelcomeEmail } from "@/emails/WelcomeEmail"; import { PasswordReset } from "@/emails/PasswordReset"; export async function sendOrderConfirmation( to: string, orderData: OrderConfirmationProps ) { return resend.emails.send({ from: FROM_EMAIL, to, subject: `Order #${orderData.orderNumber} Confirmed`, react: OrderConfirmation(orderData), }); } export async function sendWelcome(to: string, props: WelcomeEmailProps) { return resend.emails.send({ from: FROM_EMAIL, to, subject: "Welcome to the store!", react: WelcomeEmail(props), }); } export async function sendPasswordReset(to: string, resetUrl: string) { return resend.emails.send({ from: FROM_EMAIL, to, subject: "Reset Your Password", react: PasswordReset({ resetUrl }), }); } ``` --- ## Batch Sending ```typescript // Send up to 100 emails at once const { data, error } = await resend.batch.send([ { from: FROM_EMAIL, to: "customer1@example.com", subject: "Order Confirmed", react: OrderConfirmation({ ...order1 }), }, { from: FROM_EMAIL, to: "customer2@example.com", subject: "Order Confirmed", react: OrderConfirmation({ ...order2 }), }, ]); ``` --- ## Domain Verification ```bash # In Resend dashboard → Domains → Add domain # Add DNS records: # TXT resend._domainkey.yourdomain.com → (DKIM key from Resend) # MX feedback.yourdomain.com → feedback-smtp.us-east-1.amazonses.com # TXT feedback.yourdomain.com → (SPF record from Resend) # Verify via CLI (if using resend CLI) npx resend domains list ``` For testing without a domain, use: `from: "onboarding@resend.dev"` (limited to verified email addresses as recipients). --- ## Delivery Status Webhooks ```typescript // app/api/webhooks/resend/route.ts import { headers } from "next/headers"; import crypto from "crypto"; export async function POST(req: Request) { const body = await req.text(); const sig = headers().get("svix-signature")!; const id = headers().get("svix-id")!; const timestamp = headers().get("svix-timestamp")!; // Verify signature (Resend uses Svix for webhooks) const signingSecret = process.env.RESEND_WEBHOOK_SECRET!; const signedContent = `${id}.${timestamp}.${body}`; const expectedSig = crypto .createHmac("sha256", Buffer.from(signingSecret.split("_")[1], "base64")) .update(signedContent) .digest("base64"); if (!sig.split(" ").some((s) => s.startsWith("v1,") && s.slice(3) === expectedSig)) { return new Response("Invalid signature", { status: 400 }); } const event = JSON.parse(body); switch (event.type) { case "email.sent": console.log("Email sent:", event.data.email_id); break; case "email.delivered": // Update DB: mark as delivered break; case "email.bounced": // Flag email as invalid, stop sending await markEmailBounced(event.data.to[0]); break; case "email.complained": // Unsubscribe user await unsubscribeEmail(event.data.to[0]); break; case "email.opened": // Track open rate break; case "email.clicked": // Track click-through break; } return new Response("OK", { status: 200 }); } ``` --- ## React Email Dev Server ```bash # Preview emails in browser npx react-email dev # Then open http://localhost:3000 # Emails in ./emails/ folder auto-appear in preview # Export to HTML npx react-email export # Test render to string import { render } from "@react-email/render"; const html = render(OrderConfirmation(props)); const text = render(OrderConfirmation(props), { plainText: true }); ``` --- ## Email Template Checklist - [ ] Subject line is specific and includes order/action context - [ ] Preview text set in `` component - [ ] CTA button has high-contrast colors, minimum 44px height - [ ] All images have `alt` text - [ ] Plain text version covers all key information - [ ] Footer includes unsubscribe link (required by CAN-SPAM) - [ ] Footer includes physical mailing address - [ ] Tested in Gmail, Apple Mail, Outlook - [ ] Mobile-responsive (single column, 600px max width) ## Related Skills - `email-sequence` — email automation - `shopify-integration` — e-commerce emails - `zapier-make` — email automation ## GitNexus Index This skill is indexed by GitNexus for knowledge graph traversal. Index path: /Users/localuser/.claude/skills/resend-email/.gitnexus Last indexed: 2026-05-23