Verschwenden Sie keine Zeit mehr und ärgern Sie sich nicht mehr über i18next
16. März 2023
Die Übersetzung in AdobeXD ist einfach
18. März 2023
i18next ist eine beliebte Internationalisierungsbibliothek, die das Übersetzen von Webanwendungen in mehrere Sprachen erleichtert. Sie 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 untersuchen wir, wie sich i18next problemlos in React- und Next.js-Anwendungen integrieren lässt.
Beginnen wir zunächst mit einem kurzen Überblick über i18next. Es handelt sich um eine JavaScript-Bibliothek, die eine einfache API zum Laden und Verwalten von Übersetzungen bereitstellt. Sie können sie mit einer Vielzahl von Front-End-Frameworks verwenden, darunter React und Next.js. i18next unterstützt viele sofort einsatzbereite Funktionen wie Pluralisierung, Kontext und Interpolation. Es unterstützt auch das Laden von Übersetzungen aus verschiedenen Quellen, darunter 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 vonuseTranslationHook. Dieser Hook bietet eine praktische Möglichkeit, Übersetzungen zu laden und Text innerhalb Ihrer Komponenten zu übersetzen.
Hier ist ein Beispiel für die Verwendung desuseTranslationHook 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 dieuseTranslationHaken vomreact-i18nextPaket. Wir verwenden es dann, um Übersetzungen zu laden und eine Übersetzungsfunktion zu erhalten (t), die wir zum Übersetzen von Text innerhalb der Komponente verwenden können.
Wir können dann dietFunktion zum Übersetzen dertitleUnddescriptionZeichenfolgen 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 wiri18nextBibliothek.
Um Übersetzungen zu laden, können wir deni18nextObjekt und seineinitFunktion. 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. Anschließend initialisieren wir i18next mit diesen Übersetzungen und stellen die Standardsprache auf Englisch ein. Außerdem konfigurieren wir die Interpolationseinstellungen, damit wir Variablen in unseren Übersetzungen verwenden können.
Sobald Sie Ihre Übersetzungen hochgeladen und i18next eingerichtet haben, können Sie mit der Nutzung deruseTranslationHook zum Übersetzen von Text innerhalb Ihrer Komponenten.
In einer Next.js-Anwendung können Sie den gleichen Ansatz verwenden, um i18next zu integrieren. Sie können Übersetzungen in dengetStaticPropsodergetServer
