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

لماذا Intlayer على البدائل؟

بالمقارنة مع الحلول الرئيسية مثل next-intl أو i18next، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:

حجم البندل

بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer في تقليل أحجام البندل وصفحاتك بنسبة تصل إلى 50%.

الصيانة

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

وكيل الذكاء الاصطناعي

يؤدي تحديد موقع المحتوى المشترك إلى تقليل السياق المطلوب بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل CLI لاختبار الترجمات المفقودة،LSP، MCP ومهارات الوكيل، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.

ميزة

يقدم Intlayer مجموعة من الميزات الإضافية التي لا تتوفر في حلول i18n الأخرى، مثل دعم Markdown، جلب خارجي المحتوى، تحميل محتوى الملف، المحتوى المباشر تحديث، محرر مرئي والمزيد.

الأتمتة

استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا مترجمًا لأتمتة استخراج المحتوى، بالإضافة إلى منصة ويب للمساعدة في الترجمة في الخلفية.

أداء

يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.

التحجيم مع عدم وجود مطور

أكثر من مجرد حل i18n، يوفر Intlayer [محررًا مرئيًا] مستضافًا ذاتيًا](/ar/doc/concept/editor) وكامل CMS لمساعدتك في إدارة المحتوى متعدد اللغات في الوقت الفعلي، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.

تصميم الإطار المتقاطع

إذا كنت تستخدم أطر عمل مختلفة لأجزاء مختلفة من تطبيقك (على سبيل المثال، React وReact-native وVue وAngular وSvelte وما إلى ذلك)، فإن Intlayer يوفر طريقة لاستخدام بناء جملة مشترك وتنفيذه عبر جميع أطر عمل الواجهة الأمامية الرئيسية. ستتمكن أيضًا من مشاركة إعلان المحتوى الخاص بك عبر نظام التصميم والتطبيقات والواجهة الخلفية وما إلى ذلك.

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

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

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

bash

نسخ الكود

نسخ الكود إلى الحافظة

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

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

أو هنا باستخدام namespaces:

bash

نسخ الكود

نسخ الكود إلى الحافظة

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

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

يؤدي هذا النوع من المعمارية إلى إبطاء عملية التطوير وجعل codebase أكثر تعقيداً للحفاظ عليه لعدة أسباب:

لأي مكون جديد تقوم بإنشاؤه، يجب عليك:
- إنشاء مورد/namespace جديد في مجلد locales
- تذكر استيراد namespace الجديد في صفحتك
- ترجمة محتواك (غالباً ما يتم يدويًا عبر النسخ واللصق من موفري الذكاء الاصطناعي)
لأي تغيير تجريه على مكوناتك، يجب عليك:
- البحث عن المورد/namespace المرتبط (بعيد عن المكون)
- ترجمة محتواك
- التأكد من أن محتواك محدّث لأي لغة
- التحقق من عدم تضمن namespace الخاص بك مفاتيح/قيم غير مستخدمة
- التأكد من أن بنية ملفات JSON الخاصة بك متطابقة لجميع اللغات

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

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

bash

نسخ الكود

نسخ الكود إلى الحافظة

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

.└── 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({
      ar: "مرحبا بالعالم",
      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>;
};

يتيح لك هذا النهج:

زيادة سرعة التطوير
- يمكن إنشاء ملفات .content.{{ts|mjs|cjs|json}} باستخدام امتداد VSCode
- أدوات إكمال الذكاء الاصطناعي في محررك (مثل GitHub Copilot) يمكنها مساعدتك في التصريح عن محتواك، مما يقلل النسخ واللصق
تنظيف codebase الخاص بك
- تقليل التعقيد
- زيادة قابلية الصيانة
نسخ مكوناتك والمحتوى المرتبط بها بسهولة أكبر (مثال: مكونات تسجيل الدخول/التسجيل، إلخ)
- عن طريق تحديد خطر التأثير على محتوى المكونات الأخرى
- عن طريق نسخ ولصق محتواك من تطبيق إلى آخر بدون تبعيات خارجية
تجنب تلويث codebase الخاص بك بمفاتيح/قيم غير مستخدمة للمكونات غير المستخدمة
- إذا لم تستخدم مكوناً، فلن يستورد Intlayer المحتوى المرتبط به
- إذا حذفت مكوناً، ستتذكر بسهولة أكبر إزالة المحتوى المرتبط به حيث سيكون موجوداً في نفس المجلد
تقليل تكلفة الاستدلال لوكلاء الذكاء الاصطناعي للتصريح عن محتواك متعدد اللغات
- لن يضطر وكيل الذكاء الاصطناعي إلى مسح codebase الخاص بك بالكامل لمعرفة مكان تطبيق محتواك
- يمكن إجراء الترجمات بسهولة من خلال أدوات إكمال الذكاء الاصطناعي في محررك (مثل GitHub Copilot)
تحسين أداء التحميل
- إذا تم تحميل مكون بشكل كسول (lazy-loaded)، فسيتم تحميل المحتوى المرتبط به في نفس الوقت

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

اظهار جميع محتويات الجدول

افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح

Feature	Description
	دعم الأطر المتقاطعة Intlayer متوافق مع جميع الأطر والمكتبات الرئيسية، بما في ذلك Next.js و React و Vite و Vue.js و Nuxt و Preact و Express والمزيد.
	إدارة المحتوى المدعومة بـ JavaScript استفد من مرونة JavaScript لتحديد وإدارة المحتوى الخاص بك بكفاءة. - إعلان المحتوى
	المترجم يستخرج مترجم Intlayer المحتوى تلقائياً من المكونات وينشئ ملفات القاموس. - المترجم
	ملف إعلان المحتوى لكل لغة سرّع التطوير الخاص بك بإعلان المحتوى مرة واحدة، قبل الإنشاء التلقائي. - ملف إعلان المحتوى لكل لغة
	بيئة آمنة من حيث النوع استفد من TypeScript لضمان خلو تعريفات المحتوى والكود من الأخطاء، مع الاستفادة أيضاً من إكمال تلقائي IDE. - تكوين TypeScript
	إعداد مبسط ابدأ بسرعة مع الحد الأدنى من الإعدادات. اضبط الإعدادات للدولية والتوجيه والذكاء الاصطناعي والبناء والمحتوى بسهولة. - استكشف تكامل Next.js
	استرجاع المحتوى المبسط لا حاجة لاستدعاء دالة `t` الخاصة بك لكل جزء من المحتوى. استرجع كل المحتوى الخاص بك مباشرة باستخدام hook واحد. - تكامل React
	تطبيق مكون الخادم المتسق مناسب تماماً لمكونات خادم Next.js، استخدم نفس التطبيق لكل من مكونات العميل والخادم، لا حاجة لتمرير دالة `t` عبر كل مكون خادم. - مكونات الخادم
	قاعدة أكواد منظمة حافظ على قاعدة الأكواد الخاصة بك منظمة أكثر: 1 مكون = 1 قاموس في نفس المجلد. الترجمات القريبة من مكوناتها الخاصة تحسن الصيانة والوضوح. - كيف يعمل Intlayer
	التوجيه المحسّن دعم كامل لتوجيه التطبيق، والتكيف بسلاسة مع الهياكل المعقدة للتطبيق، لـ Next.js و React و Vite و Vue.js وغيرها. - استكشف تكامل Next.js
	دعم Markdown استيراد وتفسير ملفات اللغة والمحتوى البعيد Markdown للمحتوى متعدد اللغات مثل سياسات الخصوصية والتوثيق وغيرها. فسّر واجعل بيانات وصف Markdown متاحة في الكود الخاص بك. - ملفات المحتوى
	محرر مرئي مجاني وCMS محرر مرئي مجاني وCMS متاحان لكتاب المحتوى، مما يزيل الحاجة إلى منصة توطين. حافظ على تزامن المحتوى باستخدام Git، أو قم بإضفاء الطابع الخارجي عليه بشكل كامل أو جزئي مع CMS. - محرر Intlayer - CMS Intlayer
	محتوى قابل للاستبدال محتوى قابل للاستبدال، مما يقلل من حجم الحزمة النهائية. تحميل المحتوى لكل مكون، مع استبعاد أي محتوى غير مستخدم من الحزمة الخاصة بك. يدعم التحميل البطيء لتحسين كفاءة تحميل التطبيق. - تحسين بناء التطبيق
	العرض الثابت لا يمنع العرض الثابت. - تكامل Next.js
	الترجمة المدعومة بالذكاء الاصطناعي حوّل موقعك الإلكتروني إلى 231 لغة بنقرة واحدة باستخدام أدوات الترجمة المتقدمة المدعومة بالذكاء الاصطناعي من Intlayer باستخدام مفتاح API/موفر الذكاء الاصطناعي الخاص بك. - تكامل CI/CD - Intlayer CLI - الملء التلقائي
	تكامل خادم MCP يوفر خادم MCP (Model Context Protocol) لأتمتة IDE، مما يتيح إدارة محتوى وسير عمل i18n بسلاسة مباشرة في بيئة التطوير الخاصة بك. - خادم MCP
	امتداد VSCode يوفر Intlayer امتداد VSCode لمساعدتك في إدارة المحتوى والترجمات وبناء القواميس وترجمة المحتوى والمزيد. - امتداد VSCode
	التشغيل المتبادل يسمح بالتشغيل المتبادل مع react-i18next و next-i18next و next-intl و react-intl. - Intlayer و react-intl - Intlayer و next-intl - Intlayer و next-i18next
اختبار الترجمات المفقودة (CLI/CI)	✅ CLI: npx intlayer content test (CI-friendly audit)

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

اظهار جميع محتويات الجدول

افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح

الميزة	`intlayer`	`react-i18next`	`react-intl` (FormatJS)	`lingui`	`next-intl`	`next-i18next`	`vue-i18n`
الترجمات بالقرب من المكونات	✅ نعم، المحتوى متجاور مع كل مكون	❌ لا	❌ لا	❌ لا	❌ لا	❌ لا	✅ نعم - باستخدام `Single File Components` (SFCs)
تكامل TypeScript	✅ متقدم، أنواع صارمة تم إنشاؤها تلقائياً	⚠️ أساسي؛ إعدادات إضافية للأمان	✅ جيد، لكن أقل صرامة	⚠️ الأنواع، يحتاج إعدادات	✅ جيد	⚠️ أساسي	✅ جيد (الأنواع متاحة؛ سلامة المفاتيح تحتاج إعدادات)
كشف الترجمات المفقودة	✅ خطأ TypeScript وتحذير/خطأ وقت البناء	⚠️ في الغالب سلاسل احتياطية في وقت التشغيل	⚠️ سلاسل احتياطية	⚠️ يحتاج إعدادات إضافية	⚠️ احتياطي في وقت التشغيل	⚠️ احتياطي في وقت التشغيل	⚠️ احتياطي/تحذيرات في وقت التشغيل (قابلة للتكوين)
المحتوى الغني (JSX/Markdown/المكونات)	✅ دعم مباشر	⚠️ محدود / الاستيفاء فقط	⚠️ بناء جملة ICU، ليس JSX حقيقي	⚠️ محدود	❌ غير مصمم للعقد الغنية	⚠️ محدود	⚠️ محدود (المكونات عبر `<i18n-t>`، Markdown عبر المكونات الإضافية)
الترجمة المدعومة بالذكاء الاصطناعي	✅ نعم، يدعم موفرين ذكاء اصطناعي متعددين. قابل للاستخدام باستخدام مفاتيح API الخاصة بك. يأخذ في الاعتبار سياق التطبيق ونطاق المحتوى	❌ لا	❌ لا	❌ لا	❌ لا	❌ لا	❌ لا
محرر مرئي	✅ نعم، محرر مرئي محلي + CMS اختياري؛ يمكن تخارج محتوى codebase؛ قابل للتضمين	❌ لا / متاح عبر منصات التوطين الخارجية	❌ لا / متاح عبر منصات التوطين الخارجية	❌ لا / متاح عبر منصات التوطين الخارجية	❌ لا / متاح عبر منصات التوطين الخارجية	❌ لا / متاح عبر منصات التوطين الخارجية	❌ لا / متاح عبر منصات التوطين الخارجية
التوجيه المترجم	✅ نعم، يدعم المسارات المترجمة في الوقت الفعلي (يعمل مع Next.js و Vite)	⚠️ لا يوجد دعم مدمج، يتطلب مكونات إضافية (مثل `next-i18next`) أو إعدادات موجه مخصصة	❌ لا، فقط تنسيق الرسالة، يجب أن يكون التوجيه يدوياً	⚠️ لا يوجد دعم مدمج، يتطلب مكونات إضافية أو إعدادات يدوية	✅ مدمج، App Router يدعم قطاع `[locale]`	✅ مدمج	✅ مدمج
توليد المسار الديناميكي	✅ نعم	⚠️ مكون إضافي/نظام بيئي أو إعدادات يدوية	❌ غير مقدم	⚠️ مكون إضافي/يدوي	✅ نعم	✅ نعم	❌ غير مقدم (Nuxt i18n يوفره)
الجمع بين الكلمات	✅ أنماط قائمة على التعداد	✅ قابلة للتكوين (مكونات إضافية مثل i18next-icu)	✅ (ICU)	✅ (ICU/messageformat)	✅ جيد	✅ جيد	✅ قواعد جمع مدمجة
التنسيق (التواريخ والأرقام والعملات)	✅ منسقات محسّنة (Intl تحت الغطاء)	⚠️ عبر مكونات إضافية أو استخدام Intl مخصص	✅ منسقات ICU	✅ مساعدات ICU/CLI	✅ جيد (مساعدات Intl)	✅ جيد (مساعدات Intl)	✅ منسقات التاريخ/الرقم المدمجة (Intl)
صيغة المحتوى	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)	⚠️ .json	✅ .json, .js	⚠️ .po, .json	✅ .json, .js, .ts	⚠️ .json	✅ .json, .js
دعم ICU	⚠️ قيد الإنجاز	⚠️ عبر مكون إضافي (i18next-icu)	✅ نعم	✅ نعم	✅ نعم	⚠️ عبر مكون إضافي (`i18next-icu`)	⚠️ عبر منسق/محول مخصص
مساعدات SEO (hreflang وخريطة الموقع)	✅ أدوات مدمجة: مساعدات لخريطة الموقع وrobots.txt والبيانات الوصفية	⚠️ مكونات إضافية/يدوية المجتمع	❌ ليس أساسياً	❌ ليس أساسياً	✅ جيد	✅ جيد	❌ ليس أساسياً (Nuxt i18n يوفر مساعدات)
النظام البيئي / المجتمع	⚠️ أصغر ولكن ينمو بسرعة واستجابة	✅ الأكبر والأكثر نضجاً	✅ كبير	⚠️ أصغر	✅ متوسط، يركز على Next.js	✅ متوسط، يركز على Next.js	✅ كبير في نظام Vue البيئي
العرض من جانب الخادم ومكونات الخادم	✅ نعم، مبسط لـ SSR / React Server Components	⚠️ مدعوم على مستوى الصفحة ولكن يحتاج إلى تمرير دوال t على شجرة المكونات لمكونات خادم الأطفال	⚠️ مدعوم على مستوى الصفحة مع إعدادات إضافية، ولكن يحتاج إلى تمرير دوال t على شجرة المكونات لمكونات خادم الأطفال	✅ مدعوم، إعدادات مطلوبة	⚠️ مدعوم على مستوى الصفحة ولكن يحتاج إلى تمرير دوال t على شجرة المكونات لمكونات خادم الأطفال	⚠️ مدعوم على مستوى الصفحة ولكن يحتاج إلى تمرير دوال t على شجرة المكونات لمكونات خادم الأطفال	✅ SSR عبر Nuxt/Vue SSR (لا يوجد RSC)
Tree-shaking (تحميل المحتوى المستخدم فقط)	✅ نعم، لكل مكون في وقت البناء عبر مكونات Babel/SWC إضافية	⚠️ عادة ما يحمل الكل (يمكن تحسينه باستخدام namespaces/code-splitting)	⚠️ عادة ما يحمل الكل	❌ ليس الافتراضي	⚠️ جزئي	⚠️ جزئي	⚠️ جزئي (مع code-splitting/إعدادات يدوية)
التحميل الكسول	✅ نعم، لكل locale / لكل قاموس	✅ نعم (مثل backends/namespaces عند الطلب)	✅ نعم (تقسيم حزم locale)	✅ نعم (استيراد فهرس ديناميكي)	✅ نعم (لكل مسار/لكل locale)، يحتاج إدارة mamespace	✅ نعم (لكل مسار/لكل locale)، يحتاج إدارة mamespace	✅ نعم (رسائل locale غير متزامنة)
تنظيف المحتوى المستخدم	✅ نعم، لكل قاموس في وقت البناء	❌ لا، فقط عبر تجزئة namespace يدوية	❌ لا، يتم تجميع جميع الرسائل المعلنة	✅ نعم، تم كشف المفاتيح غير المستخدمة وإسقاطها في البناء	❌ لا، يمكن إدارتها يدوياً باستخدام إدارة namespace	❌ لا، يمكن إدارتها يدوياً باستخدام إدارة namespace	❌ لا، ممكن فقط عبر التحميل الكسول اليدوي
إدارة المشاريع الكبيرة	✅ تشجع المعيارية، مناسب لـ design-system	⚠️ يحتاج انضباط ملفات جيد	⚠️ يمكن أن تصبح الفهارس المركزية كبيرة	⚠️ قد تصبح معقدة	✅ معيارية مع الإعدادات	✅ معيارية مع الإعدادات	✅ معيارية مع إعدادات Vue Router/Nuxt i18n

نجوم GitHub

تعد نجوم GitHub مؤشرًا قويًا على شعبية المشروع وثقة المجتمع وأهميته على المدى الطويل. على الرغم من أنها ليست مقياسًا مباشرًا للجودة التقنية، إلا أنها تعكس عدد المطورين الذين يجدون المشروع مفيدًا ويتابعون تقدمه ومن المحتمل أن يتبنوه. لتقدير قيمة المشروع، تساعد النجوم في مقارنة الجاذبية عبر البدائل وتوفر رؤى حول نمو النظام البيئي.

التوافق التشغيلي

يمكن لـ intlayer أيضًا المساعدة في إدارة مساحات الأسماء الخاصة بـ react-intl و react-i18next و next-intl و next-i18next و vue-i18n.

باستخدام intlayer، يمكنك التصريح عن المحتوى الخاص بك بتنسيق مكتبة i18n المفضلة لديك، وسيقوم intlayer بإنشاء مساحات الأسماء الخاصة بك في الموقع الذي تختاره (مثال: /messages/{{locale}}/{{namespace}}.json).

ابدأ