React Email 邮件发送实战指南从 render 渲染到 Resend / Nodemailer / Mailgun / SendGrid 全流程【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email本文是 React Email 项目技能文档 SENDING.md 的完整实战指南系统讲解如何把用 React 组件编写的邮件模板如WelcomeEmail真正发送出去。文章覆盖发送前的发件域名校验、基于render()的 HTML 与纯文本渲染、Resend 官方推荐路径MCP 工具 / Node SDK / 模板上传三种玩法以及 Nodemailer、Mailgun、SendGrid 等常见服务商的接入代码读完即可在自己的应用中落地可靠的邮件发送链路。发送前的关键准备始终使用已验证的发件域名无论是选择哪家邮件服务商React Email 技能文档都强调一条通用铁律from地址必须使用已验证verified的发件域名。若用户已经拥有已验证域名直接在from中使用它若用户尚未验证域名请引导其先在对应的邮件服务商如 Resend后台完成域名验证再继续发送流程。原因在于主流 ESPEmail Service Provider对未验证域名的发信限制极严未经验证的域名发出的邮件极大概率进入垃圾箱或被直接拒收甚至导致 API 调用报错。这一步应在任何发送代码之前完成确认。核心前置用render()把组件渲染成可发送的邮件内容发送的本质动作是把 React 组件翻译成邮件服务商能理解的内容HTML 正文与纯文本正文。这一步由react-email/render包仓库位于 packages/render提供的render()完成import { render } from react-email; import { WelcomeEmail } from ./emails/welcome; // 渲染为 HTML const html await render( WelcomeEmail nameJohn verificationUrlhttps://example.com/verify / ); // 生成纯文本版本 const text await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /, { plainText: true });render()的底层行为源码级render()的 Node 端实现位于 packages/render/src/node/render.tsx其关键行为包括优先使用react-dom/server的renderToReadableStream渲染环境不支持时回退到renderToPipeableStream并用Suspense与错误边界包裹组件保证异步渲染完成且出错即抛渲染完成后会调用stripImagePreloadLinks剥离图片预加载链接避免客户端预取逻辑混入邮件 HTML输出的 HTML 会被自动补全!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...文档头同时去除 React 注入的重复 doctype确保邮件客户端兼容性当options.pretty: true时对 HTML 做格式化美化便于调试。plainText选项与可选参数渲染选项的类型定义在 packages/render/src/shared/options.tsrender()第二参数支持选项类型说明plainTextboolean设为true时返回纯文本而非 HTMLhtmlToTextOptionsHtmlToTextOptions透传给html-to-text库的转换选项仅在plainText: true且未启用unstableTextConversion时生效unstableTextConversionboolean设为true时改用仓库内置的纯文本转换器见 packages/render/src/shared/utils/unstable-to-plain-text.ts此时不再接受htmlToTextOptionsprettyboolean对输出 HTML 进行美化排版若使用 Resend Node SDK 的react属性直接发送SDK 会自动完成 HTML 与纯文本的双重渲染无需手动调用render()。方式一推荐通过 Resend 发送场景 A可用 Resend MCP 工具时在具备 Resend MCP 工具的环境中先用render()渲染出html与text再调用 MCP 的send-email工具依次填入torecipientexample.comsubjectWelcome to Acmehtml上一步渲染出的htmltext上一步渲染出的textimport { render } from react-email; import { WelcomeEmail } from ./emails/welcome; // Render to HTML const html await render( WelcomeEmail nameJohn verificationUrlhttps://example.com/verify / ); // Create plain text version const text await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /, { plainText: true });场景 B无 MCP 工具时使用 Resend Node SDKResend 官方 Node SDK 可以直接接收 React 组件作为react属性省去手动渲染步骤import { Resend } from resend; import { WelcomeEmail } from ./emails/welcome; const resend new Resend(process.env.RESEND_API_KEY); const { data, error } await resend.emails.send({ from: Acme onboardingresend.dev, to: [userexample.com], subject: Welcome to Acme, react: WelcomeEmail nameJohn verificationUrlhttps://example.com/verify / }); if (error) { console.error(Failed to send:, error); }要点说明from需使用已验证域名官方文档示例中的onboardingresend.dev是 Resend 提供的测试域名Node SDK 会自动处理纯文本与 HTML 的渲染无需手动调用render()发送结果通过data/error解构返回务必检查error并做相应日志与重试处理。仓库内提供了完整可运行的 Resend 示例项目 examples/resend其中 examples/resend/src/lib/resend.ts 展示了基于process.env.RESEND_API_KEY初始化 SDK 客户端的标准写法examples/resend/src/pages/api/send.ts 则是在 Next.js API Route 中直接以react: WaitlistEmail({ name: Bu })发送邮件的完整示例含 GET 方法校验与 405 兜底处理。方式二将邮件作为模板上传到 Resend若希望邮件组件在 Resend 后台以模板形态管理团队成员可复用、可在控制台预览与编辑可将模板上传至 Resendnpx react-emaillatest resend setupresend setup命令做了什么该命令的实现位于 packages/react-email/src/cli/commands/resend/setup.ts执行时会检查本地是否已保存过 Resend API Key已存在时提示输入的新 Key 将覆盖旧值以密码输入框形式交互式要求用户输入 API Key并要求该 Key 具备Full Access权限将 Key 安全保存到本地配置底层使用conf存储见 packages/react-email/src/cli/utils/conf.ts并输出成功提示如需移除该集成可随时执行npx react-emaillatest resend reset。配置完成后在预览界面切换到Resend 标签页即可选择模板并通过Upload按钮逐个上传或使用Bulk Upload按钮批量上传多个邮件。使用模板 ID 发送模板上传后Resend SDK 的send方法支持直接传入template.id进行发送无需再携带完整 HTMLawait resend.emails.send({ from: Acme onboardingresend.dev, to: [userexample.com], subject: Welcome to Acme, template: { id: 1245-1256-1234-1234, } });从源码看预览服务器在启动时会将已配置的 Resend API Key 通过REACT_EMAIL_INTERNAL_RESEND_API_KEY环境变量注入见 packages/react-email/src/cli/utils/preview/get-env-variables-for-preview-app.ts因此上传模板能力与resend setup的 Key 配置是同一套集成链路。方式三使用其他邮件服务商当项目不使用 Resend 时React Email 的组件化渲染能力可以无缝对接任意服务商——统一模式都是先用render()得到 HTML再交给各服务商 SDK 发送。NodemailerSMTP 通用方案Nodemailer 支持任意 SMTP 服务器适合已有自建邮箱或企业邮箱的场景import { render } from react-email; import nodemailer from nodemailer; const transporter nodemailer.createTransport({ host: smtp.example.com, port: 587, auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS } }); const html await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /); await transporter.sendMail({ from: noreplyexample.com, to: userexample.com, subject: Welcome, html });仓库内还有完整的 Nodemailer 集成示例项目 examples/nodemailer 可对照参考。Mailgunimport { render } from react-email; import FormData from form-data; import Mailgun from mailgun.js; import { WelcomeEmail } from ./emails/welcome; const mailgun new Mailgun(FormData); const client mailgun.client({ username: api, key: process.env.MAILGUN_API_KEY, }); const html await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /); await client.messages.create(process.env.MAILGUN_DOMAIN, { from: noreplyexample.com, to: [userexample.com], subject: Welcome, html, });对应完整示例见 examples/mailgun。SendGridimport { render } from react-email; import sgMail from sendgrid/mail; sgMail.setApiKey(process.env.SENDGRID_API_KEY); const html await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /); await sgMail.send({ to: userexample.com, from: noreplyexample.com, subject: Welcome, html });对应完整示例见 examples/sendgrid。此外仓库的 examples 目录下还提供了 AWS SES、Azure Communication Email、Postmark、Plunk、Scaleway、Zeptomail、Mailersend、Mailtrap、Brevo、Mailchimp Transactional 等服务商的同构示例接入思路完全一致render()出 HTML → 交给服务商发送。选择建议与常见问题首选 ResendReact Email 与 Resend 深度集成Node SDK 原生支持react属性免去手动渲染且支持模板化上传与 MCP 工具发送是官方推荐路径已有基础设施选 Nodemailer适合公司自有 SMTP 或需对接非主流服务商的场景发送前务必确认from域名已在服务商侧完成验证API Key 具备完整权限Resend 要求 Full Access纯文本版本部分 ESP 与邮件客户端会优先展示纯文本使用 Resend SDK 时无需关心自行接入其他服务商时请记得用render(..., { plainText: true })同时生成text字段以提升送达率与可读性。至此你已经掌握从 React 组件到真实送达的完整链路render()渲染 → 选择 ResendMCP / SDK / 模板或其他服务商 SDK → 携带已验证发件域名发送。无论邮件量级如何这套模式都保持组件复用、渲染一致、接入轻量。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
React Email 邮件发送实战指南：从 render 渲染到 Resend / Nodemailer / Mailgun / SendGrid 全流程
React Email 邮件发送实战指南从 render 渲染到 Resend / Nodemailer / Mailgun / SendGrid 全流程【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email本文是 React Email 项目技能文档 SENDING.md 的完整实战指南系统讲解如何把用 React 组件编写的邮件模板如WelcomeEmail真正发送出去。文章覆盖发送前的发件域名校验、基于render()的 HTML 与纯文本渲染、Resend 官方推荐路径MCP 工具 / Node SDK / 模板上传三种玩法以及 Nodemailer、Mailgun、SendGrid 等常见服务商的接入代码读完即可在自己的应用中落地可靠的邮件发送链路。发送前的关键准备始终使用已验证的发件域名无论是选择哪家邮件服务商React Email 技能文档都强调一条通用铁律from地址必须使用已验证verified的发件域名。若用户已经拥有已验证域名直接在from中使用它若用户尚未验证域名请引导其先在对应的邮件服务商如 Resend后台完成域名验证再继续发送流程。原因在于主流 ESPEmail Service Provider对未验证域名的发信限制极严未经验证的域名发出的邮件极大概率进入垃圾箱或被直接拒收甚至导致 API 调用报错。这一步应在任何发送代码之前完成确认。核心前置用render()把组件渲染成可发送的邮件内容发送的本质动作是把 React 组件翻译成邮件服务商能理解的内容HTML 正文与纯文本正文。这一步由react-email/render包仓库位于 packages/render提供的render()完成import { render } from react-email; import { WelcomeEmail } from ./emails/welcome; // 渲染为 HTML const html await render( WelcomeEmail nameJohn verificationUrlhttps://example.com/verify / ); // 生成纯文本版本 const text await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /, { plainText: true });render()的底层行为源码级render()的 Node 端实现位于 packages/render/src/node/render.tsx其关键行为包括优先使用react-dom/server的renderToReadableStream渲染环境不支持时回退到renderToPipeableStream并用Suspense与错误边界包裹组件保证异步渲染完成且出错即抛渲染完成后会调用stripImagePreloadLinks剥离图片预加载链接避免客户端预取逻辑混入邮件 HTML输出的 HTML 会被自动补全!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...文档头同时去除 React 注入的重复 doctype确保邮件客户端兼容性当options.pretty: true时对 HTML 做格式化美化便于调试。plainText选项与可选参数渲染选项的类型定义在 packages/render/src/shared/options.tsrender()第二参数支持选项类型说明plainTextboolean设为true时返回纯文本而非 HTMLhtmlToTextOptionsHtmlToTextOptions透传给html-to-text库的转换选项仅在plainText: true且未启用unstableTextConversion时生效unstableTextConversionboolean设为true时改用仓库内置的纯文本转换器见 packages/render/src/shared/utils/unstable-to-plain-text.ts此时不再接受htmlToTextOptionsprettyboolean对输出 HTML 进行美化排版若使用 Resend Node SDK 的react属性直接发送SDK 会自动完成 HTML 与纯文本的双重渲染无需手动调用render()。方式一推荐通过 Resend 发送场景 A可用 Resend MCP 工具时在具备 Resend MCP 工具的环境中先用render()渲染出html与text再调用 MCP 的send-email工具依次填入torecipientexample.comsubjectWelcome to Acmehtml上一步渲染出的htmltext上一步渲染出的textimport { render } from react-email; import { WelcomeEmail } from ./emails/welcome; // Render to HTML const html await render( WelcomeEmail nameJohn verificationUrlhttps://example.com/verify / ); // Create plain text version const text await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /, { plainText: true });场景 B无 MCP 工具时使用 Resend Node SDKResend 官方 Node SDK 可以直接接收 React 组件作为react属性省去手动渲染步骤import { Resend } from resend; import { WelcomeEmail } from ./emails/welcome; const resend new Resend(process.env.RESEND_API_KEY); const { data, error } await resend.emails.send({ from: Acme onboardingresend.dev, to: [userexample.com], subject: Welcome to Acme, react: WelcomeEmail nameJohn verificationUrlhttps://example.com/verify / }); if (error) { console.error(Failed to send:, error); }要点说明from需使用已验证域名官方文档示例中的onboardingresend.dev是 Resend 提供的测试域名Node SDK 会自动处理纯文本与 HTML 的渲染无需手动调用render()发送结果通过data/error解构返回务必检查error并做相应日志与重试处理。仓库内提供了完整可运行的 Resend 示例项目 examples/resend其中 examples/resend/src/lib/resend.ts 展示了基于process.env.RESEND_API_KEY初始化 SDK 客户端的标准写法examples/resend/src/pages/api/send.ts 则是在 Next.js API Route 中直接以react: WaitlistEmail({ name: Bu })发送邮件的完整示例含 GET 方法校验与 405 兜底处理。方式二将邮件作为模板上传到 Resend若希望邮件组件在 Resend 后台以模板形态管理团队成员可复用、可在控制台预览与编辑可将模板上传至 Resendnpx react-emaillatest resend setupresend setup命令做了什么该命令的实现位于 packages/react-email/src/cli/commands/resend/setup.ts执行时会检查本地是否已保存过 Resend API Key已存在时提示输入的新 Key 将覆盖旧值以密码输入框形式交互式要求用户输入 API Key并要求该 Key 具备Full Access权限将 Key 安全保存到本地配置底层使用conf存储见 packages/react-email/src/cli/utils/conf.ts并输出成功提示如需移除该集成可随时执行npx react-emaillatest resend reset。配置完成后在预览界面切换到Resend 标签页即可选择模板并通过Upload按钮逐个上传或使用Bulk Upload按钮批量上传多个邮件。使用模板 ID 发送模板上传后Resend SDK 的send方法支持直接传入template.id进行发送无需再携带完整 HTMLawait resend.emails.send({ from: Acme onboardingresend.dev, to: [userexample.com], subject: Welcome to Acme, template: { id: 1245-1256-1234-1234, } });从源码看预览服务器在启动时会将已配置的 Resend API Key 通过REACT_EMAIL_INTERNAL_RESEND_API_KEY环境变量注入见 packages/react-email/src/cli/utils/preview/get-env-variables-for-preview-app.ts因此上传模板能力与resend setup的 Key 配置是同一套集成链路。方式三使用其他邮件服务商当项目不使用 Resend 时React Email 的组件化渲染能力可以无缝对接任意服务商——统一模式都是先用render()得到 HTML再交给各服务商 SDK 发送。NodemailerSMTP 通用方案Nodemailer 支持任意 SMTP 服务器适合已有自建邮箱或企业邮箱的场景import { render } from react-email; import nodemailer from nodemailer; const transporter nodemailer.createTransport({ host: smtp.example.com, port: 587, auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS } }); const html await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /); await transporter.sendMail({ from: noreplyexample.com, to: userexample.com, subject: Welcome, html });仓库内还有完整的 Nodemailer 集成示例项目 examples/nodemailer 可对照参考。Mailgunimport { render } from react-email; import FormData from form-data; import Mailgun from mailgun.js; import { WelcomeEmail } from ./emails/welcome; const mailgun new Mailgun(FormData); const client mailgun.client({ username: api, key: process.env.MAILGUN_API_KEY, }); const html await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /); await client.messages.create(process.env.MAILGUN_DOMAIN, { from: noreplyexample.com, to: [userexample.com], subject: Welcome, html, });对应完整示例见 examples/mailgun。SendGridimport { render } from react-email; import sgMail from sendgrid/mail; sgMail.setApiKey(process.env.SENDGRID_API_KEY); const html await render(WelcomeEmail nameJohn verificationUrlhttps://example.com/verify /); await sgMail.send({ to: userexample.com, from: noreplyexample.com, subject: Welcome, html });对应完整示例见 examples/sendgrid。此外仓库的 examples 目录下还提供了 AWS SES、Azure Communication Email、Postmark、Plunk、Scaleway、Zeptomail、Mailersend、Mailtrap、Brevo、Mailchimp Transactional 等服务商的同构示例接入思路完全一致render()出 HTML → 交给服务商发送。选择建议与常见问题首选 ResendReact Email 与 Resend 深度集成Node SDK 原生支持react属性免去手动渲染且支持模板化上传与 MCP 工具发送是官方推荐路径已有基础设施选 Nodemailer适合公司自有 SMTP 或需对接非主流服务商的场景发送前务必确认from域名已在服务商侧完成验证API Key 具备完整权限Resend 要求 Full Access纯文本版本部分 ESP 与邮件客户端会优先展示纯文本使用 Resend SDK 时无需关心自行接入其他服务商时请记得用render(..., { plainText: true })同时生成text字段以提升送达率与可读性。至此你已经掌握从 React 组件到真实送达的完整链路render()渲染 → 选择 ResendMCP / SDK / 模板或其他服务商 SDK → 携带已验证发件域名发送。无论邮件量级如何这套模式都保持组件复用、渲染一致、接入轻量。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
