邮件配置

在DirEasy中，我们已经集成了多个邮件模板，您可以直接使用：

launch-reminder.tsx - 在发布日，向用户发送关于他们正在进行的发布的提醒邮件
reset-password.tsx - 发送密码重置邮件
verify.tsx - 发送注册验证邮件
winner-badge.tsx - 在发布日，向当天的获胜者发送邮件通知

配置指南

设置发件人和收件人邮箱地址

设置发件人邮箱地址EMAIL_FROM环境变量。这将作为所有邮件的发件人地址。请确保您的邮件提供商已验证该邮箱地址和域名
设置NEXT_PUBLIC_CONTACT_EMAIL环境变量。这是用户用来联系您的邮箱地址

.env

NEXT_PUBLIC_CONTACT_EMAIL=
EMAIL_FROM=

设置邮件服务提供商

您可以使用Resend或Plunk作为邮件服务提供商。它们都提供免费额度，且Plunk是开源的，可以自托管。

.env

# plunk或resend
EMAIL_PROVIDER=
 
# [仅在使用resend时需要]
#RESEND_API_KEY=
 
# [仅在使用plunk时需要]
#PLUNK_TOKEN=
## [仅在使用自托管Plunk时需要]
#PLUNK_BASE_URL=https://plunk.yourdomain/api/v1/

设置受众群体[可选]

默认情况下，新用户注册时会自动添加到邮件提供商的受众群体中。这使您可以使用提供商的受众群体功能发送新闻邮件。

.env

# 仅当您希望在用户注册时自动添加到Resend受众群体时需要[默认为true，设置为false可禁用]
ADD_TO_EMAIL_AUDIENCE_WHEN_SIGNED_UP=false
 
# 仅当您需要支持resend受众群体时需要(plunk不需要)
#RESEND_AUDIENCE_ID=your_audience_id

邮件模板

我们集成了React Email - 一组高质量、无样式的组件，用于使用React和TypeScript创建精美的邮件。模板位于/emails目录中。

如需修改邮件模板，可以直接修改/emails文件夹中对应的'.tsx'文件。

创建邮件模板

要创建新的邮件模板，只需在emails文件夹中创建一个新的.tsx文件。这是一个简单的邮件模板示例：

import { Button, Html } from "@react-email/components";
import * as React from "react";
 
export default function Email() {
  return (
    <Html>
      <Button
        href="https://example.com"
        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
      >
        点击我
      </Button>
    </Html>
  );
}

预览邮件

要预览邮件模板，请运行：

终端

pnpm dev:email

react email预览运行在http://localhost:3003。