@intlayer/docs 5.5.10 → 5.5.12

package/blog/ar/list_i18n_technologies/frameworks/svelte.md

@@ -0,0 +1,129 @@
+---
+createdAt: 2025-01-16
+updatedAt: 2025-06-29
+title: أفضل أدوات التدويل (i18n) للإنترات
+description: تعرف على أفضل حلول التدويل (i18n) لـ Svelte لتجاوز تحديات الترجمة، وتعزيز SEO، وتقديم تجربة ويب عالمية سلسة.
+keywords:
+  - Svelte
+  - i18n
+  - متعدد اللغات
+  - SEO
+  - التدويل
+  - المدونة
+  - JavaScript
+slugs:
+  - blog
+  - i18n-technologies
+  - frameworks
+  - svelte
+---
+
+# استكشاف حلول i18n لترجمة موقعك Svelte
+
+مع استمرار الويب في ربط الناس عبر العالم، أصبحت توفير المحتوى بعدة لغات أمرًا مهمًا بشكل متزايد. بالنسبة للمطورين الذين يعملون مع **Svelte**، فإن تنفيذ i18n يعد أمرًا ضروريًا لإدارة الترجمات بكفاءة، والحفاظ على نظافة الشيفرة، والتمسك بممارسات تحسين محركات البحث الجيدة. في هذه المقالة، نستعرض مختلف حلول i18n وعمليات العمل الخاصة بـ Svelte, مساعدتك على اختيار الأنسب لاحتياجات مشروعك.
+
+---
+
+![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
+
+## ما هو العولمة (i18n)؟
+
+العولمة، التي اختصرت بشكل شائع كـ i18n، هي عملية تصميم وبناء التطبيق الخاص بك بحيث يمكنه التكيف بسهولة مع لغات، ومناطق، وتقاليد ثقافية مختلفة. في Svelte، يعني هذا عادةً إعداد سلاسل ترجمات، وتوطين التواريخ، والأوقات، والأرقام، وضمان أن واجهة المستخدم يمكنها التبديل ديناميكيًا بين مختلف المناطق دون الحاجة إلى إعادة كتابة الشيفرة بشكل كبير.
+
+لتعلم المزيد عن أساسيات i18n، اقرأ مقالتنا: [ما هي العولمة (i18n)؟ التعريف والتحديات](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/what_is_internationalization.md).
+
+---
+
+## تحدي الترجمة لتطبيقات Svelte
+
+يمكن أن تقدم ترجمة تطبيق Svelte عدة عقبات:
+
+- **مكونات ذات ملف واحد**: تجعل طريقة مكونات Svelte ذات ملف واحد (حيث تتواجد HTML وCSS وJavaScript معًا) من السهل أن يتناثر النص، مما يتطلب استراتيجية لتركيز الترجمات.
+- **المحتوى الديناميكي**: تضيف البيانات المستخرجة من واجهات برمجة التطبيقات أو المدخلات من المستخدم تعقيدًا عند ضمان ترجمة المحتوى بشكل فوري.
+- **اعتبارات SEO**: إذا كنت تستخدم **SvelteKit** للتقديم من جانب الخادم (SSR)، فإن إعداد عناوين URL المترجمة، وعلامات التعريف، وخرائط المواقع يتطلب مزيدًا من العناية من أجل تحسين محركات البحث الفعالة.
+- **الحالة والتوجيه**: يتطلب الحفاظ على اللغة الصحيحة عبر مسارات متعددة وصفحات ديناميكية غالبًا تنسيق حالة عالمية، أو حراس مسار، أو طرق مخصصة في SvelteKit.
+- **قابلية الصيانة**: مع نمو قاعدة الشيفرة وملفات الترجمة الخاصة بك، يصبح من المهم الحفاظ على كل شيء منظمًا ومتزامنًا بشكل مستمر.
+
+---
+
+## حلول i18n الرائدة لـ Svelte
+
+لا يوفر Svelte حلاً محليًا مدمجًا لـ i18n (كما هو الحال في Angular)، لكن المجتمع أنشأ مجموعة متنوعة من المكتبات والنماذج القوية. فيما يلي عدة طرق شائعة.
+
+### 1. svelte-i18n
+
+المستودع: [https://github.com/kaisermann/svelte-i18n](https://github.com/kaisermann/svelte-i18n)
+
+**نظرة عامة**  
+**svelte-i18n** هي واحدة من أكثر المكتبات المعتمدة على نطاق واسع لإضافة العولمة لتطبيقات Svelte. يسمح لك بتحميل وتبديل اللغات ديناميكيًا في وقت التشغيل ويتضمن أدوات لمساعدتك في التعامل مع الجمع، والتضمين، وأكثر.
+
+**الميزات الرئيسية**
+
+- **ترجمات في وقت التشغيل**: تحميل ملفات الترجمة عند الطلب، مما يمكنّك من تغيير اللغات دون إعادة بناء تطبيقك.
+- **الجمع والتضمين**: يوفر تركيبًا بسيطًا للتعامل مع أشكال الجمع وإدخال المتغيرات داخل الترجمات.
+- **التحميل الكسول**: فقط جلب ملفات الترجمة التي تحتاجها، مما يحسن من أداء التطبيقات الأكبر أو المتعددة اللغات.
+- **دعم SvelteKit**: تتضمن أمثلة موثقة جيدًا تظهر كيفية الدمج مع SSR في SvelteKit لتحسين SEO.
+
+**الاعتبارات**
+
+- **تنظيم المشروع**: ستحتاج إلى تنظيم ملفات الترجمة الخاصة بك بشكل منطقي مع نمو المشروع.
+- **إعداد SSR**: قد يتطلب إعداد SSR لتحسين محركات البحث خطوات إضافية لضمان الكشف الصحيح عن اللغة على جانب الخادم.
+- **الأداء**: بينما يكون مرنًا في وقت التشغيل، يمكن أن يؤثر عدد كبير من الترجمات المحملة دفعة واحدة على أوقات التحميل الأولية, فكر في استراتيجيات التحميل الكسول أو التخزين المؤقت.
+
+---
+
+### 2. svelte-intl-precompile
+
+المستودع: [https://github.com/cibernox/svelte-intl-precompile](https://github.com/cibernox/svelte-intl-precompile)
+
+**نظرة عامة**  
+**svelte-intl-precompile** يستخدم نهج ما قبل الترجمة لتقليل الحمل الزائد أثناء التشغيل وتحسين الأداء. يدمج هذا المكتبة مفهوم تنسيق الرسائل (موجودة مثل FormatJS) بينما تولد رسائل ما قبل الترجمة في وقت البناء.
+
+**الميزات الرئيسية**
+
+- **الرسائل المترجمة مسبقًا**: من خلال تجميع سلاسل الترجمة أثناء خطوات البناء، يتحسن أداء وقت التشغيل، ويمكن أن يكون حجم الحزمة أصغر.
+- **التكامل مع SvelteKit**: متوافق مع SSR، مما يسمح بتقديم صفحات محلية بالكامل لتحسين SEO وتجربة المستخدم.
+- **استخراج الرسائل**: استخراج السلاسل تلقائيًا من الشيفرة الخاصة بك، مما يقلل من الحمل الزائد للقيام بالتحديثات اليدوية.
+- **التنسيق المتقدم**: يدعم الجمع، والترجمات المرتبطة بالجنس، والتضمين المتغير.
+
+**الاعتبارات**
+
+- **تعقيد البناء**: قد يؤدي إعداد ما قبل الترجمة إلى تقديم تعقيد إضافي في خط أنابيب البناء الخاص بك.
+- **المحتوى الديناميكي**: إذا كنت بحاجة إلى ترجمات فورية للمحتوى الذي ينتجه المستخدم، قد يتطلب هذا النهج خطوات إضافية للتحديثات أثناء التشغيل.
+- **منحنى التعلم**: قد يكون تركيب استخراج الرسائل وما قبل الترجمة أكثر تعقيدًا قليلاً للمبتدئين.
+
+---
+
+### 3. i18next مع Svelte / SvelteKit
+
+الموقع: [https://www.i18next.com/](https://www.i18next.com/)
+
+**نظرة عامة**  
+على الرغم من أن **i18next** يرتبط عادةً بـ React أو Vue، إلا أنه من الممكن أيضًا دمجه مع Svelte أو **SvelteKit**. يمكن أن تكون الاستفادة من النظام البيئي الشامل لـ i18next مفيدة إذا كنت بحاجة إلى i18n متسق عبر أطر عمل JavaScript مختلفة في مؤسستك.
+
+**الميزات الرئيسية**
+
+- **نظام بيئي ناضج**: الاستفادة من مجموعة واسعة من المكونات الإضافية، ووحدات كشف اللغة، ودعم المجتمع.
+- **وقت التشغيل أو وقت البناء**: اختر بين التحميل الديناميكي أو تجميع ترجماتك للحصول على بدء تشغيل أسرع قليلاً.
+- **ودود لـ SSR**: يمكن لخدمة SvelteKit SSR تقديم محتوى محلي باستخدام i18next على الجانب الخادم، وهو أمر رائع لتحسين محركات البحث.
+- **ميزات غنية**: يدعم التضمين، والجمع، والترجمات المتداخلة، وأكثر من ذلك من سيناريوهات i18n المعقدة.
+
+**الاعتبارات**
+
+- **الإعداد اليدوي**: لا يحتوي i18next على تكامل مخصص مع Svelte خارج الصندوق، لذا ستحتاج إلى تكوينه بنفسك.
+- **العبء الزائد**: i18next قوي، لكن لمشاريع Svelte الأصغر، قد تكون بعض ميزاته مبالغة.
+- **التوجيه والحالة**: ستتطلب معالجة توجيه اللغة عادةً خطوات مخصصة في SvelteKit أو واجهات برمجة التطبيقات.
+
+---
+
+### الأفكار النهائية
+
+عند اختيار استراتيجية i18n لتطبيق Svelte الخاص بك:
+
+1. **تقييم حجم المشروع**: بالنسبة للمشاريع الأصغر أو النماذج السريعة، قد تكون المكتبات الأبسط مثل **svelte-i18n** أو نهج i18n minimal كافية. قد تستفيد التطبيقات الأكبر والأكثر تعقيدًا من حل مضبوط أو ما قبل التجميع أو نظام بيئي أكثر قوة.
+2. **اعتبارات SSO و SSR**: إذا كانت تحسين محركات البحث مهمة أو كنت بحاجة إلى تقديم من جانب الخادم باستخدام **SvelteKit**، اختر مكتبة تدعم SSR بشكل فعال ويمكنها التعامل مع العناوين المحلية، والبيانات الوصفية، وخرائط المواقع.
+3. **وقت التشغيل مقابل وقت البناء**: قرر ما إذا كنت بحاجة إلى تبديل لغات ديناميكي في وقت التشغيل أو تفضل الترجمات المجمعة للحصول على أداء أفضل. يتضمن كل نهج تنازلات مختلفة.
+4. **تكامل TypeScript**: إذا كنت تعتمد بشكل كبير على TypeScript، يمكن أن تقلل الحلول مثل **Intlayer** أو المكتبات ذات المفاتيح الموصوفة من الأخطاء في وقت التشغيل وتحسن تجربة المطور.
+5. **قابلية الصيانة والمرونة**: خطط لكيفية تنظيم وتحديث وإصدار ملفات الترجمة الخاصة بك. سيوفر لك الاستخراج التلقائي، وتسميات التسمية، وبنية المجلد المتسقة الوقت على المدى الطويل.
+
+في النهاية، تقدم كل مكتبة ميزات فريدة. يعتمد اختيارك على **الأداء**، **تجربة المطور**، **احتياجات SEO**، و**قابلية الصيانة على المدى الطويل**. من خلال اختيار حل يتماشى مع أهداف مشروعك، يمكنك إنشاء تطبيق عالمي حقًا في Svelte, واحد يبهج المستخدمين حول العالم.

package/blog/ar/list_i18n_technologies/frameworks/vue.md

@@ -0,0 +1,130 @@
+---
+createdAt: 2025-01-16
+updatedAt: 2025-06-29
+title: أفضل أدوات التدويل (i18n) للإنترات
+description: تعرف على أفضل حلول التدويل (i18n) لـ Vue لتجاوز تحديات الترجمة، وتعزيز SEO، وتقديم تجربة ويب عالمية سلسة.
+keywords:
+  - Vue
+  - i18n
+  - متعدد اللغات
+  - SEO
+  - التدويل
+  - المدونة
+  - JavaScript
+slugs:
+  - blog
+  - i18n-technologies
+  - frameworks
+  - vue
+---
+
+# استكشاف حلول i18n لترجمة موقعك الإلكتروني باستخدام Vue.js
+
+في مشهد رقمي متزايد العولمة، لم يعد توسيع نطاق موقعك الإلكتروني باستخدام Vue.js ليصل إلى المستخدمين بلغات متعددة "ميزة إضافية" , بل إنه ضرورة تنافسية. تتيح العولمة (i18n) للمطورين إدارة الترجمات وتكييف تطبيقاتهم لمواقع مختلفة مع الحفاظ على قيمة SEO، وتجربة المستخدم، وهياكل الكود القابلة للصيانة. في هذه المقالة، سنستكشف طرقًا مختلفة , تتراوح من المكتبات المخصصة إلى الحلول المبرمجة بشكل مخصص , التي تساعدك على دمج i18n في مشروعك باستخدام Vue.js بسلاسة.
+
+---
+
+![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
+
+## ما هي العولمة (i18n)؟
+
+العولمة (i18n) هي ممارسة إعداد تطبيق برمجي (أو موقع ويب) لعدة لغات وعادات ثقافية. ضمن نظام Vue.js البيئي، يشمل ذلك تحديد كيفية تكييف النصوص، والتواريخ، والأرقام، والعملة، والعناصر الأخرى القابلة للتخصيص لمواقع مختلفة. من خلال إعداد i18n من البداية، تضمن هيكلًا منظمًا وقابلًا للتوسع لإضافة لغات جديدة والتعامل مع احتياجات الترجمة المستقبلية.
+
+لمعرفة المزيد حول أساسيات i18n، تحقق من مرجعنا: [ما هي العولمة (i18n)؟ التعريف والتحديات](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/what_is_internationalization.md).
+
+---
+
+## تحدي الترجمة لتطبيقات Vue
+
+تتمتع ترجمة تطبيق Vue.js بمجموعة من التحديات الخاصة بها:
+
+- **العمارة القائمة على المكونات:** مشابهة لـ React، قد تحتوي المكونات ذات الملف الواحد (SFCs) في Vue على نصوص وإعدادات خاصة بالموقع. ستحتاج إلى استراتيجية لتجميع سلاسل الترجمة.
+- **المحتوى الديناميكي:** البيانات المستخرجة من واجهات برمجة التطبيقات أو المعالجة في الوقت الحقيقي تتطلب نهجًا مرنًا لتحميل وتطبيق الترجمات على الطاير.
+- **اعتبارات SEO:** مع التشغيل الجانبي على الخادم عبر Nuxt أو إعدادات SSR الأخرى، من الضروري إدارة URLs المحلية، وmeta tags، وsitemaps للحفاظ على SEO قوي.
+- **السياق الحالي والتفاعلية:** يتطلب ضمان الحفاظ على الموقع الحالي عبر المسارات والمكونات , تحديث النصوص والأشكال بشكل تفاعلي , نهجاً مدروساً، خاصة عند التعامل مع Vuex أو Pinia لإدارة الحالة.
+- **عبء التطوير:** يمكن أن يصبح الاحتفاظ بملفات الترجمة منظمة ومتسقة ومحدثة بسرعة مهمة كبرى إذا لم تتم إدارتها بعناية.
+
+---
+
+## الحلول الرائدة في i18n لـ Vue.js
+
+فيما يلي بعض المكتبات والأساليب الشائعة التي يمكنك استخدامها لدمج العولمة في تطبيقات Vue الخاصة بك. يهدف كل منها إلى تبسيط الترجمة، وSEO، واعتبارات الأداء بطرق مختلفة.
+
+---
+
+### 1. Vue I18n
+
+> الموقع: [https://vue-i18n.intlify.dev/](https://vue-i18n.intlify.dev/)
+
+**نظرة عامة**  
+**Vue I18n** هي المكتبة الأكثر استخدامًا لتوطين التطبيق في نظام Vue، حيث توفر وسيلة بسيطة وغنية بالميزات للتعامل مع الترجمات في مشاريع Vue 2 وVue 3 وNuxt.
+
+**المميزات الرئيسية**
+
+- **إعداد بسيط**  
+  تكوين الرسائل المحلية بسرعة وتحويل المواقع باستخدام واجهة برمجة تطبيقات موثقة جيدًا.
+- **التفاعلية**  
+  تغييرات المواقع تحدث نصوصًا على الفور عبر المكونات بفضل نظام التفاعل في Vue.
+- **التعدد والتنسيق الزمني/الرقمي**  
+  طرق مدمجة تتعامل مع الاستخدامات الشائعة، بما في ذلك الأشكال الجمع، وتنسيق التاريخ/الوقت، وتنسيق الأرقام/العملة، وأكثر من ذلك.
+- **دعم Nuxt.js**  
+  يوسع وحدة Nuxt I18n من Vue I18n لتوليد المسارات تلقائيًا، وURLs صديقة لـ SEO، وsitemaps لكل موقع.
+- **دعم TypeScript**  
+  يمكن دمجه مع تطبيقات Vue المبنية على TypeScript، على الرغم من أن الإكمال التلقائي لمفاتيح الترجمة قد يتطلب إعدادًا إضافيًا.
+- **SSR وتقسيم الكود**  
+  يعمل بسلاسة مع Nuxt لتشغيل الخادم، ويدعم تقسيم الكود لملفات الترجمة لتعزيز الأداء.
+
+**الاعتبارات**
+
+- **عبء الإعداد**  
+  قد تتطلب المشاريع الكبيرة أو متعددة الفرق هيكل مجلدات واضح واصطلاحات تسمية لإدارة ملفات الترجمة بكفاءة.
+- **نظام المكونات الإضافية**  
+  بينما هو قوي، قد تحتاج إلى اختيار بعناية من بين عدة مكونات أو وحدات (Nuxt I18n، Vue I18n، إلخ) لبناء إعداد مثالي.
+
+---
+
+### 2. LinguiJS (تكامل Vue)
+
+> الموقع: [https://lingui.js.org/](https://lingui.js.org/)
+
+**نظرة عامة**  
+معروفة في الأصل بدمجها مع React، تقدم **LinguiJS** أيضًا مكونًا إضافيًا لـ Vue يركز على الحد الأدنى من الحمل الزمني وعملية استخراج الرسائل التلقائية.
+
+**المميزات الرئيسية**
+
+- **استخراج الرسائل التلقائي**  
+  استخدم CLI الخاص بـ Lingui لمسح كود Vue الخاص بك بحثًا عن الترجمات، مما يقلل من إدخال معرفات الرسائل يدويًا.
+- **مضغوط وفعال**  
+  تؤدي الترجمات المجمعة إلى تقليل البصمة الزمنية، مما يعد أمرًا أساسيًا لتطبيقات Vue عالية الأداء.
+- **دعم TypeScript والإكمال التلقائي**  
+  على الرغم من أنه أكثر قليلاً للتهيئة يدويًا، يمكن أن تحسن المعرفات والنشاطات المكتوبة الخبرة المستخدمة في مشاريع Vue المبنية على TypeScript.
+- **توافق Nuxt وSSR**  
+  يمكن دمجه مع إعدادات SSR لخدمة صفحات محلية بالكامل، مما يحسن من SEO والأداء لكل موقع مدعوم.
+- **التعدد والتنسيق**  
+  دعم مدمج للأشكال الجمع، وتنسيق الأرقام، والتواريخ، وغيرها , متماشية مع معايير تنسيق رسائل ICU.
+
+**الاعتبارات**
+
+- **توثيق أقل تحديدًا لـ Vue**  
+  بينما تقدم LinguiJS دعمًا رسميًا لـ Vue، يركز توثيقها في المقام الأول على React؛ قد تحتاج إلى الاعتماد على أمثلة من المجتمع.
+- **مجتمع أصغر**  
+  بالمقارنة مع Vue I18n، هناك نظام بيئي أصغر نسبيًا. قد تكون المكونات الإضافية التي يتم صيانتها رسميًا والملحقات التابعة لها أكثر محدودية.
+
+---
+
+## الأفكار النهائية
+
+عند اتخاذ القرار بشأن حل i18n لتطبيقك باستخدام Vue.js:
+
+1. **تقييم متطلباتك**  
+   حجم المشروع، ومهارات المطورين، وتعقيد العولمة كلها عوامل تؤثر في اختيارك.
+2. **تقييم توافق SSR**  
+   إذا كنت تبني تطبيق Nuxt أو تعتمد على SSR، تأكد من أن النهج الذي اخترته يدعم التشغيل الخادم بسلاسة.
+3. **TypeScript والإكمال التلقائي**  
+   إذا كنت تقدر تجربة مطور قوية مع حد أدنى من أخطاء مفاتيح الترجمة، تأكد من أن الحل الخاص بك يقدم تعريفات مكتوبة أو يمكن دمجها معها.
+4. **القدرة على الإدارة والتوسع**  
+   مع إضافة المزيد من المواقع أو توسيع تطبيقك، تعتبر هيكلة ملفات الترجمة المنظمة أمرًا حيويًا.
+5. **SEO وMetadata**  
+   لتحقيق ترتيب جيد للمواقع متعددة اللغات، يجب أن يبسط حلك الوسوم المحلية، وURLs، وsitemaps، و`robots.txt` لكل موقع.
+
+بغض النظر عن المسار الذي تختاره , Intlayer، Vue I18n، LinguiJS، أو نهج مبرمج مخصص , ستصبح في طريقك لتقديم تطبيق Vue.js صديق للعالمية. تقدم كل حل بعض التباديل فيما يتعلق بالأداء، وتجربة المطور، وقابلية التوسع. من خلال تقييم احتياجات مشروعك بعناية، يمكنك بثقة اختيار إعداد i18n الذي يؤهلك ويؤهل جمهورك متعدد اللغات للنجاح.

package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md

@@ -0,0 +1,285 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: next-i18next vs next-intl vs Intlayer
+description: قارن بين next-i18next باستخدام next-intl و Intlayer للتدويل الدولي (i18n) لتطبيق Next.js
+keywords:
+  - next-intl
+  - next-i18next
+  - Intlayer
+  - التدويل
+  - التوثيق
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - next-i18next-vs-next-intl-vs-intlayer
+---
+
+# next-i18next VS next-intl VS Intlayer | Next.js Internationalization (i18n)
+
+فيما يلي مقارنة موجزة بين **ثلاث مكتبات شائعة** لتدويل (i18n) تطبيق Next.js: **next-intl**، **next-i18next**، و **Intlayer**.
+
+يسلط هذا المستند الضوء على المعايير الرئيسية:
+
+1. **البنية المعمارية** (الحفاظ على الترجمات بالقرب من مكوناتها)
+2. **دعم TypeScript**
+3. **إدارة الترجمات المفقودة**
+4. **دعم مكونات الخادم**
+5. **توجيه مُحسّن & middleware** لـ Next.js
+6. **بساطة الإعداد**
+
+يوفر الدليل أيضًا **نظرة عميقة على Intlayer**، مما يوضح لماذا يمكن أن يكون خيارًا قويًا - خاصة لـ Next.js 13+، بما في ذلك **موجه التطبيقات** و **مكونات الخادم**.
+
+---
+
+## نظرة عامة على كل مكتبة
+
+### 1. next-intl
+
+**التركيز الرئيسي**: إعداد سريع وسهل مع نهج خفيف لتوطين.
+
+- **البنية المعمارية**: تشجع على تجميع الترجمات في مجلد واحد (مثل `locales/`) لكنها تسمح أيضًا باستراتيجيات متعددة. لا تفرض بدقة بنية "ترجمة لكل مكون".
+- **دعم TypeScript**: تكامل أساسي مع TypeScript. توجد بعض تعريفات النوع، لكنها ليست مركزة بكثافة على التوليد التلقائي لتعريفات TypeScript من ملفات الترجمة الخاصة بك.
+- **الترجمات المفقودة**: آلية تراجع أساسية. بشكل افتراضي، تتراجع إلى مفتاح أو سلسلة محلية افتراضية. لا توجد أدوات قوية خارج الصندوق لعمليات فحص الترجمات المفقودة المتقدمة.
+- **دعم مكونات الخادم**: تعمل مع Next.js 13+ بشكل عام، لكن النمط أقل تخصصًا للاستخدام العميق على جانب الخادم (مثل مكونات الخادم مع توجيه ديناميكي معقد).
+- **التوجيه و middleware**: الدعم المتاح محدود. يعتمد عادة على `Middleware` في Next.js لاكتشاف المحلية، أو التكوين اليدوي لإعادة كتابة مسارات المحلية.
+- **بساطة الإعداد**: بسيطة جدًا. الحد الأدنى من الكود المبدئي مطلوب.
+
+**استخدمها عندما**: تريد نهجًا أبسط أو تشعر بالراحة في إدارة الترجمات الخاصة بك بطرق أكثر تقليدية (مثل مجلد واحد مع ملفات JSON محلية).
+
+---
+
+### 2. next-i18next
+
+**التركيز الرئيسي**: حل مثبت عبر الزمن يستخدم `i18next` تحت الغطاء، ومتبع على نطاق واسع لمشاريع Next.js.
+
+- **البنية المعمارية**: غالبًا ما تنظم الترجمات في مجلد `public/locales`. لم يتم تصميمه خصيصًا للحفاظ على الترجمات "بالقرب" من كل مكون، على الرغم من أنه يمكنك اعتماد بنية مختلفة يدويًا.
+- **دعم TypeScript**: تغطية معقولة لـ TypeScript لكنها تتطلب تكوينًا مخصصًا للترجمات المــــعــنونة و الـhooks المعنونة.
+- **الترجمات المفقودة**: يقدم i18next التداخل/التراجعات. ومع ذلك، فإن اكتشاف الترجمة المفقودة عادةً ما يحتاج إلى إعداد إضافي أو مكونات إضافية.
+- **دعم مكونات الخادم**: تم توثيق الاستخدام الأساسي مع Next.js 13، ولكن قد يكون الاستخدام المتقدم (مثل التكامل العميق بمكونات الخادم، وإنشاء المسارات الديناميكية) مرهقًا.
+- **التوجيه و middleware**: يعتمد بقوة على `Middleware` في Next.js وإعادة الكتابة لمسارات المحلية. قد تحتاج إلى الغوص في تكوين i18next المتقدم للإعدادات الأكثر تعقيدًا.
+- **بساطة الإعداد**: نهج مألوف لأولئك المألوفين مع i18next. ومع ذلك، يمكن أن تصبح أكثر تعقيدًا عندما تكون الميزات المتقدمة مطلوبة (مثل الفضاءات، وموارد محلية افتراضية متعددة، إلخ).
+
+**استخدمها عندما**: تكون قد التزمت بالفعل بنظام `i18next` أو لديك ترجمات موجودة تعتمد على i18next.
+
+---
+
+### 3. Intlayer
+
+**التركيز الرئيسي**: مكتبة توطين حديثة ومفتوحة المصدر مصممة خصيصًا لـ Next.js **موجه التطبيقات** (12، 13، 14، و 15) مع دعم مدمج لـ **مكونات الخادم** و **Turbopack**.
+
+#### المزايا الرئيسية
+
+1. **البنية المعمارية**
+
+   - تشجع على وضع **الترجمات بجانب مكوناتها**. يمكن أن تحتوي كل صفحة أو مكون على ملف `.content.ts` (أو JSON) خاص بها - لا مزيد من البحث في مجلد ترجمة عملاق.
+   - يجعل ذلك الشيفرة الخاصة بك أكثر **وحدوية وقابلة للصيانة**، خاصة في قواعد الشيفرة الكبيرة.
+
+2. **دعم TypeScript**
+
+   - **تعريفات نوع تم إنشاؤها تلقائيًا**: في اللحظة التي تعرف فيها محتواك، يقوم Intlayer بإنشاء أنواع تدعم الإكمال التلقائي والتقاط أخطاء الترجمة.
+   - يقلل من الأخطاء أثناء التشغيل مثل المفاتيح المفقودة ويقدم **الإكمال التلقائي المتقدم** مباشرة في IDE الخاص بك.
+
+3. **إدارة الترجمات المفقودة**
+
+   - خلال البناء، يمكن لـ Intlayer **اكتشاف مفاتيح الترجمة المفقودة** وإلقاء التحذيرات أو الأخطاء.
+   - يضمن ذلك أنك لن تشحن أبدًا نصًا مفقودًا عبر لغاتك.
+
+4. **محسن لمكونات الخادم**
+
+   - متوافق تمامًا مع **موجه التطبيقات** لـ Next.js ونموذج **مكونات الخادم** الجديد.
+   - يقدم موفري خدمات متخصصين (`IntlayerServerProvider`، `IntlayerClientProvider`) لـ **عزل سياق الخادم** (مهم عند التعامل مع Next.js 13+).
+
+5. **توجيه مُحسّن & middleware**
+
+   - يتضمن [**`intlayerMiddleware`**](#) لاكتشاف المحلية تلقائيًا (عبر ملفات تعريف الارتباط أو رؤوس المتصفح) وتوليد المسارات المتقدمة.
+   - يتعامل ديناميكيًا مع المسارات المحلية (مثل `/en-US/about` مقابل `/fr/about`) مع تكوين بسيط.
+   - يقدم طرق مساعدة مثل `getMultilingualUrls` لتوليد روابط لغات بديلة (رائع لـ **SEO**).
+
+6. **إعداد مبسط**
+   - ملف إعداد واحد (`intlayer.config.ts`) لتعريف محلياتك، المحلية الافتراضية، وتفضيلات التكامل.
+   - مكون إضافي Wrapper `withIntlayer(nextConfig)` الذي **يحقن** جميع متغيرات البيئة والمراقبين لمحتواك.
+   - **لا تكوينات تراجع كبيرة** - يتم تصميم النظام ليعمل "فقط" مع الحد الأدنى من الاحتكاك.
+
+> **النتيجة النهائية**: Intlayer هو حل حديث يريد **دفع أفضل الممارسات**: من **الحفاظ على الترجمات قريبة** من كل مكون React، إلى تقديم **دعم TS قوي** و **سهولة الاستخدام على الجانب الخادم**، بينما **يقلل بشكل كبير من الأكواد المبدئية**.
+
+---
+
+## مقارنة الميزات جنبًا إلى جنب
+
+| **الميزة**                                 | **next-intl**                     | **next-i18next**                                | **Intlayer**                            |
+| ------------------------------------------ | --------------------------------- | ----------------------------------------------- | --------------------------------------- |
+| **الحفاظ على الترجمات بالقرب من المكونات** | جزئي - عادةً مجلد محلي واحد       | ليس افتراضيًا - غالبًا ما يكون `public/locales` | **نعم - موصى به وسهل**                  |
+| **توليد TypeScript تلقائي**                | تعريفات TypeScript أساسية         | دعم TypeScript أساسي                            | **نعم - متقدم خارج الصندوق**            |
+| **اكتشاف الترجمات المفقودة**               | في الغالب سلاسل تراجع             | في الغالب سلاسل تراجع                           | **نعم - فحوصات في وقت البناء**          |
+| **دعم مكونات الخادم**                      | تعمل لكن ليست متخصصة              | مدعومة لكنها قد تكون مرهقة                      | **دعم كامل مع موفري خدمات متخصصين**     |
+| **التوجيه & middleware**                   | مدمج يدويًا مع middleware في Next | موفر عبر إعادة كتابة التكوين                    | **middleware i18n مخصص + روابط متقدمة** |
+| **تعقيد الإعداد**                          | بسيطة، تكوينات الحد الأدنى        | تقليدية، يمكن أن تكون مرهقة للاستخدام المتقدم   | **ملف إعداد واحد وملحق**                |
+
+---
+
+## لماذا Intlayer؟
+
+للفرق التي تنتقل إلى أو تبني على **موجه التطبيقات لـ Next.js** (الإصدارات 13، 14، أو 15) مع **مكونات الخادم**، يوفر Intlayer:
+
+1. **بنية معمارية مبسطة**
+
+   - تحتوي كل مسار أو مكون على ترجماته الخاصة. هذا يعزز الوضوح وقابلية الصيانة.
+
+2. **تكامل قوي مع TypeScript**
+
+   - تحصل على أمان على مستوى المترجم، مما يتجنب المفاتيح المفقودة أو المليئة بالأخطاء.
+
+3. **تنبيهات حقيقية لترجمات مفقودة**
+
+   - إذا نسيت مفتاحًا أو ترجمة لغة، سيتم تحذيرك عند وقت البناء (بدلاً من شحن واجهة مستخدم غير مكتملة).
+
+4. **توجيه متقدم مدمج**
+
+   - يتضمن اكتشاف محلي تلقائي، وتوليد ديناميكي للمسارات، وإدارة سهله لروابط الـURL المحلية.
+   - لا يتطلب `intlayerMiddleware` القياسية إعادة كتابة مخصصة عميقة.
+
+5. **إعداد موحد**
+
+   - كود بسيط: فقط عرّف `intlayer.config.ts`،Wrap `next.config` مع `withIntlayer`، وأضف middleware الرسمي.
+   - استخدام واضح ومباشر لكل من **مكونات الخادم** و **العميل** عبر `IntlayerServerProvider` و `IntlayerClientProvider`.
+
+6. **صديق SEO**
+   - المساعدة المدمجة (`getMultilingualUrls`، سمات `hrefLang`، إلخ) تسهل إنتاج صفحات وخ خرائط مواقع متوافقة مع SEO.
+
+---
+
+## مثال: Intlayer في العمل
+
+فيما يلي مقتطف مختصر جداً يوضح كيفية استخدام Intlayer في مشروع Next.js 15. لمزيد من التفاصيل وأمثلة الكود، [تحقق من دليل Intlayer الكامل](#).
+
+<details>
+<summary>مثال خطوة بخطوة</summary>
+
+1. **التثبيت والتكوين**
+
+   ```bash
+   npm install intlayer next-intlayer
+   ```
+
+   ```ts
+   // intlayer.config.ts
+   import { Locales, type IntlayerConfig } from "intlayer";
+
+   const config: IntlayerConfig = {
+     internationalization: {
+       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+       defaultLocale: Locales.ENGLISH,
+     },
+   };
+   export default config;
+   ```
+
+2. **استخدم المكون الإضافي**
+
+   ```ts
+   // next.config.mjs
+   import { withIntlayer } from "next-intlayer/server";
+
+   /** @type {import('next').NextConfig} */
+   const nextConfig = {};
+
+   export default withIntlayer(nextConfig);
+   ```
+
+3. **أضف Middleware**
+
+   ```ts
+   // src/middleware.ts
+   export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
+
+   export const config = {
+     matcher:
+       "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
+   };
+   ```
+
+4. **إنشاء تخطيط محلي**
+
+   ```tsx
+   // src/app/[locale]/layout.tsx
+   import { getHTMLTextDir } from "intlayer";
+   import { NextLayoutIntlayer } from "next-intlayer";
+
+   const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
+     const { locale } = params;
+     return (
+       <html lang={locale} dir={getHTMLTextDir(locale)}>
+         <body>{children}</body>
+       </html>
+     );
+   };
+
+   export { generateStaticParams } from "next-intlayer";
+   export default LocaleLayout;
+   ```
+
+5. **إعلان واستخدام المحتوى**
+
+   ```tsx
+   // src/app/[locale]/page.content.ts
+   import { t } from "intlayer";
+
+   export default {
+     key: "page",
+     content: {
+       getStarted: {
+         main: t({
+           en: "Get started by editing",
+           fr: "Commencez par éditer",
+           es: "Comience por editar",
+         }),
+         pageLink: "src/app/page.tsx",
+       },
+     },
+   };
+   ```
+
+   ```tsx
+   // src/app/[locale]/page.tsx
+   import { IntlayerServerProvider } from "next-intlayer/server";
+   import { IntlayerClientProvider, useIntlayer } from "next-intlayer";
+
+   const PageContent = () => {
+     const { content } = useIntlayer("page");
+     return (
+       <>
+         <p>{content.getStarted.main}</p>
+         <code>{content.getStarted.pageLink}</code>
+       </>
+     );
+   };
+
+   export default function Page({ params }) {
+     return (
+       <IntlayerServerProvider locale={params.locale}>
+         <IntlayerClientProvider locale={params.locale}>
+           <PageContent />
+         </IntlayerClientProvider>
+       </IntlayerServerProvider>
+     );
+   }
+   ```
+
+   </details>
+
+---
+
+## الخاتمة
+
+كل حل, **next-intl**، **next-i18next**، و **Intlayer**, أثبت فعاليته لمشاريع Next.js متعددة اللغات. ومع ذلك، فإن **Intlayer** تذهب أبعد من ذلك من خلال:
+
+- **تشجيع بناء بنية ترجمة على مستوى المكونات**
+- التكامل بسلاسة مع **Next.js 13+ و مكونات الخادم**
+- تقديم **توليد TypeScript** قوي للشفرة الأكثر أماناً
+- التعامل مع **الترجمات المفقودة** عند بناء الشيفرة
+- توفير **نهج إعداد مبسط**، مع توجيه و middleware متقدمان
+
+إذا كنت ترغب في ميزات i18n **حديثة** مصممة لموجه تطبيقات Next.js وتبحث عن تجربة **مكتوبة بالكامل** دون ربط يدوي للترجمات المفقودة، أو إعدادات المسار، أو خطوات بناء معقدة، فإن **Intlayer** هي خيار جذاب. فهي لا تقصر من وقت الإعداد الخاص بك فحسب، بل تضمن أيضًا نهجًا أكثر صيانة وقابلية للتوسع للترجمات لفريقك.