@intlayer/docs 9.5.6 → 9.5.8

package/blog/ar/i18next_vs_intlayer-i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "مقارنة i18next مقابل @intlayer/i18next: نفس واجهة البرمجة (API)، وحزمة برمجية مختلفة تماماً"
 description: "ما الذي يتغير عندما يحتفظ تطبيق React أو Next.js باستدعاءات i18next و react-i18next و next-i18next ولكنه يخدمها من خلال محولات @intlayer/i18next. قياسات حجم JavaScript لكل صفحة، وحجم المكونات، وتسريب النصوص، والترطيب على نفس الشيفرة البرمجية."
 keywords:
@@ -28,6 +28,8 @@ author: aymericzip
 
 # مقارنة i18next مقابل @intlayer/i18next | نفس واجهة البرمجة (API)، وحزمة برمجية مختلفة تماماً
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 تُعد `@intlayer/i18next` و `@intlayer/react-i18next` و `@intlayer/next-i18next` محولات توافقية. إنها توفر نفس واجهة برمجة التطبيقات (API) الخاصة بـ `i18next` التي تستخدمها بالفعل في شيفرتك البرمجية (`useTranslation`، `t()`، `<Trans>`، `i18n.changeLanguage()`، `getFixedT`، `serverSideTranslations`...) وتقدمها من خلال قواميس مبنية ومترجمة بواسطة Intlayer. المكونات لا تتغير إطلاقاً، بل إن بيئة التشغيل الأساسية تحتها هي التي تتغير.
 
 يقيس هذا المقال ذلك الاستبدال على نفس تطبيق Next.js، حيث تم بناؤه مرة باستخدام `next-i18next` ومرة أخرى باستخدام `@intlayer/next-i18next`. الأرقام مأخوذة من مشروع [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). للمقارنة بين `i18next` و Intlayer كمكتبات مستقلة، يرجى قراءة [مقارنة i18next مقابل Intlayer](https://intlayer.org/ar/blog/i18next-vs-intlayer). أما هذا المقال، فيركز على ما يغيره المحول عندما تحتفظ بشيفرتك البرمجية كما هي.
@@ -109,6 +111,10 @@ const About = () => {
 
 ### النتائج على Next.js
 
+اختر المقاييس والمكتبات التي تهمك:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | الإعداد                      | الاستراتيجية   | حجم المكتبة (gz) | متوسط JS للصفحة (gz) | تسريب اللغات | تسريب الصفحات | متوسط المكون (gz) | تفاعلية E2E |     الترطيب |
 | ---------------------------- | -------------- | ---------------: | -------------------: | -----------: | ------------: | ----------------: | ----------: | ----------: |
 | **الأساس** (بدون i18n)       | -              |           0.0 KB |             141.0 KB |         0.0% |          0.0% |            0.9 KB |     13.4 ms |     11.8 ms |
@@ -129,10 +135,21 @@ const About = () => {
 - **ترطيب أسرع وتبديل لغات أكثر سلاسة.** انخفض وقت الترطيب من 15.6 مللي ثانية إلى **11.3 مللي ثانية** (ومن 27.7 مللي ثانية في نمط `dynamic` حيث يعيق جلب البيانات المسار الحرج). وتحسن وقت تبديل اللغة من 15-16 مللي ثانية إلى **11-12 مللي ثانية**.
 - **المحول ليس هو بيئة التشغيل الأصلية.** تبلغ حزمة `next-intlayer` الأصلية **141.3 كيلوبايت** (+0.3 كيلوبايت فقط فوق التطبيق الأساسي الخالي من اللغات). بينما يحمل المحول طبقة توافق واجهة `i18next` فوق نواة Intlayer ليضيف 9.4 كيلوبايت لكل صفحة مقارنة بالنسخة الأصلية. المحول هو جسر عبور مريح، وليس المحطة النهائية.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> الجدول الكامل، كل مكتبة وكل استراتيجية، في [تقرير قياس أداء Next.js](https://intlayer.org/ar/doc/benchmark/nextjs).
+
 > لم يكن محول `react-i18next` على Vite / TanStack Start جزءاً من هذا الاختبار المحدد. يمكن الاطلاع على قياسات `react-i18next` على TanStack Start في مقال [i18next vs Intlayer](https://intlayer.org/ar/blog/i18next-vs-intlayer).
 
 ## لماذا تتحسن هذه المؤشرات
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 لم تتغير أي شيفرة داخل مجلد `components/`، وبالتالي فإن كل هذه المكاسب ناتجة عن الكيان الذي ترتبط به الدالة `useTranslation`.
 
 **مع `i18next`**، يتم الربط مع الكائن العام. كل ما يتم تحميله فيه (جميع اللغات في `static`، ومساحة الأسماء الكاملة للغة في `dynamic`) يصبح في متناول أي مكون يستدعي `useTranslation()`. ولا يستطيع مجمع الحزم تقسيم الملفات إلى وحدات أصغر مما يحتفظ به الكائن، كما تعجز بيئة التشغيل عن التنبؤ بالمفاتيح المطلوبة أثناء التصيير.
@@ -149,6 +166,10 @@ const About = () => {
     └── About.tsx                     # useTranslation(); t("about.title")
 ```
 
+يتم إرسال كل ما تحتفظ به النسخة إلى كل صفحة، ويتزايد الهدر على محورين، الصفحات واللغات:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **مع `@intlayer/next-i18next`**، يتم الربط مباشرة بالقاموس. يقوم ملحق `syncJSON` بتحويل كل ملف مساحة أسماء إلى قاموس مخصص؛ وتمرر مرحلة التحسين للمكون القاموس المعني مباشرة في صورة استيراد يستطيع مجمع الحزم تتبعه وتقسيمه لكل صفحة ولكل لغة بدقة.
 
 ```bash
@@ -297,26 +318,112 @@ export default defineConfig({
 
 ## قيود يجب معرفتها قبل البدء
 
-- **الواجهات الخلفية والكواشف غير فعالة.** تستدعي `i18n.use(HttpBackend)` دالة `init` الخاصة بالملحق فقط. وإذا كان تطبيقك يعتمد على جلب الترجمات في وقت الطلب من نظام CMS خارجي، فإن هذا المسار يتوقف؛ استخدم بدلاً من ذلك نظام Intlayer CMS أو أوامر `intlayer pull` / `push`.
-- **يتم تجاهل `resources` بدلاً من دمجها.** على عكس بعض المحولات السطحية، لا يستخدم `@intlayer/i18next` كائن `resources` المضمن كحل احتياطي. يجب أن يتواجد كل مفتاح في القواميس المتزامنة فعلياً، وهو ما يؤكده أمر `intlayer test`.
-- **يحتاج App Router إلى تعديل ملف المزود.** ملف واحد فقط، كما هو موضح أعلاه. بينما لا يتطلب Pages Router مع `appWithTranslation` أي تعديل.
-- **لا يتم قراءة `next-i18next.config.js`.** خيارات مثل `localePath` و `fallbackLng` و `reloadOnPrerender` تتوقف عن العمل؛ وتُدار اللغات والبدائل حصرياً داخل `intlayer.config.ts`.
-- **المحول ليس مجانياً تماماً من حيث الحجم.** يزن المحول 9.4 كيلوبايت وقت التشغيل ويضيف +9.4 كيلوبايت لكل صفحة مقارنة بنواة `next-intlayer` الصافية. وبمجرد تحويل جميع المكونات إلى `useIntlayer`، يمكنك حذفه تماماً.
+<AccordionGroup>
+<Accordion header="الواجهات الخلفية وأجهزة الكشف خاملة">
+
+`i18n.use(HttpBackend)` يقوم فقط باستدعاء دالة init الخاصة بالملحق ولا يفعل أي شيء آخر. إذا كان تطبيقك يعتمد على جلب الترجمات من نظام إدارة المحتوى (CMS) في وقت التشغيل، فإن هذا التدفق قد اختفى؛ استخدم [Intlayer CMS](https://intlayer.org/ar/doc/concept/cms) أو أوامر `intlayer pull` / `push` بدلاً من ذلك. يصبح اكتشاف اللغة جزءًا من إعدادات التوجيه الخاصة بـ Intlayer (بادئة URL، ملف تعريف الارتباط، الرأس).
+
+</Accordion>
+<Accordion header="يتم تجاهل resources وليس دمجها">
+
+على عكس بعض المحولات الأخرى، لا يستخدم `@intlayer/i18next` كائن `resources` المضمن كحل بديل. يجب أن يكون كل مفتاح موجودًا في القواميس المتزامنة، وهو ما يتحقق منه أمر `intlayer test`.
+
+</Accordion>
+<Accordion header="يتطلب App Router تعديل مزود الخدمة">
+
+ملف واحد فقط، موضح أعلاه. لا يتطلب Pages Router مع `appWithTranslation` أي تعديلات.
+
+</Accordion>
+<Accordion header="لا تتم قراءة next-i18next.config.js">
+
+ليس لـ `localePath` و `fallbackLng` و `reloadOnPrerender` وما شابهها أي مكافئ؛ تأتي اللغات والبدائل الاحتياطية من `intlayer.config.ts`.
+
+</Accordion>
+<Accordion header="المحول ليس مجانيًا">
+
+9.4 كيلوبايت لوقت التشغيل و +9.4 كيلوبايت لكل صفحة مقارنة بـ `next-intlayer`. بمجرد انتقال كل مكون إلى `useIntlayer`، قم بإزالته.
+
+</Accordion>
+</AccordionGroup>
 
 ## متى تستخدم كل خيار؟
 
-- **ابقَ على `i18next`**: إذا كان تطبيقك يعتمد بالضرورة على واجهات خلفية لجلب النصوص وقت الطلب عبر الشبكة، أو على منظومة إضافات مخصصة، أو على بيئة عمل خارج نطاق React لا تدعمها المحولات.
-- **استخدم `@intlayer/*`**: إذا كنت تستخدم `react-i18next` / `next-i18next` وتريد خفض 68 كيلوبايت، وتصغير المكونات 8 مرات، والقضاء على التسريب بنسبة 0%، والحصول على أمان الأنواع واختبارات الـ CI دون الحاجة لإعادة كتابة مكوناتك. هذا هو الخيار الأمثل للمشاريع القائمة.
-- **انتقل إلى البنية الأصلية (`next-intlayer` / `react-intlayer`)**: للمشاريع الجديدة، أو بمجرد استقرارك بعد مرحلة المحول. إنها الخيار الأخف على الإطلاق (5.5 كيلوبايت، و+0.3 كيلوبايت فقط لكل صفحة) وتتيح المكونات السيرفرية المتزامنة وملفات `.content.ts` لكل مكون.
+<AccordionGroup>
+<Accordion header="البقاء على i18next">
+
+يعتمد تطبيقك على واجهات خلفية في وقت التشغيل (ترجمات يقدمها CMS عند الطلب)، أو على نظام الملحقات البيئي، أو على هدف غير تابع لـ React لا تغطيه المحولات.
+
+</Accordion>
+<Accordion header="استخدام @intlayer/*">
+
+أنت تستخدم `react-i18next` / `next-i18next` وتريد توفير 68 كيلوبايت، ومكونات أصغر بـ 8 مرات، وتسرب بنسبة 0%، ومفاتيح مطبوعة وفحوصات CI دون إعادة كتابة التعليمات البرمجية. هذه هي نقطة الدخول لقاعدة كود `i18next` الحالية.
+
+</Accordion>
+<Accordion header="الانتقال إلى الوضع الأصلي (next-intlayer / react-intlayer)">
+
+للمشاريع الجديدة، أو بمجرد أن يؤدي المحول وظيفته. يتميز بأخف وقت تشغيل (5.5 كيلوبايت، +0.3 كيلوبايت لكل صفحة) ويوفر Server Components متزامنة وملفات `.content.ts` لكل مكون. ابدأ مع [Intlayer مع Next.js](https://intlayer.org/ar/doc/environment/nextjs) أو [مع Vite و React](https://intlayer.org/ar/doc/environment/vite-and-react).
+
+</Accordion>
+</AccordionGroup>
+
+## الأسئلة الشائعة
+
+<FAQ>
+
+<Question title="من أين يأتي توفير الـ 68 كيلوبايت؟">
+
+من `resources: { en, fr, ... }`. يستورد الإعداد التقليدي لـ `next-i18next` ملف JSON الخاص بكل لغة في `init()`، بحيث تحمل كل صفحة كل مساحة اسم بكل لغة: **218.5 كيلوبايت** لكل صفحة. لا يقوم المحول بتجميع تلك الكتلة أبدًا؛ بل يمنح كل مكون القاموس المحدد فقط، باللغة النشطة.
+
+</Question>
+
+<Question title="هل تستمر مكونات <Trans> في العمل؟">
+
+نعم، مع `components`، والعلامات المرقمة `<1>...</1>` و `values`. وبالمثل بالنسبة لـ `{{interpolation}}`، وتداخل `$t(key)`، وصيغ الجمع `key_one` / `key_other` (يتم تقييمها باستخدام `Intl.PluralRules`)، ولواحق السياق و `returnObjects`.
+
+</Question>
+
+<Question title="ماذا لو كنت أستخدم ملف translation.json واحدًا لكل لغة؟">
+
+اضبط `splitKeys: false` في ملحق `syncJSON`. يظل الملف بأكمله قاموسًا واحدًا ويستمر استدعاء `useTranslation()` البسيط في التحليل عليه.
+
+</Question>
+
+<Question title="هل هذا مطابق للانتقال الكامل إلى Intlayer؟">
+
+لا، إنه الجسر. يحافظ المحول على واجهة برمجة تطبيقات `i18next` وتكلفة وقت التشغيل 9.4 كيلوبايت؛ وتبلغ تكلفة `next-intlayer` الأصلي 5.5 كيلوبايت ويضيف Server Components متزامنة وملفات `.content.ts` مجاورة. يمكنك الترحيل مكونًا تلو الآخر، نظرًا لتعايش قواميس JSON و `.content.ts` معًا.
+
+</Question>
+
+<Question title="هل يمكن للمترجمين مواصلة العمل بالطريقة التي يعملون بها اليوم؟">
+
+نعم. يظل `locales/{lng}/{ns}.json` هو المصدر الوحيد للحقيقة: يقرأه `syncJSON` بلهجة i18next ويكتب الترجمات مرة أخرى عندما يقوم CLI أو CMS بتحديثها.
+
+</Question>
+
+</FAQ>
 
 ## مقارنات ذات صلة
 
-- [i18next vs Intlayer](https://intlayer.org/ar/blog/i18next-vs-intlayer) (مقارنة المكتبات على نفس مقياس الأداء)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/ar/blog/next-intl-vs-intlayer-next-intl) (نفس سلسلة المحولات)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/ar/blog/lingui-vs-intlayer-lingui) (نفس سلسلة المحولات)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-vue-i18n) (نفس سلسلة المحولات)
-- أدلة الهجرة: [i18next](https://intlayer.org/ar/doc/migration/i18next), [react-i18next](https://intlayer.org/ar/doc/migration/react-i18next), [next-i18next](https://intlayer.org/ar/doc/migration/next-i18next)
-- مراجع المحولات التوافقية: [i18next](https://intlayer.org/ar/doc/compatibility/i18next), [react-i18next](https://intlayer.org/ar/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/ar/doc/compatibility/next-i18next)
+نفس سلسلة المحولات:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/ar/blog/next-intl-vs-intlayer-next-intl)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/ar/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+مقارنة المكتبات جنبًا إلى جنب:
+
+- [i18next vs Intlayer](https://intlayer.org/ar/blog/i18next-vs-intlayer), same benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/ar/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/ar/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Is i18next outdated?](https://intlayer.org/ar/blog/is-i18next-outdated)
+
+وثائق مرجعية:
+
+- Compat adapters: [i18next](https://intlayer.org/ar/doc/compatibility/i18next), [react-i18next](https://intlayer.org/ar/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/ar/doc/compatibility/next-i18next)
+- Migration guides: [i18next](https://intlayer.org/ar/doc/migration/i18next), [react-i18next](https://intlayer.org/ar/doc/migration/react-i18next), [next-i18next](https://intlayer.org/ar/doc/migration/next-i18next)
+- [Next.js benchmark report](https://intlayer.org/ar/doc/benchmark/nextjs) and [TanStack Start benchmark report](https://intlayer.org/ar/doc/benchmark/tanstack)
+- [Bundle optimization](https://intlayer.org/ar/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/ar/doc/compiler)
+- [Visual Editor](https://intlayer.org/ar/doc/concept/editor), [CMS](https://intlayer.org/ar/doc/concept/cms) and [AI translation](https://intlayer.org/ar/doc/concept/auto-fill)
 
 ## الخاتمة
 

package/blog/ar/i18next_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next مقابل Intlayer: اختبار الأداء والمقارنة الشاملة لعام 2026"
 description: "قياس أداء react-i18next و next-i18next ومقارنتهما مع Intlayer على Next.js و TanStack Start. حجم الحزمة (Bundle size)، تسرب المحتوى، سرعة الاستجابة عند تبديل اللغة، وتجربة المطور."
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # i18next مقابل Intlayer | اختبار أداء تدويل (i18n) تطبيقات React و Next.js
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 يُعد `i18next` إطار عمل التدويل (i18n) الأكثر استخداما في بيئة عمل JavaScript. فمن خلال `react-i18next` و `next-i18next`، يدعم شريحة ضخمة من تطبيقات React و Next.js. في المقابل، يمثل Intlayer بديلا حديثا قائما على المترجم (Compiler) ونطاق المكونات (Component-scoped).
 
 تقارن هذه المقالة بينهما بناء على قياسات واقعية بدلا من مجرد سرد الميزات. الأرقام مأخوذة من [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom)، وهي حزمة اختبارات مفتوحة المصدر تبني نفس التطبيق باستخدام كل مكتبة وتسجل ما يقوم المتصفح بتنزيله بالفعل.
@@ -99,6 +101,10 @@ author: aymericzip
 
 ### النتائج على Next.js (`next-i18next`)
 
+اختر المقاييس والمكتبات التي تهمك:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | المكتبة                           | الاستراتيجية   | حجم المكتبة (gz) | متوسط JS للصفحة (gz) | تسرب اللغات | تسرب الصفحات | متوسط حجم المكون (gz) | سرعة الاستجابة E2E | مدة الإماهة (Hydration) |
 | --------------------------------- | -------------- | ---------------: | -------------------: | ----------: | -----------: | --------------------: | -----------------: | ----------------------: |
 | **base** (بدون i18n)              | -              |           0.0 KB |             141.0 KB |        0.0% |         0.0% |                0.9 KB |            13.4 ms |                 11.8 ms |
@@ -119,6 +125,15 @@ author: aymericzip
 - **حجم المكون الفردي**: المكون الذي يستدعي `useTranslation()` يتراوح حجمه بين 26 و 79 كيلوبايت؛ بينما يبلغ حجم نفس المكون مع `useIntlayer()` ما يعادل 6.9 كيلوبايت فقط.
 - **تباطؤ الإماهة**: يقفز زمن الإماهة إلى 27.7 مللي ثانية في إعداد `dynamic`، نظرا لأن نسخة i18next تبدأ العمل وتعالج طلبات الخلفية على العميل قبل أن يتمكن React من إتمام عملية الإماهة.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> الجدول الكامل، لكل مكتبة وكل استراتيجية، في [تقرير قياس الأداء لـ Next.js](https://intlayer.org/ar/doc/benchmark/nextjs).
+
 ### النتائج على TanStack Start (`react-i18next`)
 
 نفس التطبيق التجريبي على TanStack Start مع استخدام `react-i18next` الصافي لإبعاد التأثيرات الخاصة بـ Next.js.
@@ -141,8 +156,19 @@ author: aymericzip
 - يسجل وضع `static` في Intlayer نسبة **0% تسرب للصفحات** افتراضيا لأن القواميس التي تستوردها مكونات الصفحة فقط هي التي تُحزم في الكود. وتفعيل `importMode: 'dynamic'` يزيل تسرب اللغات أيضا.
 - **حجم المكونات**: 24-27 كيلوبايت مع `react-i18next` مقابل 6-8 كيلوبايت مع Intlayer. حيث يربط `useTranslation()` كل مكون بالنسخة العالمية لـ i18next.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> الجدول الكامل في [تقرير قياس الأداء لـ TanStack Start](https://intlayer.org/ar/doc/benchmark/tanstack).
+
 ## ما سبب هذا الفارق؟ النسخة العالمية مقابل القواميس المترجمة
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 صُمم `i18next` في عام 2012 كبيئة تشغيل (runtime): تحتفظ نسخة عالمية واحدة بمخزن الموارد، وتتولى الإضافات توسيعها، بينما تبحث دالة `t()` عن المفاتيح أثناء العرض. هذه البنية تمنحه مرونة واسعة ولكنها تفرض تكلفة باهظة في الحجم:
 
 ```bash
@@ -166,7 +192,13 @@ author: aymericzip
                 └── page.tsx     # يجب أن تعرف مسبقا أنها تحتاج ["common", "about"]
 ```
 
-لا يمكن للنسخة العالمية التنبؤ بالمفاتيح التي سيطلبها المكون، لذا تضطر لتحميل جميع مساحات الأسماء التي تحددها لها. والتحسين يفرض عليك **أنت** تقسيم الملفات، و**أنت** تحديد مساحات الأسماء لكل صفحة، و**أنت** الحفاظ على دقة هذه القائمة كلما تم نقل المكونات. وكما توضح [ملاحظات الاختبار](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md): "الحفاظ على أمان الأنواع ومعرفة أي مساحة أسماء يجب تضمينها في كل صفحة يعد كابوسا حقيقيا".
+لا يمكن للنسخة العالمية التنبؤ بالمفاتيح التي سيطلبها المكون، لذا تضطر لتحميل جميع مساحات الأسماء التي تحددها لها. والتحسين يفرض عليك **أنت** تقسيم الملفات، و**أنت** تحديد مساحات الأسماء لكل صفحة، و**أنت** الحفاظ على دقة هذه القائمة كلما تم نقل المكونات.
+
+التكلفة تتضخم على محورين في آن واحد، الصفحات واللغات:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
+وكما توضح [ملاحظات الاختبار](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md): "الحفاظ على أمان الأنواع ومعرفة أي مساحة أسماء يجب تضمينها في كل صفحة يعد كابوسا حقيقيا".
 
 يتخلص Intlayer من النسخة العالمية تماما. يُعلن المحتوى بجوار المكون مباشرة، ويقوم المترجم بحل مخطط الاعتماديات في وقت البناء:
 
@@ -193,7 +225,8 @@ author: aymericzip
 
 ### الإعداد
 
-**next-i18next (App Router)**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```ts fileName="src/app/i18n/server.ts"
 import { createInstance } from "i18next";
@@ -228,7 +261,8 @@ export const initI18next = async (
 
 بالإضافة إلى كتابة `I18nProvider` لجانب العميل يعيد بناء نفس النسخة، مع إعداد `generateStaticParams` وتحديد مصفوفة `namespaces` في كل صفحة.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -264,9 +298,13 @@ const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
 export default LocaleLayout;
 ```
 
+</Tab>
+</Tabs>
+
 ### مكون العميل
 
-**react-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="react-i18next" value="i18next">
 
 ```json fileName="src/locales/en/about.json"
 {
@@ -304,7 +342,8 @@ export const Counter = () => {
 
 > الصفحة التي تعرض هذا المكون ملزمة بتحميل مساحة أسماء `about`، ودالة `t("counter.label")` تبقى نصا عاديا مجردا من أنواع التحقق ما لم تقم بتوسيع `CustomTypeOptions`.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -345,9 +384,13 @@ export const Counter = () => {
 
 يتمتع كل من `label` و `increment` بأنواع TypeScript صارمة ودقيقة؛ أي خطأ كتابي يظهر فورا كخطأ برمجي، والترجمة المفقودة تتسبب في إيقاف عملية البناء وتنبيهك فوريا.
 
+</Tab>
+</Tabs>
+
 ### مكون الخادم المتزامن
 
-**next-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -366,7 +409,8 @@ export const ServerCounter = ({ t, locale, count }: ServerCounterProps) => (
 
 يجب أن تستدعي الصفحة دالة `i18n.getFixedT(locale, "about")` وتقوم بتمرير `t` و `locale` عبر الخصائص (Props).
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -385,6 +429,9 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## احتفظ بواجهة i18next، واحصل على أداء Intlayer العالي
 
 لست بحاجة إلى إعادة كتابة مكوناتك للحصول على نتائج الأداء المذكورة أعلاه. محولات التوافق `@intlayer/i18next`، `@intlayer/react-i18next`، و `@intlayer/next-i18next` جاهزة للعمل كبديل فوري: `useTranslation`، `t()`، `<Trans>`، صيغ الجمع، ولواحق السياق تواصل العمل بسلاسة، بينما يقدم المترجم قواميس Intlayer المحسنة في الخلفية.
@@ -415,18 +462,85 @@ export default defineConfig({
 
 ## متى تختار كل منهما؟
 
-- **اختر i18next**: إذا كنت بحاجة حتمية إلى نظامه البيئي من الإضافات (مكتشفات محددة، خلفيات خاصة، ICU، Locize)، أو تقوم بالتدويل خارج بيئة React أيضا (خدمات Node، جافاسكريبت نقية، أطر عمل أخرى)، أو كان فريقك يتقنه بالفعل، أو كانت منصة الترجمة تتطلب ملفات `locales/{lng}/{ns}.json`. ولكن خصص وقتا كافيا لإدارة مساحات الأسماء والخلفيات البرمجية ومطابقة المسارات إذا كان الأداء يهمك.
-- **اختر Intlayer**: إذا كنت تريد **محتوى مرتبطا بالمكونات**، و**أنواع TypeScript صارمة**، و**اكتشاف الأخطاء والترجمات الناقصة وقت البناء**، و**تحسينا تلقائيا للحزم والتحميل الكسول دون تعقيدات**، مع تبديل لغات فوري، ومكونات خادم متزامنة، وأدوات تحرير مدمجة (محرر مرئي، CMS، ترجمة بالذكاء الاصطناعي، خادم MCP). وهو ملائم بامتياز لقواعد الأكواد المعيارية وأنظمة التصميم (Design Systems).
-- **اختر محولات `@intlayer/*-i18next`**: إذا كان لديك تطبيق يعمل بالفعل على i18next وتريد جني فوائد تقليص الحجم وسرعة الاستجابة دون إعادة كتابة الأكواد.
+<AccordionGroup>
+<Accordion header="اختر i18next">
+
+إذا كنت بحاجة حتمية إلى نظامه البيئي من الإضافات (مكتشفات محددة، خلفيات خاصة، ICU، Locize)، أو تقوم بالتدويل خارج بيئة React أيضا (خدمات Node، جافاسكريبت نقية، أطر عمل أخرى)، أو كان فريقك يتقنه بالفعل، أو كانت منصة الترجمة تتطلب ملفات `locales/{lng}/{ns}.json`. ولكن خصص وقتا كافيا لإدارة مساحات الأسماء والخلفيات البرمجية ومطابقة المسارات إذا كان الأداء يهمك.
+
+</Accordion>
+<Accordion header="اختر Intlayer">
+
+أنت تبحث عن **محتوى محدد بنطاق المكونات**، و**TypeScript صارم**، و**أخطاء المفاتيح المفقودة في وقت البناء**، و**Tree-shaking وتحميل كسول بدون عناء**، وتبديل فوري للغة، ومكونات خادم متزامنة، وأدوات تحرير مدمجة ([المحرر المرئي](https://intlayer.org/ar/doc/concept/editor)، [نظام إدارة المحتوى CMS](https://intlayer.org/ar/doc/concept/cms)، [الترجمة بالذكاء الاصطناعي](https://intlayer.org/ar/doc/concept/auto-fill)، [خادم MCP](https://intlayer.org/ar/doc/mcp-server)). مناسب بشكل خاص لقواعد الأكواد البرمجية النمطية الكبيرة وأنظمة التصميم.
+
+</Accordion>
+<Accordion header="اختر محولات @intlayer/*-i18next">
+
+أنت تستخدم i18next بالفعل وتريد مكاسب الحزمة وسرعة الاستجابة دون إعادة كتابة مكوناتك. تظل ملفات `locales/{lng}/{ns}.json` الخاصة بك هي مصدر الحقيقة الأساسي. تم قياسها جنبًا إلى جنب في [i18next مقابل @intlayer/i18next](https://intlayer.org/ar/blog/i18next-vs-intlayer-i18next).
+
+</Accordion>
+</AccordionGroup>
+
+## الأسئلة الشائعة (FAQ)
+
+<FAQ>
+
+<Question title="لماذا تعد i18next أثقل بكثير مقارنة بالمكتبات الأخرى؟">
+
+تم تصميمها كبيئة تشغيل لا تعتمد على إطار عمل معين: مثيل عام، وخط معالجة للمكونات الإضافية، ومخزن موارد، وحلال مفاتيح. يتم تجميع هذه المرونة بالكامل في كل حزمة. المكون الفارغ الذي يستورد المكتبة فقط يكلف **19.7 KB gzip** مع `next-i18next` مقابل **5.5 KB** مع `next-intlayer`، وتُدفع هذه التكلفة في كل صفحة بغض النظر عن حجم محتواك.
+
+</Question>
+
+<Question title="هل يحل التحميل الكسول عبر الواجهة الخلفية المشكلة؟">
+
+إنه يحل مشكلة حجم البايتات، وليس زمن الانتقال. الانتقال إلى `i18next-resources-to-backend` يوفر ~49 كيلوبايت لكل صفحة ولكنه يضيف رحلة ذهاب وإياب عبر الشبكة عند تبديل اللغة: **123 مللي ثانية** في إعداد `dynamic` و **185 مللي ثانية** في `scoped-static`، مقابل **3-4 مللي ثانية** مع Intlayer. كما يقفز وقت الترطيب (Hydration) إلى 27.7 مللي ثانية لأن المثيل يقوم بحل واجهته الخلفية قبل أن تتمكن React من الترطيب.
+
+</Question>
+
+<Question title="هل يمكنني الوصول إلى 0% تسرب مع i18next؟">
+
+نعم، باستخدام `scoped-dynamic`: مساحة اسم واحدة لكل مسار، وواجهة خلفية للموارد، وخريطة من الصفحة إلى مساحة الاسم تتم صيانتها يدويًا. يستقر الحجم عند 163.4 كيلوبايت لكل صفحة على Next.js، وهو ما يزال **+22 كيلوبايت** فوق 141.3 كيلوبايت لـ Intlayer التي لم تتطلب أي إعداد. انظر [تحسين الحزمة](https://intlayer.org/ar/doc/concept/bundle-optimization).
+
+</Question>
+
+<Question title="هل يجب علي إعادة كتابة مكوناتي للترحيل؟">
+
+لا. تحتفظ `@intlayer/i18next` و `@intlayer/react-i18next` و `@intlayer/next-i18next` بـ `useTranslation` و `t()` و `<Trans>` و `{{interpolation}}` وصيغ الجمع `_one` / `_other` ولاحقات السياق و `returnObjects`. سطر إضافي واحد في `next.config.ts` أو `vite.config.ts`. خطوة بخطوة في [دليل الترحيل لـ next-i18next](https://intlayer.org/ar/doc/migration/next-i18next).
+
+</Question>
+
+<Question title="ماذا يحدث للمكونات الإضافية لـ i18next الخاصة بي؟">
+
+يتم قبول الواجهات الخلفية وأدوات اكتشاف اللغة ولكنها تظل خاملة: لم يعد هناك شيء لتحميله أو اكتشافه في وقت التشغيل. يصبح اكتشاف اللغة إعداد التوجيه الخاص بـ Intlayer (بادئة URL، ملف تعريف الارتباط، الترويسة). إذا كان تطبيقك يجلب الترجمات من نظام إدارة محتوى (CMS) وقت الطلب، فاستخدم [Intlayer CMS](https://intlayer.org/ar/doc/concept/cms) أو أوامر `intlayer pull` / `push` بدلاً من ذلك.
+
+</Question>
+
+</FAQ>
 
 ## مقارنات ذات صلة
 
-- [next-intl مقابل Intlayer](https://intlayer.org/ar/blog/next-intl-vs-intlayer) (نفس اختبار الأداء)
-- [Lingui مقابل Intlayer](https://intlayer.org/ar/blog/lingui-vs-intlayer) (نفس اختبار الأداء)
-- [اختبار أداء vue-i18n مقابل Intlayer](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-benchmark) (نفس اختبار الأداء)
-- [next-i18next مقابل next-intl مقابل Intlayer](https://intlayer.org/ar/blog/next-i18next-vs-next-intl-vs-intlayer)
-- [react-i18next مقابل react-intl مقابل Intlayer](https://intlayer.org/ar/blog/react-i18next-vs-react-intl-vs-intlayer)
+نفس المعيار، مكتبات أخرى:
+
+- [next-intl vs Intlayer](https://intlayer.org/ar/blog/next-intl-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/ar/blog/lingui-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-benchmark)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/ar/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/ar/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+المزيد حول i18next:
+
+- [i18next مقابل @intlayer/i18next](https://intlayer.org/ar/blog/i18next-vs-intlayer-i18next)، المحولات مقاسة على نفس التطبيق
 - [هل عفا عليه الزمن i18next؟](https://intlayer.org/ar/blog/is-i18next-outdated)
+- [استخدام Intlayer مع i18next](https://intlayer.org/ar/blog/intlayer-with-i18next) و [مع react-i18next](https://intlayer.org/ar/blog/intlayer-with-react-i18next)
+- [كيفية تدويل تطبيق Next.js باستخدام next-i18next](https://intlayer.org/ar/blog/nextjs-internationalization-using-next-i18next)
+
+الوثائق المرجعية:
+
+- [تقرير قياس الأداء لـ Next.js](https://intlayer.org/ar/doc/benchmark/nextjs) و [تقرير قياس الأداء لـ TanStack Start](https://intlayer.org/ar/doc/benchmark/tanstack)
+- محولات التوافق: [i18next](https://intlayer.org/ar/doc/compatibility/i18next)، [react-i18next](https://intlayer.org/ar/doc/compatibility/react-i18next)، [next-i18next](https://intlayer.org/ar/doc/compatibility/next-i18next)
+- أدلة الترحيل: [i18next](https://intlayer.org/ar/doc/migration/i18next)، [react-i18next](https://intlayer.org/ar/doc/migration/react-i18next)، [next-i18next](https://intlayer.org/ar/doc/migration/next-i18next)
+- [تحسين الحزمة](https://intlayer.org/ar/doc/concept/bundle-optimization) و [مترجم Intlayer](https://intlayer.org/ar/doc/compiler)
+- [i18n لكل مكون مقابل المركزية](https://intlayer.org/ar/blog/per-component-vs-centralized-i18n)
+- [i18n المعتمدة على المترجم مقابل التصريحية](https://intlayer.org/ar/blog/compiler-vs-declarative-i18n)
 
 ## نجوم GitHub