React Email

Mit React Email schreibst du E-Mail-Templates als React-Komponenten. Das Node SDK rendert sie für dich über seine optionale Peer-Dependency @react-email/render.

1. Installiere die Pakete.

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

2. Schreibe ein Template.

   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. Sende es mit der Option 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" />,
   });

Das SDK rendert HTML und eine Nur-Text-Version. Wenn du zusätzlich html oder text übergibst, hat dein Wert für das jeweilige Feld Vorrang.

Du nutzt das Node SDK nicht?

Rendere das Template selbst und sende das Ergebnis als 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 });

Wenn das Resend SDK auf SpacePost zeigt (siehe Migration), funktioniert die Option react wie bei Resend, weil das SDK vor dem Senden rendert.