Implémentation de l'internationalisation(i18n) en Next.js: Multilingue

Dans cette section, nous vous guiderons tout au long du processus de mise en œuvre de l'internationalisation(i18n) dans votre Next.js candidature. Avec i18n, vous pouvez créer une expérience multilingue pour les utilisateurs et fournir un contenu spécifique à une langue.

Utiliser la next-i18next bibliothèque

next-i18next est une bibliothèque populaire pour implémenter i18n dans Next.js les applications. Voici comment ajouter i18n à votre application :

Installer next-i18next  :

npm install next-i18next

Configurez la bibliothèque dans votre next.config.js fichier :

const { i18n } = require('./next-i18next.config');  
  
module.exports = {  
  i18n,  
};  

Créez un fichier de configuration nommé next-i18next.config.js  :

module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};  

Utilisez la bibliothèque dans votre application :

import { useTranslation } from 'next-i18next';  
  
function MyComponent() {  
  const { t } = useTranslation();  
  
  return( 
    <div>  
      <p>{t('welcome')}</p>  
    </div>  
 );  
}  

Création de contenu multilingue

Après l'installation de next-i18next, vous pouvez créer des fichiers de langue tels que en.json, fr.json, es.json pour fournir du contenu dans chaque langue :

// en.json  
{  
  "welcome": "Welcome!"  
}  
  
// fr.json  
{  
  "welcome": "Bienvenue!"  
}  
  
// es.json  
{  
  "welcome": "¡Bienvenido!"  
}  

Changement de langue

Pour autoriser le changement de langue, vous pouvez créer un outil de changement de langue et utiliser la i18n.changeLanguage fonction :

 

import { useTranslation } from 'next-i18next';  
  
function LanguageSwitcher() {  
  const { i18n } = useTranslation();  
  
  const handleChangeLanguage =(newLanguage) => {  
    i18n.changeLanguage(newLanguage);  
  };  
  
  return( 
    <div>  
      <button onClick={() => handleChangeLanguage('en')}>English</button>  
      <button onClick={() => handleChangeLanguage('fr')}>Français</button>  
      <button onClick={() => handleChangeLanguage('es')}>Español</button>  
    </div>  
 );  
}  

Conclusion

Cette section vous a présenté le processus d'implémentation de l'internationalisation(i18n) dans votre Next.js application à l'aide de la next-i18next bibliothèque. En fournissant un contenu spécifique à une langue et en permettant aux utilisateurs de changer de langue, vous pouvez créer une expérience multilingue attrayante pour vos utilisateurs.