使用 Resend API 实现网站邮件功能的详细指南

一、准备工作

1. 注册 Resend 账号

• 访问 Resend 官网 并注册账号。
• 在 Resend 的 API Keys 页面创建一个新的 API Key，用于后续的邮件发送。

2. 注册 Cloudflare 账号

• 如果你还没有 Cloudflare 账号，访问 Cloudflare 官网 并注册。
• 将你的域名添加到 Cloudflare，并确保 DNS 解析正常。

3. 安装 Wrangler CLI

• Wrangler 是 Cloudflare 官方提供的用于管理 Workers 的命令行工具。安装方法如下：
  bash 复制

  npm install -g wrangler

• 登录你的 Cloudflare 账号：
  bash 复制

  wrangler login

  这将打开一个浏览器窗口，要求你授权访问 Cloudflare 账号。

二、创建和配置 Cloudflare Worker

1. 初始化 Worker 项目

• 使用 Wrangler 创建一个新的 Worker 项目：
  bash 复制

  wrangler generate my-email-worker

  这将创建一个名为 my-email-worker 的目录。

2. 配置 wrangler.toml

• 进入项目目录：
  bash 复制

  cd my-email-worker

• 编辑 wrangler.toml 文件，添加以下配置：
  toml 复制

  name = "my-email-worker"
  type = "javascript"
   
  account_id = "你的 Cloudflare 账号 ID"
  zone_id = "你的 Cloudflare 域名 Zone ID"
   
  [env.production]
  vars = { RESEND_API_KEY = "你的 Resend API Key" }

  你可以从 Cloudflare 仪表盘获取 account_id 和 zone_id。

3. 编写 Worker 代码

• 编辑 src/index.js 文件，添加以下代码：
  JavaScript 复制

  addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
  })
   
  async function handleRequest(request) {
    const url = new URL(request.url)
    if (url.pathname === '/send-email') {
      const data = await request.json()
      const { to, subject, html } = data
   
      const response = await fetch('https://api.resend.com/emails', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${RESEND_API_KEY}`
        },
        body: JSON.stringify({
          to,
          subject,
          html
        })
      })
   
      if (response.ok) {
        return new Response('Email sent successfully!', { status: 200 })
      } else {
        return new Response('Failed to send email', { status: 500 })
      }
    }
   
    return new Response('Invalid endpoint', { status: 404 })
  }

  这段代码监听 /send-email 路径，接收邮件内容并通过 Resend API 发送邮件。

4. 本地测试

• 在本地运行 Worker，预览效果：
  bash 复制

  wrangler dev

  访问 http://localhost:8787/send-email，并通过 Postman 或其他工具测试发送邮件。

三、部署 Worker

• 部署到 Cloudflare：
  bash 复制

  wrangler publish

  部署完成后，你将获得一个全球可用的 Worker URL。

四、在 Next.js 中集成邮件发送功能

1. 创建 Next.js 项目

• 如果你还没有 Next.js 项目，可以通过以下命令创建：
  bash 复制

  npx create-next-app my-next-app
  cd my-next-app

2. 添加邮件发送 API

• 在 Next.js 项目中创建一个 API 路由，例如 pages/api/send-email.js：
  JavaScript 复制

  import { fetch } from 'next/dist/compiled/@edge-runtime/primitives/fetch'
   
  export default async function handler(req, res) {
    if (req.method === 'POST') {
      const { to, subject, html } = req.body
      const response = await fetch('https://your-worker-url/send-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ to, subject, html })
      })
   
      if (response.ok) {
        res.status(200).json({ message: 'Email sent successfully!' })
      } else {
        res.status(500).json({ message: 'Failed to send email' })
      }
    } else {
      res.status(405).json({ message: 'Method not allowed' })
    }
  }

  替换 https://your-worker-url/send-email 为你部署的 Worker URL。

3. 前端调用

• 在 Next.js 页面中调用 API 发送邮件：
  JavaScript 复制

  const sendEmail = async () => {
    const response = await fetch('/api/send-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        to: 'recipient@example.com',
        subject: 'Hello from Next.js',
        html: '<h1>Hello, World!</h1>'
      })
    })
   
    if (response.ok) {
      console.log('Email sent successfully!')
    } else {
      console.error('Failed to send email')
    }
  }

五、测试和验证

• 在 Next.js 页面中触发 sendEmail 函数，检查邮件是否成功发送到目标邮箱。
• 如果遇到问题，可以查看 Resend 的日志或 Cloudflare 的活动日志。