Resend 邮件通知

NEXTY.DEV 已经内置了 Resend 作为邮件服务商，并封装好了常用工具函数和邮件模板。你无需从零配置，只需要按照本文步骤，就可以：

• 新增自己的邮件模板（例如订单通知、会员到期提醒等）
• 在服务端 Action 中发送邮件
• 保证发件人信息、退订链接等符合最佳实践

前置步骤

• 使用邮件通知功能前，请先完成 Resend 配置

一、整体架构概览

在 NEXTY.DEV 中，邮件相关的核心文件有：

• Resend 客户端初始化：lib/resend/index.ts
• 统一发送入口 & 联系人管理：actions/resend/index.ts
• 具体业务场景 Action 示例：actions/newsletter/index.ts
• React 邮件模板：emails/*.tsx

推荐你把所有和 Resend 相关的调用，都统一走 actions/resend，不要在业务里自己 new Resend()，这样可以：

• 统一管理API Key、发件人邮箱、退订逻辑
• 避免在多个地方重复配置 Resend 客户端

二、环境变量与基础配置

在开始写代码之前，请确保以下环境变量已经配置：

• RESEND_API_KEY：你的 Resend API Key
• ADMIN_NAME：发件人名称（例如：NEXTY.DEV Team）
• ADMIN_EMAIL：发件人邮箱（例如：[email protected]）
• NEXT_PUBLIC_SITE_URL：站点完整域名，用于生成邮件中的绝对链接

在本地开发环境中，你可以在 .env.local 中这样配置（示例）：

RESEND_API_KEY=your_resend_api_key
ADMIN_NAME="NEXTY.DEV Team"
ADMIN_EMAIL="[email protected]"
NEXT_PUBLIC_SITE_URL=https://yourdomain.com

三、Resend 客户端：统一入口

NEXTY.DEV 已经在 lib/resend/index.ts 中封装好了 Resend 客户端，如果缺少 Key，会在控制台给出警告。

你在其他文件中只需要：

import resend from '@/lib/resend';

但大部分场景不需要你直接用这个实例，而是应该优先使用下一节介绍的 sendEmail 方法。

四、核心发送工具：actions/resend/index.ts

actions/resend/index.ts 是你做邮件扩展时最重要的文件，它提供了两个方法：

• sendEmail：发送邮件，同时把用户加入 Resend Contacts
• removeUserFromContacts：从 Contacts 中移除用户（常用于退订）

sendEmail 的参数定义如下（已简化说明）：

interface SendEmailProps {
  email: string;                         // 收件人邮箱
  subject: string;                       // 邮件标题
  react: React.ComponentType<any> | React.ReactElement; // React 邮件模板
  reactProps?: Record<string, any>;      // 传给模板的 props（可选）
}

内部会帮你做这些事情：

• 如果 email 为空，直接返回错误
• 如果 Resend 环境变量没配置好，返回错误
• 使用 ADMIN_NAME + ADMIN_EMAIL 组合出发件人
• 基于收件人邮箱生成退订 token 和退订链接
• 用 resend.emails.send 发送邮件，并在 Header 里带上标准的 List-Unsubscribe 字段

五、内置示例：订阅 Newsletter 的欢迎邮件

actions/newsletter/index.ts 展示了一个完整的示例，流程大致为：

• 对用户输入的邮箱做归一化和校验
• 做频率限制（防止恶意刷接口）
• 准备好邮件标题和退订链接
• 调用 sendEmail 发送 NewsletterWelcomeEmail 模板

片段逻辑说明（伪代码级别）：

await sendEmail({
  email: normalizedEmail,
  subject: `Welcome to ${siteConfig.name} Newsletter!`,
  react: NewsletterWelcomeEmail,
  reactProps: {
    email: normalizedEmail,
    unsubscribeLink,
  },
});

你在自己业务中可以完全参考这套写法，只需要替换：

• 模板组件（react 字段）
• 模板 props（reactProps）
• subject 文案

六、注意事项

• Resend 免费计划可以保存 1000 个联系人，每个月可以发送 3000 篇，如果无法满足你的需求，你需要升级计划
• 新建邮件模板时，需保持不同邮件模板风格一致，这样对你的品牌形象最有利。
• 邮件模板内品牌信息使用了 siteConfig.name 和 siteConfig.url，你需要确保 config/site.ts 中的配置正确。
• 邮件模板无法使用 lucide-react，请使用 SVG 图标或者图片绝对链接。
• 邮件模板无法使用 tailwindcss，请使用内联样式。
• 邮件模板内不能使用相对链接，请使用绝对链接。

新建邮件模板时，让 AI 参照已有邮件模板新建模版即可，无需人工检查各个细节。