Zum Hauptinhalt springen

Internationalisierungssystem (i18n)

E-Cashpoint Web verwendet react-i18next mit 3 unterstützten Sprachen: Deutsch (Standard), Spanisch und Englisch.

Konfiguration​

Das System wird in „src/i18n/index.js“ initialisiert:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import es from './locales/es.json';
import de from './locales/de.json';
import en from './locales/en.json';

const resources = {
  es: { translation: es },
  de: { translation: de },
  en: { translation: en },
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'de',  // idioma por defecto: alemán
    fallbackLng: 'de',
    interpolation: { escapeValue: false },
  });

export default i18n;

Dateistruktur​

src/i18n/
├── index.js
└── locales/
    ├── de.json   (alemán - fuente de verdad)
    ├── en.json   (inglés)
    └── es.json   (español)

Jede Datei verfügt über +1700 Schlüssel, die in Namespaces organisiert sind:

{
  "common": { ... },
  "auth": { ... },
  "client": { ... },
  "comercio": { ... },
  "setup": { ... },
  "demoMarketing": { ... },
  "handelsPanel": { ... },
  "servicesPanel": { ... },
  "restaurantCatalog": { ... },
  ...
}

Verwendung in Komponenten​

Einfacher Haken​

import { useTranslation } from 'react-i18next';

function MiComponente() {
  const { t, i18n } = useTranslation();
  
  return (
    <div>
      <h1>{t('common.welcome')}</h1>
      <p>Idioma actual: {i18n.language}</p>
      <button onClick={() => i18n.changeLanguage('es')}>
        Español
      </button>
    </div>
  );
}

Mit Interpolation​

// de.json
{
  "user": {
    "greeting": "Hallo, {name}!"
  }
}
<h1>{t('user.greeting', { name: 'María' })}</h1>
// Result: "Hallo, María!"

Mit Pluralisierung​

{
  "cart": {
    "items": "{{count}} Artikel",
    "items_plural": "{{count}} Artikel"
  }
}
<span>{t('cart.items', { count: items.length })}</span>

###Zurückgreifen

Wenn ein Schlüssel in der aktuellen Sprache nicht existiert, wird fallbackLng (deutsch) verwendet:

t('non.existent.key')
// Devuelve "non.existent.key" si no existe en ningún idioma
// O usa el valor de fallbackLng si está disponible

Sprachwechsel zur Laufzeit​

import { useTranslation } from 'react-i18next';

const { i18n } = useTranslation();

// Cambiar idioma
i18n.changeLanguage('es');  // a español
i18n.changeLanguage('en');  // a inglés
i18n.changeLanguage('de');  // a alemán

// Idioma actual
console.log(i18n.language);  // 'es'

Neue Übersetzungen hinzufügen​

Schritt 1: Schlüssel zu den 3 Dateien hinzufügen​

// de.json
{
  "miModulo": {
    "saludo": "Willkommen",
    "despedida": "Auf Wiedersehen"
  }
}

// en.json
{
  "miModulo": {
    "saludo": "Welcome",
    "despedida": "Goodbye"
  }
}

// es.json
{
  "miModulo": {
    "saludo": "Bienvenido",
    "despedida": "Adiós"
  }
}

Schritt 2: Verwendung in der Komponente​

const { t } = useTranslation();
return <h1>{t('miModulo.saludo')}</h1>;

Wichtige Regeln​

✅ Tun Sie es​

  • ✅ Verwenden Sie beschreibenden Namensraum: „handelsPanel.modal.title“ anstelle von „title1“.
  • ✅ Gruppierung nach Modul/Komponente: Alle Schlüssel eines Modals werden unter „modal.*“ angezeigt
  • ✅ Gemeinsame Schlüssel wiederverwenden: „common.cancel“, „common.save“ statt zu duplizieren
  • ✅ Halten Sie die 3 Dateien synchron (gleiche Schlüssel in allen 3)
  • ✅ Verwenden Sie Parameter für dynamische Werte: t('user.greeting', { name })
  • ✅ Camelcase in Schlüsseln: „myModule.myKey“ (nicht „snake_case“)
  • ✅ Verwenden Sie Fallback auf Deutsch, wenn ein Text sehr spezifisch ist

❌ Vermeiden​

  • ❌ Hardcode-Strings in Deutsch/Spanisch/Englisch in JSX
  • ❌ Schlüssel mit Sonderzeichen erstellen (nur Buchstaben, Zahlen, Punkte, Bindestriche)
  • ❌ Sprachen im selben Namensraum mischen
  • ❌ Schlüssel in einer der 3 Dateien vergessen
  • ❌ KI-Prompt-Marketing-Strings auf i18n (es handelt sich um Daten, nicht um die Benutzeroberfläche)

Muster für Arrays in Daten​

Wenn Sie Arrays von Objekten haben, die gerendert werden, verwenden Sie „labelKey“:

// En constants.js
export const MY_OPTIONS = [
  { value: 'a', labelKey: 'options.a' },
  { value: 'b', labelKey: 'options.b' },
];

// En el componente
{MY_OPTIONS.map(opt => (
  <option key={opt.value} value={opt.value}>
    {t(opt.labelKey)}
  </option>
))}

Nächste Schritte​