การนำความเป็นสากลไปใช้(i18n) ใน Next.js: หลายภาษา

ในส่วนนี้ เราจะแนะนำคุณตลอดกระบวนการนำความเป็นสากล(i18n) ไปใช้ใน Next.js ใบสมัคร ของคุณ ด้วย i18n คุณสามารถสร้างประสบการณ์หลายภาษาให้กับผู้ใช้และนำเสนอเนื้อหาเฉพาะภาษาได้

การใช้ next-i18next ห้องสมุด

next-i18next เป็นไลบรารียอดนิยมสำหรับการปรับใช้ i18n ใน Next.js แอปพลิเคชัน ต่อไปนี้คือวิธีที่คุณสามารถเพิ่ม i18n ลงในแอปพลิเคชันของคุณ:

ติดตั้ง next-i18next:

npm install next-i18next

กำหนดค่าไลบรารีใน next.config.js ไฟล์ของคุณ:

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

สร้างไฟล์การกำหนดค่าชื่อ next-i18next.config.js:

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

ใช้ไลบรารีในแอปพลิเคชันของคุณ:

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

การสร้างเนื้อหาหลายภาษา

หลังจากติดตั้ง next-i18next คุณสามารถสร้างไฟล์ภาษา เช่น en.json, เพื่อจัดเตรียมเนื้อหาในแต่ละภาษา fr.json: es.json

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

การสลับภาษา

หากต้องการอนุญาตการสลับภาษา คุณสามารถสร้างเครื่องมือสลับภาษาและใช้ 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>  
 );  
}  

บทสรุป

ส่วนนี้แนะนำให้คุณรู้จักกับกระบวนการนำความเป็นสากล(i18n) ไปใช้ใน Next.js แอปพลิเคชันของคุณโดยใช้ next-i18next ไลบรารี ด้วยการจัดเตรียมเนื้อหาเฉพาะภาษาและการอนุญาตให้ผู้ใช้เปลี่ยนภาษา คุณสามารถสร้างประสบการณ์หลายภาษาที่น่าสนใจสำหรับผู้ใช้ของคุณ