@intlayer/docs 5.5.10 → 5.5.11

package/blog/ar/intlayer_with_react-i18next.md

@@ -0,0 +1,346 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: Intlayer وreact-i18next
+description: قارن بين React باستخدام react-i18next و Intlayer
+keywords:
+  - react-i18next
+  - i18next
+  - Intlayer
+  - التدويل
+  - التوثيق
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-i18next
+---
+
+# React Internationalization (i18n) with react-i18next and Intlayer
+
+## Overview
+
+- **Intlayer** يساعدك في إدارة الترجمة عبر **ملفات إعلان المحتوى على مستوى المكون**.
+- **react-i18next** هو دمج شائع لـ React مع **i18next** يقدم وظائف مثل `useTranslation` لجلب السلاسل المحلية في مكوناتك.
+
+عندما يتم دمجها، يمكن لـ Intlayer **تصدير** القواميس بتنسيق **i18next-compatible JSON** بحيث يمكن لـ react-i18next **استهلاكها** في وقت التشغيل.
+
+## Why Use Intlayer with react-i18next?
+
+ملفات إعلان المحتوى الخاصة بـ **Intlayer** تقدم تجربة مطور أفضل لأنها:
+
+1. **مرنة في مكان الملف**  
+   ضع كل ملف إعلان محتوى بجانب المكون الذي يحتاجه. تسمح لك هذه البنية بالحفاظ على الترجمات متواجدة بجوار بعضها البعض، مما يمنع الترجمات اليتيمة عند نقل المكونات أو حذفها.
+
+   ```bash codeFormat="typescript"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts # ملف إعلان المحتوى
+               └── index.tsx
+   ```
+
+   ```bash codeFormat="esm"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.mjs # ملف إعلان المحتوى
+               └── index.mjx
+   ```
+
+   ```bash codeFormat="cjs"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.cjs # ملف إعلان المحتوى
+               └── index.cjx
+   ```
+
+   ```bash codeFormat="json"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.json # ملف إعلان المحتوى
+               └── index.jsx
+   ```
+
+2. **ترجمات مركزة**  
+   يجمع ملف إعلان محتوى واحد جميع الترجمات اللازمة لمكون، مما يجعل من السهل اكتشاف الترجمات الناقصة.  
+   مع TypeScript، ستحصل حتى على أخطاء في وقت الترجمة إذا كانت الترجمات مفقودة.
+
+## Installation
+
+في مشروع Create React App، قم بتثبيت هذه الاعتمادات:
+
+```bash
+# مع npm
+npm install intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# مع yarn
+yarn add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# مع pnpm
+pnpm add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+### What Are These Packages?
+
+- **intlayer** – واجهة سطر الأوامر والمكتبة الأساسية لإدارة تكوينات i18n، وإعلانات المحتوى، وبناء مخارج القواميس.
+- **react-intlayer** – دمج خاص بـ React مع Intlayer، يوفر بشكل ملحوظ بعض النصوص لأتمتة بناء القواميس.
+- **react-i18next** – مكتبة دمج خاصة بـ React لـ i18next، تشمل وظيفة `useTranslation`.
+- **i18next** – الإطار الأساسي لمعالجة الترجمة.
+- **i18next-resources-to-backend** – واجهة خلفية لـ i18next تستورد الموارد JSON ديناميكيًا.
+
+## Configuring Intlayer to Export i18next Dictionaries
+
+قم بإنشاء (أو تحديث) `intlayer.config.ts` في جذر مشروعك:
+
+```typescript title="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    // أضف كما تريد من اللغات
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    // أخبر Intlayer لإنشاء JSON متوافق مع i18next
+    dictionaryOutput: ["i18next"],
+
+    // اختر دليلًا لمخرجات الموارد المولدة
+    // سيتم إنشاء هذا المجلد إذا لم يكن موجودًا بعد.
+    i18nextResourcesDir: "./i18next/resources",
+  },
+};
+
+export default config;
+```
+
+> **ملاحظة**: إذا كنت لا تستخدم TypeScript، يمكنك إنشاء هذا الملف كـ `.cjs`، `.mjs`، أو `.js` (انظر [مستندات Intlayer](https://intlayer.org/ar/doc/concept/configuration) للحصول على التفاصيل).
+
+## Building the i18next Resources
+
+بمجرد أن تكون إعلانات المحتوى موجودة (في القسم التالي)، قم بتشغيل **أمر بناء Intlayer**:
+
+```bash
+# مع npm
+npx run intlayer build
+```
+
+```bash
+# مع yarn
+yarn intlayer build
+```
+
+```bash
+# مع pnpm
+pnpm intlayer build
+```
+
+> سيولد هذا موارد i18next الخاصة بك داخل دليل `./i18next/resources` بشكل افتراضي.
+
+قد يبدو الناتج النموذجي كما يلي:
+
+```bash
+.
+└── i18next
+    └── resources
+       ├── en
+       │   └── my-content.json
+       ├── fr
+       │   └── my-content.json
+       └── es
+           └── my-content.json
+```
+
+حيث يتم استخدام كل مفتاح إعلان **Intlayer** كـ **مساحة اسم i18next** (على سبيل المثال، `my-content.json`).
+
+## Importing Dictionaries into Your react-i18next Configuration
+
+لتحميل هذه الموارد ديناميكيًا في وقت التشغيل، استخدم [`i18next-resources-to-backend`](https://www.npmjs.com/package/i18next-resources-to-backend). على سبيل المثال، قم بإنشاء ملف `i18n.ts` (أو `.js`) في مشروعك:
+
+```typescript title="i18n.ts"
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  // مكون إضافي react-i18next
+  .use(initReactI18next)
+  // تحميل الموارد ديناميكيًا
+  .use(
+    resourcesToBackend((language: string, namespace: string) => {
+      // قم بضبط مسار الاستيراد إلى دليل الموارد الخاص بك
+      return import(`../i18next/resources/${language}/${namespace}.json`);
+    })
+  )
+  // تهيئة i18next
+  .init({
+    // اللغة الاحتياطية
+    fallbackLng: "en",
+
+    // يمكنك إضافة خيارات إعداد i18next الأخرى هنا، انظر:
+    // https://www.i18next.com/overview/configuration-options
+  });
+
+export default i18next;
+```
+
+```javascript title="i18n.js"
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  .use(initReactI18next)
+  .use(
+    resourcesToBackend(
+      (language, namespace) =>
+        import(`../i18next/resources/${language}/${namespace}.json`)
+    )
+  )
+  .init({
+    fallbackLng: "en",
+  });
+
+export default i18next;
+```
+
+ثم، في ملف **الجذر** أو **الفهرس** الخاص بك (مثل `src/index.tsx`)، قم باستيراد إعداد `i18n` هذا **قبل** عرض `App`:
+
+```typescript
+import React from "react";
+import ReactDOM from "react-dom/client";
+// تهيئة i18n قبل أي شيء آخر
+import "./i18n";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+## Creating and Managing Your Dictionarys
+
+يستخرج Intlayer الترجمات من "ملفات إعلان المحتوى" الموجودة في أي مكان ضمن `./src` (بشكل افتراضي).  
+إليك مثال بسيط في TypeScript:
+
+```typescript title="src/components/MyComponent/MyComponent.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  // سيكون "المفتاح" مساحة اسم i18next الخاصة بك (مثل "my-component")
+  key: "my-component",
+  content: {
+    // كل مكالمة "t" هي عقدة ترجمة منفصلة
+    heading: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    description: t({
+      en: "My i18n description text...",
+      fr: "Ma description en i18n...",
+      es: "Mi descripción en i18n...",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+إذا كنت تفضل JSON أو `.cjs` أو `.mjs`، راجع [مستندات Intlayer](https://intlayer.org/ar/doc/concept/content).
+
+> بشكل افتراضي، تتطابق إعلانات المحتوى الصحيحة مع نمط امتداد الملف:
+
+> `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`
+
+## Using the Translations in React Components
+
+بعد **بناء** موارد Intlayer الخاصة بك وتكوين react-i18next، يمكنك استخدام وظيفة `useTranslation` من **react-i18next** مباشرة.  
+على سبيل المثال:
+
+```tsx title="src/components/MyComponent/MyComponent.tsx"
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * "namespace" i18next هو المفتاح من Intlayer في "MyComponent.content.ts"
+ * لذلك سنمرر "my-component" إلى useTranslation().
+ */
+const MyComponent: FC = () => {
+  const { t } = useTranslation("my-component");
+
+  return (
+    <div>
+      <h1>{t("heading")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+> لاحظ أن دالة `t` تشير إلى **المفاتيح** داخل JSON الذي تم إنشاؤه. بالنسبة لإدخال محتوى Intlayer المسمى `heading`، ستستخدم `t("heading")`.
+
+## Optional: Integrate with Create React App Scripts (CRACO)
+
+يوفر **react-intlayer** نهجًا يعتمد على CRACO للتكوينات المخصصة وبناء خادم التطوير. إذا كنت ترغب في دمج خطوة بناء Intlayer بسلاسة، يمكنك:
+
+1. **تثبيت react-intlayer** (إذا لم تقم بذلك):
+   ```bash
+   npm install react-intlayer --save-dev
+   ```
+2. **تعديل نصوص `package.json` الخاصة بك** لاستخدام نصوص `react-intlayer`:
+
+   ```jsonc
+   "scripts": {
+     "start": "react-intlayer start",
+     "build": "react-intlayer build",
+     "transpile": "intlayer build"
+   }
+   ```
+
+   > تعتمد نصوص `react-intlayer` على [CRACO](https://craco.js.org/). يمكنك أيضًا تنفيذ إعداد خاص بك استنادًا إلى مكون Intlayer craco. [انظر المثال هنا](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
+
+الآن، عند تشغيل `npm run build` أو `yarn build` أو `pnpm build`، يتم تفعيل كل من بناء Intlayer وCRA.
+
+## TypeScript Configuration
+
+يوفر **Intlayer** **تعريفات نوعية تلقائية** لمحتوياتك. لضمان أن TypeScript يأخذها بعين الاعتبار، أضف **`types`** (أو `types` إذا قمت بتكوينها بشكل مختلف) إلى مصفوفة **include** في `tsconfig.json` الخاصة بك:
+
+```json5 title="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", "types"],
+}
+```
+
+> سيتيح ذلك لـ TypeScript استنتاج شكل الترجمات لديك للحصول على إكمال أفضل للأكواد واكتشاف الأخطاء.
+
+## Git Configuration
+
+يوصى بـ **تجاهل** الملفات والمجلدات المولدة تلقائيًا من Intlayer. أضف هذا السطر إلى `.gitignore`:
+
+```plaintext
+# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
+.intlayer
+i18next
+```
+
+لا تقم عادةً بتعهد هذه الموارد أو نواتج البناء الداخلية لـ `.intlayer`، لأنها يمكن أن تتولد في كل عملية بناء.

package/blog/ar/intlayer_with_react-intl.md

@@ -0,0 +1,325 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: Intlayer وreact-intl
+description: دمج Intlayer مع react-intl لتطبيق React
+keywords:
+  - react-intl
+  - Intlayer
+  - التدويل
+  - التوثيق
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-intl
+---
+
+# React Internationalization (i18n) مع **react-intl** و Intlayer
+
+هذا الدليل يوضح كيفية دمج **Intlayer** مع **react-intl** لإدارة الترجمات في تطبيق React. ستقوم بإعلان المحتوى القابل للترجمة الخاص بك باستخدام Intlayer ثم استهلاك تلك الرسائل مع **react-intl**، وهي مكتبة شهيرة من نظام [FormatJS](https://formatjs.io/docs/react-intl) البيئي.
+
+## نظرة عامة
+
+- **Intlayer** يسمح لك بتخزين الترجمات في ملفات إعلان المحتوى على مستوى المكون (JSON، JS، TS، إلخ) داخل مشروعك.
+- **react-intl** يوفر مكونات React وhooks (مثل `<FormattedMessage>` و `useIntl()`) لعرض السلاسل المحلية.
+
+من خلال تكوين Intlayer لـ **تصدير** الترجمات بتنسيق متوافق مع **react-intl**، يمكنك تلقائيًا **توليد** و **تحديث** ملفات الرسائل التي يتطلبها `<IntlProvider>` (من react-intl).
+
+---
+
+## لماذا استخدام Intlayer مع react-intl؟
+
+1. **إعلانات محتوى لكل مكون**  
+   يمكن أن تعيش ملفات إعلان محتوى Intlayer بجانب مكونات React الخاصة بك، مما يمنع "ترجمات يتيمة" إذا تم نقل المكونات أو إزالتها. على سبيل المثال:
+
+   ```bash
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts   # إعلان محتوى Intlayer
+               └── index.tsx          # مكون React
+   ```
+
+2. **ترجمات مركزية**  
+   كل ملف إعلان محتوى يجمع جميع الترجمات التي يحتاجها مكون. هذا مفيد بشكل خاص في مشاريع TypeScript: يمكن اكتشاف الترجمات المفقودة في **وقت التجميع**.
+
+3. **بناء تلقائي وتجديد**  
+   كلما قمت بإضافة أو تحديث الترجمات، يقوم Intlayer بتجديد ملفات JSON للرسائل. يمكنك بعد ذلك تمرير هذه إلى `<IntlProvider>` لـ react-intl.
+
+---
+
+## التثبيت
+
+في مشروع React النموذجي، قم بتثبيت ما يلي:
+
+```bash
+# مع npm
+npm install intlayer react-intl
+
+# مع yarn
+yarn add intlayer react-intl
+
+# مع pnpm
+pnpm add intlayer react-intl
+```
+
+### لماذا هذه الحزم؟
+
+- **intlayer**: CLI و مكتبة أساسية تفحص إعلانات المحتوى، تدمجها، وتبني المخرجات القاموس.
+- **react-intl**: المكتبة الرئيسية من FormatJS التي توفر `<IntlProvider>`، `<FormattedMessage>`، `useIntl()` وغيرها من العناصر الأساسية في التدويل.
+
+> إذا لم يكن لديك React مثبتًا بالفعل، ستحتاج إلى ذلك أيضًا (`react` و `react-dom`).
+
+## تكوين Intlayer لتصدير رسائل react-intl
+
+في جذر مشروعك، أنشئ **`intlayer.config.ts`** (أو `.js`، `.mjs`، `.cjs`) كما يلي:
+
+```typescript title="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    // أضف العديد من اللغات كما ترغب
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    // يخبر Intlayer بتوليد ملفات الرسائل لـ react-intl
+    dictionaryOutput: ["react-intl"],
+
+    // الدليل الذي سيكتب فيه Intlayer ملفات JSON للرسائل الخاصة بك
+    reactIntlMessagesDir: "./react-intl/messages",
+  },
+};
+
+export default config;
+```
+
+> **ملاحظة**: للحصول على امتدادات ملفات أخرى (`.mjs`، `.cjs`، `.js`) ، راجع [وثائق Intlayer](https://intlayer.org/ar/doc/concept/configuration) للحصول على تفاصيل الاستخدام.
+
+---
+
+## إنشاء إعلانات محتوى Intlayer الخاصة بك
+
+يقوم Intlayer بفحص قاعدة الشيفرة الخاصة بك (بشكل افتراضي، تحت `./src`) للملفات المطابقة لـ `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
+إليك مثال **TypeScript**:
+
+```typescript title="src/components/MyComponent/index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  // "key" يصبح المفتاح الرئيسي للرسالة في ملف JSON الخاص بك react-intl
+  key: "my-component",
+
+  content: {
+    // كل استدعاء لـ t() يعلن عن حقل قابل للترجمة
+    helloWorld: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    description: t({
+      en: "This is a description",
+      fr: "Ceci est une description",
+      es: "Esta es una descripción",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+إذا كنت تفضل JSON أو نكهات JS مختلفة (`.cjs`، `.mjs`)، فإن الهيكل مشابه إلى حد كبير - راجع [وثائق Intlayer حول إعلان المحتوى](https://intlayer.org/ar/doc/concept/content).
+
+---
+
+## بناء رسائل react-intl
+
+لتوليد ملفات JSON الفعلية للرسائل لـ **react-intl**، قم بتشغيل:
+
+```bash
+# مع npm
+npx intlayer dictionaries build
+
+# مع yarn
+yarn intlayer build
+
+# مع pnpm
+pnpm intlayer build
+```
+
+هذا يقوم بمسح جميع ملفات `*.content.*`، وتجميعها، وكتابة النتائج إلى الدليل المحدد في **`intlayer.config.ts`** - في هذا المثال، `./react-intl/messages`.  
+يمكن أن يبدو المخرجات النموذجية كما يلي:
+
+```bash
+.
+└── react-intl
+    └── messages
+        ├── en.json
+        ├── fr.json
+        └── es.json
+```
+
+كل ملف هو كائن JSON تُطابق **المفاتيح العليا** الخاصة به كل **`content.key`** من إعلاناتك. تعكس **المفاتيح الفرعية** (مثل `helloWorld`) الترجمات المعلنة داخل تلك العنصر المحتوى.
+
+على سبيل المثال، قد يبدو **en.json** كما يلي:
+
+```json fileName="react-intl/messages/en/my-component.json"
+{
+  "helloWorld": "Hello World",
+  "description": "This is a description"
+}
+```
+
+---
+
+## تهيئة react-intl في تطبيق React الخاص بك
+
+### 1. تحميل الرسائل التي تم إنشاؤها
+
+حيث تقوم بتكوين مكون الجذر لتطبيقك (مثل `src/main.tsx` أو `src/index.tsx`)، ستحتاج إلى:
+
+1. **استيراد** ملفات الرسالة المولدة (إما بشكل ثابت أو ديناميكي).
+2. **تقديم**ها إلى `<IntlProvider>` من `react-intl`.
+
+طريقة بسيطة هي استيرادها **ثابتًا**:
+
+```typescript title="src/index.tsx"
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { IntlProvider } from "react-intl";
+import App from "./App";
+
+// استيراد ملفات JSON من المخرجات التي تم بنائها.
+// بدلاً من ذلك، يمكنك الاستيراد ديناميكيًا بناءً على لغة المستخدم المختارة.
+import en from "../react-intl/messages/en.json";
+import fr from "../react-intl/messages/fr.json";
+import es from "../react-intl/messages/es.json";
+
+// إذا كان لديك آلية لاكتشاف لغة المستخدم، قم بتعيينها هنا.
+// للبساطة، دعنا نختار الإنجليزية.
+const locale = "en";
+
+// جمع الرسائل في كائن (أو اختيارها ديناميكيًا)
+const messagesRecord: Record<string, Record<string, any>> = {
+  en,
+  fr,
+  es,
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <IntlProvider locale={locale} messages={messagesRecord[locale]}>
+      <App />
+    </IntlProvider>
+  </React.StrictMode>
+);
+```
+
+> **نصيحة**: لمشاريع حقيقية، قد ترغب في:
+>
+> - تحميل الرسائل JSON بشكل ديناميكي وقت التشغيل.
+> - استخدام الكشف عن اللغة المبني على البيئة أو على المتصفح أو على حساب المستخدم.
+
+### 2. استخدام `<FormattedMessage>` أو `useIntl()`
+
+بمجرد تحميل رسائلك في `<IntlProvider>`, يمكن لأي مكون طفل استخدام react-intl للوصول إلى السلاسل المحلية. هناك طريقتان رئيسيتان:
+
+- **مكون `<FormattedMessage>`**
+- **خطاف `useIntl()`**
+
+---
+
+## استخدام الترجمات في مكونات React
+
+### النهج A: `<FormattedMessage>`
+
+للاستخدام السريع في السطر:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+export default function MyComponent() {
+  return (
+    <div>
+      <h1>
+        {/* "my-component.helloWorld" يشير إلى المفتاح من en.json، fr.json، إلخ. */}
+        <FormattedMessage id="my-component.helloWorld" />
+      </h1>
+
+      <p>
+        <FormattedMessage id="my-component.description" />
+      </p>
+    </div>
+  );
+}
+```
+
+> يجب أن تطابق خاصية **`id`** في `<FormattedMessage>` **المفتاح الرئيسي** (`my-component`) بالإضافة إلى أي مفاتيح فرعية (`helloWorld`).
+
+### النهج B: `useIntl()`
+
+للاستخدام الأكثر ديناميكية:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { useIntl } from "react-intl";
+
+export default function MyComponent() {
+  const intl = useIntl();
+
+  return (
+    <div>
+      <h1>{intl.formatMessage({ id: "my-component.helloWorld" })}</h1>
+      <p>{intl.formatMessage({ id: "my-component.description" })}</p>
+    </div>
+  );
+}
+```
+
+كلا النهجين صالحة - اختر النمط الذي يناسب تطبيقك.
+
+---
+
+## تحديث أو إضافة ترجمات جديدة
+
+1. **أضف أو عدل** المحتوى في أي ملف `*.content.*`.
+2. أعد تشغيل `intlayer build` لتجديد ملفات JSON تحت `./react-intl/messages`.
+3. سوف يلتقط React (و react-intl) التحديثات في المرة القادمة التي تعيد فيها بناء أو تحميل تطبيقك.
+
+---
+
+## تكامل TypeScript (اختياري)
+
+إذا كنت تستخدم TypeScript، يمكن أن يقوم Intlayer **بتوليد تعريفات الأنواع** لترجماتك.
+
+- تأكد من أن `tsconfig.json` يتضمن مجلد `types` الخاص بك (أو أي مجلد ناتج ينشئه Intlayer) في مصفوفة `"include"`.
+
+```json5
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", "types"],
+}
+```
+
+يمكن أن تساعد الأنواع المولدة في الكشف عن الترجمات المفقودة أو المفاتيح غير الصالحة في مكونات React الخاصة بك في وقت التجميع.
+
+---
+
+## تكوين Git
+
+من الشائع **استبعاد** العناصر الناتجة الداخلية لـ Intlayer من التحكم في الإصدارات. في ملف `.gitignore` الخاص بك، أضف:
+
+```plaintext
+# تجاهل العناصر الناتجة من بناء intlayer
+.intlayer
+react-intl
+```
+
+اعتمادًا على سير عملك، قد ترغب أيضًا في تجاهل أو الالتزام بالقواميس النهائية في `./react-intl/messages`. إذا كان خط أنابيب CI/CD لديك يجددها، يمكنك تجاهلها بأمان؛ وإلا، التزم بها إذا كنت بحاجة إليها لعمليات نشر الإنتاج.