出海网站实战：邮件订阅怎么做？Resend 对接全流程分享

2025年12月5日 90点热度 0人点赞 0条评论

每天一个出海工具/技巧，今天发现怎么给网站搭一套邮件订阅系统。

做网站，邮件是一个非常好的营销方式，为数不多的直接触达用户的渠道。只要用户订阅了，你发的东西就直接到用户的收件箱。简单说几点好处：

私域流量。订阅者名单是你自己的，不会因为平台政策变化说没就没。做自媒体这几年见过不少人，公众号被封、账号被限流，辛辛苦苦积累的用户直接归零。邮件列表不存在这个问题。

打开率高。做得好的 Newsletter 打开率能到 30-50%，当然前提是内容要有价值，不能天天发广告。

变现潜力。积累到一定订阅量，可以接广告、做付费订阅，或者给自己产品导流。很多独立开发者的 Newsletter 都是重要收入来源。

更重要的是国外用户习惯用邮箱，他们日常沟通、接收信息，邮箱是主力。你们看国外的 SaaS 产品，几乎都有 Newsletter 订阅入口。如果做出海站，那邮件订阅基本是标配。

刚给我的导航站 toolcenter.ai 接了一套 Newsletter 系统，用的是 Resend。

为什么选 Resend？

市面上邮件服务很多，SendGrid、Mailchimp、AWS SES 都可以。我选 Resend 主要是这几点：

1、免费额度够用：每月 3000 封，前期项目完全够了

2、API 简单：几行代码就行，配置不复杂

开始对接

整个对接流程，还是老样子，代码让 Claude Code 写。域名验证、DNS 配置这些，自己操作。

第一步：注册账号

访问 resend.com 注册，支持 Google 或 GitHub 登录。

注册完进到控制台，会引导你发第一封邮件。

第二步：添加域名

点 "Add Domain" 添加你的域名。

这里有个建议用子域名，别用主域名。随便拿一个域名来举例，比如用 mail.ipengtao.com 而不是直接用 ipengtao.com。

因为邮件发送是有信誉这个概念的。万一哪天邮件被投诉多了，影响的是子域名，不会连累你的主域名。

填写域名信息，Region 选离用户近的，亚洲用户选 Tokyo。

第三步：配置 DNS

添加完域名，Resend 会给你一堆 DNS 记录要配置：

类型	用途
TXT (DKIM)	邮件签名验证
MX	发送邮件
TXT (SPF)	防伪造验证
TXT (DMARC)	反钓鱼策略

如果域名在 DNSPod（腾讯云），直接批量添加：

添加完提交：

第四步：等验证

DNS 记录加完后要等 Resend 验证。快的话几分钟，慢的话几小时，取决于 DNS 传播速度。

验证通过后状态变绿：

第五步：创建 API Key

进 "API Keys" 页面，创建一个密钥：

配置选项：

Name：随你定，比如 my-newsletter
Permission：默认 Full access
Domain：可以限制只能用于特定域名

注意：API Key 只显示一次，复制后赶紧存好。

第六步：配置环境变量

把 API Key 放到环境变量里：

# .env.production
RESEND_API_KEY=re_xxxxxxxxxxxxxxxx
EMAIL_FROM=newsletter@mail.yourdomain.com
EMAIL_REPLY_TO=contact@yourdomain.com

关于邮箱地址：

EMAIL_FROM：必须用已验证的域名，比如 newsletter@mail.ipengtao.com
EMAIL_REPLY_TO：可以是任意邮箱，用你能收到邮件的真实邮箱就行

这里有个坑，在 Vercel 配置环境变量时，网页粘贴可能会多一个换行符。如果发邮件报 "Invalid from field" 之类的错，多半是这个问题。我已经不止一次遇到了，本来为了省事让cc 操作，反而因为这个错误浪费了一些时间。

可以用命令行添加，避免换行符问题，或者直接去vercel后台添加。

echo -n "re_xxxxx" | vercel env add RESEND_API_KEY production

第七步：代码层面

安装 SDK：

npm install resend
# 或
pnpm add resend

发邮件的核心代码很简单：

// lib/email/resend.ts
import { Resend } from 'resend'

const resend = new Resend(process.env.RESEND_API_KEY)

export async function sendWelcomeEmail(email: string, confirmToken: string) {
  const confirmUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/api/newsletter/confirm?token=${confirmToken}`

  const { data, error } = await resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to: email,
    replyTo: process.env.EMAIL_REPLY_TO,
    subject: '确认订阅工具岛周刊 🎉',
    html: getEmailTemplate(confirmUrl), // 你的邮件模板
  })

  if (error) {
    console.error('Failed to send email:', error)
    return { success: false, error }
  }
  return { success: true, data }
}

订阅接口：

// app/api/newsletter/subscribe/route.ts
import { NextRequest, NextResponse } from 'next/server'
import crypto from 'crypto'

export async function POST(request: NextRequest) {
  const { email } = await request.json()

  // 生成确认 token
  const confirmToken = crypto.randomBytes(32).toString('hex')
  const unsubscribeToken = crypto.randomBytes(32).toString('hex')

  // 保存到数据库（我用的 Supabase）
  await supabase.from('newsletter_subscribers').insert({
    email,
    status: 'pending',
    confirm_token: confirmToken,
    unsubscribe_token: unsubscribeToken,
  })

  // 发送确认邮件
  await sendWelcomeEmail(email, confirmToken)

  return NextResponse.json({ success: true })
}