Melaksanakan Pengantarabangsaan(i18n) dalam Next.js: Berbilang bahasa

Dalam bahagian ini, kami akan membimbing anda melalui proses pelaksanaan Pengantarabangsaan(i18n) dalam Next.js permohonan anda. Dengan i18n, anda boleh mencipta pengalaman berbilang bahasa untuk pengguna dan menyediakan kandungan khusus bahasa.

Menggunakan next-i18next Perpustakaan

next-i18next ialah perpustakaan yang popular untuk melaksanakan i18n dalam Next.js aplikasi. Begini cara anda boleh menambah i18n pada aplikasi anda:

Pasang next-i18next:

npm install next-i18next

Konfigurasikan perpustakaan dalam next.config.js fail anda:

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

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

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

Gunakan perpustakaan dalam aplikasi anda:

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

Mencipta Kandungan Berbilang Bahasa

Selepas memasang next-i18next, anda boleh membuat fail bahasa seperti en.json, fr.json, es.json untuk menyediakan kandungan dalam setiap bahasa:

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

Pertukaran Bahasa

Untuk membenarkan penukaran bahasa, anda boleh mencipta alat penukar bahasa dan menggunakan 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

Bahagian ini memperkenalkan anda kepada proses pelaksanaan Pengantarabangsaan(i18n) dalam Next.js aplikasi anda menggunakan next-i18next perpustakaan. Dengan menyediakan kandungan khusus bahasa dan membolehkan pengguna menukar bahasa, anda boleh mencipta pengalaman berbilang bahasa yang menarik untuk pengguna anda.