Next.js+Resend邮件提交组件出现500内部服务器错误求助

1. 检查EmailTemplate组件的导出与定义 #

核心问题大概率是组件导出/导入不匹配，或者组件本身未正确定义为函数：

• 默认导出示例（推荐）：

// EmailTemplate.jsx
export default function EmailTemplate({ name, email, message }) {
  return (
    <div>
      <h2>新的联系消息</h2>
      <p>发送人：{name}</p>
      <p>邮箱：{email}</p>
      <p>内容：{message}</p>
    </div>
  );
}

• 如果用命名导出，要确保导入时对应：

// EmailTemplate.jsx
export function EmailTemplate({ name, email, message }) { /* 组件内容 */ }

// 导入时必须加花括号
import { EmailTemplate } from '@/components/EmailTemplate';

2. 修正API路由（route.js）的导入与调用 #

确保在API路由中正确导入组件，并以函数方式调用传递props：

// app/api/contact/route.js
import { Resend } from 'resend';
import EmailTemplate from '@/components/EmailTemplate'; // 对应默认导出

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

export async function POST(request) {
  try {
    const { name, email, message } = await request.json();
    
    const { data, error } = await resend.emails.send({
      from: '表单通知 <onboarding@resend.dev>',
      to: ['你的目标邮箱@example.com'],
      subject: '新的联系表单提交',
      react: EmailTemplate({ name, email, message }), // 必须是函数调用，传递参数
    });

    if (error) return Response.json({ error }, { status: 400 });
    return Response.json(data);
  } catch (err) {
    return Response.json({ error: err.message }, { status: 500 });
  }
}

3. 确认Contact.jsx的表单提交逻辑 #

保证表单提交时正确发送JSON格式数据到API：

// Contact.jsx
'use client';

export default function Contact() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const payload = Object.fromEntries(formData);

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (!res.ok) throw new Error('提交失败');
      alert('消息发送成功');
      e.target.reset();
    } catch (err) {
      alert(`提交出错：${err.message}`);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input type="text" name="name" placeholder="姓名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <textarea name="message" placeholder="你的消息" rows={4} required />
      <button type="submit" className="px-4 py-2 bg-blue-500 text-white">发送</button>
    </form>
  );
}

4. 常见错误排查清单 #

• 导出/导入不匹配：默认导出对应无花括号导入，命名导出必须带花括号
• EmailTemplate未定义为函数组件（比如写成类组件，或未返回JSX）
• API路由中调用EmailTemplate时未传递必要的props
• 环境变量RESEND_API_KEY未在.env.local中正确配置

内容的提问来源于stack exchange，提问作者Mohammed Al-Musawi