Tirer parti d'i18next pour l'internationalisation basée sur React

L'internationalisation (i18n) est essentielle pour étendre la portée des logiciels sur les marchés mondiaux. L'un des outils les plus efficaces à cette fin dans l'écosystème JavaScript est i18next. Cet article explore i18next, en particulier son intégration avec React, et met en évidence ses avantages, sa compatibilité avec divers frameworks et des conseils pour améliorer les efforts de localisation.

Qu'est-ce que i18next ?

i18next est un framework d'internationalisation robuste pour les applications JavaScript. Il simplifie l'ajout de la prise en charge multilingue aux applications Web, mobiles et de bureau. Le framework permet une gestion de la traduction dynamique, ce qui simplifie l'adaptation des applications à différentes langues et régions.

Avantages d'i18next

• Facilité d'intégration

i18next est facile à intégrer dans les projets existants et prend en charge les frameworks JavaScript populaires tels que React, Angular et Vue. Cette polyvalence en fait un choix privilégié pour les développeurs.

• Personnalisation et flexibilité

i18next offre une structure modulaire qui permet aux développeurs d'utiliser uniquement les fonctionnalités dont ils ont besoin. Ce haut degré de personnalisation garantit que le framework peut répondre à un large éventail d'exigences de projet.

• Chargement dynamique des traductions

Le framework prend en charge le chargement dynamique des traductions, optimisant les performances en récupérant uniquement les ressources linguistiques nécessaires à la demande.

• Pluralisation et contextualisation

i18next inclut un support intégré pour la gestion de la pluralisation et de la contextualisation, garantissant des variations linguistiques précises en fonction de la quantité ou du contexte.

• Prise en charge de différents formats de fichiers

Il prend en charge plusieurs formats de fichiers pour le stockage des traductions, notamment JSON et YAML, offrant ainsi une flexibilité dans le choix du format qui correspond le mieux aux besoins du projet.

• Écosystème riche

Une communauté florissante et un écosystème riche fournissent des plugins, des extensions et un support pour améliorer et étendre les fonctionnalités d’i18next, ce qui permet de gagner du temps et des efforts de développement.

• Plusieurs options de backend

i18next prend en charge divers backends pour stocker et récupérer les traductions, tels que en mémoire, HTTP et des backends personnalisés, permettant une intégration avec différentes solutions de stockage.

• Développement et maintenance actifs

Des mises à jour et des améliorations régulières maintiennent i18next au courant des meilleures pratiques et des besoins évolutifs en matière de développement Web.

Intégration React-i18next

L'une des intégrations les plus populaires d'i18next est avec React via les liaisons react-i18next. Cette combinaison permet une internationalisation efficace au sein des composants React, facilitant la commutation de langue dynamique et la gestion transparente des traductions.

Configurez i18next dans votre application React (nextjs) en configurant l'instance i18next et en l'initialisant avec les options requises.

Code d'Exemple pour React-i18next

Voici un exemple étape par étape de la configuration et de l'utilisation de react-i18next dans une application React :

1. Installer les Dépendances

Tout d'abord, installez i18next, react-i18next et next-i18next pour charger les traductions du serveur :

npm install i18next react-i18next next-i18next

2. Initialiser i18next

Créer un fichier nommé next-i18next.config.js pour configurer et initialiser i18next :

// next-i18next.config.js
const path = require('path'); // ajouter cette ligne pour définir path
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'], // ajouter vos langues ici
    // localeDetection: false, // la valeur par défaut est true
  },
  localePath: path.resolve('./content/locales'), // ici se trouve le chemin de votre fichier i18n
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': 'Anglais',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n, // ajouter cette configuration i18n
};

3. Configuration des fichiers de traduction

Créer un répertoire locales avec des sous-répertoires pour chaque langue (fr, de, etc.). Dans chaque sous-répertoire, créer un fichier translation.json :

exemple:

-content
  -locales
    -fr
      -translation.json
      -'autre fichier si vous en avez'.json
    -de
      -translation.json
      -'autre fichier si vous en avez'.json

locales/fr/translation.json

{
  "welcome": "Bienvenue",
  "description": "Ceci est une description d'exemple."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. Envelopper votre application avec I18nextProvider

Dans votre fichier principal comme index.js, App.js ou _app.tsx, enveloppez votre application avec appWithTranslation :

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // envelopper comme ça 

5. Utiliser le crochet de traduction dans les composants

Maintenant, vous pouvez utiliser le crochet useTranslation pour traduire des chaînes dans vos composants :

Tout d’abord, vous devez utiliser serverSideTranslations dans le fichier de niveau de page

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Price() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

Et ensuite dans votre composant

import React from 'react';
import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other'); // La traduction est par défaut ici

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // Utiliser un espace de noms différent
    </div>
  );
};

export default MyComponent;