استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
تاريخ الإصدارات
- "إصدار المترجم"v7.3.127/11/2025
- "تحديث الجدول المقارن"v5.8.019/8/2025
- "البداية التاريخية"v5.5.1029/6/2025
تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
لماذا يجب عليك التفكير في Intlayer؟
ما هو Intlayer؟
Intlayer هو مكتبة تدويل مصممة خصيصًا لمطوري JavaScript. يتيح التصريح عن محتواك في كل مكان في الكود الخاص بك. يقوم بتحويل التصريحات للمحتوى متعدد اللغات إلى قواميس منظمة لتتكامل بسهولة في الكود الخاص بك. باستخدام TypeScript، يجعل Intlayer تطويرك أقوى وأكثر كفاءة.
لماذا تم إنشاء Intlayer؟
تم إنشاء Intlayer لحل مشكلة شائعة تؤثر على جميع مكتبات i18n الشائعة مثل next-intl و react-i18next و react-intl و next-i18next و react-intl و vue-i18n.
تعتمد جميع هذه الحلول نهجًا مركزيًا لسرد وإدارة محتواك. على سبيل المثال:
نسخ الكود إلى الحافظة
.├── locales│ ├── en.json│ ├── es.json│ └── fr.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هذا النوع من الهندسة يبطئ عملية التطوير ويجعل قاعدة الكود أكثر تعقيدًا في الصيانة لعدة أسباب:
لأي مكون جديد يتم إنشاؤه، يجب عليك:
- إنشاء المورد الجديد/مساحة الاسم الجديدة في مجلد
locales - تذكر استيراد مساحة الاسم الجديدة في صفحتك
- ترجمة محتواك (غالبًا ما يتم ذلك يدويًا عن طريق النسخ/اللصق من موفري الذكاء الاصطناعي)
- إنشاء المورد الجديد/مساحة الاسم الجديدة في مجلد
لأي تغيير يتم إجراؤه على مكوناتك، يجب عليك:
- البحث عن المورد/مساحة الاسم المتعلقة (بعيدًا عن المكون)
- ترجمة محتواك
- التأكد من تحديث محتواك لأي لغة
- التحقق من أن مساحة الاسم الخاصة بك لا تتضمن مفاتيح/قيم غير مستخدمة
- التأكد من أن هيكل ملفات JSON الخاص بك هو نفسه لجميع اللغات
في المشاريع المهنية التي تستخدم هذه الحلول، غالبًا ما يتم استخدام منصات التعريب للمساعدة في إدارة ترجمة محتواك. ومع ذلك، يمكن أن يصبح هذا مكلفًا بسرعة للمشاريع الكبيرة.
لحل هذه المشكلة، يعتمد Intlayer نهجًا يحدد نطاق محتواك لكل مكون ويبقي محتواك قريبًا من المكون الخاص بك، كما نفعل غالبًا مع CSS (styled-components) أو الأنواع أو التوثيق (storybook) أو اختبارات الوحدة (jest).
نسخ الكود إلى الحافظة
.└── components └── MyComponent ├── index.content.ts ├── index.test.tsx ├── index.stories.tsx └── index.tsxنسخ الكود إلى الحافظة
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;نسخ الكود إلى الحافظة
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) مساعدتك في التصريح عن محتواك، مما يقلل من النسخ/اللصق
- يمكن إنشاء ملفات
تنظيف قاعدة الكود الخاصة بك
- تقليل التعقيد
- زيادة القابلية للصيانة
تكرار مكوناتك والمحتوى المتعلق بها بسهولة أكبر (مثال: مكونات تسجيل الدخول/التسجيل، إلخ.)
- عن طريق الحد من مخاطر التأثير على محتوى المكونات الأخرى
- عن طريق نسخ/لصق محتواك من تطبيق إلى آخر دون تبعيات خارجية
تجنب تلويث قاعدة الكود الخاصة بك بمفاتيح/قيم غير مستخدمة للمكونات غير المستخدمة
- إذا لم تستخدم مكونًا، فلن يقوم Intlayer باستيراد المحتوى المتعلق به
- إذا قمت بحذف مكون، ستتذكر بسهولة أكبر إزالة المحتوى المتعلق به لأنه سيكون موجودًا في نفس المجلد
تقليل تكلفة التفكير لعملاء الذكاء الاصطناعي للتصريح عن محتواك متعدد اللغات
- لن يضطر عميل الذكاء الاصطناعي إلى مسح قاعدة الكود بالكامل لمعرفة مكان تنفيذ محتواك
- يمكن إجراء الترجمات بسهولة بواسطة أدوات الإكمال التلقائي للذكاء الاصطناعي في بيئة التطوير الخاصة بك (مثل GitHub Copilot)
تحسين أداء التحميل
- إذا تم تحميل المكون بشكل كسول، فسيتم تحميل المحتوى المتعلق به في نفس الوقت
ميزات إضافية لـ Intlayer
افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح
| الميزة | الوصف |
|---|---|
| دعم أطر عمل متعددة يتوافق Intlayer مع جميع أطر العمل والمكتبات الرئيسية، بما في ذلك Next.js و React و Vite و Vue.js و Nuxt و Preact و Express والمزيد. |
| إدارة المحتوى المدعومة بـ JavaScript استغل مرونة JavaScript لتعريف وإدارة محتواك بكفاءة. - التصريح عن المحتوى |
| المترجم يقوم مترجم Intlayer باستخراج المحتوى تلقائيًا من المكونات وإنشاء ملفات القواميس. - المترجم |
| ملف التصريح عن المحتوى لكل لغة سرع تطويرك عن طريق التصريح عن محتواك مرة واحدة، قبل التوليد التلقائي. - ملف التصريح عن المحتوى لكل لغة |
| بيئة آمنة النوع (Type-Safe) استفد من TypeScript لضمان خلو تعريفات المحتوى والكود الخاص بك من الأخطاء، مع الاستفادة أيضًا من الإكمال التلقائي في بيئة التطوير. - تكوين TypeScript |
| إعداد مبسط ابدأ العمل بسرعة مع الحد الأدنى من التكوين. اضبط إعدادات التدويل والتوجيه والذكاء الاصطناعي والبناء ومعالجة المحتوى بسهولة. - استكشف تكامل Next.js |
| استرجاع محتوى مبسط لا حاجة لاستدعاء وظيفة t لكل قطعة من المحتوى. استرجع كل محتواك مباشرة باستخدام خطاف واحد.- تكامل React |
| تنفيذ ثابت لمكونات الخادم مناسب تمامًا لمكونات خادم Next.js، استخدم نفس التنفيذ لكل من مكونات العميل والخادم، لا حاجة لتمرير وظيفة t عبر كل مكون خادم. - مكونات الخادم |
| قاعدة كود منظمة حافظ على قاعدة الكود الخاصة بك أكثر تنظيمًا: مكون واحد = قاموس واحد في نفس المجلد. الترجمات القريبة من مكوناتها الخاصة تعزز القابلية للصيانة والوضوح. - كيف يعمل Intlayer |
| توجيه محسن دعم كامل لتوجيه التطبيق، والتكيف بسلاسة مع هياكل التطبيقات المعقدة، لـ Next.js و React و Vite و Vue.js وغيرها. - استكشف تكامل Next.js |
| دعم Markdown استيراد وتفسير ملفات اللغة و Markdown عن بعد للمحتوى متعدد اللغات مثل سياسات الخصوصية والتوثيق وما إلى ذلك. تفسير وجعل البيانات الوصفية لـ Markdown متاحة في الكود الخاص بك. - ملفات المحتوى |
| محرر مرئي ونظام إدارة محتوى مجاني يتوفر محرر مرئي ونظام إدارة محتوى مجاني لكتاب المحتوى، مما يزيل الحاجة إلى منصة تعريب. حافظ على محتواك متزامنًا باستخدام Git، أو قم بإخراجه كليًا أو جزئيًا باستخدام نظام إدارة المحتوى. - محرر Intlayer - نظام إدارة محتوى Intlayer |
| محتوى قابل للتقليم (Tree-shakable) محتوى قابل للتقليم، مما يقلل من حجم الحزمة النهائية. يحمل المحتوى لكل مكون، مع استبعاد أي محتوى غير مستخدم من حزمتك. يدعم التحميل الكسول لتعزيز كفاءة تحميل التطبيق. - تحسين بناء التطبيق |
| الرندرة الثابتة لا يعيق الرندرة الثابتة. - تكامل Next.js |
| ترجمة مدعومة بالذكاء الاصطناعي حول موقعك الإلكتروني إلى 231 لغة بنقرة واحدة فقط باستخدام أدوات الترجمة المتقدمة المدعومة بالذكاء الاصطناعي من Intlayer باستخدام موفر الذكاء الاصطناعي الخاص بك/مفتاح API. - تكامل CI/CD - واجهة أوامر Intlayer - التعبئة التلقائية |
| تكامل خادم MCP يوفر خادم MCP (بروتوكول سياق النموذج) لأتمتة بيئة التطوير المتكاملة (IDE)، مما يتيح إدارة محتوى وسلسة وسير عمل i18ن مباشرة داخل بيئة التطوير الخاصة بك. - خادم 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) |
مقارنة 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 الخاصة بك. يأخذ في الاعتبار سياق تطبيقك ونطاق المحتوى | ❌ لا | ❌ لا | ❌ لا | ❌ لا | ❌ لا | ❌ لا |
| المحرر المرئي | ✅ نعم، محرر مرئي محلي + نظام إدارة محتوى اختياري؛ يمكنه إخراج محتوى قاعدة الكود؛ قابل للتضمين | ❌ لا / متاح عبر منصات تعريب خارجية | ❌ لا / متاح عبر منصات تعريب خارجية | ❌ لا / متاح عبر منصات تعريب خارجية | ❌ لا / متاح عبر منصات تعريب خارجية | ❌ لا / متاح عبر منصات تعريب خارجية | ❌ لا / متاح عبر منصات تعريب خارجية |
| التوجيه المترجم | ✅ نعم، يدعم المسارات المترجمة بشكل افتراضي (يعمل مع 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 قيد العمل) | ⚠️ .json | ✅ .json, .js | ⚠️ .po, .json | ✅ .json, .js, .ts | ⚠️ .json | ✅ .json, .js |
| دعم ICU | ⚠️ قيد العمل | ⚠️ عبر إضافة (i18next-icu) | ✅ نعم | ✅ نعم | ✅ نعم | ⚠️ عبر إضافة (i18next-icu) | ⚠️ عبر منسق/مترجم مخصص |
| مساعدو SEO (hreflang, sitemap) | ✅ أدوات مدمجة: مساعدون لـ sitemap و robots.txt والبيانات الوصفية | ⚠️ إضافات المجتمع/يدوي | ❌ ليس أساسيًا | ❌ ليس أساسيًا | ✅ جيد | ✅ جيد | ❌ ليس أساسيًا (يوفر Nuxt i18n المساعدين) |
| النظام البيئي / المجتمع | ⚠️ أصغر ولكنه ينمو بسرعة وتفاعلي | ✅ الأكبر والأكثر نضجًا | ✅ كبير | ⚠️ أصغر | ✅ متوسط الحجم، يركز على Next.js | ✅ متوسط الحجم، يركز على Next.js | ✅ كبير في نظام Vue البيئي |
| الرندرة من جانب الخادم ومكونات الخادم | ✅ نعم، مبسط لـ SSR / مكونات خادم React | ⚠️ مدعوم على مستوى الصفحة ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة | ⚠️ مدعوم على مستوى الصفحة مع إعداد إضافي، ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة | ✅ مدعوم، يتطلب إعدادًا | ⚠️ مدعوم على مستوى الصفحة ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة | ⚠️ مدعوم على مستوى الصفحة ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة | ✅ SSR عبر Nuxt/Vue SSR (لا يوجد RSC) |
| التقليم (تحميل المحتوى المستخدم فقط) | ✅ نعم، لكل مكون في وقت البناء عبر إضافات Babel/SWC | ⚠️ عادة ما يحمل الكل (يمكن تحسينه باستخدام مساحات الأسماء/تقسيم الكود) | ⚠️ عادة ما يحمل الكل | ❌ ليس افتراضيًا | ⚠️ جزئي | ⚠️ جزئي | ⚠️ جزئي (مع تقسيم الكود/الإعداد اليدوي) |
| التحميل الكسول | ✅ نعم، لكل لغة / لكل قاموس | ✅ نعم (مثل الخلفيات/مساحات الأسماء عند الطلب) | ✅ نعم (تقسيم حزم اللغة) | ✅ نعم (استيراد الكتالوج الديناميكي) | ✅ نعم (لكل مسار/لكل لغة)، يتطلب إدارة مساحات الأسماء | ✅ نعم (لكل مسار/لكل لغة)، يتطلب إدارة مساحات الأسماء | ✅ نعم (رسائل لغة غير متزامنة) |
| تنقية المحتوى غير المستخدم | ✅ نعم، لكل قاموس في وقت البناء | ❌ لا، فقط عبر تقسيم مساحات الأسماء يدويًا | ❌ لا، يتم تجميع جميع الرسائل المصرح عنها | ✅ نعم، يتم اكتشاف المفاتيح غير المستخدمة وإسقاطها عند البناء | ❌ لا، يمكن إدارتها يدويًا مع إدارة مساحات الأسماء | ❌ لا، يمكن إدارتها يدويًا مع إدارة مساحات الأسماء | ❌ لا، ممكن فقط عبر التحميل الكسول اليدوي |
| إدارة المشاريع الكبيرة | ✅ يشجع على النمطية، مناسب لأنظمة التصميم | ⚠️ يتطلب انضباطًا جيدًا في الملفات | ⚠️ الكتالوجات المركزية يمكن أن تصبح كبيرة | ⚠️ يمكن أن تصبح معقدة | ✅ نمطي مع الإعداد | ✅ نمطي مع الإعداد | ✅ نمطي مع إعداد Vue Router/Nuxt i18n |
نجوم GitHub
تعد نجوم GitHub مؤشرًا قويًا على شعبية المشروع وثقة المجتمع وأهميته على المدى الطويل. على الرغم من أنها ليست مقياسًا مباشرًا للجودة التقنية، إلا أنها تعكس عدد المطورين الذين يجدون المشروع مفيدًا ويتابعون تقدمه ومن المحتمل أن يتبنوه. لتقدير قيمة المشروع، تساعد النجوم في مقارنة الجاذبية عبر البدائل وتوفر رؤى حول نمو النظام البيئي.
التوافق التشغيلي
يمكن لـ intlayer أيضًا المساعدة في إدارة مساحات الأسماء الخاصة بـ react-intl و react-i18next و next-intl و next-i18next و vue-i18n.
باستخدام intlayer، يمكنك التصريح عن المحتوى الخاص بك بتنسيق مكتبة i18n المفضلة لديك، وسيقوم intlayer بإنشاء مساحات الأسماء الخاصة بك في الموقع الذي تختاره (مثال: /messages/{{locale}}/{{namespace}}.json).