LogoMkSaaS文档
LogoMkSaaS文档
首页模板介绍代码库视频教程入门文档环境配置
网站配置

功能集成

数据库身份验证邮件邮件订阅存储支付积分定时任务AI 功能统计分析通知验证码聊天框联盟营销

自定义

元数据字体主题图片国际化博客文档组件页面落地页用户管理密钥管理

代码库

IDE 设置项目结构格式化和代码检查更新代码库
X (Twitter)

邮件

学习如何使用 Resend 和 React Email 模板设置和使用邮件功能

MkSaaS 使用 Resend 进行邮件发送，使用 React Email 创建美观的邮件模板。

设置

创建 Resend 账户

在 resend.com 创建 Resend 账户。

获取 API 密钥

在 Resend 控制台中点击 API Keys > Create API Key，设置权限为 Send emails 或 Full access。获取 API 密钥，并添加到环境变量文件：

.env
RESEND_API_KEY=YOUR-RESEND-API-KEY

更新网站配置

更新 website.tsx 文件。请注意 fromEmail 是发送邮件的邮箱地址，supportEmail 是接收邮件的邮箱地址：

src/config/website.tsx
export const websiteConfig = {
  // ...其他配置
  mail: {
    enable: true,
    provider: 'resend',
    fromEmail: 'support@example.com',
    supportEmail: 'support@example.com',
  },
  // ...其他配置
}

如果您正在设置环境，现在可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。

环境配置

设置环境变量

使用方法

import { sendEmail } from '@/mail';

// 基于模板发送邮件
await sendEmail({
  to: 'user@example.com',
  template: 'verifyEmail',
  context: {
    name: 'John Doe',
    url: 'https://example.com/verify?token=abc123',
  },
  locale: 'en', // 可选，默认为配置的默认语言
});

// 发送原始内容邮件
await sendEmail({
  to: 'user@example.com',
  subject: '欢迎来到我们的平台',
  html: '<h1>您好！</h1><p>欢迎来到我们的平台。</p>',
  text: '您好！欢迎来到我们的平台。', // 可选
});

邮件模板

MkSaaS 包含几个预构建的邮件模板：

预览邮件

在发送前预览邮件：

pnpm run email

这将启动一个本地服务器，允许您在浏览器中预览邮件。

预览邮件

创建自定义模板

  1. 在 src/mail/templates 目录中创建邮件模板：
src/mail/templates/my-custom-email.tsx
import { BaseEmailProps } from '@/mail/types';
import { EmailLayout } from '../components/email-layout';
import { EmailButton } from '../components/email-button';

interface MyCustomEmailProps extends BaseEmailProps {
  username: string;
  actionUrl: string;
}

export function MyCustomEmail({
  username,
  actionUrl,
  messages,
  locale
}: MyCustomEmailProps) {
  return (
    <EmailLayout>
      <p>您好 {username}！</p>
      <p>感谢您加入我们的平台。点击下面的按钮开始使用。</p>
      <EmailButton href={actionUrl}>开始使用</EmailButton>
    </EmailLayout>
  );
}
  1. 在 types.ts 中更新 EmailTemplates 接口：
src/mail/types.ts
export interface EmailTemplates {
  // ... 现有模板
  myCustomEmail: MyCustomEmail;
}
  1. 使用模板：
await sendEmail({
  to: 'user@example.com',
  template: 'myCustomEmail',
  context: {
    username: 'John',
    actionUrl: 'https://example.com/start',
  },
});

扩展新的邮件提供商

MkSaaS 支持扩展新的邮件服务提供商：

  1. 在 src/mail/provider 目录中创建新文件
  2. 从 types.ts 实现 MailProvider 接口
  3. 在 index.ts 中更新邮件服务提供商选择逻辑

示例实现：

src/mail/provider/my-provider.ts
import { MailProvider, SendEmailResult, SendRawEmailParams, SendTemplateParams } from '@/mail/types';

export class MyProvider implements MailProvider {
  constructor() {
    // 初始化您的邮件服务提供商
  }

  public async sendTemplate(params: SendTemplateParams): Promise<SendEmailResult> {
    // 发送模板邮件的实现代码
  }

  public async sendRawEmail(params: SendRawEmailParams): Promise<SendEmailResult> {
    // 发送原始邮件的实现代码
  }

  public getProviderName(): string {
    return 'my-provider';
  }
}

然后在 index.ts 中更新邮件服务提供商选择：

src/mail/index.ts
import { MyProvider } from './provider/my-provider';

export const initializeMailProvider = (): MailProvider => {
  if (!mailProvider) {
    if (websiteConfig.mail.provider === 'resend') {
      mailProvider = new ResendProvider();
    } else if (websiteConfig.mail.provider === 'custom') {
      mailProvider = new CustomMailProvider();
    } else {
      throw new Error(
        `不支持的邮件服务提供商: ${websiteConfig.mail.provider}`
      );
    }
  }

  return mailProvider;
};

视频教程

下一步

数据库

配置数据库

身份验证

配置身份验证

邮件订阅

配置邮件列表的订阅

环境配置

配置环境变量

身份验证

学习如何在 MkSaaS 中使用 Better Auth 设置和使用身份验证

邮件订阅

学习如何设置和使用 Resend 或 Beehiiv 进行邮件订阅管理

目录

设置
创建 Resend 账户
获取 API 密钥
更新网站配置
使用方法
邮件模板
预览邮件
创建自定义模板
扩展新的邮件提供商
视频教程
下一步