TanStarter 文档邮件
学习如何使用 Resend 和 React Email 模板设置和使用邮件功能
TanStarter 使用 Resend 进行邮件发送，使用 React Email 构建邮件模板。
设置
创建 Resend 账户
在 resend.com 创建 Resend 账户。
获取 API 密钥
在 Resend 控制台中点击 API Keys > Create API Key，设置权限为 Send emails 或 Full access。获取 API 密钥，并添加到环境变量文件：
RESEND_API_KEY=your-resend-api-key更新网站配置
更新 website.ts 文件以使用 Resend 作为邮件提供商，并设置默认发送者邮箱地址：
请注意 fromEmail 是发送邮件的邮箱地址，supportEmail 是接收邮件的邮箱地址，邮箱地址后缀是您的邮箱域名。
export const websiteConfig = {
// ...其他配置
mail: {
enable: true, // 是否启用邮件功能
provider: 'resend', // 要使用的邮件提供商
fromEmail: 'TanStarter <support@example.com>', // 发送邮件的邮箱地址
supportEmail: 'TanStarter <support@example.com>', // 接收邮件的邮箱地址
},
// ...其他配置
}如果您正在设置环境，现在可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。
环境配置
设置环境变量
自定义
创建新的邮件模板
- 在
src/mail/templates目录中创建邮件模板：
import { EmailLayout } from '../components/email-layout';
import { EmailButton } from '../components/email-button';
interface MyCustomEmailProps {
username: string;
actionUrl: string;
}
export function MyCustomEmail({
username,
actionUrl,
}: MyCustomEmailProps) {
return (
<EmailLayout>
<p>您好 {username}！</p>
<p>感谢您加入我们的平台。点击下面的按钮开始使用。</p>
<EmailButton href={actionUrl}>开始使用</EmailButton>
</EmailLayout>
);
}-
在
types.ts中更新EmailTemplates接口以包含您的新邮件模板。 -
本地预览您的模板：
pnpm email:dev- 在您的代码中使用模板：
await sendEmail({
to: 'user@example.com',
template: 'myCustomEmail',
context: {
username: 'John',
actionUrl: 'https://example.com/start',
},
});创建新的邮件提供商
TanStarter 支持扩展新的邮件提供商：
- 在
src/mail/provider目录中创建新文件（例如sendgrid.ts） - 实现
MailProvider接口，该接口定义在src/mail/types.ts中，需要实现以下方法：
import type {
MailProvider,
SendEmailResult,
SendRawEmailParams,
SendTemplateParams,
} from '../types';
export class SendGridProvider implements MailProvider {
getProviderName(): string {
return 'sendgrid';
}
async sendTemplate(params: SendTemplateParams): Promise<SendEmailResult> {
// 使用模板发送邮件的逻辑
}
async sendRawEmail(params: SendRawEmailParams): Promise<SendEmailResult> {
// 发送原始 HTML 邮件的逻辑
}
}- 在
src/mail/index.ts中的providerRegistry注册新的邮件提供商：
import { SendGridProvider } from './provider/sendgrid';
const providerRegistry: Record<MailProviderName, ProviderFactory> = {
resend: () => new ResendProvider(),
sendgrid: () => new SendGridProvider(),
};下一步
现在您了解了如何在 TanStarter 中使用邮件，您可能想要探索这些相关功能：