Implementing Internationalization(i18n) in Next.js: Multilingual

Ing bagean iki, kita bakal nuntun sampeyan babagan proses implementasine Internasionalisasi(i18n) ing Next.js aplikasi sampeyan. Kanthi i18n, sampeyan bisa nggawe pengalaman multibasa kanggo pangguna lan nyedhiyakake konten khusus basa.

Nggunakake next-i18next Pustaka

next-i18next minangka perpustakaan populer kanggo ngetrapake i18n ing Next.js aplikasi. Mangkene carane sampeyan bisa nambah i18n menyang aplikasi sampeyan:

Instal next-i18next:

npm install next-i18next

Konfigurasi perpustakaan ing next.config.js file sampeyan:

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

Gawe file konfigurasi kanthi jeneng next-i18next.config.js:

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

Gunakake perpustakaan ing aplikasi sampeyan:

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

Nggawe Konten Multilingual

Sawise nginstal next-i18next, sampeyan bisa nggawe file basa kaya en.json, fr.json, es.json kanggo nyedhiyakake konten ing saben basa:

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

Ngalih Basa

Kanggo ngidini ngoper basa, sampeyan bisa nggawe alat ngalih basa lan nggunakake i18n.changeLanguage fungsi:

 

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

Kesimpulan

Bagean iki ngenalake sampeyan babagan proses ngetrapake Internasionalisasi(i18n) ing Next.js aplikasi sampeyan nggunakake next-i18next perpustakaan. Kanthi nyedhiyakake konten khusus basa lan ngidini pangguna ngalih basa, sampeyan bisa nggawe pengalaman multibasa sing nyenengake kanggo pangguna.