از مونو تا چند زبانه: برنامه React خود را با i18n شارژ کنید

i18n چیست؟

تصور کنید به عنوان یک توسعه دهنده در یک استارتاپ در حال رشد کار می کنید، و مدیرتان نزد شما می آید و می گوید: “ما قصد داریم به کشور جدیدی گسترش پیدا کنیم. برای تعامل با مشتریان محلی، باید تغییراتی ایجاد کنید تا از زبان و محلی آنها پشتیبانی کنید. الزامات.” این فرآیند بین‌المللی‌سازی نامیده می‌شود که معمولاً i18n نامیده می‌شود، زیرا 18 حرف بین «i» و «n» در «بین‌المللی‌سازی» وجود دارد. در این پست بر روی استفاده از بسته جاوا اسکریپت i18next با React تمرکز خواهیم کرد.

ویژگی های i18n

i18n موارد استفاده زیادی دارد، از جمله:

• پشتیبانی از زبان
• تغییر قالب تاریخ و زمان (به عنوان مثال، DD/MM/YYYY، YYYY/MM/DD)
• تشخیص زبان کاربر
• نمایش ارز (قرار دادن نماد ارز با ارقام در کشور متفاوت است) و موارد دیگر.

نصب و راه اندازی

برای استفاده از i18n در React، باید دو بسته را نصب کنیم:

npm i react-i18next i18next --save

را i18next بسته بسته اصلی است که با تمام چارچوب‌ها و برنامه‌های جاوا اسکریپت کار می‌کند، در حالی که react-i18next افزونه ای است که استفاده از i18next را با React آسان می کند.

React را چند زبانه بسازید – راه اندازی

در داخل پوشه src برنامه خود، یک فایل جدید به نام i18n.js ایجاد کنید (شما می توانید هر نامی را انتخاب کنید). فایل را به صورت زیر تنظیم کنید:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {} // We'll fill this later

i18n.use(initReactI18next)
    .init({
      resources,
      lng: 'en', // default language option. en for english
      interpolation: {
        escapeValue: false
      }
    })

export default i18n

در کد بالا اصلی را وارد می کنیم i18next بسته و initReactI18next کلاس سپس کلاس i18n را با ارسال داده های پیکربندی مقداردهی اولیه می کنیم.

را resources شی جایی است که ما ترجمه ها را برای زبان های مختلف ذخیره می کنیم. را interpolation کلید برای جلوگیری از حملات اسکریپت بین سایتی استفاده می شود. را escapeValue روی false تنظیم شده است زیرا بررسی ایمنی به طور پیش‌فرض در React فعال است و ما نمی‌خواهیم i18n دوباره این بررسی را انجام دهد زیرا ممکن است برنامه را کند کند.

در مرحله بعد، این فایل را وارد کنید src/index.js به شرح زیر است:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './i18n';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

اکنون شما آماده استفاده از آن در کامپوننت هستید. بیایید یک کامپوننت به نام ایجاد کنیم Home.js با کد زیر

import React from 'react'
import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t } = useTranslation()

  return (
    <div className='App-header'>
      <p>{t('home_text')}</p>
    </div>
  )
}

export default Home

برنامه ما اکنون باید به این شکل باشد. همانطور که ما هیچ منبع زبانی را در i18n.js اضافه نکردیم. نام کلید نمایش داده خواهد شد.

بریم و هر دو رو آپدیت کنیم i18n.js و Home.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = { // language specific data
  en: {
    translation: {
      'home_text': 'This is my home page',
      'ask user': 'How are you?'
    }
  },
  de: {
    translation: {
      'home_text': 'Dies ist meine Homepage'
    }
  }
}

i18n.use(initReactI18next)
    .init({
      resources,
      lng: 'en', // default language option. en for english
      interpolation: {
        escapeValue: false
      }
    })

const Home = () => {
  const { t } = useTranslation()

  return (
    <div className='App-header'>
      <p>{t('home_text')}</p>
      <p>{t('ask user')}</p>
    </div>
  )
}

در کد بالا از useTranslation قلاب از react-i18next برای دسترسی به تابع ترجمه t(). ما میتوانیم استفاده کنیم t('home_text') برای بازیابی متن ترجمه شده برای کلید home_text.

حالا برنامه ما باید شبیه این باشد

تغییر زبان

برای جابجایی بین زبان ها، react-i18next یک نمونه i18n را با چندین روش ارائه می دهد. بیایید به روز کنیم Home.js شامل تغییر زبان:

const Home = () => {
  const { t, i18n } = useTranslation()
  const languages = {
    en: 'English',
    de: 'German'
  }

  return (
    <div className='App-header'>
      <p>{t('home_text')}</p>
      <p>{t('ask user')}</p>
      <div>
        { Object.keys(languages)
                .map((lng) => <button
                                onClick={() => i18n.changeLanguage(lng)}
                                disabled={i18n.resolvedLanguage == lng}
                                key={lng}
                              >
                                {languages[`${lng}`]}
                              </button>
                    )}
      </div>
    </div>
  )
}

با کد بالا می توانید با استفاده از دکمه های ارائه شده بین زبان ها جابجا شوید.

اما یک مشکل وجود دارد، هنگامی که به جای نمایش تبریک به آلمانی تغییر می‌دهید، نام کلید را به این صورت نمایش می‌دهد.

زبان بازگشتی

برای رسیدگی به کلیدهای ترجمه گمشده، می‌توانیم یک زبان بازگشتی را مشخص کنیم. را به روز کنید i18n.init تماس بگیرید i18n.js به شرح زیر است:

i18n.use(initReactI18next)
    .use(LanguageDetector)
    .init({
      resources,
      lng: 'en',
      interpolation: {
        escapeValue: false
      },
      debug: true, // Will display debug options in console
      fallbackLng: 'en' // If any key is missing, it will fallback to english
    })

تشخیص زبان

ارائه گزینه ای برای تغییر زبان خوب است، اما می توانیم بهتر انجام دهیم.
برای تشخیص خودکار زبان دلخواه کاربر در مرورگر، می‌توانیم از آن استفاده کنیم i18next-browser-languagedetector بسته بندی بسته را نصب و آپدیت کنید i18n.js به شرح زیر است:

import LanguageDetector from 'i18next-browser-languagedetector';

const languageOptions = {
  order: ['navigator', 'querystring'], // Define order and way to find user preference
  lookupQuerystring: 'lng' // key name to find the preference
}

i18n.use(initReactI18next)
    .use(LanguageDetector)
    .init({
      resources,
      lng: 'en',
      interpolation: {
        escapeValue: false
      },
      detection: languageOptions,
      debug: true,
      fallbackLng: 'en'
    })

نیاز به واردات داریم LanguageDetector از بسته و آن را در طول اولیه i18n ارسال کنید.
همچنین باید گزینه هایی را برای تشخیص زبان عبور دهیم detection کلید

بسیاری از گزینه های دیگر وجود دارد که می توانید برای تشخیص زبان از آنها عبور کنید که می توانید آنها را در اسناد پیدا کنید

نتیجه

از شما برای خواندن این پست وبلاگ در مورد چندزبانه کردن یک برنامه React با استفاده از i18n سپاسگزاریم. ما اصول اولیه i18n، نصب، راه اندازی، تغییر زبان، زبان بازگشتی و تشخیص زبان را پوشش دادیم. منتظر قسمت بعدی باشید که در آن ویژگی های بیشتر ارائه شده توسط i18next را بررسی خواهیم کرد.

اگر اصلاح یا سوالی دارید، در کامنت بگذارید. باز هم از شما برای خواندن متشکرم!

عکس کوچک توسط آمادور لوریرو در Unsplash