docs: update nextjs documentation

apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/index.mdx

@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-08-09T22:04:45.323Z
+translation-updated-at: 2025-08-09T22:04:45.323Z
+title: التوجيهات (Directives)
+description: تُستخدم التوجيهات (Directives) لتعديل سلوك تطبيق Next.js الخاص بك.
+---
+
+التوجيهات المتاحة هي:

apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-client.mdx

@@ -0,0 +1,125 @@
+---
+source-updated-at: 2025-08-09T22:04:45.323Z
+translation-updated-at: 2025-08-09T22:04:45.323Z
+title: استخدام use client
+description: تعلم كيفية استخدام توجيه use client لعرض مكون على جانب العميل.
+---
+
+يعلن توجيه `'use client'` عن نقطة دخول للمكونات التي سيتم عرضها على **جانب العميل** ويجب استخدامه عند إنشاء واجهات مستخدم تفاعلية (UI) تتطلب إمكانيات جافا سكريبت من جانب العميل، مثل إدارة الحالة، ومعالجة الأحداث، والوصول إلى واجهات برمجة تطبيقات المتصفح. هذه ميزة من ميزات React.
+
+> **معلومة مفيدة:**
+>
+> لا تحتاج إلى إضافة توجيه `'use client'` إلى كل ملف يحتوي على مكونات العميل. تحتاج فقط إلى إضافته إلى الملفات التي تريد عرض مكوناتها مباشرة داخل مكونات الخادم. يحدد توجيه `'use client'` [حدود](https://nextjs.org/docs/app/building-your-application/rendering#network-boundary) الخادم والعميل، وتعمل المكونات المصدرة من مثل هذا الملف كنقاط دخول إلى العميل.
+
+## الاستخدام
+
+لتعريف نقطة دخول لمكونات العميل، أضف توجيه `'use client'` **في أعلى الملف**، قبل أي استيرادات:
+
+```tsx filename="app/components/counter.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/components/counter.js" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  )
+}
+```
+
+عند استخدام توجيه `'use client'`، يجب أن تكون خصائص مكونات العميل [قابلة للتسلسل](https://react.dev/reference/rsc/use-client#serializable-types). هذا يعني أن الخصائص يجب أن تكون بتنسيق يمكن لـ React تسلسله عند إرسال البيانات من الخادم إلى العميل.
+
+```tsx filename="app/components/counter.tsx" highlight={4} switcher
+'use client'
+
+export default function Counter({
+  onClick /* ❌ الدالة غير قابلة للتسلسل */,
+}) {
+  return (
+    <div>
+      <button onClick={onClick}>Increment</button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/components/counter.js" highlight={4} switcher
+'use client'
+
+export default function Counter({
+  onClick /* ❌ الدالة غير قابلة للتسلسل */,
+}) {
+  return (
+    <div>
+      <button onClick={onClick}>Increment</button>
+    </div>
+  )
+}
+```
+
+## تداخل مكونات العميل داخل مكونات الخادم
+
+يسمح لك دمج مكونات الخادم والعميل ببناء تطبيقات تكون سريعة الأداء وتفاعلية في نفس الوقت:
+
+1. **مكونات الخادم**: استخدمها للمحتوى الثابت، جلب البيانات، والعناصر الصديقة لمحركات البحث.
+2. **مكونات العميل**: استخدمها للعناصر التفاعلية التي تتطلب حالة، تأثيرات، أو واجهات برمجة تطبيقات المتصفح.
+3. **تكوين المكونات**: قم بتداخل مكونات العميل داخل مكونات الخادم حسب الحاجة لفصل واضح بين منطق الخادم والعميل.
+
+في المثال التالي:
+
+- `Header` هو مكون خادم يعالج المحتوى الثابت.
+- `Counter` هو مكون عميل يمكّن التفاعل داخل الصفحة.
+
+```tsx filename="app/page.tsx" highlight={2,8} switcher
+import Header from './header'
+import Counter from './counter' // هذا مكون عميل
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Counter />
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.js" highlight={2,8} switcher
+import Header from './header'
+import Counter from './counter' // هذا مكون عميل
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Counter />
+    </div>
+  )
+}
+```
+
+## المراجع
+
+راجع [وثائق React](https://react.dev/reference/rsc/use-client) لمزيد من المعلومات حول `'use client'`.