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, wir werden untersuchen, wie i18next einfach mit React und Next integriert wird.js-Anwendungen
Erste, Lass uns mit einem kurzen Überblick über i18next beginnen. Es ist eine JavaScript-Bibliothek, die eine einfache API zum Laden und Verwalten von Übersetzungen bereitstellt. Sie können es mit einer Vielzahl von Front-End-Frameworks verwenden, einschließlich React und Next.js. i18next unterstützt viele Funktionen sofort nach der Installation, wie die 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 Ihr React oder Next zu integrieren.js-Anwendung, du musst 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, Sie können 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, wir importieren die useTranslation Haken vom react-i18next Paket. Wir verwenden es dann, um Übersetzungen zu laden und eine Übersetzungsfunktion zu erhaltent) das wir verwenden können, um Text innerhalb der Komponente zu übersetzen
Wir können dann die t Funktion zum Übersetzen der title Und description Strings aus unseren Übersetzungsdateien. Die Übersetzungsdateien können JSON-Dateien sein, so:
{
"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 automatisch mehrere Sprachen mit dem i18next FluentC-Plugin erstellen
In diesem Beispiel, wir haben 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, wir können das verwenden 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, wir importieren 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 geladen und i18next eingerichtet haben, du kannst anfangen, die useTranslation Hook zum Übersetzen von Text innerhalb Ihrer Komponenten
In einem Nächsten.js-Anwendung, Sie können denselben Ansatz verwenden, um i18next zu integrieren. Sie können Übersetzungen in die getStaticProps oder getServer
