تلقي إشعارات حول الإصدارات القادمة من Intlayer
    إنشاء:2024-08-14آخر تحديث:2025-08-20

    لماذا يجب أن تفكر في Intlayer؟

    ما هو Intlayer؟

    Intlayer هو مكتبة تعريب (تدويل) مصممة خصيصًا لمطوري جافا سكريبت. يسمح لك بالإعلان عن محتواك في كل مكان داخل الكود الخاص بك. يقوم بتحويل إعلانات المحتوى متعدد اللغات إلى قواميس منظمة لتتكامل بسهولة في كودك. باستخدام TypeScript، يجعل Intlayer تطويرك أقوى وأكثر كفاءة.

    لماذا تم إنشاء Intlayer؟

    تم إنشاء Intlayer لحل مشكلة شائعة تؤثر على جميع مكتبات i18n الشائعة مثل next-intl، react-i18next، react-intl، next-i18next، react-intl، و vue-i18n.

    تعتمد كل هذه الحلول على نهج مركزي لقائمة وإدارة المحتوى الخاص بك. على سبيل المثال:

    bash
    .├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    أو هنا باستخدام المساحات الاسمية:

    bash
    .├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    هذا النوع من البنية يبطئ عملية التطوير ويجعل قاعدة الشيفرة أكثر تعقيدًا للصيانة لأسباب عدة:

    1. لأي مكون جديد يتم إنشاؤه، يجب عليك:

      • إنشاء المورد/المساحة الاسمية الجديدة في مجلد locales
      • تذكر استيراد المساحة الاسمية الجديدة في صفحتك
      • ترجمة المحتوى الخاص بك (غالبًا ما يتم ذلك يدويًا عن طريق النسخ/اللصق من مزودي الذكاء الاصطناعي)
    2. لأي تغيير يتم على مكوناتك، يجب عليك:

      • البحث عن المورد/المساحة الاسمية ذات الصلة (بعيدًا عن المكون)
      • ترجمة المحتوى الخاص بك
      • التأكد من تحديث المحتوى الخاص بك لكل لغة
      • التحقق من أن المساحة الاسمية لا تحتوي على مفاتيح/قيم غير مستخدمة
      • التأكد من أن هيكل ملفات JSON هو نفسه لجميع اللغات

    في المشاريع الاحترافية التي تستخدم هذه الحلول، غالبًا ما تُستخدم منصات الترجمة للمساعدة في إدارة ترجمة المحتوى الخاص بك. ومع ذلك، يمكن أن يصبح هذا مكلفًا بسرعة للمشاريع الكبيرة.

    لحل هذه المشكلة، تعتمد Intlayer نهجًا يقوم بتحديد نطاق المحتوى الخاص بك لكل مكون ويحافظ على المحتوى قريبًا من المكون الخاص بك، كما نفعل غالبًا مع CSS (styled-components)، وأنواع البيانات، والوثائق (storybook)، أو اختبارات الوحدة (jest).

    bash
    .└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx
    ./components/MyComponent/index.content.ts
    import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;
    ./components/MyComponent/index.tsx
    import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

    تتيح لك هذه الطريقة:

    1. زيادة سرعة التطوير

      • يمكن إنشاء ملفات .content.{{ts|mjs|cjs|json}} باستخدام إضافة VSCode
      • يمكن لأدوات الإكمال التلقائي المعتمدة على الذكاء الاصطناعي في بيئة التطوير الخاصة بك (مثل GitHub Copilot) مساعدتك في إعلان المحتوى الخاص بك، مما يقلل من النسخ/اللصق
    2. تنظيف قاعدة الشيفرة الخاصة بك

      • تقليل التعقيد
      • زيادة قابلية الصيانة
    3. تكرار مكوناتك والمحتوى المرتبط بها بسهولة أكبر (مثال: مكونات تسجيل الدخول/التسجيل، إلخ)

      • من خلال الحد من خطر التأثير على محتوى المكونات الأخرى
      • من خلال نسخ/لصق المحتوى الخاص بك من تطبيق إلى آخر بدون تبعيات خارجية
    4. تجنب تلويث قاعدة الشيفرة الخاصة بك بمفاتيح/قيم غير مستخدمة للمكونات غير المستخدمة

      • إذا لم تستخدم مكونًا، فلن يقوم Intlayer باستيراد المحتوى المرتبط به
      • إذا قمت بحذف مكون، ستتذكر بسهولة أكبر إزالة المحتوى المرتبط به لأنه سيكون موجودًا في نفس المجلد
    5. تقليل تكلفة التفكير لوكلاء الذكاء الاصطناعي لإعلان المحتوى متعدد اللغات الخاص بك

      • لن يضطر وكيل الذكاء الاصطناعي إلى مسح قاعدة الشيفرة الخاصة بك بالكامل لمعرفة مكان تنفيذ المحتوى الخاص بك
      • يمكن إجراء الترجمات بسهولة بواسطة أدوات الإكمال التلقائي للذكاء الاصطناعي في بيئة التطوير الخاصة بك (مثل GitHub Copilot)

    الميزات الإضافية لـ Intlayer

    الميزة الوصف
    ميزة دعم عبر الأُطُر المختلفة

    يتوافق Intlayer مع جميع الأُطُر والمكتبات الرئيسية، بما في ذلك Next.js و React و Vite و Vue.js و Nuxt و Preact و Express والمزيد.
    ميزة إدارة المحتوى باستخدام جافاسكريبت

    استفد من مرونة جافاسكريبت لتعريف وإدارة محتواك بكفاءة.

    - إعلان المحتوى
    ميزة ملف إعلان المحتوى لكل لغة

    سرّع عملية تطويرك من خلال إعلان محتواك مرة واحدة، قبل التوليد التلقائي.

    - ملف إعلان المحتوى لكل لغة
    ميزة بيئة آمنة من حيث النوع

    استفد من TypeScript لضمان أن تعريفات المحتوى والرمز الخاص بك خالية من الأخطاء، مع الاستفادة أيضًا من الإكمال التلقائي في بيئة التطوير المتكاملة (IDE).

    - تكوين TypeScript
    ميزة إعداد مبسط

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

    - استكشاف تكامل Next.js
    ميزة استرجاع المحتوى المبسط

    لا حاجة لاستدعاء دالة t لكل قطعة محتوى. استرجع كل محتواك مباشرة باستخدام هوك واحد.

    - تكامل React
    ميزة تنفيذ متسق لمكونات الخادم

    مناسب تمامًا لمكونات الخادم في Next.js، استخدم نفس التنفيذ لكل من مكونات العميل والخادم، لا حاجة لتمرير دالة t الخاصة بك عبر كل مكون خادم.

    - مكونات الخادم
    ميزة قاعدة شفرة منظمة

    حافظ على تنظيم قاعدة الشفرة الخاصة بك بشكل أفضل: مكون واحد = قاموس واحد في نفس المجلد. الترجمة القريبة من مكوناتها تعزز من سهولة الصيانة والوضوح.

    - كيف يعمل Intlayer
    ميزة توجيه محسّن

    دعم كامل لتوجيه التطبيقات، يتكيف بسلاسة مع هياكل التطبيقات المعقدة، لـ Next.js و React و Vite و Vue.js، وغيرها.

    - استكشاف تكامل Next.js
    ميزة دعم ماركداون

    استيراد وتفسير ملفات اللغة وملفات ماركداون عن بُعد للمحتوى متعدد اللغات مثل سياسات الخصوصية، الوثائق، إلخ. تفسير وجعل بيانات التعريف الخاصة بماركداون متاحة في كودك.

    - ملفات المحتوى
    ميزة محرر مرئي مجاني ونظام إدارة محتوى

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

    - محرر Intlayer
    - نظام إدارة محتوى Intlayer
    Feature محتوى قابل للتقليل الشجري

    محتوى قابل للتقليل الشجري، مما يقلل من حجم الحزمة النهائية. يقوم بتحميل المحتوى لكل مكون، مستبعدًا أي محتوى غير مستخدم من الحزمة الخاصة بك. يدعم التحميل الكسول لتحسين كفاءة تحميل التطبيق.

    - تحسين بناء التطبيق
    ميزة العرض الثابت

    لا يعوق العرض الثابت.

    - تكامل Next.js
    ميزة الترجمة المدعومة بالذكاء الاصطناعي

    حوّل موقعك الإلكتروني إلى 231 لغة بنقرة واحدة فقط باستخدام أدوات الترجمة المتقدمة المدعومة بالذكاء الاصطناعي من Intlayer باستخدام مزود الذكاء الاصطناعي الخاص بك/مفتاح API الخاص بك.

    - تكامل CI/CD
    - واجهة سطر أوامر Intlayer
    - الملء التلقائي
    ميزة تكامل خادم MCP

    يوفر خادم MCP (بروتوكول سياق النموذج) لأتمتة بيئة التطوير المتكاملة (IDE)، مما يتيح إدارة محتوى سلسة وسير عمل التدويل (i18n) مباشرة داخل بيئة التطوير الخاصة بك.

    - خادم MCP
    ميزة امتداد VSCode

    يوفر Intlayer امتدادًا لـ VSCode لمساعدتك في إدارة المحتوى والترجمات الخاصة بك، وبناء قواميسك، وترجمة المحتوى الخاص بك، والمزيد.

    - امتداد VSCode
    ميزة التشغيل البيني

    يتيح التشغيل البيني مع react-i18next و next-i18next و next-intl و react-intl.

    - Intlayer و react-intl
    - Intlayer و next-intl
    - Intlayer و next-i18next

    مقارنة Intlayer مع الحلول الأخرى

    الميزة Intlayer React-i18next / i18next React-Intl (FormatJS) LinguiJS next-intl next-i18next vue-i18n
    الترجمات بالقرب من المكونات نعم، المحتوى موضوع بجانب كل مكون لا لا لا لا لا نعم - باستخدام مكونات الملف الواحد (SFCs)
    تكامل TypeScript متقدم، أنواع صارمة مولدة تلقائيًا أساسي؛ إعداد إضافي للسلامة جيد، لكنه أقل صرامة أنواع، يحتاج إلى إعداد جيد أساسي جيد (الأنواع متاحة؛ يحتاج إعداد لأمان المفاتيح)
    كشف الترجمات المفقودة خطأ/تحذير أثناء وقت البناء في الغالب سلاسل بديلة أثناء وقت التشغيل سلاسل بديلة يحتاج إلى إعداد إضافي سلاسل بديلة أثناء وقت التشغيل سلاسل بديلة أثناء وقت التشغيل سلاسل بديلة أثناء وقت التشغيل/تحذيرات (قابلة للتكوين)
    المحتوى الغني (JSX/Markdown/المكونات) دعم مباشر، حتى لعقد React محدود / فقط التداخل صيغة ICU، ليست JSX حقيقية محدود غير مصمم للعقد الغنية محدود محدود (المكونات عبر <i18n-t>، Markdown عبر الإضافات)
    الترجمة المدعومة بالذكاء الاصطناعي نعم، يدعم عدة مزودي ذكاء اصطناعي. يمكن استخدامه باستخدام مفاتيح API الخاصة بك. يأخذ في الاعتبار سياق تطبيقك ونطاق المحتوى لا لا لا لا لا لا
    المحرر المرئي نعم، محرر مرئي محلي + نظام إدارة محتوى اختياري؛ يمكنه إخراج محتوى قاعدة الشيفرة؛ قابل للتضمين لا / متوفر عبر منصات الترجمة الخارجية لا / متوفر عبر منصات الترجمة الخارجية لا / متوفر عبر منصات الترجمة الخارجية لا / متوفر عبر منصات الترجمة الخارجية لا / متوفر عبر منصات الترجمة الخارجية لا / متوفر عبر منصات الترجمة الخارجية
    التوجيه المحلي مدمج، دعم الوسيط إضافات أو إعداد يدوي غير مدمج إعداد يدوي/إضافة مدمج مدمج يدوي عبر Vue Router (يتعامل Nuxt i18n معه)
    توليد المسار الديناميكي نعم إضافة/نظام بيئي أو إعداد يدوي غير متوفر إضافة/يدوي نعم نعم غير متوفر (يوفره Nuxt i18n)
    التصريف الجمعي أنماط قائمة على التعداد؛ راجع الوثائق قابل للتكوين (إضافات مثل i18next-icu) متقدم (ICU) متقدم (ICU/messageformat) جيد جيد متقدم (قواعد الجمع المدمجة)
    التنسيق (التواريخ، الأرقام، العملات) منسقات محسّنة (Intl تحت الغطاء) عبر الإضافات أو استخدام Intl مخصص منسقات ICU متقدمة مساعدو ICU/CLI جيد (مساعدو Intl) جيد (مساعدو Intl) منسقات مدمجة للتواريخ/الأرقام (Intl)
    تنسيق المحتوى .tsx, .ts, .js, .json, .md, .txt .json .json, .js .po, .json .json, .js, .ts .json .json, .js
    دعم ICU جاري العمل عليه (ICU الأصلي) عبر الإضافة (i18next-icu) نعم نعم نعم عبر الإضافة (i18next-icu) عبر مهيئ/مجمّع مخصص
    مساعدو تحسين محركات البحث (hreflang، خريطة الموقع) أدوات مدمجة: مساعدات لخريطة الموقع، robots.txt، البيانات الوصفية إضافات المجتمع/يدوي ليست جزءًا أساسيًا ليست جزءًا أساسيًا جيد جيد ليست جزءًا أساسيًا (يوفر Nuxt i18n مساعدات)
    النظام البيئي / المجتمع أصغر ولكنها تنمو بسرعة وتتميز بالتفاعل الأكبر والأكثر نضجًا كبير، مؤسسي ينمو، أصغر متوسط الحجم، يركز على Next.js متوسط الحجم، يركز على Next.js كبير في نظام Vue البيئي
    التصيير على جانب الخادم ومكونات الخادم نعم، مُبسّط للتصيير على جانب الخادم / مكونات خادم React مدعوم، يتطلب بعض الإعدادات مدعوم في Next.js مدعوم دعم كامل دعم كامل التصيير على جانب الخادم عبر Nuxt/Vue SSR (بدون RSC)
    تحليل الشجرة (تحميل المحتوى المستخدم فقط) نعم، لكل مكون أثناء وقت البناء عبر إضافات Babel/SWC عادةً ما يتم تحميل الكل (يمكن تحسينه باستخدام المساحات الاسمية/تقسيم الكود) عادةً ما يتم تحميل الكل ليس افتراضيًا جزئي جزئي جزئي (مع تقسيم الكود/إعداد يدوي)
    التحميل الكسول نعم، لكل لغة/لكل مكون نعم (مثل الخلفيات/الأسماء عند الطلب) نعم (تقسيم حزم اللغة) نعم (استيراد الكتالوجات الديناميكي) نعم (لكل مسار/لكل لغة) نعم (لكل مسار/لكل لغة) نعم (رسائل اللغة غير المتزامنة)
    إدارة المشاريع الكبيرة يشجع على التصميم المعياري، مناسب لنظام التصميم يحتاج إلى انضباط جيد في الملفات يمكن أن تصبح الكتالوجات المركزية كبيرة قد تصبح معقدة معياري مع الإعداد معياري مع الإعداد معياري مع إعداد Vue Router/Nuxt i18n

    تاريخ الوثيقة

    الإصدار التاريخ التغييرات
    5.8.0 2025-08-19 تحديث جدول المقارنة
    5.5.10 2025-06-29 بدء التاريخ
    تلقي إشعارات حول الإصدارات القادمة من Intlayer