Provedba internacionalizacije(i18n) u Next.js: Višejezično

U ovom odjeljku vodit ćemo vas kroz proces implementacije internacionalizacije(i18n) u vašu Next.js aplikaciju. S i18n možete stvoriti višejezično iskustvo za korisnike i pružiti sadržaj specifičan za jezik.

Korištenje next-i18next knjižnice

next-i18next je popularna biblioteka za implementaciju i18n u Next.js aplikacije. Evo kako možete dodati i18n svojoj aplikaciji:

Instaliraj next-i18next:

npm install next-i18next

Konfigurirajte biblioteku u svojoj next.config.js datoteci:

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

Napravite konfiguracijsku datoteku pod nazivom next-i18next.config.js:

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

Koristite biblioteku u svojoj aplikaciji:

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

Stvaranje višejezičnog sadržaja

Nakon instaliranja next-i18next, možete stvoriti jezične datoteke kao što su en.json, fr.json, es.json kako biste pružili sadržaj na svakom jeziku:

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

Promjena jezika

Da biste omogućili promjenu jezika, možete izraditi alat za promjenu jezika i koristiti i18n.changeLanguage funkciju:

 

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

Zaključak

Ovaj odjeljak vas je upoznao s procesom implementacije internacionalizacije(i18n) u vašoj Next.js aplikaciji pomoću next-i18next knjižnice. Pružanjem sadržaja specifičnog za jezik i omogućavanjem korisnicima da mijenjaju jezike, možete stvoriti privlačno višejezično iskustvo za svoje korisnike.