@intlayer/docs 5.5.11 → 5.6.0

package/docs/ar/intlayer_with_vite+react.md

@@ -1,25 +1,29 @@
 ---
-createdAt: 2025-03-07
-updatedAt: 2025-06-29
-title: ترجمة تطبيق React Native و Expo المحمول الخاص بك (i18n)
-description: اكتشف كيفية جعل تطبيق React Native و Expo المحمول الخاص بك متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته.
+createdAt: 2024-03-07
+updatedAt: 2024-03-07
+title: البدء مع Intlayer في Vite + React
+description: تعلّم كيفية إضافة التدويل (i18n) إلى تطبيق Vite و React الخاص بك باستخدام Intlayer. اتبع هذا الدليل لجعل تطبيقك متعدد اللغات.
 keywords:
   - التدويل
-  - الوثائق
+  - التوثيق
   - Intlayer
   - Vite
   - React
-  - React Native
+  - i18n
   - جافا سكريبت
 slugs:
   - doc
   - environment
-  - react-native-and-expo
----
+  - vite-and-react
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4---
 
 # البدء في التدويل (i18n) باستخدام Intlayer و Vite و React
 
-راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-vite-react-template) على GitHub.
+<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
+
+راجع [نموذج التطبيق](https://github.com/aymericzip/intlayer-vite-react-template) على GitHub.
+
 
 ## ما هو Intlayer؟
 
@@ -28,8 +32,8 @@ slugs:
 مع Intlayer، يمكنك:
 
 - **إدارة الترجمات بسهولة** باستخدام القواميس التصريحية على مستوى المكونات.
-- **توطين البيانات الوصفية والمسارات والمحتوى بشكل ديناميكي**.
-- **ضمان دعم TypeScript** من خلال الأنواع المولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
+- **توطين البيانات الوصفية والمسارات والمحتوى ديناميكيًا**.
+- **ضمان دعم TypeScript** مع الأنواع التي يتم إنشاؤها تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
 - **الاستفادة من الميزات المتقدمة**، مثل الكشف الديناميكي عن اللغة وتبديلها.
 
 ---
@@ -42,17 +46,17 @@ slugs:
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
-npm install --save-dev vite-intlayer
+npm install vite-intlayer --save-dev
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
-pnpm add --save-dev vite-intlayer
+pnpm add vite-intlayer --save-dev
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
-yarn add --save-dev vite-intlayer
+yarn add vite-intlayer --save-dev
 ```
 
 - **intlayer**
@@ -60,14 +64,14 @@ yarn add --save-dev vite-intlayer
   الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، والترجمة، و[إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/get_started.md)، والترجمة البرمجية، و[أوامر CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_cli.md).
 
 - **react-intlayer**
-  الحزمة التي تدمج Intlayer مع تطبيق React. توفر موفري السياق والهوكات لتدويل React.
+  الحزمة التي تدمج Intlayer مع تطبيق React. توفر مزودي السياق (context providers) وخطافات (hooks) لتدويل React.
 
 - **vite-intlayer**
-  تتضمن إضافة Vite لدمج Intlayer مع [مجمّع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط برمجي لاكتشاف اللغة المفضلة للمستخدم، وإدارة الكوكيز، والتعامل مع إعادة توجيه عناوين URL.
+  تتضمن إضافة Vite لدمج Intlayer مع [مجمّع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط (middleware) لاكتشاف اللغة المفضلة للمستخدم، وإدارة الكوكيز، والتعامل مع إعادة توجيه URL.
 
 ### الخطوة 2: تكوين مشروعك
 
-أنشئ ملف تكوين لتحديد لغات تطبيقك:
+قم بإنشاء ملف تكوين لتحديد لغات تطبيقك:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -78,7 +82,7 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // لغات أخرى خاصة بك
+      // لغاتك الأخرى
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -91,14 +95,13 @@ export default config;
 import { Locales } from "intlayer";
 
 /** @type {import('intlayer').IntlayerConfig} */
-// تكوين إعدادات التدويل
 const config = {
   internationalization: {
     locales: [
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // لغات أخرى خاصة بك
+      // لغاتك الأخرى
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -111,14 +114,13 @@ export default config;
 const { Locales } = require("intlayer");
 
 /** @type {import('intlayer').IntlayerConfig} */
-// تكوين إعدادات التدويل
 const config = {
   internationalization: {
     locales: [
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // لغات أخرى خاصة بك
+      // لغاتك الأخرى
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -127,11 +129,11 @@ const config = {
 module.exports = config;
 ```
 
-> من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، إعادة توجيه الوسيط، أسماء ملفات تعريف الارتباط، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [وثائق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
+> من خلال ملف التهيئة هذا، يمكنك إعداد عناوين URL محلية، وإعادة توجيه الوسيط، وأسماء ملفات تعريف الارتباط، وموقع وامتداد إعلانات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التهيئة](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
+### الخطوة 3: دمج Intlayer في تهيئة Vite الخاصة بك
 
-أضف مكون intlayer الإضافي إلى تكوينك.
+أضف مكون intlayer الإضافي إلى تهيئتك.
 
 ```typescript fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -166,9 +168,9 @@ module.exports = defineConfig({
 });
 ```
 
-> يتم استخدام مكون Vite الإضافي `intlayerPlugin()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر أسماء مستعارة لتحسين الأداء.
+> يتم استخدام مكون Vite الإضافي `intlayerPlugin()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يعرّف متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر أسماء مستعارة لتحسين الأداء.
 
-### الخطوة 4: أعلن عن محتواك
+### الخطوة 4: إعلان المحتوى الخاص بك
 
 قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
 
@@ -187,13 +189,13 @@ const appContent = {
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
-      es: "شعار React",
+      es: "Logo React",
     }),
 
     title: "Vite + React",
 
     count: t({
-      en: "العدد هو ",
+      en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
     }),
@@ -235,12 +237,12 @@ const appContent = {
   key: "app",
   content: {
     viteLogo: t({
-      en: "شعار Vite",
+      en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
     }),
     reactLogo: t({
-      en: "شعار React",
+      en: "React logo",
       fr: "Logo React",
       es: "Logo React",
     }),
@@ -248,7 +250,7 @@ const appContent = {
     title: "Vite + React",
 
     count: t({
-      en: "العدد هو ",
+      en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
     }),
@@ -257,7 +259,7 @@ const appContent = {
       t <
       ReactNode >
       {
-        // لا تنسَ استيراد React إذا كنت تستخدم عقدة React في المحتوى الخاص بك
+        // لا تنس استيراد React إذا كنت تستخدم عقدة React في المحتوى الخاص بك
         en: (
           <>
             Edit <code>src/App.tsx</code> and save to test HMR
@@ -270,13 +272,13 @@ const appContent = {
         ),
         es: (
           <>
-            حرر <code>src/App.tsx</code> واحفظ لاختبار HMR
+            Edita <code>src/App.tsx</code> y guarda para probar HMR
           </>
         ),
       },
 
     readTheDocs: t({
-      en: "Click on the Vite and React logos to learn more",
+      en: "انقر على شعارات Vite و React لمعرفة المزيد",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
     }),
@@ -297,13 +299,11 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
-      ar: "شعار Vite",
     }),
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
       es: "Logo React",
-      ar: "شعار React",
     }),
 
     title: "Vite + React",
@@ -312,7 +312,6 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
-      ar: "العدد هو ",
     }),
 
     edit:
@@ -332,16 +331,15 @@ const appContent = {
         ),
         es: (
           <>
-            Edita <code>src/App.tsx</code> y guarda para probar HMR
+            Edita <code>src/App.tsx</code> و احفظ لتجربة HMR
           </>
         ),
       },
 
     readTheDocs: t({
-      en: "Click on the Vite and React logos to learn more",
+      en: "انقر على شعارات Vite و React لمعرفة المزيد",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
-      ar: "انقر على شعارات Vite و React لمعرفة المزيد",
     }),
   },
 };
@@ -359,8 +357,7 @@ module.exports = appContent;
       "translation": {
         "en": "Vite logo",
         "fr": "Logo Vite",
-        "es": "Logo Vite",
-        "ar": "شعار Vite"
+        "es": "Logo Vite"
       }
     },
     "reactLogo": {
@@ -412,13 +409,13 @@ module.exports = appContent;
 }
 ```
 
-> يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك بمجرد تضمينها في دليل `contentDir` (افتراضيًا، `./src`). ويجب أن تتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
+> يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك بمجرد تضمينها في دليل `contentDir` (افتراضيًا، `./src`). ويجب أن تطابق امتداد ملف إعلان المحتوى (افتراضيًا، `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
 > لمزيد من التفاصيل، راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/get_started.md).
 
-> إذا كان ملف المحتوى الخاص بك يتضمن كود TSX، فيجب أن تفكر في استيراد `import React from "react";` في ملف المحتوى الخاص بك.
+> إذا كان ملف المحتوى الخاص بك يتضمن كود TSX، يجب أن تفكر في استيراد `import React from "react";` في ملف المحتوى الخاص بك.
 
-### الخطوة 5: استخدام Intlayer في كودك
+### الخطوة 5: استخدام Intlayer في الكود الخاص بك
 
 قم بالوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك:
 
@@ -563,7 +560,7 @@ const App = () => (
 module.exports = App;
 ```
 
-> إذا كنت تريد استخدام المحتوى الخاص بك في خاصية من نوع `string`، مثل `alt`، `title`، `href`، `aria-label`، إلخ، يجب عليك استدعاء قيمة الدالة، مثل:
+> إذا كنت ترغب في استخدام المحتوى الخاص بك في خاصية من نوع `string`، مثل `alt`، `title`، `href`، `aria-label`، إلخ، يجب عليك استدعاء قيمة الدالة، مثل:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
@@ -634,30 +631,30 @@ const LocaleSwitcher = () => {
 - https://example.com/fr/about
 ```
 
-> بشكل افتراضي، لا يتم إضافة بادئة للمسارات للغة الافتراضية. إذا كنت ترغب في إضافة بادئة للغة الافتراضية، يمكنك تعيين الخيار `middleware.prefixDefault` إلى `true` في تكوينك. راجع [توثيق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md) لمزيد من المعلومات.
+> بشكل افتراضي، لا يتم إضافة بادئة للمسارات للغة الافتراضية. إذا كنت ترغب في إضافة بادئة للغة الافتراضية، يمكنك تعيين الخيار `middleware.prefixDefault` إلى `true` في إعداداتك. راجع [توثيق الإعدادات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md) لمزيد من المعلومات.
 
-لإضافة التوجيه المحلي إلى تطبيقك، يمكنك إنشاء مكون `LocaleRouter` الذي يلف مسارات تطبيقك ويتعامل مع التوجيه بناءً على اللغة. إليك مثال باستخدام [React Router](https://reactrouter.com/home):
+لإضافة التوجيه المحلي إلى تطبيقك، يمكنك إنشاء مكون `LocaleRouter` الذي يلف مسارات تطبيقك ويتعامل مع التوجيه بناءً على اللغة. إليك مثالًا باستخدام [React Router](https://reactrouter.com/home):
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
 // استيراد التبعيات والوظائف اللازمة
 import { type Locales, configuration, getPathWithoutLocale } from "intlayer"; // دوال مساعدة وأنواع من 'intlayer'
 import type { FC, PropsWithChildren } from "react"; // أنواع React للمكونات الوظيفية والخصائص
-import { IntlayerProvider } from "react-intlayer"; // موفر سياق التدويل
+import { IntlayerProvider } from "react-intlayer"; // مزود سياق التدويل
 import {
   BrowserRouter,
   Routes,
   Route,
   Navigate,
   useLocation,
-} from "react-router-dom"; // مكونات الراوتر لإدارة التنقل
+} from "react-router-dom"; // مكونات الموجه لإدارة التنقل
 
-// تفكيك التهيئة من Intlayer
+// تفكيك التكوين من Intlayer
 const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
  * مكون يتعامل مع التدويل ويغلف الأطفال بسياق اللغة المناسب.
- * يدير اكتشاف اللغة بناءً على عنوان URL والتحقق من صحتها.
+ * يدير اكتشاف اللغة بناءً على عنوان URL والتحقق منها.
  */
 const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
   children,
@@ -688,7 +685,7 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
       );
     }
 
-    // تغليف العناصر الفرعية بمزود Intlayer وتعيين اللغة الحالية
+    // تغليف العناصر الفرعية بـ IntlayerProvider وتعيين اللغة الحالية
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
@@ -737,7 +734,7 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
         ))}
 
       {
-        // إذا كان تعطيل إضافة بادئة اللغة الافتراضية، يتم عرض الأطفال مباشرة في المسار الجذري
+        // إذا كان تعطيل بادئة اللغة الافتراضية، يتم عرض الأطفال مباشرة في المسار الجذري
         !middleware.prefixDefault && (
           <Route
             path="*"
@@ -754,8 +751,8 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
 
 ```jsx fileName="src/components/LocaleRouter.mjx" codeFormat="esm"
 // استيراد التبعيات والوظائف اللازمة
-import { configuration, getPathWithoutLocale } from "intlayer"; // وظائف مساعدة وأنواع من 'intlayer'
-// وظائف مساعدة وأنواع من 'intlayer'
+import { configuration, getPathWithoutLocale } from "intlayer"; // وظائف وأصناف مساعدة من 'intlayer'
+// وظائف وأصناف مساعدة من 'intlayer'
 import { IntlayerProvider } from "react-intlayer"; // مزود لسياق التدويل
 import {
   BrowserRouter,
@@ -763,7 +760,7 @@ import {
   Route,
   Navigate,
   useLocation,
-} from "react-router-dom"; // مكونات الراوتر لإدارة التنقل
+} from "react-router-dom"; // مكونات الموجه لإدارة التنقل
 
 // تفكيك التكوين من Intlayer
 const { internationalization, middleware } = configuration;
@@ -771,8 +768,7 @@ const { locales, defaultLocale } = internationalization;
 
 /**
  * مكون يتعامل مع التدويل ويغلف الأطفال بسياق اللغة المناسب.
-/**
- * يدير الكشف عن اللغة بناءً على عنوان URL والتحقق من صحتها.
+ * يدير اكتشاف اللغة بناءً على عنوان URL والتحقق من صحتها.
  */
 const AppLocalized = ({ children, locale }) => {
   const { pathname, search } = useLocation(); // الحصول على مسار URL الحالي
@@ -780,7 +776,7 @@ const AppLocalized = ({ children, locale }) => {
   // تحديد اللغة الحالية، والرجوع إلى اللغة الافتراضية إذا لم يتم توفيرها
   const currentLocale = locale ?? defaultLocale;
 
-  // إزالة بادئة اللغة من المسار لإنشاء مسار أساسي
+  // إزالة بادئة اللغة من المسار لبناء مسار أساسي
   const pathWithoutLocale = getPathWithoutLocale(
     pathname // مسار URL الحالي
   );
@@ -795,7 +791,7 @@ const AppLocalized = ({ children, locale }) => {
       return (
         <Navigate
           to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // استبدال الإدخال الحالي في السجل بالإدخال الجديد
+          replace // استبدال إدخال السجل الحالي بالإدخال الجديد
         />
       );
     }
@@ -807,7 +803,7 @@ const AppLocalized = ({ children, locale }) => {
   } else {
     /**
      * عندما تكون middleware.prefixDefault خاطئة، لا يتم إضافة بادئة للغة الافتراضية.
-     * التأكد من أن اللغة الحالية صالحة وليست اللغة الافتراضية.
+     * تأكد من أن اللغة الحالية صالحة وليست اللغة الافتراضية.
      */
     if (
       currentLocale.toString() !== defaultLocale.toString() &&
@@ -830,7 +826,7 @@ const AppLocalized = ({ children, locale }) => {
 
 /**
  * مكون راوتر يقوم بإعداد مسارات خاصة بكل لغة.
- * يستخدم React Router لإدارة التنقل وعرض المكونات المترجمة.
+ * يستخدم React Router لإدارة التنقل وعرض المكونات المحلية.
  */
 export const LocaleRouter = ({ children }) => (
   <BrowserRouter>
@@ -841,7 +837,7 @@ export const LocaleRouter = ({ children }) => (
         )
         .map((locale) => (
           <Route
-            // نمط المسار لالتقاط اللغة (مثل /en/، /fr/) ومطابقة جميع المسارات اللاحقة
+            // نمط المسار لالتقاط اللغة (مثل /en/، /fr/) ومطابقة جميع المسارات التالية
             path={`/${locale}/*`}
             key={locale}
             element={<AppLocalized locale={locale}>{children}</AppLocalized>} // يلف الأطفال بإدارة اللغة
@@ -866,8 +862,8 @@ export const LocaleRouter = ({ children }) => (
 
 ```jsx fileName="src/components/LocaleRouter.cjx" codeFormat="commonjs"
 // استيراد التبعيات والوظائف اللازمة
-const { configuration, getPathWithoutLocale } = require("intlayer"); // وظائف وأدوات مساعدة من 'intlayer'
-const { IntlayerProvider, useLocale } = require("react-intlayer"); // مزود سياق التدويل
+const { configuration, getPathWithoutLocale } = require("intlayer"); // وظائف مساعدة وأنواع من 'intlayer'
+const { IntlayerProvider, useLocale } = require("react-intlayer"); // موفر لسياق التدويل
 const {
   BrowserRouter,
   Routes,
@@ -882,7 +878,7 @@ const { locales, defaultLocale } = internationalization;
 
 /**
  * مكون يتعامل مع التدويل ويغلف الأطفال بسياق اللغة المناسب.
- * يدير اكتشاف اللغة عبر عنوان URL والتحقق من صحتها.
+ * يدير اكتشاف اللغة بناءً على عنوان URL والتحقق منها.
  */
 const AppLocalized = ({ children, locale }) => {
   const { pathname, search } = useLocation(); // الحصول على مسار URL الحالي
@@ -910,13 +906,13 @@ const AppLocalized = ({ children, locale }) => {
       );
     }
 
-    // لف العناصر الفرعية بمزود Intlayer وتعيين اللغة الحالية
+    // تغليف العناصر الفرعية بمزود Intlayer وتعيين اللغة الحالية
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
   } else {
     /**
-     * عندما تكون middleware.prefixDefault خاطئة، لا يتم إضافة بادئة اللغة الافتراضية.
+     * عندما تكون middleware.prefixDefault خاطئة، لا يتم إضافة بادئة للغة الافتراضية.
      * تأكد من أن اللغة الحالية صالحة وليست اللغة الافتراضية.
      */
     if (
@@ -940,7 +936,7 @@ const AppLocalized = ({ children, locale }) => {
 
 /**
  * مكون راوتر يقوم بإعداد مسارات خاصة بكل لغة.
- * يستخدم React Router لإدارة التنقل وعرض المكونات المحلية.
+ * يستخدم React Router لإدارة التنقل وعرض المكونات المترجمة.
  */
 const LocaleRouter = ({ children }) => (
   <BrowserRouter>
@@ -959,7 +955,7 @@ const LocaleRouter = ({ children }) => (
         ))}
 
       {
-        // إذا تم تعطيل إضافة بادئة اللغة الافتراضية، قم بعرض الأطفال مباشرة في المسار الجذري
+        // إذا تم تعطيل إضافة بادئة اللغة الافتراضية، يتم عرض الأطفال مباشرة في المسار الجذري
         !middleware.prefixDefault && (
           <Route
             path="*"
@@ -1013,7 +1009,7 @@ const App = () => (
 );
 ```
 
-بالتوازي، يمكنك أيضًا استخدام `intLayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي تلقائيًا بالكشف عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
+بالتوازي، يمكنك أيضًا استخدام `intLayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -1050,7 +1046,7 @@ module.exports = defineConfig({
 
 ### (اختياري) الخطوة 8: تغيير عنوان URL عند تغيير اللغة
 
-لتغيير عنوان URL عند تغيير اللغة، يمكنك استخدام الخاصية `onLocaleChange` المقدمة من الخطاف `useLocale`. بالتوازي، يمكنك استخدام الخطافين `useLocation` و `useNavigate` من مكتبة `react-router-dom` لتحديث مسار عنوان URL.
+لتغيير عنوان URL عند تغيير اللغة، يمكنك استخدام الخاصية `onLocaleChange` المقدمة من الخطاف `useLocale`. وبالتوازي، يمكنك استخدام الخطافين `useLocation` و `useNavigate` من مكتبة `react-router-dom` لتحديث مسار عنوان URL.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
 import { useLocation, useNavigate } from "react-router-dom";
@@ -1094,15 +1090,15 @@ const LocaleSwitcher: FC = () => {
             key={localeItem}
           >
             <span>
-              {/* اللغة المحلية - مثلاً FR */}
+              {/* اللغة - مثلاً FR */}
               {localeItem}
             </span>
             <span>
-              {/* اللغة بلغتها المحلية - مثلاً Français */}
+              {/* اللغة بلغتها الأصلية - مثلاً Français */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* اللغة باللغة المحلية الحالية - مثلاً Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */}
+              {/* اللغة باللغة الحالية - مثلاً Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
@@ -1222,19 +1218,19 @@ const LocaleSwitcher = () => {
             key={localeItem}
           >
             <span>
-              {/* اللغة المحلية - على سبيل المثال FR */}
+              {/* اللغة المحلية - مثل FR */}
               {localeItem}
             </span>
             <span>
-              {/* اللغة بلغتها المحلية - على سبيل المثال Français */}
+              {/* اللغة بلغتها المحلية - مثل Français */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* اللغة في اللغة الحالية - على سبيل المثال Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */}
+              {/* اللغة باللغة المحلية الحالية - مثل Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* اللغة بالإنجليزية - على سبيل المثال French */}
+              {/* اللغة بالإنجليزية - على سبيل المثال الفرنسية */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -1256,7 +1252,7 @@ const LocaleSwitcher = () => {
 > - [`dir` attribute`](https://developer.mozilla.org/ar/docs/Web/HTML/Global_attributes/dir)
 > - [`aria-current` attribute`](https://developer.mozilla.org/ar/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-فيما يلي الخطوة التاسعة المحدثة مع شروحات إضافية وأمثلة كود محسنة:
+فيما يلي الخطوة التاسعة المحدثة مع توضيحات إضافية وأمثلة كود محسنة:
 
 ---
 
@@ -1264,7 +1260,7 @@ const LocaleSwitcher = () => {
 
 عندما يدعم تطبيقك لغات متعددة، من الضروري تحديث سمات `lang` و `dir` في وسم `<html>` لتتوافق مع اللغة الحالية. يضمن ذلك:
 
-- **إمكانية الوصول**: تعتمد برامج قراءة الشاشة وتقنيات المساعدة على سمة `lang` الصحيحة لنطق وتفسير المحتوى بدقة.
+- **سهولة الوصول**: تعتمد برامج قراءة الشاشة وتقنيات المساعدة على سمة `lang` الصحيحة لنطق المحتوى وتفسيره بدقة.
 - **عرض النص**: تضمن سمة `dir` (الاتجاه) عرض النص بالترتيب الصحيح (مثلًا من اليسار إلى اليمين للإنجليزية، ومن اليمين إلى اليسار للعربية أو العبرية)، وهو أمر أساسي لسهولة القراءة.
 - **تحسين محركات البحث (SEO)**: تستخدم محركات البحث سمة `lang` لتحديد لغة الصفحة، مما يساعد في تقديم المحتوى المحلي المناسب في نتائج البحث.
 
@@ -1272,7 +1268,7 @@ const LocaleSwitcher = () => {
 
 #### تنفيذ الـ Hook
 
-قم بإنشاء hook مخصص لإدارة سمات HTML. يستمع الـ hook لتغييرات اللغة ويقوم بتحديث السمات وفقًا لذلك:
+قم بإنشاء hook مخصص لإدارة سمات HTML. يستمع الـ hook لتغييرات اللغة ويحدث السمات وفقًا لذلك:
 
 ```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
 import { useEffect } from "react";
@@ -1284,7 +1280,7 @@ import { getHTMLTextDir } from "intlayer";
  * - `lang`: يُعلم المتصفحات ومحركات البحث بلغة الصفحة.
  * - `dir`: يضمن ترتيب القراءة الصحيح (مثل 'ltr' للإنجليزية، 'rtl' للعربية).
  *
- * هذا التحديث الديناميكي ضروري لعرض النص بشكل صحيح، وللوصولية، وتحسين محركات البحث (SEO).
+ * هذا التحديث الديناميكي ضروري لعرض النص بشكل صحيح، وللوصولية، وتحسين محركات البحث.
  */
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
@@ -1307,7 +1303,7 @@ import { getHTMLTextDir } from "intlayer";
 /**
  * يقوم بتحديث خصائص `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
  * - `lang`: يُعلم المتصفحات ومحركات البحث بلغة الصفحة.
- * - `dir`: يضمن ترتيب القراءة الصحيح (مثل 'ltr' للإنجليزية، 'rtl' للعربية).
+ * - `dir`: يضمن ترتيب القراءة الصحيح (مثل 'ltr' للإنجليزية، و 'rtl' للعربية).
  *
  * هذا التحديث الديناميكي ضروري لعرض النص بشكل صحيح، وللوصولية، وتحسين محركات البحث.
  */
@@ -1332,7 +1328,7 @@ const { getHTMLTextDir } = require("intlayer");
 /**
  * يقوم بتحديث خصائص `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
  * - `lang`: يُعلم المتصفحات ومحركات البحث بلغة الصفحة.
- * - `dir`: يضمن ترتيب القراءة الصحيح (مثلاً، 'ltr' للإنجليزية، 'rtl' للعربية).
+ * - `dir`: يضمن ترتيب القراءة الصحيح (مثل 'ltr' للإنجليزية، 'rtl' للعربية).
  *
  * هذا التحديث الديناميكي ضروري لعرض النص بشكل صحيح، وتحسين إمكانية الوصول، وتحسين محركات البحث.
  */
@@ -1353,7 +1349,7 @@ module.exports = { useI18nHTMLAttributes };
 
 #### استخدام الـ Hook في تطبيقك
 
-قم بدمج الـ hook في المكون الرئيسي الخاص بك بحيث يتم تحديث خصائص HTML كلما تغيرت اللغة:
+قم بدمج الـ hook في المكون الرئيسي الخاص بك بحيث يتم تحديث خصائص HTML في كل مرة يتغير فيها اللغة:
 
 ```tsx fileName="src/App.tsx" codeFormat="typescript"
 import type { FC } from "react";
@@ -1383,7 +1379,7 @@ import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./App.css";
 
 const AppContent = () => {
-  // تطبيق الـ hook لتحديث خصائص lang و dir في وسم <html> بناءً على اللغة الحالية.
+  // تطبيق الـ hook لتحديث خصائص lang و dir لعلامة <html> بناءً على اللغة الحالية.
   useI18nHTMLAttributes();
 
   // ... بقية مكوناتك
@@ -1405,7 +1401,7 @@ const { useI18nHTMLAttributes } = require("./hooks/useI18nHTMLAttributes");
 require("./App.css");
 
 const AppContent = () => {
-  // تطبيق الخطاف لتحديث خصائص lang و dir لعلامة <html> بناءً على اللغة المحلية.
+  // تطبيق الخطاف لتحديث خصائص lang و dir في وسم <html> بناءً على اللغة المحلية.
   useI18nHTMLAttributes();
 
   // ... بقية مكوناتك
@@ -1420,23 +1416,23 @@ const App = () => (
 module.exports = App;
 ```
 
-من خلال تطبيق هذه التغييرات، سيقوم تطبيقك بـ:
+بتطبيق هذه التغييرات، سيقوم تطبيقك بـ:
 
 - ضمان أن خاصية **اللغة** (`lang`) تعكس اللغة المحلية الحالية بشكل صحيح، وهو أمر مهم لتحسين محركات البحث وسلوك المتصفح.
 - ضبط **اتجاه النص** (`dir`) وفقًا للغة المحلية، مما يعزز من قابلية القراءة وسهولة الاستخدام للغات ذات اتجاهات قراءة مختلفة.
-- توفير تجربة أكثر **سهولة في الوصول**، حيث تعتمد تقنيات المساعدة على هذه الخصائص لتعمل بشكل أمثل.
+- توفير تجربة أكثر **سهولة في الوصول**، حيث تعتمد تقنيات المساعدة على هذه الخصائص لتعمل بشكل مثالي.
 
-### (اختياري) الخطوة 10: إنشاء مكون رابط محلي اللغة
+### (اختياري) الخطوة 10: إنشاء مكون رابط محلي
 
 لضمان أن تحترم تنقلات تطبيقك اللغة الحالية، يمكنك إنشاء مكون `Link` مخصص. يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية إلى عناوين URL الداخلية، بحيث عند نقر مستخدم يتحدث الفرنسية على رابط لصفحة "حول"، يتم توجيهه إلى `/fr/about` بدلاً من `/about`.
 
 هذا السلوك مفيد لعدة أسباب:
 
-- **تحسين محركات البحث وتجربة المستخدم**: تساعد عناوين URL المحلية محركات البحث على فهرسة الصفحات الخاصة بكل لغة بشكل صحيح وتوفر للمستخدمين محتوى بلغتهم المفضلة.
-- **الاتساق**: باستخدام رابط محلي في جميع أنحاء تطبيقك، تضمن أن التنقل يبقى ضمن اللغة الحالية، مما يمنع التبديلات غير المتوقعة في اللغة.
-- **قابلية الصيانة**: تركيز منطق التوطين في مكون واحد يبسط إدارة عناوين URL، مما يجعل قاعدة الشيفرة الخاصة بك أسهل في الصيانة والتوسيع مع نمو تطبيقك.
+- **تحسين محركات البحث وتجربة المستخدم**: تساعد عناوين URL المترجمة محركات البحث على فهرسة الصفحات الخاصة بكل لغة بشكل صحيح وتوفر للمستخدمين محتوى بلغتهم المفضلة.
+- **الاتساق**: باستخدام رابط مترجم في جميع أنحاء تطبيقك، تضمن أن التنقل يبقى ضمن اللغة الحالية، مما يمنع التبديلات غير المتوقعة في اللغة.
+- **قابلية الصيانة**: توحيد منطق التوطين في مكون واحد يبسط إدارة عناوين URL، مما يجعل قاعدة الكود الخاصة بك أسهل في الصيانة والتطوير مع نمو تطبيقك.
 
-فيما يلي تنفيذ لمكون `Link` مخصص للتوطين بلغة TypeScript:
+فيما يلي تنفيذ لمكون `Link` مخصص يدعم التوطين باستخدام TypeScript:
 
 ```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
 import { getLocalizedUrl } from "intlayer";
@@ -1455,13 +1451,13 @@ export interface LinkProps
 
 /**
  * دالة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا.
- * إذا بدأ عنوان URL بـ http:// أو https://، فإنه يعتبر خارجيًا.
+ * إذا بدأ عنوان URL بـ http:// أو https://، يعتبر خارجيًا.
  */
 export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
- * مكون Link مخصص يقوم بتعديل خاصية href بناءً على اللغة الحالية.
+ * مكون رابط مخصص يقوم بتعديل خاصية href بناءً على اللغة الحالية.
  * بالنسبة للروابط الداخلية، يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى الرابط (مثل /fr/about).
  * هذا يضمن أن التنقل يبقى ضمن نفس سياق اللغة.
  */
@@ -1470,7 +1466,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     const { locale } = useLocale();
     const isExternalLink = checkIsExternalLink(href);
 
-    // إذا كانت الرابط داخلي وتم توفير href صالح، احصل على الرابط المترجم.
+    // إذا كان الرابط داخليًا وتم توفير href صالح، احصل على الرابط المحلي.
     const hrefI18n =
       href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
@@ -1491,22 +1487,22 @@ import { useLocale } from "react-intlayer";
 import { forwardRef } from "react";
 
 /**
- * دالة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا.
- * إذا بدأ عنوان URL بـ http:// أو https://، فيُعتبر خارجيًا.
+ * دالة مساعدة للتحقق مما إذا كان الرابط المعطى خارجيًا.
+ * إذا بدأ الرابط بـ http:// أو https://، فإنه يعتبر خارجيًا.
  */
 export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
  * مكون رابط مخصص يقوم بتكييف خاصية href بناءً على اللغة الحالية.
- * بالنسبة للروابط الداخلية، يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى عنوان URL (مثل /fr/about).
+ * بالنسبة للروابط الداخلية، يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى الرابط (مثلاً /fr/about).
  * هذا يضمن أن التنقل يبقى ضمن نفس سياق اللغة.
  */
 export const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
   const isExternalLink = checkIsExternalLink(href);
 
-  // إذا كان الرابط داخليًا وتم توفير href صالح، احصل على عنوان URL المحلي.
+  // إذا كان الرابط داخليًا وتم توفير href صالح، احصل على الرابط المحلي.
   const hrefI18n =
     href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
@@ -1527,7 +1523,7 @@ const { forwardRef } = require("react");
 
 /**
  * دالة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا.
- * إذا بدأ عنوان URL بـ http:// أو https://، يعتبر خارجيًا.
+ * إذا بدأ عنوان URL بـ http:// أو https://، يُعتبر خارجيًا.
  */
 const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
@@ -1561,18 +1557,18 @@ Link.displayName = "Link";
 #### كيف يعمل
 
 - **كشف الروابط الخارجية**:  
-  تقوم الدالة المساعدة `checkIsExternalLink` بتحديد ما إذا كان الرابط خارجيًا. تُترك الروابط الخارجية كما هي لأنها لا تحتاج إلى تعريب.
+  تقوم الدالة المساعدة `checkIsExternalLink` بتحديد ما إذا كان الرابط URL خارجيًا. يتم ترك الروابط الخارجية كما هي لأنها لا تحتاج إلى تعريب.
 
 - **استرجاع اللغة الحالية**:  
   يوفر الخطاف `useLocale` اللغة الحالية (مثلًا `fr` للفرنسية).
 
 - **تعريب الرابط**:  
-  بالنسبة للروابط الداخلية (أي غير الخارجية)، يتم استخدام `getLocalizedUrl` لإضافة بادئة اللغة تلقائيًا إلى الرابط. هذا يعني أنه إذا كان المستخدم يتصفح باللغة الفرنسية، فإن تمرير `/about` كـ `href` سيُحوَّل إلى `/fr/about`.
+  بالنسبة للروابط الداخلية (أي غير الخارجية)، يتم استخدام `getLocalizedUrl` لإضافة بادئة اللغة الحالية تلقائيًا إلى الرابط. هذا يعني أنه إذا كان المستخدم يتصفح باللغة الفرنسية، فإن تمرير `/about` كـ `href` سيُحوَّل إلى `/fr/about`.
 
 - **إرجاع الرابط**:  
   يعيد المكون عنصر `<a>` مع عنوان URL المحلي، مما يضمن أن التنقل متسق مع اللغة المختارة.
 
-من خلال دمج هذا المكون `Link` في تطبيقك، تحافظ على تجربة مستخدم متماسكة وواعية باللغة، بالإضافة إلى الاستفادة من تحسين محركات البحث وسهولة الاستخدام.
+من خلال دمج هذا المكون `Link` عبر تطبيقك، تحافظ على تجربة مستخدم متماسكة وواعية باللغة، مع الاستفادة أيضًا من تحسين محركات البحث وسهولة الاستخدام.
 
 ### تكوين TypeScript
 
@@ -1605,16 +1601,16 @@ Link.displayName = "Link";
 .intlayer
 ```
 
-### امتداد VS Code
+### إضافة VS Code
 
-لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **امتداد Intlayer الرسمي لـ VS Code**.
+لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
 
 [التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-يوفر هذا الامتداد:
+تقدم هذه الإضافة:
 
 - **الإكمال التلقائي** لمفاتيح الترجمة.
-- **الكشف الفوري عن الأخطاء** للترجمات المفقودة.
+- **الكشف عن الأخطاء في الوقت الحقيقي** للترجمات المفقودة.
 - **معاينات داخلية** للمحتوى المترجم.
 - **إجراءات سريعة** لإنشاء الترجمات وتحديثها بسهولة.