使用 Hisend SDK 在 Next.js 中发送电子邮件

Source: Dev.to

前置条件

• 使用 App Router 的 Next.js 项目
• 已安装 Node.js
• 已验证用于发送邮件的域名

设置 Hisend

1. 注册 – 访问 hisend.app 并创建免费账户。
2. 创建项目 – 设置你的第一个工作区/项目。
3. 添加域名 – 输入你想要发送邮件的域名（例如 yourdomain.com）。
4. 配置 DNS – Hisend 会生成 SPF、DKIM 和 DMARC 记录。将它们添加到你的 DNS 提供商（Cloudflare、Vercel、Hetzner 等）以验证域名。
5. 生成 API 密钥 – 在项目设置中创建新的 API 密钥，并复制以备后用。

安装 Hisend SDK

npm install @hisend/sdk
# or yarn add @hisend/sdk
# or pnpm add @hisend/sdk
# or bun add @hisend/sdk

配置 API 密钥

在项目根目录的 .env.local 文件中添加密钥：

HISEND_API_KEY=your_api_key_here

创建路由处理程序

在 App Router 中，将第三方 API 调用放在路由处理程序中，以保持密钥在服务器端。

创建 app/api/send/route.ts（如果不使用 TypeScript，则为 .js）：

import { NextResponse } from 'next/server';
import { Hisend } from '@hisend/sdk';

// Initialize the SDK with your API key
const hisend = new Hisend(process.env.HISEND_API_KEY);

export async function POST(request: Request) {
  try {
    const { email, name } = await request.json();

    const data = await hisend.emails.send({
      from: 'Acme Team ', // must match your verified domain
      to: [email],
      subject: `Welcome to the app, ${name}!`,
      html: `
## Hi ${name},

Thanks for signing up. We are thrilled to have you on board.

Cheers,
The Acme Team
      `,
    });

    return NextResponse.json({ success: true, data });
  } catch (error) {
    return NextResponse.json(
      { success: false, error: 'Failed to send email' },
      { status: 500 }
    );
  }
}

从客户端调用 API

'use client';

export default function SignupButton() {
  const sendWelcomeEmail = async () => {
    await fetch('/api/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: 'user@example.com',
        name: 'Alex',
      }),
    });
    alert('Email sent successfully!');
  };

  return (
    <button onClick={sendWelcomeEmail}>Send Welcome Email</button>
  );
}

为什么选择 Hisend？

• 开箱即用的 GDPR 合规 – 托管在 Hetzner（纽伦堡）和 AWS（法兰克福）；数据永不离开欧盟。
• 简化的邮件检索 – 单次请求即可返回正文、发件人姓名和附件。
• 原生线程支持 – 直接通过 API 管理邮件会话。
• 自动转发 – 内置支持，无需额外的变通方案。

浏览完整文档并开始发送邮件，请访问 hisend.app。

祝编码愉快！ 🚀