基于Next Js、Nest Js与AWS SES v2的React Email集成问询

方案一：前端提供邮件HTML生成接口，后端调用后发送邮件 #

1. 前端Next.js项目配置React Email #

• 安装依赖：

  npm install @react-email/components react-email
  

• 在Next.js项目中创建邮件模板组件，比如app/emails/templates/WelcomeEmail.tsx：

  import { Html, Body, Container, Text, Button } from "@react-email/components";
  
  interface WelcomeEmailProps {
    username: string;
    verifyLink: string;
  }
  
  export default function WelcomeEmail({ username, verifyLink }: WelcomeEmailProps) {
    return (
      <Html>
        <Body style={{ fontFamily: 'Arial, sans-serif' }}>
          <Container style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
            <Text>你好 {username}，</Text>
            <Text>欢迎注册我们的服务，请点击下方按钮验证你的邮箱：</Text>
            <Button href={verifyLink} style={{ backgroundColor: '#0070f3', color: 'white', padding: '10px 20px', borderRadius: '4px', textDecoration: 'none' }}>
              验证邮箱
            </Button>
          </Container>
        </Body>
      </Html>
    );
  }
  

• 创建Next.js API路由用于渲染模板为HTML，比如app/api/email/render/route.ts：

  import { render } from "react-email/render";
  import WelcomeEmail from "../../emails/templates/WelcomeEmail";
  import { NextResponse } from "next/server";
  
  export async function POST(request: Request) {
    const { templateName, props } = await request.json();
    
    let emailHtml = '';
    switch(templateName) {
      case 'welcome':
        emailHtml = render(WelcomeEmail(props));
        break;
      // 可添加更多模板分支
      default:
        return NextResponse.json({ error: '模板不存在' }, { status: 400 });
    }
  
    return NextResponse.json({ html: emailHtml });
  }
  

2. 后端Nest.js调用前端接口并发送邮件 #

• 在Nest.js中创建邮件服务，调用前端渲染接口后用AWS SES v2发送：

  import { Injectable } from '@nestjs/common';
  import { SESv2Client, SendEmailCommand } from '@aws-sdk/client-sesv2';
  
  @Injectable()
  export class EmailService {
    private sesClient: SESv2Client;
  
    constructor() {
      this.sesClient = new SESv2Client({
        region: '你的AWS区域',
        credentials: {
          accessKeyId: '你的AWS Access Key',
          secretAccessKey: '你的AWS Secret Key',
        },
      });
    }
  
    async sendWelcomeEmail(username: string, userEmail: string, verifyLink: string) {
      // 调用前端渲染接口获取邮件HTML
      const renderResponse = await fetch('http://前端域名/api/email/render', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          templateName: 'welcome',
          props: { username, verifyLink },
        }),
      });
  
      if (!renderResponse.ok) {
        throw new Error('渲染邮件模板失败');
      }
  
      const { html } = await renderResponse.json();
  
      // 构造SES发送命令
      const sendCommand = new SendEmailCommand({
        FromEmailAddress: '你的发件邮箱 <no-reply@yourdomain.com>',
        Destination: { ToAddresses: [userEmail] },
        Content: {
          Html: { Data: html },
          Text: { Data: `你好 ${username}，欢迎注册，请点击链接验证邮箱：${verifyLink}` }, // 备用纯文本内容
        },
      });
  
      await this.sesClient.send(sendCommand);
    }
  }
  

• 在需要发送邮件的业务模块中注入EmailService，调用sendWelcomeEmail方法即可。

方案二：后端Nest.js直接集成React Email渲染模板 #

如果不想依赖前端接口，可直接在后端完成模板渲染和邮件发送：

1. 后端Nest.js项目配置React Email #

• 安装依赖：

  npm install @react-email/components react-email react react-dom
  

• 在Nest.js项目中创建邮件模板目录，比如src/emails/templates/WelcomeEmail.tsx，内容与前端模板一致。
• 修改tsconfig.json，设置"jsx": "react-jsx"以支持JSX语法。

2. 后端渲染模板并发送邮件 #

• 修改邮件服务，直接渲染React Email模板：

  import { Injectable } from '@nestjs/common';
  import { SESv2Client, SendEmailCommand } from '@aws-sdk/client-sesv2';
  import { render } from 'react-email/render';
  import WelcomeEmail from './emails/templates/WelcomeEmail';
  
  @Injectable()
  export class EmailService {
    private sesClient: SESv2Client;
  
    constructor() {
      this.sesClient = new SESv2Client({
        region: '你的AWS区域',
        credentials: {
          accessKeyId: '你的AWS Access Key',
          secretAccessKey: '你的AWS Secret Key',
        },
      });
    }
  
    async sendWelcomeEmail(username: string, userEmail: string, verifyLink: string) {
      // 直接渲染React Email模板
      const emailHtml = render(WelcomeEmail({ username, verifyLink }));
  
      const sendCommand = new SendEmailCommand({
        FromEmailAddress: '你的发件邮箱 <no-reply@yourdomain.com>',
        Destination: { ToAddresses: [userEmail] },
        Content: {
          Html: { Data: emailHtml },
          Text: { Data: `你好 ${username}，欢迎注册，请点击链接验证邮箱：${verifyLink}` },
        },
      });
  
      await this.sesClient.send(sendCommand);
    }
  }
  

注意事项 #

• 两种方案都能利用React Email的组件快速构建响应式邮件模板，避免手写复杂HTML。
• 测试模板样式可在前端项目中运行npx email dev启动预览服务器，实时查看渲染效果。
• 需提前在AWS SES控制台验证发件邮箱或域名，确保邮件能正常投递。

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