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

ما هو Intlayer؟

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

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

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

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

.├── locales│   ├── en.json│   ├── fr.json│   └── es.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

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

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

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

2. لأي تغيير يتم على مكوناتك، يجب عليك:

   • البحث عن المورد/المساحة الاسمية ذات الصلة (بعيدًا عن المكون)
   • ترجمة المحتوى الخاص بك
   • التأكد من تحديث المحتوى الخاص بك لكل لغة
   • التحقق من أن المساحة الاسمية لا تحتوي على مفاتيح/قيم غير مستخدمة
   • التأكد من أن هيكل ملفات 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>;};

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

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

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

2. تنظيف قاعدة الشيفرة الخاصة بك

   • تقليل التعقيد
   • زيادة قابلية الصيانة

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

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

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

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

5. تقليل تكلفة التفكير لوكلاء الذكاء الاصطناعي لإعلان المحتوى متعدد اللغات الخاص بك

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

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

الميزة	الوصف
	دعم عبر الأُطُر المختلفة<br><br>يتوافق Intlayer مع جميع الأُطُر والمكتبات الرئيسية، بما في ذلك Next.js و React و Vite و Vue.js و Nuxt و Preact و Express والمزيد.
	إدارة المحتوى باستخدام جافاسكريبت<br><br>استفد من مرونة جافاسكريبت لتعريف وإدارة محتواك بكفاءة. <br><br> - إعلان المحتوى
	ملف إعلان المحتوى لكل لغة<br><br>سرّع عملية تطويرك من خلال إعلان محتواك مرة واحدة، قبل التوليد التلقائي.<br><br> - ملف إعلان المحتوى لكل لغة
	بيئة آمنة من حيث النوع<br><br>استفد من TypeScript لضمان أن تعريفات المحتوى والرمز الخاص بك خالية من الأخطاء، مع الاستفادة أيضًا من الإكمال التلقائي في بيئة التطوير المتكاملة (IDE).<br><br> - تكوين TypeScript
	إعداد مبسط<br><br>ابدأ بسرعة مع أقل قدر من التهيئة. قم بضبط الإعدادات الخاصة بالتدويل، التوجيه، الذكاء الاصطناعي، البناء، وإدارة المحتوى بسهولة.<br><br> - استكشاف تكامل Next.js
	استرجاع المحتوى المبسط<br><br>لا حاجة لاستدعاء دالة t لكل قطعة محتوى. استرجع كل محتواك مباشرة باستخدام هوك واحد.<br><br> - تكامل React
	تنفيذ متسق لمكونات الخادم<br><br>مناسب تمامًا لمكونات الخادم في Next.js، استخدم نفس التنفيذ لكل من مكونات العميل والخادم، لا حاجة لتمرير دالة t الخاصة بك عبر كل مكون خادم. <br><br> - مكونات الخادم
	قاعدة شفرة منظمة<br><br>حافظ على تنظيم قاعدة الشفرة الخاصة بك بشكل أفضل: مكون واحد = قاموس واحد في نفس المجلد. الترجمة القريبة من مكوناتها تعزز من سهولة الصيانة والوضوح. <br><br> - كيف يعمل Intlayer
	توجيه محسّن<br><br>دعم كامل لتوجيه التطبيقات، يتكيف بسلاسة مع هياكل التطبيقات المعقدة، لـ Next.js و React و Vite و Vue.js، وغيرها.<br><br> - استكشاف تكامل Next.js
	دعم ماركداون<br><br>استيراد وتفسير ملفات اللغة وملفات ماركداون عن بُعد للمحتوى متعدد اللغات مثل سياسات الخصوصية، الوثائق، إلخ. تفسير وجعل بيانات التعريف الخاصة بماركداون متاحة في كودك.<br><br> - ملفات المحتوى
	محرر مرئي مجاني ونظام إدارة محتوى<br><br>يتوفر محرر مرئي مجاني ونظام إدارة محتوى لكتاب المحتوى، مما يلغي الحاجة إلى منصة تعريب. حافظ على تزامن محتواك باستخدام Git، أو قم بتفويضه كليًا أو جزئيًا باستخدام نظام إدارة المحتوى.<br><br> - محرر Intlayer <br> - نظام إدارة محتوى Intlayer
	محتوى قابل للتقليل الشجري<br><br>محتوى قابل للتقليل الشجري، مما يقلل من حجم الحزمة النهائية. يقوم بتحميل المحتوى لكل مكون، مستبعدًا أي محتوى غير مستخدم من الحزمة الخاصة بك. يدعم التحميل الكسول لتحسين كفاءة تحميل التطبيق. <br><br> - تحسين بناء التطبيق
	العرض الثابت<br><br>لا يعوق العرض الثابت.<br><br> - تكامل Next.js
	الترجمة المدعومة بالذكاء الاصطناعي<br><br>حوّل موقعك الإلكتروني إلى 231 لغة بنقرة واحدة فقط باستخدام أدوات الترجمة المتقدمة المدعومة بالذكاء الاصطناعي من Intlayer باستخدام مزود الذكاء الاصطناعي الخاص بك/مفتاح API الخاص بك. <br><br> - تكامل CI/CD <br> - واجهة سطر أوامر Intlayer <br> - الملء التلقائي
	تكامل خادم MCP<br><br>يوفر خادم MCP (بروتوكول سياق النموذج) لأتمتة بيئة التطوير المتكاملة (IDE)، مما يتيح إدارة محتوى سلسة وسير عمل التدويل (i18n) مباشرة داخل بيئة التطوير الخاصة بك. <br><br> - خادم MCP
	امتداد VSCode<br><br>يوفر Intlayer امتدادًا لـ VSCode لمساعدتك في إدارة المحتوى والترجمات الخاصة بك، وبناء قواميسك، وترجمة المحتوى الخاص بك، والمزيد.<br><br> - امتداد VSCode
	التشغيل البيني<br><br>يتيح التشغيل البيني مع react-i18next و next-i18next و next-intl و react-intl. <br><br> - Intlayer و react-intl <br> - Intlayer و next-intl <br> - Intlayer و next-i18next

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

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