Implementimi i Ndërkombëtarizimit(i18n) në Next.js: Shumëgjuhësh

Në këtë seksion, ne do t'ju udhëzojmë përmes procesit të zbatimit të Ndërkombëtarizimit(i18n) në Next.js aplikacionin tuaj. Me i18n, ju mund të krijoni një përvojë shumëgjuhëshe për përdoruesit dhe të ofroni përmbajtje specifike për gjuhën.

Duke përdorur next-i18next Bibliotekën

next-i18next është një bibliotekë popullore për zbatimin e i18n në Next.js aplikacione. Ja se si mund të shtoni i18n në aplikacionin tuaj:

Instaloni next-i18next:

npm install next-i18next

Konfiguro bibliotekën në next.config.js skedarin tuaj:

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

Krijoni një skedar konfigurimi me emrin next-i18next.config.js:

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

Përdorni bibliotekën në aplikacionin tuaj:

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

Krijimi i përmbajtjes shumëgjuhëshe

Pas instalimit next-i18next, mund të krijoni skedarë gjuhësorë si en.json, fr.json, es.json për të ofruar përmbajtje në secilën gjuhë:

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

Ndërrimi i gjuhës

Për të lejuar ndërrimin e gjuhës, mund të krijoni një mjet ndërruesi të gjuhës dhe të përdorni i18n.changeLanguage funksionin:

 

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

konkluzioni

Ky seksion ju prezantoi me procesin e zbatimit të Ndërkombëtarizimit(i18n) në Next.js aplikacionin tuaj duke përdorur next-i18next bibliotekën. Duke ofruar përmbajtje specifike për gjuhën dhe duke u mundësuar përdoruesve të ndryshojnë gjuhët, ju mund të krijoni një përvojë tërheqëse shumëgjuhëshe për përdoruesit tuaj.