Zuletzt aktualisiert: 2026-03-25•6 Min. Lesezeit

React Email mit Truncus verwenden

Erstellen Sie E-Mail-Templates mit React-Komponenten. Versenden Sie sie ueber Truncus mit EU-Datenresidenz und Zustellbarkeitsmonitoring.

React Email ist der Open-Source-Standard fuer E-Mail-Templates mit React-Komponenten statt HTML-Tabellen. Truncus uebernimmt die Zustellinfrastruktur — Authentifizierung, Bounce-Unterdrueckung, Tracking und Compliance. Zusammen: Design in React, Versand ueber Truncus.

React Email installieren

npm install react-email @react-email/components

Das gibt Ihnen E-Mail-sichere React-Komponenten (Html, Head, Body, Container, Section, Text, Button, Hr, Img, Preview und mehr), die zu cross-client HTML rendern.

Template erstellen

Erstellen Sie ein emails/-Verzeichnis in Ihrem Projekt. Jede Datei exportiert eine React-Komponente, die ein E-Mail-Template darstellt.

// emails/welcome.tsx
import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr, Img, Preview
} from '@react-email/components';

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export default function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Willkommen auf unserer Plattform, {name}!</Preview>
      <Body style={{ fontFamily: '-apple-system, sans-serif', background: '#f4f4f5', padding: '40px 0' }}>
        <Container style={{ background: '#ffffff', padding: '40px', borderRadius: '8px', maxWidth: '560px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
            Willkommen, {name}!
          </Text>
          <Text style={{ color: '#52525b', lineHeight: '1.6' }}>
            Vielen Dank fuer die Registrierung. Ihr Konto ist bereit.
          </Text>
          <Hr style={{ margin: '24px 0' }} />
          <Button
            href={loginUrl}
            style={{
              background: '#18181b',
              color: '#ffffff',
              padding: '12px 24px',
              borderRadius: '6px',
              fontWeight: '500',
              textDecoration: 'none',
            }}
          >
            Zum Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Lokal vorschauen

npx react-email dev

Das oeffnet localhost:3000 mit einer Live-Vorschau aller Templates in Ihrem emails/-Verzeichnis.

Rendern und ueber Truncus senden

Sobald Ihr Template fertig ist, rendern Sie es zu HTML und uebergeben es an die Truncus API.

Methode A: Node.js mit fetch

import { render } from '@react-email/render';
import WelcomeEmail from './emails/welcome';

const html = await render(WelcomeEmail({
  name: 'Jasper',
  loginUrl: 'https://your-app.com/dashboard',
}));

const response = await fetch('https://truncus.co/api/v1/emails/send', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.TRUNCUS_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    from: 'hello@yourdomain.com',
    to: 'user@example.com',
    subject: 'Willkommen!',
    html: html,
  }),
});

const { messageId } = await response.json();
console.log('Gesendet:', messageId);

Methode B: Truncus CLI

npx react-email export emails/welcome.tsx --out ./out

truncus send \
  --to user@example.com \
  --from hello@yourdomain.com \
  --subject "Willkommen!" \
  --html-file ./out/welcome.html

Methode C: Next.js API Route

// app/api/send-welcome/route.ts
import { render } from '@react-email/render';
import WelcomeEmail from '@/emails/welcome';

export async function POST(request: Request) {
  const { name, email } = await request.json();

  const html = await render(WelcomeEmail({
    name,
    loginUrl: 'https://your-app.com/dashboard',
  }));

  const response = await fetch('https://truncus.co/api/v1/emails/send', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.TRUNCUS_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: 'hello@yourdomain.com',
      to: email,
      subject: 'Willkommen!',
      html,
    }),
  });

  return Response.json(await response.json());
}

Gaengige Templates

Die meisten Anwendungen benoetigen die gleichen transaktionalen E-Mails. React Email bietet eine Template-Galerie mit produktionsfertigen Ausgangspunkten fuer:

  • Willkommen / Onboarding — erster Eindruck nach der Registrierung
  • Passwort zuruecksetzen — sicherer, einmaliger Link mit Ablaufdatum
  • Rechnung / Quittung — Positionen, Summen, Zahlungsbestaetigung
  • Benachrichtigung / Warnung — Statusaenderungen, Schwellenwert-Warnungen
  • Woechentliche Zusammenfassung — Nutzungsuebersicht, Aktivitaetsrueckblick

Warum Truncus + React Email

  • Design in React, nicht HTML-Tabellen. React Email Komponenten uebernehmen das Cross-Client-Rendering.
  • Lokal vorschauen und iterieren. npx react-email dev gibt Ihnen Hot-Reloading-Vorschauen.
  • Truncus uebernimmt die schwierigen Teile. Zustellbarkeitsmonitoring, Bounce-Unterdrueckung, Webhook-Events und automatische Wiederholung.
  • EU-Datenresidenz standardmaessig. Alle E-Mail-Daten werden in eu-west-1 verarbeitet und gespeichert.
  • Funktioniert mit jeder Integration. Senden Sie ueber das Node.js SDK, die fetch API, CLI, Python SDK oder den MCP Server.

Naechste Schritte

React Email mit Truncus verwenden — E-Mail-Template-Guide