Internacionalizavimo(i18n) įgyvendinimas Next.js: Daugiakalbis

Šiame skyriuje paaiškinsime, kaip įdiegti internacionalizaciją(i18n) jūsų programoje Next.js. Naudodami i18n galite sukurti daugiakalbę patirtį vartotojams ir teikti konkrečiai kalbai skirtą turinį.

Naudojimasis next-i18next biblioteka

next-i18next yra populiari biblioteka, skirta i18n įdiegti programose Next.js. Štai kaip galite pridėti i18n prie programos:

Įdiegti next-i18next:

npm install next-i18next

Sukonfigūruokite biblioteką savo next.config.js faile:

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

Sukurkite konfigūracijos failą pavadinimu next-i18next.config.js:

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

Naudokite biblioteką savo programoje:

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

Daugiakalbio turinio kūrimas

Įdiegę next-i18next galite sukurti kalbos failus, pvz en.json., fr.json, , es.json kad pateiktumėte turinį kiekviena kalba:

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

Kalbos keitimas

Norėdami leisti perjungti kalbą, galite sukurti kalbos perjungimo įrankį ir naudoti šią i18n.changeLanguage funkciją:

 

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

Išvada

Šis skyrius supažindino jus su internacionalizavimo(i18n) diegimo jūsų Next.js programoje naudojant next-i18next biblioteką procesu. Pateikdami konkrečiai kalbai skirtą turinį ir leisdami naudotojams keisti kalbas, galite sukurti patrauklią daugiakalbę savo naudotojų patirtį.