i18next est une bibliothèque d'internationalisation populaire qui facilite la traduction des applications web en plusieurs langues. C'est un excellent choix pour les développeurs React et Next.js souhaitant prendre en charge des utilisateurs du monde entier. Dans cet article, nous explorerons comment i18next s'intègre facilement aux applications React et Next.js.
Commençons d'abord par un bref aperçu d'i18next. C'est une bibliothèque JavaScript qui offre une API simple pour charger et gérer les 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 dès la sortie de la boîte, telles que la pluralisation, le contexte et l'interpolation. Il prend également en charge le chargement des traductions à partir de diverses sources, y compris des fichiers JSON et des API backend.
Pour intégrer i18next dans votre application React ou Next.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 crochet 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 ceci :
{
"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 créer plusieurs langues automatiquement à l'aide du 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.
Pour charger les 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 une application Next.js, vous pouvez utiliser la même approche pour intégrer i18next. Vous pouvez charger des traductions dans le getStaticProps ou getServer
