i18next ist eine beliebte Internationalisierungsbibliothek, die es einfach macht, Webanwendungen in mehrere Sprachen zu übersetzen. Es ist eine großartige Wahl für React- und Next.js-Entwickler, die Benutzer auf der ganzen Welt unterstützen möchten. In diesem Artikel werden wir untersuchen, wie i18next sich einfach in React- und Next.js-Anwendungen integrieren lässt.
Zuerst geben wir einen kurzen Überblick über i18next. Es ist eine JavaScript-Bibliothek, die eine einfache API zum Laden und Verwalten von Übersetzungen bietet. Sie können es mit einer Vielzahl von Front-End-Frameworks verwenden, einschließlich React und Next.js. i18next unterstützt viele Funktionen direkt ab Werk, wie Pluralisierung, Kontext und Interpolation. Es unterstützt auch das Laden von Übersetzungen aus verschiedenen Quellen, einschließlich JSON-Dateien und Backend-APIs.
Um i18next in Ihre React- oder Next.js-Anwendung zu integrieren, müssen Sie es zuerst installieren. Sie können dies mit npm oder yarn tun, indem Sie den folgenden Befehl ausführen
npm install i18next
oder
yarn add i18next
Sobald Sie i18next installiert haben, können Sie es in Ihrer Anwendung verwenden. Eine der einfachsten Möglichkeiten, i18next mit React zu verwenden, ist die Verwendung des useTranslation Haken. Dieser Hook bietet eine bequeme Möglichkeit, Übersetzungen zu laden und Text innerhalb Ihrer Komponenten zu übersetzen.
Hier ist ein Beispiel für die Verwendung des useTranslation Hook in einer React-Komponente:
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</div>
);
}
export default MyComponent;
In diesem Beispiel importieren wir die useTranslation Haken vom react-i18next Paket. Wir verwenden es dann, um Übersetzungen zu laden und eine Übersetzungsfunktion zu erhaltent), die wir zum Übersetzen von Text innerhalb der Komponente verwenden können.
Wir können dann die t Funktion zum Übersetzen der title Und description Zeichenketten aus unseren Übersetzungsdateien. Die Übersetzungsdateien können JSON-Dateien sein, wie diese:
{
"en": {
"title": "Welcome to my app!",
"description": "This is my app description."
},
"fr": {
"title": "Bienvenue dans mon application !",
"description": "Ceci est la description de mon application."
}
}
FluentC kann mit dem i18next FluentC-Plugin automatisch mehrere Sprachen erstellen.
In diesem Beispiel haben wir zwei Übersetzungen: eine für Englisch und eine für Französisch. Wir können diese Übersetzungen in unsere Anwendung laden, indem wir die i18next Bibliothek.
Um Übersetzungen zu laden, können wir den i18next Objekt und seine init Funktion. Hier ist ein Beispiel
import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';
i18next.init({
interpolation: { escapeValue: false },
lng: 'en',
resources: {
en: {
translation: translationEN
},
fr: {
translation: translationFR
},
},
});
In diesem Beispiel importieren wir die englischen und französischen Übersetzungen aus JSON-Dateien. Wir initialisieren dann i18next mit diesen Übersetzungen und setzen die Standardsprache auf Englisch. Wir konfigurieren auch die Interpolations-Einstellungen, damit wir Variablen in unseren Übersetzungen verwenden können.
Sobald Sie Ihre Übersetzungen hochgeladen und i18next eingerichtet haben, können Sie mit der Nutzung der useTranslation Hook zum Übersetzen von Text innerhalb Ihrer Komponenten.
In einer Next.js-Anwendung können Sie denselben Ansatz verwenden, um i18next zu integrieren. Sie können Übersetzungen in die getStaticProps oder getServer