الاستفادة من i18next للدبلجة القائمة على React

إن الدبلجة (i18n) أمر حيوي لتوسيع نطاق وصول البرامج عبر أسواق العالم. واحدة من أكثر الأدوات فعالية لهذا الغرض في نظام JavaScript البيئي هي i18next. تستكشف هذه المقالة i18next، خاصة تكاملها مع React، وتسلط الضوء على مزاياها، وتوافقها مع العديد من الأطر، ونصائح لتعزيز جهود التوطين.

ما هو i18next؟

i18next هو إطار عمل قوي للدوليّة في تطبيقات جافاسكريبت. يُسهّل إضافة دعم متعدد اللغات إلى تطبيقات الويب والجوال وسطح المكتب. يسمح الإطار بإدارة الترجمة الديناميكية، مما يجعل من السهل تكييف التطبيقات للغات والمناطق المختلفة.

مزايا i18next

• سهولة التكامل

يُعدّ i18next سهل التكامل مع المشاريع القائمة ويدعم إطارات جافا سكريبت الشائعة مثل React و Angular و Vue. تُصبح هذه التنوع خيارًا مفضلًا للمطوّرين.

• التخصيص والمرونة

يوفر i18next بنية مُتعددة الوحدات ، مما يسمح للمطوّرين باستخدام الميزات المطلوبة فقط. يضمن هذا المستوى العالي من التخصيص تناسب الإطار مع مجموعة واسعة من متطلبات المشروع.

• التحميل الديناميكي للترجمات

يدعم الإطار التحميل الديناميكي للترجمات ، مما يُحسّن الأداء من خلال جلب الموارد اللغوية الضرورية عند الطلب فقط.

• التثنية والتخصيص حسب السياق

يشتمل i18next على دعم مُدمج للتعامل مع التثنية والتخصيص حسب السياق ، مما يضمن دقة التغييرات اللغوية بناءً على الكمية أو السياق.

• دعم تنسيقات الملفات المختلفة

• يدعم تنسيقات ملفات متعددة لتخزين الترجمات ، بما في ذلك JSON و YAML ، مما يسمح بالمرونة في اختيار التنسيق الذي يناسب احتياجات المشروع بشكل أفضل.

• نظام بيئي غني

يوفر مجتمع مزدهر ونظام بيئي غني إضافات وامتدادات ودعمًا لتعزيز وتوسيع وظائف i18next ، مما يوفر وقت التطوير والجهد.

• خيارات خلفية متعددة

يدعم i18next العديد من الخلفيات لتخزين واسترجاع الترجمات ، مثل الذاكرة ، والـ HTTP ، والخلفيات المخصصة ، مما يسمح بالتكامل مع حلول التخزين المختلفة.

• التطوير والصيانة النشطة

تحافظ التحديثات والتحسينات المنتظمة على تطور i18next مع أفضل الممارسات والاحتياجات المتزايدة في تطوير الويب.

دمج React-i18next

واحد من أكثر الدمج شيوعًا لـ i18next هو مع React من خلال ربطات react-i18next. يسمح هذا المزيج بالدوليّة بكفاءة داخل مكونات React، مما يسهل تبديل اللغة الديناميكية وإدارة الترجمة السلسة.

قم بتكوين i18next في تطبيق React الخاص بك (nextjs) عن طريق إعداد مثيل i18next وتشغيله باستخدام الخيارات المطلوبة.

مثال الكود لـ React-i18next

فيما يلي مثال خطوة بخطوة لإعداد واستخدام react-i18next في تطبيق React:

1. تثبيت التبعيات

أولًا، قم بتثبيت i18next و react-i18next و next-i18next لتحميل الترجمات من الخادم:

npm install i18next react-i18next next-i18next

2. تهيئة i18next

قم بإنشاء ملف باسم next-i18next.config.js لتهيئة i18next:

// next-i18next.config.js
const path = require('path'); // إضافة هذا السطر لتعريف path
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // أضف لغاتك هنا
    // localeDetection: false,  // الافتراضي هو true
  },
  localePath: path.resolve('./content/locales'),  // هنا مسار ملف i18n الخاص بك 
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': 'English',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // إضافة تهيئة i18n هذه
};

3. إعداد ملفات الترجمة

أنشئ مجلدًا باسم locales به مجلدات فرعية لكل لغة (en, de, إلخ). داخل كل مجلد فرعي، أنشئ ملفًا باسم translation.json:

مثال:

-محتوى
  -locales
    -en
      -translation.json
      -'other file if you have'.json
    -de
      -translation.json
      -'other file if you have'.json

locales/en/translation.json

{
  "welcome": "Welcome",
  "description": "This is a sample description."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. لف تطبيقك باستخدام I18nextProvider

في ملفك الرئيسي مثل index.js ، App.js أو _app.tsx ، لف تطبيقك باستخدام appWithTranslation :

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // لف بهذه الطريقة

5. استخدام خطاف الترجمة في المكونات

الآن ، يمكنك استخدام خطاف useTranslation لترجمة السلاسل في مكوناتك:

أولاً ، يجب عليك استخدام serverSideTranslations في ملف مستوى الصفحة

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Price() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

ثم يمكنك في مكونك

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

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // الترجمة هي الافتراضية هنا

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // استخدم مساحة اسم مختلفة
    </div>
  );
};

export default MyComponent;