TL;DR: Multi-Language-E-Mail-Vorlagen erfordern sorgfältiges Design – locale-aware Inhalte, Template-Vererbung, dynamische Betreffzeilen und robuste Fallback-Ketten. Dieser Leitfaden behandelt Architektur und Implementierung. Patterns von tanstackship.com.
Einführung
E-Mail ist ein zentraler Kommunikationskanal für SaaS – und E-Mails in der falschen Sprache beschädigen das Vertrauen Ihrer Nutzer. Ein ausgereiftes Multi-Language-E-Mail-System bewältigt Übersetzungen, locale-spezifische Formatierungen und Inhaltsvarianten über 10+ Sprachen hinweg, ohne Vorlagen zu duplizieren. Eine umfassendere i18n-Strategie finden Sie in i18n für SaaS: Architecture Patterns im Vergleich.
E-Mail-Template-Architektur
| Komponente | Verantwortlichkeit | Beispiel |
|---|---|---|
| Template-Engine | HTML mit Variablen rendern | Handlebars, MJML, React Email |
| Translation Service | Locale-aware Inhalte | Paraglide.js JSON-Dateien |
| Formatting Service | Locale-aware Zahlen/Datumsangaben | Intl API |
| Image Service | Locale-spezifische Bilder | CDN mit Locale-Pfad |
| Fallback-Kette | Fehlende Übersetzung behandeln | target → en → key |
Template-Struktur
emails/
├── en/
│ ├── welcome.html # Englische Version
│ ├── welcome.subject # Nur Betreffzeile
│ ├── invoice.html
│ └── invoice.subject
├── de/
│ ├── welcome.html
│ ├── welcome.subject
│ ├── invoice.html
│ └── invoice.subject
└── shared/
├── header.html # Geteilte Komponenten
├── footer.html
└── styles.css
Implementierung mit React Email
// React Email-Komponente mit i18n
import * as m from '~/paraglide/messages.js'
import {
Body, Container, Head, Heading, Html,
Preview, Section, Text, Button,
} from '@react-email/components'
interface WelcomeEmailProps {
userName: string
locale: string
dashboardUrl: string
}
export function WelcomeEmail({ userName, locale, dashboardUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Preview>{m.email_welcome_preview({ name: userName })}</Preview>
<Body>
<Container>
<Heading>{m.email_welcome_title({ name: userName })}</Heading>
<Text>{m.email_welcome_body()}</Text>
<Section>
<Button href={dashboardUrl}>
{m.email_welcome_cta()}
</Button>
</Section>
<Text style={{ fontSize: '12px', color: '#666' }}>
{m.email_welcome_footer()}
</Text>
</Container>
</Body>
</Html>
)
}
Dynamische Betreffzeilen
// Betreffzeile pro Locale, mit Variablen
const subjectTemplates = {
en: 'Welcome to TanStack Ship, {name}!',
de: 'Willkommen bei TanStack Ship, {name}!',
zh: '{name}，欢迎使用 TanStack Ship！',
ja: '{name}さん、TanStack Shipへようこそ！',
ar: 'مرحبًا {name} في TanStack Ship!',
}
function getSubject(template: string, locale: string, vars: Record<string, string>) {
let subject = subjectTemplates[locale] || subjectTemplates['en']
Object.entries(vars).forEach(([key, value]) => {
subject = subject.replace(`{${key}}`, value)
})
return subject
}
Versand mit Fallback
// E-Mail-Versand mit Locale-Fallback
async function sendEmail({
to,
locale,
template,
data,
}: {
to: string
locale: string
template: string
data: Record<string, any>
}) {
const effectiveLocale = SUPPORTED_LOCALES.includes(locale) ? locale : 'en'
// Template mit Fallback-Kette laden
const html = await loadTemplate(template, effectiveLocale, data)
const subject = await loadSubject(template, effectiveLocale, data)
await sendEmailClient({
to,
subject,
html,
headers: {
// Sprache für Analytics tracken
'X-Email-Locale': effectiveLocale,
},
})
}
Multi-Language-E-Mails testen
| Testfall | Methode | Was geprüft wird |
|---|---|---|
| Alle Locales rendern | Automatischer Render-Test | Keine fehlenden Keys, keine Fehler |
| Betreffzeilenlänge | Zeichenzählung | Arabische/chinesische Betreffzeilen können kürzer sein |
| RTL-Rendering | Sichtprüfung | Arabische E-Mails werden von rechts nach links gelesen |
| Datums-/Zahlenformat | Snapshot-Test | Locale-korrekte Formatierung |
| Fallback-Verhalten | Test mit nicht unterstütztem Locale | Sauberer Fallback auf en |
Fazit
Nutzen Sie ein einzelnes Template-System mit locale-spezifischen Inhaltsdateien. React Email-Komponenten mit Paraglide.js bieten typsichere Übersetzungen. Rendern Sie immer ein Fallback-Locale, wenn eine Übersetzung fehlt. Testen Sie jede E-Mail-Vorlage in allen unterstützten Locales als Teil Ihrer CI-Pipeline.
Zur locale-aware Formatierung in E-Mails lesen Sie Lokalisierung von Datums-, Zeit-, Zahlen- und Währungsformaten. Unser Leitfaden zur SaaS-E-Mail-Zustellbarkeit behandelt SPF-, DKIM- und DMARC-Setup. Zum Erstellen locale-spezifischer Marketing-Seiten sehen Sie sich Eine Language-Specific Landing Page Strategy aufbauen an.