پیاده‌سازی قابلیت چند زبانه در React با استفاده از i18next

سلام! من صادق جعفری هستم و در این مقاله قصد دارم شما را با پیاده‌سازی قابلیت چند زبانه در React با استفاده از کتابخانه i18next آشنا کنم. پیاده‌سازی این قابلیت می‌تواند به شما کمک کند تا کاربران بیشتری را جذب کرده و تجربه کاربری بهتری ارائه دهید. در این مقاله، به طور کامل نحوه استفاده از i18next در پروژه‌های React را بررسی خواهیم کرد.

پیاده‌سازی قابلیت چند زبانه در یک وب‌سایت، نیازمند درک دقیق از نیازهای کاربران مختلف است. برای شروع، ابتدا باید i18next را به پروژه React خود اضافه کنیم. i18next یک کتابخانه قدرتمند برای بین‌المللی‌سازی (i18n) در جاوااسکریپت است که با فریمورک‌های مختلفی از جمله React سازگار است. برای نصب i18next و افزونه‌های مربوطه، از دستور زیر استفاده می‌کنیم:

npm install i18next react-i18next
 

پس از نصب، باید i18next را در پروژه خود پیکربندی کنید. برای این کار، یک فایل جدید به نام i18n.js ایجاد کنید و تنظیمات مربوطه را در آن قرار دهید. در این فایل، زبان‌های پشتیبانی شده و ترجمه‌های متن‌ها را تعریف می‌کنیم:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(HttpApi)
  .init({
    supportedLngs: ['en', 'fa'],
    fallbackLng: 'en',
    detection: {
      order: ['cookie', 'localStorage', 'path', 'subdomain'],
      caches: ['cookie']
    },
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

در این کد، از افزونه‌های LanguageDetector و HttpApi برای تشخیص زبان کاربر و بارگذاری ترجمه‌ها از فایل‌های خارجی استفاده شده است. فایل‌های ترجمه باید در پوشه public/locales قرار گیرند و ساختار آن‌ها به صورت زیر باشد:

/public
  /locales
    /en
      translation.json
    /fa
      translation.json

محتوای فایل‌های ترجمه باید به صورت زیر باشد:

en/translation.json:

{
  "welcome": "Welcome to our website",
  "description": "This is an example of a multilingual website using React and i18next."
}
 

fa/translation.json:

{
  "welcome": "به وب‌سایت ما خوش آمدید",
  "description": "این یک مثال از یک وب‌سایت چند زبانه با استفاده از React و i18next است."
}

حال که تنظیمات i18next را انجام دادیم، باید آن را در اپلیکیشن React خود به کار بگیریم. برای این کار، ابتدا فایل index.js را به روز رسانی کنید تا i18next را وارد کند:

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

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

سپس در کامپوننت‌های خود از hook مربوط به i18next برای استفاده از ترجمه‌ها استفاده کنید. به عنوان مثال، در فایل App.js می‌توانید به شکل زیر عمل کنید:

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

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>{t('welcome')}</h1>
        <p>{t('description')}</p>
        <button onClick={() => changeLanguage('en')}>English</button>
        <button onClick={() => changeLanguage('fa')}>فارسی</button>
      </header>
    </div>
  );
}

export default App;

در این کد، با استفاده از hook useTranslation، ترجمه‌های متن‌ها را دریافت می‌کنیم و با فراخوانی تابع changeLanguage، زبان اپلیکیشن را تغییر می‌دهیم. با این روش، می‌توانید به راحتی متن‌های مختلف را بر اساس زبان انتخاب شده نمایش دهید.

امیدوارم این مقاله به شما در پیاده‌سازی قابلیت چند زبانه در پروژه‌های React کمک کرده باشد. اگر سوالی دارید یا به راهنمایی بیشتری نیاز دارید، خوشحال می‌شوم که در قسمت نظرات با من در میان بگذارید. موفق باشید!