تنفيذ التدويل(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 المكتبة. ومن خلال توفير محتوى خاص باللغة وتمكين المستخدمين من تبديل اللغات، يمكنك إنشاء تجربة جذابة متعددة اللغات لمستخدميك.