React-E-Mail-Vorlagen: Erstellen Sie schöne Transaktions-E-Mails
Transaktions-E-Mails haben eine Öffnungsrate von 45 % – fast das Fünffache einer durchschnittlichen Marketing-E-Mail – dennoch versenden die meisten Unternehmen schlecht formatierte HTML-E-Mails, die der Markenwahrnehmung schaden. React Email bringt das komponentenbasierte Entwicklungsmodell in das E-Mail-Design und ermöglicht es Entwicklern, schöne, reaktionsfähige Vorlagen mit vertrauten React-Mustern zu erstellen.
Wichtige Erkenntnisse
- React Email-Komponenten werden zu clientübergreifendem kompatiblem HTML kompiliert – Gmail, Outlook, Apple Mail – Komponentenbasierte Architektur ermöglicht wiederverwendbare Kopf- und Fußzeilen sowie Layoutmuster – Lokaler Vorschauserver mit Hot-Reload beschleunigt die Vorlagenentwicklung
- Exportieren Sie Renderfunktionen (keine Rohkomponenten) für eine nahtlose NestJS-Integration
Warum auf E-Mail reagieren?
E-Mail-HTML ist bekanntermaßen schwierig. Verschiedene Clients rendern HTML unterschiedlich – Outlook verwendet Word als Rendering-Engine, Gmail entfernt Stil-Tags und mobile Clients unterscheiden sich in der Handhabung von Ansichtsfenstern.
React Email abstrahiert dies mit vorgefertigten Komponenten: Container (Reaktionsbreite), Abschnitt (tabellenbasierte Blöcke), Zeile/Spalte (Rastersystem), Text, Überschrift, Schaltfläche (funktioniert in Outlook), Bild, Link, Hr und Vorschau (versteckter Posteingangstext).
Projekt-Setup
Installieren Sie @react-email/components und reagieren Sie auf E-Mail. Organisieren Sie Vorlagen in einem Pakete/email-templates-Verzeichnis mit templates/, Components/ und einer render.ts-Datei, die Renderfunktionen exportiert.
Erstellen von Vorlagen
Gemeinsam genutzte Layoutkomponenten
Erstellen Sie wiederverwendbare EmailHeader- und EmailFooter-Komponenten mit Ihrem Branding. Diese gewährleisten die Konsistenz aller Transaktions-E-Mails.
Vorlagenstruktur
Jede E-Mail-Vorlage ist eine React-Komponente, die typisierte Requisiten empfängt:
import {
Html, Head, Body, Container, Section,
Text, Button, Hr,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif" }}>
<Container style={{ maxWidth: "600px", margin: "0 auto" }}>
<Text>Hi {userName},</Text>
<Text>Your account is ready.</Text>
<Button
href={loginUrl}
style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
>
Sign In
</Button>
</Container>
</Body>
</Html>
);
}
Rendering für die NestJS-Integration
The critical pattern: export render functions, not raw components. NestJS runs without JSX compilation, so importing React components directly causes errors.
Erstellen Sie eine render.ts-Datei, die Vorlagen importiert und asynchrone Funktionen exportiert:
import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";
export async function renderWelcomeEmail(props: {
userName: string;
loginUrl: string;
}) {
return render(WelcomeEmail(props));
}
Rufen Sie in NestJS die Renderfunktion auf, um HTML abzurufen, und senden Sie es dann über Ihren E-Mail-Transporter.
Entwicklungsworkflow
Lokale Vorschau
Führen Sie npx react-email dev für eine browserbasierte Vorschau mit Hot-Reload aus. Änderungen werden sofort angezeigt, was eine schnelle Iteration ermöglicht.
Mandantenübergreifendes Testen
Testen Sie kundenübergreifend mit Litmus oder Email on Acid. Mindesttest: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail und Outlook.com.
Styling Best Practices
- Nur Inline-Stile: Reagieren Sie aus Gründen der Client-Kompatibilität automatisch auf E-Mail-Inline-Stile
- Systemschriftarten: Verwenden Sie Arial, Georgia, Verdana. Benutzerdefinierte Schriftarten werden nur begrenzt unterstützt.
- Maximale Breite 600 Pixel: Standard-E-Mail-Breite für Desktop und Mobilgeräte
- Tabellenbasiertes Layout: React Email-Komponenten werden aus Gründen der Outlook-Kompatibilität als Tabellen dargestellt
- Dunkler Modus: Fügen Sie Meta-Tags für die Unterstützung des dunklen Modus von Apple Mail und Outlook hinzu
Gängige E-Mail-Vorlagen
Auftragsbestätigung
Geben Sie Bestellnummer, Artikelliste mit Preisen, Lieferadresse, voraussichtliche Lieferung und einen Tracking-Link an, sofern verfügbar. Verwenden Sie ein Tabellenlayout für die Artikelliste.
Passwort zurücksetzen
Halten Sie es auf ein Minimum beschränkt: kurze Erklärung, auffällige Reset-Taste mit zeitlich begrenztem Link, Sicherheitshinweis zur Nichtfreigabe des Links und Support-Kontakt.
Rechnungs-E-Mail
Hängen Sie die PDF-Rechnung an und fügen Sie eine Zusammenfassung in den E-Mail-Text ein: Rechnungsnummer, Datum, Fälligkeitsdatum, Gesamtbetrag und eine Schaltfläche zum Online-Ansehen/Bezahlen.
Versandbenachrichtigung
Geben Sie die Bestellnummer, den Namen des Spediteurs, die Sendungsverfolgungsnummer mit anklickbarem Link, das voraussichtliche Lieferdatum und die zu versendenden Artikel an.
Häufig gestellte Fragen
F: Warum nicht einen Drag-and-Drop-E-Mail-Builder verwenden?
Drag-and-drop builders work for marketing emails but lack dynamic content capabilities for transactional emails. Auftragsbestätigungen und Rechnungen erfordern datengesteuerte Vorlagen, die der Code besser verarbeiten kann.
F: Funktioniert React Email mit jedem Versanddienst?
Ja. Es gibt Standard-HTML-Strings aus, die mit Nodemailer, SendGrid, Postmark, AWS SES, Resend oder jedem anderen SMTP-Server kompatibel sind.
F: Wie gehen wir mit der E-Mail-Lokalisierung um?
Übergeben Sie das Gebietsschema und übersetzte Zeichenfolgen als Vorlagen-Requisiten. Die Renderfunktion empfängt den gesamten Text als Parameter, sodass die Übersetzungen vor dem Rendern von Ihrem i18n-System verarbeitet werden.
F: Können wir dynamische Bilder oder Diagramme einbinden?
Verwenden Sie serverseitig generierte Bilder, die unter URLs gehostet werden. Bibliotheken wie QuickChart rendern Diagramme als Bilder. Vermeiden Sie eingebettete Bilder – verwenden Sie aus Kompatibilitätsgründen gehostete URLs.
Was kommt als nächstes?
React Email verwandelt die transaktionale E-Mail-Entwicklung von frustrierenden Tabellenlayout-Übungen in moderne komponentenbasierte Workflows.
Kontaktieren Sie ECOSIRE für die Entwicklung von E-Mail-Vorlagen oder erkunden Sie unsere Odoo-Implementierungsdienste für integrierte E-Mail-Workflows.
Herausgegeben von ECOSIRE – unterstützt Unternehmen bei der Skalierung mit Unternehmenssoftwarelösungen.
Geschrieben von
ECOSIRE TeamTechnical Writing
The ECOSIRE technical writing team covers Odoo ERP, Shopify eCommerce, AI agents, Power BI analytics, GoHighLevel automation, and enterprise software best practices. Our guides help businesses make informed technology decisions.
ECOSIRE
Erweitern Sie Ihr Geschäft mit ECOSIRE
Unternehmenslösungen in den Bereichen ERP, E-Commerce, KI, Analyse und Automatisierung.
Verwandte Artikel
NestJS 11 Enterprise API-Muster
Beherrschen Sie NestJS 11-Unternehmensmuster: Guards, Interceptors, Pipes, Mandantenfähigkeit und produktionsbereites API-Design für skalierbare Backend-Systeme.
Next.js 16 App Router: Produktionsmuster und Fallstricke
Produktionsbereite Next.js 16 App Router-Muster: Serverkomponenten, Caching-Strategien, Metadaten-API, Fehlergrenzen und zu vermeidende Leistungsprobleme.
React Query (TanStack): Datenabrufmuster
Beherrschen Sie die Datenabrufmuster von TanStack Query v5: Abfragen, Mutationen, optimistische Aktualisierungen, unendlicher Bildlauf, Vorabruf, Cache-Invalidierung und Integration mit Next.js App Router.