React Email

React Email を使うと、メールテンプレートを React コンポーネントとして書けます。Node SDK は、オプションのピア依存関係 @react-email/render を通じて、レンダリングを代わりに行います。

1. パッケージをインストールします。

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

2. テンプレートを書きます。

   emails/welcome.tsx

   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>
     );
   }

3. react オプションを指定して送信します。

   send.tsx

   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 も同時に渡した場合は、そのフィールドでは渡した値が優先されます。

Node SDK を使っていない場合

テンプレートをご自身でレンダリングし、その結果を 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 });

Resend SDK を SpacePost に向けて使う場合（Resend からの移行をご覧ください）、SDK が送信前にレンダリングするため、react オプションは Resend と同じように動作します。