Internationalisierung

Füge deiner App Mehrsprachigkeit hinzu. Nutze die Proyecta Content API für redaktionelle Lokalisierung oder bitte die KI, ein i18n-Framework direkt im Code einzurichten.

Proyecta unterstützt zwei sich ergänzende Ansätze zur Internationalisierung der Apps, die du damit erstellst:

1. Inhaltslokalisierung über die Proyecta Content API — für redaktionelle Inhalte (Blogbeiträge, FAQs, Marketingtexte), die in mehrere Sprachen übersetzt werden müssen
2. Code-seitiges i18n via einem Übersetzungs-Framework — für UI-Strings, Datumsangaben, Währungen und die Umschaltung der Sprache zur Laufzeit

Beide Ansätze funktionieren bereits heute. Welchen du benötigst, hängt davon ab, was du übersetzen möchtest.

Proyecta selbst wird mit 24 Locales ausgeliefert, sodass das Produkt i18n-nativ ist. Dieselben Muster gelten für die Apps, die du darin erstellst.

Option 1: Inhaltslokalisierung (Proyecta Content API)

Wenn du eine inhaltsreiche Website aufbaust — Blog, Wissensdatenbank, Marketingseiten, Produktkatalog — nutze die integrierte Locale-Unterstützung der Content API.

// Create the locales you support
await proyecta.content.locales.create({
    /* code: 'en', name: 'English' */
});
await proyecta.content.locales.create({
    /* code: 'es', name: 'Español' */
});
await proyecta.content.locales.create({
    /* code: 'fr', name: 'Français' */
});

// Then create entries that exist in multiple locales — fetch the right
// translation per request based on the user's locale.

Dies ist die richtige Wahl, wenn:

• Redakteure ohne Programmierkenntnisse Inhalte übersetzen müssen
• Du möchtest, dass Übersetzungen versionierbar sind
• Du locale-spezifische Veröffentlichungen benötigst (geplante Veröffentlichungen kommen bald — Einträge erfordern derzeit eine manuelle Veröffentlichung über die API)

Siehe Content Management für die vollständige Content API.

Option 2: Code-seitiges i18n-Framework

Für UI-Strings — Labels, Buttons, Fehlermeldungen, Datumsangaben, Währungen — bitte die KI, ein i18n-Framework direkt in dein Projekt einzubinden:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

Die KI wird:

1. Ein Framework auswählen — die KI verwendet i18next mit react-i18next (Proyectas Standard)
2. Katalogdateien erstellen in src/locales/ (eine JSON-Datei pro Sprache)
3. Texte einwickeln in t()-Aufrufe (aus dem useTranslation-Hook von react-i18next)
4. Eine Sprachumschaltung als Komponente hinzufügen
5. URL-Routing mit Locale-Präfixen verdrahten
6. RTL-Layouts (dir="rtl") für Arabisch, Hebräisch usw. behandeln
7. Zahlen, Datumsangaben und Währungen je nach Locale formatieren

Automatisch übersetzen mit der KI

Sobald deine Basissprache steht, ist die KI hervorragend darin, die übrigen Katalogdateien zu erstellen:

• "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
• "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

Bei besonders sensiblen Inhalten (Rechtstexte, Medizin, Finanzen) sollte ein menschlicher Übersetzer die KI-Ausgabe vor dem Veröffentlichen prüfen.

Beide Ansätze kombinieren

Die meisten realen Apps nutzen beide: Code-seitiges i18n für das UI-Gerüst (Buttons, Fehlermeldungen, Navigation) und die Content API für redaktionelle Inhalte (Artikel, Produktbeschreibungen). Sie coexistieren problemlos — dein i18n-Framework verarbeitet die Katalogdateien zur Build-Zeit, die Content API liefert lokalisierte Einträge zur Laufzeit aus.

Best Practices

1. Wähle deine Basissprache und finalisiere die Texte zuerst. Ein sich ständig änderndes Ziel zu übersetzen ist mühsam.
2. Übersetzungen bündeln. Übersetze nicht laufend — warte, bis ein Feature stabil ist.
3. RTL frühzeitig testen, wenn du Arabisch oder Hebräisch unterstützt. RTL-Fehler bleiben verborgen, bis man wirklich hinsieht.
4. lang und dir am <html>-Element angeben. Browser und Screenreader verlassen sich darauf.
5. Intl für die Formatierung verwenden. Schreibe keine eigene Datums- oder Währungsformatierung — nutze Intl.DateTimeFormat, Intl.NumberFormat.

Demnächst verfügbar

• Locale-Verwaltungs-UI im Builder — Locales auswählen, Übersetzungsabdeckung einsehen, Kataloge bearbeiten, ohne Proyecta zu verlassen
• Automatisches Übersetzen beim Speichern für neue Strings
• i18n-fähige Projektvorlagen mit voreingerichtetem Framework