Nutzung von i18next für die Internationalisierung von React-basierten Anwendungen

Internationalisierung (i18n) ist entscheidend, um die Reichweite von Software auf globale Märkte auszuweiten. Eines der effektivsten Tools für diesen Zweck im JavaScript-Ökosystem ist i18next. Dieser Artikel befasst sich mit i18next, insbesondere mit seiner Integration in React, und beleuchtet seine Vorteile, die Kompatibilität mit verschiedenen Frameworks und Tipps zur Verbesserung der Lokalisierungsbemühungen.

Was ist i18next?

i18next ist ein robustes Internationalisierungs-Framework für JavaScript-Anwendungen. Es vereinfacht das Hinzufügen von mehrsprachiger Unterstützung zu Web-, Mobil- und Desktop-Anwendungen. Das Framework ermöglicht eine dynamische Übersetzungsverwaltung, wodurch die Anpassung von Anwendungen an verschiedene Sprachen und Regionen vereinfacht wird.

Vorteile von i18next

• Einfache Integration

i18next lässt sich leicht in bestehende Projekte integrieren und unterstützt beliebte JavaScript-Frameworks wie React, Angular und Vue. Diese Vielseitigkeit macht es zu einer bevorzugten Wahl für Entwickler.

• Anpassung und Flexibilität

i18next bietet eine modulare Struktur, die es Entwicklern ermöglicht, nur die Funktionen zu verwenden, die sie benötigen. Dieser hohe Grad an Anpassung stellt sicher, dass das Framework einer Vielzahl von Projektanforderungen gerecht werden kann.

• Dynamisches Laden von Übersetzungen

Das Framework unterstützt das dynamische Laden von Übersetzungen und optimiert die Leistung, indem es nur die notwendigen Sprachressourcen bei Bedarf abruft.

• Pluralisierung und Kontextualisierung

i18next beinhaltet integrierte Unterstützung für die Behandlung von Pluralisierung und Kontextualisierung, um genaue Sprachvarianten basierend auf Menge oder Kontext zu gewährleisten.

• Unterstützung für verschiedene Dateiformate

• Unterstützung mehrerer Dateiformate

Es unterstützt mehrere Dateiformate zur Speicherung von Übersetzungen, darunter JSON und YAML, was Flexibilität bei der Auswahl des Formats bietet, das am besten zu den Projektanforderungen passt.

• Reiches Ökosystem

Eine lebendige Community und ein reiches Ökosystem bieten Plugins, Erweiterungen und Unterstützung, um die Funktionalität von i18next zu verbessern und zu erweitern, wodurch Entwicklungszeit und -aufwand eingespart werden.

• Mehrere Backend-Optionen

i18next unterstützt verschiedene Backends zum Speichern und Abrufen von Übersetzungen, z. B. In-Memory, HTTP und benutzerdefinierte Backends, wodurch die Integration mit verschiedenen Speicherlösungen ermöglicht wird.

• Aktive Entwicklung und Wartung

Regelmäßige Updates und Verbesserungen halten i18next auf dem neuesten Stand der Best Practices und der sich entwickelnden Anforderungen in der Webentwicklung.

React-i18next-Integration

Eine der beliebtesten Integrationen von i18next ist die mit React durch die react-i18next-Bindungen. Diese Kombination ermöglicht eine effiziente Internationalisierung innerhalb von React-Komponenten und erleichtert den dynamischen Sprachwechsel und die nahtlose Verwaltungsübersetzung.

Konfigurieren Sie i18next in Ihrer React-Anwendung (nextjs) durch Einrichten der i18next-Instanz und Initialisierung mit den erforderlichen Optionen.

Beispielcode für React-i18next

Hier ist ein schrittweises Beispiel zum Einrichten und Verwenden von react-i18next in einer React-Anwendung:

1. Abhängigkeiten installieren

Installieren Sie zunächst i18next, react-i18next und next-i18next zum Laden von Übersetzungen vom Server:

npm install i18next react-i18next next-i18next

2. Initialisiere i18next

Erstelle eine Datei namens next-i18next.config.js, um i18next zu konfigurieren und zu initialisieren:

// next-i18next.config.js
const path = require('path'); // Füge diese Zeile hinzu, um den Pfad zu definieren
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // Füge hier deine Sprachen hinzu
    // localeDetection: false,  // Standardmäßig ist true
  },
  localePath: path.resolve('./content/locales'),  // Hier liegt dein i18n-Dateipfad
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': 'Englisch',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // Füge diese i18n-Konfiguration hinzu
};

3. Einrichtung der Übersetzungsdateien

Erstelle ein Verzeichnis locales mit Unterverzeichnissen für jede Sprache (en, de, usw.). In jedem Unterverzeichnis erstelle eine Datei translation.json:

Beispiel:

-content
  -locales
    -en
      -translation.json
      -'andere Datei, falls vorhanden'.json
    -de
      -translation.json
      -'andere Datei, falls vorhanden'.json

locales/en/translation.json

{
  "welcome": "Welcome",
  "description": "This is a sample description."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. Wickeln Sie Ihre App mit I18nextProvider ein

In Ihrer Hauptdatei wie index.js, App.js oder _app.tsx wickeln Sie Ihre Anwendung mit appWithTranslation ein:

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // so einwickeln

5. Übersetzungs-Hook in Komponenten verwenden

Jetzt können Sie den useTranslation-Hook verwenden, um Zeichenfolgen in Ihren Komponenten zu übersetzen:

Verwenden Sie zuerst serverSideTranslations in der Datei auf Seitenebene

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Preis() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

Und dann in Ihrer Komponente

import React from 'react';
import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // translation ist hier der Standard

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // Anderen Namespace verwenden
    </div>
  );
};

export default MyComponent;