使用 CloudFlare 和 Resend 快速实现网站邮件订阅（newsletter）功能

RESEND_API_KEY=
ADMIN_EMAIL=
RESEND_AUDIENCE_ID=

// components/footer/Newsletter.tsx
// 完整代码地址：https://github.com/weijunext/nextjs-15-starter/blob/main/components/footer/Newsletter.tsx
 
"use client";
 
export function Newsletter() {
  // 状态管理：邮箱、订阅状态和错误信息
  const [email, setEmail] = useState("");
  const [subscribeStatus, setSubscribeStatus] = useState("idle");
  const [errorMessage, setErrorMessage] = useState("");
 
  const handleSubscribe = async (e) => {
    try {
      // 设置加载状态
      setSubscribeStatus("loading");
      
      // API调用发送订阅请求
      const response = await fetch("/api/newsletter", {
        method: "POST",
        body: JSON.stringify({ email }),
        // 设置headers...
      });
 
      // 处理响应...
 
      // 5秒后重置状态...
    } catch (error) {
      // 错误处理...
 
      // 5秒后重置状态...
    }
  };
 
  return (
    <div>
      <form onSubmit={handleSubscribe}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          disabled={subscribeStatus === "loading"}
        />
        <button disabled={subscribeStatus === "loading"}>
          {subscribeStatus === "loading" ? "订阅中..." : "订阅"}
        </button>
        
        {/* 状态反馈信息 */}
        {subscribeStatus === "success" && <p>订阅成功！</p>}
        {subscribeStatus === "error" && <p>{errorMessage}</p>}
      </form>
    </div>
  );
}

// lib/email.ts
// 完整代码地址：https://github.com/weijunext/nextjs-15-starter/blob/main/lib/email.ts
 
function validateEmail(email: string) {
  // 验证邮箱格式
  // 检查域名长度
  // 检查一次性邮箱
  // 检查特殊字符
}
 
function normalizeEmail(email: string) {
  // 标准化处理
  // 处理别名 (如 Gmail 的点号和加号后缀)
}

// app/api/newsletter/route.ts
// 完整代码地址：https://github.com/weijunext/nextjs-15-starter/blob/main/app/api/newsletter/route.ts
 
import { normalizeEmail, validateEmail } from '@/lib/email';
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';
import { Resend } from 'resend';
 
// 初始化 Resend
const resend = new Resend(process.env.RESEND_API_KEY);
// Resend Audience ID
const AUDIENCE_ID = process.env.RESEND_AUDIENCE_ID!;
 
export async function POST(request: Request) {
  try {
    // 处理请求数据
    const { email } = await request.json();
    const normalizedEmail = normalizeEmail(email);
 
    // 验证邮箱……
 
    // 生成退订令牌和链接
    const unsubscribeToken = Buffer.from(normalizedEmail).toString('base64');
    const unsubscribeLink = `${process.env.NEXT_PUBLIC_SITE_URL}/unsubscribe?token=${unsubscribeToken}`;
 
    // 检查用户是否已存在
    const list = await resend.contacts.list({ audienceId: AUDIENCE_ID });
    if (list.data?.data.find((item) => item.email === normalizedEmail)) {
      return NextResponse.json({ success: true, alreadySubscribed: true });
    }
 
    // 将用户添加到 Resend Audience
    await resend.contacts.create({
      audienceId: AUDIENCE_ID,
      email: normalizedEmail,
      // 注释: 可添加更多用户信息
    });
 
    // 发送欢迎邮件
    await resend.emails.send({
      from: process.env.ADMIN_EMAIL!,
      to: email,
      subject: 'Welcome to Next Forge',
      html: `
        <h2>Welcome to Next Forge</h2>
        <p>Thank you for subscribing to the newsletter. You will receive the latest updates and news.</p>
        <p style="margin-top: 20px; font-size: 12px; color: #666;">
          If you wish to unsubscribe, please <a href="${unsubscribeLink}">click here</a>
        </p>
      `,
      headers: {
        "List-Unsubscribe": `<${unsubscribeLink}>`,
        "List-Unsubscribe-Post": "List-Unsubscribe=One-Click"
      }
    });
 
    return NextResponse.json({ success: true });
  } catch (error) {
    console.error('邮箱订阅失败:', error);
    return NextResponse.json({ error: '服务器处理请求失败' }, { status: 500 });
  }
}

// app/unsubscribe/page.tsx
// 完整代码地址：https://github.com/weijunext/nextjs-15-starter/blob/main/app/unsubscribe/page.tsx
export default async function UnsubscribePage({ searchParams }: { searchParams: { token?: string } }) {
  let status: "error" | "success" = "error";
  let email = "";
  let errorMessage = "处理您的退订请求时出现问题";
 
  const token = searchParams.token;
 
  if (!token) {
    errorMessage = "未提供退订令牌";
  } else {
    // 执行退订操作
    const result = await unsubscribe(token);
    
    if (result.success) {
      status = "success";
      email = result.email || "";
    } else {
      errorMessage = result.error || "处理您的退订请求时出现问题";
    }
  }
 
  return (
    <div>
      <h1>邮件订阅管理</h1>
      {status === "success" ? (
        <div>
          <p>您已成功退订「Next.js 中文文档」的邮件通知。</p>
          <p>邮箱: {email}</p>
        </div>
      ) : (
        <div>
          <p>{errorMessage}</p>
          <p>请确保您使用了正确的退订链接。</p>
        </div>
      )}
    </div>
  );
}