Arrêtez de perdre du temps et d'être frustré avec i18next
16 mars 2023
La traduction dans AdobeXD est simple
18 mars 2023
i18next est une bibliothèque d'internationalisation populaire qui facilite la traduction d'applications Web en plusieurs langues. C'est un excellent choix pour les développeurs React et Next.js qui cherchent à aider les utilisateurs du monde entier. Dans cet article, nous verrons comment i18next s'intègre facilement aux applications React et Next.js.
Commençons par un bref aperçu de i18next. Il s'agit d'une bibliothèque JavaScript qui fournit une API simple pour le chargement et la gestion des traductions. Vous pouvez l'utiliser avec une variété de frameworks front-end, notamment React et Next.js. i18next prend en charge de nombreuses fonctionnalités prêtes à l'emploi, telles que la pluralisation, le contexte et l'interpolation. Il prend également en charge le chargement de traductions à partir de diverses sources, notamment des fichiers JSON et des API back-end.
Pour intégrer i18next dans votre application React ou Next.js, vous devez 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'un des moyens les plus simples d'utiliser i18next avec React est d'utiliser leuseTranslationhook. Ce hook fournit un moyen pratique de charger des traductions et de traduire du texte dans vos composants.
Voici un exemple de la façon d'utiliser leuseTranslationhook 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 leuseTranslationcrochet de lareact-i18nextpackage. Nous l'utilisons ensuite pour charger des traductions et obtenir une fonction de traduction (t) que nous pouvons utiliser pour traduire du texte dans le composant.
Nous pouvons alors utiliser letfonction pour traduire letitleetdescriptionchaî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 la commandei18nextbibliothèque.
Pour charger les traductions, nous pouvons utiliser lei18nextobjet et soninitfonction. 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 anglaise et française à 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 leuseTranslationcrochet 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 legetStaticPropsougetServer
