使用Resend发送React/HTML邮件：返回200但邮箱未收到

问题描述 #

使用Resend结合React组件发送邮件时出现以下异常：

• 纯文本邮件：接口返回200，Resend日志显示已投递，收件箱可正常接收
• React渲染的HTML邮件：前2封能正常收到，后续邮件同样返回200、Resend日志显示已投递，但收件箱（含垃圾邮件文件夹）完全找不到；改用直接传入HTML内容也存在相同问题

排查与解决方案 #

1. 内容重复触发反垃圾拦截 #

短时间内发送高度一致的HTML邮件，极易被邮箱服务商的反垃圾系统判定为批量垃圾邮件，直接拦截（不会进入垃圾文件夹，而是直接丢弃）。纯文本邮件因特征简单，不容易触发该机制。

• 解决方法：
  • 给每封邮件添加唯一动态内容，比如在邮件底部追加用户ID、随机字符串，或根据收件人修改部分文本
  • 控制发送频率，避免短时间内连续发送相同内容的邮件

2. 缺少纯文本 fallback 内容 #

当前邮件只提供HTML版本，未配置对应的纯文本备用内容。部分邮箱服务商对仅含HTML的邮件审核更严格，尤其是批量发送场景。

• 解决方法：
  在resend.emails.send的参数中添加text字段，补充纯文本版本：

  const data = await resend.emails.send({
    from: 'Stage <no-reply@ourdomain.be>',
    to: ['myemail@myemail.be'],
    subject: 'Uitnodiging Energy!',
    react: EmailTemplate({ firstName: 'John' }) as React.ReactElement,
    text: `Welkom, John!`, // 对应HTML内容的纯文本版本
  });
  

3. 发件域名信誉临时下降 #

连续发送邮件后，发件域名ourdomain.be的信誉可能被邮箱服务商临时降低，导致后续邮件被拦截。

• 解决方法：
  • 查看Resend控制台的邮件投递详情，确认是否有服务商返回的软退信/硬退信提示
  • 核对发件域名的SPF、DKIM、DMARC记录是否配置正确（Resend通常会自动配置，建议手动验证）

4. Resend内部发送限制 #

免费版或基础版Resend可能存在隐性的批量发送限制，短时间内发送多封相同内容的邮件会被静默处理（返回200但实际未投递到收件箱）。

• 解决方法：
  • 更换不同的收件邮箱进行测试
  • 间隔10-15分钟后再发送邮件
  • 若为付费版，联系Resend官方支持确认是否触发了内部限制

相关代码 #

route.ts #

import { NextResponse } from 'next/server';
import { EmailTemplate } from '../../components/emailTemplate';
import { Resend } from 'resend';
import { getSession } from '@auth0/nextjs-auth0';
import * as React from 'react';


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

export async function POST(request: Request) {
  // 获取邮件信息
  const { body } = request;
  // 解析body
  let passedValue = await new NextResponse(body).text();
  let valueToJson = JSON.parse(passedValue);
  const { email } = valueToJson;
  console.log(email);

  // 获取当前用户
  const session = await getSession();
  const user = session?.user;

  // 尝试发送邮件
  try {
    console.log("in try");
    const data = await resend.emails.send({
      from: 'Stage <no-reply@ourdomain.be>',
      to: ['myemail@myemail.be'],
      subject: 'Uitnodiging Energy!',
      // text: 'text',
      react: EmailTemplate({ firstName: 'John' }) as React.ReactElement,
      // react: EmailTemplate({ email:email, companyId:'clte87w710003glwww0slvgvp', username:user?.given_name }),
    });
    console.log(data);
    return Response.json(data);
  } catch (error) {
    console.log(error);
    return Response.json({ error });
  }
}

emailTemplate.tsx #

import * as React from 'react';


interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

export default EmailTemplate;

内容的提问来源于stack exchange，提问作者Hilde