如何在Next.js中以无UI异步函数方式使用EmailJS？

你不需要用ReactDOM渲染表单——EmailJS提供了Node.js专用SDK，完全适配Next.js的API路由（服务器端环境），不需要依赖浏览器DOM。

步骤1：安装EmailJS Node.js SDK #

在项目根目录执行：

npm install @emailjs/nodejs
# 或用yarn
yarn add @emailjs/nodejs

步骤2：编写API路由调用逻辑 #

创建或修改pages/api/sample.js（你的目标API路由文件），直接用Node.js SDK发送邮件，完全不需要DOM操作：

import emailjs from '@emailjs/nodejs';

// 初始化EmailJS（建议用环境变量存储密钥，不要硬编码）
emailjs.init({
  publicKey: process.env.EMAILJS_PUBLIC_KEY,
  privateKey: process.env.EMAILJS_PRIVATE_KEY,
});

export default async function handler(req, res) {
  // 只允许POST请求
  if (req.method !== 'POST') {
    return res.status(405).json({ message: '仅支持POST请求' });
  }

  try {
    // 构造邮件参数，对应你在EmailJS后台设置的模板变量
    const templateParams = {
      from_name: req.body.senderName,
      to_name: '目标收件人名称',
      message: req.body.content,
      reply_to: req.body.senderEmail,
    };

    // 调用EmailJS发送邮件
    const response = await emailjs.send(
      process.env.EMAILJS_SERVICE_ID, // EmailJS后台的服务ID
      process.env.EMAILJS_TEMPLATE_ID, // EmailJS后台的模板ID
      templateParams
    );

    res.status(200).json({ success: true, data: response });
  } catch (error) {
    console.error('邮件发送失败:', error);
    res.status(500).json({ success: false, error: error.message });
  }
}

步骤3：安全配置 #

把敏感信息存在Next.js的环境变量文件.env.local中，避免硬编码泄露：

EMAILJS_PUBLIC_KEY=你的公钥
EMAILJS_PRIVATE_KEY=你的私钥
EMAILJS_SERVICE_ID=你的服务ID
EMAILJS_TEMPLATE_ID=你的模板ID

为什么之前的方法会失败？ #

Next.js的API路由运行在Node.js服务器环境，没有浏览器的DOM对象（比如document、HTMLFormElement），你之前用ReactDOM渲染表单的方式是针对前端浏览器环境的，自然会触发内部错误。改用Node.js SDK就彻底避开了DOM依赖，完美适配服务器端运行场景。

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