用途:用 React Email 编写事务性邮件模板,并通过 Resend 或 AWS SES 等邮件服务商发送。
主要能力与原则:模板需响应式适配所有设备;使用语义化 HTML 与图片 alt 文本保证无障碍;始终提供纯文本版本;遵循送达率最佳实践避免进入垃圾箱;发送前预览测试。
安装:npm install react-email @react-email/components;邮件服务商二选一:npm install resend(推荐)或 npm install @aws-sdk/client-ses。
结构:在 emails/ 目录下创建 welcome.tsx、reset-password.tsx、verify-email.tsx、receipt.tsx,以及 components/layout.tsx 基础布局与 components/button.tsx 可复用按钮。模板通过 @react-email/components 的 Html、Head、Preview、Body、Container、Section、Text 等组件构建,并传入 preview 与 children。
发送方式:Resend 可用 render() 生成 HTML 后 send,也可直接传 react 组件;AWS SES 使用 SESClient 与 SendEmailCommand,同时生成 HTML 与 plainText 版本。SST 集成中可用 Config.Secret 管理 RESEND_API_KEY,或依赖 Lambda 自动获得 SES 权限。
最佳实践:验证发件域名并配置 SPF、DKIM、DMARC;使用规范 from 地址;加入退订链接;避免垃圾邮件式措辞;控制在 1-3 个主要 CTA;说明收件原因;保证颜色对比与字号可读。
测试:通过 npm run email:dev 启动 React Email 开发服务器,访问 http://localhost:3000 预览;可编写测试脚本发送测试邮件;开发环境可用 Mailtrap,跨客户端渲染测试可用 Litmus 或 Email on Acid。
高级模式:支持附件、通过 EventBridge Cron 定时发送、以及用 Resend tags 与 get 查询打开点击分析。常见类型包括欢迎、验证、重置密码、收据发票、发货通知等事务性邮件,以及周报、成就解锁、弃购召回、再激活、产品更新等互动邮件。
限制:资料未提供具体价格、收费模式、性能指标或平台兼容性细节,暂未提供。