الرئيسيةبيئة اختبارمعرض الأعمالتطبيقوثيقةمدونة
    • Englishالإنجليزية
      EN
    • русскийالروسية
      RU
    • 日本語اليابانية
      JA
    • françaisالفرنسية
      FR
    • 한국어الكورية
      KO
    • 中文الصينية
      ZH
    • españolالإسبانية
      ES
    • Deutschالألمانية
      DE
    • العربيةالعربية
      AR
    • italianoالإيطالية
      IT
    • British Englishالإنجليزية (المملكة المتحدة)
      EN-GB
    • portuguêsالبرتغالية
      PT
    • हिन्दीالهندية
      HI
    • Türkçeالتركية
      TR
    • polskiالبولندية
      PL
    • Indonesiaالإندونيسية
      ID
    • Tiếng Việtالفيتنامية
      VI
    • українськаالأوكرانية
      UK
    /
    تصفية المستندات حسب الإطار
    Alt+←
    لماذا Intlayer؟
    ابدأ
    مفهوم
    • كيف يعمل Intlayer
    • التكوين
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • المحرر المرئي
    • CMS
    • تكامل CI/CD
    • ترجمةجمعتعدادشرطجنسإدراجملفتداخلMarkdownHTMLجلب الوظيفة
    • ملف لكل لغة
    • محرر
    • الملء التلقائي
    • اختبار
    • تحسين الحزمة
    بيئة
    • Next.js 14 وموجه التطبيق
      Next.js 15
      Next.js بدون locale URL
      Next.js وموجه الصفحة
      المترجم
    • Tanstack Start Solid
    • Astro و React
      Astro و Svelte
      Astro و Vue
      Astro و Solid
      Astro و Preact
      Astro و Lit
      Astro و Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt و Vue
    • Vite و Solid
    • SvelteKit
    • Vite و Preact
    • Vite و Vanilla JS
    • Vite و Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native و Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx و React
    Plugins
    • JSON
    • gettext (.po)
    امتداد VS Code
    وكيل
    • خادم MCP
    • مهارات الوكيل
    إصدارات
    • v8
    • v7
    • v6
    مؤشر أداء
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    مدونة
    طرح سؤال
    1. Documentation
    2. لماذا Intlayer؟
    إنشاء:2024-08-14آخر تحديث:2025-09-27
    استخدم هذه الصفحة والموفر AI الذي تريده
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

    تاريخ الإصدارات

    1. "إصدار المترجم"
      v7.3.127‏/11‏/2025
    2. "تحديث الجدول المقارن"
      v5.8.019‏/8‏/2025
    3. "البداية التاريخية"
      v5.5.1029‏/6‏/2025

    تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

    اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية
    تعديل هذه الوثيقة

    إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

    رابط GitHub للتوثيق
    نسخ

    نسخ الـ Markdown من المستند إلى الحافظة

    لماذا يجب عليك التفكير في Intlayer؟

    ما هو Intlayer؟

    Intlayer هو مكتبة تدويل مصممة خصيصًا لمطوري JavaScript. يتيح التصريح عن محتواك في كل مكان في الكود الخاص بك. يقوم بتحويل التصريحات للمحتوى متعدد اللغات إلى قواميس منظمة لتتكامل بسهولة في الكود الخاص بك. باستخدام TypeScript، يجعل Intlayer تطويرك أقوى وأكثر كفاءة.

    لماذا تم إنشاء Intlayer؟

    تم إنشاء Intlayer لحل مشكلة شائعة تؤثر على جميع مكتبات i18n الشائعة مثل next-intl و react-i18next و react-intl و next-i18next و react-intl و vue-i18n.

    تعتمد جميع هذه الحلول نهجًا مركزيًا لسرد وإدارة محتواك. على سبيل المثال:

    bash
    نسخ الكود

    نسخ الكود إلى الحافظة

    .├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    أو هنا باستخدام مساحات الأسماء:

    bash
    نسخ الكود

    نسخ الكود إلى الحافظة

    .├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    هذا النوع من الهندسة يبطئ عملية التطوير ويجعل قاعدة الكود أكثر تعقيدًا في الصيانة لعدة أسباب:

    1. لأي مكون جديد يتم إنشاؤه، يجب عليك:

      • إنشاء المورد الجديد/مساحة الاسم الجديدة في مجلد locales
      • تذكر استيراد مساحة الاسم الجديدة في صفحتك
      • ترجمة محتواك (غالبًا ما يتم ذلك يدويًا عن طريق النسخ/اللصق من موفري الذكاء الاصطناعي)
    2. لأي تغيير يتم إجراؤه على مكوناتك، يجب عليك:

      • البحث عن المورد/مساحة الاسم المتعلقة (بعيدًا عن المكون)
      • ترجمة محتواك
      • التأكد من تحديث محتواك لأي لغة
      • التحقق من أن مساحة الاسم الخاصة بك لا تتضمن مفاتيح/قيم غير مستخدمة
      • التأكد من أن هيكل ملفات JSON الخاص بك هو نفسه لجميع اللغات

    في المشاريع المهنية التي تستخدم هذه الحلول، غالبًا ما يتم استخدام منصات التعريب للمساعدة في إدارة ترجمة محتواك. ومع ذلك، يمكن أن يصبح هذا مكلفًا بسرعة للمشاريع الكبيرة.

    لحل هذه المشكلة، يعتمد Intlayer نهجًا يحدد نطاق محتواك لكل مكون ويبقي محتواك قريبًا من المكون الخاص بك، كما نفعل غالبًا مع CSS (styled-components) أو الأنواع أو التوثيق (storybook) أو اختبارات الوحدة (jest).

    bash
    نسخ الكود

    نسخ الكود إلى الحافظة

    .└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx
    ./components/MyComponent/index.content.ts
    نسخ الكود

    نسخ الكود إلى الحافظة

    import { t, type Dictionary } from "intlayer";
    
    const componentExampleContent = {
      key: "component-example",
      content: {
        myTranslatedContent: t({
          en: "Hello World",
          es: "Hola Mundo",
          fr: "Bonjour le monde",
        }),
      },
    } satisfies Dictionary;
    
    export default componentExampleContent;
    ./components/MyComponent/index.tsx
    نسخ الكود

    نسخ الكود إلى الحافظة

    import { useIntlayer } from "react-intlayer";
    
    export const ComponentExample = () => {
      const { myTranslatedContent } = useIntlayer("component-example");
    
      return <span>{myTranslatedContent}</span>;
    };

    يتيح لك هذا النهج:

    1. زيادة سرعة التطوير

      • يمكن إنشاء ملفات .content.{{ts|mjs|cjs|json}} باستخدام إضافة VSCode
      • يمكن لأدوات الإكمال التلقائي للذكاء الاصطناعي في بيئة التطوير الخاصة بك (مثل GitHub Copilot) مساعدتك في التصريح عن محتواك، مما يقلل من النسخ/اللصق
    2. تنظيف قاعدة الكود الخاصة بك

      • تقليل التعقيد
      • زيادة القابلية للصيانة
    3. تكرار مكوناتك والمحتوى المتعلق بها بسهولة أكبر (مثال: مكونات تسجيل الدخول/التسجيل، إلخ.)

      • عن طريق الحد من مخاطر التأثير على محتوى المكونات الأخرى
      • عن طريق نسخ/لصق محتواك من تطبيق إلى آخر دون تبعيات خارجية
    4. تجنب تلويث قاعدة الكود الخاصة بك بمفاتيح/قيم غير مستخدمة للمكونات غير المستخدمة

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

      • لن يضطر عميل الذكاء الاصطناعي إلى مسح قاعدة الكود بالكامل لمعرفة مكان تنفيذ محتواك
      • يمكن إجراء الترجمات بسهولة بواسطة أدوات الإكمال التلقائي للذكاء الاصطناعي في بيئة التطوير الخاصة بك (مثل GitHub Copilot)
    6. تحسين أداء التحميل

      • إذا تم تحميل المكون بشكل كسول، فسيتم تحميل المحتوى المتعلق به في نفس الوقت

    ميزات إضافية لـ Intlayer

    اظهار جميع محتويات الجدول

    افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح

    الميزة الوصف
    الميزة دعم أطر عمل متعددة

    يتوافق Intlayer مع جميع أطر العمل والمكتبات الرئيسية، بما في ذلك Next.js و React و Vite و Vue.js و Nuxt و Preact و Express والمزيد.
    Feature إدارة المحتوى المدعومة بـ JavaScript

    استغل مرونة JavaScript لتعريف وإدارة محتواك بكفاءة.

    - التصريح عن المحتوى
    الميزة المترجم

    يقوم مترجم Intlayer باستخراج المحتوى تلقائيًا من المكونات وإنشاء ملفات القواميس.

    - المترجم
    Feature ملف التصريح عن المحتوى لكل لغة

    سرع تطويرك عن طريق التصريح عن محتواك مرة واحدة، قبل التوليد التلقائي.

    - ملف التصريح عن المحتوى لكل لغة
    Feature بيئة آمنة النوع (Type-Safe)

    استفد من TypeScript لضمان خلو تعريفات المحتوى والكود الخاص بك من الأخطاء، مع الاستفادة أيضًا من الإكمال التلقائي في بيئة التطوير.

    - تكوين TypeScript
    Feature إعداد مبسط

    ابدأ العمل بسرعة مع الحد الأدنى من التكوين. اضبط إعدادات التدويل والتوجيه والذكاء الاصطناعي والبناء ومعالجة المحتوى بسهولة.

    - استكشف تكامل Next.js
    Feature استرجاع محتوى مبسط

    لا حاجة لاستدعاء وظيفة t لكل قطعة من المحتوى. استرجع كل محتواك مباشرة باستخدام خطاف واحد.

    - تكامل React
    Feature تنفيذ ثابت لمكونات الخادم

    مناسب تمامًا لمكونات خادم Next.js، استخدم نفس التنفيذ لكل من مكونات العميل والخادم، لا حاجة لتمرير وظيفة t عبر كل مكون خادم.

    - مكونات الخادم
    Feature قاعدة كود منظمة

    حافظ على قاعدة الكود الخاصة بك أكثر تنظيمًا: مكون واحد = قاموس واحد في نفس المجلد. الترجمات القريبة من مكوناتها الخاصة تعزز القابلية للصيانة والوضوح.

    - كيف يعمل Intlayer
    Feature توجيه محسن

    دعم كامل لتوجيه التطبيق، والتكيف بسلاسة مع هياكل التطبيقات المعقدة، لـ Next.js و React و Vite و Vue.js وغيرها.

    - استكشف تكامل Next.js
    Feature دعم Markdown

    استيراد وتفسير ملفات اللغة و Markdown عن بعد للمحتوى متعدد اللغات مثل سياسات الخصوصية والتوثيق وما إلى ذلك. تفسير وجعل البيانات الوصفية لـ Markdown متاحة في الكود الخاص بك.

    - ملفات المحتوى
    Feature محرر مرئي ونظام إدارة محتوى مجاني

    يتوفر محرر مرئي ونظام إدارة محتوى مجاني لكتاب المحتوى، مما يزيل الحاجة إلى منصة تعريب. حافظ على محتواك متزامنًا باستخدام Git، أو قم بإخراجه كليًا أو جزئيًا باستخدام نظام إدارة المحتوى.

    - محرر Intlayer
    - نظام إدارة محتوى Intlayer
    Feature محتوى قابل للتقليم (Tree-shakable)

    محتوى قابل للتقليم، مما يقلل من حجم الحزمة النهائية. يحمل المحتوى لكل مكون، مع استبعاد أي محتوى غير مستخدم من حزمتك. يدعم التحميل الكسول لتعزيز كفاءة تحميل التطبيق.

    - تحسين بناء التطبيق
    Feature الرندرة الثابتة

    لا يعيق الرندرة الثابتة.

    - تكامل Next.js
    Feature ترجمة مدعومة بالذكاء الاصطناعي

    حول موقعك الإلكتروني إلى 231 لغة بنقرة واحدة فقط باستخدام أدوات الترجمة المتقدمة المدعومة بالذكاء الاصطناعي من Intlayer باستخدام موفر الذكاء الاصطناعي الخاص بك/مفتاح API.

    - تكامل CI/CD
    - واجهة أوامر Intlayer
    - التعبئة التلقائية
    Feature تكامل خادم MCP

    يوفر خادم MCP (بروتوكول سياق النموذج) لأتمتة بيئة التطوير المتكاملة (IDE)، مما يتيح إدارة محتوى وسلسة وسير عمل i18ن مباشرة داخل بيئة التطوير الخاصة بك.

    - خادم MCP
    Feature إضافة VSCode

    يوفر Intlayer إضافة لـ VSCode لمساعدتك في إدارة المحتوى والترجمات، وبناء القواميس، وترجمة المحتوى، والمزيد.

    - إضافة VSCode
    Feature التوافق التشغيلي

    يتيح التوافق التشغيلي مع react-i18next و next-i18next و next-intl و react-intl.

    - Intlayer و react-intl
    - Intlayer و next-intl
    - Intlayer و next-i18next
    اختبار الترجمات المفقودة (CLI/CI) ✅ CLI: npx intlayer content test (تدقيق متوافق مع CI)

    مقارنة Intlayer مع الحلول الأخرى

    اظهار جميع محتويات الجدول

    افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح

    الميزة intlayer react-i18next react-intl (FormatJS) lingui next-intl next-i18next vue-i18n
    الترجمات بالقرب من المكونات ✅ نعم، المحتوى موجود بجانب كل مكون ❌ لا ❌ لا ❌ لا ❌ لا ❌ لا ✅ نعم - باستخدام Single File Components (SFCs)
    تكامل TypeScript ✅ متقدم، أنواع صارمة يتم توليدها تلقائيًا ⚠️ أساسي؛ يتطلب تكوينًا إضافيًا للأمان ✅ جيد، لكنه أقل صرامة ⚠️ يتطلب تكوين الأنواع ✅ جيد ⚠️ أساسي ✅ جيد (الأنواع متاحة؛ يتطلب أمان المفاتيح إعدادًا)
    كشف الترجمات المفقودة ✅ تمييز أخطاء TypeScript وخطأ/تحذير وقت البناء ⚠️ غالبًا سلاسل نصية بديلة وقت التشغيل ⚠️ سلاسل نصية بديلة ⚠️ يتطلب تكوينًا إضافيًا ⚠️ بديل وقت التشغيل ⚠️ بديل وقت التشغيل ⚠️ بديل/تحذيرات وقت التشغيل (قابلة للتكوين)
    المحتوى الغني (JSX/Markdown/المكونات) ✅ دعم مباشر ⚠️ محدود / استكمال فقط ⚠️ بناء جملة ICU، ليس JSX حقيقيًا ⚠️ محدود ❌ غير مصمم للعقد الغنية ⚠️ محدود ⚠️ محدود (المكونات عبر <i18n-t>، Markdown عبر الإضافات)
    الترجمة المدعومة بالذكاء الاصطناعي ✅ نعم، يدعم موفري ذكاء اصطناعي متعددين. يمكن استخدامه بمفاتيح API الخاصة بك. يأخذ في الاعتبار سياق تطبيقك ونطاق المحتوى ❌ لا ❌ لا ❌ لا ❌ لا ❌ لا ❌ لا
    المحرر المرئي ✅ نعم، محرر مرئي محلي + نظام إدارة محتوى اختياري؛ يمكنه إخراج محتوى قاعدة الكود؛ قابل للتضمين ❌ لا / متاح عبر منصات تعريب خارجية ❌ لا / متاح عبر منصات تعريب خارجية ❌ لا / متاح عبر منصات تعريب خارجية ❌ لا / متاح عبر منصات تعريب خارجية ❌ لا / متاح عبر منصات تعريب خارجية ❌ لا / متاح عبر منصات تعريب خارجية
    التوجيه المترجم ✅ نعم، يدعم المسارات المترجمة بشكل افتراضي (يعمل مع Next.js و Vite) ⚠️ لا يوجد دعم مدمج، يتطلب إضافات (مثل next-i18next) أو تكوين موجه مخصص ❌ لا، تنسيق الرسائل فقط، يجب أن يكون التوجيه يدويًا ⚠️ لا يوجد دعم مدمج، يتطلب إضافات أو تكوينًا يدويًا ✅ مدمج، يدعم App Router مقطع [locale] ✅ مدمج ✅ مدمج
    توليد المسارات الديناميكية ✅ نعم ⚠️ إعداد يدوي أو عبر الإضافات/النظام البيئي ❌ غير متوفر ⚠️ إعداد يدوي أو عبر الإضافات ✅ نعم ✅ نعم ❌ غير متوفر (يوفر Nuxt i18n ذلك)
    الجمع ✅ أنماط تعتمد على التعداد ✅ قابل للتكوين (إضافات مثل i18next-icu) ✅ (ICU) ✅ (ICU/messageformat) ✅ جيد ✅ جيد ✅ قواعد جمع مدمجة
    التنسيق (التواريخ، الأرقام، العملات) ✅ منسقات محسنة (Intl تحت الغطاء) ⚠️ عبر الإضافات أو استخدام Intl المخصص ✅ منسقات ICU ✅ مساعدو ICU/CLI ✅ جيد (مساعدو Intl) ✅ جيد (مساعدو Intl) ✅ منسقات تاريخ/أرقام مدمجة (Intl)
    تنسيق المحتوى ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml قيد العمل) ⚠️ .json ✅ .json, .js ⚠️ .po, .json ✅ .json, .js, .ts ⚠️ .json ✅ .json, .js
    دعم ICU ⚠️ قيد العمل ⚠️ عبر إضافة (i18next-icu) ✅ نعم ✅ نعم ✅ نعم ⚠️ عبر إضافة (i18next-icu) ⚠️ عبر منسق/مترجم مخصص
    مساعدو SEO (hreflang, sitemap) ✅ أدوات مدمجة: مساعدون لـ sitemap و robots.txt والبيانات الوصفية ⚠️ إضافات المجتمع/يدوي ❌ ليس أساسيًا ❌ ليس أساسيًا ✅ جيد ✅ جيد ❌ ليس أساسيًا (يوفر Nuxt i18n المساعدين)
    النظام البيئي / المجتمع ⚠️ أصغر ولكنه ينمو بسرعة وتفاعلي ✅ الأكبر والأكثر نضجًا ✅ كبير ⚠️ أصغر ✅ متوسط الحجم، يركز على Next.js ✅ متوسط الحجم، يركز على Next.js ✅ كبير في نظام Vue البيئي
    الرندرة من جانب الخادم ومكونات الخادم ✅ نعم، مبسط لـ SSR / مكونات خادم React ⚠️ مدعوم على مستوى الصفحة ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة ⚠️ مدعوم على مستوى الصفحة مع إعداد إضافي، ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة ✅ مدعوم، يتطلب إعدادًا ⚠️ مدعوم على مستوى الصفحة ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة ⚠️ مدعوم على مستوى الصفحة ولكن يجب تمرير وظائف t على شجرة المكونات لمكونات الخادم التابعة ✅ SSR عبر Nuxt/Vue SSR (لا يوجد RSC)
    التقليم (تحميل المحتوى المستخدم فقط) ✅ نعم، لكل مكون في وقت البناء عبر إضافات Babel/SWC ⚠️ عادة ما يحمل الكل (يمكن تحسينه باستخدام مساحات الأسماء/تقسيم الكود) ⚠️ عادة ما يحمل الكل ❌ ليس افتراضيًا ⚠️ جزئي ⚠️ جزئي ⚠️ جزئي (مع تقسيم الكود/الإعداد اليدوي)
    التحميل الكسول ✅ نعم، لكل لغة / لكل قاموس ✅ نعم (مثل الخلفيات/مساحات الأسماء عند الطلب) ✅ نعم (تقسيم حزم اللغة) ✅ نعم (استيراد الكتالوج الديناميكي) ✅ نعم (لكل مسار/لكل لغة)، يتطلب إدارة مساحات الأسماء ✅ نعم (لكل مسار/لكل لغة)، يتطلب إدارة مساحات الأسماء ✅ نعم (رسائل لغة غير متزامنة)
    تنقية المحتوى غير المستخدم ✅ نعم، لكل قاموس في وقت البناء ❌ لا، فقط عبر تقسيم مساحات الأسماء يدويًا ❌ لا، يتم تجميع جميع الرسائل المصرح عنها ✅ نعم، يتم اكتشاف المفاتيح غير المستخدمة وإسقاطها عند البناء ❌ لا، يمكن إدارتها يدويًا مع إدارة مساحات الأسماء ❌ لا، يمكن إدارتها يدويًا مع إدارة مساحات الأسماء ❌ لا، ممكن فقط عبر التحميل الكسول اليدوي
    إدارة المشاريع الكبيرة ✅ يشجع على النمطية، مناسب لأنظمة التصميم ⚠️ يتطلب انضباطًا جيدًا في الملفات ⚠️ الكتالوجات المركزية يمكن أن تصبح كبيرة ⚠️ يمكن أن تصبح معقدة ✅ نمطي مع الإعداد ✅ نمطي مع الإعداد ✅ نمطي مع إعداد Vue Router/Nuxt i18n

    نجوم GitHub

    تعد نجوم GitHub مؤشرًا قويًا على شعبية المشروع وثقة المجتمع وأهميته على المدى الطويل. على الرغم من أنها ليست مقياسًا مباشرًا للجودة التقنية، إلا أنها تعكس عدد المطورين الذين يجدون المشروع مفيدًا ويتابعون تقدمه ومن المحتمل أن يتبنوه. لتقدير قيمة المشروع، تساعد النجوم في مقارنة الجاذبية عبر البدائل وتوفر رؤى حول نمو النظام البيئي.

    Star History Chart


    التوافق التشغيلي

    يمكن لـ intlayer أيضًا المساعدة في إدارة مساحات الأسماء الخاصة بـ react-intl و react-i18next و next-intl و next-i18next و vue-i18n.

    باستخدام intlayer، يمكنك التصريح عن المحتوى الخاص بك بتنسيق مكتبة i18n المفضلة لديك، وسيقوم intlayer بإنشاء مساحات الأسماء الخاصة بك في الموقع الذي تختاره (مثال: /messages/{{locale}}/{{namespace}}.json).

    ابدأ
    Alt+→

    في هذه الصفحة

      المناقشات مجهولة الهوية ويتم مراجعتها بانتظام لمعالجة المشكلات الشائعة. لا تتردد في مشاركة أفكار الميزات أو التعليقات على الوثائق أو أي شيء يتعلق بـ Intlayer, نستخدم هذه المدخلات لتشكيل خارطة الطريق وتحسين المنتج.

      .├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx
      .├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx
      .└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx