المؤلف:
    إنشاء:2026-06-05آخر تحديث:2026-06-05

    الترحيل من @nuxtjs/i18n إلى Intlayer

    لماذا الترحيل من @nuxtjs/i18n إلى Intlayer؟

    بدلاً من تحميل ملفات JSON ضخمة في صفحاتك، قم بتحميل فقط المحتوى الضروري. يساعد Intlayer على تقليل حجم الحزمة والصفحات بما يصل إلى 50%.

    يسهل تحديد نطاق محتوى التطبيق الصيانة للتطبيقات واسعة النطاق. يمكنك نسخ أو حذف مجلد ميزة واحد دون الحاجة لمراجعة كود المحتوى بالكامل. بالإضافة إلى ذلك، Intlayer مكتوب بشكل كامل لضمان دقة المحتوى الخاص بك.

    Intlayer أيضاً هو الحل ذو التطوير الأكثر نشاطاً في نظام i18n البيئي — تُصلح المشاكل بسرعة، وتُضاف محولات إطار عمل جديدة بانتظام، ويتم تحسين API الأساسي بناءً على ملاحظات الإنتاج الحقيقية.

    يقلل دمج المحتوى السياق المطلوب من نماذج اللغة الكبيرة (LLMs). يأتي Intlayer أيضاً مع مجموعة من الأدوات، مثل CLI لاختبار الترجمات المفقودة، LSP، MCP، ومهارات الوكيل، لجعل تجربة المطور (DX) أكثر سلاسة حتى للوكلاء الذكيين.

    استخدم الأتمتة للترجمة في خط أنابيب CI/CD الخاص بك باستخدام نموذج LLM من اختيارك بتكلفة موفر الذكاء الاصطناعي الخاص بك. يوفر Intlayer أيضاً compiler لأتمتة استخراج المحتوى، بالإضافة إلى منصة ويب لمساعدتك على الترجمة في الخلفية.

    قد يؤدي ربط ملفات JSON الضخمة بالمكونات إلى مشاكل الأداء والاستجابة. يحسّن Intlayer تحميل المحتوى الخاص بك في وقت البناء.

    أكثر من مجرد حل i18n، يوفر Intlayer محرر مرئي ذاتي الاستضافة وCMS كامل لمساعدتك على إدارة محتواك متعدد اللغات في الوقت الفعلي، مما يجعل التعاون مع المترجمين والكتاب والأعضاء الآخرين في الفريق بسيطاً. يمكن تخزين المحتوى محلياً و/أو بعداً.

    استراتيجيات الترحيل

    نظراً لأن @nuxtjs/i18n يعمل بواسطة vue-i18n تحت الغطاء، هناك استراتيجيتان متكاملتان للترحيل إلى Intlayer:

    1. محول التوافق (موصى به للتطبيقات الموجودة) — قم بتثبيت @intlayer/vue-i18n و nuxt-intlayer. يكشف هذا عن نفس API تماماً من vue-i18n ولكن يفوض كل عمل الترجمة إلى Intlayer تحت الغطاء. تحافظ على استدعاءات $t و useI18n() و توجيه Nuxt الموجودة دون تغيير — التغيير الوحيد هو التهيئة.

    2. الترحيل الكامل — استبدل تدريجياً APIs من @nuxtjs/i18n بـ hooks Intlayer الأصلية (useIntlayer) ودمج المحتوى في ملفات .content.ts بجانب المكونات الخاصة بك.

    يغطي هذا الدليل الاستراتيجية 1 أولاً (محول التوافق drop-in)، ثم يرشدك عبر الترحيل الكامل الاختياري.

    جدول المحتويات

    الترحيل السريع

    الخطوات التالية هي الحد الأدنى المطلوب لتشغيل تطبيق Nuxt الموجود على Intlayer بدون تغيير الكود في المكونات.

    1. تثبيت التبعيات

      قم بتثبيت حزم Intlayer الأساسية ومحول التوافق:

      bash
      npx intlayer-cli init --interactive
      العلم --interactive اختياري. استخدم intlayer-cli init إذا كنت وكيل ذكي.
      سيكتشف هذا الأمر بيئتك وسيثبت الحزم المطلوبة. على سبيل المثال:
      bash
      npm install intlayer vue-intlayer nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
      يمكنك الاحتفاظ بـ @nuxtjs/i18n مثبتة بأمان أثناء الترحيل، على الرغم من أنك ستزيلها من تكوين Nuxt قريباً.

    2. تكوين Intlayer

      ينشئ أمر intlayer init ملف intlayer.config.ts بدء. حدثّه ليطابق البيئات المحلية الموجودة لديك وأشر إلى مكوّن syncJSON في ملفات الرسائل الخاصة بك:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";
import { syncJSON } from "@intlayer/sync-json-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // أضف جميع البيئات المحلية الموجودة لديك هنا
    ],
    defaultLocale: Locales.ENGLISH,
  },
  plugins: [
    syncJSON({
      // يطابق صيغة ملاصقات vue-i18n: {name}
      format: "icu",
      source: ({ locale }) => `./locales/${locale}.json`,
      location: "locales",
    }),
  ],
};

export default config;
      source يعيّن بيئة محلية إلى مسار ملف JSON الخاص بها. location يخبر مراقب Intlayer أي مجلد للبحث عن التغييرات. يضمن الخيار format: 'icu' أن الملاصقات يتم تحليلها بشكل صحيح لـ vue-i18n.

    3. تحديث تكوين Nuxt

      استبدل مكوّن @nuxtjs/i18n بـ nuxt-intlayer في nuxt.config.ts الخاص بك. يحقن مكوّن Intlayer تلقائياً أسماء module مستعارة، مما يعني أن استدعاءات import { useI18n } from 'vue-i18n' الموجودة لديك تُعاد توجيهها بشفافية إلى @intlayer/vue-i18n.

      nuxt.config.ts
      export default defineNuxtConfig({
  // أزل '@nuxtjs/i18n'
  modules: ["nuxt-intlayer"],
});
      لا تحتاج بعد الآن لتعريف كائنات تكوين i18n من Nuxt. يجمّع Intlayer جميع القواامس في وقت البناء، معالجة كشف البيئة المحلية والتوجيه وتحميل القاموس بسلاسة.

    هذا كل شيء للترحيل السريع. يعمل تطبيق Nuxt الخاص بك الآن على Intlayer مع الاحتفاظ بكل استدعاء $t و useI18n() سليم.

    الترحيل الكامل

    الخطوات أدناه اختيارية ويمكن إنجازها بشكل تدريجي. تفتح مجموعة ميزات Intlayer الكاملة: محرر مرئي، CMS، ملفات محتوى مكتوبة، ترجمة مدفوعة بالذكاء الاصطناعي، والمزيد.

    1. إعادة تسمية الاستيراد الصريحة (اختياري)

      اختياري

      يتعامل مكوّنات Intlayer بالفعل مع الأسماء المستعارة على مستوى bundler. إذا كنت تفضل جعل التبعية صريحة في ملفات المصدر الخاصة بك، يمكنك إعادة تسمية الاستيرادات يدويياً:

      قبل بعد
      import { useI18n } from 'vue-i18n' import { useI18n } from '@intlayer/vue-i18n'

      هذه بدائل drop-in — لا تغييرات في توقيعات الدالة أو الحجج أو أنواع الإرجاع مطلوبة.

    2. تفعيل أتمتة الترجمة المدفوعة بالذكاء الاصطناعي

      اختياري

      بمجرد توصيل Intlayer، استخدم CLI الخاص به لملء الترجمات المفقودة تلقائياً:

      bash
      # اختبر الترجمات المفقودة (أضف إلى CI)npx intlayer test# ملء الترجمات المفقودة بـ AInpx intlayer fill

      أضف تكوين AI إلى intlayer.config.ts:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";
import { syncJSON } from "@intlayer/sync-json-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
  plugins: [
    syncJSON({
      format: "icu",
      source: ({ locale }) => `./locales/${locale}.json`,
      location: "locales",
    }),
  ],
  ai: {
    apiKey: process.env.OPENAI_API_KEY,
    // provider: "openai",     // افتراضي
    // model: "gpt-4o-mini",   // افتراضي
  },
};

export default config;
      انظر وثائق Intlayer CLI لجميع الخيارات المتاحة.

    ما يمكنك حذفه بعد الترحيل

    بمجرد وضع محول التوافق، يمكن إزالة النموذج التالي:

    الملف / النمط لماذا لم تعد هناك حاجة
    تكوينات i18n في nuxt.config.ts يدير Intlayer التوجيه وتحميل القاموس والبيئات المحلية الافتراضية بناءً على intlayer.config.ts.
    @nuxtjs/i18n من package.json استبدل بالكامل بـ nuxt-intlayer.
    حزم اللغات JSON (locales/*.json) تُحتاج حزم JSON فقط إذا كنت تستخدم مكوّن syncJSON بعد. بمجرد الترحيل إلى ملفات .content.ts يمكنك حذف مجلد JSON.

    عندما تكون جاهزاً للمضي أبعد، يكتشف Intlayer تلقائياً جميع ملفات .content.ts و .content.json في أي مكان في قاعدة الكود الخاصة بك (افتراضياً، في أي مكان داخل ./src). يمكنك وضع ملف my-component.content.ts بجانب MyComponent.vue مباشرة وسيلتقطه Intlayer في وقت البناء بدون تكوين إضافي — لا استيرادات، لا تسجيل، لا حاجة لملف فهرس مركزي. هذا يجعل دمج الترجمات مع الصفحات والمكونات بدون احتكاك تماماً.

    تكوين TypeScript

    يستخدم Intlayer module augmentation لتوفير intellisense TypeScript الكامل لمفاتيح الترجمة الخاصة بك. تأكد من أن tsconfig.json الخاص بك يتضمن الأنواع المُنتجة تلقائياً:

    tsconfig.json
    {  // ... تكوينات TypeScript الموجودة لديك  "include": [    // ... تكوينات TypeScript الموجودة لديك    ".intlayer/**/*.ts", // تضمين الأنواع المُنتجة تلقائياً  ],}

    تكوين Git

    أضف مجلد Intlayer المُنتج إلى .gitignore الخاص بك:

    .gitignore
    # تجاهل الملفات المُنتجة بواسطة Intlayer.intlayer

    اذهب أبعد

    • محرر مرئي — إدارة الترجمات بصرياً في متصفحك: محرر Intlayer المرئي
    • CMS — خارج الخدمة وإدارة المحتوى بعداً: CMS Intlayer
    • VS Code Extension — الحصول على الإكمال التلقائي واكتشاف أخطاء الترجمة في الوقت الفعلي: ملحق Intlayer VS Code
    • مرجع CLI — قائمة كاملة بأوامر CLI: Intlayer CLI
    • Intlayer مع Nuxt — دليل الإعداد الكامل لـ Nuxt: intlayerwithnuxt.md
    • Intlayer مع Vue — دليل الإعداد الكامل لـ Vue: intlayerwithvite+vue.md
    لماذا Intlayer؟