إطار عمل i18next ل React و Next.js

i18next هي مكتبة دولية شهيرة تجعل من السهل ترجمة تطبيقات الويب إلى لغات متعددة. إنها خيار رائع لمطوري React و Next.js الذين يتطلعون إلى دعم المستخدمين حول العالم. في هذا المقال، سنستكشف كيف يتكامل i18next بسهولة مع تطبيقات React و Next.js.

لنبدأ أولاً بنظرة عامة موجزة عن i18next. إنها مكتبة جافا سكريبت توفر واجهة برمجة تطبيقات بسيطة لتحميل وإدارة الترجمات. يمكنك استخدامه مع مجموعة متنوعة من أطر العمل الأمامية، بما في ذلك React و Next.js. يدعم i18next العديد من الميزات بشكل افتراضي، مثل الجمع، والسياق، والتداخل. كما يدعم أيضًا تحميل الترجمات من مصادر مختلفة، بما في ذلك ملفات JSON وواجهات برمجة التطبيقات الخلفية.

لدمج i18next في تطبيق React أو Next.js الخاص بك، ستحتاج إلى تثبيته أولاً. يمكنك القيام بذلك باستخدام npm أو yarn عن طريق تشغيل الأمر التالي:

				
					npm install i18next

أو

				
					yarn add i18next

بمجرد تثبيت i18next، يمكنك البدء في استخدامه في تطبيقك. إحدى أسهل الطرق لاستخدام i18next مع React هي استخدام ال useTranslation خطاف توفر هذه الخطافة طريقة مريحة لتحميل الترجمات وترجمة النصوص داخل مكوناتك.

إليك مثال على كيفية الاستخدام useTranslation مُعَقِّف في مكون React

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

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

export default MyComponent;

في هذا المثال، نقوم باستيراد ال useTranslation خطاف من ال react-i18next حزمة. ثم نستخدمه لتحميل الترجمات والحصول على وظيفة الترجمةtالتي يمكننا استخدامها لترجمة النص داخل المكون.

يمكننا بعد ذلك استخدام الـ t وظيفة للترجمة title و description سلاسل من ملفات الترجمة الخاصة بنا. ملفات الترجمة يمكن أن تكون ملفات JSON، مثل هذا:

				
					{
  "en": {
    "title": "Welcome to my app!",
    "description": "This is my app description."
  },
  "fr": {
    "title": "Bienvenue dans mon application !",
    "description": "Ceci est la description de mon application."
  }
}

يمكن لـ FluentC بناء لغات متعددة تلقائيًا باستخدام إضافة FluentC لـ i18next.

في هذا المثال، لدينا ترجمتان: واحدة للإنجليزية وواحدة للفرنسية. يمكننا تحميل هذه الترجمات إلى تطبيقنا باستخدام ال i18next مكتبة.

لتحميل الترجمات، يمكننا استخدام ال i18next الشيء وخصوصيته init وظيفة. إليك مثالًا:

				
					import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';

i18next.init({
  interpolation: { escapeValue: false },
  lng: 'en',
  resources: {
    en: {
      translation: translationEN
    },
    fr: {
      translation: translationFR
    },
  },
});

في هذا المثال، نقوم باستيراد الترجمات الإنجليزية والفرنسية من ملفات JSON. ثم نقوم بتهيئة i18next بهذه الترجمات وتعيين اللغة الافتراضية إلى الإنجليزية. نقوم أيضًا بتكوين إعدادات التداخل بحيث يمكننا استخدام المتغيرات في ترجماتنا.

بمجرد تحميل الترجمات الخاصة بك وإعداد i18next، يمكنك البدء في الاستخدام useTranslation ارتباط لترجمة النص داخل مكوناتك.

في تطبيق Next.js، يمكنك استخدام نفس النهج لدمج i18next. يمكنك تحميل الترجمات في getStaticProps أو getServer

موسوم أي18, i18next, الترجمة الآلية, نِكست جي إس, ريأكت

يمكن لـ FluentC بناء لغات متعددة تلقائيًا باستخدام إضافة FluentC لـ i18next.

إطلاق وكلاء GPT متعددين اللغات وأتمتة خطوط محتوى عالمية بسهولة.