@intlayer/docs 5.5.8

package/ar/packages/next-intlayer/useDictionary.md

@@ -0,0 +1,248 @@
+# دمج React: توثيق `useDictionary` Hook
+
+يوفر هذا القسم إرشادات مفصلة حول استخدام `useDictionary` hook داخل تطبيقات React، مما يتيح التعامل الفعال مع المحتوى المحلي دون الحاجة إلى محرر مرئي.
+
+## استيراد `useDictionary` في React
+
+يمكن دمج `useDictionary` hook في تطبيقات React عن طريق استيراده بناءً على السياق:
+
+- **مكون العميل:**
+
+  ```typescript codeFormat="typescript"
+  import { useDictionary } from "next-intlayer"; // يُستخدم في مكونات React على جانب العميل
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useDictionary } from "next-intlayer"; // يُستخدم في مكونات React على جانب العميل
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useDictionary } = require("next-intlayer"); // يُستخدم في مكونات React على جانب العميل
+  ```
+
+- **مكون الخادم:**
+
+  ```typescript codeFormat="typescript"
+  import { useDictionary } from "next-intlayer/server"; // يُستخدم في مكونات React على جانب الخادم
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useDictionary } from "next-intlayer/server"; // يُستخدم في مكونات React على جانب الخادم
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useDictionary } = require("next-intlayer/server"); // يُستخدم في مكونات React على جانب الخادم
+  ```
+
+## المعاملات
+
+يقبل الـ hook معاملين:
+
+1. **`dictionary`**: كائن قاموس مُعلن يحتوي على المحتوى المحلي لمفاتيح محددة.
+2. **`locale`** (اختياري): اللغة المطلوبة. يتم افتراض اللغة الحالية للسياق إذا لم يتم تحديدها.
+
+## القاموس
+
+يجب أن يتم إعلان جميع كائنات القاموس في ملفات محتوى منظمة لضمان سلامة النوع وتجنب أخطاء وقت التشغيل. يمكنك العثور على تعليمات الإعداد [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/ar/dictionary/get_started.md). إليك مثال على إعلان المحتوى:
+
+```typescript fileName="component.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const exampleContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+      ar: "مثال على مكون العميل",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+      ar: "هذا هو محتوى مثال على مكون العميل",
+    }),
+  },
+} satisfies Dictionary;
+
+export default exampleContent;
+```
+
+```javascript fileName="component.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const exampleContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+      ar: "مثال على مكون العميل",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+      ar: "هذا هو محتوى مثال على مكون العميل",
+    }),
+  },
+};
+
+export default exampleContent;
+```
+
+```javascript fileName="component.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const exampleContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+      ar: "مثال على مكون العميل",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+      ar: "هذا هو محتوى مثال على مكون العميل",
+    }),
+  },
+};
+
+module.exports = exampleContent;
+```
+
+## مثال على الاستخدام في مكون عميل React
+
+فيما يلي مثال على كيفية استخدام `useDictionary` hook في مكون React:
+
+```tsx fileName="ClientComponentExample.tsx" codeFormat="typescript"
+"use client";
+
+import type { FC } from "react";
+import { useDictionary } from "next-intlayer";
+import clientComponentExampleContent from "./component.content";
+
+const ClientComponentExample: FC = () => {
+  const { title, content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ClientComponentExample.mjs" codeFormat="esm"
+"use client";
+
+import type { FC } from "react";
+import { useDictionary } from "next-intlayer";
+import exampleContent from "./component.content";
+
+const ClientComponentExample: FC = () => {
+  const { title, content } = useDictionary(exampleContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ClientComponentExample.cjs" codeFormat="commonjs"
+"use client";
+
+const { useDictionary } = require("next-intlayer");
+const exampleContent = require("./component.content");
+
+const ClientComponentExample = () => {
+  const { title, content } = useDictionary(exampleContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+## مثال على الاستخدام في مكون خادم React
+
+إذا كنت تستخدم `useDictionary` hook خارج `IntlayerServerProvider`، يجب تحديد اللغة صراحةً كمعامل عند عرض المكون:
+
+```tsx fileName="ServerComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useDictionary } from "next-intlayer/server";
+import clientComponentExampleContent from "./component.content";
+
+const ServerComponentExample: FC = () => {
+  const { content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ServerComponentExample.mjs" codeFormat="esm"
+import { useDictionary } from "next-intlayer/server";
+import clientComponentExampleContent from "./component.content";
+
+const ServerComponentExample = () => {
+  const { content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ServerComponentExample.cjs" codeFormat="commonjs"
+import { useDictionary } from "next-intlayer/server";
+import clientComponentExampleContent from "./component.content";
+
+const ServerComponentExample = () => {
+  const { content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+## ملاحظات حول السمات
+
+على عكس التكاملات التي تستخدم المحررات المرئية، السمات مثل `buttonTitle.value` لا تنطبق هنا. بدلاً من ذلك، قم بالوصول مباشرة إلى النصوص المحلية كما تم إعلانها في المحتوى الخاص بك.
+
+```jsx
+<button title={content.title}>{content.content}</button>
+```
+
+## نصائح إضافية
+
+- **سلامة النوع**: استخدم دائمًا `Dictionary` لتعريف القواميس لضمان سلامة النوع.
+- **تحديثات التوطين**: عند تحديث المحتوى، تأكد من أن جميع اللغات متسقة لتجنب فقدان الترجمات.
+
+يركز هذا التوثيق على دمج `useDictionary` hook، مما يوفر نهجًا مبسطًا لإدارة المحتوى المحلي دون الاعتماد على وظائف المحرر المرئي.

package/ar/packages/next-intlayer/useIntlayer.md

@@ -0,0 +1,237 @@
+# دمج Next.js: توثيق `useIntlayer` Hook
+
+تم تصميم `useIntlayer` خصيصًا لتطبيقات Next.js لجلب وإدارة المحتوى المحلي بكفاءة. يركز هذا التوثيق على كيفية استخدام الـ hook داخل مشاريع Next.js، مع ضمان اتباع ممارسات التوطين الصحيحة.
+
+## استيراد `useIntlayer` في Next.js
+
+اعتمادًا على ما إذا كنت تعمل على مكونات العميل أو الخادم في تطبيق Next.js، يمكنك استيراد الـ hook `useIntlayer` كما يلي:
+
+- **مكون العميل:**
+
+  ```typescript codeFormat="typescript"
+  import { useIntlayer } from "next-intlayer"; // يُستخدم في مكونات العميل
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useIntlayer } from "next-intlayer"; // يُستخدم في مكونات العميل
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useIntlayer } = require("next-intlayer"); // يُستخدم في مكونات العميل
+  ```
+
+- **مكون الخادم:**
+
+  ```tsx codeFormat="typescript"
+  import { useIntlayer } from "next-intlayer/server"; // يُستخدم في مكونات الخادم
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useIntlayer } from "next-intlayer/server"; // يُستخدم في مكونات الخادم
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useIntlayer } = require("next-intlayer/server"); // يُستخدم في مكونات الخادم
+  ```
+
+## المعاملات
+
+1. **`key`**: معرف نصي لمفتاح القاموس الذي تريد استرداد المحتوى منه.
+2. **`locale`** (اختياري): لغة معينة للاستخدام. إذا لم يتم تحديدها، فإن الـ hook يستخدم اللغة الافتراضية المحددة في سياق العميل أو الخادم.
+
+## ملفات القاموس
+
+من المهم أن يتم تعريف جميع مفاتيح المحتوى داخل ملفات تعريف المحتوى لتجنب أخطاء وقت التشغيل وضمان سلامة النوع. يتيح هذا النهج أيضًا تكامل TypeScript للتحقق أثناء وقت الترجمة.
+
+تعليمات إعداد ملفات تعريف المحتوى متوفرة [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/ar/dictionary/get_started.md).
+
+## مثال على الاستخدام في Next.js
+
+إليك كيفية تنفيذ الـ hook `useIntlayer` داخل صفحة Next.js لتحميل المحتوى المحلي ديناميكيًا بناءً على اللغة الحالية للتطبيق:
+
+```tsx fileName="src/pages/[locale]/index.tsx" codeFormat="typescript"
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
+import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";
+
+const HomePage: NextPageIntlayer = async ({ params }) => {
+  const { locale } = await params;
+
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/pages/[locale]/index.csx" codeFormat="esm"
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { IntlayerClientProvider } from "next-intlayer";
+import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
+
+const HomePage = ({ locale }) => {
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+const {
+  ClientComponentExample,
+} = require("@components/ClientComponentExample");
+const {
+  ServerComponentExample,
+} = require("@components/ServerComponentExample");
+const { IntlayerClientProvider } = require("next-intlayer");
+const { useIntlayer } = require("next-intlayer/server");
+
+const HomePage = ({ locale }) => {
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
+"use-client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ClientComponentExample: FC = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.msx" codeFormat="esm"
+"use-client";
+
+import { useIntlayer } from "next-intlayer";
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+"use-client";
+
+const { useIntlayer } = require("next-intlayer");
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer/server";
+
+const ServerComponentExample: FC = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.mjx" codeFormat="esm"
+import { useIntlayer } from "next-intlayer/server";
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.csx" codeFormat="commonjs"
+const { useIntlayer } = require("next-intlayer/server");
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+## التعامل مع توطين السمات
+
+لتوطين السمات مثل `alt`، `title`، `href`، `aria-label`، إلخ، تأكد من الرجوع إلى المحتوى بشكل صحيح:
+
+```tsx
+<img src={content.image.src.value} alt={content.image.alt.value} />
+```
+
+## معلومات إضافية
+
+- **محرر Intlayer البصري**: تعرف على كيفية استخدام المحرر البصري لإدارة المحتوى بسهولة [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_visual_editor.md).
+
+يوضح هذا التوثيق استخدام الـ hook `useIntlayer` بشكل خاص في بيئات Next.js، مما يوفر حلاً قويًا لإدارة التوطين عبر تطبيقات Next.js الخاصة بك.

package/ar/packages/next-intlayer/useIntlayerAsync.md

@@ -0,0 +1,211 @@
+# دمج Next.js: توثيق `useIntlayerAsync` Hook
+
+يمدد الخطاف `useIntlayerAsync` وظائف `useIntlayer` من خلال عدم إرجاع القواميس المسبقة العرض فقط، بل أيضًا جلب التحديثات بشكل غير متزامن، مما يجعله مثاليًا للتطبيقات التي تقوم بتحديث محتواها المحلي بشكل متكرر بعد العرض الأولي.
+
+## نظرة عامة
+
+- **تحميل القواميس بشكل غير متزامن:**  
+  على جانب العميل، يقوم `useIntlayerAsync` أولاً بإرجاع قاموس اللغة المسبق العرض (مثل `useIntlayer`) ثم يجلب ويدمج أي قواميس بعيدة جديدة متاحة بشكل غير متزامن.
+- **إدارة حالة التقدم:**  
+  يوفر الخطاف أيضًا حالة `isLoading`، مما يشير إلى متى يتم جلب قاموس بعيد. يتيح ذلك للمطورين عرض مؤشرات التحميل أو حالات الهيكل العظمي لتجربة مستخدم أكثر سلاسة.
+
+## إعداد البيئة
+
+يوفر Intlayer نظام إدارة مصدر محتوى بدون رأس (CSM) يمكّن غير المطورين من إدارة وتحديث محتوى التطبيق بسلاسة. باستخدام لوحة التحكم البديهية لـ Intlayer، يمكن لفريقك تحرير النصوص المحلية والصور والموارد الأخرى دون تعديل الكود مباشرة. هذا يبسط عملية إدارة المحتوى، ويعزز التعاون، ويضمن إمكانية إجراء التحديثات بسرعة وسهولة.
+
+لبدء استخدام Intlayer، ستحتاج أولاً إلى التسجيل والحصول على رمز وصول في [https://intlayer.org/dashboard](https://intlayer.org/dashboard). بمجرد حصولك على بيانات الاعتماد الخاصة بك، أضفها إلى ملف التكوين كما هو موضح أدناه:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+export default {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+} satisfies IntlayerConfig;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { type IntlayerConfig } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+
+module.exports = config;
+```
+
+بعد تكوين بيانات الاعتماد الخاصة بك، يمكنك دفع قاموس لغة جديد إلى Intlayer عن طريق تشغيل:
+
+```bash
+npx intlayer dictionary push -d my-first-dictionary-key
+```
+
+يقوم هذا الأمر بتحميل قواميس المحتوى الأولية الخاصة بك، مما يجعلها متاحة للجلب والتحرير غير المتزامن من خلال منصة Intlayer.
+
+## استيراد `useIntlayerAsync` في Next.js
+
+نظرًا لأن `useIntlayerAsync` مخصص لمكونات **جانب العميل**، ستقوم باستيراده من نفس نقطة دخول العميل مثل `useIntlayer`:
+
+```tsx codeFormat="typescript"
+"use client";
+
+import { useIntlayerAsync } from "next-intlayer";
+```
+
+```javascript codeFormat="esm"
+"use client";
+
+import { useIntlayerAsync } from "next-intlayer";
+```
+
+```javascript codeFormat="commonjs"
+"use client";
+
+const { useIntlayerAsync } = require("next-intlayer");
+```
+
+تأكد من أن ملف الاستيراد مشروح بـ `"use client"` في الأعلى، إذا كنت تستخدم App Router في Next.js مع فصل المكونات الخادمة والعميلة.
+
+## المعلمات
+
+1. **`key`**:  
+   **النوع**: `DictionaryKeys`  
+   مفتاح القاموس المستخدم لتحديد كتلة المحتوى المحلي. يجب تعريف هذا المفتاح في ملفات إعلان المحتوى الخاصة بك.
+
+2. **`locale`** (اختياري):  
+   **النوع**: `Locales`  
+   اللغة المحددة التي تريد استهدافها. إذا تم إغفالها، يستخدم الخطاف اللغة من سياق العميل.
+
+3. **`isRenderEditor`** (اختياري، القيمة الافتراضية `true`):  
+   **النوع**: `boolean`  
+   يحدد ما إذا كان المحتوى يجب أن يكون جاهزًا للعرض مع تراكب محرر Intlayer. إذا تم تعيينه إلى `false`، ستستبعد بيانات القاموس المرتجعة الميزات الخاصة بالمحرر.
+
+## قيمة الإرجاع
+
+يعيد الخطاف كائن قاموس يحتوي على المحتوى المحلي المفهرس بواسطة `key` و `locale`. كما يتضمن منطقية `isLoading` تشير إلى ما إذا كان يتم جلب قاموس بعيد حاليًا.
+
+## مثال على الاستخدام في Next.js
+
+### مثال على مكون جانب العميل
+
+```tsx fileName="src/components/AsyncClientComponentExample.tsx" codeFormat="typescript"
+"use client";
+
+import { useEffect, type FC } from "react";
+import { useIntlayerAsync } from "next-intlayer";
+
+export const AsyncClientComponentExample: FC = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("المحتوى قيد التحميل...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/AsyncClientComponentExample.mjx" codeFormat="esm"
+"use client";
+
+import { useEffect } from "react";
+import { useIntlayerAsync } from "next-intlayer";
+
+const AsyncClientComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("المحتوى قيد التحميل...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/AsyncClientComponentExample.csx" codeFormat="commonjs"
+"use client";
+
+const { useEffect } = require("react");
+const { useIntlayerAsync } = require("next-intlayer");
+
+const AsyncClientComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("المحتوى قيد التحميل...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+**النقاط الرئيسية:**
+
+- عند العرض الأولي، يتم جلب `title` و `description` من قاموس اللغة المسبق العرض.
+- أثناء أن تكون `isLoading` تساوي `true`، يتم إجراء طلب بعيد في الخلفية لجلب قاموس محدث.
+- بمجرد اكتمال الجلب، يتم تحديث `title` و `description` بالمحتوى الأحدث، وتعود `isLoading` إلى `false`.
+
+## التعامل مع توطين السمات
+
+كما هو الحال مع `useIntlayer`، يمكنك استرداد القيم المحلية للسمات المختلفة لخصائص HTML (مثل `alt`، `title`، `aria-label`):
+
+```tsx
+<img src={title.image.src.value} alt={title.image.alt.value} />
+```
+
+## ملفات القاموس
+
+يجب تعريف جميع مفاتيح المحتوى في ملفات إعلان المحتوى الخاصة بك لضمان الأمان من النوع ولتجنب أخطاء وقت التشغيل. تتيح هذه الملفات التحقق من صحة TypeScript، مما يضمن دائمًا الرجوع إلى المفاتيح واللغات الموجودة.
+
+تعليمات إعداد ملفات إعلان المحتوى متاحة [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/ar/dictionary/get_started.md).
+
+## معلومات إضافية
+
+- **محرر Intlayer المرئي:**  
+  قم بالدمج مع محرر Intlayer المرئي لإدارة وتحرير المحتوى مباشرة من واجهة المستخدم. مزيد من التفاصيل [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_visual_editor.md).
+
+---
+
+**باختصار**، يعد `useIntlayerAsync` خطافًا قويًا لجانب العميل مصممًا لتحسين تجربة المستخدم والحفاظ على تحديث المحتوى من خلال الجمع بين القواميس المسبقة العرض وتحديثات القواميس غير المتزامنة. من خلال الاستفادة من `isLoading` وإعلانات المحتوى المستندة إلى TypeScript، يمكنك دمج محتوى ديناميكي ومحلي بسلاسة في تطبيقات Next.js الخاصة بك.