Utekelezaji wa Utaftaji wa Kimataifa(i18n) katika Next.js: Lugha nyingi

Katika sehemu hii, tutakuongoza kupitia mchakato wa kutekeleza Utangazaji wa Kimataifa(i18n) katika Next.js ombi lako. Ukiwa na i18n, unaweza kuunda matumizi ya lugha nyingi kwa watumiaji na kutoa maudhui ya lugha mahususi.

Kutumia next-i18next Maktaba

next-i18next ni maktaba maarufu ya kutekeleza i18n katika Next.js programu. Hivi ndivyo unavyoweza kuongeza i18n kwenye programu yako:

Sakinisha next-i18next:

npm install next-i18next

Sanidi maktaba katika next.config.js faili yako:

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

Unda faili ya usanidi inayoitwa next-i18next.config.js:

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

Tumia maktaba katika programu yako:

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

Kuunda Maudhui ya Lugha nyingi

Baada ya kusakinisha next-i18next, unaweza kuunda faili za lugha kama vile en.json, fr.json, es.json ili kutoa maudhui katika kila lugha:

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

Kubadilisha Lugha

Ili kuruhusu ubadilishaji wa lugha, unaweza kuunda zana ya kubadili lugha na kutumia i18n.changeLanguage chaguo hili:

 

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

Hitimisho

Sehemu hii ilikuletea mchakato wa kutekeleza Utaifa(i18n) katika Next.js maombi yako kwa kutumia next-i18next maktaba. Kwa kutoa maudhui ya lugha mahususi na kuwezesha watumiaji kubadilisha lugha, unaweza kuunda hali ya utumiaji ya lugha nyingi inayovutia kwa watumiaji wako.