@intlayer/docs 9.5.5 → 9.5.7

package/blog/ar/lingui_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "Lingui مقابل Intlayer: اختبار الأداء والمقارنة لعام 2026"
 description: "مقارنة بين مكتبتي تدويل (i18n) تعتمدان على المترجم تم قياسهما على Next.js وTanStack Start. حجم الحزمة، تسرب المحتوى، حجم المكونات، الترطيب، سرعة تبديل اللغة وتجربة المطور."
 keywords:
@@ -24,6 +24,8 @@ author: aymericzip
 
 # Lingui مقابل Intlayer | مقارنة أداء التدويل (i18n) في React وNext.js
 
+![JavaScript i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 تعد Lingui وIntlayer المكتبتين الوحيدتين في هذا الاختبار اللتين تعتمدان على **مترجم (Compiler)** بدلاً من بيئة تشغيل بحتة (Pure Runtime). تستخرج Lingui الرسائل من وحدات الماكرو في وقت البناء وتقوم بتجميع الكتالوجات لكل لغة. بينما يقوم Intlayer بتجميع القواميس لكل مكون مع تقليم الشجرة (Tree-shaking) لكل لغة. نظرياً، يجب أن تكون النتائج متقاربة، لكن الأرقام توضح أين يختلفان.
 
 البيانات مأخوذة من [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom)، وهي مجموعة اختبارات مفتوحة المصدر تبني التطبيق نفسه مع كل مكتبة وتسجل ما يقوم المتصفح بتنزيله وتنفيذه فعلياً.
@@ -96,6 +98,10 @@ author: aymericzip
 
 ### النتائج على Next.js
 
+اختر المقاييس والمكتبات التي تهمك:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | المكتبة              | الاستراتيجية   | حجم المكتبة (gz) | متوسط JS للصفحة (gz) | تسرب اللغة | تسرب الصفحة | متوسط المكون (gz) | تفاعلية E2E | الترطيب |
 | -------------------- | -------------- | ---------------: | -------------------: | ---------: | ----------: | ----------------: | ----------: | ------: |
 | **base** (بدون i18n) | -              |           0.0 KB |             141.0 KB |       0.0% |        0.0% |            0.9 KB |     13.4 ms | 11.8 ms |
@@ -114,6 +120,15 @@ author: aymericzip
 - **تسرب اللغة المصدرية.** حتى في التهيئات المحسنة، **تتسرب 3-15% من نصوص `en` داخل صفحات `fr`**. تحتفظ وحدات ماكرو Lingui بالرسالة المصدرية كخيار احتياطي، مما يجعلها تستقر في الحزمة بجوار الترجمة. بينما يقوم Intlayer بحل الخيارات الاحتياطية أثناء البناء ويرسل اللغة النشطة فقط.
 - **تضخم حجم المكون في `scoped-dynamic`.** يبلغ متوسط حجم المكون المجمع بمعزل **152.6 كيلوبايت**، لأن كتالوج كل مسار يصبح قابلاً للوصول من المكون الذي يستورده. في المقابل يبلغ متوسط المكون نفسه مع `useIntlayer()` حوالي **6.9 كيلوبايت**.
 
+<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
 
 | المكتبة                    | الاستراتيجية   | حجم المكتبة (gz) | متوسط JS للصفحة (gz) | تسرب اللغة | تسرب الصفحة | متوسط المكون (gz) | تفاعلية E2E | الترطيب |
@@ -135,8 +150,19 @@ author: aymericzip
 - **يمتلك صف `static` في Intlayer نسبة تسرب 0% للصفحة تلقائياً** لأنه لا يتم تضمين سوى القواميس التي تستوردها مكونات الصفحة المعنية. سطر إعداد واحد (`importMode: 'dynamic'`) يزيل تسرب اللغة أيضاً.
 - **مكتبة `@intlayer/lingui`** تحافظ على صياغة ماكرو Lingui وتخدمها من قواميس Intlayer، مما يوفر مكونات أصغر حجماً (12.8 كيلوبايت) وترطيباً أسرع بكثير من Lingui الأصلي. إنها خطوة انتقال ممتازة وليست الوجهة النهائية.
 
+<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).
+
 ## لماذا هذا الفارق؟ مترجمان بوحدتي عمل مختلفتين
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 تعتمد كلتا المكتبتين على الترجمة البرمجية (Compilation)، لكن الفارق يكمن في **ما** تقومان بترجمته.
 
 **يقوم Lingui بتجميع الكتالوجات.** يتم استخراج الماكرو في الكود المصدري إلى ملف `.po` لكل لغة، ثم تجميعه في وحدة JS لكل لغة. وحدة العمل هنا هي **اللغة**. ولتقسيمها بشكل أدق، حسب المسار أو المكون، يلزم إنشاء كتالوجات متعددة وتعديل `lingui.config.ts` والتحميل اليدوي لكل مسار. كائن `I18n` عام، وكل استدعاء لـ `useLingui()` يربط المكون به.
@@ -176,7 +202,9 @@ author: aymericzip
             └── about.content.ts
 ```
 
-لذلك فإن نمط `scoped-dynamic` هو نتاج بناء تلقائي لـ Intlayer، ومشروع تهيئة يدوي معقد لـ Lingui.
+لذلك فإن نمط `scoped-dynamic` هو نتاج بناء تلقائي لـ Intlayer، ومشروع تهيئة يدوي معقد لـ Lingui. وتتسع الفجوة على محورين في وقت واحد، الصفحات واللغات:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 > للحصول على أرقام صف `dynamic`، قم بضبط `dictionary.importMode: 'dynamic'` في ملف `intlayer.config.ts`. راجع [دليل تحسين الحزمة](https://intlayer.org/ar/doc/concept/bundle-optimization).
 
@@ -184,7 +212,8 @@ author: aymericzip
 
 ### الإعداد
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="lingui.config.ts"
 import { defineConfig } from "@lingui/cli";
@@ -215,7 +244,8 @@ export const loadCatalog = async (locale: string) => {
 
 ثم إضافة `@lingui/babel-plugin-lingui-macro` (أو `@lingui/swc-plugin`) لأداة التحزيم، وتشغيل `lingui extract` بعد التعديل، و`lingui compile` قبل البناء، وتغليف الشجرة بـ `<I18nProvider i18n={i18n}>`.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -232,9 +262,12 @@ export default config;
 
 أضف `intlayer()` في `vite.config.ts` (أو `withIntlayer()` في `next.config.ts`) وغلف التطبيق بـ `<IntlayerProvider>`. لا حاجة لأي خطوة استخراج أو تجميع: تُبنى القواميس تلقائياً أثناء عمل أداة التحزيم.
 
+</Tab>
+</Tabs>
 ### المكونات
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```tsx fileName="src/components/Counter.tsx"
 import { useState } from "react";
@@ -258,7 +291,8 @@ export const Counter = () => {
 
 يعيش النص الإنجليزي في المكون؛ ويعيش الفرنسي في `src/locales/fr/messages.po` تحت معرف مجزأ بعد تشغيل `lingui extract`. نسيان تشغيله أو نسيان `compile` يعيد النص بصمت إلى الإنجليزية.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -297,11 +331,14 @@ export const Counter = () => {
 
 توجد كلتا اللغتين في ملف واحد بجوار المكون. غياب ترجمة `fr` يسبب خطأ في البناء، والمفتاح الخاطئ يسبب خطأ في TypeScript.
 
+</Tab>
+</Tabs>
 ### خارج المكونات
 
 البيانات الوصفية (Metadata)، والـ loaders، ودوال الخادم: أي مكان خارج شجرة React.
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { setupI18n } from "@lingui/core";
@@ -324,7 +361,8 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 
 إنشاء كائن `I18n` جديد لكل استدعاء، وتحميل الكتالوج يدوياً، واستخدام `msg` + `i18n._()` بدلاً من `t`. كما تشير [ملاحظات الاختبار](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md)، معرفة متى تستخدم `t` أو `` t` ` `` أو `i18n.t()` أو `msg` أو `<Trans>` "ليس بالأمر البديهي".
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { getIntlayer } from "intlayer";
@@ -336,6 +374,9 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## الاحتفاظ بماكرو Lingui مع قواميس Intlayer
 
 تعد حزمة `@intlayer/lingui` محولاً مباشراً لـ `@lingui/core` و`@lingui/react`. تواصل وحدات الماكرو التجميع كالمعتاد، بينما يتم توفير تنفيذ `i18n._()` من قواميس Intlayer، مع مزامنة ملفات `.po` للاحتفاظ بكتالوجاتك الحالية. تعمل خيارات وصيغ الجمع في ICU بالطريقة نفسها.
@@ -353,16 +394,82 @@ export default defineConfig({
 
 ## متى تختار أياً منهما؟
 
-- **اختر Lingui** إذا كنت بحاجة إلى **ICU MessageFormat** مع وحدات ماكرو نمطية، وكان المترجمون يعملون بملفات **`.po`** مع نظام TMS حالي، وتفضل وجود نصوص المصدر مضمنة داخل JSX، ولا يمانع فريقك إدارة عملية الاستخراج والتجميع وتوزيع الكتالوجات يدوياً.
-- **اختر Intlayer** إذا كنت تريد **محتوى بنطاق المكونات**، و**TypeScript صارماً**، و**أخطاء للمفاتيح المفقودة عند البناء**، و**تقليماً للشجرة وتحميلاً كسولاً تلقائياً بدون إعدادات**، ومكونات خفيفة، وترطيباً سريعاً، وتبديلاً فورياً للغة، وأدوات تحرير مدمجة (محرر مرئي، CMS، ترجمة بالذكاء الاصطناعي، خادم MCP).
-- **اختر `@intlayer/lingui`** إذا كنت تستخدم Lingui حالياً وتريد الانتقال تدريجياً إلى قواميس Intlayer دون تغيير صياغة وحدات الماكرو.
+<AccordionGroup>
+<Accordion header="اختر Lingui">
+
+أنت تريد **ICU MessageFormat** مع وحدات الماكرو المكتوبة، ومترجموك يعملون على ملفات **`.po`** مع مسار TMS حالي، وتفضل السلاسل المصدرية مضمنة داخل JSX، وفريقك مرتاح في إدارة تدفق الاستخراج والترجمة وتقسيم الكتالوجات. وحجم JS لكل صفحة تنافسي للغاية بمجرد إعداد التحميل الكسول.
+
+</Accordion>
+<Accordion header="اختر Intlayer">
+
+أنت تريد **محتوى بنطاق محدد على مستوى المكونات**، و**TypeScript صارماً**، و**أخطاء المفاتيح المفقودة وقت البناء**، و**tree-shaking وتحميلاً كسولاً دون جهد**، ومكونات خفيفة، وتفعيل hydration سريعاً، وتبديلاً فورياً للغة، وأدوات تحرير مدمجة ([المحرر المرئي](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/lingui">
+
+أنت تستخدم Lingui حالياً وتريد الانتقال إلى قواميس Intlayer تدريجياً دون المساس بوحدات الماكرو. تظل كتالوجات `.po` الخاصة بك المصدر الوحيد للحقيقة عبر [إضافة مزامنة PO](https://intlayer.org/ar/doc/compatibility/lingui). تم قياسه جنباً إلى جنب في [Lingui مقابل @intlayer/lingui](https://intlayer.org/ar/blog/lingui-vs-intlayer-lingui).
+
+</Accordion>
+</AccordionGroup>
+
+## الأسئلة الشائعة
+
+<FAQ>
+
+<Question title="Lingui تقوم بالترجمة والتجميع أيضاً، فلماذا تختلف النتائج إلى هذا الحد؟">
+
+لأن وحدة التجميع والترجمة تختلف تماماً. تجمع Lingui **كتالوجاً واحداً لكل لغة**: وكل ما هو دون ذلك (كتالوجات لكل مسار، التحميل الكسول، استبعاد النصوص الاحتياطية من الحزمة) يتطلب تكويناً يدوياً. بينما تجمع Intlayer **قاموساً واحداً لكل مكون**، مما يجعل تحديد نطاق المسار مخرجاً طبيعياً للبناء. لهذا السبب يزن مكون Lingui المترجم بشكل منفصل 58-153 كيلوبايت مقابل 6-8 كيلوبايت فقط في Intlayer.
+
+</Question>
+
+<Question title="لماذا لا يصل تسريب اللغات أبداً إلى 0% مع Lingui؟">
+
+تحتفظ وحدات الماكرو بالرسالة المصدرية كخيار احتياطي (fallback) في وقت التشغيل، مما يؤدي إلى شحن السلسلة الإنجليزية جنباً إلى جنب مع ترجمتها. يسجل الاختبار **3-15% من سلاسل `en` داخل صفحات `fr`** في كل إعداد مُحسَّن. بينما تعالج Intlayer الخيارات الاحتياطية أثناء البناء ولا ترسل سوى اللغة النشطة فقط.
+
+</Question>
+
+<Question title="هل كود JavaScript لكل صفحة في Lingui تنافسي حقاً؟">
+
+نعم، بل إنه يتفوق بفارق ضئيل على TanStack Start: 115.2 كيلوبايت في وضع `dynamic` مقابل 118.6 كيلوبايت لـ Intlayer. فالكتالوجات المجمعة ذات المعرفات المجزأة مدمجة وصغيرة. لكن التكلفة تظهر في جوانب أخرى: الـ Hydration يستغرق 28-34 مللي ثانية مقابل 11-14 مللي ثانية، وتبديل اللغة يستغرق **42 مللي ثانية** في إعداد `scoped-dynamic`.
+
+</Question>
+
+<Question title="هل يجب علي التخلي عن الماكرو للانتقال؟">
+
+لا. يحافظ `@intlayer/lingui` على ترجمة `` t`...` `` و `<Trans>` و `msg` و `plural` و `select` و `selectOrdinal` كما كانت تماماً؛ فقط ما يحلله `i18n._()` هو ما يتغير. احتفظ بـ `@lingui/babel-plugin-lingui-macro` أو `@lingui/swc-plugin` في البناء. راجع [وثائق توافق Lingui](https://intlayer.org/ar/doc/compatibility/lingui).
+
+</Question>
+
+<Question title="ماذا عن خطوات الاستخراج والتجميع؟">
+
+تظل موجودة لوحدات الماكرو، وتختفي تماماً لمحتوى Intlayer الخاص. يتم بناء قواميس `.content.ts` تلقائياً عند تشغيل أداة الحزم، دون الحاجة إلى تشغيل أوامر CLI منفصلة، ويوقف أمر [`intlayer test`](https://intlayer.org/ar/doc/concept/cli) خط أنابيب CI عند وجود أي مفتاح مفقود بدلاً من الرجوع الصامت إلى السلسلة المصدرية.
+
+</Question>
+
+</FAQ>
 
 ## مقارنات ذات صلة
 
-- [next-intl مقابل Intlayer](https://intlayer.org/ar/blog/next-intl-vs-intlayer) (الاختبار نفسه)
-- [i18next مقابل Intlayer](https://intlayer.org/ar/blog/i18next-vs-intlayer) (الاختبار نفسه)
-- [vue-i18n مقابل Intlayer](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer-benchmark) (الاختبار نفسه)
-- [المترجم مقابل التدويل التصريحي](https://intlayer.org/ar/blog/compiler-vs-declarative-i18n)
+نفس الاختبار المرجعي، مكتبات أخرى:
+
+- [next-intl vs Intlayer](https://intlayer.org/ar/blog/next-intl-vs-intlayer)
+- [i18next vs Intlayer](https://intlayer.org/ar/blog/i18next-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)
+
+للمزيد من التفاصيل:
+
+- [Lingui vs @intlayer/lingui](https://intlayer.org/ar/blog/lingui-vs-intlayer-lingui), المحول المقاس على نفس التطبيق
+- [Compiler-driven vs declarative i18n](https://intlayer.org/ar/blog/compiler-vs-declarative-i18n)
+- [Per-component vs centralized i18n](https://intlayer.org/ar/blog/per-component-vs-centralized-i18n)
+- [ICU message format explained](https://intlayer.org/ar/blog/icu-message-format)
+
+وثائق مرجعية:
+
+- [تقرير قياس أداء Next.js](https://intlayer.org/ar/doc/benchmark/nextjs) و [تقرير قياس أداء TanStack Start](https://intlayer.org/ar/doc/benchmark/tanstack)
+- [Compat adapter: Lingui](https://intlayer.org/ar/doc/compatibility/lingui)
+- [تحسين الحزمة](https://intlayer.org/ar/doc/concept/bundle-optimization) و [مترجم Intlayer](https://intlayer.org/ar/doc/compiler)
 
 ## نجوم GitHub
 

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

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl مقابل @intlayer/next-intl: نفس الواجهة البرمجية، حزمة مختلفة"
 description: ما الذي يتغير عندما يتم تقديم واردات next-intl من تطبيق Next.js بواسطة محول التوافق @intlayer/next-intl. تم قياس حجم الحزمة والتسرب وحجم المكون والترطيب على نفس الكود، بالإضافة إلى ما يحتفظ به المحول ويتجاهله ولا يمكنه الاستبدال.
 keywords:
@@ -26,6 +26,8 @@ author: aymericzip
 
 # next-intl مقابل @intlayer/next-intl | نفس الواجهة البرمجية، حزمة مختلفة
 
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/next-intl` هو محول توافقية: يكشف API `next-intl` (`useTranslations`، `getTranslations`، `useLocale`، `t.rich()`، ICU plurals، `NextIntlClientProvider`...) ويقدمه من القواميس المجمعة بواسطة Intlayer. كود التطبيق لا يتغير. الـ bundle يتغير.
 
 تقارن هذه المقالة بين الاثنين على نفس تطبيق Next.js، تم بناؤه مرة مع `next-intl` ومرة مع المحول. تأتي الأرقام من [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom)، مجموعة مفتوحة المصدر تسجل ما يقوم المتصفح بتنزيله فعلياً. إذا كنت تريد مقارنة `next-intl` مقابل Intlayer كمكتبات، اقرأ [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer). هذا يتعلق بما يغيره المحول عندما تحافظ على مكوناتك كما هي.
@@ -109,6 +111,10 @@ const AboutPage = () => {
 
 ### النتائج على Next.js
 
+اختر المقاييس والمكتبات التي تهمك:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | الإعداد                   | الاستراتيجية   | حجم المكتبة (gz) | متوسط صفحة JS (gz) | تسرب Locale | تسرب الصفحة | متوسط المكون (gz) | التفاعل E2E | الماء (Hydration) |
 | ------------------------- | -------------- | ---------------: | -----------------: | ----------: | ----------: | ----------------: | ----------: | ----------------: |
 | **base** (no i18n)        | -              |           0.0 KB |           141.0 KB |        0.0% |        0.0% |            0.9 KB |     13.4 ms |           11.8 ms |
@@ -129,6 +135,15 @@ const AboutPage = () => {
 - **الـ Hydration أسرع بمقدار 2 ms** (12.8 مقابل 14.7 ms): لا توجد كائن رسائل يجب فكّه من حمولة RSC قبل أن يتمكن React من الـ hydrate.
 - **المحول ليس وقت التشغيل الأصلي.** `next-intlayer` يجلس عند **141.3 KB**، +0.3 KB فوق تطبيق الأساس، مع وقت تشغيل 5.5 KB. يحمل المحول سطح API الخاص بـ `next-intl` (`useFormatter`, `t.rich`, محلل ICU) فوق نواة Intlayer، وبالتالي 8.0 KB و +6 KB لكل صفحة. إنه الجسر، وليس الوجهة.
 
+<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 (`use-intl`)
 
 `use-intl` هو النواة المستقلة عن الإطار العمل الخاصة بـ `next-intl`. محولها، `@intlayer/use-intl`، يتبع نفس التصميم مع plugin Vite (`@intlayer/use-intl/plugin`).
@@ -152,11 +167,24 @@ const AboutPage = () => {
 - **تبديل اللغة أسرع.** إعدادات `use-intl` المُحسَّنة تستغرق **13-21 ms** لتحديث `html[lang]`؛ المحول يستغرق **4-9 ms**. عدد أقل من المكونات يعاد تصيير، ولا شيء يتم اختياره مرة أخرى من شجرة الرسائل.
 - **`static` يحتفظ بكل لغة.** صف `static` في المحول يُظهر تسرب لغة بنسبة 49.7%، نفس نسبة Intlayer الأصلية في وضع `static`: يتم تجميع جميع اللغات، فقط قواميس الصفحة. سطر واحد من الإعدادات (`importMode: 'dynamic'`) يزيله.
 
+<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).
+
 ## لماذا تتحرك الأرقام
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 لم يتغير شيء في المكون، لذا تأتي المكاسب بالكامل من ما هو `useTranslations` مرتبطة به.
 
-**مع `next-intl`**، الربط هو مع المزود. يتلقى `NextIntlClientProvider` كائن `messages` كاملًا للإعدادات المحلية؛ كل استدعاء `useTranslations("about")` يقرأ منه. يرى bundler مكونًا واحدًا يستورد hook واحدًا يقرأ سياقًا واحدًا، ولا يمكنه معرفة أن فرع `about` فقط هو المستخدم. تشارك المسارات أدناه نفس كائن الرسائل، لذلك يقرأ عمود تسرب الصفحة ~90% حتى تقسم الملف بنفسك.
+**مع `next-intl`**، الربط هو مع المزود. يتلقى `NextIntlClientProvider` كائن `messages` كاملًا للإعدادات المحلية؛ كل استدعاء `useTranslations("about")` يقرأ منه. يرى bundler مكونًا واحدًا يستورد hook واحدًا يقرأ سياقًا واحدًا، ولا يمكنه معرفة أن فرع `about` فقط هو المستخدم. تشارك المسارات أدناه نفس كائن الرسائل، لذلك يقرأ عمود تسرب الصفحة ~90% حتى تقسم الملف بنفسك, ويتزايد الهدر على محورين في وقت واحد، الصفحات واللغات:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -280,25 +308,106 @@ export default withIntlayer(nextConfig);
 
 ## الحدود التي يجب أن تعرفها قبل البدء
 
-- **يتم نقل إعدادات التوجيه إلى `intlayer.config.ts`.** تحتفظ دوال `createNavigation(routing)` و `createMiddleware(routing)` بتوقيعها لكنها تتجاهل الوسيط: تأتي locales واللغة الافتراضية واستراتيجية البادئة من إعدادات `routing` في Intlayer. إذا كنت تستخدم `pathnames` الموضعية في `next-intl` (`/about` → `/a-propos`)، فإن المحول لا يقوم بالاستيفاء؛ `routing.rewrite` في Intlayer يغطي هذه الحالة لكنها تغيير منفصل.
-- **`useTranslations()` بدون مساحة اسم غير مرتبط.** تحتاج مرحلة التحسين إلى مساحة اسم ثابتة لمعرفة أي قاموس يجب استيراده. لا يزال الاستدعاء الأساسي يعمل، من خلال سجل وقت التشغيل الذي يشير إلى كل قاموس، وهو بالضبط التسرب الذي كنت تحاول إزالته. مرر مساحة الاسم.
-- **المحول ليس مجانيًا.** 8.0 كيلوبايت من وقت التشغيل مقابل 5.5 كيلوبايت لـ `next-intlayer`، و+6-7 كيلوبايت لكل صفحة فوق البناء الأصلي. يغطي سطح API `next-intl`. إذا وصلت إلى نقطة حيث تم نقل كل مكون إلى `useIntlayer`، أسقط المحول.
-- **`messages`, `timeZone`, `now` على المزود يتم تجاهلها.** يتم دعم المنسقات بواسطة `Intl` الأصلي والإعدادات المحلية فقط تؤثر على مخرجاتها؛ إذا كنت تعتمد على منطقة زمنية مفروضة أو `now` ثابتة لتواريخ مستقرة من حيث الترطيب، فتعامل معها في موقع الاستدعاء.
+<AccordionGroup>
+<Accordion header="تنتقل إعدادات التوجيه إلى intlayer.config.ts">
+
+تحتفظ `createNavigation(routing)` و `createMiddleware(routing)` بتوقيعها ولكنها تتجاهل الوسيط: اللغات، واللغة الافتراضية، واستراتيجية البادئة تأتي من إعدادات `routing` في Intlayer. وإذا كنت تستخدم مسارات `pathnames` المترجمة في `next-intl` (`/about` إلى `/a-propos`)، فإن المحول لا يستنبطها؛ بينما يغطي `routing.rewrite` في Intlayer تلك الحالة ولكنه تغيير منفصل.
+
+</Accordion>
+<Accordion header="useTranslations() بدون مساحة أسماء ليست مرتبطة">
+
+تحتاج مرحلة التحسين إلى مساحة أسماء ثابتة لمعرفة أي قاموس يجب استيراده. الاستدعاء البسيط بدون مساحة أسماء يستمر في العمل عبر سجل وقت التشغيل الذي يشير إلى كل قاموس، وهو بالضبط التسريب الذي تحاول التخلص منه. قم بتمرير مساحة الاسم.
+
+</Accordion>
+<Accordion header="المحول ليس مجانياً من حيث الحجم">
+
+8.0 كيلوبايت لوقت التشغيل مقابل 5.5 كيلوبايت لـ `next-intlayer`، و +6-7 كيلوبايت لكل صفحة مقارنة بالبناء الأصلي. هذا هو ثمن توفير واجهة برمجة تطبيقات `next-intl`. وعندما يتم نقل كل مكون إلى `useIntlayer`، قم بإزالة المحول.
+
+</Accordion>
+<Accordion header="يتم تجاهل messages و timeZone و now في المزود">
+
+تعتمد أدوات التنسيق على `Intl` الأصلي وتؤثر اللغة فقط على مخرجاتها. إذا كنت تعتمد على منطقة زمنية مفروضة أو قيمة `now` ثابتة لتواريخ مستقرة أثناء الـ Hydration، فتعامل مع ذلك في موضع الاستدعاء. راجع [تنسيق التاريخ والوقت والأرقام](https://intlayer.org/ar/blog/date-time-number-formatting-locales).
+
+</Accordion>
+</AccordionGroup>
 
 ## متى تستخدم أيًا منها؟
 
-- **ابقَ على `next-intl`** إذا كان تطبيقك صغيرًا، والحزمة ليست مصدر قلق، وفريقك مرتاح لامتلاك المساحات والقيام بـ `pick()` لكل صفحة.
-- **استخدم `@intlayer/next-intl`** إذا كنت تستخدم `next-intl` حالياً وتريد تحسينات الحزمة والتسرب والتنويم، والمفاتيح المكتوبة بشكل صحيح وأدوات CLI / CMS دون إعادة كتابة. هذه هي نقطة الدخول الموصى بها لأي codebase `next-intl` موجود.
-- **استخدم المحلل الأصلي (`next-intlayer`)** للمشاريع الجديدة، أو بعد انتهاء المحول من مهمته. إنها الأخف من بين الثلاثة (5.5 KB، +0.3 KB لكل صفحة) وتفتح مكونات الخادم المتزامنة وملفات `.content.ts` لكل مكون ومجموعة الميزات الكاملة.
+<AccordionGroup>
+<Accordion header="البقاء على next-intl">
+
+إذا كان تطبيقك صغيراً، وحجم الحزمة لا يشكل مصدر قلق، وفريقك مرتاح في إدارة مساحات الأسماء و `pick()` لكل صفحة.
+
+</Accordion>
+<Accordion header="استخدام @intlayer/next-intl">
+
+أنت تستخدم `next-intl` اليوم وتريد مكاسب الحزمة ومنع التسريب والـ Hydration السريع والمفاتيح المكتوبة وأدوات CLI / CMS دون الحاجة إلى إعادة كتابة الكود. هذه هي نقطة البداية الموصى بها لأي قاعدة كود `next-intl` حالية.
+
+</Accordion>
+<Accordion header="الانتقال إلى الحل الأصلي (next-intlayer)">
+
+للمشاريع الجديدة، أو بمجرد أن يكمل المحول مهمته الانتقالية. إنه الأخف بين الخيارات الثلاثة (5.5 كيلوبايت، +0.3 كيلوبايت لكل صفحة) ويفعل مكونات الخادم المتزامنة، وملفات `.content.ts` لكل مكون، وكامل مجموعة الميزات. ابدأ مع [Intlayer مع Next.js](https://intlayer.org/ar/doc/environment/nextjs).
+
+</Accordion>
+</AccordionGroup>
+
+## الأسئلة الشائعة
+
+<FAQ>
+
+<Question title="هل يظل كود تطبيقي دون أي تعديل بالفعل؟">
+
+في Next.js، نعم بالنسبة للمكونات: عدل بناء الاختبار `next.config.ts` و `intlayer.config.ts` فقط. وتصبح `getRequestConfig` في `src/i18n.ts`، وخاصية `messages` في المزود، واستدعاءات `pick()` لكل صفحة بمثابة كود غير مستخدم يمكنك حذفه لاحقاً.
+
+</Question>
+
+<Question title="ماذا يحدث لرسائل ICU؟">
+
+تستمر في العمل. يتم حل `t("key", { count })` و `t.rich()` و `t.markup()` و `select` و `selectordinal` و `#` و `{ts, date, long}` بواسطة محلل ICU الخاص بـ Intlayer. راجع [تنسيق رسائل ICU](https://intlayer.org/ar/blog/icu-message-format).
+
+</Question>
+
+<Question title="لماذا المحول أثقل من next-intlayer الأصلي؟">
+
+لأنه يحمل واجهة برمجة تطبيقات `next-intl` فوق نواة Intlayer: `useFormatter` و `t.rich` ومحلل ICU ومساعدات التنقل. وهذا يعادل 8.0 كيلوبايت مقابل 5.5 كيلوبايت، و +6 كيلوبايت لكل صفحة. إنه جسر عبور وليس الوجهة النهائية.
+
+</Question>
+
+<Question title="هل يمكنني الترحيل مكوناً تلو الآخر؟">
+
+نعم. يمكن لأي مكون الانتقال من `useTranslations("about")` إلى `useIntlayer("about")` مع ملف `.content.ts` مجاور له. تتعايش قواميس JSON و `.content.ts` وتندمج بسلاسة.
+
+</Question>
+
+<Question title="هل تعمل أسماء المسارات المترجمة (pathnames)؟">
+
+ليس من خلال `pathnames` الخاصة بـ `next-intl`: يقبلها المحول لغرض التحقق من الأنواع فقط ولكنه لا يستنبطها. استخدم بدلاً من ذلك `routing.rewrite` من Intlayer.
+
+</Question>
+
+</FAQ>
 
 ## المقارنات ذات الصلة
 
-- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (المكتبات، نفس المعيار)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (نفس سلسلة المحول)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (نفس سلسلة المحول)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/blog/vue-i18n-vs-intlayer-vue-i18n) (نفس سلسلة المحول)
-- [دليل الهجرة: next-intl إلى Intlayer](https://intlayer.org/doc/migration/next-intl)
-- [مرجع محول التوافقية: next-intl](https://intlayer.org/doc/compatibility/next-intl)
+نفس سلسلة المحولات:
+
+- [i18next vs @intlayer/i18next](https://intlayer.org/ar/blog/i18next-vs-intlayer-i18next)
+- [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)
+
+مقارنة مباشرة بين المكتبات:
+
+- [next-intl vs Intlayer](https://intlayer.org/ar/blog/next-intl-vs-intlayer), نفس الاختبار المرجعي
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/ar/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [Is next-intl outdated?](https://intlayer.org/ar/blog/is-next-intl-outdated)
+
+وثائق مرجعية:
+
+- [Compat adapter: next-intl](https://intlayer.org/ar/doc/compatibility/next-intl)
+- [دليل الترحيل: من next-intl إلى Intlayer](https://intlayer.org/ar/doc/migration/next-intl)
+- [تقرير قياس أداء Next.js](https://intlayer.org/ar/doc/benchmark/nextjs) و [تقرير قياس أداء TanStack Start](https://intlayer.org/ar/doc/benchmark/tanstack)
+- [تحسين الحزمة](https://intlayer.org/ar/doc/concept/bundle-optimization) و [مترجم Intlayer](https://intlayer.org/ar/doc/compiler)
+- [المحرر المرئي](https://intlayer.org/ar/doc/concept/editor)، [نظام إدارة المحتوى CMS](https://intlayer.org/ar/doc/concept/cms) و [الترجمة بالذكاء الاصطناعي](https://intlayer.org/ar/doc/concept/auto-fill)
 
 ## الخلاصة