Implementarea Internaționalizării(i18n) în Next.js: Multilingv

În această secțiune, vă vom ghida prin procesul de implementare a Internaționalizării(i18n) în Next.js aplicația dvs. Cu i18n, puteți crea o experiență multilingvă pentru utilizatori și puteți oferi conținut specific limbii.

Utilizarea next-i18next Bibliotecii

next-i18next este o bibliotecă populară pentru implementarea i18n în Next.js aplicații. Iată cum puteți adăuga i18n la aplicația dvs.:

Instalați next-i18next:

npm install next-i18next

Configurați biblioteca din next.config.js fișierul dvs.:

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

Creați un fișier de configurare numit next-i18next.config.js:

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

Utilizați biblioteca din aplicația dvs.:

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

Crearea de conținut multilingv

După instalarea next-i18next, puteți crea fișiere de limbă precum en.json, fr.json, es.json pentru a oferi conținut în fiecare limbă:

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

Schimbarea limbii

Pentru a permite schimbarea limbii, puteți crea un instrument de schimbare a limbii și puteți utiliza i18n.changeLanguage funcția:

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>  
 );  
}  

Concluzie

Această secțiune v-a introdus în procesul de implementare a Internaționalizării(i18n) în Next.js aplicația dvs. folosind next-i18next biblioteca. Oferind conținut specific limbii și permițând utilizatorilor să schimbe limbile, puteți crea o experiență multilingvă captivantă pentru utilizatorii dvs.