Implementasi Internasionalisasi(i18n) dalam Next.js: Multilingual

Di bagian ini, kami akan memandu Anda melalui proses penerapan Internasionalisasi(i18n) di Next.js aplikasi Anda. Dengan i18n, Anda dapat menciptakan pengalaman multibahasa bagi pengguna dan menyediakan konten khusus bahasa.

Menggunakan next-i18next Perpustakaan

next-i18next adalah perpustakaan populer untuk mengimplementasikan i18n dalam Next.js aplikasi. Berikut cara menambahkan i18n ke aplikasi Anda:

Instal next-i18next:

npm install next-i18next

Konfigurasikan perpustakaan di next.config.js file Anda:

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

Buat file konfigurasi bernama next-i18next.config.js:

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

Gunakan perpustakaan di aplikasi Anda:

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

Membuat Konten Multibahasa

Setelah menginstal next-i18next, Anda dapat membuat file bahasa seperti en.json, fr.json, es.json untuk menyediakan konten dalam setiap bahasa:

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

Peralihan Bahasa

Untuk mengizinkan peralihan bahasa, Anda dapat membuat alat pengalih bahasa dan menggunakan fungsi i18n.changeLanguage:

 

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

Bagian ini memperkenalkan Anda pada proses penerapan Internasionalisasi(i18n) dalam Next.js aplikasi Anda menggunakan next-i18next perpustakaan. Dengan menyediakan konten khusus bahasa dan memungkinkan pengguna beralih bahasa, Anda dapat menciptakan pengalaman multibahasa yang menarik bagi pengguna Anda.