@intlayer/docs 9.4.2 → 9.4.3

package/blog/ar/is_next-intl_outdated.md

@@ -0,0 +1,363 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: هل أصبحت مكتبة next-intl قديمة في عام 2026؟
+description: أصبحت next-intl الخيار الشائع لـ Next.js App Router. لكنها ما زالت تثقل حزم التشغيل وتتطلب إدارة يدوية معقدة للمساحات الاسمية.
+keywords:
+  - next-intl
+  - Intlayer
+  - تدويل المواقع
+  - i18n
+  - Next.js
+  - حجم الحزمة
+  - مدونة
+  - JavaScript
+slugs:
+  - blog
+  - is-next-intl-outdated
+author: aymericzip
+---
+
+# هل أصبحت مكتبة next-intl قديمة في عام 2026؟
+
+حين أطلقت Vercel نظام App Router وألغت الدعم الأصلي للتدويل الذي كان موجوداً في Pages Router، بادرت `next-intl` سريعاً لملء الفراغ. وبفضل التوثيق المميز من Jan Amann والدعم السريع للـ App Router، باتت المكتبة الخيار الافتراضي لمجتمع المطورين.
+
+فلماذا يُطرح السؤال حول ملائمتها اليوم؟
+
+**السبب أن معمارية الويب تقدمت خطوات واسعة خلال السنوات الثلاث الماضية، بينما بقيت الأسس الجوهرية لـ `next-intl` دون تغيير يُذكر.**
+
+في حين اتجهت Next.js نحو React Server Components (RSC)، والتدفق البرمجي (Streaming)، والتحسينات المعتمدة على المترجم، لا تزال `next-intl` تتعامل مع التدويل كمهمة تُعالج أثناء وقت التشغيل: عبر تمرير كائنات JSON ضخمة لمزودي العميل، وتشغيل منسقات ICU في المتصفح، والاعتماد على التقسيم اليدوي للمساحات الاسمية لكبح جماح الحزم.
+
+<TOC/>
+
+## النقاط الرئيسية
+
+**تباطؤ وتيرة التطوير:**
+
+خلال الأشهر الـ 12 الماضية، سجلت `next-intl` قرابة 187 تعديلاً (commit)، انصب معظمها على التوافق مع إصدارات Next.js وإصلاحات الأخطاء الطفيفة.
+
+**تكلفة تشغيلية على العميل:**
+
+إدراج `NextIntlClientProvider` مقترناً بـ `useTranslations()` يضيف حوالي 12.8 كيلوبايت مضغوطة بـ gzip (نحو 51 كيلوبايت minified) قبل إظهار أي نص، أي نحو 3 أضعاف ما تتطلبه `next-intlayer` (4.3 كيلوبايت).
+
+**تسريب للمحتوى بنسبة تقارب 90%:**
+
+في الإعدادات الشائعة، **89.8% من بيانات الترجمة المحملة في صفحة معينة تخص مسارات أخرى**. زيارة صفحة `/contact` تعني تنزيل نصوص `/pricing` ولوحة التحكم دون حاجة.
+
+**إدارة يدوية متعبة للمساحات الاسمية:**
+
+لتفادي تضخم الحزم، يلزم توزيع وربط المساحات الاسمية يدوياً لكل مسار، مما يعرض التطبيقات لخطر فقدان النصوص في بيئة الإنتاج.
+
+**شراكة تجارية موجهة:**
+
+بصفتها شريكاً رسمياً لمنصة Crowdin، لا يملك المشروع دافعاً قوياً لتوفير أداة ترجمة محلية مجانية بالذكاء الاصطناعي مدمجة في الـ CLI.
+
+## الصيانة مقارنة بالأدوات الحديثة
+
+حركة التعديلات خلال الاثني عشر شهراً الماضية:
+
+| المستودع              | النجوم                                                                                                                                                 | إجمالي التعديلات                                                                                                                                                    | التعديلات / سنة                                                                                                                                                    | آخر تعديل                                                                                                                                    |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `amannn/next-intl`    | [![stars](https://img.shields.io/github/stars/amannn/next-intl?style=for-the-badge&label=stars)](https://github.com/amannn/next-intl/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/amannn/next-intl?style=for-the-badge&label=commits)](https://github.com/amannn/next-intl/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/amannn/next-intl?style=for-the-badge&label=%2Fyear)](https://github.com/amannn/next-intl/commits)       | [![last](https://img.shields.io/github/last-commit/amannn/next-intl?style=for-the-badge)](https://github.com/amannn/next-intl/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+أبرز مؤشرات العام المنصرم:
+
+- `amannn/next-intl`: **187 تعديلاً** (تحديثات وتعديلات طفيفة).
+- `aymericzip/intlayer`: **4,343 تعديلاً** (تطوير مستمر للمترجم، وإضافات المحررات، وخوادم MCP، ومحركات الترجمة).
+
+[![Star History Chart](https://api.star-history.com/chart?repos=amannn%2Fnext-intl%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#amannn/next-intl&aymericzip/intlayer)
+
+الاستقرار ميزة بلا شك، لكن مفاهيم التدويل تغيرت: فالمترجمات أصبحت تتخلص من النصوص غير المطلوبة أثناء التجميع، والذكاء الاصطناعي يتولى الترجمة في مراحل البناء، والمطورون يعتمدون على خوادم اللغات والوكلاء الأذكياء. نموذج يعتمد كلياً على وقت التشغيل يجد صعوبة في الاستفادة من هذه القفزات.
+
+## قياس الأداء في Next.js 16 App Router
+
+تم إجراء الاختبار على تطبيق App Router قياسي يضم 10 مسارات و10 لغات:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
+<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;"
+/>
+
+> تم الاختبار في متصفحات حقيقية باستخدام ضغط gzip الإنتاجي. التفاصيل في [تقرير مقارنة أداء Next.js](https://intlayer.org/ar/doc/benchmark/nextjs).
+
+### حجم المكتبات المجرد
+
+حجم الشيفرة قبل تضمين ملفات النصوص:
+
+| المكتبة                | الحجم (gzip) | الحجم المصغر (Minified) |
+| ---------------------- | ------------ | ----------------------- |
+| `next-intl@4.9.1`      | 12.8 KB      | 51.0 KB                 |
+| `next-intlayer@8.7.12` | **4.3 KB**   | **13.3 KB**             |
+
+### وزن الصفحة وتسريب المحتوى
+
+| الإعداد                | متوسط JS / صفحة (gz) | تسريب اللغات | تسريب الصفحات الأخرى | متوسط المكون (gz) |
+| ---------------------- | -------------------- | ------------ | -------------------- | ----------------- |
+| الأساس (دون i18n)      | 150.8 KB             | 0.0%         | 0.0%                 | 0.7 KB            |
+| `next-intl` (ثابت)     | 163.5 KB             | 4.2%         | **89.8%**            | 20.5 KB           |
+| `next-intl` (ديناميكي) | 163.4 KB             | 9.7%         | **89.9%**            | 20.5 KB           |
+| `next-intlayer`        | **152.1 KB**         | **0.0%**     | **0.0%**             | **7.2 KB**        |
+
+### أسباب التسريب بين المسارات
+
+في معظم مشاريع `next-intl`، يقوم المخطط الجذري (Root Layout) بجلب كافة الرسائل دفعة واحدة:
+
+```tsx fileName="app/[locale]/layout.tsx"
+export default async function RootLayout({ children, params }) {
+  const messages = await getMessages();
+
+  return (
+    <html>
+      <body>
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+بسبب تمرير `messages` لمزود العميل في أعلى الشجرة، يُجبر المتصفح على تنزيل كل الترجمات في كل زيارة. فالزائر لصفحة `/login` يحمل أيضاً نصوص المساعدة والشروط ولوحة التحكم.
+
+يمكن معالجة ذلك بتوزيع ملفات JSON على مساحات اسمية محددة، غير أن إدارتها يدوياً مستهلكة للوقت وتتسبب في إغفال بعض الترجمات.
+
+تتجاوز Intlayer هذا القصور عبر التحليل الثابت: حيث يستخلص [مترجم Intlayer](https://intlayer.org/ar/doc/compiler) النصوص المستخدمة فعلياً في المسار المحدد، لتنخفض نسبة التسريب إلى **0.0%**.
+
+## لماذا تعطل next-intl ميزة الـ Tree-shaking؟
+
+تعتمد واجهة المكتبة على نصوص ديناميكية يتم طلبها في وقت التشغيل:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="next-intl" value="next-intl">
+
+```tsx fileName="UserProfile.tsx"
+"use client";
+
+import { useTranslations } from "next-intl";
+
+export function UserProfile() {
+  const t = useTranslations("UserProfile");
+
+  return <h2>{t("heading")}</h2>;
+}
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```tsx fileName="UserProfile.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function UserProfile() {
+  const { heading } = useIntlayer("user-profile");
+
+  return <h2>{heading}</h2>;
+}
+```
+
+  </Tab>
+</Tabs>
+
+لا يمكن لـ Turbopack أو Webpack معرفة المفاتيح التي ستُطلب من `UserProfile`. ولتجنب الأخطاء، **تضطر أدوات الحزم إلى تضمين المساحة الاسمية بأكملها في حزمة العميل**. بينما تتيح الخصائص المفككة في Intlayer للمترجم تتبع الاستخدام الفعلي وحذف كل ما لم يُستخدم. اقرأ المزيد في [تحسين الحزم](https://intlayer.org/ar/doc/concept/bundle-optimization).
+
+## مقارنة تجربة التطوير
+
+### ملفات JSON البعيدة مقابل التجاور المباشر
+
+في `next-intl`، تقبع النصوص في مجلدات `messages/` بعيداً عن الكود. بينما تتيح Intlayer وضع تعريفات المحتوى ملاصقة للمكونات:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="next-intl" value="next-intl">
+
+```json fileName="messages/en.json"
+{
+  "authModal": {
+    "title": "Sign in to your account",
+    "submitButton": "Continue"
+  }
+}
+```
+
+```json fileName="messages/ar.json"
+{
+  "authModal": {
+    "title": "تسجيل الدخول إلى حسابك",
+    "submitButton": "متابعة"
+  }
+}
+```
+
+```tsx fileName="AuthModal.tsx"
+import { useTranslations } from "next-intl";
+
+export const AuthModal = () => {
+  const t = useTranslations("authModal");
+  return (
+    <form>
+      <h2>{t("title")}</h2>
+      <button type="submit">{t("submitButton")}</button>
+    </form>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="AuthModal.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "auth-modal",
+  content: {
+    title: t({
+      en: "Sign in to your account",
+      ar: "تسجيل الدخول إلى حسابك",
+    }),
+    submitButton: t({
+      en: "Continue",
+      ar: "متابعة",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```tsx fileName="AuthModal.tsx"
+import { useIntlayer } from "next-intlayer";
+
+export const AuthModal = () => {
+  const { title, submitButton } = useIntlayer("auth-modal");
+  return (
+    <form>
+      <h2>{title}</h2>
+      <button type="submit">{submitButton}</button>
+    </form>
+  );
+};
+```
+
+  </Tab>
+</Tabs>
+
+عند حذف أو تعديل مكان `AuthModal.tsx`، يتم نقل أو حذف ملف المحتوى المقترن به تلقائياً.
+
+### الإكمال التلقائي مقابل أمان الأنواع الصارم
+
+يوفر تعريف `IntlMessages` في `next-intl` إكمالاً تلقائياً بحسب اللغة الأساسية:
+
+```ts fileName="global.d.ts"
+import en from "./messages/en.json";
+
+type Messages = typeof en;
+
+declare global {
+  interface IntlMessages extends Messages {}
+}
+```
+
+لكن الفحص يقتصر على لغة واحدة فقط. إذا حُذف مفتاح من `ar.json`، فلن يصدر TypeScript أي تحذير، وسينجح البناء، بينما سيواجه المستخدمون مساحات فارغة.
+
+تستنتج Intlayer الأنواع من كافة ملفات المحتوى. وتفعيل [`strictMode`](https://intlayer.org/ar/doc/concept/configuration) يوقف عملية البناء عند غياب الترجمة في أي لغة مستهدفة.
+
+### أدوات التطوير والذكاء الاصطناعي
+
+| الميزة                               | `next-intl`  | Intlayer                                                             |
+| ------------------------------------ | ------------ | -------------------------------------------------------------------- |
+| **إضافة VS Code**                    | ❌ غير متوفر | ✅ [إضافة رسمية](https://intlayer.org/ar/doc/vs-code-extension)      |
+| **خادم اللغة (LSP)**                 | ❌ غير متوفر | ✅ [LSP مخصص](https://intlayer.org/ar/doc/lsp)                       |
+| **خادم MCP لوكلاء الذكاء الاصطناعي** | ❌ غير متوفر | ✅ [خادم MCP مدمج](https://intlayer.org/ar/doc/mcp-server)           |
+| **مهارات الوكلاء (Skills)**          | ❌ غير متوفر | ✅ [مهارات متكاملة](https://intlayer.org/ar/doc/agent_skills)        |
+| **نظام CMS مرئي**                    | ❌ غير متوفر | ✅ [مجاني ومفتوح المصدر](https://intlayer.org/ar/doc/concept/editor) |
+
+يمكّن وجود خوادم LSP وMCP المساعدات الذكية من فهم البنية الكاملة للمشروع وترقية الترجمات بدقة واقتدار.
+
+## العلاقة مع Crowdin
+
+ترتبط `next-intl` بشراكة رسمية مع Crowdin. الرعايات أمر جيد لدعم المشاريع المفتوحة، لكنها تؤثر على أولويات التطوير: فالمكتبة المصممة لتتكامل مع منصات خارجية ليس من مصلحتها توفير أداة ترجمة محلية ومجانية بالذكاء الاصطناعي داخل الـ CLI.
+
+تأتي Intlayer بهذه الأدوات مدمجة:
+
+**التعبئة الآلية بالذكاء الاصطناعي محلياً (`intlayer fill`):**
+
+تكتشف النصوص الناقصة وتترجمها باستخدام مفاتيحك الخاصة من OpenAI أو Anthropic أو Mistral أو Gemini.
+
+**نظام إدارة محتوى مرئي ذاتي الاستضافة:**
+
+استخدم [Intlayer CMS](https://intlayer.org/ar/doc/concept/cms) لتمكين الفرق غير التقنية من مراجعة النصوص مع الحفظ المباشر في Git.
+
+**ترخيص مفتوح:**
+
+المنظومة بالكامل متاحة تحت رخصة Apache 2.0.
+
+## متى تظل next-intl خياراً مناسباً؟
+
+<AccordionGroup>
+<Accordion header="الحاجة لصيغ ICU MessageFormat المعقدة">
+
+إذا كان مشروعك يعتمد بشكل مكثف على صياغات الجمع والترتيب المتقدمة، فإن محرك ICU في `next-intl` يقدم أداءً مستقراً.
+
+</Accordion>
+<Accordion header="الاعتماد المسبق على منصة Crowdin">
+
+للفرق التي تدير بالفعل كافة عمليات التدويل عبر Crowdin، فإن `next-intl` تتناغم بسلاسة.
+
+</Accordion>
+<Accordion header="الأنظمة القائمة والمستقرة">
+
+إذا كان التطبيق يؤدي مهامه بكفاءة وحجم الحزمة لا يشكل عائقاً، فلا حاجة ملحة للتغيير.
+
+</Accordion>
+</AccordionGroup>
+
+## كيف أطور إعدادات next-intl الحالية في مشروعي؟
+
+توفر Intlayer حزمة توافق مباشرة تحتفظ بنفس تواقيع دوال وخطافات (hooks) مكتبة `next-intl` مثل `useTranslations` و`getTranslations` ومساعدات التوجيه. لن تحتاج إلى إعادة كتابة صفحاتك أو مكوناتك للاستفادة من مزايا التحسين على مستوى المترجم.
+
+يتم الإعداد عبر أمر واحد فقط:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+تقوم هذه الأداة التفاعلية بما يلي تلقائياً:
+
+1. تثبيت حزمة التوافق `@intlayer/next-intl`.
+2. ضبط الأسماء المستعارة (aliases) في أداة الحزم لتوجه استدعاءاتك الحالية (`next-intl` و`next-intl/server`) مباشرة نحو Intlayer، مما يتيح لك إزالة المكتبة القديمة من ملف `package.json`.
+3. تفعيل تشخيصات خادم اللغة (LSP) داخل المحرر، والتخلص من تسريب ملفات الترجمة بين المسارات (tree-shaking كامل)، وتشغيل أدوات الترجمة الآلية بالذكاء الاصطناعي محلياً دون تعديلات معقدة.
+
+للاطلاع على الخطوات التفصيلية، راجع أدلتنا المتخصصة:
+
+- **توافق فوري:** حافظ على استدعاءات `useTranslations` عبر [طبقة التوافق مع next-intl](https://intlayer.org/ar/doc/compatibility/next-intl).
+- **دليل التحويل:** حول ملفات JSON القديمة إلى قواميس معرفة بالأنواع عبر [دليل الانتقال من next-intl](https://intlayer.org/ar/doc/migration/next-intl).
+- **الاستخدام المختلط:** احتفظ بـ `next-intl` في الواجهة أثناء [استخدام Intlayer مع next-intl](https://intlayer.org/ar/blog/intlayer-with-next-intl) للاستفادة من الترجمة المحلية بالذكاء الاصطناعي.
+
+قس حجم وتسريب تطبيقك باستخدام [ماسح SEO للتدويل المجاني](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## مقالات مقترحة
+
+- [مقارنة أداء Next.js i18n: تقييم تفصيلي](https://intlayer.org/ar/doc/benchmark/nextjs)
+- [مقارنة next-i18next و next-intl و Intlayer](https://intlayer.org/ar/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [هل أصبحت مكتبة i18next قديمة في 2026؟](https://intlayer.org/ar/blog/is-i18next-outdated)
+- [مزايا التدويل المعتمد على المترجم](https://intlayer.org/ar/blog/compiler-vs-declarative-i18n)