i18next est une bibliothèque d'internationalisation populaire qui facilite la traduction des applications web en plusieurs langues. C'est un excellent choix pour React et Next.développeurs js cherchant à soutenir des utilisateurs dans le monde entier. Dans cet article, nous allons explorer comment i18next s'intègre facilement avec React et Next.applications js
Premier, commençons par un bref aperçu d'i18next. C'est une bibliothèque JavaScript qui fournit une API simple pour charger et gérer des traductions. Vous pouvez l'utiliser avec une variété de frameworks front-end, y compris React et Next.js. i18next prend en charge de nombreuses fonctionnalités prêtes à l'emploi, comme la pluralisation, contexte, et interpolation. Il prend également en charge le chargement de traductions à partir de diverses sources, y compris les fichiers JSON et les API backend
Pour intégrer i18next dans votre React ou Next.application js, vous devrez d'abord l'installer. Vous pouvez le faire avec npm ou yarn en exécutant la commande suivante
npm install i18next
ou
yarn add i18next
Une fois que vous avez installé i18next, vous pouvez commencer à l'utiliser dans votre application. L'une des façons les plus simples d'utiliser i18next avec React est d'utiliser le useTranslation crochet. Ce hook offre un moyen pratique de charger des traductions et de traduire du texte dans vos composants
Voici un exemple de la façon d'utiliser le useTranslation hook dans un composant React :
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;
Dans cet exemple, nous importons le useTranslation crochet de la react-i18next paquet. Nous l'utilisons ensuite pour charger des traductions et obtenir une fonction de traductiont) que nous pouvons utiliser pour traduire du texte dans le composant
Nous pouvons alors utiliser le t fonction pour traduire le title et description chaînes de nos fichiers de traduction. Les fichiers de traduction peuvent être des fichiers JSON, comme ça
{
"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 peut construire plusieurs langues automatiquement en utilisant le plugin i18next FluentC
Dans cet exemple, nous avons deux traductions : une pour l'anglais et une pour le français. Nous pouvons charger ces traductions dans notre application en utilisant le i18next bibliothèque
Charger des traductions, nous pouvons utiliser le i18next objet et son init fonction. Voici un exemple
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
},
},
});
Dans cet exemple, nous importons les traductions en anglais et en français à partir de fichiers JSON. Nous initialisons ensuite i18next avec ces traductions et définissons la langue par défaut sur l'anglais. Nous configurons également les paramètres d'interpolation afin de pouvoir utiliser des variables dans nos traductions
Une fois que vous avez chargé vos traductions et configuré i18next, vous pouvez commencer à utiliser le useTranslation crochet pour traduire du texte dans vos composants
Dans un Suivant.application js, vous pouvez utiliser la même approche pour intégrer i18next. Vous pouvez charger des traductions dans le getStaticProps ou getServer
