React Email

React Email을 사용하면 이메일 템플릿을 React 컴포넌트로 작성할 수 있습니다. Node SDK는 선택적 피어 의존성인 @react-email/render로 이를 렌더링해 줍니다.

패키지를 설치합니다.

npm install @spacepost/node @react-email/components @react-email/render react react-dom

템플릿을 작성합니다.

import { Html, Head, Body, Container, Heading, Text, Button, Preview } from "@react-email/components";

export default function WelcomeEmail({ name, url }: { name: string; url: string }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Acme</Preview>
      <Body style={{ backgroundColor: "#f6f9fc", fontFamily: "system-ui, sans-serif" }}>
        <Container style={{ backgroundColor: "#fff", padding: 32, borderRadius: 8 }}>
          <Heading>Welcome, {name}</Heading>
          <Text>Your account is ready.</Text>
          <Button href={url} style={{ background: "#0e9f7a", color: "#fff", padding: "10px 20px", borderRadius: 6 }}>
            Open dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

react 옵션으로 보냅니다.

import { SpacePost } from "@spacepost/node";
import WelcomeEmail from "./emails/welcome";

const spacepost = new SpacePost(process.env.SPACEPOST_API_KEY);

const { data, error } = await spacepost.emails.send({
  from: "Acme <hello@acme.com>",
  to: "user@example.com",
  subject: "Welcome to Acme",
  react: <WelcomeEmail name="Ada" url="https://app.acme.com" />,
});

SDK는 HTML과 일반 텍스트 버전을 렌더링합니다. html이나 text도 함께 전달하면 해당 필드는 직접 전달한 값이 우선합니다.

템플릿을 직접 렌더링한 뒤 결과를 html로 보내세요.

import { render } from "@react-email/render";
const html = await render(<WelcomeEmail name="Ada" url="https://app.acme.com" />);
const text = await render(<WelcomeEmail name="Ada" url="https://app.acme.com" />, { plainText: true });

SpacePost를 가리키도록 설정한 Resend SDK(마이그레이션 참고)에서는 SDK가 발송 전에 렌더링하므로 react 옵션이 Resend와 똑같이 동작합니다.