سایت React چندزبانه با استفاده از کتابخانه i18next

I18next is an internationalization-framework written in and for JavaScript. But it's much more than that. i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

نصب

yarn add i18next react-i18next

کانفیگ

یک فایل برای مثال در root پروژه به نام locale.js برای کانفیگ i18next ایجاد کنید.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HomeLocale from '../scenes/Home/Home.locale';

i18n
  .use(initReactI18next) // pass the i18n instance to react-i18next.
  .init({
    resources: {
      ...HomeLocale // merge Home locale to i18n resource
      // add other translation to the array
    },
    lng: 'en_US', // default language
    fallbackLng: 'en_US',
    debug: false,
    interpolation: {
      escapeValue: false // not needed for react as it escapes by default
    }
  });
export default i18n;

برای option های بیشتر به آدرس https://www.i18next.com/overview/configuration-options سری بزنید.

حالا این کانفیگ رو در فایل Main پروژتون import کنید، برای مثال Main پروژه من App.js اِ

import './locale.js';

ترجمه‌ها

من فایل ترجمه هر کامپوننت رو در کنار خود اون با پسوند locale.js قرار دادم، برای مثال کامپوننت Home یک فایل در کنار خودش با نام Home.locale.js داره که به شکل زیر عبارت‌های مورد نیازم رو درون اون ترجمه کردم.

export default {
  fa_IR: {
    home: {
      'Welcome to Virgool': 'به ویرگول خوش آمدید',
      'Your messages: {{message_count}}': 'تعداد پیام‌های شما: {{message_count}}'
    }
  },
  // add other language to the object
};

نکته: خود i18next در داکیومنتش گفته که برای هر عبارتی که نیاز به ترجمه داره یک کلید تعریف کنید، به عنوان نمونه بنویسید welcome_virgool ولی اگه به فایل ترجمه‌ی من نگاه کنید من عین عبارت انگلیسی رو تایپ کردم، من این روش رو خیلی وقت پیش از فریم‌ورک پی اچ پی Yii2 یاد گرفتم، این کار دو مزیت داره، یکی اینکه شما دیگه نیاز به تعریف زبان انگلیسی ندارید و i18next در زبان انگلیسی خود کلید رو نمایش میده و مزیت دیگه‌ای که داره اینکه اگه نفر بعدی قصد اضاف کردن زبان جدیدی رو داشته باشه به راحتی با خوندن کلیدها میتونه ترجمش رو انجام بده.

فقط دقت داشته باشین که در کانفیگ i18next مقدار lng رو روی en_US تنظیم کنید و در App.js یا فایل main پروژه زبان رو روی زبان پیشفرض تنظیم کنید (بعداً میگم از طریق چه تابعی میتونید زبان رو change کنید) بازم میگم که این روشی که من رفتم از طریق lng نمیتونید زبان پیشفرض رو تنظیم کنید و حتما باید روی en_US تنظیم بشه.

طرز استفاده

import { useTranslation } from 'react-i18next';

const Home = () => {
  const {t, i18n} = useTranslation(['home']); // &quothome&quot is namespace
  
  // To manually change language
  // i18n.changeLanguage('fa_IR');
  
  return (
    <div>
      <h1>{t('Welcome to Virgool')}</h1>
      <p>{t('Your messages: {{message_count}}', {message_count: 6})}</p>
    </div>
  )
}
export default Home;

یه توضیح کوچیک بدم، اگه به خط دوم دقت کنید می‌بینید که use ها به i18next هم رخنه کردن و من ازین بابت بسیار خوشحالم، چون جنس رخنشون خوب بوده، روش HOC هم واسش نوشتن که توی سایت i18next با مثال توضیح داده، به پارامتر useTranslation دقت کنید، این تابع از شما آرایه‌ای از namespace ها رو میگیره، اگه به کد Home.locale.js نگاه کنید می‌بینید که من از کلمه‌ی کلیدی home استفاده کردم و اینجا هم از namespace اش، اولین namespace به عنوان default به i18next برای این کامپوننت تعلق میگیره و ترجمه‌هاشو از نیم اسپیس home میخونه.

برای تغییر زبان از تابع changeLanguage میتونید استفاده کنید، این تیکه کد فقط برای یادگیری بیشتره و لازم نیست اینجا زبان رو change کنید، همینطور که پیش‌تر گفتم توی App.js میتونید با این چند خط زبان رو به فارسی که برای مثال زبان default شماست change کنید.

detect زبان با استفاده از language detector

یه کتابخونه هم واسه detect زبان از طریق مرورگر به نام i18next-browser-languagedetector داره که میتونید به کانفیگ پروژتون اضافش کنید.

شما از طرق زیر میتونید زبان رو change کنید.

• query string
• cookie
• localStorage
• navigator
• html tag
• path
• subdomain

برای کانفیگ این مورد به آدرس https://github.com/i18next/i18next-browser-languageDetector یه سر بزنید.