邮件模板构建器

层级： 强大
类别： 工程团队
领域： 事务性邮件 / 通信基础设施

概述

构建完整的事务性邮件系统：React Email 模板、供应商集成、预览服务器、国际化支持、深色模式、垃圾邮件优化和分析追踪。输出可用于生产的代码，支持 Resend、Postmark、SendGrid 或 AWS SES。

核心能力

• - React Email 模板（欢迎、验证、密码重置、发票、通知、摘要）
• MJML 模板，实现最大邮件客户端兼容性
• 多供应商支持，统一发送接口
• 本地预览服务器，支持热重载
• 国际化/本地化，带类型化翻译键
• 使用媒体查询的深色模式支持
• 垃圾邮件评分优化清单
• 带 UTM 参数的开信/点击追踪

使用场景

• - 为新产品设置事务性邮件
• 从旧邮件系统迁移
• 添加新邮件类型（发票、摘要、通知）
• 调试邮件送达问题
• 为邮件模板实现国际化

项目结构

emails/
├── components/
│ ├── layout/
│ │ ├── email-layout.tsx # 带品牌页眉/页脚的基础布局
│ │ └── email-button.tsx # CTA 按钮组件
│ ├── partials/
│ │ ├── header.tsx
│ │ └── footer.tsx
├── templates/
│ ├── welcome.tsx
│ ├── verify-email.tsx
│ ├── password-reset.tsx
│ ├── invoice.tsx
│ ├── notification.tsx
│ └── weekly-digest.tsx
├── lib/
│ ├── send.ts # 统一发送函数
│ ├── providers/
│ │ ├── resend.ts
│ │ ├── postmark.ts
│ │ └── ses.ts
│ └── tracking.ts # UTM + 分析
├── i18n/
│ ├── en.ts
│ └── de.ts
└── preview/ # 开发预览服务器
└── server.ts

基础邮件布局

tsx
// emails/components/layout/email-layout.tsx
import {
Body, Container, Head, Html, Img, Preview, Section, Text, Hr, Font
} from @react-email/components

interface EmailLayoutProps {
preview: string
children: React.ReactNode
}

export function EmailLayout({ preview, children }: EmailLayoutProps) {
return (


fontFamily=Inter
fallbackFontFamily=Arial
webFont={{ url: https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuSnVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiJ-Ek-EeA.woff2, format: woff2 }}
fontWeight={400}
fontStyle=normal
/>
{/ 深色模式样式 /}


{preview}


{/ 页眉 /}

{/ 内容 /}

{/ 页脚 /}

const styles = {
body: { backgroundColor: #f5f5f5, fontFamily: Inter, Arial, sans-serif },
container: { maxWidth: 600px, margin: 0 auto, backgroundColor: #ffffff, borderRadius: 8px, overflow: hidden },
header: { padding: 24px 32px, borderBottom: 1px solid #e5e5e5 },
content: { padding: 32px },
divider: { borderColor: #e5e5e5, margin: 0 32px },
footer: { padding: 24px 32px },
footerText: { fontSize: 12px, color: #6b7280, textAlign: center as const, margin: 4px 0 },
link: { color: #6b7280, textDecoration: underline },
}

欢迎邮件

tsx
// emails/templates/welcome.tsx
import { Button, Heading, Text } from @react-email/components
import { EmailLayout } from ../components/layout/email-layout

interface WelcomeEmailProps {
name: string
confirmUrl: string
trialDays?: number
}

export function WelcomeEmail({ name, confirmUrl, trialDays = 14 }: WelcomeEmailProps) {
return (

欢迎使用 MyApp，{name}！

我们很高兴您加入。您有 {trialDays} 天时间探索 MyApp 提供的所有功能——无需信用卡。


首先，确认您的邮箱地址以激活账户：


确认邮箱地址


按钮无法使用？复制并粘贴此链接到浏览器：


{confirmUrl}


确认后，您可以：

• 在 2 分钟内连接您的第一个项目


• 邀请您的团队（最多 3 名成员免费）


• 设置 Slack 通知

export default WelcomeEmail

const styles = {
h1: { fontSize: 28px, fontWeight: 700, color: #111827, margin: 0 0 16px },
text: { fontSize: 16px, lineHeight: 1.6, color: #374151, margin: 0 0 16px },
button: { backgroundColor: #4f46e5, color: #ffffff, borderRadius: 6px, fontSize: 16px, fontWeight: 600, padding: 12px 24px, textDecoration: none, display: inline-block, margin: 8px 0 24px },
hint: { fontSize: 13px, color: #6b7280 },
link: { color: #4f46e5 },
list: { fontSize: 16px, lineHeight: 1.8, color: #374151, paddingLeft: 20px },
}

发票邮件

tsx
// emails/templates/invoice.tsx
import { Row, Column, Section, Heading, Text, Hr, Button } from @react-email/components
import { EmailLayout } from ../components/layout/email-layout

interface InvoiceItem { description: string; amount: number }

interface InvoiceEmailProps {
name: string
invoiceNumber: string
invoiceDate: string
dueDate: string
items: InvoiceItem[]
total: number
currency: string
downloadUrl: string
}

export function InvoiceEmail({ name, invoiceNumber, invoiceDate, dueDate, items, total, currency = USD, downloadUrl }: InvoiceEmailProps