AI für Internationalisierung (i18n)

AI für Internationalisierung (i18n): Übersetzungen, Lokalisierung und mehrsprachige Apps mit ChatGPT & Claude. 10 Prompts für i18n-Workflows.

Einleitung

Mehrsprachige Apps sind komplex – AI hilft dir bei Übersetzungen, Key-Generierung und Lokalisierung. Hier sind 10 Prompts für Internationalisierung (i18n) und Lokalisierung (l10n).

Prompt 1: i18n Setup & Konfiguration

Richte Internationalisierung (i18n) für mein Projekt ein:

Framework: [React / Next.js / Vue / Svelte]
Sprachen: [z.B. "Deutsch (default), Englisch, Türkisch"]
Routing: [z.B. "/de/about, /en/about" oder "about?lang=en"]

Implementiere:
1. **Library wählen**: next-intl vs. react-i18next vs. Alternative
2. **Ordner-Struktur**: Wo kommen Translation-Dateien hin?
3. **Namespaces**: Übersetzungen gruppieren (common, auth, dashboard)
4. **Konfiguration**: Fallback-Sprache, Detection, Cookie/URL
5. **Provider Setup**: React Context / Next.js Middleware

Technisch:
6. **Routing**: Locale in URL (Subpath vs. Subdomain)
7. **Middleware**: Sprache automatisch erkennen (Accept-Language)
8. **SSR/SSG**: Übersetzungen zur Build-Zeit laden
9. **TypeScript**: Type-safe Keys (kein "common.buttno" Typo!)
10. **Bundle Size**: Nur aktive Sprache laden, nicht alle

Zeige vollständiges Setup mit Konfiguration und erstem Beispiel.

Prompt 2: Translation Keys generieren

Generiere Translation Keys für meine Komponente:

Komponente:
```
[JSX/HTML CODE HIER EINFÜGEN]
```

Erstelle:
1. **Keys extrahieren**: Alle hardcodierten Strings finden
2. **Key-Naming**: Konsistente Konvention (namespace.section.element)
3. **JSON-Datei**: Translation File mit allen Keys
4. **Komponente umschreiben**: Hardcoded → t('key')
5. **Kontext beachten**: Gleicher Text, anderer Kontext → verschiedene Keys

Konventionen:
6. **Verben**: auth.login.submit (nicht auth.login.button)
7. **Hierarchie**: page.section.element.action
8. **Plurale**: items.count_one / items.count_other
9. **Variablen**: "Hallo {{name}}" → Interpolation
10. **Keine Sätze splitten**: "Willkommen bei {{app}}" = 1 Key, nicht 2

Format: JSON mit Deutsch als Basis, Englisch als Übersetzung.

Prompt 3: Übersetzungen erstellen

Übersetze meine Translation-Datei in die Zielsprache:

Quell-Datei (Deutsch):
```json
[JSON HIER EINFÜGEN]
```

Zielsprache: [Englisch / Türkisch / Französisch / ...]

Regeln:
1. **Kontext beachten**: "Speichern" = "Save" (nicht "Store")
2. **UI-Konventionen**: Zielsprache-typische Button-Texte
3. **Interpolationen erhalten**: {{name}} nicht übersetzen
4. **Plurale anpassen**: Sprache hat andere Pluralregeln
5. **Längere Texte beachten**: DE "Speichern" → EN "Save" (kürzer)

Qualität:
6. **Konsistenz**: Gleicher Term = gleiche Übersetzung überall
7. **Formell/Informell**: Duzen oder Siezen? ("You" = du/Sie)
8. **Technische Begriffe**: "Repository" bleibt "Repository"
9. **Kulturelle Anpassung**: Nicht wörtlich, sondern natürlich
10. **Glossar erstellen**: Wichtige Begriffe und ihre Übersetzungen

Gib die vollständige JSON-Datei in der Zielsprache aus.

Prompt 4: Pluralisierung & Gender

Implementiere Pluralisierung und Gender-handling für i18n:

Framework: [react-i18next / next-intl / vue-i18n]
Sprachen: [z.B. "DE, EN, AR, PL"]

Implementiere:
1. **ICU MessageFormat**: Standard für Plural/Gender
   → "{count, plural, one {# Artikel} other {# Artikel}}"
2. **Pluralregeln**: DE (one/other), EN (one/other), PL (one/few/many/other)
3. **Gender**: "{gender, select, male {Er hat} female {Sie hat} other {Person hat}}"
4. **Ordinal**: "{pos, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}"
5. **Verschachtelt**: Plural + Gender in einem String

Praxis:
6. **CLDR Plural Rules**: Welche Regeln für welche Sprache?
7. **React Component**: <Trans /> mit Plural
8. **Null/Zero Case**: "Keine Artikel" vs "0 Artikel"
9. **Relative Time**: "vor 1 Stunde" / "vor 3 Stunden"
10. **Testing**: Alle Pluralformen automatisch testen

Vermeide: Strings zusammenbauen ("count + ' Artikel'" = FALSCH!)

Prompt 5: Datum, Zahlen & Währung

Implementiere lokalisierte Formatierung:

Sprachen: [z.B. "DE, EN-US, EN-GB, TR"]

Formatiere richtig:
1. **Datum**: Intl.DateTimeFormat
   → DE: 15.03.2026, EN-US: 03/15/2026, EN-GB: 15/03/2026
2. **Uhrzeit**: 24h (DE) vs. 12h AM/PM (EN-US)
3. **Zahlen**: Intl.NumberFormat
   → DE: 1.234,56 – EN: 1,234.56 – TR: 1.234,56
4. **Währung**: €1.234,56 (DE) vs. $1,234.56 (EN-US)
5. **Prozent**: 85,5% vs. 85.5%

Erweitert:
6. **Relative Datum**: "vor 2 Tagen" / "2 days ago" (Intl.RelativeTimeFormat)
7. **Zeitzonen**: User-Zeitzone berücksichtigen
8. **Kalender-Systeme**: Gregorianisch, Islamisch
9. **Telefonnummern**: +49 (0)30 12345678 vs. +1 (555) 123-4567
10. **Adress-Formate**: DE vs. US vs. JP Adressformat

Nutze Intl API (Browser-nativ) wo möglich statt Libraries.
Erstelle Utility-Funktionen für wiederkehrende Formatierungen.

Prompt 6: RTL & Layout-Anpassung

Mache meine App RTL-kompatibel (Right-to-Left):

Framework: [React + Tailwind / CSS Modules / ...]
RTL-Sprachen: [Arabisch / Hebräisch / Persisch]

Implementiere:
1. **HTML dir Attribut**: <html dir="rtl" lang="ar">
2. **CSS Logical Properties**: margin-inline-start statt margin-left
3. **Tailwind RTL**: rtl: Modifier oder automatisch mit logical
4. **Flexbox/Grid**: flex-direction automatisch umkehren
5. **Icons**: Pfeile und directionale Icons spiegeln

Praxis:
6. **Bidirektionaler Text**: Arabisch + Englisch gemischt
7. **Formulare**: Input-Felder und Labels RTL
8. **Navigation**: Menü und Sidebar spiegeln
9. **Tabellen**: Spalten-Reihenfolge umkehren
10. **Animationen**: Slide-Richtung anpassen

CSS Logical Properties Cheatsheet:
- margin-left → margin-inline-start
- padding-right → padding-inline-end
- text-align: left → text-align: start
- border-left → border-inline-start
- left: 0 → inset-inline-start: 0

Prompt 7: Mehrsprachiges SEO

Optimiere meine mehrsprachige App für SEO:

Framework: [Next.js / Nuxt / Astro]
Sprachen: [z.B. "DE, EN, TR"]
Domains: [z.B. "metincelik.de, metincelik.com" oder Subpaths]

Implementiere:
1. **hreflang Tags**: <link rel="alternate" hreflang="de" href="...">
2. **x-default**: Fallback für unbekannte Sprachen
3. **Canonical URLs**: Pro Sprache eine Canonical
4. **Sitemap**: Mehrsprachige XML Sitemap mit hreflang
5. **URL-Struktur**: /de/produkte vs. /en/products

SEO-Content:
6. **Meta Tags übersetzen**: Title, Description pro Sprache
7. **OG Tags**: og:locale, og:locale:alternate
8. **Structured Data**: Schema.org in jeder Sprache
9. **Slug-Übersetzung**: /de/ueber-uns vs. /en/about-us
10. **Google Search Console**: Pro Sprache verifizieren

Next.js-spezifisch:
- next-intl oder next-sitemap Konfiguration
- generateStaticParams für alle Locales
- Middleware für Locale Detection
- alternateLinks in generateMetadata()

Prompt 8: CMS & Content-Übersetzung

Implementiere mehrsprachigen Content mit CMS:

CMS-Typ: [Headless CMS / WordPress / Contentful / Strapi]
Sprachen: [z.B. "DE, EN, TR"]
Content-Typen: [z.B. "Blog Posts, Produkte, FAQ"]

Strategie:
1. **CMS i18n Plugin**: Strapi i18n, Contentful Locales
2. **Content-Modell**: Welche Felder übersetzen? (Title ja, Preis nein)
3. **Fallback Content**: DE vorhanden, EN fehlt → DE anzeigen?
4. **API Abfrage**: Content nach Locale filtern
5. **Preview**: Draft-Übersetzung vorab ansehen

Workflow:
6. **Übersetzer-Rollen**: CMS Permissions für Übersetzer
7. **Translation Memory**: Gleiche Phrasen wiederverwenden
8. **Machine Translation**: Deepl/Google als Basis, dann manuell
9. **Status Tracking**: Draft → In Review → Published pro Sprache
10. **Sync Check**: Welche Inhalte fehlen in welcher Sprache?

Erstelle ein Dashboard-Konzept das Translation-Status zeigt.

Prompt 9: i18n Testing

Erstelle Tests für meine i18n-Implementierung:

Framework: [React + Jest / Vitest / Playwright]
i18n Library: [react-i18next / next-intl]

Teste:
1. **Missing Keys**: Fehlende Übersetzungen automatisch finden
2. **Unit Tests**: Komponenten mit verschiedenen Locales rendern
3. **Snapshot Tests**: UI-Snapshots pro Sprache
4. **Pluralisierung**: Alle Pluralformen testen (0, 1, 2, 5, 21)
5. **Formatierung**: Datum/Zahlen korrekt formatiert

E2E Tests:
6. **Language Switcher**: Sprache wechseln funktioniert
7. **URL Routing**: /de/about → /en/about korrekt
8. **Persistenz**: Gewählte Sprache bleibt nach Reload
9. **SSR Check**: Server-gerenderte Sprache = Client-Sprache
10. **Visual Regression**: Text-Overflow in anderen Sprachen

Automatisierung:
- CI Pipeline: Fehlende Keys = Build-Fehler
- i18n Linter: eslint-plugin-i18next
- Pseudo-Lokalisierung: Ŧĥīş ţĕxţ fïñðş ĥãŗðçõðĕð şţŗīñğş
- Screenshot-Tests pro Sprache

Prompt 10: Übersetzungs-Workflow

Erstelle einen effizienten Übersetzungs-Workflow:

Team: [z.B. "3 Devs, 1 Übersetzer, CI/CD mit GitHub"]
Sprachen: [z.B. "DE (Basis), EN, TR"]
Tool: [Crowdin / Lokalise / Phrase / manuell]

Workflow:
1. **Dev schreibt Code**: Neue Keys mit deutschem Default
2. **Key extrahieren**: Automatisch neue Keys finden (i18next-parser)
3. **Upload zu TMS**: GitHub Action → Keys nach Crowdin/Lokalise
4. **Übersetzer arbeiten**: Web-UI im Translation Management System
5. **Download**: Fertige Übersetzungen → PR erstellen

Automatisierung:
6. **GitHub Action**: Push → Extract → Upload → Translate → PR
7. **Branching**: Übersetzungen parallel zu Feature-Branches
8. **Review**: Übersetzungs-PR muss abgenommen werden
9. **Deployment**: Übersetzungen lazy nachladen (CDN)
10. **Monitoring**: Fehlende Übersetzungen in Production tracken

AI-Integration:
- AI-generierte Basis-Übersetzung als Startpunkt
- AI-Review von Übersetzungen (Konsistenz, Kontext)
- Automatische Erkennung veralteter Übersetzungen
- Glossar-Enforcement durch AI

FAQ

Wann sollte ich i18n einbauen?

Am besten von Anfang an – nachträglich i18n einbauen ist mühsam. Selbst wenn du erstmal nur eine Sprache hast: Strings in Translation-Dateien auslagern. So ist die Struktur da, wenn Sprache 2 kommt. Das kostet minimal mehr Aufwand und spart dir Wochen später.

next-intl oder react-i18next für Next.js?

next-intl ist speziell für Next.js gebaut und unterstützt Server Components nativ. react-i18next ist das universellere Tool mit größerem Ökosystem. Für neue Next.js App Router Projekte: next-intl. Für bestehende Projekte oder wenn du auch React Native nutzt: react-i18next.

Kann AI gute Übersetzungen liefern?

AI liefert bessere Übersetzungen als klassische Machine Translation – besonders wenn du Kontext mitgibst. Für UI-Texte, technische Docs und kurze Strings: AI ist oft gut genug. Für Marketing-Texte und Rechtstexte: AI als Basis, dann menschliche Review. Deepl + AI Kombination funktioniert hervorragend.

Verwandte Artikel:

Zuletzt aktualisiert: März 2026