ინტერნაციონალიზაციის განხორციელება(i18n) in 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. ენის სპეციფიკური კონტენტის მიწოდებით და მომხმარებლებს ენების გადართვის მიცემით, შეგიძლიათ შექმნათ საინტერესო მრავალენოვანი გამოცდილება თქვენი მომხმარებლებისთვის.