YepAPI/skills

i18n

Regeln

• Next.js App Router: next-intl verwenden — useTranslations()-Hook, NextIntlClientProvider, Middleware zur Locale-Erkennung
• React SPA: react-i18next verwenden — useTranslation()-Hook, i18n.init() mit i18next-http-backend für Lazy Loading
• Locale-bewusstes Routing: /en/about, /fr/about — Middleware zur Erkennung des Accept-Language-Headers und Weiterleitung verwenden
• Übersetzungsdateien: JSON pro Locale pro Namespace — messages/en/common.json, messages/fr/common.json
• Namespace-Aufteilung: Ein Namespace pro Feature/Seite — auth.json, dashboard.json, settings.json — nur das laden, was die Seite benötigt
• Pluralisierung: ICU-Nachrichtenformat verwenden — {count, plural, one {# Element} other {# Elemente}}
• Interpolation: t('begrüßung', { name }) — niemals übersetzte Zeichenfolgen konkatenieren
• Datums-/Zahlen-/Währungsformatierung: Intl.DateTimeFormat, Intl.NumberFormat verwenden — niemals Formate hartcodieren
• RTL-Unterstützung: dir="rtl" am <html>-Element, CSS-Logical-Properties (margin-inline-start statt margin-left), Testen mit Arabisch/Hebräisch

Muster

// next-intl: middleware.ts
import createMiddleware from "next-intl/middleware";
export default createMiddleware({
  locales: ["en", "fr", "de", "ar"],
  defaultLocale: "en",
});

// next-intl: Verwendung in Komponente
import { useTranslations } from "next-intl";
function ProduktKarte({ preis, datum }: { preis: number; datum: Date }) {
  const t = useTranslations("produkte");
  const format = useFormatter();
  return (
    <div>
      <h2>{t("titel")}</h2>
      <p>{format.number(preis, { style: "currency", currency: "USD" })}</p>
      <p>{format.dateTime(datum, { dateStyle: "medium" })}</p>
    </div>
  );
}

Vermeiden

• Hartcodieren von benutzerseitigen Zeichenfolgen — jede Zeichenfolge muss durch t() gehen
• Zeichenfolgen-Konkatenation für übersetzten Text — Interpolation oder ICU-Format verwenden
• Alle Locales auf einmal laden — Pro Locale und Namespace per Lazy Loading laden
• CSS left/right für Layout — Logical Properties für RTL-Kompatibilität verwenden
• Locale nur in localStorage speichern — URL-basierte Locale für SEO und Teilbarkeit verwenden