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 Research and Development Team
Entwicklung von Enterprise-Digitalprodukten bei ECOSIRE. Einblicke in Odoo-Integrationen, E-Commerce-Automatisierung und KI-gestützte Geschäftslösungen.
Verwandte Artikel
Erstellen von APIs mit Drizzle ORM und NestJS: Vollständiger Leitfaden
Erstellen Sie typsichere APIs mit Drizzle ORM und NestJS. Erfahren Sie mehr über Schemadefinitionen, Migrationen, Abfrageerstellung, Beziehungen, Transaktionen und Testmuster für Produktionsanwendungen.
Next.js-Internationalisierung: Vollständiger i18n-Leitfaden mit next-intl
Implementieren Sie die Internationalisierung in Next.js mit next-intl. Vollständiger Leitfaden zu Routing, Übersetzungen, Server-/Client-Komponenten, RTL-Unterstützung, SEO und Bereitstellung.