diff --git a/apps/docs/content/ar/blog/next-12-3.mdx b/apps/docs/content/ar/blog/next-12-3.mdx
new file mode 100644
index 00000000..42fa860d
--- /dev/null
+++ b/apps/docs/content/ar/blog/next-12-3.mdx
@@ -0,0 +1,180 @@
+---
+source-updated-at: 2025-05-29T18:05:49.000Z
+translation-updated-at: 2025-06-06T17:16:30.913Z
+title: Next.js 12.3
+description: >-
+  يُقدم Next.js 12.3 تثبيت TypeScript التلقائي، تحديث Fast Refresh محسن، مكون الصورة الجديد المستقر، والمزيد!
+author:
+  - name: بالاز أوربان
+    image: /static/team/balazs.jpg
+  - name: دونج يون كانج
+    image: /static/team/kdy.jpg
+  - name: جيا تشي ليو
+    image: /static/team/jiachi.png
+  - name: جاي جاي كاسبر
+    image: /static/team/jj.jpg
+  - name: مايا تيجاردن
+    image: /static/team/maia.jpg
+  - name: شو دينج
+    image: /static/team/shu.jpg
+  - name: ستيفن
+    image: /static/team/styfle.png
+  - name: تيم نيوتركينز
+    image: /static/team/tim.jpg
+date: 2022-09-08T16:00:00.507Z
+image: >-
+  https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/next-12-3/twitter-card.png
+---
+
+لقد قمنا بإصدار بعض التحسينات التي تعزز تجربة الاستخدام في Next.js مع الإصدار 12.3:
+
+*   [**Fast Refresh محسن:**](#improved-fast-refresh) ملفات `.env` و `jsconfig.json` و `tsconfig.json` الآن تعيد التحميل السريع.
+*   [**تثبيت TypeScript التلقائي:**](#typescript-auto-install) أضف ملف `.ts` لتكوين TypeScript تلقائيًا وتثبيت التبعيات.
+*   [**مكون الصورة:**](#image-component) `next/future/image` أصبح الآن مستقرًا.
+*   [**SWC Minifier:**](#swc-minifier-stable) تصغير الحجم باستخدام مترجم Next.js أصبح الآن مستقرًا.
+*   [**تحديث الموجه الجديد + التخطيطات:**](#new-router-and-layouts-update) بدأ التنفيذ وتم شرح الميزات الجديدة.
+
+قم بالتحديث اليوم عن طريق تشغيل `npm i next@latest`.
+
+> إعلان عن مؤتمر Next.js المجتمعي العالمي الثالث في 25 أكتوبر. [سجل الآن](https://nextjs.org/conf) →
+
+[Next.js Conf](#nextjs-conf)
+----------------------------
+
+أنت مدعو إلى المؤتمر المجتمعي العالمي لـ Next.js في 25 أكتوبر. بمناسبة الذكرى السادسة لـ Next.js، سنقدم:
+
+*   ميزات تستفيد من React Server Components و Streaming و Suspense.
+*   اصطلاحات تجعل من السهل على المطورين تحسين وتوسيع التطبيقات.
+*   أدوات مفتوحة المصدر تجعل التطوير المحلي وعمليات البناء للإنتاج أسرع.
+
+[احصل على تذكرتك المجانية](https://nextjs.org/conf) وشاهد مستقبل Next.js و React، وتابع [@nextjs](https://twitter.com/nextjs) لمزيد من الإعلانات قريبًا. نحن نبحث أيضًا عن محادثات مجتمعية. [قدم اقتراحًا لمحادثة](https://nextjs-conf.super.site/) وشارك قصة ما تقوم ببنائه باستخدام Next.js.
+
+[تثبيت TypeScript التلقائي](#typescript-auto-install)
+---------------------------------------------------
+
+يحتوي Next.js على دعم مدمج للتكوين التلقائي لـ TypeScript. سابقًا، إضافة TypeScript إلى مشروع موجود تطلب تثبيت التبعيات اللازمة يدويًا.
+
+مع هذا الإصدار، يكتشف Next.js تلقائيًا عند إضافة ملفات TypeScript إلى مشروع، يقوم بتثبيت التبعيات اللازمة وإضافة ملف `tsconfig.json`. يعمل هذا عند تشغيل `next dev` و `next build`.
+
+فيديو يوضح Next.js يقوم بالتثبيت التلقائي لـ TypeScript.
+
+[Fast Refresh محسن](#improved-fast-refresh)
+-----------------------------------------------
+
+التكرارات السريعة ضرورية لسير عمل التطوير المحلي. يستخدم Next.js [Fast Refresh](/docs/architecture/fast-refresh) للحصول على ملاحظات فورية على التعديلات التي تجريها على مكونات React. اضغط حفظ وشاهد التغييرات تنعكس في المتصفح _بدون_ الحاجة إلى إعادة تحميل الصفحة.
+
+مع Next.js 12.3، بعض ملفات التكوين الآن تعيد التحميل السريع عند إجراء التعديلات، بما في ذلك:
+
+*   `.env` و `env.*` المتغيرات
+*   `jsconfig.json`
+*   `tsconfig.json**
+
+لم تعد بحاجة إلى إعادة تشغيل خادم التطوير المحلي عند إجراء تغييرات على ملفات التكوين هذه.
+
+فيديو يوضح Next.js يعيد التحميل السريع لملف \`.env\`.
+
+[مكون الصورة](#image-component)
+-----------------------------------
+
+### [مكون `next/future/image` (مستقر)](#nextfutureimage-component-stable)
+
+في [Next.js 12.2](https://nextjs.org/blog/next-12-2)، شاركنا معاينة تجريبية لمكون **جديد** للصورة يبسط كيفية تنسيق الصور ويحسن الأداء باستخدام التحميل الكسول للمتصفح الأصلي.
+
+أصبح مكون الصورة الجديد الآن مستقرًا ولم يعد يتطلب علامة تجريبية.
+
+منذ الإصدار الأخير، قمنا بإجراء المزيد من التحسينات:
+
+*   أضفنا دعمًا لوضع التخطيط `fill` الذي يجعل الصورة تملأ العنصر الأصلي.
+*   حسّننا العنصر النائب blur-up ليعمل مع الصور الشفافة، لم يعد يحتاج إلى `<noscript>`، و `next dev` يتطابق مع `next start`.
+*   منعنا الانزياح الطفيف في التخطيط (في المتصفحات غير Chrome) عن طريق إخفاء نص `alt` أثناء تحميل الصورة.
+*   أصبحت خاصية `alt` مطلوبة لتحسين إمكانية الوصول.
+*   أصلحنا خاصية `onError` عند حدوث خطأ قبل الترطيب.
+*   أصلحنا نسبة العرض إلى الارتفاع للصورة المستوردة بشكل ثابت التي تحتوي فقط على `width` أو `height`.
+*   حسّننا رسائل الخطأ عند استخدام إعدادات أو تكوين غير صحيح.
+
+في المستقبل، نخطط لإعادة تسمية `next/image` إلى `next/legacy/image` و `next/future/image` إلى `next/image`. سيوفر هذا تجربة رائعة لمشاريع Next.js الجديدة وستتمكن المشاريع الحالية من الترحيل بسهولة باستخدام أداة التعديل التلقائي `next/image`. سنقدم المزيد من التفاصيل مع اقتراب الإصدار الرئيسي التالي.
+
+لمزيد من المعلومات حول كيفية استخدامه اليوم، يرجى الرجوع إلى [الوثائق](/docs/pages/building-your-application/optimizing/images) التي تتضمن دليل الترحيل.
+
+### [أنماط عن بعد (مستقرة)](#remote-patterns-stable)
+
+`remotePatterns` تتيح لك تحديد أحرف البدل للصور البعيدة عند استخدام واجهة برمجة التطبيقات المدمجة لتحسين الصور. تتيح مطابقة أكثر قوة تتجاوز تكوين `images.domains` الحالي، الذي يقوم فقط بمطابقة دقيقة لاسم النطاق.
+
+أصبح هذا الخيار الآن مستقرًا ويمكن استخدامه مع خيار التكوين التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        // يجب أن ينتهي اسم المضيف لخاصية `src` بـ `.example.com`،
+        // وإلا ستستجيب واجهة برمجة التطبيقات بـ 400 طلب غير صالح.
+        protocol: 'https',
+        hostname: '**.example.com',
+      },
+    ],
+  },
+};
+```
+
+### [تعطيل تحسين الصورة (مستقر)](#disable-image-optimization-stable)
+
+تتطلب واجهة برمجة التطبيقات لتحسين الصورة خادمًا لتحسين الصور عند الطلب. يعمل هذا بشكل رائع عند الاستضافة الذاتية باستخدام `next start` أو النشر على منصات مثل [Vercel](https://vercel.com/solutions/nextjs). ومع ذلك، لن يعمل هذا مع `next export` لأنه لا يتضمن خادمًا لتحسين الصور. سابقًا، كنت بحاجة إلى تكوين موفر تحسين صور طرف ثالث باستخدام خاصية `loader`، ولكن الآن يمكنك تعطيل تحسين الصورة تمامًا باستخدام `next.config.js` لجميع حالات `next/image`.
+
+أصبح هذا الخيار التجريبي السابق الآن مستقرًا ويمكن استخدامه مع خيار التكوين التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    unoptimized: true,
+  },
+};
+```
+
+[SWC Minifier (مستقر)](#swc-minifier-stable)
+---------------------------------------------
+
+في Next.js 12، قدمنا تصغير الكود باستخدام SWC كجزء من الميزات التجريبية لـ [مترجم Next.js](/docs/architecture/nextjs-compiler). أظهرت النتائج المبكرة أن التصغير باستخدام SWC كان **أسرع بـ 7 مرات** من الإصدار السابق مع Terser.
+
+مع هذا الإصدار، أصبحت الميزة مستقرة ويمكنك تفعيلها باستخدام خيار `next.config.js` التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  swcMinify: true,
+};
+```
+
+نخطط لجعل SWC minifier الافتراضي في الإصدار الرئيسي التالي.
+
+[تحديث الموجه الجديد والتخطيطات](#new-router-and-layouts-update)
+---------------------------------------------------------------
+
+في وقت سابق من هذا العام، نشرنا [Layouts RFC](https://nextjs.org/blog/layouts-rfc) الذي قدم أكبر تحديث لـ Next.js منذ إصداره في 2016. تتضمن هذه التغييرات موجهًا جديدًا مبنيًا على React Server Components. بدأ العمل على التنفيذ ونحن نعمل نحو إصدار تجريبي عام في الإصدار الرئيسي التالي.
+
+اليوم، نشارك المزيد من المعلومات حول الميزات القادمة، بما في ذلك:
+
+*   [مجموعات المسار](https://nextjs.org/blog/layouts-rfc#route-groups): تُستخدم لإخراج المسارات من التخطيطات، وتنظيم المسارات دون التأثير على مسارات URL.
+*   [حالات التحميل الفوري](https://nextjs.org/blog/layouts-rfc#instant-loading-states): اصطلاح ملف جديد لإضافة واجهة تحميل بسهولة، مبنية باستخدام Suspense.
+*   [معالجة الأخطاء](https://nextjs.org/blog/layouts-rfc#error-handling): اصطلاح ملف جديد لإضافة حدود خطأ متداخلة وواجهة أخطاء بسهولة.
+*   [القوالب](https://nextjs.org/blog/layouts-rfc#templates): اصطلاح ملف جديد لإضافة واجهة مشتركة تنشئ مثيلًا مختلفًا ولا تشارك الحالة.
+*   [المسارات الاعتراضية](https://nextjs.org/blog/layouts-rfc#intercepting-routes)، [المسارات المتوازية](https://nextjs.org/blog/layouts-rfc#dynamic-parallel-routes)، و[المسارات الشرطية](https://nextjs.org/blog/layouts-rfc#conditional-routes): اصطلاحات جديدة تسمح لك بتنفيذ أنماط توجيه متقدمة.
+
+بالإضافة إلى ذلك، في [RFC مختلف](https://github.com/vercel/next.js/discussions/27953)، نستكشف إضافة دعم **للاستيراد العالمي لـ CSS** في دليل `app` الجديد. سيسمح لك ذلك باستخدام الحزم التي تستورد ملفات `.css` الخاصة بها دون تكوين إضافي.
+
+اقرأ المزيد عن هذه الميزات الجديدة في [Layouts RFC](https://nextjs.org/blog/layouts-rfc).
+
+[تحسينات أخرى](#other-improvements)
+-----------------------------------------
+
+*   [وثائق جديدة](/docs/accessibility) حول ميزات إمكانية الوصول المدمجة في Next.js.
+*   قوالب `create-next-app` تتضمن الآن دعم الوضع المظلم تلقائيًا باستخدام تفضيلات نظامك.
+*   `src/` أصبح الآن دليلًا افتراضيًا للفحص عند استخدام [دعم ESLint المدمج](/docs/pages/building-your-application/configuring/eslint).
+*   `next.config.js` يتضمن الآن تحققًا من الصحة باستخدام `ajv`، مما يساعد على منع سوء استخدام خيارات التكوين.
+*   `next.config.js` يحتوي الآن على علامة تكوين تجريبية `fallbackNodePolyfills: false` لمنع Next.js من توفير polyfills لواجهات برمجة تطبيقات Node.js للمتصفح (مما يؤدي إلى زيادة أحجام الحزم). سيؤدي هذا الخيار إلى ظهور خطأ في وقت البناء يوضح مصدر الاستيراد غير الضروري.
+
+[المجتمع](#community)
+-----------------------
+
+Next.js هو نتيجة العمل المشترك لأكثر من **2000 مطور فردي**، وشركاء صناعيين مثل Google Chrome و Meta، وفريقنا الأساسي في Vercel.
+
+جاء هذا الإصدار بفضل مساهمات: @pthomas931، @madmed88، @sanjaiyan-dev، @balazsorban44، @DonghyukJacobJang، @chaiwattsw، @styfle، @dunglas، @ahkhanjani، @promer94، @terrierscript، @shawncal، @insik-han، @QuiiBz، @ykzts، @JoshuaKGoldberg، @lucasassisrosa، @dikwickley، @Brooooooklyn، @sicarius97، @FourwingsY، @manovotny، @SukkaW، @pepoeverton، @jdeniau، @sumiren، @anthonyshew، @pekarja5، @huozhi، @leerob، @fediev، @atcastle، @shuding، @feugy، @jonohewitt، @zakiego، @Schniz، @timneutkens، @wyattjoh، @MaedahBatool، @X7Becka، @nnnnoel، @dcdev67، @alvinometric، @timothympace، @jeferson-sb، @ijjk، @theMosaad، @Yuddomack، @msquitieri، @andreizanik، @nix6839، @thomasballinger، @ziishaned، @xyeres، @nyedidikeke، @maxproske، @sokra، @titusdmoore، @thebergamo، @fikrikarim، @Kikobeats، @clearlyTHUYDOAN، @nasso، @qutek، @kdy1، @kyliau، @housseindjirdeh، @barissayil، @seveibar، @Jessidhia، @santidalmasso، @JohnDaly، @Nikhilnama18، @mduleone، @colinhacks، @ductnn، @josh، @hiro0218، @eltociear، @kwonoj، @valcosmos، @mihaic195، @stefanprobst، @KATT، @thiagomorales، @danielcavanagh، @steven-tey، @hellomhc، @trevor-fauna، @nguyenyou، @eminvergil، @lobsterkatie، @dorian-davis، @sambecker، @isaac-martin، @lfades، @amorimr، @javivelasco، @mongolyy، @Thisen، @zorrolisto، @ethomson، @padmaia، @thisisjofrank، @dominiksipowicz، @awareness481، @pakaponk، @apledger، @longzheng، @tknickman، @rbrcsk، @emersonlaurentino، @carstenlebek، @edusig، @riccardogiorato، @hanneslund، @ryanhaticus، @j-mendez، @armandabric، @WinmezzZ، @andershagbard، @dammy001، @MarDi66، @okmttdhr، @rishabhpoddar، @marjorg، @dustinsgoodman، و @zanechua.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/10-updating-data.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/10-updating-data.mdx
index 812a8d1d..c74cfc64 100644
--- a/apps/docs/content/ar/docs/01-app/01-getting-started/10-updating-data.mdx
+++ b/apps/docs/content/ar/docs/01-app/01-getting-started/10-updating-data.mdx
@@ -1,33 +1,33 @@
 ---
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:02:37.609Z
+source-updated-at: 2025-06-03T15:30:49.000Z
+translation-updated-at: 2025-06-06T17:18:45.960Z
 title: كيفية تحديث البيانات
 nav_title: تحديث البيانات
 description: تعلم كيفية تحديث البيانات في تطبيق Next.js الخاص بك.
 related:
   title: مرجع API
-  description: تعلم المزيد عن الميزات المذكورة في هذه الصفحة من خلال قراءة مرجع API.
+  description: تعرف على المزيد حول الميزات المذكورة في هذه الصفحة من خلال قراءة مرجع API.
   links:
     - app/api-reference/functions/revalidatePath
     - app/api-reference/functions/revalidateTag
     - app/api-reference/functions/redirect
 ---
 
-يمكنك تحديث البيانات في Next.js باستخدام [وظائف الخادم (Server Functions)](https://react.dev/reference/rsc/server-functions) الخاصة بـ React. هذه الصفحة ستشرح كيفية [إنشاء](#creating-server-functions) و[استدعاء](#invoking-server-functions) وظائف الخادم.
+يمكنك تحديث البيانات في Next.js باستخدام [وظائف الخادم (Server Functions)](https://react.dev/reference/rsc/server-functions) الخاصة بـ React. ستوضح هذه الصفحة كيفية [إنشاء](#creating-server-functions) و[استدعاء](#invoking-server-functions) وظائف الخادم.
 
 ## وظائف الخادم
 
-وظيفة الخادم هي وظيفة غير متزامنة يتم تنفيذها على الخادم. وظائف الخادم غير متزامنة بطبيعتها لأنها يتم استدعاؤها من قبل العميل باستخدام طلب شبكة. عند استدعائها كجزء من `action`، تُسمى أيضًا **إجراءات الخادم (Server Actions)**.
+وظيفة الخادم هي وظيفة غير متزامنة يتم تنفيذها على الخادم. وظائف الخادم غير متزامنة بطبيعتها لأنها تُستدعى من قبل العميل باستخدام طلب شبكة. عند استدعائها كجزء من `action`، تُسمى أيضًا **إجراءات الخادم (Server Actions)**.
 
-حسب الاصطلاح، `action` هي وظيفة غير متزامنة يتم تمريرها إلى `startTransition`. يتم تغليف وظائف الخادم تلقائيًا بـ `startTransition` عندما:
+بشكل اصطلاحي، `action` هي وظيفة غير متزامنة يتم تمريرها إلى `startTransition`. يتم تغليف وظائف الخادم تلقائيًا بـ `startTransition` عندما:
 
-- يتم تمريرها إلى `<form>` باستخدام خاصية `action`،
+- يتم تمريرها إلى `<form>` باستخدام خاصية `action`
 - يتم تمريرها إلى `<button>` باستخدام خاصية `formAction`
 - يتم تمريرها إلى `useActionState`
 
 ## إنشاء وظائف الخادم
 
-يمكن تعريف وظيفة الخادم باستخدام توجيه [`use server`](https://react.dev/reference/rsc/use-server). يمكنك وضع التوجيه في أعلى **وظيفة غير متزامنة** لوضع علامة على الوظيفة كوظيفة خادم، أو في أعلى ملف منفصل لوضع علامة على جميع الصادرات من ذلك الملف.
+يمكن تعريف وظيفة الخادم باستخدام توجيه [`use server`](https://react.dev/reference/rsc/use-server). يمكنك وضع التوجيه في أعلى وظيفة **غير متزامنة** لوضع علامة على الوظيفة كوظيفة خادم، أو في أعلى ملف منفصل لوضع علامة على جميع الصادرات من ذلك الملف.
 
 ```ts filename="app/lib/actions.ts" switcher
 export async function createPost(formData: FormData) {
@@ -36,7 +36,7 @@ export async function createPost(formData: FormData) {
   const content = formData.get('content')
 
   // تحديث البيانات
-  // إعادة التحقق من ذاكرة التخزين المؤقت
+  // إعادة التحقق من صحة الذاكرة المؤقتة
 }
 
 export async function deletePost(formData: FormData) {
@@ -44,7 +44,7 @@ export async function deletePost(formData: FormData) {
   const id = formData.get('id')
 
   // تحديث البيانات
-  // إعادة التحقق من ذاكرة التخزين المؤقت
+  // إعادة التحقق من صحة الذاكرة المؤقتة
 }
 ```
 
@@ -55,7 +55,7 @@ export async function createPost(formData) {
   const content = formData.get('content')
 
   // تحديث البيانات
-  // إعادة التحقق من ذاكرة التخزين المؤقت
+  // إعادة التحقق من صحة الذاكرة المؤقتة
 }
 
 export async function deletePost(formData) {
@@ -63,7 +63,7 @@ export async function deletePost(formData) {
   const id = formData.get('id')
 
   // تحديث البيانات
-  // إعادة التحقق من ذاكرة التخزين المؤقت
+  // إعادة التحقق من صحة الذاكرة المؤقتة
 }
 ```
 
@@ -97,7 +97,7 @@ export default function Page() {
 
 ### مكونات العميل
 
-لا يمكن تعريف وظائف الخادم في مكونات العميل. ومع ذلك، يمكنك استدعاؤها في مكونات العميل عن طريق استيرادها من ملف يحتوي على توجيه `"use server"` في أعلىه:
+لا يمكن تعريف وظائف الخادم في مكونات العميل. ومع ذلك، يمكنك استدعاؤها في مكونات العميل عن طريق استيرادها من ملف يحتوي على توجيه `"use server"` في أعلى الملف:
 
 ```ts filename="app/actions.ts" switcher
 'use server'
@@ -140,9 +140,9 @@ export function Button() {
 
 ### النماذج
 
-يمتد React عنصر [`<form>`](https://react.dev/reference/react-dom/components/form) في HTML للسماح باستدعاء وظيفة الخادم باستخدام خاصية `action` في HTML.
+يمتد React لعنصر [`<form>`](https://react.dev/reference/react-dom/components/form) في HTML للسماح باستدعاء وظيفة الخادم باستخدام خاصية `action` في HTML.
 
-عند استدعائها في نموذج، تتلقى الوظيفة تلقائيًا كائن [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData). يمكنك استخراج البيانات باستخدام [طرق FormData الأصلية](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods):
+عند استدعائها في نموذج، تتلقى الوظيفة تلقائيًا كائن [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData). يمكنك استخراج البيانات باستخدام [طرق `FormData` الأصلية](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods):
 
 ```tsx filename="app/ui/form.tsx" switcher
 import { createPost } from '@/app/actions'
@@ -180,7 +180,7 @@ export async function createPost(formData: FormData) {
   const content = formData.get('content')
 
   // تحديث البيانات
-  // إعادة التحقق من ذاكرة التخزين المؤقت
+  // إعادة التحقق من صحة الذاكرة المؤقتة
 }
 ```
 
@@ -192,7 +192,7 @@ export async function createPost(formData) {
   const content = formData.get('content')
 
   // تحديث البيانات
-  // إعادة التحقق من ذاكرة التخزين المؤقت
+  // إعادة التحقق من صحة الذاكرة المؤقتة
 }
 ```
 
@@ -220,7 +220,7 @@ export default function LikeButton({ initialLikes }: { initialLikes: number }) {
           setLikes(updatedLikes)
         }}
       >
-        أعجبني
+        إعجاب
       </button>
     </>
   )
@@ -245,7 +245,7 @@ export default function LikeButton({ initialLikes }) {
           setLikes(updatedLikes)
         }}
       >
-        أعجبني
+        إعجاب
       </button>
     </>
   )
@@ -256,12 +256,12 @@ export default function LikeButton({ initialLikes }) {
 
 ### عرض حالة الانتظار
 
-أثناء تنفيذ وظيفة الخادم، يمكنك عرض مؤشر تحميل باستخدام خطاف React [`useActionState`](https://react.dev/reference/react/useActionState). يُرجع هذا الخطاف قيمة منطقية `pending`:
+أثناء تنفيذ وظيفة الخادم، يمكنك عرض مؤشر تحميل باستخدام خطاف [`useActionState`](https://react.dev/reference/react/useActionState) الخاص بـ React. يُرجع هذا الخطاف قيمة منطقية `pending`:
 
 ```tsx filename="app/ui/button.tsx" switcher
 'use client'
 
-import { useActionState } from 'react'
+import { useActionState, startTransition } from 'react'
 import { createPost } from '@/app/actions'
 import { LoadingSpinner } from '@/app/ui/loading-spinner'
 
@@ -269,7 +269,7 @@ export function Button() {
   const [state, action, pending] = useActionState(createPost, false)
 
   return (
-    <button onClick={async () => action()}>
+    <button onClick={() => startTransition(action)}>
       {pending ? <LoadingSpinner /> : 'إنشاء منشور'}
     </button>
   )
@@ -279,7 +279,7 @@ export function Button() {
 ```jsx filename="app/ui/button.js" switcher
 'use client'
 
-import { useActionState } from 'react'
+import { useActionState, startTransition } from 'react'
 import { createPost } from '@/app/actions'
 import { LoadingSpinner } from '@/app/ui/loading-spinner'
 
@@ -287,16 +287,16 @@ export function Button() {
   const [state, action, pending] = useActionState(createPost, false)
 
   return (
-    <button onClick={async () => action()}>
+    <button onClick={() => startTransition(action)}>
       {pending ? <LoadingSpinner /> : 'إنشاء منشور'}
     </button>
   )
 }
 ```
 
-### إعادة التحقق من ذاكرة التخزين المؤقت
+### إعادة التحقق من صحة الذاكرة المؤقتة
 
-بعد إجراء تحديث، يمكنك إعادة التحقق من ذاكرة التخزين المؤقت في Next.js وعرض البيانات المحدثة عن طريق استدعاء [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) أو [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) داخل وظيفة الخادم:
+بعد إجراء تحديث، يمكنك إعادة التحقق من صحة ذاكرة Next.js المؤقتة وعرض البيانات المحدثة عن طريق استدعاء [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) أو [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) داخل وظيفة الخادم:
 
 ```ts filename="app/lib/actions.ts" switcher
 import { revalidatePath } from 'next/cache'
@@ -323,7 +323,7 @@ export async function createPost(formData) {
 
 ### إعادة التوجيه
 
-قد ترغب في توجيه المستخدم إلى صفحة مختلفة بعد إجراء تحديث. يمكنك القيام بذلك عن طريق استدعاء [`redirect`](/docs/app/api-reference/functions/redirect) داخل وظيفة الخادم:
+قد ترغب في إعادة توجيه المستخدم إلى صفحة مختلفة بعد إجراء تحديث. يمكنك القيام بذلك عن طريق استدعاء [`redirect`](/docs/app/api-reference/functions/redirect) داخل وظيفة الخادم:
 
 ```ts filename="app/lib/actions.ts" switcher
 'use server'
diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/14-deploying.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/14-deploying.mdx
index 70a635ca..b9f99aea 100644
--- a/apps/docs/content/ar/docs/01-app/01-getting-started/14-deploying.mdx
+++ b/apps/docs/content/ar/docs/01-app/01-getting-started/14-deploying.mdx
@@ -1,19 +1,19 @@
 ---
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:01:29.181Z
+source-updated-at: 2025-06-05T23:52:35.000Z
+translation-updated-at: 2025-06-06T17:17:41.883Z
 title: كيفية نشر تطبيق Next.js الخاص بك
 nav_title: النشر
 description: تعلم كيفية نشر تطبيق Next.js الخاص بك.
 ---
 
-يمكن نشر Next.js كخادم Node.js، أو حاوية Docker، أو تصدير ثابت، أو تكييفه للعمل على منصات مختلفة.
+يمكن نشر تطبيق Next.js كخادم Node.js، أو حاوية Docker، أو تصدير ثابت، أو تكييفه للعمل على منصات مختلفة.
 
-| خيار النشر                     | دعم الميزات      |
-| ----------------------------- | ---------------- |
-| [خادم Node.js](#nodejs-server) | الكل             |
-| [حاوية Docker](#docker)       | الكل             |
-| [تصدير ثابت](#static-export)  | محدود            |
-| [المحولات](#adapters)         | حسب المنصة       |
+| خيار النشر                      | دعم الميزات       |
+| ------------------------------ | ----------------- |
+| [خادم Node.js](#nodejs-server) | الكل              |
+| [حاوية Docker](#docker)        | الكل              |
+| [التصدير الثابت](#static-export) | محدود            |
+| [المحولات](#adapters)          | حسب المنصة        |
 
 ## خادم Node.js
 
@@ -29,11 +29,11 @@ description: تعلم كيفية نشر تطبيق Next.js الخاص بك.
 }
 ```
 
-ثم، قم بتشغيل `npm run build` لبناء تطبيقك و `npm run start` لبدء خادم Node.js. يدعم هذا الخادم جميع ميزات Next.js. إذا لزم الأمر، يمكنك أيضًا الانتقال إلى [خادم مخصص](/docs/app/guides/custom-server).
+ثم، قم بتشغيل `npm run build` لبناء التطبيق و `npm run start` لبدء خادم Node.js. يدعم هذا الخادم جميع ميزات Next.js. إذا لزم الأمر، يمكنك أيضًا الانتقال إلى [خادم مخصص](/docs/app/guides/custom-server).
 
 تدعم عمليات النشر باستخدام Node.js جميع ميزات Next.js. تعلم كيفية [تكوينها](/docs/app/guides/self-hosting) للبنية التحتية الخاصة بك.
 
-### القوالب
+### قوالب
 
 - [Flightcontrol](https://github.com/nextjs/deploy-flightcontrol)
 - [Railway](https://github.com/nextjs/deploy-railway)
@@ -41,11 +41,13 @@ description: تعلم كيفية نشر تطبيق Next.js الخاص بك.
 
 ## Docker
 
-يمكن نشر Next.js على أي مزود يدعم حاويات [Docker](https://www.docker.com/). وهذا يشمل منظمات الحاويات مثل Kubernetes أو مزود سحابي يعمل بـ Docker.
+يمكن نشر Next.js على أي مزود يدعم حاويات [Docker](https://www.docker.com/). وهذا يشمل منظمات الحاويات مثل Kubernetes أو مزود سحابي يعمل مع Docker.
 
 تدعم عمليات النشر باستخدام Docker جميع ميزات Next.js. تعلم كيفية [تكوينها](/docs/app/guides/self-hosting) للبنية التحتية الخاصة بك.
 
-### القوالب
+> **ملاحظة للتنمية:** بينما Docker ممتاز لنشر الإنتاج، فكر في استخدام التنمية المحلية (`npm run dev`) بدلاً من Docker أثناء التطوير على أجهزة Mac وWindows لأداء أفضل. [تعلم المزيد عن تحسين التنمية المحلية](/docs/app/guides/local-development).
+
+### قوالب
 
 - [Docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker)
 - [Docker متعدد البيئات](https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env)
@@ -59,17 +61,17 @@ description: تعلم كيفية نشر تطبيق Next.js الخاص بك.
 
 يتيح Next.js البدء كموقع ثابت أو [تطبيق صفحة واحدة (SPA)](/docs/app/guides/single-page-applications)، ثم الترقية لاحقًا لاستخدام الميزات التي تتطلب خادمًا.
 
-بما أن Next.js يدعم [التصدير الثابت](/docs/app/guides/static-exports)، فيمكن نشره واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة مثل HTML/CSS/JS. وهذا يشمل أدوات مثل AWS S3، أو Nginx، أو Apache.
+بما أن Next.js يدعم [التصدير الثابت](/docs/app/guides/static-exports)، فيمكن نشره واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة من HTML/CSS/JS. وهذا يشمل أدوات مثل AWS S3، أو Nginx، أو Apache.
 
-تشغيل [التصدير الثابت](/docs/app/guides/static-exports) **لا يدعم** ميزات Next.js التي تتطلب خادمًا. [تعلم المزيد](/docs/app/guides/static-exports#unsupported-features).
+التشغيل كـ [تصدير ثابت](/docs/app/guides/static-exports) **لا يدعم** ميزات Next.js التي تتطلب خادمًا. [تعلم المزيد](/docs/app/guides/static-exports#unsupported-features).
 
-### القوالب
+### قوالب
 
 - [GitHub Pages](https://github.com/nextjs/deploy-github-pages)
 
 ## المحولات
 
-يمكن تكييف Next.js للعمل على منصات مختلفة لدعم قدرات بنيتها التحتية.
+يمكن تكييف Next.js للعمل على منصات مختلفة لدعم إمكانيات بنيتها التحتية.
 
 راجع وثائق كل مزود للحصول على معلومات حول ميزات Next.js المدعومة:
 
@@ -79,4 +81,4 @@ description: تعلم كيفية نشر تطبيق Next.js الخاص بك.
 - [Netlify](https://docs.netlify.com/frameworks/next-js/overview/#next-js-support-on-netlify)
 - [Vercel](https://vercel.com/docs/frameworks/nextjs)
 
-> **ملاحظة:** نحن نعمل على [واجهة برمجة تطبيقات محولات النشر](https://github.com/vercel/next.js/discussions/77740) لاعتمادها من قبل جميع المنصات. بعد الانتهاء، سنضيف وثائق حول كيفية كتابة محولاتك الخاصة.
\ No newline at end of file
+> **ملاحظة:** نحن نعمل على [واجهة برمجة تطبيقات محولات النشر](https://github.com/vercel/next.js/discussions/77740) لتبنيها جميع المنصات. بعد الانتهاء، سنضيف وثائق حول كيفية كتابة محولاتك الخاصة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/01-app/02-guides/local-development.mdx b/apps/docs/content/ar/docs/01-app/02-guides/local-development.mdx
index 150e1b5e..4632844c 100644
--- a/apps/docs/content/ar/docs/01-app/02-guides/local-development.mdx
+++ b/apps/docs/content/ar/docs/01-app/02-guides/local-development.mdx
@@ -1,26 +1,26 @@
 ---
-source-updated-at: 2025-05-19T22:31:51.000Z
-translation-updated-at: 2025-06-02T20:00:29.522Z
+source-updated-at: 2025-06-05T23:52:35.000Z
+translation-updated-at: 2025-06-06T17:18:18.930Z
 title: كيفية تحسين بيئة التطوير المحلية لديك
 nav_title: بيئة التطوير
 description: تعلم كيفية تحسين بيئة التطوير المحلية باستخدام Next.js.
 ---
 
-تم تصميم Next.js لتوفير تجربة ممتازة للمطورين. مع نمو تطبيقك، قد تلاحظ بطئًا في أوقات الترجمة أثناء التطوير المحلي. سيساعدك هذا الدليل في تحديد وإصلاح مشاكل الأداء الشائعة المتعلقة بوقت الترجمة.
+تم تصميم Next.js لتوفير تجربة ممتازة للمطورين. مع نمو تطبيقك، قد تلاحظ بطئًا في أوقات الترجمة أثناء التطوير المحلي. سيساعدك هذا الدليل في تحديد وإصلاح مشاكل الأداء الشائعة أثناء الترجمة.
 
 ## التطوير المحلي مقابل الإنتاج
 
-تختلف عملية التطوير باستخدام `next dev` عن `next build` و `next start`.
+عملية التطوير باستخدام `next dev` تختلف عن `next build` و `next start`.
 
-`next dev` يترجم مسارات التطبيق أثناء فتحها أو التنقل إليها. هذا يتيح لك بدء خادم التطوير دون انتظار ترجمة كل المسارات في التطبيق، مما يجعل العملية أسرع ويستهلك ذاكرة أقل. بينما يقوم بناء الإنتاج بتطبيق تحسينات أخرى مثل تصغير الملفات وإنشاء تجزئات المحتوى، والتي لا تكون ضرورية للتطوير المحلي.
+`next dev` تقوم بترجمة المسارات في تطبيقك أثناء فتحها أو التنقل إليها. هذا يمكّنك من بدء خادم التطوير دون انتظار ترجمة كل المسارات في تطبيقك، مما يجعل العملية أسرع ويستهلك ذاكرة أقل. بينما يقوم بناء الإنتاج بتطبيق تحسينات أخرى مثل تصغير الملفات وإنشاء تجزئات المحتوى، والتي لا تكون ضرورية للتطوير المحلي.
 
 ## تحسين أداء التطوير المحلي
 
 ### 1. تحقق من برنامج مكافحة الفيروسات على جهازك
 
-يمكن لبرامج مكافحة الفيروسات إبطاء الوصول إلى الملفات.
+برامج مكافحة الفيروسات يمكن أن تبطئ الوصول إلى الملفات.
 
-حاول إضافة مجلد مشروعك إلى قائمة الاستثناءات في برنامج مكافحة الفيروسات. بينما يكون هذا أكثر شيوعًا على أجهزة ويندوز، نوصي به لأي نظام مثبت عليه أداة مكافحة فيروسات.
+حاول إضافة مجلد مشروعك إلى قائمة الاستثناءات في برنامج مكافحة الفيروسات. بينما يكون هذا أكثر شيوعًا على أجهزة Windows، نوصي به لأي نظام مثبت عليه أداة مكافحة فيروسات.
 
 ### 2. قم بتحديث Next.js وتمكين Turbopack
 
@@ -33,15 +33,15 @@ npm install next@latest
 npm run dev --turbopack
 ```
 
-[تعرف على المزيد حول Turbopack](/blog/turbopack-for-development-stable). راجع [أدلة الترقية](/docs/app/guides/upgrading) وأدوات التعديل التلقائي لمزيد من المعلومات.
+[تعلم المزيد عن Turbopack](/blog/turbopack-for-development-stable). راجع [أدلة الترقية](/docs/app/guides/upgrading) وأدوات التعديل التلقائي لمزيد من المعلومات.
 
 ### 3. تحقق من عمليات الاستيراد الخاصة بك
 
-يمكن أن تؤثر طريقة استيراد الكود بشكل كبير على وقت الترجمة والتعبئة. تعلم المزيد حول [تحسين تجميع الحزم](/docs/app/guides/package-bundling) واستكشف أدوات مثل [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) أو [Madge](https://github.com/pahen/madge).
+طريقة استيرادك للكود يمكن أن تؤثر بشكل كبير على وقت الترجمة والتجميع. تعلم المزيد عن [تحسين تجميع الحزم](/docs/app/guides/package-bundling) واستكشف أدوات مثل [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) أو [Madge](https://github.com/pahen/madge).
 
 ### مكتبات الأيقونات
 
-مكتبات مثل `@material-ui/icons` أو `react-icons` يمكنها استيراد آلاف الأيقونات، حتى لو كنت تستخدم عددًا قليلاً فقط. حاول استيراد الأيقونات التي تحتاجها فقط:
+مكتبات مثل `@material-ui/icons` أو `react-icons` يمكنها استيراد آلاف الأيقونات، حتى إذا كنت تستخدم عددًا قليلاً فقط. حاول استيراد الأيقونات التي تحتاجها فقط:
 
 ```jsx
 // بدلاً من هذا:
@@ -52,7 +52,7 @@ import Icon1 from 'react-icons/md/Icon1'
 import Icon2 from 'react-icons/md/Icon2'
 ```
 
-تحتوي مكتبات مثل `react-icons` على العديد من مجموعات الأيقونات المختلفة. اختر مجموعة واحدة والتزم بها.
+مكتبات مثل `react-icons` تتضمن العديد من مجموعات الأيقونات المختلفة. اختر مجموعة واحدة والتزم بها.
 
 على سبيل المثال، إذا كان تطبيقك يستخدم `react-icons` ويستورد كل هذه المجموعات:
 
@@ -61,9 +61,9 @@ import Icon2 from 'react-icons/md/Icon2'
 - `tb` (tabler-icons)
 - `cg` (cssgg)
 
-سيكون مجموعها عشرات الآلاف من الوحدات التي يجب على المترجم التعامل معها، حتى لو كنت تستخدم استيرادًا واحدًا فقط من كل مجموعة.
+مجتمعة سيكون هناك عشرات الآلاف من الوحدات التي يجب على المترجم التعامل معها، حتى إذا كنت تستخدم استيرادًا واحدًا فقط من كل مجموعة.
 
-### ملفات البرميل (Barrel files)
+### ملفات البرميل
 
 "ملفات البرميل" هي ملفات تصدر العديد من العناصر من ملفات أخرى. يمكنها إبطاء عمليات البناء لأن المترجم يجب أن يحللها للعثور على ما إذا كانت هناك تأثيرات جانبية في نطاق الوحدة باستخدام الاستيراد.
 
@@ -81,24 +81,24 @@ module.exports = {
 }
 ```
 
-يقوم Turbopack تلقائيًا بتحليل عمليات الاستيراد وتحسينها. لا يحتاج إلى هذا التكوين.
+يقوم Turbopack تلقائيًا بتحليل عمليات الاستيراد وتحسينها. لا يتطلب هذا التكوين.
 
-### 4. تحقق من إعداد Tailwind CSS
+### 4. تحقق من إعداد Tailwind CSS الخاص بك
 
 إذا كنت تستخدم Tailwind CSS، تأكد من إعداده بشكل صحيح.
 
 خطأ شائع هو تكوين مصفوفة `content` بطريقة تتضمن `node_modules` أو مجلدات كبيرة أخرى من الملفات التي لا يجب فحصها.
 
-سيحذرك إصدار Tailwind CSS 3.4.8 أو الأحدث من الإعدادات التي قد تبطئ عملية البناء.
+إصدار Tailwind CSS 3.4.8 أو أحدث سوف يحذرك من الإعدادات التي قد تبطئ عملية البناء.
 
-1. في ملف `tailwind.config.js`، كن محددًا بشأن الملفات التي تريد فحصها:
+1. في `tailwind.config.js`، كن محددًا بشأن الملفات التي يجب فحصها:
 
    ```jsx
    module.exports = {
      content: [
        './src/**/*.{js,ts,jsx,tsx}', // جيد
-       // هذا قد يكون واسعًا جدًا
-       // سيطابق `packages/**/node_modules` أيضًا
+       // قد يكون هذا واسعًا جدًا
+       // سيطابق أيضًا `packages/**/node_modules`
        // '../../packages/**/*.{js,ts,jsx,tsx}',
      ],
    }
@@ -117,27 +117,41 @@ module.exports = {
 
 ### 5. تحقق من إعدادات webpack المخصصة
 
-إذا أضفت إعدادات webpack مخصصة، فقد تكون تبطئ عملية الترجمة.
+إذا أضفت إعدادات webpack مخصصة، فقد تبطئ عملية الترجمة.
 
-فكر فيما إذا كنت حقًا بحاجة إليها للتطوير المحلي. يمكنك اختياريًا تضمين أدوات معينة فقط لبناء الإنتاج، أو استكشاف الانتقال إلى Turbopack واستخدام [أحمال](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders).
+فكر فيما إذا كنت بحاجة إليها حقًا للتطوير المحلي. يمكنك اختياريًا تضمين أدوات معينة فقط لبناء الإنتاج، أو استكشاف الانتقال إلى Turbopack واستخدام [أحمال](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders).
 
 ### 6. تحسين استخدام الذاكرة
 
 إذا كان تطبيقك كبيرًا جدًا، فقد يحتاج إلى ذاكرة أكثر.
 
-[تعلم المزيد حول تحسين استخدام الذاكرة](/docs/app/guides/memory-usage).
+[تعلم المزيد عن تحسين استخدام الذاكرة](/docs/app/guides/memory-usage).
 
 ### 7. مكونات الخادم وجلب البيانات
 
-تغييرات مكونات الخادم تتسبب في إعادة عرض الصفحة بالكامل محليًا لإظهار التغييرات الجديدة، بما في ذلك جلب بيانات جديدة للمكون.
+التغييرات في مكونات الخادم تتسبب في إعادة عرض الصفحة بالكامل محليًا لإظهار التغييرات الجديدة، بما في ذلك جلب بيانات جديدة للمكون.
 
-خيار `serverComponentsHmrCache` التجريبي يسمح لك بتخزين استجابات `fetch` في مكونات الخادم عبر تحديثات Hot Module Replacement (HMR) في التطوير المحلي. هذا يؤدي إلى استجابات أسرع وتقليل تكاليف استدعاءات API المدفوعة.
+خيار `serverComponentsHmrCache` التجريبي يسمح لك بتخزين استجابات `fetch` في مكونات الخادم عبر تحديثات استبدال الوحدة الساخنة (HMR) في التطوير المحلي. هذا يؤدي إلى استجابات أسرع وتكاليف مخفضة لمكالمات API المدفوعة.
 
 [تعلم المزيد عن الخيار التجريبي](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache).
 
-## أدوات لاكتشاف المشاكل
+### 8. فكر في التطوير المحلي بدلاً من Docker
 
-### تسجيل جلب البيانات التفصيلي
+إذا كنت تستخدم Docker للتطوير على Mac أو Windows، فقد تواجه أداءً أبطأ بكثير مقارنة بتشغيل Next.js محليًا.
+
+يمكن أن يتسبب نظام ملفات Docker على Mac وWindows في استغراق استبدال الوحدة الساخنة (HMR) ثواني أو حتى دقائق، بينما يعمل نفس التطبيق مع HMR سريع عند التطوير محليًا.
+
+هذا الاختلاف في الأداء يرجع إلى كيفية تعامل Docker مع عمليات نظام الملفات خارج بيئات Linux. للحصول على أفضل تجربة تطوير:
+
+- استخدم التطوير المحلي (`npm run dev` أو `pnpm dev`) بدلاً من Docker أثناء التطوير
+- احتفظ بـ Docker لنشر الإنتاج واختبار بناء الإنتاج
+- إذا كان يجب عليك استخدام Docker للتطوير، فكر في استخدام Docker على جهاز Linux أو VM
+
+[تعلم المزيد عن نشر Docker](/docs/app/getting-started/deploying#docker) للاستخدام في الإنتاج.
+
+## أدوات للعثور على المشاكل
+
+### تسجيل جلب البيانات المفصل
 
 استخدم خيار `logging.fetches` في ملف `next.config.js` لرؤية معلومات أكثر تفصيلاً عما يحدث أثناء التطوير:
 
@@ -151,21 +165,21 @@ module.exports = {
 }
 ```
 
-[تعلم المزيد حول تسجيل جلب البيانات](/docs/app/api-reference/config/next-config-js/logging).
+[تعلم المزيد عن تسجيل جلب البيانات](/docs/app/api-reference/config/next-config-js/logging).
 
 ## تتبع Turbopack
 
 تتبع Turbopack هو أداة تساعدك على فهم أداء تطبيقك أثناء التطوير المحلي.
-يوفر معلومات مفصلة عن الوقت المستغرق لكل وحدة للترجمة وكيفية ارتباطها ببعضها.
+يوفر معلومات مفصلة عن الوقت المستغرق لكل وحدة للترجمة وكيفية ارتباطها.
 
 1. تأكد من أن لديك أحدث إصدار من Next.js مثبتًا.
-1. قم بإنشاء ملف تتبع Turbopack:
+1. أنشئ ملف تتبع Turbopack:
 
    ```bash
    NEXT_TURBOPACK_TRACING=1 npm run dev
    ```
 
-1. انتقل عبر تطبيقك أو قم بإجراء تعديلات على الملفات لإعادة إنتاج المشكلة.
+1. تنقل حول تطبيقك أو قم بإجراء تعديلات على الملفات لإعادة إنتاج المشكلة.
 1. أوقف خادم تطوير Next.js.
 1. سيكون ملف يسمى `trace-turbopack` متاحًا في مجلد `.next`.
 1. يمكنك تفسير الملف باستخدام `next internal trace [مسار-إلى-الملف]`:
diff --git a/apps/docs/content/ar/docs/01-app/02-guides/memory-usage.mdx b/apps/docs/content/ar/docs/01-app/02-guides/memory-usage.mdx
index f5ce8785..d5aa2945 100644
--- a/apps/docs/content/ar/docs/01-app/02-guides/memory-usage.mdx
+++ b/apps/docs/content/ar/docs/01-app/02-guides/memory-usage.mdx
@@ -1,38 +1,38 @@
 ---
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T19:59:43.068Z
+source-updated-at: 2025-06-05T15:29:30.000Z
+translation-updated-at: 2025-06-06T17:18:15.132Z
 title: كيفية تحسين استخدام الذاكرة
 nav_title: استخدام الذاكرة
 description: تحسين الذاكرة المستخدمة بواسطة تطبيقك في بيئة التطوير والإنتاج.
 ---
 
-مع نمو التطبيقات وزيادة ثراء الميزات، قد تطلب موارد أكثر عند التطوير محليًا أو إنشاء بنائات للإنتاج.
+مع نمو التطبيقات وزيادة ثراء الميزات، قد تطلب موارد أكبر عند التطوير محليًا أو إنشاء إصدارات إنتاجية.
 
-دعونا نستكشف بعض الاستراتيجيات والتقنيات لتحسين الذاكرة ومعالجة مشكلات الذاكرة الشائعة في Next.js.
+لنستكشف بعض الاستراتيجيات والتقنيات لتحسين الذاكرة ومعالجة مشاكل الذاكرة الشائعة في Next.js.
 
 ## تقليل عدد التبعيات
 
 التطبيقات التي تحتوي على عدد كبير من التبعيات ستستخدم ذاكرة أكثر.
 
-يمكن لـ [محلل الحزم (Bundle Analyzer)](/docs/app/guides/package-bundling) مساعدتك في التحقيق في التبعيات الكبيرة في تطبيقك والتي قد يكون من الممكن إزالتها لتحسين الأداء واستخدام الذاكرة.
+يمكن لـ [محلل الحزم (Bundle Analyzer)](/docs/app/guides/package-bundling) مساعدتك في التحقق من التبعيات الكبيرة في تطبيقك والتي قد يكون من الممكن إزالتها لتحسين الأداء واستخدام الذاكرة.
 
 ## جرب `experimental.webpackMemoryOptimizations`
 
-بدءًا من الإصدار `v15.0.0`، يمكنك إضافة `experimental.webpackMemoryOptimizations: true` إلى ملف `next.config.js` الخاص بك لتغيير سلوك Webpack مما يقلل من الحد الأقصى لاستخدام الذاكرة ولكن قد يزيد أوقات التجميع قليلاً.
+بدءًا من الإصدار `v15.0.0`، يمكنك إضافة `experimental.webpackMemoryOptimizations: true` إلى ملف `next.config.js` لتغيير سلوك Webpack مما يقلل من الحد الأقصى لاستخدام الذاكرة ولكن قد يزيد أوقات التجميع قليلاً.
 
 > **معلومة مفيدة**: هذه الميزة حالياً تجريبية لاختبارها على المزيد من المشاريع أولاً، ولكنها تعتبر منخفضة المخاطر.
 
 ## تشغيل `next build` مع `--experimental-debug-memory-usage`
 
-بدءًا من الإصدار `14.2.0`، يمكنك تشغيل `next build --experimental-debug-memory-usage` لتشغيل البناء في وضع يقوم فيه Next.js بطباعة معلومات حول استخدام الذاكرة بشكل مستمر طوال عملية البناء، مثل استخدام الكومة (heap) وإحصائيات جمع القمامة (garbage collection). كما سيتم التقاط لقطات الكومة تلقائيًا عندما يقترب استخدام الذاكرة من الحد الم configured.
+بدءًا من الإصدار `14.2.0`، يمكنك تشغيل `next build --experimental-debug-memory-usage` لتشغيل عملية البناء في وضع حيث يقوم Next.js بطباعة معلومات عن استخدام الذاكرة بشكل مستمر طوال عملية البناء، مثل استخدام الكومة (heap) وإحصائيات جمع القمامة. كما سيتم أخذ لقطات للكومة تلقائيًا عندما يقترب استخدام الذاكرة من الحد الم configured.
 
 > **معلومة مفيدة**: هذه الميزة غير متوافقة مع خيار عامل بناء Webpack الذي يتم تمكينه تلقائيًا إلا إذا كان لديك تكوين Webpack مخصص.
 
 ## تسجيل ملف تعريف للكومة (heap profile)
 
-للبحث عن مشكلات الذاكرة، يمكنك تسجيل ملف تعريف للكومة من Node.js وتحميله في Chrome DevTools لتحديد المصادر المحتملة لتسرب الذاكرة.
+للبحث عن مشاكل الذاكرة، يمكنك تسجيل ملف تعريف للكومة من Node.js وتحميله في Chrome DevTools لتحديد مصادر تسرب الذاكرة المحتملة.
 
-في طرفيتك، مرر علم `--heap-prof` إلى Node.js عند بدء بناء Next.js الخاص بك:
+في طرفيتك، مرر علم `--heap-prof` إلى Node.js عند بدء بناء Next.js:
 
 ```sh
 node --heap-prof node_modules/next/dist/bin/next build
@@ -40,18 +40,18 @@ node --heap-prof node_modules/next/dist/bin/next build
 
 في نهاية عملية البناء، سيتم إنشاء ملف `.heapprofile` بواسطة Node.js.
 
-في Chrome DevTools، يمكنك فتح علامة تبويب الذاكرة (Memory) والنقر على زر "تحميل الملف الشخصي" (Load Profile) لتصور الملف.
+في Chrome DevTools، يمكنك فتح علامة تبويب الذاكرة والنقر على زر "Load Profile" لتصور الملف.
 
 ## تحليل لقطة للكومة (heap snapshot)
 
-يمكنك استخدام أداة مفتش (inspector) لتحليل استخدام الذاكرة للتطبيق.
+يمكنك استخدام أداة مفتش (inspector) لتحليل استخدام الذاكرة في التطبيق.
 
-عند تشغيل أمر `next build` أو `next dev`، أضف `NODE_OPTIONS=--inspect` إلى بداية الأمر. سيعرض هذا وكيل المفتش على المنفذ الافتراضي.
-إذا كنت ترغب في التوقف قبل بدء أي كود للمستخدم، يمكنك تمرير `--inspect-brk` بدلاً من ذلك. أثناء تشغيل العملية، يمكنك استخدام أداة مثل Chrome DevTools للاتصال بمنفذ التصحيح لتسجيل وتحليل لقطة للكومة لمعرفة ما يتم الاحتفاظ به في الذاكرة.
+عند تشغيل أمر `next build` أو `next dev`، أضف `NODE_OPTIONS=--inspect` في بداية الأمر. هذا سيعرض وكيل المفتش على المنفذ الافتراضي.
+إذا كنت ترغب في التوقف قبل بدء أي كود مستخدم، يمكنك تمرير `--inspect-brk` بدلاً من ذلك. أثناء تشغيل العملية، يمكنك استخدام أداة مثل Chrome DevTools للاتصال بمنفذ التصحيح لتسجيل وتحليل لقطة للكومة لمعرفة ما يتم الاحتفاظ به في الذاكرة.
 
-بدءًا من الإصدار `14.2.0`، يمكنك أيضًا تشغيل `next build` مع علم `--experimental-debug-memory-usage` لتسهيل التقاط لقطات الكومة.
+بدءًا من الإصدار `14.2.0`، يمكنك أيضًا تشغيل `next build` مع علم `--experimental-debug-memory-usage` لتسهيل أخذ لقطات الكومة.
 
-أثناء التشغيل في هذا الوضع، يمكنك إرسال إشارة `SIGUSR2` إلى العملية في أي وقت، وسوف تأخذ العملية لقطة للكومة.
+أثناء التشغيل في هذا الوضع، يمكنك إرسال إشارة `SIGUSR2` إلى العملية في أي لحظة، وسوف تأخذ العملية لقطة للكومة.
 
 سيتم حفظ لقطة الكومة في جذر مشروع تطبيق Next.js ويمكن تحميلها في أي محلل كومة، مثل Chrome DevTools، لمعرفة ما يتم الاحتفاظ به في الذاكرة. هذا الوضع غير متوافق بعد مع عمال بناء Webpack.
 
@@ -59,17 +59,17 @@ node --heap-prof node_modules/next/dist/bin/next build
 
 ## عامل بناء Webpack (Webpack build worker)
 
-يسمح عامل بناء Webpack بتشغيل تجميعات Webpack داخل عامل Node.js منفصل مما يقلل استخدام الذاكرة لتطبيقك أثناء عمليات البناء.
+يسمح عامل بناء Webpack بتشغيل تجميعات Webpack داخل عامل Node.js منفصل مما يقلل استخدام الذاكرة في تطبيقك أثناء عمليات البناء.
 
-يتم تمكين هذا الخيار افتراضيًا إذا لم يكن لتطبيقك تكوين Webpack مخصص بدءًا من الإصدار `v14.1.0`.
+يتم تمكين هذا الخيار افتراضيًا إذا لم يكن لدى تطبيقك تكوين Webpack مخصص بدءًا من الإصدار `v14.1.0`.
 
-إذا كنت تستخدم إصدارًا أقدم من Next.js أو لديك تكوين Webpack مخصص، يمكنك تمكين هذا الخيار عن طريق تعيين `experimental.webpackBuildWorker: true` داخل ملف `next.config.js` الخاص بك.
+إذا كنت تستخدم إصدارًا أقدم من Next.js أو لديك تكوين Webpack مخصص، يمكنك تمكين هذا الخيار عن طريق تعيين `experimental.webpackBuildWorker: true` داخل ملف `next.config.js`.
 
-> **معلومة مفيدة**: قد لا تكون هذه الميزة متوافقة مع جميع ملحقات Webpack المخصصة.
+> **معلومة مفيدة**: قد لا تكون هذه الميزة متوافقة مع جميع إضافات Webpack المخصصة.
 
 ## تعطيل ذاكرة التخزين المؤقت لـ Webpack
 
-[ذاكرة التخزين المؤقت لـ Webpack](https://webpack.js.org/configuration/cache/) تحفظ وحدات Webpack التي تم إنشاؤها في الذاكرة و/أو على القرص لتحسين سرعة البناء. يمكن أن يساعد هذا في الأداء، ولكنه سيزيد أيضًا من استخدام الذاكرة لتطبيقك لتخزين البيانات المخزنة مؤقتًا.
+[ذاكرة التخزين المؤقت لـ Webpack](https://webpack.js.org/configuration/cache/) تحفظ وحدات Webpack التي تم إنشاؤها في الذاكرة و/أو على القرص لتحسين سرعة عمليات البناء. هذا يمكن أن يساعد في الأداء، ولكنه أيضًا يزيد من استخدام الذاكرة في تطبيقك لتخزين البيانات المؤقتة.
 
 يمكنك تعطيل هذا السلوك عن طريق إضافة [تكوين Webpack مخصص](/docs/app/api-reference/config/next-config-js/webpack) إلى تطبيقك:
 
@@ -95,21 +95,21 @@ export default nextConfig
 
 ## تعطيل التحليل الثابت (static analysis)
 
-قد يتطلب التحقق من الأنواع (Typechecking) والتدقيق (linting) الكثير من الذاكرة، خاصة في المشاريع الكبيرة.
-ومع ذلك، فإن معظم المشاريع لديها منفذ تنفيذ CI مخصص يتولى بالفعل هذه المهام.
-عندما ينتج عن البناء مشكلات نفاد الذاكرة أثناء خطوة "التدقيق والتحقق من صحة الأنواع"، يمكنك تعطيل هذه المهام أثناء عمليات البناء:
+قد يتطلب التحقق من الأنواع (typechecking) وفحص الأخطاء (linting) الكثير من الذاكرة، خاصة في المشاريع الكبيرة.
+ومع ذلك، فإن معظم المشاريع لديها مشغل CI مخصص يتولى بالفعل هذه المهام.
+عندما تسبب عملية البناء مشاكل نفاد الذاكرة أثناء خطوة "التحقق من الأخطاء والتحقق من صحة الأنواع"، يمكنك تعطيل هذه المهام أثناء عمليات البناء:
 
 ```js filename="next.config.mjs"
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   eslint: {
-    // تحذير: يسمح هذا بإكمال بنائات الإنتاج بنجاح حتى إذا
+    // تحذير: هذا يسمح لعمليات البناء الإنتاجية بالإكمال بنجاح حتى إذا
     // كان مشروعك يحتوي على أخطاء ESLint.
     ignoreDuringBuilds: true,
   },
   typescript: {
     // !! تحذير !!
-    // يسمح بشكل خطير بإكمال بنائات الإنتاج بنجاح حتى إذا
+    // يسمح بشكل خطير لعمليات البناء الإنتاجية بالإكمال بنجاح حتى إذا
     // كان مشروعك يحتوي على أخطاء في الأنواع.
     // !! تحذير !!
     ignoreBuildErrors: true,
@@ -122,9 +122,9 @@ export default nextConfig
 - [تجاهل أخطاء TypeScript](/docs/app/api-reference/config/typescript#disabling-typescript-errors-in-production)
 - [ESLint في تكوين Next.js](/docs/pages/api-reference/config/next-config-js/eslint)
 
-ضع في اعتبارك أن هذا قد ينتج عنه نشرات معيبة بسبب أخطاء في الأنواع أو مشكلات في التدقيق.
-نوصي بشدة فقط بترقية البنائات إلى الإنتاج بعد اكتمال التحليل الثابت.
-إذا كنت تقوم بالنشر على Vercel، يمكنك الاطلاع على [دليل النشر المؤقت](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment) لمعرفة كيفية ترقية البنائات إلى الإنتاج بعد نجاح المهام المخصصة.
+ضع في اعتبارك أن هذا قد ينتج عنه عمليات نشر معيبة بسبب أخطاء في الأنواع أو مشاكل في فحص الأخطاء.
+نوصي بشدة بعدم ترقية البناء إلى الإنتاج إلا بعد اكتمال التحليل الثابت.
+إذا كنت تقوم بالنشر على Vercel، يمكنك الاطلاع على [دليل النشر التجريبي (staging deployments)](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment) لمعرفة كيفية ترقية البناء إلى الإنتاج بعد نجاح المهام المخصصة.
 
 ## تعطيل خرائط المصدر (source maps)
 
@@ -132,8 +132,41 @@ export default nextConfig
 
 يمكنك تعطيل إنشاء خرائط المصدر عن طريق إضافة `productionBrowserSourceMaps: false` و `experimental.serverSourceMaps: false` إلى تكوين Next.js الخاص بك.
 
-> **معلومة مفيدة**: قد تقوم بعض الملحقات بتشغيل خرائط المصدر وقد تتطلب تكوينًا مخصصًا لتعطيلها.
+> **معلومة مفيدة**: قد تقوم بعض الإضافات بتشغيل خرائط المصدر وقد تتطلب تكوينًا مخصصًا لتعطيلها.
 
-## مشكلات الذاكرة في Edge runtime
+## مشاكل الذاكرة في Edge runtime
 
-أصلح Next.js `v14.1.3` مشكلة في الذاكرة عند استخدام Edge runtime. يرجى التحديث إلى هذا الإصدار (أو أحدث) لمعرفة ما إذا كان يحل مشكلتك.
\ No newline at end of file
+قام Next.js `v14.1.3` بإصلاح مشكلة ذاكرة عند استخدام Edge runtime. يرجى التحديث إلى هذا الإصدار (أو أحدث) لمعرفة ما إذا كان يحل مشكلتك.
+
+## تحميل المدخلات مسبقًا (Preloading Entries)
+
+عند بدء تشغيل خادم Next.js، يقوم بتحميل وحدات JavaScript لكل صفحة في الذاكرة مسبقًا، بدلاً من وقت الطلب.
+
+هذا التحسين يسمح بأوقات استجابة أسرع، مقابل زيادة في البصمة الأولية للذاكرة.
+
+لتعطيل هذا التحسين، عيّن علامة `experimental.preloadEntriesOnStart` إلى `false`.
+
+```ts filename="next.config.ts" switcher
+import type { NextConfig } from 'next'
+
+const config: NextConfig = {
+  experimental: {
+    preloadEntriesOnStart: false,
+  },
+}
+
+export default config
+```
+
+```js filename="next.config.mjs" switcher
+/** @type {import('next').NextConfig} */
+const config = {
+  experimental: {
+    preloadEntriesOnStart: false,
+  },
+}
+
+export default config
+```
+
+لا يقوم Next.js بإلغاء تحميل وحدات JavaScript هذه، مما يعني أنه حتى مع تعطيل هذا التحسين، فإن بصمة الذاكرة لخادم Next.js الخاص بك ستكون في النهاية نفسها إذا تم طلب جميع الصفحات في النهاية.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx b/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
index ad55447b..691131a5 100644
--- a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
+++ b/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
@@ -1,11 +1,11 @@
 ---
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:14:54.429Z
+source-updated-at: 2025-06-05T15:29:30.000Z
+translation-updated-at: 2025-06-06T17:26:21.683Z
 title: generateMetadata
-description: تعرف على كيفية إضافة بيانات وصفية (Metadata) لتطبيق Next.js لتحسين تحسين محركات البحث (SEO) وإمكانية مشاركة الويب.
+description: تعلم كيفية إضافة بيانات وصفية (Metadata) إلى تطبيق Next.js لتحسين تحسين محركات البحث (SEO) وإمكانية مشاركة الويب.
 related:
   title: الخطوات التالية
-  description: عرض جميع خيارات واجهة برمجة التطبيقات (API) لبيانات وصفية.
+  description: عرض جميع خيارات واجهة برمجة التطبيقات (API) لبيانات الوصف.
   links:
     - app/api-reference/file-conventions/metadata
     - app/api-reference/functions/generate-viewport
@@ -41,7 +41,7 @@ export default function Page() {}
 
 ## دالة `generateMetadata`
 
-يمكن تعيين البيانات الوصفية الديناميكية التي تعتمد على **معلومات ديناميكية**، مثل معلمات المسار الحالية، أو البيانات الخارجية، أو `metadata` في الأجزاء الأصل، عن طريق تصدير دالة `generateMetadata` تُرجع كائن [`Metadata`](#metadata-fields).
+يمكن تعيين البيانات الوصفية الديناميكية التي تعتمد على **معلومات ديناميكية**، مثل معلمات المسار الحالية أو البيانات الخارجية أو `metadata` في الأجزاء الأصلية، عن طريق تصدير دالة `generateMetadata` تُرجع كائن [`Metadata`](#metadata-fields).
 
 ```tsx filename="app/products/[id]/page.tsx" switcher
 import type { Metadata, ResolvingMetadata } from 'next'
@@ -97,14 +97,15 @@ export async function generateMetadata({ params, searchParams }, parent) {
 export default function Page({ params, searchParams }) {}
 ```
 
-> **معلومة جيدة**:
+> **ملاحظة جيدة**:
 >
 > - يمكن إضافة البيانات الوصفية إلى ملفات `layout.js` و `page.js`.
 > - سيقوم Next.js بحل البيانات الوصفية تلقائيًا وإنشاء علامات `<head>` ذات الصلة للصفحة.
 > - تصديرات كائن `metadata` ودالة `generateMetadata` **مدعومة فقط في مكونات الخادم (Server Components)**.
-> - لا يمكنك تصدير كل من كائن `metadata` ودالة `generateMetadata` من نفس جزء المسار.
-> - طلبات `fetch` داخل `generateMetadata` يتم [تخزينها مؤقتًا](/docs/app/deep-dive/caching#request-memoization) تلقائيًا لنفس البيانات عبر `generateMetadata`، و`generateStaticParams`، والتخطيطات، والصفحات، ومكونات الخادم.
-> - يمكن استخدام [`cache` من React](/docs/app/deep-dive/caching#react-cache-function) إذا لم يكن `fetch` متاحًا. -[ البيانات الوصفية المستندة إلى ملف](/docs/app/api-reference/file-conventions/metadata) لها الأولوية الأعلى وستتجاوز كائن `metadata` ودالة `generateMetadata`.
+> - لا يمكنك تصدير كل من كائن `metadata` ودالة `generateMetadata` من نفس مقطع المسار.
+> - طلبات `fetch` داخل `generateMetadata` يتم [تخزينها مؤقتًا تلقائيًا](/docs/app/deep-dive/caching#request-memoization) لنفس البيانات عبر `generateMetadata` و `generateStaticParams` والتخطيطات والصفحات ومكونات الخادم.
+> - يمكن استخدام [`cache` في React](/docs/app/deep-dive/caching#react-cache-function) إذا كان `fetch` غير متاح.
+> - [البيانات الوصفية المستندة إلى الملفات](/docs/app/api-reference/file-conventions/metadata) لها الأولوية الأعلى وستتجاوز كائن `metadata` ودالة `generateMetadata`.
 
 ## المرجع
 
@@ -114,33 +115,33 @@ export default function Page({ params, searchParams }) {}
 
 - `props` - كائن يحتوي على معلمات المسار الحالي:
 
-  - `params` - كائن يحتوي على [معلمات المسار الديناميكي](/docs/app/api-reference/file-conventions/dynamic-routes) من الجزء الجذري وصولاً إلى الجزء الذي يتم استدعاء `generateMetadata` منه. أمثلة:
+  - `params` - كائن يحتوي على [معلمات المسار الديناميكي](/docs/app/api-reference/file-conventions/dynamic-routes) من المقطع الجذري وصولاً إلى المقطع الذي يتم استدعاء `generateMetadata` منه. أمثلة:
 
-    | المسار                           | URL         | `params`                  |
+    | المسار                           | الرابط         | `params`                  |
     | ------------------------------- | ----------- | ------------------------- |
     | `app/shop/[slug]/page.js`       | `/shop/1`   | `{ slug: '1' }`           |
     | `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
     | `app/shop/[...slug]/page.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
 
-  - `searchParams` - كائن يحتوي على [معلمات البحث (search params)](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) لـ URL الحالي. أمثلة:
+  - `searchParams` - كائن يحتوي على [معلمات البحث (search params)](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) للرابط الحالي. أمثلة:
 
-    | URL             | `searchParams`       |
+    | الرابط             | `searchParams`       |
     | --------------- | -------------------- |
     | `/shop?a=1`     | `{ a: '1' }`         |
     | `/shop?a=1&b=2` | `{ a: '1', b: '2' }` |
     | `/shop?a=1&a=2` | `{ a: ['1', '2'] }`  |
 
-- `parent` - وعد بحل البيانات الوصفية من أجزاء المسار الأصلية.
+- `parent` - وعد بحل البيانات الوصفية من مقاطع المسار الأصلية.
 
-### القيم المُرجعة
+### القيم المرجعة
 
 يجب أن تُرجع `generateMetadata` كائن [`Metadata`](#metadata-fields) يحتوي على حقل بيانات وصفية واحد أو أكثر.
 
-> **معلومة جيدة**:
+> **ملاحظة جيدة**:
 >
 > - إذا كانت البيانات الوصفية لا تعتمد على معلومات وقت التشغيل، فيجب تعريفها باستخدام كائن [`metadata` الثابت](#the-metadata-object) بدلاً من `generateMetadata`.
-> - يتم [تخزين](/docs/app/deep-dive/caching#request-memoization) طلبات `fetch` مؤقتًا تلقائيًا لنفس البيانات عبر `generateMetadata`، و`generateStaticParams`، والتخطيطات، والصفحات، ومكونات الخادم. يمكن استخدام [`cache` من React](/docs/app/deep-dive/caching#react-cache-function) إذا لم يكن `fetch` متاحًا.
-> - `searchParams` متاحة فقط في أجزاء `page.js`.
+> - يتم [تخزين](/docs/app/deep-dive/caching#request-memoization) طلبات `fetch` مؤقتًا تلقائيًا لنفس البيانات عبر `generateMetadata` و `generateStaticParams` والتخطيطات والصفحات ومكونات الخادم. يمكن استخدام [`cache` في React](/docs/app/deep-dive/caching#react-cache-function) إذا كان `fetch` غير متاح.
+> - `searchParams` متاحة فقط في مقاطع `page.js`.
 > - يمكن أيضًا استخدام طرق Next.js [`redirect()`](/docs/app/api-reference/functions/redirect) و [`notFound()`](/docs/app/api-reference/functions/not-found) داخل `generateMetadata`.
 
 ### حقول البيانات الوصفية
@@ -165,7 +166,7 @@ export const metadata = {
 
 ##### `default`
 
-يمكن استخدام `title.default` لتوفير **عنوان احتياطي** لأجزاء المسار الفرعية التي لا تعرّف `title`.
+يمكن استخدام `title.default` لتوفير **عنوان احتياطي** لمقاطع المسار الفرعية التي لا تحدد `title`.
 
 ```tsx filename="app/layout.tsx"
 import type { Metadata } from 'next'
@@ -187,7 +188,7 @@ export const metadata: Metadata = {}
 
 ##### `template`
 
-يمكن استخدام `title.template` لإضافة بادئة أو لاحقة إلى `titles` المعرفة في أجزاء المسار **الفرعية**.
+يمكن استخدام `title.template` لإضافة بادئة أو لاحقة إلى `titles` المحددة في مقاطع المسار **الفرعية**.
 
 ```tsx filename="app/layout.tsx" switcher
 import type { Metadata } from 'next'
@@ -195,7 +196,7 @@ import type { Metadata } from 'next'
 export const metadata: Metadata = {
   title: {
     template: '%s | Acme',
-    default: 'Acme', // مطلوب افتراضي عند إنشاء قالب
+    default: 'Acme', // مطلوب قيمة افتراضية عند إنشاء قالب
   },
 }
 ```
@@ -204,7 +205,7 @@ export const metadata: Metadata = {
 export const metadata = {
   title: {
     template: '%s | Acme',
-    default: 'Acme', // مطلوب افتراضي عند إنشاء قالب
+    default: 'Acme', // مطلوب قيمة افتراضية عند إنشاء قالب
   },
 }
 ```
@@ -227,19 +228,19 @@ export const metadata = {
 // الناتج: <title>About | Acme</title>
 ```
 
-> **معلومة جيدة**:
+> **ملاحظة جيدة**:
 >
-> - `title.template` ينطبق على أجزاء المسار **الفرعية** و **ليس** الجزء الذي تم تعريفه فيه. هذا يعني:
+> - `title.template` ينطبق على مقاطع المسار **الفرعية** وليس المقطع الذي تم تعريفه فيه. هذا يعني:
 >
 >   - `title.default` **مطلوب** عند إضافة `title.template`.
->   - `title.template` المعرفة في `layout.js` لن تنطبق على `title` المعرفة في `page.js` لنفس جزء المسار.
->   - `title.template` المعرفة في `page.js` ليس لها تأثير لأن الصفحة دائمًا هي الجزء النهائي للمسار (لا تحتوي على أي أجزاء مسار فرعية).
+>   - لن ينطبق `title.template` المحدد في `layout.js` على `title` المحدد في `page.js` لنفس مقطع المسار.
+>   - `title.template` المحدد في `page.js` ليس له تأثير لأن الصفحة دائمًا ما تكون المقطع النهائي (ليس لديها أي مقاطع مسار فرعية).
 >
-> - `title.template` **ليس له تأثير** إذا لم يعرّف المسار `title` أو `title.default`.
+> - `title.template` **ليس له تأثير** إذا لم يحدد المسار `title` أو `title.default`.
 
 ##### `absolute`
 
-يمكن استخدام `title.absolute` لتوفير عنوان **يتجاهل** `title.template` المعين في الأجزاء الأصلية.
+يمكن استخدام `title.absolute` لتوفير عنوان **يتجاهل** `title.template` المحدد في المقاطع الأصلية.
 
 ```tsx filename="app/layout.tsx" switcher
 import type { Metadata } from 'next'
@@ -281,19 +282,19 @@ export const metadata = {
 // الناتج: <title>About</title>
 ```
 
-> **معلومة جيدة**:
+> **ملاحظة جيدة**:
 >
 > - `layout.js`
 >
->   - `title` (سلسلة نصية) و `title.default` يعرّفان العنوان الافتراضي للأجزاء الفرعية (التي لا تعرّف `title` الخاصة بها). سيعزز `title.template` من أقرب جزء أصل إذا كان موجودًا.
->   - `title.absolute` يعرّف العنوان الافتراضي للأجزاء الفرعية. يتجاهل `title.template` من الأجزاء الأصلية.
->   - `title.template` يعرّف قالب عنوان جديد للأجزاء الفرعية.
+>   - `title` (سلسلة نصية) و `title.default` يحددان العنوان الافتراضي للمقاطع الفرعية (التي لا تحدد `title` الخاصة بها). سيعزز `title.template` من أقرب مقطع أصل إذا كان موجودًا.
+>   - `title.absolute` يحدد العنوان الافتراضي للمقاطع الفرعية. يتجاهل `title.template` من المقاطع الأصلية.
+>   - `title.template` يحدد قالب عنوان جديد للمقاطع الفرعية.
 >
 > - `page.js`
->   - إذا لم تعرّف الصفحة عنوانها الخاص، سيتم استخدام أقرب عنوان أصل محلول.
->   - `title` (سلسلة نصية) يعرّف عنوان المسار. سيعزز `title.template` من أقرب جزء أصل إذا كان موجودًا.
->   - `title.absolute` يعرّف عنوان المسار. يتجاهل `title.template` من الأجزاء الأصلية.
->   - `title.template` ليس له تأثير في `page.js` لأن الصفحة دائمًا هي الجزء النهائي للمسار.
+>   - إذا لم تحدد الصفحة عنوانها الخاص، سيتم استخدام العنوان المحلول لأقرب مقطع أصل.
+>   - `title` (سلسلة نصية) يحدد عنوان المسار. سيعزز `title.template` من أقرب مقطع أصل إذا كان موجودًا.
+>   - `title.absolute` يحدد عنوان المسار. يتجاهل `title.template` من المقاطع الأصلية.
+>   - `title.template` ليس له تأثير في `page.js` لأن الصفحة دائمًا ما تكون المقطع النهائي للمسار.
 
 ### `description`
 
@@ -342,9 +343,9 @@ export const metadata = {
 
 #### `metadataBase`
 
-`metadataBase` هو خيار ملائم لتعيين بادئة عنوان URL أساسي لحقول `metadata` التي تتطلب عنوان URL مؤهل بالكامل.
+`metadataBase` هو خيار ملائم لتعيين بادئة عنوان URL أساسي لحقول `metadata` التي تتطلب عنوان URL مؤهلًا بالكامل.
 
-- يسمح `metadataBase` لحقول `metadata` المستندة إلى URL المعرفة في **جزء المسار الحالي وما دونه** باستخدام **مسار نسبي** بدلاً من عنوان URL المطلق المطلوب.
+- يسمح `metadataBase` لحقول `metadata` المستندة إلى URL المحددة في **مقطع المسار الحالي وما دونه** باستخدام **مسار نسبي** بدلاً من عنوان URL المطلق المطلوب.
 - سيتم دمج المسار النسبي للحقل مع `metadataBase` لتشكيل عنوان URL مؤهل بالكامل.
 
 ```jsx filename="layout.js | page.js"
@@ -370,21 +371,21 @@ export const metadata = {
 <meta property="og:image" content="https://acme.com/og-image.png" />
 ```
 
-> **معلومة جيدة**:
+> **ملاحظة جيدة**:
 >
 > - يتم تعيين `metadataBase` عادةً في `app/layout.js` الجذر لتطبيق حقول `metadata` المستندة إلى URL عبر جميع المسارات.
 > - يمكن تكوين جميع حقول `metadata` المستندة إلى URL التي تتطلب عناوين URL مطلقة باستخدام خيار `metadataBase`.
 > - يمكن أن يحتوي `metadataBase` على نطاق فرعي مثل `https://app.acme.com` أو مسار أساسي مثل `https://acme.com/start/from/here`
-> - إذا قدم حقل `metadata` عنوان URL مطلقًا، فسيتم تجاهل `metadataBase`.
+> - إذا قدم حقل `metadata` عنوان URL مطلقًا، سيتم تجاهل `metadataBase`.
 > - سيؤدي استخدام مسار نسبي في حقل `metadata` مستند إلى URL بدون تكوين `metadataBase` إلى حدوث خطأ في البناء.
-> - سيقوم Next.js بتوحيد الشرطات المكررة بين `metadataBase` (مثل `https://acme.com/`) وحقل نسبي (مثل `/path`) إلى شرطة واحدة (مثل `https://acme.com/path`)
+> - سيقوم Next.js بتطبيع الشرطات المكررة بين `metadataBase` (مثل `https://acme.com/`) وحقل نسبي (مثل `/path`) إلى شرطة واحدة (مثل `https://acme.com/path`)
 
 #### تكوين URL
 
 يفضل تكوين URL نية المطور على دلالات اجتياز الدليل الافتراضية.
 
-- يتم توحيد الشرطات النهائية بين `metadataBase` وحقول `metadata`.
-- يتم التعامل مع المسار "المطلق" في حقل `metadata` (الذي عادةً ما يحل محل مسار URL بالكامل) على أنه مسار "نسبي" (يبدأ من نهاية `metadataBase`).
+- يتم تطبيع الشرطات في نهاية `metadataBase` وحقول `metadata`.
+- يتم التعامل مع المسار "المطلق" في حقل `metadata` (الذي عادةً ما يستبدل مسار URL بالكامل) على أنه مسار "نسبي" (يبدأ من نهاية `metadataBase`).
 
 على سبيل المثال، بالنظر إلى `metadataBase` التالي:
 
@@ -497,7 +498,7 @@ export const metadata = {
 
 > **معلومة مفيدة**:
 >
-> - قد يكون استخدام [واجهة برمجة التطبيقات المستندة إلى الملفات](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) لصور Open Graph أكثر ملاءمة. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيقات المستندة إلى الملفات بإنشاء بيانات التعريف الصحيحة تلقائيًا لك.
+> - قد يكون استخدام [واجهة برمجة تطبيق Metadata المعتمدة على الملفات](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) لصور Open Graph أكثر ملاءمة. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيق المعتمدة على الملفات بإنشاء بيانات التعريف الصحيحة تلقائيًا لك.
 
 ### `robots`
 
@@ -531,7 +532,7 @@ export const metadata: Metadata = {
 
 ### `icons`
 
-> **معلومة مفيدة**: نوصي باستخدام [واجهة برمجة التطبيقات المستندة إلى الملفات](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) للأيقونات حيثما أمكن ذلك. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيقات المستندة إلى الملفات بإنشاء بيانات التعريف الصحيحة تلقائيًا لك.
+> **معلومة مفيدة**: نوصي باستخدام [واجهة برمجة تطبيق Metadata المعتمدة على الملفات](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) للأيقونات حيثما أمكن ذلك. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيق المعتمدة على الملفات بإنشاء بيانات التعريف الصحيحة تلقائيًا لك.
 
 ```jsx filename="layout.js | page.js"
 export const metadata = {
@@ -598,15 +599,15 @@ export const metadata = {
 />
 ```
 
-> **معلومة مفيدة**: لم تعد علامات meta من نوع `msapplication-*` مدعومة في إصدارات Microsoft Edge المبنية على Chromium، وبالتالي لم تعد هناك حاجة إليها.
+> **معلومة مفيدة**: لم تعد علامات meta من نوع `msapplication-*` مدعومة في إصدارات Chromium من Microsoft Edge، وبالتالي لم تعد هناك حاجة إليها.
 
 ### `themeColor`
 
-> **مهمل**: خيار `themeColor` في `metadata` مهمل اعتبارًا من Next.js 14. يُرجى استخدام [تكوين viewport](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
+> **مهمل**: خيار `themeColor` في `metadata` مهمل اعتبارًا من Next.js 14. يرجى استخدام [تكوين viewport](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
 
 ### `colorScheme`
 
-> **مهمل**: خيار `colorScheme` في `metadata` مهمل اعتبارًا من Next.js 14. يُرجى استخدام [تكوين viewport](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
+> **مهمل**: خيار `colorScheme` في `metadata` مهمل اعتبارًا من Next.js 14. يرجى استخدام [تكوين viewport](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
 
 ### `manifest`
 
@@ -624,7 +625,7 @@ export const metadata = {
 
 ### `twitter`
 
-تُستخدم مواصفات تويتر (بشكل مفاجئ) لأكثر من مجرد X (المعروف سابقًا باسم تويتر).
+تستخدم مواصفات تويتر (بشكل مفاجئ) لأكثر من مجرد X (المعروف سابقًا باسم تويتر).
 
 تعرف على المزيد حول [مرجع ترميز بطاقة تويتر](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup).
 
@@ -702,7 +703,7 @@ export const metadata = {
 
 ### `viewport`
 
-> **مهمل**: خيار `viewport` في `metadata` مهمل اعتبارًا من Next.js 14. يُرجى استخدام [تكوين viewport](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
+> **مهمل**: خيار `viewport` في `metadata` مهمل اعتبارًا من Next.js 14. يرجى استخدام [تكوين viewport](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
 
 ### `verification`
 
@@ -964,7 +965,7 @@ export const metadata = {
 <meta name="custom" content="meta" />
 ```
 
-إذا كنت تريد إنشاء علامات meta متعددة لنفس المفتاح، يمكنك استخدام قيمة مصفوفة.
+إذا كنت تريد إنشاء علامات meta متعددة بنفس المفتاح، يمكنك استخدام قيمة مصفوفة.
 
 ```jsx filename="layout.js | page.js"
 export const metadata = {
@@ -984,7 +985,7 @@ export const metadata = {
 
 ### الأنواع
 
-يمكنك إضافة أمان النوع إلى البيانات الوصفية (metadata) باستخدام نوع `Metadata`. إذا كنت تستخدم [إضافة TypeScript المدمجة](/docs/app/api-reference/config/typescript) في بيئة التطوير الخاصة بك، فلن تحتاج إلى إضافة النوع يدويًا، ولكن يمكنك إضافة ذلك بشكل صريح إذا أردت.
+يمكنك إضافة أمان النوع إلى البيانات الوصفية (metadata) باستخدام نوع `Metadata`. إذا كنت تستخدم [ملحق TypeScript المدمج](/docs/app/api-reference/config/typescript) في بيئة التطوير الخاصة بك، فلن تحتاج إلى إضافة النوع يدويًا، ولكن يمكنك إضافة ذلك بشكل صريح إذا أردت.
 
 #### كائن `metadata`
 
@@ -1010,7 +1011,7 @@ export function generateMetadata(): Metadata {
 }
 ```
 
-##### دالة غير متزامنة (async)
+##### دالة غير متزامنة (Async)
 
 ```tsx filename="layout.tsx | page.tsx"
 import type { Metadata } from 'next'
@@ -1070,20 +1071,20 @@ export const metadata = {
 | البيانات الوصفية               | التوصية                                                                                                                                                                                                                                            |
 | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `<meta http-equiv="...">`     | استخدم رؤوس HTTP المناسبة عبر [`redirect()`](/docs/app/api-reference/functions/redirect)، [البرمجية الوسيطة (Middleware)](/docs/app/building-your-application/routing/middleware#nextresponse)، [رؤوس الأمان](/docs/app/api-reference/config/next-config-js/headers) |
-| `<base>`                      | عرض العلامة في التخطيط أو الصفحة نفسها.                                                                                                                                                                                                              |
-| `<noscript>`                  | عرض العلامة في التخطيط أو الصفحة نفسها.                                                                                                                                                                                                              |
-| `<style>`                     | تعرف على المزيد حول [التنسيق في Next.js](/docs/app/getting-started/css).                                                                                                                                                                                     |
-| `<script>`                    | تعرف على المزيد حول [استخدام النصوص البرمجية (scripts)](/docs/app/guides/scripts).                                                                                                                                                                                               |
-| `<link rel="stylesheet" />`   | استيراد صفحات الأنماط مباشرة في التخطيط أو الصفحة نفسها.                                                                                                                                                                                               |
-| `<link rel="preload />`       | استخدم [طريقة ReactDOM المسبقة التحميل (preload)](#link-relpreload)                                                                                                                                                                                                           |
-| `<link rel="preconnect" />`   | استخدم [طريقة ReactDOM المسبقة الاتصال (preconnect)](#link-relpreconnect)                                                                                                                                                                                                     |
-| `<link rel="dns-prefetch" />` | استخدم [طريقة ReactDOM المسبقة DNS (prefetchDNS)](#link-reldns-prefetch)                                                                                                                                                                                                  |
+| `<base>`                      | عرض العلامة في التنسيق (layout) أو الصفحة نفسها.                                                                                                                                                                                                              |
+| `<noscript>`                  | عرض العلامة في التنسيق أو الصفحة نفسها.                                                                                                                                                                                                              |
+| `<style>`                     | تعلم المزيد حول [التنسيق في Next.js](/docs/app/getting-started/css).                                                                                                                                                                                     |
+| `<script>`                    | تعلم المزيد حول [استخدام النصوص البرمجية (scripts)](/docs/app/guides/scripts).                                                                                                                                                                                               |
+| `<link rel="stylesheet" />`   | `import` أوراق الأنماط مباشرة في التنسيق أو الصفحة نفسها.                                                                                                                                                                                               |
+| `<link rel="preload />`       | استخدم [طريقة ReactDOM المسبقة (preload method)](#link-relpreload)                                                                                                                                                                                                           |
+| `<link rel="preconnect" />`   | استخدم [طريقة ReactDOM للاتصال المسبق (preconnect method)](#link-relpreconnect)                                                                                                                                                                                                     |
+| `<link rel="dns-prefetch" />` | استخدم [طريقة ReactDOM للبحث المسبق عن DNS (prefetchDNS method)](#link-reldns-prefetch)                                                                                                                                                                                                  |
 
 ### تلميحات الموارد (Resource hints)
 
 يحتوي عنصر `<link>` على عدد من الكلمات الرئيسية `rel` التي يمكن استخدامها للإشارة إلى المتصفح بأن موردًا خارجيًا قد يكون مطلوبًا. يستخدم المتصفح هذه المعلومات لتطبيق تحسينات التحميل المسبق اعتمادًا على الكلمة الرئيسية.
 
-بينما لا تدعم واجهة برمجة تطبيقات البيانات الوصفية هذه التلميحات مباشرة، يمكنك استخدام [طرق `ReactDOM` الجديدة](https://github.com/facebook/react/pull/26237) لإدراجها بأمان في `<head>` المستند.
+بينما لا تدعم واجهة برمجة تطبيق البيانات الوصفية هذه التلميحات مباشرة، يمكنك استخدام [طرق `ReactDOM` الجديدة](https://github.com/facebook/react/pull/26237) لإدراجها بأمان في `<head>` المستند.
 
 ```tsx filename="app/preload-resources.tsx" switcher
 'use client'
@@ -1115,7 +1116,7 @@ export function PreloadResources() {
 
 #### `<link rel="preload">`
 
-ابدأ تحميل مورد مبكرًا في دورة حياة عرض الصفحة (المتصفح). [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload).
+ابدأ تحميل مورد في وقت مبكر من دورة حياة عرض الصفحة (في المتصفح). [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload).
 
 ```tsx
 ReactDOM.preload(href: string, options: { as: string })
@@ -1127,7 +1128,7 @@ ReactDOM.preload(href: string, options: { as: string })
 
 ##### `<link rel="preconnect">`
 
-ابدأ اتصالًا مسبقًا بأصل. [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect).
+ابدأ اتصالًا مسبقًا بأصل (origin). [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect).
 
 ```tsx
 ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
@@ -1139,7 +1140,7 @@ ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
 
 #### `<link rel="dns-prefetch">`
 
-حاول حل اسم النطاق قبل طلب الموارد. [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/dns-prefetch).
+حاول حل اسم نطاق قبل طلب الموارد. [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/dns-prefetch).
 
 ```tsx
 ReactDOM.prefetchDNS(href: string)
@@ -1149,36 +1150,36 @@ ReactDOM.prefetchDNS(href: string)
 <link rel="dns-prefetch" href="..." />
 ```
 
-> **جيد أن تعرف**:
+> **معلومة جيدة**:
 >
-> - هذه الطرق مدعومة حاليًا فقط في مكونات العميل (Client Components)، والتي لا تزال تُعرض من جانب الخادم (Server Side Rendered) عند التحميل الأولي للصفحة.
+> - هذه الطرق مدعومة حاليًا فقط في مكونات العميل (Client Components)، والتي لا تزال تُعرض من جانب الخادم عند التحميل الأولي للصفحة.
 > - الميزات المدمجة في Next.js مثل `next/font`، `next/image` و `next/script` تتعامل تلقائيًا مع تلميحات الموارد ذات الصلة.
 
 ## السلوك
 
 ### الحقول الافتراضية
 
-هناك علامتان `meta` افتراضيتان تتم إضافتهما دائمًا حتى إذا لم تحدد المسار بيانات وصفية:
+هناك علامتا `meta` افتراضيتان تُضافان دائمًا حتى إذا لم تحدد المسار بيانات وصفية:
 
 - [علامة meta charset](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-charset) تحدد ترميز الأحرف للموقع.
-- [علامة meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) تحدد عرض viewport ومقياس الموقع للتكيف مع الأجهزة المختلفة.
+- [علامة meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) تحدد عرض viewport ومقياسه للموقع للتكيف مع الأجهزة المختلفة.
 
 ```html
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 ```
 
-> **جيد أن تعرف**: يمكنك تجاوز علامة [`viewport`](/docs/app/api-reference/functions/generate-metadata#viewport) الافتراضية.
+> **معلومة جيدة**: يمكنك تجاوز علامة [`viewport`](/docs/app/api-reference/functions/generate-metadata#viewport) الافتراضية.
 
 ### بث البيانات الوصفية (Streaming metadata)
 
 يتم بث البيانات الوصفية التي تُرجعها `generateMetadata` إلى العميل. هذا يسمح لـ Next.js بحقن البيانات الوصفية في HTML بمجرد حلها.
 
-نظرًا لأن بيانات وصفية الصفحة تستهدف بشكل أساسي برامج الزحف (bots) والروبوتات، سيقوم Next.js ببث البيانات الوصفية للروبوتات التي يمكنها تنفيذ JavaScript وفحص DOM الصفحة بالكامل (مثل `Googlebot`). ومع ذلك، ستستمر البيانات الوصفية في حظر عرض الصفحة للروبوتات **المحدودة بـ HTML** (مثل `Twitterbot`) حيث لا يمكنها تنفيذ JavaScript أثناء الزحف.
+نظرًا لأن بيانات وصفية الصفحة تستهدف بشكل أساسي برامج الروبوت والمفهرسات، سيقوم Next.js ببث البيانات الوصفية للروبوتات التي يمكنها تنفيذ JavaScript وفحص DOM الصفحة بالكامل (مثل `Googlebot`). ومع ذلك، ستستمر البيانات الوصفية في منع عرض الصفحة للروبوتات **المحدودة بـ HTML** (مثل `Twitterbot`) حيث لا يمكنها تنفيذ JavaScript أثناء الزحف.
 
-يتم اكتشاف وكيل المستخدم للطلبات الواردة تلقائيًا لتحديد ما إذا كان سيتم تقديم بيانات وصفية متدفقة أو الرجوع إلى البيانات الوصفية الحاجزة.
+يتم اكتشاف وكيل المستخدم للطلبات الواردة تلقائيًا لتحديد ما إذا كان سيتم تقديم بيانات وصفية متدفقة أو التراجع إلى البيانات الوصفية الحاجزة.
 
-إذا كنت بحاجة إلى تخصيص هذه القائمة، يمكنك تعريفها يدويًا باستخدام خيار `htmlLimitedBots` في `next.config.js`. سيتأكد Next.js من أن وكلاء المستخدم المطابقين لهذا التعبير المنتظم يتلقون بيانات وصفية حاجزة عند طلب صفحة الويب الخاصة بك.
+إذا كنت بحاجة إلى تخصيص هذه القائمة، يمكنك تعريفها يدويًا باستخدام خيار `htmlLimitedBots` في `next.config.js`. سيتأكد Next.js من أن وكلاء المستخدم الذين يتطابقون مع هذا التعبير المنتظم يتلقون بيانات وصفية حاجزة عند طلب صفحة الويب الخاصة بك.
 
 ```ts filename="next.config.ts" switcher
 import type { NextConfig } from 'next'
@@ -1196,21 +1197,21 @@ module.exports = {
 }
 ```
 
-سيؤدي تحديد تكوين `htmlLimitedBots` إلى تجاوز القائمة الافتراضية لـ Next.js، مما يمنحك تحكمًا كاملاً في وكلاء المستخدم الذين يجب أن يختاروا هذا السلوك. هذا سلوك متقدم، ويجب أن تكون الافتراضيات كافية لمعظم الحالات.
+سيؤدي تحديد تكوين `htmlLimitedBots` إلى تجاوز القائمة الافتراضية لـ Next.js، مما يمنحك سيطرة كاملة على وكلاء المستخدم الذين يجب أن يختاروا هذا السلوك. هذا سلوك متقدم، ويجب أن يكون الافتراضي كافيًا لمعظم الحالات.
 
 ### الترتيب
 
 يتم تقييم البيانات الوصفية بالترتيب، بدءًا من القطعة الجذرية وصولاً إلى القطعة الأقرب إلى قطعة `page.js` النهائية. على سبيل المثال:
 
-1. `app/layout.tsx` (التخطيط الجذري)
-2. `app/blog/layout.tsx` (التخطيط المتداخل للمدونة)
+1. `app/layout.tsx` (التنسيق الجذري)
+2. `app/blog/layout.tsx` (تنسيق المدونة المتداخل)
 3. `app/blog/[slug]/page.tsx` (صفحة المدونة)
 
 ### الدمج
 
 بعد [ترتيب التقييم](#ordering)، يتم دمج كائنات البيانات الوصفية المصدرة من عدة أجزاء في نفس المسار **بشكل سطحي** معًا لتشكيل ناتج البيانات الوصفية النهائي للمسار. يتم **استبدال** المفاتيح المكررة بناءً على ترتيبها.
 
-هذا يعني أن البيانات الوصفية ذات الحقول المتداخلة مثل [`openGraph`](/docs/app/api-reference/functions/generate-metadata#opengraph) و [`robots`](/docs/app/api-reference/functions/generate-metadata#robots) التي تم تعريفها في جزء سابق يتم **تجاوزها** بواسطة الجزء الأخير الذي يعرفها.
+هذا يعني أن البيانات الوصفية ذات الحقول المتداخلة مثل [`openGraph`](/docs/app/api-reference/functions/generate-metadata#opengraph) و [`robots`](/docs/app/api-reference/functions/generate-metadata#robots) التي تم تعريفها في جزء سابق يتم **تجاوزها** بواسطة الجزء الأخير الذي يحددها.
 
 #### تجاوز الحقول
 
@@ -1239,10 +1240,10 @@ export const metadata = {
 
 في المثال أعلاه:
 
-- تم **استبدال** `title` من `app/layout.js` بـ `title` في `app/blog/page.js`.
-- تم **استبدال** جميع حقول `openGraph` من `app/layout.js` في `app/blog/page.js` لأن `app/blog/page.js` يحدد بيانات `openGraph` الوصفية. لاحظ غياب `openGraph.description`.
+- يتم **استبدال** `title` من `app/layout.js` بـ `title` في `app/blog/page.js`.
+- يتم **استبدال** جميع حقول `openGraph` من `app/layout.js` في `app/blog/page.js` لأن `app/blog/page.js` يحدد بيانات `openGraph` الوصفية. لاحظ غياب `openGraph.description`.
 
-إذا كنت ترغب في مشاركة بعض الحقول المتداخلة بين الأجزاء أثناء تجاوز البعض الآخر، يمكنك سحبها إلى متغير منفصل:
+إذا كنت ترغب في مشاركة بعض الحقول المتداخلة بين الأجزاء أثناء تجاوز البعض الآخر، يمكنك استخراجها إلى متغير منفصل:
 
 ```jsx filename="app/shared-metadata.js"
 export const openGraphImage = { images: ['http://...'] }
@@ -1297,8 +1298,8 @@ export const metadata = {
 
 **ملاحظات**
 
-- تم **استبدال** `title` من `app/layout.js` بـ `title` في `app/about/page.js`.
-- تم **وراثة** جميع حقول `openGraph` من `app/layout.js` في `app/about/page.js` لأن `app/about/page.js` لا يحدد بيانات `openGraph` الوصفية.
+- يتم **استبدال** `title` من `app/layout.js` بـ `title` في `app/about/page.js`.
+- يتم **وراثة** جميع حقول `openGraph` من `app/layout.js` في `app/about/page.js` لأن `app/about/page.js` لا يحدد بيانات `openGraph` الوصفية.
 
 ## سجل الإصدارات
 
diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx b/apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx
index 9f149f3a..286cc452 100644
--- a/apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx
+++ b/apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx
@@ -1,13 +1,13 @@
 ---
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T20:14:25.474Z
+source-updated-at: 2025-06-05T15:29:30.000Z
+translation-updated-at: 2025-06-06T18:12:38.762Z
 title: turbopack
-description: تكوين خيارات Next.js الخاصة بـ Turbopack
+description: تكوين Next.js مع خيارات خاصة بـ Turbopack
 ---
 
-{/* محتوى هذه الوثيقة مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+{/* المحتوى مشترك بين تطبيق التوجيه وصفحات التوجيه. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بتوجيه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
 
-خيار `turbopack` يسمح لك بتخصيص [Turbopack](/docs/app/api-reference/turbopack) لتحويل ملفات مختلفة وتغيير طريقة حل الوحدات النمطية.
+خيار `turbopack` يتيح لك تخصيص [Turbopack](/docs/app/api-reference/turbopack) لتحويل ملفات مختلفة وتغيير طريقة حل الوحدات.
 
 ```ts filename="next.config.ts" switcher
 import type { NextConfig } from 'next'
@@ -34,7 +34,7 @@ module.exports = nextConfig
 
 > **معلومة مفيدة**:
 >
-> - Turbopack لـ Next.js لا يحتاج إلى محمّلات (loaders) أو تكوين محمّل للوظائف المدمجة. Turbopack يدعم بشكل مدمج CSS وتجميع JavaScript الحديث، لذا لا حاجة لـ `css-loader` أو `postcss-loader` أو `babel-loader` إذا كنت تستخدم `@babel/preset-env`.
+> - Turbopack لـ Next.js لا يتطلب محمِّلات أو تكوين محمِّلات للوظائف المدمجة. Turbopack يدعم بشكل مدمج CSS وتجميع JavaScript الحديث، لذلك لا حاجة لـ `css-loader` أو `postcss-loader` أو `babel-loader` إذا كنت تستخدم `@babel/preset-env`.
 
 ## المرجع
 
@@ -44,14 +44,14 @@ module.exports = nextConfig
 
 | الخيار              | الوصف                                                                 |
 | ------------------- | --------------------------------------------------------------------- |
-| `root`              | يحدد دليل الجذر للتطبيق. يجب أن يكون مسارًا مطلقًا.                   |
-| `rules`             | قائمة بمحمّلات webpack المدعومة لتطبيقها عند التشغيل مع Turbopack.    |
-| `resolveAlias`      | تعيين استيرادات بأسماء مستعارة لوحدات نمطية لتحميلها بدلاً منها.      |
-| `resolveExtensions` | قائمة بالامتدادات لحلها عند استيراد الملفات.                          |
+| `root`              | يحدد دليل جذر التطبيق. يجب أن يكون مسارًا مطلقًا.                     |
+| `rules`             | قائمة بمحمِّلات webpack المدعومة لتطبيقها عند التشغيل مع Turbopack.    |
+| `resolveAlias`      | تعيين استيرادات بأسماء مستعارة إلى وحدات لتحميلها بدلاً منها.          |
+| `resolveExtensions` | قائمة بالامتدادات لحلها عند استيراد الملفات.                           |
 
-### المحمّلات المدعومة
+### المحمِّلات المدعومة
 
-المحمّلات التالية تم اختبارها للعمل مع تنفيذ محمّل webpack في Turbopack:
+المحمِّلات التالية تم اختبارها للعمل مع تنفيذ محمِّل webpack في Turbopack، ولكن العديد من محمِّلات webpack الأخرى يجب أن تعمل أيضًا حتى لو لم تكن مدرجة هنا:
 
 - [`babel-loader`](https://www.npmjs.com/package/babel-loader)
 - [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack)
@@ -60,14 +60,15 @@ module.exports = nextConfig
 - [`string-replace-loader`](https://www.npmjs.com/package/string-replace-loader)
 - [`raw-loader`](https://www.npmjs.com/package/raw-loader)
 - [`sass-loader`](https://www.npmjs.com/package/sass-loader)
+- [`graphql-tag/loader`](https://www.npmjs.com/package/graphql-tag)
 
 ## أمثلة
 
 ### دليل الجذر
 
-يستخدم Turbopack دليل الجذر لحل الوحدات النمطية. الملفات خارج جذر المشروع لا يتم حلها.
+يستخدم Turbopack دليل الجذر لحل الوحدات. الملفات خارج جذر المشروع لا يتم حلها.
 
-Next.js يكتشف تلقائيًا دليل الجذر لمشروعك. يفعل ذلك بالبحث عن أحد هذه الملفات:
+Next.js يكتشف تلقائيًا دليل جذر مشروعك. يفعل ذلك بالبحث عن أحد هذه الملفات:
 
 - `pnpm-lock.yaml`
 - `package-lock.json`
@@ -75,7 +76,7 @@ Next.js يكتشف تلقائيًا دليل الجذر لمشروعك. يفعل
 - `bun.lock`
 - `bun.lockb`
 
-إذا كان لديك هيكل مشروع مختلف، على سبيل المثال إذا كنت لا تستخدم مساحات العمل (workspaces)، يمكنك تعيين خيار `root` يدويًا:
+إذا كان لديك هيكل مشروع مختلف، على سبيل المثال إذا كنت لا تستخدم مساحات العمل، يمكنك تعيين خيار `root` يدويًا:
 
 ```js filename="next.config.js"
 const path = require('path')
@@ -86,17 +87,17 @@ module.exports = {
 }
 ```
 
-### تكوين محمّلات webpack
+### تكوين محمِّلات webpack
 
-إذا كنت بحاجة إلى دعم محمّل يتجاوز ما هو مدمج، العديد من محمّلات webpack تعمل بالفعل مع Turbopack. هناك حاليًا بعض القيود:
+إذا كنت بحاجة إلى دعم محمِّلات يتجاوز ما هو مدمج، العديد من محمِّلات webpack تعمل بالفعل مع Turbopack. هناك حاليًا بعض القيود:
 
-- فقط مجموعة أساسية من واجهة برمجة تطبيقات محمّل webpack تم تنفيذها. حالياً، هناك تغطية كافية لبعض المحمّلات الشائعة، وسنوسع دعم واجهة برمجة التطبيقات في المستقبل.
-- فقط المحمّلات التي تُرجع كود JavaScript مدعومة. المحمّلات التي تحول ملفات مثل صفحات الأنماط أو الصور غير مدعومة حاليًا.
-- الخيارات الممررة إلى محمّلات webpack يجب أن تكون قيم JavaScript بدائية، كائنات، أو مصفوفات. على سبيل المثال، لا يمكن تمرير وحدات `require()` كقيم خيارات.
+- فقط مجموعة أساسية من واجهة برمجة تطبيقات محمِّل webpack تم تنفيذها. حاليًا، هناك تغطية كافية لبعض المحمِّلات الشهيرة، وسنوسع دعم واجهة برمجة التطبيقات لدينا في المستقبل.
+- فقط المحمِّلات التي تُرجع كود JavaScript مدعومة. المحمِّلات التي تحول ملفات مثل صفحات الأنماط أو الصور غير مدعومة حاليًا.
+- الخيارات الممررة إلى محمِّلات webpack يجب أن تكون بدائية JavaScript، كائنات، ومصفوفات. على سبيل المثال، لا يمكن تمرير وحدات إضافية `require()` كقيم خيارات.
 
-لتكوين المحمّلات، أضف أسماء المحمّلات التي قمت بتثبيتها وأي خيارات في `next.config.js`، مع تعيين امتدادات الملفات إلى قائمة المحمّلات.
+لتكوين المحمِّلات، أضف أسماء المحمِّلات التي قمت بتثبيتها وأي خيارات في `next.config.js`، مع تعيين امتدادات الملفات إلى قائمة المحمِّلات.
 
-فيما يلي مثال باستخدام محمّل [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack)، والذي يمكّن استيراد ملفات `.svg` وعرضها كمكونات React.
+فيما يلي مثال باستخدام محمِّل [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack)، الذي يمكّن من استيراد ملفات `.svg` وعرضها كمكونات React.
 
 ```js filename="next.config.js"
 module.exports = {
@@ -111,11 +112,33 @@ module.exports = {
 }
 ```
 
+للمحمِّلات التي تتطلب خيارات تكوين، يمكنك استخدام تنسيق كائن بدلاً من سلسلة:
+
+```js filename="next.config.js"
+module.exports = {
+  turbopack: {
+    rules: {
+      '*.svg': {
+        loaders: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              icon: true,
+            },
+          },
+        ],
+        as: '*.js',
+      },
+    },
+  },
+}
+```
+
 > **معلومة مفيدة**: قبل إصدار Next.js 13.4.4، كان `turbo.rules` يُسمى `turbo.loaders` وكان يقبل فقط امتدادات الملفات مثل `.mdx` بدلاً من `*.mdx`.
 
 ### حل الأسماء المستعارة
 
-يمكن تكوين Turbopack لتعديل حل الوحدات النمطية عبر الأسماء المستعارة، بشكل مشابه لتكوين [`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias) في webpack.
+يمكن تكوين Turbopack لتعديل حل الوحدات عبر الأسماء المستعارة، بشكل مشابه لتكوين [`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias) في webpack.
 
 لتكوين حل الأسماء المستعارة، قم بتعيين الأنماط المستوردة إلى وجهتها الجديدة في `next.config.js`:
 
@@ -130,13 +153,13 @@ module.exports = {
 }
 ```
 
-هذا يعيّن استيرادات حزمة `underscore` إلى حزمة `lodash`. بمعنى آخر، `import underscore from 'underscore'` ستحمّل وحدة `lodash` بدلاً من `underscore`.
+هذا يعين استيرادات حزمة `underscore` إلى حزمة `lodash`. بمعنى آخر، `import underscore from 'underscore'` ستحمّل وحدة `lodash` بدلاً من `underscore`.
 
-يدعم Turbopack أيضًا التعيين الشرطي للأسماء المستعارة عبر هذا الحقل، بشكل مشابه لـ [التصديرات الشرطية](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports) في Node.js. حالياً، فقط شرط `browser` مدعوم. في المثال أعلاه، استيرادات وحدة `mocha` سيتم تعيينها إلى `mocha/browser-entry.js` عندما يستهدف Turbopack بيئات المتصفح.
+يدعم Turbopack أيضًا التعيين الشرطي للأسماء المستعارة عبر هذا الحقل، بشكل مشابه لـ [التصديرات الشرطية](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports) في Node.js. حاليًا فقط شرط `browser` مدعوم. في الحالة أعلاه، سيتم تعيين استيرادات وحدة `mocha` إلى `mocha/browser-entry.js` عندما يستهدف Turbopack بيئات المتصفح.
 
 ### حل الامتدادات المخصصة
 
-يمكن تكوين Turbopack لحل الوحدات النمطية بامتدادات مخصصة، بشكل مشابه لتكوين [`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions) في webpack.
+يمكن تكوين Turbopack لحل الوحدات بامتدادات مخصصة، بشكل مشابه لتكوين [`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions) في webpack.
 
 لتكوين حل الامتدادات، استخدم حقل `resolveExtensions` في `next.config.js`:
 
@@ -150,11 +173,11 @@ module.exports = {
 
 هذا يستبدل امتدادات الحل الأصلية بالقائمة المقدمة. تأكد من تضمين الامتدادات الافتراضية.
 
-لمزيد من المعلومات والإرشادات حول كيفية ترحيل تطبيقك إلى Turbopack من webpack، راجع [وثائق Turbopack حول التوافق مع webpack](https://turbo.build/pack/docs/migrating-from-webpack).
+لمزيد من المعلومات والإرشادات حول كيفية ترحيل تطبيقك إلى Turbopack من webpack، راجع [توثيق Turbopack حول التوافق مع webpack](https://turbo.build/pack/docs/migrating-from-webpack).
 
-## سجل الإصدارات
+## تاريخ الإصدارات
 
 | الإصدار  | التغييرات                                         |
-| -------- | ------------------------------------------------ |
+| -------- | ----------------------------------------------- |
 | `15.3.0` | تم تغيير `experimental.turbo` إلى `turbopack`.   |
 | `13.0.0` | تم تقديم `experimental.turbo`.                   |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/04-community/index.mdx b/apps/docs/content/ar/docs/04-community/index.mdx
new file mode 100644
index 00000000..7c19303e
--- /dev/null
+++ b/apps/docs/content/ar/docs/04-community/index.mdx
@@ -0,0 +1,33 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:12.270Z
+title: مجتمع Next.js
+nav_title: المجتمع
+description: انضم إلى مجتمع Next.js وشارك فيه.
+---
+
+مع أكثر من 5 ملايين تحميل أسبوعي، يتمتع Next.js بمجتمع كبير ونشط من المطورين حول العالم. إليك كيف يمكنك المشاركة في مجتمعنا:
+
+## المساهمة
+
+هناك عدة طرق يمكنك من خلالها المساهمة في تطوير Next.js:
+
+- [التوثيق](/docs/community/contribution-guide): اقترح تحسينات أو حتى اكتب أقسامًا جديدة لمساعدة المستخدمين على فهم كيفية استخدام Next.js.
+- [الأمثلة](https://github.com/vercel/next.js/tree/canary/contributing/examples): ساعد المطورين في دمج Next.js مع أدوات وخدمات أخرى عن طريق إنشاء مثال جديد أو تحسين مثال موجود.
+- [قاعدة الكود](https://github.com/vercel/next.js/tree/canary/contributing/core): تعرف أكثر على البنية التحتية، وساهم في إصلاح الأخطاء، واقترح ميزات جديدة.
+
+## المناقشات
+
+إذا كان لديك سؤال حول Next.js، أو تريد مساعدة الآخرين، فأنت مرحب بك دائمًا في الانضمام إلى النقاش:
+
+- [مناقشات GitHub](https://github.com/vercel/next.js/discussions)
+- [Discord](https://discord.com/invite/bUG2bvbtHy)
+- [Reddit](https://www.reddit.com/r/nextjs)
+
+## وسائل التواصل الاجتماعي
+
+تابع Next.js على [تويتر](https://x.com/nextjs) للحصول على آخر التحديثات، واشترك في [قناة Vercel على YouTube](https://www.youtube.com/@VercelHQ) لمشاهدة مقاطع الفيديو حول Next.js.
+
+## مدونة السلوك
+
+نؤمن بخلق مجتمع شامل ومرحب. لذلك، نطلب من جميع الأعضاء الالتزام بـ[مدونة السلوك](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md). يوضح هذا المستند توقعاتنا بشأن سلوك المشاركين. ندعوك لقراءته ومساعدتنا في الحفاظ على بيئة آمنة ومحترمة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/01-getting-started/01-installation.mdx b/apps/docs/content/ar/docs/13/01-getting-started/01-installation.mdx
new file mode 100644
index 00000000..8cdd4388
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/01-getting-started/01-installation.mdx
@@ -0,0 +1,194 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:44.306Z
+title: التثبيت
+description: إنشاء تطبيق Next.js جديد باستخدام `create-next-app`. إعداد TypeScript والأنماط وتهيئة ملف `next.config.js`.
+related:
+  title: الخطوات التالية
+  description: تعرف على الملفات والمجلدات في مشروع Next.js الخاص بك.
+  links:
+    - getting-started/project-structure
+---
+
+متطلبات النظام:
+
+- [Node.js 16.14](https://nodejs.org/) أو أحدث.
+- أنظمة التشغيل المدعومة: macOS وWindows (بما في ذلك WSL) وLinux.
+
+## التثبيت التلقائي
+
+نوصي ببدء تطبيق Next.js جديد باستخدام [`create-next-app`](/docs/app/api-reference/create-next-app)، والذي يقوم بإعداد كل شيء تلقائيًا لك. لإنشاء مشروع، قم بتنفيذ:
+
+```bash filename="Terminal"
+npx create-next-app@latest
+```
+
+عند التثبيت، ستظهر لك المطالبات التالية:
+
+```txt filename="Terminal"
+ما هو اسم مشروعك؟ my-app
+هل ترغب في استخدام TypeScript؟ لا / نعم
+هل ترغب في استخدام ESLint؟ لا / نعم
+هل ترغب في استخدام Tailwind CSS؟ لا / نعم
+هل ترغب في استخدام مجلد `src/`؟ لا / نعم
+هل ترغب في استخدام موجه التطبيق (موصى به)؟ لا / نعم
+هل ترغب في تخصيص اسم الاستيراد الافتراضي (@/*)؟ لا / نعم
+ما هو اسم الاستيراد الذي ترغب في تكوينه؟ @/*
+```
+
+بعد المطالبات، سيقوم `create-next-app` بإنشاء مجلد باسم مشروعك وتثبيت التبعيات المطلوبة.
+
+> **معلومة مفيدة**:
+>
+> - يأتي Next.js الآن مع تكوينات [TypeScript](/docs/app/building-your-application/configuring/typescript)، [ESLint](/docs/app/building-your-application/configuring/eslint)، و [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css) بشكل افتراضي.
+> - يمكنك اختياريًا استخدام [مجلد `src`](/docs/app/building-your-application/configuring/src-directory) في جذر مشروعك لفصل كود التطبيق عن ملفات التكوين.
+
+## التثبيت اليدوي
+
+لإنشاء تطبيق Next.js جديد يدويًا، قم بتثبيت الحزم المطلوبة:
+
+```bash filename="Terminal"
+npm install next@latest react@latest react-dom@latest
+```
+
+افتح ملف `package.json` وأضف السكربتات التالية:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
+```
+
+هذه السكربتات تشير إلى مراحل مختلفة من تطوير التطبيق:
+
+- `dev`: يشغل [`next dev`](/docs/app/api-reference/next-cli#development) لبدء Next.js في وضع التطوير.
+- `build`: يشغل [`next build`](/docs/app/api-reference/next-cli#build) لبناء التطبيق للاستخدام في الإنتاج.
+- `start`: يشغل [`next start`](/docs/app/api-reference/next-cli#production) لبدء خادم Next.js للإنتاج.
+- `lint`: يشغل [`next lint`](/docs/app/api-reference/next-cli#lint) لإعداد تكوين ESLint المدمج في Next.js.
+
+### إنشاء المجلدات
+
+يستخدم Next.js توجيه نظام الملفات، مما يعني أن المسارات في تطبيقك يتم تحديدها حسب كيفية تنظيم ملفاتك.
+
+#### مجلد `app`
+
+للتطبيقات الجديدة، نوصي باستخدام [موجه التطبيق (App Router)](/docs/app). يسمح لك هذا الموجه باستخدام أحدث ميزات React وهو تطور لـ [موجه الصفحات (Pages Router)](/docs/pages) بناءً على ملاحظات المجتمع.
+
+قم بإنشاء مجلد `app/`، ثم أضف ملف `layout.tsx` و `page.tsx`. سيتم عرض هذه الملفات عندما يزور المستخدم جذر تطبيقك (`/`).
+
+<Image
+  alt="هيكل مجلد التطبيق"
+  srcLight="/docs/light/app-getting-started.png"
+  srcDark="/docs/dark/app-getting-started.png"
+  width="1600"
+  height="363"
+/>
+
+قم بإنشاء [تخطيط جذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) داخل `app/layout.tsx` مع الوسوم المطلوبة `<html>` و `<body>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+أخيرًا، قم بإنشاء صفحة رئيسية `app/page.tsx` مع بعض المحتوى الأولي:
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+> **معلومة مفيدة**: إذا نسيت إنشاء `layout.tsx`، سيقوم Next.js بإنشاء هذا الملف تلقائيًا عند تشغيل خادم التطوير باستخدام `next dev`.
+
+تعلم المزيد حول [استخدام موجه التطبيق](/docs/app/building-your-application/routing/defining-routes).
+
+#### مجلد `pages` (اختياري)
+
+إذا كنت تفضل استخدام موجه الصفحات بدلاً من موجه التطبيق، يمكنك إنشاء مجلد `pages/` في جذر مشروعك.
+
+ثم أضف ملف `index.tsx` داخل مجلد `pages`. سيكون هذا صفحتك الرئيسية (`/`):
+
+```tsx filename="pages/index.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+بعد ذلك، أضف ملف `_app.tsx` داخل `pages/` لتحديد التخطيط العام. تعلم المزيد حول [ملف التطبيق المخصص](/docs/pages/building-your-application/routing/custom-app).
+
+```tsx filename="pages/_app.tsx" switcher
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+أخيرًا، أضف ملف `_document.tsx` داخل `pages/` للتحكم في الاستجابة الأولية من الخادم. تعلم المزيد حول [ملف المستند المخصص](/docs/pages/building-your-application/routing/custom-document).
+
+```tsx filename="pages/_document.tsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+تعلم المزيد حول [استخدام موجه الصفحات](/docs/pages/building-your-application/routing/pages-and-layouts).
+
+> **معلومة مفيدة**: على الرغم من أنه يمكنك استخدام كلا الموجهين في نفس المشروع، إلا أن المسارات في `app` ستكون لها الأولوية على `pages`. نوصي باستخدام موجه واحد فقط في مشروعك الجديد لتجنب الارتباك.
+
+#### مجلد `public` (اختياري)
+
+قم بإنشاء مجلد `public` لتخزين الموارد الثابتة مثل الصور والخطوط وغيرها. يمكن بعد ذلك الإشارة إلى الملفات داخل مجلد `public` بواسطة الكود الخاص بك بدءًا من عنوان URL الأساسي (`/`).
+
+## تشغيل خادم التطوير
+
+1. قم بتنفيذ `npm run dev` لبدء خادم التطوير.
+2. قم بزيارة `http://localhost:3000` لعرض تطبيقك.
+3. قم بتعديل ملف `app/layout.tsx` (أو `pages/index.tsx`) واحفظه لرؤية النتيجة المحدثة في متصفحك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/01-getting-started/02-project-structure.mdx b/apps/docs/content/ar/docs/13/01-getting-started/02-project-structure.mdx
new file mode 100644
index 00000000..fd5c11cd
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/01-getting-started/02-project-structure.mdx
@@ -0,0 +1,151 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:23.223Z
+title: هيكل مشروع Next.js
+nav_title: هيكل المشروع
+description: قائمة باتفاقيات المجلدات والملفات في مشروع Next.js
+---
+
+توفر هذه الصفحة نظرة عامة على هيكل الملفات والمجلدات في مشروع Next.js. وهي تغطي الملفات والمجلدات الرئيسية، وملفات التكوين، واتفاقيات التوجيه داخل دليل `app` و `pages`.
+
+## المجلدات الرئيسية
+
+|                                                                          |                                    |
+| ------------------------------------------------------------------------ | ---------------------------------- |
+| [`app`](/docs/app/building-your-application/routing)                     | موجه التطبيق (App Router)          |
+| [`pages`](/docs/pages/building-your-application/routing)                 | موجه الصفحات (Pages Router)        |
+| [`public`](/docs/app/building-your-application/optimizing/static-assets) | الموارد الثابتة التي يتم تقديمها   |
+| [`src`](/docs/app/building-your-application/configuring/src-directory)   | مجلد مصدر التطبيق الاختياري        |
+
+## الملفات الرئيسية
+
+|                                                                                             |                                         |
+| ------------------------------------------------------------------------------------------- | --------------------------------------- |
+| **Next.js**                                                                                 |                                         |
+| [`next.config.js`](/docs/app/api-reference/next-config-js)                                  | ملف تكوين Next.js                       |
+| [`package.json`](/docs/getting-started/installation#manual-installation)                    | تبعيات المشروع والنصوص البرمجية         |
+| [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation)      | ملف OpenTelemetry والتجهيز               |
+| [`middleware.ts`](/docs/app/building-your-application/routing/middleware)                   | وسيط طلبات Next.js                      |
+| [`.env`](/docs/app/building-your-application/configuring/environment-variables)             | متغيرات البيئة                          |
+| [`.env.local`](/docs/app/building-your-application/configuring/environment-variables)       | متغيرات البيئة المحلية                  |
+| [`.env.production`](/docs/app/building-your-application/configuring/environment-variables)  | متغيرات بيئة الإنتاج                    |
+| [`.env.development`](/docs/app/building-your-application/configuring/environment-variables) | متغيرات بيئة التطوير                    |
+| [`.eslintrc.json`](/docs/app/building-your-application/configuring/eslint)                  | ملف تكوين ESLint                        |
+| `.gitignore`                                                                                | ملفات ومجلدات Git التي يتم تجاهلها      |
+| `next-env.d.ts`                                                                             | ملف تعريف TypeScript لـ Next.js         |
+| `tsconfig.json`                                                                             | ملف تكوين TypeScript                    |
+| `jsconfig.json`                                                                             | ملف تكوين JavaScript                    |
+
+## اتفاقيات التوجيه في `app`
+
+### ملفات التوجيه
+
+|                                                                                 |                     |                              |
+| ------------------------------------------------------------------------------- | ------------------- | ---------------------------- |
+| [`layout`](/docs/app/api-reference/file-conventions/layout)                     | `.js` `.jsx` `.tsx` | التخطيط (Layout)             |
+| [`page`](/docs/app/api-reference/file-conventions/page)                         | `.js` `.jsx` `.tsx` | الصفحة (Page)                |
+| [`loading`](/docs/app/api-reference/file-conventions/loading)                   | `.js` `.jsx` `.tsx` | واجهة التحميل (Loading UI)   |
+| [`not-found`](/docs/app/api-reference/file-conventions/not-found)               | `.js` `.jsx` `.tsx` | واجهة غير موجود (Not found)  |
+| [`error`](/docs/app/api-reference/file-conventions/error)                       | `.js` `.jsx` `.tsx` | واجهة الخطأ (Error UI)       |
+| [`global-error`](/docs/app/api-reference/file-conventions/error#global-errorjs) | `.js` `.jsx` `.tsx` | واجهة الخطأ العام           |
+| [`route`](/docs/app/api-reference/file-conventions/route)                       | `.js` `.ts`         | نقطة نهاية API               |
+| [`template`](/docs/app/api-reference/file-conventions/template)                 | `.js` `.jsx` `.tsx` | تخطيط معاد عرضه             |
+| [`default`](/docs/app/api-reference/file-conventions/default)                   | `.js` `.jsx` `.tsx` | صفحة احتياطية للمسار الموازي |
+
+### المسارات المتداخلة
+
+|                                                                              |                      |
+| ---------------------------------------------------------------------------- | -------------------- |
+| [`folder`](/docs/app/building-your-application/routing#route-segments)       | قطعة مسار            |
+| [`folder/folder`](/docs/app/building-your-application/routing#nested-routes) | قطعة مسار متداخلة    |
+
+### المسارات الديناميكية
+
+|                                                                                                           |                                  |
+| --------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| [`[folder]`](/docs/app/building-your-application/routing/dynamic-routes#convention)                       | قطعة مسار ديناميكية             |
+| [`[...folder]`](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)            | قطعة مسار شاملة                 |
+| [`[[...folder]]`](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | قطعة مسار شاملة اختيارية        |
+
+### مجموعات المسارات والمجلدات الخاصة
+
+|                                                                                     |                                                  |
+| ----------------------------------------------------------------------------------- | ------------------------------------------------ |
+| [`(folder)`](/docs/app/building-your-application/routing/route-groups#convention)   | تجميع المسارات دون التأثير على التوجيه           |
+| [`_folder`](/docs/app/building-your-application/routing/colocation#private-folders) | استثناء المجلد وجميع القطع الفرعية من التوجيه    |
+
+### المسارات الموازية والمقاطعة
+
+|                                                                                                |                            |
+| ---------------------------------------------------------------------------------------------- | -------------------------- |
+| [`@folder`](/docs/app/building-your-application/routing/parallel-routes#convention)            | فتحة مسماة                 |
+| [`(.)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention)      | مقاطعة بنفس المستوى        |
+| [`(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention)     | مقاطعة بمستوى أعلى         |
+| [`(..)(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | مقاطعة بمستويين أعلى       |
+| [`(...)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention)    | مقاطعة من الجذر            |
+
+### اتفاقيات ملفات البيانات الوصفية
+
+#### أيقونات التطبيق
+
+|                                                                                                                 |                                     |                          |
+| --------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------ |
+| [`favicon`](/docs/app/api-reference/file-conventions/metadata/app-icons#favicon)                                | `.ico`                              | ملف الأيقونة المفضلة     |
+| [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#icon)                                      | `.ico` `.jpg` `.jpeg` `.png` `.svg` | ملف أيقونة التطبيق       |
+| [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx)       | `.js` `.ts` `.tsx`                  | أيقونة التطبيق المولدة   |
+| [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#apple-icon)                          | `.jpg` `.jpeg`, `.png`              | ملف أيقونة Apple         |
+| [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx) | `.js` `.ts` `.tsx`                  | أيقونة Apple المولدة     |
+
+#### صور Open Graph و Twitter
+
+|                                                                                                                             |                              |                            |
+| --------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------- |
+| [`opengraph-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#opengraph-image)                      | `.jpg` `.jpeg` `.png` `.gif` | ملف صورة Open Graph        |
+| [`opengraph-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx) | `.js` `.ts` `.tsx`           | صورة Open Graph المولدة    |
+| [`twitter-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#twitter-image)                          | `.jpg` `.jpeg` `.png` `.gif` | ملف صورة Twitter           |
+| [`twitter-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx)   | `.js` `.ts` `.tsx`           | صورة Twitter المولدة       |
+
+#### تحسين محركات البحث (SEO)
+
+|                                                                                             |             |                       |
+| ------------------------------------------------------------------------------------------- | ----------- | --------------------- |
+| [`sitemap`](/docs/app/api-reference/file-conventions/metadata/sitemap#static-sitemapxml)    | `.xml`      | ملف خريطة الموقع      |
+| [`sitemap`](/docs/app/api-reference/file-conventions/metadata/sitemap#generate-a-sitemap)   | `.js` `.ts` | خريطة الموقع المولدة  |
+| [`robots`](/docs/app/api-reference/file-conventions/metadata/robots#static-robotstxt)       | `.txt`      | ملف robots            |
+| [`robots`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file) | `.js` `.ts` | ملف robots المولد     |
+
+## اتفاقيات التوجيه في `pages`
+
+### ملفات خاصة
+
+|                                                                                                             |                     |                   |
+| ----------------------------------------------------------------------------------------------------------- | ------------------- | ----------------- |
+| [`_app`](/docs/pages/building-your-application/routing/custom-app)                                          | `.js` `.jsx` `.tsx` | تطبيق مخصص        |
+| [`_document`](/docs/pages/building-your-application/routing/custom-document)                                | `.js` `.jsx` `.tsx` | مستند مخصص        |
+| [`_error`](/docs/pages/building-your-application/routing/custom-error#more-advanced-error-page-customizing) | `.js` `.jsx` `.tsx` | صفحة خطأ مخصصة   |
+| [`404`](/docs/pages/building-your-application/routing/custom-error#404-page)                                | `.js` `.jsx` `.tsx` | صفحة خطأ 404      |
+| [`500`](/docs/pages/building-your-application/routing/custom-error#500-page)                                | `.js` `.jsx` `.tsx` | صفحة خطأ 500      |
+
+### المسارات
+
+|                                                                                                |                     |             |
+| ---------------------------------------------------------------------------------------------- | ------------------- | ----------- |
+| **اتفاقية المجلد**                                                                             |                     |             |
+| [`index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes)        | `.js` `.jsx` `.tsx` | الصفحة الرئيسية |
+| [`folder/index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) | `.js` `.jsx` `.tsx` | صفحة متداخلة |
+| **اتفاقية الملف**                                                                              |                     |             |
+| [`index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes)        | `.js` `.jsx` `.tsx` | الصفحة الرئيسية |
+| [`file`](/docs/pages/building-your-application/routing/pages-and-layouts)                      | `.js` `.jsx` `.tsx` | صفحة متداخلة |
+
+### المسارات الديناميكية
+
+|                                                                                                                   |                     |                                  |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------- | -------------------------------- |
+| **اتفاقية المجلد**                                                                                                |                     |                                  |
+| [`[folder]/index`](/docs/pages/building-your-application/routing/dynamic-routes)                                  | `.js` `.jsx` `.tsx` | قطعة مسار ديناميكية             |
+| [`[...folder]/index`](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments)            | `.js` `.jsx` `.tsx` | قطعة مسار شاملة                 |
+| [`[[...folder]]/index`](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | قطعة مسار شاملة اختيارية        |
+| **اتفاقية الملف**                                                                                                |                     |                                  |
+| [`[file]`](/docs/pages/building-your-application/routing/dynamic-routes)                                          | `.js` `.jsx` `.tsx` | قطعة مسار ديناميكية             |
+| [`[...file]`](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments)                    | `.js` `.jsx` `.tsx` | قطعة مسار شاملة                 |
+| [`[[...file]]`](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments)         | `.js` `.jsx` `.tsx` | قطعة مسار شاملة اختيارية        |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/01-getting-started/index.mdx b/apps/docs/content/ar/docs/13/01-getting-started/index.mdx
new file mode 100644
index 00000000..2d0f6b2a
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/01-getting-started/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:16:18.762Z
+title: البدء
+description: تعلم كيفية إنشاء تطبيقات ويب كاملة باستخدام إطار العمل Next.js.
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/01-defining-routes.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/01-defining-routes.mdx
new file mode 100644
index 00000000..2fe24555
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/01-defining-routes.mdx
@@ -0,0 +1,60 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:11:43.155Z
+title: تعريف المسارات (Routes)
+description: تعلم كيفية إنشاء أول مسار (route) لك في Next.js.
+related:
+  description: تعلم المزيد حول إنشاء الصفحات (pages) والتخطيطات (layouts).
+  links:
+    - app/building-your-application/routing/pages-and-layouts
+---
+
+> نوصي بقراءة صفحة [أساسيات التوجيه (Routing Fundamentals)](/docs/app/building-your-application/routing) قبل المتابعة.
+
+سيوجهك هذه الصفحة حول كيفية تعريف وتنظيم المسارات (routes) في تطبيق Next.js الخاص بك.
+
+## إنشاء المسارات
+
+يستخدم Next.js موجهًا يعتمد على نظام الملفات حيث تُستخدم **المجلدات** لتعريف المسارات.
+
+يمثل كل مجلد [قطعة مسار (route segment)](/docs/app/building-your-application/routing#route-segments) تُرسم إلى **قطعة URL**. لإنشاء [مسار متداخل (nested route)](/docs/app/building-your-application/routing#nested-routes)، يمكنك تداخل المجلدات داخل بعضها البعض.
+
+<Image
+  alt="Route segments to path segments"
+  srcLight="/docs/light/route-segments-to-path-segments.png"
+  srcDark="/docs/dark/route-segments-to-path-segments.png"
+  width="1600"
+  height="594"
+/>
+
+يتم استخدام ملف خاص [`page.js`](/docs/app/building-your-application/routing/pages-and-layouts#pages) لجعل قطع المسار قابلة للوصول بشكل عام.
+
+<Image
+  alt="Defining Routes"
+  srcLight="/docs/light/defining-routes.png"
+  srcDark="/docs/dark/defining-routes.png"
+  width="1600"
+  height="687"
+/>
+
+في هذا المثال، مسار URL `/dashboard/analytics` _ليس_ متاحًا للعامة لأنه لا يحتوي على ملف `page.js` مقابِل. يمكن استخدام هذا المجلد لتخزين المكونات (components)، أو ملفات الأنماط (stylesheets)، أو الصور، أو أي ملفات أخرى مجمعة معًا.
+
+> **معلومة مفيدة**: يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للملفات الخاصة.
+
+## إنشاء واجهة المستخدم
+
+تُستخدم [اصطلاحات الملفات الخاصة](/docs/app/building-your-application/routing#file-conventions) لإنشاء واجهة المستخدم لكل قطعة مسار. الأكثر شيوعًا هي [الصفحات (pages)](/docs/app/building-your-application/routing/pages-and-layouts#pages) لعرض واجهة المستخدم الفريدة للمسار، و[التخطيطات (layouts)](/docs/app/building-your-application/routing/pages-and-layouts#layouts) لعرض واجهة المستخدم المشتركة بين عدة مسارات.
+
+على سبيل المثال، لإنشاء صفحتك الأولى، أضف ملف `page.js` داخل مجلد `app` وقم بتصدير مكون React:
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx
new file mode 100644
index 00000000..30e764a2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx
@@ -0,0 +1,275 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:54.226Z
+title: الصفحات والتخطيطات
+description: إنشاء أول صفحة لك وتخطيط مشترك باستخدام موجه التطبيق (App Router).
+---
+
+> نوصي بقراءة صفحات [أساسيات التوجيه](/docs/app/building-your-application/routing) و[تحديد المسارات](/docs/app/building-your-application/routing/defining-routes) قبل المتابعة.
+
+قدم موجه التطبيق (App Router) في Next.js 13 اصطلاحات ملفات جديدة لإنشاء [صفحات](#pages)، [تخطيطات مشتركة](#layouts)، و[قوالب](#templates) بسهولة. سيرشدك هذا الصفحة حول كيفية استخدام هذه الملفات الخاصة في تطبيق Next.js الخاص بك.
+
+## الصفحات
+
+الصفحة هي واجهة مستخدم **فريدة** لمسار معين. يمكنك تعريف الصفحات عن طريق تصدير مكون من ملف `page.js`. استخدم المجلدات المتداخلة ل[تحديد مسار](/docs/app/building-your-application/routing/defining-routes) وملف `page.js` لجعل المسار متاحًا للجمهور.
+
+أنشئ صفحتك الأولى عن طريق إضافة ملف `page.js` داخل مجلد `app`:
+
+<Image
+  alt="ملف page.js الخاص"
+  srcLight="/docs/light/page-special-file.png"
+  srcDark="/docs/dark/page-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+```tsx filename="app/page.tsx" switcher
+// `app/page.tsx` هو واجهة المستخدم لمسار `/`
+export default function Page() {
+  return <h1>مرحبًا، الصفحة الرئيسية!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+// `app/page.js` هو واجهة المستخدم لمسار `/`
+export default function Page() {
+  return <h1>مرحبًا، الصفحة الرئيسية!</h1>
+}
+```
+
+```tsx filename="app/dashboard/page.tsx" switcher
+// `app/dashboard/page.tsx` هو واجهة المستخدم لمسار `/dashboard`
+export default function Page() {
+  return <h1>مرحبًا، صفحة لوحة التحكم!</h1>
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+// `app/dashboard/page.js` هو واجهة المستخدم لمسار `/dashboard`
+export default function Page() {
+  return <h1>مرحبًا، صفحة لوحة التحكم!</h1>
+}
+```
+
+> **جيد أن تعرف**:
+>
+> - الصفحة دائمًا هي [ورقة الشجرة](/docs/app/building-your-application/routing#terminology) ل[شجرة المسار الفرعية](/docs/app/building-your-application/routing#terminology).
+> - يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للصفحات.
+> - ملف `page.js` مطلوب لجعل جزء المسار متاحًا للجمهور.
+> - الصفحات هي [مكونات خادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا ولكن يمكن تعيينها كمكون [عميل (Client Component)](/docs/app/building-your-application/rendering/client-components).
+> - يمكن للصفحات جلب البيانات. راجع قسم [جلب البيانات](/docs/app/building-your-application/data-fetching) لمزيد من المعلومات.
+
+## التخطيطات
+
+التخطيط هو واجهة مستخدم **مشتركة** بين عدة صفحات. عند التنقل، تحافظ التخطيطات على الحالة، تبقى تفاعلية، ولا تعيد التصيير. يمكن أيضًا [تداخل التخطيطات](#nesting-layouts).
+
+يمكنك تعريف تخطيط عن طريق تصدير مكون React افتراضي من ملف `layout.js`. يجب أن يقبل المكون خاصية `children` التي سيتم تعبئتها بتخطيط فرعي (إذا كان موجودًا) أو صفحة فرعية أثناء التصيير.
+
+<Image
+  alt="ملف layout.js الخاص"
+  srcLight="/docs/light/layout-special-file.png"
+  srcDark="/docs/dark/layout-special-file.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+export default function DashboardLayout({
+  children, // سيكون صفحة أو تخطيط متداخل
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <section>
+      {/* ضع واجهة المستخدم المشتركة هنا مثل رأس أو شريط جانبي */}
+      <nav></nav>
+
+      {children}
+    </section>
+  )
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+export default function DashboardLayout({
+  children, // سيكون صفحة أو تخطيط متداخل
+}) {
+  return (
+    <section>
+      {/* ضع واجهة المستخدم المشتركة هنا مثل رأس أو شريط جانبي */}
+      <nav></nav>
+
+      {children}
+    </section>
+  )
+}
+```
+
+> **جيد أن تعرف**:
+>
+> - يسمى التخطيط الأعلى بـ [تخطيط الجذر (Root Layout)](#root-layout-required). هذا التخطيط **مطلوب** ويتم مشاركته عبر جميع الصفحات في التطبيق. يجب أن تحتوي تخطيطات الجذر على وسم `html` و `body`.
+> - يمكن لأي جزء من المسار اختياريًا تعريف [تخطيطه الخاص](#nesting-layouts). ستتم مشاركة هذه التخطيطات عبر جميع الصفحات في هذا الجزء.
+> - التخطيطات في المسار **متداخلة** افتراضيًا. كل تخطيط رئيسي يلف التخطيطات الفرعية تحته باستخدام خاصية React `children`.
+> - يمكنك استخدام [مجموعات المسار (Route Groups)](/docs/app/building-your-application/routing/route-groups) لاختيار أجزاء مسار معينة داخل أو خارج التخطيطات المشتركة.
+> - التخطيطات هي [مكونات خادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا ولكن يمكن تعيينها كمكون [عميل (Client Component)](/docs/app/building-your-application/rendering/client-components).
+> - يمكن للتخطيطات جلب البيانات. راجع قسم [جلب البيانات](/docs/app/building-your-application/data-fetching) لمزيد من المعلومات.
+> - لا يمكن تمرير البيانات بين التخطيط الرئيسي وأطفاله. ومع ذلك، يمكنك جلب نفس البيانات في مسار أكثر من مرة، وسيقوم React [بإزالة التكرارات تلقائيًا](/docs/app/building-your-application/caching#request-memoization) دون التأثير على الأداء.
+> - لا يمكن للتخطيطات الوصول إلى أجزاء المسار أسفلها. للوصول إلى جميع أجزاء المسار، يمكنك استخدام [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment) أو [`useSelectedLayoutSegments` في مكون عميل.
+> - يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للتخطيطات.
+> - يمكن تعريف ملف `layout.js` و `page.js` في نفس المجلد. سيلف التخطيط الصفحة.
+
+### تخطيط الجذر (مطلوب)
+
+يتم تعريف تخطيط الجذر في المستوى الأعلى من مجلد `app` وينطبق على جميع المسارات. يتيح لك هذا التخطيط تعديل HTML الأولي المرسل من الخادم.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="ar">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="ar">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+> **جيد أن تعرف**:
+>
+> - **يجب** أن يتضمن مجلد `app` تخطيط جذر.
+> - يجب أن يحدد تخطيط الجذر وسم `<html>` و `<body>` لأن Next.js لا ينشئها تلقائيًا.
+> - يمكنك استخدام [دعم SEO المدمج](/docs/app/building-your-application/optimizing/metadata) لإدارة عناصر HTML `<head>`، على سبيل المثال، وسم `<title>`.
+> - يمكنك استخدام [مجموعات المسار (Route Groups)](/docs/app/building-your-application/routing/route-groups) لإنشاء تخطيطات جذر متعددة. انظر [مثال هنا](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts).
+> - تخطيط الجذر هو [مكون خادم (Server Component)](/docs/app/building-your-application/rendering/server-components) افتراضيًا و**لا يمكن** تعيينه كمكون [عميل (Client Component)](/docs/app/building-your-application/rendering/client-components).
+
+> **الانتقال من مجلد `pages`:** يحل تخطيط الجذر محل ملفات [`_app.js`](/docs/pages/building-your-application/routing/custom-app) و [`_document.js`](/docs/pages/building-your-application/routing/custom-document). [راجع دليل الانتقال](/docs/app/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs).
+
+### تداخل التخطيطات
+
+تنطبق التخطيطات المعرفة داخل مجلد (مثل `app/dashboard/layout.js`) على أجزاء مسار معينة (مثل `acme.com/dashboard`) وتصدر عندما تكون هذه الأجزاء نشطة. افتراضيًا، التخطيطات في تسلسل الملفات **متداخلة**، مما يعني أنها تغلف التخطيطات الفرعية عبر خاصية `children`.
+
+<Image
+  alt="تخطيط متداخل"
+  srcLight="/docs/light/nested-layout.png"
+  srcDark="/docs/dark/nested-layout.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <section>{children}</section>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+export default function DashboardLayout({ children }) {
+  return <section>{children}</section>
+}
+```
+
+> **جيد أن تعرف**:
+>
+> - فقط تخطيط الجذر يمكن أن يحتوي على وسم `<html>` و `<body>`.
+
+إذا قمت بدمج التخطيطين أعلاه، فسيلف تخطيط الجذر (`app/layout.js`) تخطيط لوحة التحكم (`app/dashboard/layout.js`)، والذي بدوره سيلف أجزاء المسار داخل `app/dashboard/*`.
+
+سيتم تداخل التخطيطين كما يلي:
+
+<Image
+  alt="تخطيطات متداخلة"
+  srcLight="/docs/light/nested-layouts-ui.png"
+  srcDark="/docs/dark/nested-layouts-ui.png"
+  width="1600"
+  height="1026"
+/>
+
+يمكنك استخدام [مجموعات المسار (Route Groups)](/docs/app/building-your-application/routing/route-groups) لاختيار أجزاء مسار معينة داخل أو خارج التخطيطات المشتركة.
+
+## القوالب
+
+القوالب مشابهة للتخطيطات من حيث أنها تغلف كل تخطيط فرعي أو صفحة. على عكس التخطيطات التي تبقى عبر المسارات وتحافظ على الحالة، تنشئ القوالب نسخة جديدة لكل طفل لها عند التنقل. هذا يعني أنه عندما ينتقل المستخدم بين المسارات التي تشترك في قالب، يتم تحميل نسخة جديدة من المكون، يتم إعادة إنشاء عناصر DOM، **لا** يتم الحفاظ على الحالة، ويتم إعادة مزامنة التأثيرات.
+
+قد تكون هناك حالات تحتاج فيها إلى هذه السلوكيات المحددة، وتكون القوالب خيارًا أكثر ملاءمة من التخطيطات. على سبيل المثال:
+
+- ميزات تعتمد على `useEffect` (مثل تسجيل مشاهدات الصفحة) و `useState` (مثل نموذج تعليقات لكل صفحة).
+- لتغيير سلوك الإطار الافتراضي. على سبيل المثال، حدود Suspense داخل التخطيطات تظهر الحالة الاحتياطية فقط عند تحميل التخطيط لأول مرة وليس عند تبديل الصفحات. بالنسبة للقوالب، تظهر الحالة الاحتياطية في كل تنقل.
+
+يمكن تعريف قالب عن طريق تصدير مكون React افتراضي من ملف `template.js`. يجب أن يقبل المكون خاصية `children`.
+
+<Image
+  alt="ملف template.js الخاص"
+  srcLight="/docs/light/template-special-file.png"
+  srcDark="/docs/dark/template-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+```tsx filename="app/template.tsx" switcher
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>
+}
+```
+
+```jsx filename="app/template.js" switcher
+export default function Template({ children }) {
+  return <div>{children}</div>
+}
+```
+
+من حيث التداخل، يتم تصيير `template.js` بين التخطيط وأطفاله. إليك ناتج مبسط:
+
+```jsx filename="الناتج"
+<Layout>
+  {/* لاحظ أن القالب يحصل على مفتاح فريد. */}
+  <Template key={routeParam}>{children}</Template>
+</Layout>
+```
+
+## تعديل `<head>`
+
+في مجلد `app`، يمكنك تعديل عناصر HTML `<head>` مثل `title` و `meta` باستخدام [دعم SEO المدمج](/docs/app/building-your-application/optimizing/metadata).
+
+يمكن تعريف البيانات الوصفية عن طريق تصدير [كائن `metadata`](/docs/app/api-reference/functions/generate-metadata#the-metadata-object) أو [دالة `generateMetadata`](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) في ملف [`layout.js`](/docs/app/api-reference/file-conventions/layout) أو [`page.js`](/docs/app/api-reference/file-conventions/page).
+
+```tsx filename="app/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Next.js',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+```jsx filename="app/page.js" switcher
+export const metadata = {
+  title: 'Next.js',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+> **جيد أن تعرف**: يجب **ألا** تضيف يدويًا وسوم `<head>` مثل `<title>` و `<meta>` إلى تخطيطات الجذر. بدلاً من ذلك، يجب استخدام [واجهة برمجة تطبيقات البيانات الوصفية (Metadata API)](/docs/app/api-reference/functions/generate-metadata) التي تتعامل تلقائيًا مع المتطلبات المتقدمة مثل البث وإزالة التكرارات من عناصر `<head>`.
+
+[تعرف على المزيد حول خيارات البيانات الوصفية المتاحة في مرجع API.](/docs/app/api-reference/functions/generate-metadata)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
new file mode 100644
index 00000000..bde36c19
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -0,0 +1,246 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:30.079Z
+title: الربط والتنقل
+description: تعرف على كيفية عمل التنقل في Next.js، وكيفية استخدام مكون Link وخطاف `useRouter`.
+related:
+  links:
+    - app/building-your-application/caching
+    - app/building-your-application/configuring/typescript
+---
+
+هناك طريقتان للتنقل بين المسارات في Next.js:
+
+- استخدام [مكون `<Link>`](#link-component)
+- استخدام [خطاف `useRouter`](#userouter-hook)
+
+ستتناول هذه الصفحة كيفية استخدام `<Link>` و `useRouter()`، والغوص أعمق في كيفية عمل التنقل.
+
+## مكون `<Link>`
+
+`<Link>` هو مكون مدمج يمتد علامة HTML `<a>` لتوفير [الجلب المسبق (Prefetching)](#1-prefetching) والتنقل بين المسارات من جانب العميل. وهو الطريقة الأساسية للتنقل بين المسارات في Next.js.
+
+يمكنك استخدامه عن طريق استيراده من `next/link`، وتمرير خاصية `href` إلى المكون:
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">لوحة التحكم</Link>
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">لوحة التحكم</Link>
+}
+```
+
+هناك خصائص اختيارية أخرى يمكنك تمريرها إلى `<Link>`. راجع [مرجع API](/docs/app/api-reference/components/link) للمزيد.
+
+### أمثلة
+
+#### الربط إلى الأجزاء الديناميكية
+
+عند الربط إلى [الأجزاء الديناميكية](/docs/app/building-your-application/routing/dynamic-routes)، يمكنك استخدام [القوالب الحرفية والاستيفاء](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) لإنشاء قائمة من الروابط. على سبيل المثال، لإنشاء قائمة من منشورات المدونة:
+
+```jsx filename="app/blog/PostList.js"
+import Link from 'next/link'
+
+export default function PostList({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+#### التحقق من الروابط النشطة
+
+يمكنك استخدام [`usePathname()`](/docs/app/api-reference/functions/use-pathname) لتحديد ما إذا كان الرابط نشطًا. على سبيل المثال، لإضافة فئة إلى الرابط النشط، يمكنك التحقق مما إذا كان `pathname` الحالي يتطابق مع `href` الرابط:
+
+```tsx filename="app/components/links.tsx" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function Links() {
+  const pathname = usePathname()
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
+            الرئيسية
+          </Link>
+        </li>
+        <li>
+          <Link
+            className={`link ${pathname === '/about' ? 'active' : ''}`}
+            href="/about"
+          >
+            حول
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  )
+}
+```
+
+```jsx filename="app/components/links.js" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function Links() {
+  const pathname = usePathname()
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
+            الرئيسية
+          </Link>
+        </li>
+        <li>
+          <Link
+            className={`link ${pathname === '/about' ? 'active' : ''}`}
+            href="/about"
+          >
+            حول
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  )
+}
+```
+
+#### التمرير إلى `id`
+
+السلوك الافتراضي لموجه تطبيق Next.js هو التمرير إلى أعلى مسار جديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام.
+
+إذا كنت ترغب في التمرير إلى `id` محدد أثناء التنقل، يمكنك إضافة رابط تجزئة `#` إلى عنوان URL الخاص بك أو تمرير رابط تجزئة إلى خاصية `href`. هذا ممكن لأن `<Link>` يتم عرضه كعنصر `<a>`.
+
+```jsx
+<Link href="/dashboard#settings">الإعدادات</Link>
+
+// الناتج
+<a href="/dashboard#settings">الإعدادات</a>
+```
+
+#### تعطيل استعادة التمرير
+
+السلوك الافتراضي لموجه تطبيق Next.js هو التمرير إلى أعلى مسار جديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام. إذا كنت ترغب في تعطيل هذا السلوك، يمكنك تمرير `scroll={false}` إلى مكون `<Link>`، أو `scroll: false` إلى `router.push()` أو `router.replace()`.
+
+```jsx
+// next/link
+<Link href="/dashboard" scroll={false}>
+  لوحة التحكم
+</Link>
+```
+
+```jsx
+// useRouter
+import { useRouter } from 'next/navigation'
+
+const router = useRouter()
+
+router.push('/dashboard', { scroll: false })
+```
+
+## خطاف `useRouter()`
+
+يسمح خطاف `useRouter` بتغيير المسارات برمجيًا.
+
+يمكن استخدام هذا الخطاف فقط داخل مكونات العميل ويتم استيراده من `next/navigation`.
+
+```jsx filename="app/page.js"
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      لوحة التحكم
+    </button>
+  )
+}
+```
+
+للحصول على قائمة كاملة بطرق `useRouter`، راجع [مرجع API](/docs/app/api-reference/functions/use-router).
+
+> **توصية:** استخدم مكون `<Link>` للتنقل بين المسارات ما لم يكن لديك متطلب محدد لاستخدام `useRouter`.
+
+## كيف يعمل التوجيه والتنقل
+
+يستخدم موجه التطبيق نهجًا هجينًا للتوجيه والتنقل. على الخادم، يتم تقسيم كود التطبيق تلقائيًا حسب أجزاء المسار. وعلى العميل، يقوم Next.js [بجلب مسبق (Prefetching)](#1-prefetching) و[تخزين مؤقت (Caching)](#2-caching) لأجزاء المسار. هذا يعني أنه عندما ينتقل المستخدم إلى مسار جديد، لا يعيد المتصفح تحميل الصفحة، ويعاد عرض أجزاء المسار التي تتغير فقط - مما يحسن تجربة التنقل والأداء.
+
+### 1. الجلب المسبق (Prefetching)
+
+الجلب المسبق هو طريقة لتحميل مسار مسبقًا في الخلفية قبل أن يزوره المستخدم.
+
+هناك طريقتان يتم بهما جلب المسارات مسبقًا في Next.js:
+
+- **مكون `<Link>`**: يتم جلب المسارات مسبقًا تلقائيًا عندما تصبح مرئية في نطاق رؤية المستخدم. يحدث الجلب المسبق عند تحميل الصفحة لأول مرة أو عندما تصبح مرئية عن طريق التمرير.
+- **`router.prefetch()`**: يمكن استخدام خطاف `useRouter` لجلب المسارات مسبقًا برمجيًا.
+
+يختلف سلوك الجلب المسبق لـ `<Link>` للمسارات الثابتة والديناميكية:
+
+- [**المسارات الثابتة**](/docs/app/building-your-application/rendering/server-components#static-rendering-default): `prefetch` افتراضيًا `true`. يتم جلب المسار بالكامل وتخزينه مؤقتًا.
+- [**المسارات الديناميكية**](/docs/app/building-your-application/rendering/server-components#dynamic-rendering): `prefetch` افتراضيًا تلقائي. يتم جلب التخطيط المشترك فقط حتى أول ملف `loading.js` وتخزينه مؤقتًا لمدة `30s`. هذا يقلل من تكلفة جلب مسار ديناميكي بالكامل، ويعني أنه يمكنك عرض [حالة تحميل فورية](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) لتحسين التغذية المرئية للمستخدمين.
+
+يمكنك تعطيل الجلب المسبق عن طريق تعيين خاصية `prefetch` إلى `false`.
+
+راجع [مرجع API لـ `<Link>`](/docs/app/api-reference/components/link) للمزيد من المعلومات.
+
+> **جيد أن تعرف**:
+>
+> - الجلب المسبق غير مفعل في وضع التطوير، فقط في الإنتاج.
+
+### 2. التخزين المؤقت (Caching)
+
+يحتوي Next.js على **تخزين مؤقت من جانب العميل في الذاكرة** يسمى [تخزين الموجه (Router Cache)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data#router-cache). أثناء تنقل المستخدمين في التطبيق، يتم تخزين حمولة مكون خادم React لأجزاء المسار التي تم جلبها مسبقًا والمسارات التي تمت زيارتها في التخزين المؤقت.
+
+هذا يعني أنه عند التنقل، يتم إعادة استخدام التخزين المؤقت قدر الإمكان، بدلاً من إجراء طلب جديد إلى الخادم - مما يحسن الأداء عن طريق تقليل عدد الطلبات والبيانات المنقولة.
+
+تعرف على المزيد حول كيفية عمل [تخزين الموجه (Router Cache)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data) وكيفية تكوينه.
+
+### 3. العرض الجزئي (Partial Rendering)
+
+العرض الجزئي يعني أنه يتم إعادة عرض أجزاء المسار التي تتغير فقط أثناء التنقل على العميل، ويتم الحفاظ على أي أجزاء مشتركة.
+
+على سبيل المثال، عند التنقل بين مسارين شقيقين، `/dashboard/settings` و `/dashboard/analytics`، سيتم عرض صفحات `settings` و `analytics`، وسيتم الحفاظ على تخطيط `dashboard` المشترك.
+
+<Image
+  alt="كيف يعمل العرض الجزئي"
+  srcLight="/docs/light/partial-rendering.png"
+  srcDark="/docs/dark/partial-rendering.png"
+  width="1600"
+  height="945"
+/>
+
+بدون العرض الجزئي، سيؤدي كل تنقل إلى إعادة عرض الصفحة بالكامل على الخادم. يؤدي عرض الجزء الذي يتغير فقط إلى تقليل كمية البيانات المنقولة ووقت التنفيذ، مما يؤدي إلى تحسين الأداء.
+
+### 4. التنقل الناعم (Soft Navigation)
+
+بشكل افتراضي، يقوم المتصفح بتنقل صعب بين الصفحات. هذا يعني أن المتصفح يعيد تحميل الصفحة ويعيد تعيين حالة React مثل خطافات `useState` في تطبيقك وحالة المتصفح مثل موضع التمرير أو العنصر الذي يتم التركيز عليه. ومع ذلك، في Next.js، يستخدم موجه التطبيق التنقل الناعم. هذا يعني أن React يعرض فقط الأجزاء التي تغيرت مع الحفاظ على حالة React وحالة المتصفح، ولا يوجد إعادة تحميل كاملة للصفحة.
+
+### 5. التنقل للخلف وللأمام
+
+بشكل افتراضي، ستحافظ Next.js على موضع التمرير للتنقل للخلف وللأمام، وإعادة استخدام أجزاء المسار في [تخزين الموجه (Router Cache)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/04-route-groups.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/04-route-groups.mdx
new file mode 100644
index 00000000..4fde5b81
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/04-route-groups.mdx
@@ -0,0 +1,80 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:11:25.253Z
+title: مجموعات المسارات (Route Groups)
+description: يمكن استخدام مجموعات المسارات لتقسيم تطبيق Next.js الخاص بك إلى أقسام مختلفة.
+---
+
+في دليل `app`، يتم عادةً تعيين المجلدات المتداخلة إلى مسارات URL. ومع ذلك، يمكنك تحديد مجلد كـ **مجموعة مسارات (Route Group)** لمنع تضمين المجلد في مسار URL للرابط.
+
+هذا يسمح لك بتنظيم مقاطع المسارات وملفات المشروع في مجموعات منطقية دون التأثير على هيكل مسار URL.
+
+تكون مجموعات المسارات مفيدة في:
+
+- [تنظيم المسارات في مجموعات](#organize-routes-without-affecting-the-url-path) مثل حسب قسم الموقع، الغرض، أو الفريق.
+- تمكين [التخطيطات المتداخلة](/docs/app/building-your-application/routing/pages-and-layouts) في نفس مستوى مقطع المسار:
+  - [إنشاء تخطيطات متداخلة متعددة في نفس المقطع، بما في ذلك تخطيطات جذر متعددة](#creating-multiple-root-layouts)
+  - [إضافة تخطيط إلى مجموعة فرعية من المسارات في مقطع مشترك](#opting-specific-segments-into-a-layout)
+
+## الاصطلاح
+
+يمكن إنشاء مجموعة مسارات عن طريق تضمين اسم المجلد بين قوسين: `(folderName)`
+
+## أمثلة
+
+### تنظيم المسارات دون التأثير على مسار URL
+
+لتنظيم المسارات دون التأثير على URL، قم بإنشاء مجموعة لإبقاء المسارات المرتبطة معًا. سيتم حذف المجلدات بين القوسين من URL (مثل `(marketing)` أو `(shop)`).
+
+<Image
+  alt="تنظيم المسارات باستخدام مجموعات المسارات"
+  srcLight="/docs/light/route-group-organisation.png"
+  srcDark="/docs/dark/route-group-organisation.png"
+  width="1600"
+  height="930"
+/>
+
+على الرغم من أن المسارات داخل `(marketing)` و `(shop)` تشترك في نفس التسلسل الهرمي لـ URL، يمكنك إنشاء تخطيط مختلف لكل مجموعة عن طريق إضافة ملف `layout.js` داخل مجلداتهم.
+
+<Image
+  alt="مجموعات المسارات مع تخطيطات متعددة"
+  srcLight="/docs/light/route-group-multiple-layouts.png"
+  srcDark="/docs/dark/route-group-multiple-layouts.png"
+  width="1600"
+  height="768"
+/>
+
+### اختيار مقاطع محددة لتطبيق تخطيط عليها
+
+لاختيار مسارات محددة لتطبيق تخطيط عليها، قم بإنشاء مجموعة مسارات جديدة (مثل `(shop)`) ونقل المسارات التي تشترك في نفس التخطيط إلى المجموعة (مثل `account` و `cart`). المسارات خارج المجموعة لن تشترك في التخطيط (مثل `checkout`).
+
+<Image
+  alt="مجموعات المسارات مع تخطيطات اختيارية"
+  srcLight="/docs/light/route-group-opt-in-layouts.png"
+  srcDark="/docs/dark/route-group-opt-in-layouts.png"
+  width="1600"
+  height="930"
+/>
+
+### إنشاء تخطيطات جذر متعددة
+
+لإنشاء عدة [تخطيطات جذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)، قم بإزالة ملف `layout.js` في المستوى الأعلى، وأضف ملف `layout.js` داخل كل مجموعة مسارات. هذا مفيد لتقسيم التطبيق إلى أقسام لها واجهة مستخدم أو تجربة مختلفة تمامًا. يجب إضافة العلامات `<html>` و `<body>` إلى كل تخطيط جذر.
+
+<Image
+  alt="مجموعات المسارات مع تخطيطات جذر متعددة"
+  srcLight="/docs/light/route-group-multiple-root-layouts.png"
+  srcDark="/docs/dark/route-group-multiple-root-layouts.png"
+  width="1600"
+  height="687"
+/>
+
+في المثال أعلاه، كل من `(marketing)` و `(shop)` لديهم تخطيط جذر خاص بهم.
+
+---
+
+> **من الجيد معرفة**:
+>
+> - تسمية مجموعات المسارات ليس لها أهمية خاصة بخلاف التنظيم. لا تؤثر على مسار URL.
+> - المسارات التي تتضمن مجموعة مسارات **يجب ألا** تحل إلى نفس مسار URL مثل المسارات الأخرى. على سبيل المثال، بما أن مجموعات المسارات لا تؤثر على هيكل URL، فإن `(marketing)/about/page.js` و `(shop)/about/page.js` سيحلان إلى `/about` وسيسببان خطأ.
+> - إذا كنت تستخدم عدة تخطيطات جذر بدون ملف `layout.js` في المستوى الأعلى، يجب تعريف ملف `page.js` الرئيسي في إحدى مجموعات المسارات، على سبيل المثال: `app/(marketing)/page.js`.
+> - التنقل **بين تخطيطات جذر متعددة** سيسبب **تحميل صفحة كاملة** (بدلاً من التنقل على جانب العميل). على سبيل المثال، التنقل من `/cart` الذي يستخدم `app/(shop)/layout.js` إلى `/blog` الذي يستخدم `app/(marketing)/layout.js` سيسبب تحميل صفحة كاملة. هذا **ينطبق فقط** على تخطيطات الجذر المتعددة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx
new file mode 100644
index 00000000..1acb146f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx
@@ -0,0 +1,127 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:11:12.388Z
+title: المسارات الديناميكية
+description: يمكن استخدام المسارات الديناميكية لإنشاء أجزاء المسار برمجيًا من البيانات الديناميكية.
+related:
+  title: الخطوات التالية
+  description: لمزيد من المعلومات حول ما يمكنك فعله بعد ذلك، نوصي بالأقسام التالية
+  links:
+    - app/building-your-your-application/routing/linking-and-navigating
+    - app/api-reference/functions/generate-static-params
+---
+
+عندما لا تعرف أسماء الأجزاء مسبقًا وتريد إنشاء مسارات من بيانات ديناميكية، يمكنك استخدام الأجزاء الديناميكية التي يتم تعبئتها وقت الطلب أو [المصممة مسبقًا](#generating-static-params) وقت البناء.
+
+## الاصطلاح
+
+يمكن إنشاء جزء ديناميكي عن طريق وضع اسم المجلد بين أقواس مربعة: `[folderName]`. على سبيل المثال، `[id]` أو `[slug]`.
+
+يتم تمرير الأجزاء الديناميكية كخاصية `params` إلى دوال [`layout`](/docs/app/api-reference/file-conventions/layout)، [`page`](/docs/app/api-reference/file-conventions/page)، [`route`](/docs/app/building-your-application/routing/route-handlers)، و[`generateMetadata`](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function).
+
+## مثال
+
+على سبيل المثال، يمكن أن يتضمن المدون المسار التالي `app/blog/[slug]/page.js` حيث `[slug]` هو الجزء الديناميكي لمقالات المدونة.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function Page({ params }: { params: { slug: string } }) {
+  return <div>My Post: {params.slug}</div>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export default function Page({ params }) {
+  return <div>My Post: {params.slug}</div>
+}
+```
+
+| المسار                     | مثال URL | `params`        |
+| ------------------------- | ----------- | --------------- |
+| `app/blog/[slug]/page.js` | `/blog/a`   | `{ slug: 'a' }` |
+| `app/blog/[slug]/page.js` | `/blog/b`   | `{ slug: 'b' }` |
+| `app/blog/[slug]/page.js` | `/blog/c`   | `{ slug: 'c' }` |
+
+راجع صفحة [generateStaticParams()](#generating-static-params) لمعرفة كيفية إنشاء معلمات الجزء.
+
+> **ملاحظة جيدة**: الأجزاء الديناميكية تعادل [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) في دليل `pages`.
+
+## إنشاء معلمات ثابتة
+
+يمكن استخدام دالة `generateStaticParams` بالاشتراك مع [أجزاء المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) ل[**إنشاء مسارات بشكل ثابت**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) وقت البناء بدلاً من الطلب عند الحاجة.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export async function generateStaticParams() {
+  const posts = await fetch('https://.../posts').then((res) => res.json())
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export async function generateStaticParams() {
+  const posts = await fetch('https://.../posts').then((res) => res.json())
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+```
+
+الفائدة الأساسية من دالة `generateStaticParams` هي استرجاعها الذكي للبيانات. إذا تم جلب المحتوى داخل دالة `generateStaticParams` باستخدام طلب `fetch`، فإن الطلبات يتم [تخزينها مؤقتًا تلقائيًا](/docs/app/building-your-application/caching#request-memoization). هذا يعني أن طلب `fetch` بنفس الوسائط عبر عدة `generateStaticParams`، وتخطيطات، وصفحات سيتم تنفيذه مرة واحدة فقط، مما يقلل أوقات البناء.
+
+استخدم [دليل الترحيل](/docs/app/building-your-application/upgrading/app-router-migration#dynamic-paths-getstaticpaths) إذا كنت تقوم بالترحيل من دليل `pages`.
+
+راجع [توثيق دالة الخادم `generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) لمزيد من المعلومات وحالات الاستخدام المتقدمة.
+
+## أجزاء الالتقاط الكلي
+
+يمكن توسيع الأجزاء الديناميكية ل**التقاط** الأجزاء اللاحقة عن طريق إضافة نقاط حذف داخل الأقواس `[...folderName]`.
+
+على سبيل المثال، `app/shop/[...slug]/page.js` سيطابق `/shop/clothes`، ولكن أيضًا `/shop/clothes/tops`، `/shop/clothes/tops/t-shirts`، وهكذا.
+
+| المسار                        | مثال URL   | `params`                    |
+| ---------------------------- | ------------- | --------------------------- |
+| `app/shop/[...slug]/page.js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `app/shop/[...slug]/page.js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `app/shop/[...slug]/page.js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
+
+## أجزاء الالتقاط الكلي الاختيارية
+
+يمكن جعل أجزاء الالتقاط الكلي **اختيارية** عن طريق تضمين المعلمة في أقواس مربعة مزدوجة: `[[...folderName]]`.
+
+على سبيل المثال، `app/shop/[[...slug]]/page.js` سيطابق **أيضًا** `/shop`، بالإضافة إلى `/shop/clothes`، `/shop/clothes/tops`، `/shop/clothes/tops/t-shirts`.
+
+الفرق بين أجزاء **الالتقاط الكلي** و**الالتقاط الكلي الاختيارية** هو أنه مع الاختيارية، يتم أيضًا مطابقة المسار بدون المعلمة (`/shop` في المثال أعلاه).
+
+| المسار                          | مثال URL   | `params`                    |
+| ------------------------------ | ------------- | --------------------------- |
+| `app/shop/[[...slug]]/page.js` | `/shop`       | `{}`                        |
+| `app/shop/[[...slug]]/page.js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `app/shop/[[...slug]]/page.js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `app/shop/[[...slug]]/page.js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
+
+## TypeScript
+
+عند استخدام TypeScript، يمكنك إضافة أنواع لـ `params` اعتمادًا على جزء المسار الذي قمت بتكوينه.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function Page({ params }: { params: { slug: string } }) {
+  return <h1>My Page</h1>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export default function Page({ params }) {
+  return <h1>My Page</h1>
+}
+```
+
+| المسار                               | تعريف نوع `params`                 |
+| ----------------------------------- | ---------------------------------------- |
+| `app/blog/[slug]/page.js`           | `{ slug: string }`                       |
+| `app/shop/[...slug]/page.js`        | `{ slug: string[] }`                     |
+| `app/[categoryId]/[itemId]/page.js` | `{ categoryId: string, itemId: string }` |
+
+> **ملاحظة جيدة**: قد يتم ذلك تلقائيًا بواسطة [ملحق TypeScript](/docs/app/building-your-application/configuring/typescript#typescript-plugin) في المستقبل.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/06-loading-ui-and-streaming.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/06-loading-ui-and-streaming.mdx
new file mode 100644
index 00000000..b05ed7f3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/06-loading-ui-and-streaming.mdx
@@ -0,0 +1,182 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:11:33.300Z
+title: واجهة التحميل والبث المباشر (Streaming)
+description: تم بناء واجهة التحميل على Suspense، مما يتيح لك إنشاء واجهة احتياطية لأجزاء معينة من المسار، وبث المحتوى تلقائيًا بمجرد استعداده.
+---
+
+يساعدك الملف الخاص `loading.js` في إنشاء واجهة تحميل ذات معنى باستخدام [React Suspense](https://react.dev/reference/react/Suspense). مع هذه الاتفاقية، يمكنك عرض [حالة تحميل فورية](#instant-loading-states) من الخادم أثناء تحميل محتوى جزء المسار. يتم استبدال المحتوى الجديد تلقائيًا بمجرد اكتمال التصيير.
+
+<Image
+  alt="واجهة التحميل"
+  srcLight="/docs/light/loading-ui.png"
+  srcDark="/docs/dark/loading-ui.png"
+  width="1600"
+  height="691"
+/>
+
+## حالات التحميل الفورية
+
+حالة التحميل الفورية هي واجهة مستخدم احتياطية تُعرض فورًا عند التنقل. يمكنك تصيير مؤشرات تحميل مسبقًا مثل الهياكل العظمية (skeletons) والدوائر الدوارة (spinners)، أو جزء صغير ولكن ذو معنى من الشاشات المستقبلية مثل صورة الغلاف، العنوان، إلخ. هذا يساعد المستخدمين على فهم أن التطبيق يستجيب ويوفر تجربة مستخدم أفضل.
+
+قم بإنشاء حالة تحميل عن طريق إضافة ملف `loading.js` داخل مجلد.
+
+<Image
+  alt="ملف loading.js الخاص"
+  srcLight="/docs/light/loading-special-file.png"
+  srcDark="/docs/dark/loading-special-file.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/loading.tsx" switcher
+export default function Loading() {
+  // يمكنك إضافة أي واجهة مستخدم داخل Loading، بما في ذلك الهيكل العظمي.
+  return <LoadingSkeleton />
+}
+```
+
+```jsx filename="app/dashboard/loading.js" switcher
+export default function Loading() {
+  // يمكنك إضافة أي واجهة مستخدم داخل Loading، بما في ذلك الهيكل العظمي.
+  return <LoadingSkeleton />
+}
+```
+
+في نفس المجلد، سيتم تداخل `loading.js` داخل `layout.js`. سيقوم تلقائيًا بلف ملف `page.js` وأي أطفال أدناه في حدود `<Suspense>`.
+
+<Image
+  alt="نظرة عامة على loading.js"
+  srcLight="/docs/light/loading-overview.png"
+  srcDark="/docs/dark/loading-overview.png"
+  width="1600"
+  height="768"
+/>
+
+> **جيد أن تعرف**:
+>
+> - التنقل فوري، حتى مع [التوجيه المركزي للخادم](/docs/app/building-your-application/routing/linking-and-navigating#how-routing-and-navigation-works).
+> - التنقل قابل للمقاطعة، مما يعني أن تغيير المسارات لا يحتاج إلى انتظار تحميل محتوى المسار بالكامل قبل التنقل إلى مسار آخر.
+> - تبقى التخطيطات المشتركة قابلة للتشغيل أثناء تحميل أجزاء المسار الجديدة.
+
+> **التوصية:** استخدم اتفاقية `loading.js` لأجزاء المسار (التخطيطات والصفحات) حيث يقوم Next.js بتحسين هذه الوظيفة.
+
+## البث المباشر مع Suspense
+
+بالإضافة إلى `loading.js`، يمكنك أيضًا إنشاء حدود Suspense يدويًا لمكونات واجهة المستخدم الخاصة بك. يدعم موجه التطبيق البث المباشر مع [Suspense](https://react.dev/reference/react/Suspense) لكل من [بيئات تشغيل Node.js و Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+
+### ما هو البث المباشر؟
+
+لفهم كيفية عمل البث المباشر في React وNext.js، من المفيد فهم **التصيير من جانب الخادم (SSR)** وقيودها.
+
+مع SSR، هناك سلسلة من الخطوات التي يجب إكمالها قبل أن يتمكن المستخدم من رؤية الصفحة والتفاعل معها:
+
+1. أولاً، يتم جلب جميع البيانات لصفحة معينة على الخادم.
+2. ثم يقوم الخادم بتصيير HTML للصفحة.
+3. يتم إرسال HTML وCSS وJavaScript للصفحة إلى العميل.
+4. يتم عرض واجهة مستخدم غير تفاعلية باستخدام HTML المُنشأ وCSS.
+5. أخيرًا، يقوم React [بترطيب (hydrate)](https://react.dev/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) واجهة المستخدم لجعلها تفاعلية.
+
+<Image
+  alt="رسم بياني يوضح تصيير الخادم بدون بث مباشر"
+  srcLight="/docs/light/server-rendering-without-streaming-chart.png"
+  srcDark="/docs/dark/server-rendering-without-streaming-chart.png"
+  width="1600"
+  height="612"
+/>
+
+هذه الخطوات متسلسلة وحظرية، مما يعني أن الخادم يمكنه فقط تصيير HTML للصفحة بمجرد جلب جميع البيانات. وعلى العميل، يمكن لـ React فقط ترطيب واجهة المستخدم بمجرد تنزيل كود جميع المكونات في الصفحة.
+
+يساعد SSR مع React وNext.js في تحسين أداء التحميل الملاحظ من خلال عرض صفحة غير تفاعلية للمستخدم في أسرع وقت ممكن.
+
+<Image
+  alt="تصيير الخادم بدون بث مباشر"
+  srcLight="/docs/light/server-rendering-without-streaming.png"
+  srcDark="/docs/dark/server-rendering-without-streaming.png"
+  width="1600"
+  height="748"
+/>
+
+ومع ذلك، يمكن أن يظل بطيئًا حيث يجب إكمال جلب جميع البيانات على الخادم قبل إمكانية عرض الصفحة للمستخدم.
+
+يتيح لك **البث المباشر** تقسيم HTML للصفحة إلى أجزاء أصغر وإرسال تلك الأجزاء تدريجيًا من الخادم إلى العميل.
+
+<Image
+  alt="كيف يعمل تصيير الخادم مع البث المباشر"
+  srcLight="/docs/light/server-rendering-with-streaming.png"
+  srcDark="/docs/dark/server-rendering-with-streaming.png"
+  width="1600"
+  height="785"
+/>
+
+هذا يمكّن أجزاء من الصفحة من الظهور عاجلاً، دون انتظار تحميل جميع البيانات قبل تصيير أي واجهة مستخدم.
+
+يعمل البث المباشر جيدًا مع نموذج مكونات React لأن كل مكون يمكن اعتباره جزءًا. يمكن إرسال المكونات ذات الأولوية الأعلى (مثل معلومات المنتج) أو التي لا تعتمد على البيانات أولاً (مثل التخطيط)، ويمكن لـ React بدء الترطيب مبكرًا. يمكن إرسال المكونات ذات الأولوية المنخفضة (مثل المراجعات، المنتجات ذات الصلة) في نفس طلب الخادم بعد جلب بياناتها.
+
+<Image
+  alt="رسم بياني يوضح تصيير الخادم مع البث المباشر"
+  srcLight="/docs/light/server-rendering-with-streaming-chart.png"
+  srcDark="/docs/dark/server-rendering-with-streaming-chart.png"
+  width="1600"
+  height="730"
+/>
+
+البث المباشر مفيد بشكل خاص عندما تريد منع طلبات البيانات الطويلة من حظر تصيير الصفحة حيث يمكنه تقليل [وقت الوصول إلى البايت الأول (TTFB)](https://web.dev/ttfb/) و[أول طلاء للمحتوى (FCP)](https://web.dev/first-contentful-paint/). كما أنه يساعد في تحسين [الوقت للتفاعل (TTI)](https://developer.chrome.com/en/docs/lighthouse/performance/interactive/)، خاصة على الأجهزة الأبطأ.
+
+### مثال
+
+يعمل `<Suspense>` عن طريق لف مكون يقوم بإجراء غير متزامن (مثل جلب البيانات)، وعرض واجهة مستخدم احتياطية (مثل هيكل عظمي، دائرة دوارة) أثناء حدوث ذلك، ثم استبدال مكونك بمجرد اكتمال الإجراء.
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import { Suspense } from 'react'
+import { PostFeed, Weather } from './Components'
+
+export default function Posts() {
+  return (
+    <section>
+      <Suspense fallback={<p>جاري تحميل التغذية...</p>}>
+        <PostFeed />
+      </Suspense>
+      <Suspense fallback={<p>جاري تحميل الطقس...</p>}>
+        <Weather />
+      </Suspense>
+    </section>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import { Suspense } from 'react'
+import { PostFeed, Weather } from './Components'
+
+export default function Posts() {
+  return (
+    <section>
+      <Suspense fallback={<p>جاري تحميل التغذية...</p>}>
+        <PostFeed />
+      </Suspense>
+      <Suspense fallback={<p>جاري تحميل الطقس...</p>}>
+        <Weather />
+      </Suspense>
+    </section>
+  )
+}
+```
+
+باستخدام Suspense، تحصل على فوائد:
+
+1. **تصيير الخادم مع البث المباشر** - تصيير HTML تدريجيًا من الخادم إلى العميل.
+2. **الترطيب الانتقائي** - يعطي React الأولوية للمكونات التي يجب جعلها تفاعلية أولاً بناءً على تفاعل المستخدم.
+
+لمزيد من أمثلة وحالات استخدام Suspense، يرجى الاطلاع على [توثيق React](https://react.dev/reference/react/Suspense).
+
+### تحسين محركات البحث (SEO)
+
+- سينتظر Next.js اكتمال جلب البيانات داخل [`generateMetadata`](/docs/app/api-reference/functions/generate-metadata) قبل بث واجهة المستخدم إلى العميل. وهذا يضمن أن الجزء الأول من الاستجابة المبثوثة يتضمن علامات `<head>`.
+- نظرًا لأن البث المباشر يتم تصييره من الخادم، فإنه لا يؤثر على تحسين محركات البحث. يمكنك استخدام أداة [Mobile Friendly Test](https://search.google.com/test/mobile-friendly) من Google لمعرفة كيف تظهر صفحتك لمحركات البحث في Google وعرض HTML المتسلسل ([المصدر](https://web.dev/rendering-on-the-web/#seo-considerations)).
+
+### رموز الحالة
+
+عند البث المباشر، سيتم إرجاع رمز حالة `200` للإشارة إلى نجاح الطلب.
+
+يمكن للخادم أن يواصل إبلاغ العميل بالأخطاء أو المشكلات داخل المحتوى المبثوث نفسه، على سبيل المثال عند استخدام [`redirect`](/docs/app/api-reference/functions/redirect) أو [`notFound`](/docs/app/api-reference/functions/not-found). نظرًا لأن رؤوس الاستجابة قد تم إرسالها بالفعل إلى العميل، لا يمكن تحديث رمز حالة الاستجابة. هذا لا يؤثر على تحسين محركات البحث.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/07-error-handling.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/07-error-handling.mdx
new file mode 100644
index 00000000..53cbbde6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/07-error-handling.mdx
@@ -0,0 +1,228 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:11:23.354Z
+title: معالجة الأخطاء
+description: التعامل مع أخطاء وقت التشغيل عن طريق تغليف مقاطع المسارات وأطفالها المتداخلين تلقائيًا في حدود خطأ React.
+related:
+  links:
+    - app/api-reference/file-conventions/error
+---
+
+تتيح لك اتفاقية ملف `error.js` التعامل بسلاسة مع أخطاء وقت التشغيل غير المتوقعة في [المسارات المتداخلة](/docs/app/building-your-application/routing#nested-routes).
+
+- تغليف مقطع المسار وأطفاله المتداخلين تلقائيًا في [حدود خطأ React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary).
+- إنشاء واجهة مستخدم للأخطاء مخصصة لمقاطع محددة باستخدام تسلسل الملفات لضبط الدقة.
+- عزل الأخطاء للمقاطع المتأثرة مع الحفاظ على بقية التطبيق يعمل.
+- إضافة وظيفة لمحاولة الاسترداد من الخطأ دون إعادة تحميل كامل للصفحة.
+
+قم بإنشاء واجهة مستخدم للأخطاء عن طريق إضافة ملف `error.js` داخل مقطع مسار وتصدير مكون React:
+
+<Image
+  alt="ملف error.js الخاص"
+  srcLight="/docs/light/error-special-file.png"
+  srcDark="/docs/dark/error-special-file.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/error.tsx" switcher
+'use client' // مكونات الخطأ يجب أن تكون مكونات عميل
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة إعداد التقارير عن الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاسترداد عن طريق إعادة عرض المقطع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/dashboard/error.js" switcher
+'use client' // مكونات الخطأ يجب أن تكون مكونات عميل
+
+import { useEffect } from 'react'
+
+export default function Error({ error, reset }) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة إعداد التقارير عن الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاسترداد عن طريق إعادة عرض المقطع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+### كيف يعمل `error.js`
+
+<Image
+  alt="كيف يعمل error.js"
+  srcLight="/docs/light/error-overview.png"
+  srcDark="/docs/dark/error-overview.png"
+  width="1600"
+  height="903"
+/>
+
+- ينشئ `error.js` تلقائيًا [حدود خطأ React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) التي **تغلف** مقطع طفل متداخل أو مكون `page.js`.
+- يُستخدم مكون React المصدر من ملف `error.js` كمكون **احتياطي**.
+- إذا تم طرح خطأ داخل حدود الخطأ، يتم **احتواء** الخطأ ويتم **عرض** المكون الاحتياطي.
+- عندما يكون مكون الخطأ الاحتياطي نشطًا، تحافظ التخطيطات **فوق** حدود الخطأ على حالتها وتبقى تفاعلية، ويمكن لمكون الخطأ عرض وظيفة للاسترداد من الخطأ.
+
+### الاسترداد من الأخطاء
+
+قد يكون سبب الخطأ مؤقتًا في بعض الأحيان. في هذه الحالات، قد تحل محاولة بسيطة للمحاولة مرة أخرى المشكلة.
+
+يمكن لمكون الخطأ استخدام دالة `reset()` لدفع المستخدم لمحاولة الاسترداد من الخطأ. عند التنفيذ، ستقوم الدالة بمحاولة إعادة عرض محتويات حدود الخطأ. إذا نجحت، يتم استبدال مكون الخطأ الاحتياطي بنتيجة إعادة العرض.
+
+```tsx filename="app/dashboard/error.tsx" switcher
+'use client'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button onClick={() => reset()}>حاول مرة أخرى</button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/dashboard/error.js" switcher
+'use client'
+
+export default function Error({ error, reset }) {
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button onClick={() => reset()}>حاول مرة أخرى</button>
+    </div>
+  )
+}
+```
+
+### المسارات المتداخلة
+
+يتم عرض مكونات React التي تم إنشاؤها من خلال [ملفات خاصة](/docs/app/building-your-application/routing#file-conventions) في [تسلسل هرمي متداخل محدد](/docs/app/building-your-application/routing#component-hierarchy).
+
+على سبيل المثال، يتم عرض مسار متداخل مع مقطعين يتضمنان ملفات `layout.js` و `error.js` في التسلسل الهرمي للمكونات المبسط التالي:
+
+<Image
+  alt="التسلسل الهرمي لمكونات الخطأ المتداخلة"
+  srcLight="/docs/light/nested-error-component-hierarchy.png"
+  srcDark="/docs/dark/nested-error-component-hierarchy.png"
+  width="1600"
+  height="687"
+/>
+
+يحتوي التسلسل الهرمي للمكونات المتداخلة على آثار لسلوك ملفات `error.js` عبر مسار متداخل:
+
+- تنتقل الأخطاء إلى حدود الخطأ الأصلية الأقرب. هذا يعني أن ملف `error.js` سيتعامل مع الأخطاء لجميع مقاطع الأطفال المتداخلة الخاصة به. يمكن تحقيق واجهة مستخدم للأخطاء أكثر أو أقل دقة عن طريق وضع ملفات `error.js` في مستويات مختلفة في المجلدات المتداخلة للمسار.
+- لن تتعامل حدود `error.js` مع الأخطاء التي يتم طرحها في مكون `layout.js` في **نفس** المقطع لأن حدود الخطأ متداخلة **داخل** مكون التخطيطات هذا.
+
+### التعامل مع الأخطاء في التخطيطات
+
+لا تلتقط حدود `error.js` الأخطاء التي يتم طرحها في مكونات `layout.js` أو `template.js` في **نفس المقطع**. يحافظ هذا [التسلسل الهرمي المقصود](#nested-routes) على واجهة المستخدم المهمة المشتركة بين المسارات الشقيقة (مثل التنقل) مرئية ووظيفية عند حدوث خطأ.
+
+للتعامل مع الأخطاء داخل تخطيط أو قالب معين، ضع ملف `error.js` في المقطع الأصلي للتخطيطات.
+
+للتعامل مع الأخطاء داخل تخطيط أو قالب الجذر، استخدم نوعًا مختلفًا من `error.js` يسمى `global-error.js`.
+
+### التعامل مع الأخطاء في تخطيطات الجذر
+
+لا تلتقط حدود `app/error.js` الأصلية الأخطاء التي يتم طرحها في مكون `app/layout.js` أو `app/template.js` الأصلي.
+
+للتعامل مع الأخطاء في هذه المكونات الجذرية على وجه التحديد، استخدم نوعًا مختلفًا من `error.js` يسمى `app/global-error.js` الموجود في الدليل الجذري `app`.
+
+على عكس `error.js` الجذري، تغلف حدود خطأ `global-error.js` **كامل** التطبيق، ويستبدل مكونها الاحتياطي تخطيط الجذر عند التنشيط. لهذا السبب، من المهم ملاحظة أن `global-error.js` **يجب** أن يحدد علامات `<html>` و `<body>` الخاصة به.
+
+يعتبر `global-error.js` أقل واجهة مستخدم للأخطاء دقة ويمكن اعتباره معالجة "شاملة" للأخطاء للتطبيق بأكمله. من غير المحتمل أن يتم تشغيله كثيرًا لأن المكونات الجذرية عادةً ما تكون أقل ديناميكية، وستلتقط حدود `error.js` الأخرى معظم الأخطاء.
+
+حتى إذا تم تعريف `global-error.js`، لا يزال يوصى بتعريف `error.js` جذري سيتم عرض مكونه الاحتياطي **داخل** تخطيط الجذر، والذي يتضمن واجهة مستخدم وعلامة تجارية مشتركة عالميًا.
+
+```tsx filename="app/global-error.tsx" switcher
+'use client'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/global-error.js" switcher
+'use client'
+
+export default function GlobalError({ error, reset }) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+### التعامل مع أخطاء الخادم
+
+إذا تم طرح خطأ داخل مكون خادم، سيقوم Next.js بإعادة توجيه كائن `Error` (مع إزالة معلومات الخطأ الحساسة في الإنتاج) إلى أقرب ملف `error.js` كخاصية `error`.
+
+#### تأمين معلومات الخطأ الحساسة
+
+أثناء الإنتاج، يتضمن كائن `Error` الذي يتم إعادة توجيهه إلى العميل فقط خاصية `message` عامة وخاصية `digest`.
+
+هذا إجراء أمان لتجنب تسريب تفاصيل حساسة محتملة متضمنة في الخطأ إلى العميل.
+
+تحتوي خاصية `message` على رسالة عامة حول الخطأ وتحتوي خاصية `digest` على تجزئة تم إنشاؤها تلقائيًا للخطأ يمكن استخدامها لمطابقة الخطأ المقابل في سجلات الخادم.
+
+أثناء التطوير، يتم تسلسل كائن `Error` الذي يتم إعادة توجيهه إلى العميل ويتضمن `message` الخطأ الأصلي لسهولة التصحيح.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/08-parallel-routes.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/08-parallel-routes.mdx
new file mode 100644
index 00000000..aaae1a9c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/08-parallel-routes.mdx
@@ -0,0 +1,328 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:11:25.017Z
+title: المسارات المتوازية (Parallel Routes)
+description: عرض صفحة واحدة أو أكثر في نفس العرض بشكل متزامن مع إمكانية التنقل بينها بشكل مستقل. نمط لتطبيقات الويب الديناميكية للغاية.
+---
+
+تتيح لك المسارات المتوازية (Parallel Routing) عرض صفحة واحدة أو أكثر في نفس التخطيط بشكل متزامن أو مشروط. للأجزاء الديناميكية للغاية في التطبيق، مثل لوحات التحكم والتغذيات في المواقع الاجتماعية، يمكن استخدام المسارات المتوازية لتنفيذ أنماط توجيه معقدة.
+
+على سبيل المثال، يمكنك عرض صفحة الفريق وصفحة التحليلات في نفس الوقت.
+
+<Image
+  alt="مخطط المسارات المتوازية"
+  srcLight="/docs/light/parallel-routes.png"
+  srcDark="/docs/dark/parallel-routes.png"
+  width="1600"
+  height="952"
+/>
+
+تسمح المسارات المتوازية بتعريف حالات خطأ وتحميل مستقلة لكل مسار حيث يتم بثها بشكل مستقل.
+
+<Image
+  alt="تمكن المسارات المتوازية حالات خطأ وتحميل مخصصة"
+  srcLight="/docs/light/parallel-routes-cinematic-universe.png"
+  srcDark="/docs/dark/parallel-routes-cinematic-universe.png"
+  width="1600"
+  height="1218"
+/>
+
+تتيح المسارات المتوازية أيضًا عرض فتحة (slot) بشكل مشروط بناءً على شروط معينة، مثل حالة المصادقة. هذا يمكّن من فصل التعليمات البرمجية بالكامل على نفس الرابط.
+
+<Image
+  alt="مخطط المسارات المشروطة"
+  srcLight="/docs/light/conditional-routes-ui.png"
+  srcDark="/docs/dark/conditional-routes-ui.png"
+  width="1600"
+  height="898"
+/>
+
+## الاصطلاح
+
+يتم إنشاء المسارات المتوازية باستخدام **فتحات** (slots) مسماة. يتم تعريف الفتحات باستخدام اصطلاح `@folder`، ويتم تمريرها إلى التخطيط بنفس المستوى كخصائص (props).
+
+> الفتحات ليست أجزاء من المسار (route segments) ولا تؤثر على بنية الرابط. مسار الملف `/@team/members` سيكون متاحًا على `/members`.
+
+على سبيل المثال، بنية الملف التالية تعرّف فتحتين صريحتين: `@analytics` و `@team`.
+
+<Image
+  alt="بنية نظام الملفات للمسارات المتوازية"
+  srcLight="/docs/light/parallel-routes-file-system.png"
+  srcDark="/docs/dark/parallel-routes-file-system.png"
+  width="1600"
+  height="687"
+/>
+
+هيكل المجلد أعلاه يعني أن المكون في `app/layout.js` يقبل الآن خصائص الفتحات `@analytics` و `@team`، ويمكن عرضها بالتوازي مع خاصية `children`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function Layout(props: {
+  children: React.ReactNode
+  analytics: React.ReactNode
+  team: React.ReactNode
+}) {
+  return (
+    <>
+      {props.children}
+      {props.team}
+      {props.analytics}
+    </>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function Layout(props) {
+  return (
+    <>
+      {props.children}
+      {props.team}
+      {props.analytics}
+    </>
+  )
+}
+```
+
+> **جيد للمعرفة**: خاصية `children` هي فتحة ضمنية لا تحتاج إلى تعيين لمجلد. هذا يعني أن `app/page.js` تعادل `app/@children/page.js`.
+
+## المسارات غير المتطابقة
+
+بشكل افتراضي، المحتوى المعروض داخل فتحة سيتطابق مع الرابط الحالي.
+
+في حالة عدم تطابق فتحة، المحتوى الذي يعرضه Next.js يختلف بناءً على تقنية التوجيه وبنية المجلد.
+
+### `default.js`
+
+يمكنك تعريف ملف `default.js` ليتم عرضه كحل بديل عندما لا يتمكن Next.js من استعادة الحالة النشطة للفتحة بناءً على الرابط الحالي.
+
+خذ بعين الاعتبار بنية المجلد التالية. فتحة `@team` لديها مجلد `settings`، لكن `@analytics` لا تملكه.
+
+<Image
+  alt="المسارات المتوازية غير المتطابقة"
+  srcLight="/docs/light/parallel-routes-unmatched-routes.png"
+  srcDark="/docs/dark/parallel-routes-unmatched-routes.png"
+  width="1600"
+  height="930"
+/>
+
+#### التنقل
+
+عند التنقل، سيعرض Next.js الحالة النشطة السابقة للفتحة، حتى لو لم تتطابق مع الرابط الحالي.
+
+#### إعادة التحميل
+
+عند إعادة التحميل، سيحاول Next.js أولاً عرض ملف `default.js` للفتحة غير المتطابقة. إذا لم يكن متاحًا، سيتم عرض خطأ 404.
+
+> خطأ 404 للمسارات غير المتطابقة يساعد على ضمان عدم عرض مسار لا ينبغي عرضه بالتوازي.
+
+## `useSelectedLayoutSegment(s)`
+
+كل من [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment) و [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) يقبلان `parallelRoutesKey`، مما يسمح لك بقراءة جزء المسار النشط داخل تلك الفتحة.
+
+```tsx filename="app/layout.tsx" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default async function Layout(props: {
+  //...
+  auth: React.ReactNode
+}) {
+  const loginSegments = useSelectedLayoutSegment('auth')
+  // ...
+}
+```
+
+```jsx filename="app/layout.js" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default async function Layout(props) {
+  const loginSegments = useSelectedLayoutSegment('auth')
+  // ...
+}
+```
+
+عندما ينتقل المستخدم إلى `@auth/login`، أو `/login` في شريط العناوين، `loginSegments` ستكون مساوية للسلسلة `"login"`.
+
+## أمثلة
+
+### النوافذ المنبثقة (Modals)
+
+يمكن استخدام المسارات المتوازية لعرض النوافذ المنبثقة.
+
+<Image
+  alt="مخطط المسارات المتوازية"
+  srcLight="/docs/light/parallel-routes-auth-modal.png"
+  srcDark="/docs/dark/parallel-routes-auth-modal.png"
+  width="1600"
+  height="687"
+/>
+
+فتحة `@auth` تعرض مكون `<Modal>` يمكن إظهاره بالانتقال إلى مسار مطابق، مثل `/login`.
+
+```tsx filename="app/layout.tsx" switcher
+export default async function Layout(props: {
+  // ...
+  auth: React.ReactNode
+}) {
+  return (
+    <>
+      {/* ... */}
+      {props.auth}
+    </>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default async function Layout(props) {
+  return (
+    <>
+      {/* ... */}
+      {props.auth}
+    </>
+  )
+}
+```
+
+```tsx filename="app/@auth/login/page.tsx" switcher
+import { Modal } from 'components/modal'
+
+export default function Login() {
+  return (
+    <Modal>
+      <h1>تسجيل الدخول</h1>
+      {/* ... */}
+    </Modal>
+  )
+}
+```
+
+```jsx filename="app/@auth/login/page.js" switcher
+import { Modal } from 'components/modal'
+
+export default function Login() {
+  return (
+    <Modal>
+      <h1>تسجيل الدخول</h1>
+      {/* ... */}
+    </Modal>
+  )
+}
+```
+
+لضمان عدم عرض محتويات النافذة المنبثقة عندما لا تكون نشطة، يمكنك إنشاء ملف `default.js` يعيد `null`.
+
+```tsx filename="app/@auth/default.tsx" switcher
+export default function Default() {
+  return null
+}
+```
+
+```jsx filename="app/@auth/default.js" switcher
+export default function Default() {
+  return null
+}
+```
+
+#### إغلاق نافذة منبثقة
+
+إذا تم بدء النافذة المنبثقة من خلال التنقل من العميل، مثل استخدام `<Link href="/login">`، يمكنك إغلاق النافذة المنبثقة عن طريق استدعاء `router.back()` أو باستخدام مكون `Link`.
+
+```tsx filename="app/@auth/login/page.tsx" highlight="5" switcher
+'use client'
+import { useRouter } from 'next/navigation'
+import { Modal } from 'components/modal'
+
+export default async function Login() {
+  const router = useRouter()
+  return (
+    <Modal>
+      <span onClick={() => router.back()}>إغلاق النافذة</span>
+      <h1>تسجيل الدخول</h1>
+      ...
+    </Modal>
+  )
+}
+```
+
+```jsx filename="app/@auth/login/page.js" highlight="5" switcher
+'use client'
+import { useRouter } from 'next/navigation'
+import { Modal } from 'components/modal'
+
+export default async function Login() {
+  const router = useRouter()
+  return (
+    <Modal>
+      <span onClick={() => router.back()}>إغلاق النافذة</span>
+      <h1>تسجيل الدخول</h1>
+      ...
+    </Modal>
+  )
+}
+```
+
+> المزيد من المعلومات حول النوافذ المنبثقة موجودة في قسم [المسارات الاعتراضية (Intercepting Routes)](/docs/app/building-your-application/routing/intercepting-routes).
+
+إذا كنت تريد الانتقال إلى مكان آخر وإغلاق نافذة منبثقة، يمكنك أيضًا استخدام مسار شامل (catch-all route).
+
+<Image
+  alt="مخطط المسارات المتوازية"
+  srcLight="/docs/light/parallel-routes-catchall.png"
+  srcDark="/docs/dark/parallel-routes-catchall.png"
+  width="1600"
+  height="768"
+/>
+
+```tsx filename="app/@auth/[...catchAll]/page.tsx" switcher
+export default function CatchAll() {
+  return null
+}
+```
+
+```jsx filename="app/@auth/[...catchAll]/page.js" switcher
+export default function CatchAll() {
+  return null
+}
+```
+
+> المسارات الشاملة لها أولوية على `default.js`.
+
+### المسارات المشروطة
+
+يمكن استخدام المسارات المتوازية لتنفيذ توجيه مشروط. على سبيل المثال، يمكنك عرض مسار `@dashboard` أو `@login` اعتمادًا على حالة المصادقة.
+
+```tsx filename="app/layout.tsx" switcher
+import { getUser } from '@/lib/auth'
+
+export default function Layout({
+  dashboard,
+  login,
+}: {
+  dashboard: React.ReactNode
+  login: React.ReactNode
+}) {
+  const isLoggedIn = getUser()
+  return isLoggedIn ? dashboard : login
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { getUser } from '@/lib/auth'
+
+export default function Layout({ dashboard, login }) {
+  const isLoggedIn = getUser()
+  return isLoggedIn ? dashboard : login
+}
+```
+
+<Image
+  alt="مثال على المسارات المشروطة للمصادقة"
+  srcLight="/docs/light/conditional-routes-ui.png"
+  srcDark="/docs/dark/conditional-routes-ui.png"
+  width="1600"
+  height="898"
+/>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx
new file mode 100644
index 00000000..28589336
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx
@@ -0,0 +1,83 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:10:07.862Z
+title: مسارات الاعتراض (Intercepting Routes)
+description: استخدم مسارات الاعتراض لتحميل مسار جديد داخل التخطيط الحالي مع إخفاء عنوان المتصفح، مفيد لأنماط التوجيه المتقدمة مثل النوافذ المنبثقة.
+related:
+  title: الخطوات التالية
+  description: تعلم كيفية استخدام النوافذ المنبثقة مع المسارات المعترضة والموازية.
+  links:
+    - app/building-your-application/routing/parallel-routes
+---
+
+تسمح لك مسارات الاعتراض بتحميل مسار من جزء آخر من تطبيقك داخل التخطيط الحالي. يمكن أن يكون هذا النموذج من التوجيه مفيدًا عندما تريد عرض محتوى مسار دون انتقال المستخدم إلى سياق مختلف.
+
+على سبيل المثال، عند النقر على صورة في خلاصة، يمكنك عرض الصورة في نافذة منبثقة، تطفو فوق الخلاصة. في هذه الحالة، يقوم Next.js باعتراض مسار `/photo/123`، وإخفاء العنوان، وعرضه فوق `/feed`.
+
+<Image
+  alt="التنقل اللطيف لمسارات الاعتراض"
+  srcLight="/docs/light/intercepting-routes-soft-navigate.png"
+  srcDark="/docs/dark/intercepting-routes-soft-navigate.png"
+  width="1600"
+  height="617"
+/>
+
+ومع ذلك، عند الانتقال إلى الصورة عن طريق النقر على رابط قابل للمشاركة أو عن طريق تحديث الصفحة، يجب أن يتم عرض صفحة الصورة كاملة بدلاً من النافذة المنبثقة. ولا يجب أن يحدث أي اعتراض للمسار.
+
+<Image
+  alt="التنقل الصعب لمسارات الاعتراض"
+  srcLight="/docs/light/intercepting-routes-hard-navigate.png"
+  srcDark="/docs/dark/intercepting-routes-hard-navigate.png"
+  width="1600"
+  height="604"
+/>
+
+## الاصطلاح
+
+يمكن تعريف مسارات الاعتراض باستخدام اصطلاح `(..)`، والذي يشبه اصطلاح المسار النسبي `../` ولكن للأجزاء.
+
+يمكنك استخدام:
+
+- `(.)` لمطابقة الأجزاء على **نفس المستوى**
+- `(..)` لمطابقة الأجزاء **مستوى واحد أعلى**
+- `(..)(..)` لمطابقة الأجزاء **مستويين أعلى**
+- `(...)` لمطابقة الأجزاء من **الجذر** `app`
+
+على سبيل المثال، يمكنك اعتراض جزء `photo` من داخل جزء `feed` عن طريق إنشاء دليل `(..)photo`.
+
+<Image
+  alt="هيكل مجلدات مسارات الاعتراض"
+  srcLight="/docs/light/intercepted-routes-files.png"
+  srcDark="/docs/dark/intercepted-routes-files.png"
+  width="1600"
+  height="604"
+/>
+
+> لاحظ أن اصطلاح `(..)` يعتمد على _أجزاء المسار_، وليس نظام الملفات.
+
+## أمثلة
+
+### النوافذ المنبثقة
+
+يمكن استخدام مسارات الاعتراض مع [المسارات الموازية](/docs/app/building-your-application/routing/parallel-routes) لإنشاء نوافذ منبثقة.
+
+يوفر استخدام هذا النمط لإنشاء نوافذ منبثقة حلولًا لبعض التحديات الشائعة عند العمل مع النوافذ المنبثقة، من خلال السماح لك بما يلي:
+
+- جعل محتوى النافذة المنبثقة **قابلاً للمشاركة عبر عنوان URL**
+- **الحفاظ على السياق** عند تحديث الصفحة، بدلاً من إغلاق النافذة المنبثقة
+- **إغلاق النافذة المنبثقة عند التنقل للخلف** بدلاً من الانتقال إلى المسار السابق
+- **إعادة فتح النافذة المنبثقة عند التنقل للأمام**
+
+<Image
+  alt="مثال نافذة منبثقة بمسارات الاعتراض"
+  srcLight="/docs/light/intercepted-routes-modal-example.png"
+  srcDark="/docs/dark/intercepted-routes-modal-example.png"
+  width="1600"
+  height="976"
+/>
+
+> في المثال أعلاه، يمكن لمسار جزء `photo` استخدام المطابق `(..)` لأن `@modal` هو _فتحة_ وليس _جزءًا_. هذا يعني أن مسار `photo` أعلى بمستوى _جزء_ واحد فقط، على الرغم من أنه أعلى بمستويين في نظام الملفات.
+
+يمكن أن تتضمن أمثلة أخرى فتح نافذة منبثقة لتسجيل الدخول في شريط التنقل العلوي مع وجود صفحة مخصصة `/login`، أو فتح عربة تسوق في نافذة منبثقة جانبية.
+
+[عرض مثال](https://github.com/vercel-labs/nextgram) للنوافذ المنبثقة مع المسارات المعترضة والموازية.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/10-route-handlers.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/10-route-handlers.mdx
new file mode 100644
index 00000000..8b3e9421
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/10-route-handlers.mdx
@@ -0,0 +1,693 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:46.561Z
+title: معالجات المسارات (Route Handlers)
+description: إنشاء معالجات طلبات مخصصة لمسار معين باستخدام واجهات طلب (Request) واستجابة (Response) الويب.
+related:
+  title: مرجع API
+  description: تعلم المزيد حول ملف route.js.
+  links:
+    - app/api-reference/file-conventions/route
+---
+
+تسمح لك معالجات المسارات (Route Handlers) بإنشاء معالجات طلبات مخصصة لمسار معين باستخدام واجهات [طلب (Request)](https://developer.mozilla.org/docs/Web/API/Request) و[استجابة (Response)](https://developer.mozilla.org/docs/Web/API/Response) للويب.
+
+<Image
+  alt="ملف Route.js الخاص"
+  srcLight="/docs/light/route-special-file.png"
+  srcDark="/docs/dark/route-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+> **معلومة مفيدة**: معالجات المسارات متاحة فقط داخل دليل `app`. وهي تعادل [مسارات API](/docs/pages/building-your-application/routing/api-routes) داخل دليل `pages` مما يعني أنك **لا تحتاج** إلى استخدام مسارات API ومعالجات المسارات معًا.
+
+## الاصطلاح
+
+يتم تعريف معالجات المسارات في ملف [`route.js|ts`](/docs/app/api-reference/file-conventions/route) داخل دليل `app`:
+
+```ts filename="app/api/route.ts" switcher
+export async function GET(request: Request) {}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {}
+```
+
+يمكن تداخل معالجات المسارات داخل دليل `app`، بشكل مشابه لـ `page.js` و `layout.js`. ولكن **لا يمكن** وجود ملف `route.js` في نفس مستوى مقطع المسار مثل `page.js`.
+
+### طرق HTTP المدعومة
+
+طرق [HTTP](https://developer.mozilla.org/docs/Web/HTTP/Methods) التالية مدعومة: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, و `OPTIONS`. إذا تم استدعاء طريقة غير مدعومة، ستعيد Next.js استجابة `405 Method Not Allowed`.
+
+### واجهات `NextRequest` و `NextResponse` الممتدة
+
+بالإضافة إلى دعم واجهات [Request](https://developer.mozilla.org/docs/Web/API/Request) و [Response](https://developer.mozilla.org/docs/Web/API/Response) الأصلية، تمتد Next.js مع
+[`NextRequest`](/docs/app/api-reference/functions/next-request) و [`NextResponse`](/docs/app/api-reference/functions/next-response) لتوفير مساعدات ملائمة لحالات الاستخدام المتقدمة.
+
+## السلوك
+
+### التخزين المؤقت
+
+يتم تخزين معالجات المسارات مؤقتًا افتراضيًا عند استخدام طريقة `GET` مع كائن `Response`.
+
+```ts filename="app/items/route.ts" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+  })
+  const data = await res.json()
+
+  return Response.json({ data })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+  })
+  const data = await res.json()
+
+  return Response.json({ data })
+}
+```
+
+> **تحذير TypeScript**: `Response.json()` صالحة فقط من TypeScript 5.2. إذا كنت تستخدم إصدارًا أقدم من TypeScript، يمكنك استخدام [`NextResponse.json()`](/docs/app/api-reference/functions/next-response#json) للاستجابات المكتوبة بدلاً من ذلك.
+
+### إلغاء التخزين المؤقت
+
+يمكنك إلغاء التخزين المؤقت عن طريق:
+
+- استخدام كائن `Request` مع طريقة `GET`.
+- استخدام أي من طرق HTTP الأخرى.
+- استخدام [الدوال الديناميكية](#dynamic-functions) مثل `cookies` و `headers`.
+- تحديد الوضع الديناميكي يدويًا باستخدام [خيارات تكوين المقطع](#segment-config-options).
+
+مثال:
+
+```ts filename="app/products/api/route.ts" switcher
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const id = searchParams.get('id')
+  const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+  })
+  const product = await res.json()
+
+  return Response.json({ product })
+}
+```
+
+```js filename="app/products/api/route.js" switcher
+export async function GET(request) {
+  const { searchParams } = new URL(request.url)
+  const id = searchParams.get('id')
+  const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+  })
+  const product = await res.json()
+
+  return Response.json({ product })
+}
+```
+
+بالمثل، ستؤدي طريقة `POST` إلى تقييم معالج المسار بشكل ديناميكي.
+
+```ts filename="app/items/route.ts" switcher
+export async function POST() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+    body: JSON.stringify({ time: new Date().toISOString() }),
+  })
+
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+    body: JSON.stringify({ time: new Date().toISOString() }),
+  })
+
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+> **معلومة مفيدة**: مثل مسارات API، يمكن استخدام معالجات المسارات لحالات مثل معالجة إرسال النماذج. يتم العمل على تجريد جديد لـ [معالجة النماذج والتحولات](/docs/app/building-your-application/data-fetching/forms-and-mutations) الذي يتكامل بعمق مع React.
+
+### تحليل المسار
+
+يمكنك اعتبار `route` كأدنى مستوى من البدائية للتوجيه.
+
+- **لا تشارك** في التخطيطات أو التنقلات من جانب العميل مثل `page`.
+- **لا يمكن** وجود ملف `route.js` في نفس المسار مثل `page.js`.
+
+| الصفحة                 | المسار              | النتيجة                       |
+| -------------------- | ------------------ | ---------------------------- |
+| `app/page.js`        | `app/route.js`     | <Cross size={18} /> تعارض |
+| `app/page.js`        | `app/api/route.js` | <Check size={18} /> صالح    |
+| `app/[user]/page.js` | `app/api/route.js` | <Check size={18} /> صالح    |
+
+كل ملف `route.js` أو `page.js` يأخذ كل أفعال HTTP لذلك المسار.
+
+```jsx filename="app/page.js"
+export default function Page() {
+  return <h1>مرحبًا، Next.js!</h1>
+}
+
+// ❌ تعارض
+// `app/route.js`
+export async function POST(request) {}
+```
+
+## أمثلة
+
+توضح الأمثلة التالية كيفية دمج معالجات المسارات مع واجهات وميزات Next.js الأخرى.
+
+### إعادة التحقق من البيانات المخزنة مؤقتًا
+
+يمكنك [إعادة التحقق من البيانات المخزنة مؤقتًا](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) باستخدام خيار [`next.revalidate`](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data):
+
+```ts filename="app/items/route.ts" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    next: { revalidate: 60 }, // إعادة التحقق كل 60 ثانية
+  })
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    next: { revalidate: 60 }, // إعادة التحقق كل 60 ثانية
+  })
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام [خيار تكوين المقطع `revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate):
+
+```ts
+export const revalidate = 60
+```
+
+### الدوال الديناميكية
+
+يمكن استخدام معالجات المسارات مع الدوال الديناميكية من Next.js، مثل [`cookies`](/docs/app/api-reference/functions/cookies) و [`headers`](/docs/app/api-reference/functions/headers).
+
+#### الكوكيز
+
+يمكنك قراءة الكوكيز باستخدام [`cookies`](/docs/app/api-reference/functions/cookies) من `next/headers`. يمكن استدعاء هذه الدالة الخادمية مباشرة في معالج المسار، أو تداخلها داخل دالة أخرى.
+
+نسخة `cookies` هذه للقراءة فقط. لتعيين الكوكيز، تحتاج إلى إعادة `Response` جديدة باستخدام رأس [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie).
+
+```ts filename="app/api/route.ts" switcher
+import { cookies } from 'next/headers'
+
+export async function GET(request: Request) {
+  const cookieStore = cookies()
+  const token = cookieStore.get('token')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { 'Set-Cookie': `token=${token.value}` },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { cookies } from 'next/headers'
+
+export async function GET(request) {
+  const cookieStore = cookies()
+  const token = cookieStore.get('token')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { 'Set-Cookie': `token=${token}` },
+  })
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام تجريدات فوق واجهات الويب الأساسية لقراءة الكوكيز ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
+
+```ts filename="app/api/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const token = request.cookies.get('token')
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  const token = request.cookies.get('token')
+}
+```
+
+#### الرؤوس
+
+يمكنك قراءة الرؤوس باستخدام [`headers`](/docs/app/api-reference/functions/headers) من `next/headers`. يمكن استدعاء هذه الدالة الخادمية مباشرة في معالج المسار، أو تداخلها داخل دالة أخرى.
+
+نسخة `headers` هذه للقراءة فقط. لتعيين الرؤوس، تحتاج إلى إعادة `Response` جديدة برؤوس جديدة.
+
+```ts filename="app/api/route.ts" switcher
+import { headers } from 'next/headers'
+
+export async function GET(request: Request) {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { referer: referer },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { headers } from 'next/headers'
+
+export async function GET(request) {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { referer: referer },
+  })
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام تجريدات فوق واجهات الويب الأساسية لقراءة الرؤوس ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
+
+```ts filename="app/api/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const requestHeaders = new Headers(request.headers)
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  const requestHeaders = new Headers(request.headers)
+}
+```
+
+### إعادة التوجيه
+
+```ts filename="app/api/route.ts" switcher
+import { redirect } from 'next/navigation'
+
+export async function GET(request: Request) {
+  redirect('https://nextjs.org/')
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { redirect } from 'next/navigation'
+
+export async function GET(request) {
+  redirect('https://nextjs.org/')
+}
+```
+
+### مقاطع المسار الديناميكية
+
+> نوصي بقراءة صفحة [تحديد المسارات](/docs/app/building-your-application/routing/defining-routes) قبل المتابعة.
+
+يمكن لمعالجات المسارات استخدام [المقاطع الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) لإنشاء معالجات طلبات من البيانات الديناميكية.
+
+```ts filename="app/items/[slug]/route.ts" switcher
+export async function GET(
+  request: Request,
+  { params }: { params: { slug: string } }
+) {
+  const slug = params.slug // 'a', 'b', أو 'c'
+}
+```
+
+```js filename="app/items/[slug]/route.js" switcher
+export async function GET(request, { params }) {
+  const slug = params.slug // 'a', 'b', أو 'c'
+}
+```
+
+| المسار                       | مثال URL | `params`        |
+| --------------------------- | ----------- | --------------- |
+| `app/items/[slug]/route.js` | `/items/a`  | `{ slug: 'a' }` |
+| `app/items/[slug]/route.js` | `/items/b`  | `{ slug: 'b' }` |
+| `app/items/[slug]/route.js` | `/items/c`  | `{ slug: 'c' }` |
+
+### معلمات استعلام URL
+
+كائن الطلب الممرر إلى معالج المسار هو نسخة من `NextRequest`، والتي تحتوي على [بعض الطرق الملائمة الإضافية](/docs/app/api-reference/functions/next-request#nexturl)، بما في ذلك التعامل بسهولة أكبر مع معلمات الاستعلام.
+
+```ts filename="app/api/search/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query هي "hello" لـ /api/search?query=hello
+}
+```
+
+```js filename="app/api/search/route.js" switcher
+export function GET(request) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query هي "hello" لـ /api/search?query=hello
+}
+```
+
+### البث (Streaming)
+
+يُستخدم البث عادةً جنبًا إلى جنب مع نماذج اللغة الكبيرة (LLMs) مثل OpenAI للمحتوى المُنشأ بواسطة الذكاء الاصطناعي. تعرّف على المزيد حول [حزمة تطوير الذكاء الاصطناعي (AI SDK)](https://sdk.vercel.ai/docs).
+
+```ts filename="app/api/chat/route.ts" switcher
+import { Configuration, OpenAIApi } from 'openai-edge'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+
+export const runtime = 'edge'
+
+const apiConfig = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY!,
+})
+
+const openai = new OpenAIApi(apiConfig)
+
+export async function POST(req: Request) {
+  // استخراج الرسائل (messages) من جسم الطلب
+  const { messages } = await req.json()
+
+  // طلب استجابة من واجهة برمجة تطبيقات OpenAI بناءً على المطالبة
+  const response = await openai.createChatCompletion({
+    model: 'gpt-3.5-turbo',
+    stream: true,
+    messages: messages,
+    max_tokens: 500,
+    temperature: 0.7,
+    top_p: 1,
+    frequency_penalty: 1,
+    presence_penalty: 1,
+  })
+
+  // تحويل الاستجابة إلى تدفق نصي سهل
+  const stream = OpenAIStream(response)
+
+  // الرد بالتدفق
+  return new StreamingTextResponse(stream)
+}
+```
+
+```js filename="app/api/chat/route.js" switcher
+import { Configuration, OpenAIApi } from 'openai-edge'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+
+export const runtime = 'edge'
+
+const apiConfig = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY,
+})
+
+const openai = new OpenAIApi(apiConfig)
+
+export async function POST(req) {
+  // استخراج الرسائل (messages) من جسم الطلب
+  const { messages } = await req.json()
+
+  // طلب استجابة من واجهة برمجة تطبيقات OpenAI بناءً على المطالبة
+  const response = await openai.createChatCompletion({
+    model: 'gpt-3.5-turbo',
+    stream: true,
+    messages: messages,
+    max_tokens: 500,
+    temperature: 0.7,
+    top_p: 1,
+    frequency_penalty: 1,
+    presence_penalty: 1,
+  })
+
+  // تحويل الاستجابة إلى تدفق نصي سهل
+  const stream = OpenAIStream(response)
+
+  // الرد بالتدفق
+  return new StreamingTextResponse(stream)
+}
+```
+
+تستخدم هذه التجريدات واجهات برمجة تطبيقات الويب لإنشاء تدفق. يمكنك أيضًا استخدام واجهات برمجة تطبيقات الويب الأساسية مباشرة.
+
+```ts filename="app/api/route.ts" switcher
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+function iteratorToStream(iterator: any) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next()
+
+      if (done) {
+        controller.close()
+      } else {
+        controller.enqueue(value)
+      }
+    },
+  })
+}
+
+function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const encoder = new TextEncoder()
+
+async function* makeIterator() {
+  yield encoder.encode('<p>One</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Two</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Three</p>')
+}
+
+export async function GET() {
+  const iterator = makeIterator()
+  const stream = iteratorToStream(iterator)
+
+  return new Response(stream)
+}
+```
+
+```js filename="app/api/route.js" switcher
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+function iteratorToStream(iterator) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next()
+
+      if (done) {
+        controller.close()
+      } else {
+        controller.enqueue(value)
+      }
+    },
+  })
+}
+
+function sleep(time) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const encoder = new TextEncoder()
+
+async function* makeIterator() {
+  yield encoder.encode('<p>One</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Two</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Three</p>')
+}
+
+export async function GET() {
+  const iterator = makeIterator()
+  const stream = iteratorToStream(iterator)
+
+  return new Response(stream)
+}
+```
+
+### جسم الطلب (Request Body)
+
+يمكنك قراءة جسم الطلب (`Request`) باستخدام طرق واجهة برمجة تطبيقات الويب القياسية:
+
+```ts filename="app/items/route.ts" switcher
+export async function POST(request: Request) {
+  const res = await request.json()
+  return Response.json({ res })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST(request) {
+  const res = await request.json()
+  return Response.json({ res })
+}
+```
+
+### بيانات النموذج (FormData) في الطلب
+
+يمكنك قراءة بيانات `FormData` باستخدام الدالة `request.formData()`:
+
+```ts filename="app/items/route.ts" switcher
+export async function POST(request: Request) {
+  const formData = await request.formData()
+  const name = formData.get('name')
+  const email = formData.get('email')
+  return Response.json({ name, email })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST(request) {
+  const formData = await request.formData()
+  const name = formData.get('name')
+  const email = formData.get('email')
+  return Response.json({ name, email })
+}
+```
+
+بما أن بيانات `formData` كلها نصوص، قد ترغب في استخدام [`zod-form-data`](https://www.npmjs.com/zod-form-data) للتحقق من صحة الطلب واسترجاع البيانات بالشكل الذي تفضله (مثل `number`).
+
+### CORS
+
+يمكنك تعيين رؤوس CORS على `Response` باستخدام طرق واجهة برمجة تطبيقات الويب القياسية:
+
+```ts filename="app/api/route.ts" switcher
+export async function GET(request: Request) {
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  })
+}
+```
+
+### بيئات التشغيل Edge و Node.js
+
+تمتلك معالجات المسارات (Route Handlers) واجهة برمجة تطبيقات ويب متساوية الشكل (isomorphic) لدعم بيئتي تشغيل Edge و Node.js بسلاسة، بما في ذلك دعم البث. نظرًا لأن معالجات المسارات تستخدم نفس [تهيئة قطاع المسار](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات، فإنها تدعم ميزات طال انتظارها مثل معالجات المسارات ذات [إعادة توليد ثابت](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) للأغراض العامة.
+
+يمكنك استخدام خيار تهيئة القطاع `runtime` لتحديد بيئة التشغيل:
+
+```ts
+export const runtime = 'edge' // الافتراضي هو 'nodejs'
+```
+
+### ردود غير واجهة المستخدم
+
+يمكنك استخدام معالجات المسارات لإرجاع محتوى غير واجهة مستخدم. لاحظ أن [`sitemap.xml`](/docs/app/api-reference/file-conventions/metadata/sitemap#generate-a-sitemap)، و[`robots.txt`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file)، و[أيقونات التطبيق](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx)، و[صور Open Graph](/docs/app/api-reference/file-conventions/metadata/opengraph-image) جميعها مدعومة مدمجة.
+
+```ts filename="app/rss.xml/route.ts" switcher
+export async function GET() {
+  return new Response(`<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+  <title>Next.js Documentation</title>
+  <link>https://nextjs.org/docs</link>
+  <description>The React Framework for the Web</description>
+</channel>
+
+</rss>`)
+}
+```
+
+```js filename="app/rss.xml/route.js" switcher
+export async function GET() {
+  return new Response(`<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+  <title>Next.js Documentation</title>
+  <link>https://nextjs.org/docs</link>
+  <description>The React Framework for the Web</description>
+</channel>
+
+</rss>`)
+}
+```
+
+### خيارات تهيئة القطاع (Segment Config)
+
+تستخدم معالجات المسارات نفس [تهيئة قطاع المسار](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات.
+
+```ts filename="app/items/route.ts" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+```
+
+```js filename="app/items/route.js" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+```
+
+راجع [مرجع واجهة برمجة التطبيقات](/docs/app/api-reference/file-conventions/route-segment-config) لمزيد من التفاصيل.
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/11-middleware.mdx
new file mode 100644
index 00000000..aa0b797e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/11-middleware.mdx
@@ -0,0 +1,401 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:10:49.177Z
+title: Middleware
+description: تعلم كيفية استخدام Middleware لتشغيل كود قبل اكتمال الطلب.
+---
+
+{/* المحتوى مشترك بين تطبيق التوجيه الصفحات والتطبيق. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بتوجيه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+يسمح لك Middleware بتشغيل كود قبل اكتمال الطلب. ثم بناءً على الطلب الوارد، يمكنك تعديل الاستجابة عن طريق إعادة الكتابة، إعادة التوجيه، تعديل رؤوس الطلب أو الاستجابة، أو الرد مباشرة.
+
+يعمل Middleware قبل مطابقة المحتوى المخزن مؤقتًا والمسارات. راجع [تطابق المسارات](#matching-paths) لمزيد من التفاصيل.
+
+## الاتفاقية
+
+استخدم ملف `middleware.ts` (أو `.js`) في جذر مشروعك لتحديد Middleware. على سبيل المثال، في نفس مستوى `pages` أو `app`، أو داخل `src` إذا كان ذلك ينطبق.
+
+## مثال
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+// يمكن وضع علامة `async` على هذه الدالة إذا كنت تستخدم `await` داخلها
+export function middleware(request: NextRequest) {
+  return NextResponse.redirect(new URL('/home', request.url))
+}
+
+// راجع "تطابق المسارات" أدناه لمعرفة المزيد
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+// يمكن وضع علامة `async` على هذه الدالة إذا كنت تستخدم `await` داخلها
+export function middleware(request) {
+  return NextResponse.redirect(new URL('/home', request.url))
+}
+
+// راجع "تطابق المسارات" أدناه لمعرفة المزيد
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+## تطابق المسارات
+
+سيتم استدعاء Middleware لكل مسار في مشروعك. الترتيب التنفيذي هو كما يلي:
+
+1. `headers` من `next.config.js`
+2. `redirects` من `next.config.js`
+3. Middleware (`rewrites`, `redirects`, إلخ.)
+4. `beforeFiles` (`rewrites`) من `next.config.js`
+5. مسارات نظام الملفات (`public/`, `_next/static/`, `pages/`, `app/`, إلخ.)
+6. `afterFiles` (`rewrites`) من `next.config.js`
+7. المسارات الديناميكية (`/blog/[slug]`)
+8. `fallback` (`rewrites`) من `next.config.js`
+
+هناك طريقتان لتحديد المسارات التي سيعمل عليها Middleware:
+
+1. [تهيئة matcher مخصصة](#matcher)
+2. [عبارات شرطية](#conditional-statements)
+
+### Matcher
+
+يسمح لك `matcher` بتصفية Middleware ليعمل على مسارات محددة.
+
+```js filename="middleware.js"
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+يمكنك مطابقة مسار واحد أو عدة مسارات باستخدام صيغة المصفوفة:
+
+```js filename="middleware.js"
+export const config = {
+  matcher: ['/about/:path*', '/dashboard/:path*'],
+}
+```
+
+تسمح تهيئة `matcher` باستخدام regex كامل، لذا فإن المطابقة مثل negative lookaheads أو مطابقة الأحرف مدعومة. مثال على negative lookahead لمطابقة كل المسارات باستثناء مسارات محددة يمكن رؤيته هنا:
+
+```js filename="middleware.js"
+export const config = {
+  matcher: [
+    /*
+     * مطابقة كل مسارات الطلب باستثناء تلك التي تبدأ بـ:
+     * - api (مسارات API)
+     * - _next/static (ملفات ثابتة)
+     * - _next/image (ملفات تحسين الصور)
+     * - favicon.ico (ملف favicon)
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico).*)',
+  ],
+}
+```
+
+> **معلومة جيدة**: يجب أن تكون قيم `matcher` ثوابت حتى يمكن تحليلها بشكل ثابت في وقت البناء. سيتم تجاهل القيم الديناميكية مثل المتغيرات.
+
+تهيئة matchers:
+
+1. يجب أن تبدأ بـ `/`
+2. يمكن أن تتضمن معلمات مسماة: `/about/:path` تطابق `/about/a` و `/about/b` ولكن ليس `/about/a/c`
+3. يمكن أن تحتوي على معدلات على المعلمات المسماة (تبدأ بـ `:`): `/about/:path*` تطابق `/about/a/b/c` لأن `*` تعني _صفر أو أكثر_. `?` تعني _صفر أو واحد_ و `+` تعني _واحد أو أكثر_
+4. يمكن استخدام تعبيرات عادية محاطة بأقواس: `/about/(.*)` نفس `/about/:path*`
+
+اقرأ المزيد من التفاصيل في [توثيق path-to-regexp](https://github.com/pillarjs/path-to-regexp#path-to-regexp-1).
+
+> **معلومة جيدة**: لأغراض التوافق مع الإصدارات السابقة، يعتبر Next.js دائمًا `/public` كـ `/public/index`. لذلك، فإن matcher لـ `/public/:path` سيطابق.
+
+### عبارات شرطية
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname.startsWith('/about')) {
+    return NextResponse.rewrite(new URL('/about-2', request.url))
+  }
+
+  if (request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
+  }
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  if (request.nextUrl.pathname.startsWith('/about')) {
+    return NextResponse.rewrite(new URL('/about-2', request.url))
+  }
+
+  if (request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
+  }
+}
+```
+
+## NextResponse
+
+يسمح لك واجهة برمجة التطبيقات `NextResponse` بما يلي:
+
+- `redirect` الطلب الوارد إلى عنوان URL مختلف
+- `rewrite` الاستجابة عن طريق عرض عنوان URL معين
+- تعيين رؤوس الطلب لمسارات API، `getServerSideProps`، وأوجه إعادة الكتابة
+- تعيين ملفات تعريف الارتباط للاستجابة
+- تعيين رؤوس الاستجابة
+
+<AppOnly>
+
+لإنتاج استجابة من Middleware، يمكنك:
+
+1. `rewrite` إلى مسار ([صفحة](/docs/app/building-your-application/routing/pages-and-layouts) أو [معالج المسار](/docs/app/building-your-application/routing/route-handlers)) ينتج استجابة
+2. إرجاع `NextResponse` مباشرة. راجع [إنتاج استجابة](#producing-a-response)
+
+</AppOnly>
+
+<PagesOnly>
+
+لإنتاج استجابة من Middleware، يمكنك:
+
+1. `rewrite` إلى مسار ([صفحة](/docs/pages/building-your-application/routing/pages-and-layouts) أو [مسار Edge API](/docs/pages/building-your-application/routing/api-routes)) ينتج استجابة
+2. إرجاع `NextResponse` مباشرة. راجع [إنتاج استجابة](#producing-a-response)
+
+</PagesOnly>
+
+## استخدام ملفات تعريف الارتباط
+
+ملفات تعريف الارتباط هي رؤوس عادية. في `Request`، يتم تخزينها في رأس `Cookie`. في `Response` تكون في رأس `Set-Cookie`. يوفر Next.js طريقة ملائمة للوصول إلى هذه الملفات وتعديلها من خلال امتداد `cookies` في `NextRequest` و `NextResponse`.
+
+1. للطلبات الواردة، يأتي `cookies` مع الطرق التالية: `get`، `getAll`، `set`، و `delete` ملفات تعريف الارتباط. يمكنك التحقق من وجود ملف تعريف ارتباط باستخدام `has` أو إزالة جميع الملفات باستخدام `clear`.
+2. للاستجابات الصادرة، تحتوي `cookies` على الطرق التالية `get`، `getAll`، `set`، و `delete`.
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // افترض وجود رأس "Cookie:nextjs=fast" في الطلب الوارد
+  // الحصول على ملفات تعريف الارتباط من الطلب باستخدام واجهة برمجة التطبيقات `RequestCookies`
+  let cookie = request.cookies.get('nextjs')
+  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
+  const allCookies = request.cookies.getAll()
+  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
+
+  request.cookies.has('nextjs') // => true
+  request.cookies.delete('nextjs')
+  request.cookies.has('nextjs') // => false
+
+  // تعيين ملفات تعريف الارتباط على الاستجابة باستخدام واجهة برمجة التطبيقات `ResponseCookies`
+  const response = NextResponse.next()
+  response.cookies.set('vercel', 'fast')
+  response.cookies.set({
+    name: 'vercel',
+    value: 'fast',
+    path: '/',
+  })
+  cookie = response.cookies.get('vercel')
+  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
+  // سيكون للاستجابة الصادرة رأس `Set-Cookie:vercel=fast;path=/test`.
+
+  return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  // افترض وجود رأس "Cookie:nextjs=fast" في الطلب الوارد
+  // الحصول على ملفات تعريف الارتباط من الطلب باستخدام واجهة برمجة التطبيقات `RequestCookies`
+  let cookie = request.cookies.get('nextjs')
+  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
+  const allCookies = request.cookies.getAll()
+  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
+
+  request.cookies.has('nextjs') // => true
+  request.cookies.delete('nextjs')
+  request.cookies.has('nextjs') // => false
+
+  // تعيين ملفات تعريف الارتباط على الاستجابة باستخدام واجهة برمجة التطبيقات `ResponseCookies`
+  const response = NextResponse.next()
+  response.cookies.set('vercel', 'fast')
+  response.cookies.set({
+    name: 'vercel',
+    value: 'fast',
+    path: '/',
+  })
+  cookie = response.cookies.get('vercel')
+  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
+  // سيكون للاستجابة الصادرة رأس `Set-Cookie:vercel=fast;path=/test`.
+
+  return response
+}
+```
+
+## تعيين الرؤوس
+
+يمكنك تعيين رؤوس الطلب والاستجابة باستخدام واجهة برمجة التطبيقات `NextResponse` (تعيين رؤوس الطلب متاح منذ Next.js v13.0.0).
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // استنساخ رؤوس الطلب وتعيين رأس جديد `x-hello-from-middleware1`
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-hello-from-middleware1', 'hello')
+
+  // يمكنك أيضًا تعيين رؤوس الطلب في NextResponse.rewrite
+  const response = NextResponse.next({
+    request: {
+      // رؤوس طلب جديدة
+      headers: requestHeaders,
+    },
+  })
+
+  // تعيين رأس استجابة جديد `x-hello-from-middleware2`
+  response.headers.set('x-hello-from-middleware2', 'hello')
+  return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  // استنساخ رؤوس الطلب وتعيين رأس جديد `x-hello-from-middleware1`
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-hello-from-middleware1', 'hello')
+
+  // يمكنك أيضًا تعيين رؤوس الطلب في NextResponse.rewrite
+  const response = NextResponse.next({
+    request: {
+      // رؤوس طلب جديدة
+      headers: requestHeaders,
+    },
+  })
+
+  // تعيين رأس استجابة جديد `x-hello-from-middleware2`
+  response.headers.set('x-hello-from-middleware2', 'hello')
+  return response
+}
+```
+
+> **معلومة جيدة**: تجنب تعيين رؤوس كبيرة لأنها قد تسبب خطأ [431 Request Header Fields Too Large](https://developer.mozilla.org/docs/Web/HTTP/Status/431) اعتمادًا على تهيئة خادم الويب الخلفي الخاص بك.
+
+## إنتاج استجابة
+
+يمكنك الرد من Middleware مباشرة عن طريق إرجاع نسخة من `Response` أو `NextResponse`. (هذا متاح منذ [Next.js v13.1.0](https://nextjs.org/blog/next-13-1#nextjs-advanced-middleware))
+
+```ts filename="middleware.ts" switcher
+import { NextRequest } from 'next/server'
+import { isAuthenticated } from '@lib/auth'
+
+// تحديد Middleware للمسارات التي تبدأ بـ `/api/`
+export const config = {
+  matcher: '/api/:function*',
+}
+
+export function middleware(request: NextRequest) {
+  // استدعاء دالة المصادقة للتحقق من الطلب
+  if (!isAuthenticated(request)) {
+    // الرد بـ JSON يشير إلى رسالة خطأ
+    return Response.json(
+      { success: false, message: 'فشل المصادقة' },
+      { status: 401 }
+    )
+  }
+}
+```
+
+```js filename="middleware.js" switcher
+import { isAuthenticated } from '@lib/auth'
+
+// تحديد Middleware للمسارات التي تبدأ بـ `/api/`
+export const config = {
+  matcher: '/api/:function*',
+}
+
+export function middleware(request) {
+  // استدعاء دالة المصادقة للتحقق من الطلب
+  if (!isAuthenticated(request)) {
+    // الرد بـ JSON يشير إلى رسالة خطأ
+    return Response.json(
+      { success: false, message: 'فشل المصادقة' },
+      { status: 401 }
+    )
+  }
+}
+```
+
+## أعلام Middleware المتقدمة
+
+في `v13.1` من Next.js، تم إدخال علمين إضافيين لـ middleware، `skipMiddlewareUrlNormalize` و `skipTrailingSlashRedirect` للتعامل مع حالات الاستخدام المتقدمة.
+
+يسمح `skipTrailingSlashRedirect` بتعطيل عمليات إعادة التوجيه الافتراضية لـ Next.js لإضافة أو إزالة الشرطة المائلة، مما يسمح بالتعامل المخصص داخل middleware والذي يمكن أن يسمح بالحفاظ على الشرطة المائلة لبعض المسارات وليس غيرها، مما يسهل عمليات الترحيل التدريجي.
+
+```js filename="next.config.js"
+module.exports = {
+  skipTrailingSlashRedirect: true,
+}
+```
+
+```js filename="middleware.js"
+const legacyPrefixes = ['/docs', '/blog']
+
+export default async function middleware(req) {
+  const { pathname } = req.nextUrl
+
+  if (legacyPrefixes.some((prefix) => pathname.startsWith(prefix))) {
+    return NextResponse.next()
+  }
+
+  // تطبيق معالجة الشرطة المائلة
+  if (
+    !pathname.endsWith('/') &&
+    !pathname.match(/((?!\.well-known(?:\/.*)?)(?:[^/]+\/)*[^/]+\.\w+)/)
+  ) {
+    req.nextUrl.pathname += '/'
+    return NextResponse.redirect(req.nextUrl)
+  }
+}
+```
+
+يسمح `skipMiddlewareUrlNormalize` بتعطيل تطبيع URL الذي يقوم به Next.js لجعل التعامل مع الزيارات المباشرة وانتقالات العميل متشابهة. هناك بعض الحالات المتقدمة التي تحتاج فيها إلى تحكم كامل باستخدام URL الأصلي الذي يفتحه هذا.
+
+```js filename="next.config.js"
+module.exports = {
+  skipMiddlewareUrlNormalize: true,
+}
+```
+
+```js filename="middleware.js"
+export default async function middleware(req) {
+  const { pathname } = req.nextUrl
+
+  // GET /_next/data/build-id/hello.json
+
+  console.log(pathname)
+  // مع العلم هذا الآن /_next/data/build-id/hello.json
+  // بدون العلم سيكون هذا طبيعيًا إلى /hello
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                       |
+| --------- | --------------------------------------------------------------------------------------------- |
+| `v13.1.0` | تمت إضافة أعلام Middleware المتقدمة                                                               |
+| `v13.0.0` | يمكن لـ Middleware تعديل رؤوس الطلب، رؤوس الاستجابة، وإرسال استجابات                   |
+| `v12.2.0` | Middleware مستقر، يرجى الاطلاع على [دليل الترقية](/docs/messages/middleware-upgrade-guide) |
+| `v12.0.9` | فرض عناوين URL المطلقة في Edge Runtime ([PR](https://github.com/vercel/next.js/pull/33410))    |
+| `v12.0.0` | تمت إضافة Middleware (Beta)                                                                       |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/12-colocation.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/12-colocation.mdx
new file mode 100644
index 00000000..af246170
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/12-colocation.mdx
@@ -0,0 +1,182 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:09:51.146Z
+title: تنظيم المشروع ووضع الملفات معًا
+nav_title: تنظيم المشروع
+description: تعلم كيفية تنظيم مشروع Next.js ووضع الملفات معًا.
+related:
+  links:
+    - app/building-your-application/routing/defining-routes
+    - app/building-your-application/routing/route-groups
+    - app/building-your-application/configuring/src-directory
+    - app/building-your-application/configuring/absolute-imports-and-module-aliases
+---
+
+بخلاف [اتفاقيات مجلدات وملفات التوجيه](/docs/getting-started/project-structure#app-routing-conventions)، فإن Next.js **غير متحيز** بشأن كيفية تنظيم ووضع ملفات مشروعك معًا.
+
+تشارك هذه الصفحة السلوك الافتراضي والميزات التي يمكنك استخدامها لتنظيم مشروعك.
+
+- [وضع الملفات معًا بشكل آمن افتراضيًا](#safe-colocation-by-default)
+- [ميزات تنظيم المشروع](#project-organization-features)
+- [استراتيجيات تنظيم المشروع](#project-organization-strategies)
+
+## وضع الملفات معًا بشكل آمن افتراضيًا
+
+في دليل `app`، تحدد [التسلسل الهرمي للمجلدات المتداخلة](/docs/app/building-your-application/routing#route-segments) بنية المسار.
+
+يمثل كل مجلد جزءًا من المسار يتم تعيينه إلى جزء مقابل في مسار URL.
+
+ومع ذلك، على الرغم من أن بنية المسار تُحدد من خلال المجلدات، فإن المسار **غير متاح للجمهور** حتى يتم إضافة ملف `page.js` أو `route.js` إلى جزء المسار.
+
+<Image
+  alt="مخطط يوضح كيف أن المسار غير متاح للجمهور حتى يتم إضافة ملف page.js أو route.js إلى جزء المسار."
+  srcLight="/docs/light/project-organization-not-routable.png"
+  srcDark="/docs/dark/project-organization-not-routable.png"
+  width="1600"
+  height="444"
+/>
+
+وحتى عندما يصبح المسار متاحًا للجمهور، يتم إرسال **المحتوى الذي يتم إرجاعه** فقط بواسطة `page.js` أو `route.js` إلى العميل.
+
+<Image
+  alt="مخطط يوضح كيف أن ملفات page.js و route.js تجعل المسارات متاحة للجمهور."
+  srcLight="/docs/light/project-organization-routable.png"
+  srcDark="/docs/dark/project-organization-routable.png"
+  width="1600"
+  height="687"
+/>
+
+هذا يعني أنه يمكن **وضع ملفات المشروع معًا بشكل آمن** داخل أجزاء المسار في دليل `app` دون أن تصبح قابلة للتوجيه بالخطأ.
+
+<Image
+  alt="مخطط يوضح أن ملفات المشروع الموضوعة معًا ليست قابلة للتوجيه حتى عندما يحتوي الجزء على ملف page.js أو route.js."
+  srcLight="/docs/light/project-organization-colocation.png"
+  srcDark="/docs/dark/project-organization-colocation.png"
+  width="1600"
+  height="1011"
+/>
+
+> **جيد أن تعرف**:
+>
+> - هذا يختلف عن دليل `pages`، حيث يعتبر أي ملف في `pages` مسارًا.
+> - بينما يمكنك وضع ملفات مشروعك معًا في `app`، ليس عليك ذلك. إذا كنت تفضل، يمكنك [إبقاؤها خارج دليل `app`](#store-project-files-outside-of-app).
+
+## ميزات تنظيم المشروع
+
+يوفر Next.js عدة ميزات لمساعدتك في تنظيم مشروعك.
+
+### المجلدات الخاصة
+
+يمكن إنشاء مجلدات خاصة عن طريق إضافة شرطة سفلية كبادئة لاسم المجلد: `_folderName`
+
+يشير هذا إلى أن المجلد هو تفاصيل تنفيذ خاصة ولا يجب أن تؤخذ في الاعتبار من قبل نظام التوجيه، مما يجعل المجلد وجميع مجلداته الفرعية **غير مشمولة في التوجيه**.
+
+<Image
+  alt="مثال على هيكل المجلدات باستخدام المجلدات الخاصة"
+  srcLight="/docs/light/project-organization-private-folders.png"
+  srcDark="/docs/dark/project-organization-private-folders.png"
+  width="1600"
+  height="849"
+/>
+
+بما أن الملفات في دليل `app` يمكن [وضعها معًا بشكل آمن افتراضيًا](#safe-colocation-by-default)، فإن المجلدات الخاصة ليست مطلوبة لوضع الملفات معًا. ومع ذلك، يمكن أن تكون مفيدة لـ:
+
+- فصل منطق واجهة المستخدم عن منطق التوجيه.
+- تنظيم الملفات الداخلية بشكل متسق عبر المشروع وبيئة Next.js.
+- فرز وتجميع الملفات في محررات الأكواد.
+- تجنب التعارضات المحتملة في الأسماء مع اتفاقيات ملفات Next.js المستقبلية.
+
+> **جيد أن تعرف**
+>
+> - على الرغم من أنها ليست اتفاقية إطار عمل، يمكنك أيضًا التفكير في تمييز الملفات خارج المجلدات الخاصة كـ "خاصة" باستخدام نفس نمط الشرطة السفلية.
+> - يمكنك إنشاء أجزاء URL تبدأ بشرطة سفلية عن طريق إضافة `%5F` (الشكل المشفر لـ URL للشرطة السفلية) كبادئة لاسم المجلد: `%5FfolderName`.
+> - إذا كنت لا تستخدم المجلدات الخاصة، سيكون من المفهم معرفة [اتفاقيات الملفات الخاصة بـ Next.js](/docs/getting-started/project-structure#routing-files) لتجنب التعارضات غير المتوقعة في الأسماء.
+
+### مجموعات المسارات
+
+يمكن إنشاء مجموعات المسارات عن طريق وضع مجلد بين قوسين: `(folderName)`
+
+يشير هذا إلى أن المجلد هو لأغراض تنظيمية ويجب **عدم تضمينه** في مسار URL.
+
+<Image
+  alt="مثال على هيكل المجلدات باستخدام مجموعات المسارات"
+  srcLight="/docs/light/project-organization-route-groups.png"
+  srcDark="/docs/dark/project-organization-route-groups.png"
+  width="1600"
+  height="849"
+/>
+
+مجموعات المسارات مفيدة لـ:
+
+- [تنظيم المسارات في مجموعات](/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path) مثل حسب قسم الموقع، الغرض، أو الفريق.
+- تمكين التخطيطات المتداخلة في نفس مستوى جزء المسار:
+  - [إنشاء تخطيطات متداخلة متعددة في نفس الجزء، بما في ذلك تخطيطات جذر متعددة](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
+  - [إضافة تخطيط إلى مجموعة فرعية من المسارات في جزء مشترك](/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout)
+
+### دليل `src`
+
+يدعم Next.js تخزين كود التطبيق (بما في ذلك `app`) داخل دليل [`src` اختياري](/docs/app/building-your-application/configuring/src-directory). هذا يفصل كود التطبيق عن ملفات تكوين المشروع التي توجد غالبًا في جذر المشروع.
+
+<Image
+  alt="مثال على هيكل المجلدات مع دليل `src`"
+  srcLight="/docs/light/project-organization-src-directory.png"
+  srcDark="/docs/dark/project-organization-src-directory.png"
+  width="1600"
+  height="687"
+/>
+
+### أسماء مسارات الوحدات
+
+يدعم Next.js [أسماء مسارات الوحدات](/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases) التي تجعل قراءة وصيانة عمليات الاستيراد عبر ملفات المشروع المتداخلة بعمق أسهل.
+
+```jsx filename="app/dashboard/settings/analytics/page.js"
+// قبل
+import { Button } from '../../../components/button'
+
+// بعد
+import { Button } from '@/components/button'
+```
+
+## استراتيجيات تنظيم المشروع
+
+لا توجد طريقة "صحيحة" أو "خاطئة" عندما يتعلق الأمر بتنظيم ملفاتك ومجلداتك في مشروع Next.js.
+
+يقدم القسم التالي نظرة عامة عالية المستوى على الاستراتيجيات الشائعة. النقطة الأساسية هي اختيار استراتيجية تناسبك وفريقك والالتزام بها عبر المشروع.
+
+> **جيد أن تعرف**: في الأمثلة أدناه، نستخدم مجلدات `components` و `lib` كعناصر نائبة عامة، ولا يوجد أي أهمية خاصة لأسمائها في الإطار، وقد تستخدم مشاريعك مجلدات أخرى مثل `ui`، `utils`، `hooks`، `styles`، إلخ.
+
+### تخزين ملفات المشروع خارج `app
+
+تخزن هذه الاستراتيجية جميع أكواد التطبيق في مجلدات مشتركة في **جذر مشروعك** وتحافظ على دليل `app` لأغراض التوجيه فقط.
+
+<Image
+  alt="مثال على هيكل المجلدات مع ملفات المشروع خارج app"
+  srcLight="/docs/light/project-organization-project-root.png"
+  srcDark="/docs/dark/project-organization-project-root.png"
+  width="1600"
+  height="849"
+/>
+
+### تخزين ملفات المشروع في مجلدات عليا داخل `app
+
+تخزن هذه الاستراتيجية جميع أكواد التطبيق في مجلدات مشتركة في **جذر دليل `app`**.
+
+<Image
+  alt="مثال على هيكل المجلدات مع ملفات المشروع داخل app"
+  srcLight="/docs/light/project-organization-app-root.png"
+  srcDark="/docs/dark/project-organization-app-root.png"
+  width="1600"
+  height="849"
+/>
+
+### تقسيم ملفات المشروع حسب الميزة أو المسار
+
+تخزن هذه الاستراتيجية أكواد التطبيق المشتركة عالميًا في جذر دليل `app` وتقسم أكواد التطبيق الأكثر تحديدًا إلى أجزاء المسار التي تستخدمها.
+
+<Image
+  alt="مثال على هيكل المجلدات مع ملفات المشروع مقسمة حسب الميزة أو المسار"
+  srcLight="/docs/light/project-organization-app-root-split.png"
+  srcDark="/docs/dark/project-organization-app-root-split.png"
+  width="1600"
+  height="1011"
+/>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/13-internationalization.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/13-internationalization.mdx
new file mode 100644
index 00000000..1e7f804e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/13-internationalization.mdx
@@ -0,0 +1,154 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:09:26.241Z
+title: التدويل
+description: إضافة دعم للغات متعددة مع توجيه دولي ومحتوى مترجم.
+---
+
+يتيح لك Next.js تكوين التوجيه وعرض المحتوى لدعم لغات متعددة. جعل موقعك متكيفًا مع اللغات المختلفة يتضمن محتوى مترجم (توطين) ومسارات دولية.
+
+## المصطلحات
+
+- **اللغة المحلية (Locale):** معرف لمجموعة من تفضيلات اللغة والتنسيق. يشمل عادةً اللغة المفضلة للمستخدم وربما منطقته الجغرافية.
+  - `en-US`: الإنجليزية كما تُستخدم في الولايات المتحدة
+  - `nl-NL`: الهولندية كما تُستخدم في هولندا
+  - `nl`: الهولندية بدون منطقة محددة
+
+## نظرة عامة على التوجيه
+
+يُوصى باستخدام تفضيلات لغة المستخدم في المتصفح لتحديد اللغة المحلية المراد استخدامها. تغيير لغتك المفضلة سيعدل رأس `Accept-Language` الوارد إلى تطبيقك.
+
+على سبيل المثال، باستخدام المكتبات التالية، يمكنك النظر إلى `Request` الوارد لتحديد اللغة المحلية المطلوبة، بناءً على `Headers` واللغات التي تخطط لدعمها واللغة المحلية الافتراضية.
+
+```js filename="middleware.js"
+import { match } from '@formatjs/intl-localematcher'
+import Negotiator from 'negotiator'
+
+let headers = { 'accept-language': 'en-US,en;q=0.5' }
+let languages = new Negotiator({ headers }).languages()
+let locales = ['en-US', 'nl-NL', 'nl']
+let defaultLocale = 'en-US'
+
+match(languages, locales, defaultLocale) // -> 'en-US'
+```
+
+يمكن تدويل التوجيه إما عن طريق المسار الفرعي (`/fr/products`) أو النطاق (`my-site.fr/products`). باستخدام هذه المعلومات، يمكنك الآن إعادة توجيه المستخدم بناءً على اللغة المحلية داخل [البرنامج الوسيط (Middleware)](/docs/app/building-your-application/routing/middleware).
+
+```js filename="middleware.js"
+
+let locales = ['en-US', 'nl-NL', 'nl']
+
+// الحصول على اللغة المحلية المفضلة، مشابه لما سبق أو باستخدام مكتبة
+function getLocale(request) { ... }
+
+export function middleware(request) {
+  // التحقق مما إذا كان هناك أي لغة مدعومة في مسار URL
+  const { pathname } = request.nextUrl
+  const pathnameHasLocale = locales.some(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
+  )
+
+  if (pathnameHasLocale) return
+
+  // إعادة التوجيه إذا لم تكن هناك لغة محددة
+  const locale = getLocale(request)
+  request.nextUrl.pathname = `/${locale}${pathname}`
+  // مثال: الطلب الوارد هو /products
+  // عنوان URL الجديد الآن هو /en-US/products
+  return Response.redirect(request.nextUrl)
+}
+
+export const config = {
+  matcher: [
+    // تخطي جميع المسارات الداخلية (_next)
+    '/((?!_next).*)',
+    // اختياري: التشغيل فقط على عنوان URL الجذر (/)
+    // '/'
+  ],
+}
+```
+
+أخيرًا، تأكد من أن جميع الملفات الخاصة داخل `app/` متداخلة تحت `app/[lang]`. هذا يمكّن موجه Next.js من التعامل ديناميكيًا مع اللغات المختلفة في المسار، وإعادة معلمة `lang` إلى كل تخطيط وصفحة. على سبيل المثال:
+
+```jsx filename="app/[lang]/page.js"
+// لديك الآن إمكانية الوصول إلى اللغة الحالية
+// مثال: /en-US/products -> `lang` هي "en-US"
+export default async function Page({ params: { lang } }) {
+  return ...
+}
+```
+
+يمكن أيضًا تداخل التخطيط الجذر في المجلد الجديد (مثال: `app/[lang]/layout.js`).
+
+## التوطين
+
+تغيير المحتوى المعروض بناءً على اللغة المفضلة للمستخدم، أو التوطين، ليس شيئًا خاصًا بـ Next.js. الأنماط الموضحة أدناه ستعمل بنفس الطريقة مع أي تطبيق ويب.
+
+لنفترض أننا نريد دعم المحتوى بالإنجليزية والهولندية داخل تطبيقنا. قد نحتفظ بـ "قواميس" مختلفة، وهي كائنات تعطينا تعيينًا من مفتاح معين إلى سلسلة مترجمة. على سبيل المثال:
+
+```json filename="dictionaries/en.json"
+{
+  "products": {
+    "cart": "Add to Cart"
+  }
+}
+```
+
+```json filename="dictionaries/nl.json"
+{
+  "products": {
+    "cart": "Toevoegen aan Winkelwagen"
+  }
+}
+```
+
+يمكننا بعد ذلك إنشاء دالة `getDictionary` لتحميل الترجمات للغة المطلوبة:
+
+```jsx filename="app/[lang]/dictionaries.js"
+import 'server-only'
+
+const dictionaries = {
+  en: () => import('./dictionaries/en.json').then((module) => module.default),
+  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
+}
+
+export const getDictionary = async (locale) => dictionaries[locale]()
+```
+
+بالنظر إلى اللغة المحددة حاليًا، يمكننا جلب القاموس داخل تخطيط أو صفحة.
+
+```jsx filename="app/[lang]/page.js"
+import { getDictionary } from './dictionaries'
+
+export default async function Page({ params: { lang } }) {
+  const dict = await getDictionary(lang) // en
+  return <button>{dict.products.cart}</button> // Add to Cart
+}
+```
+
+لأن جميع التخطيطات والصفحات في دليل `app/` تكون افتراضيًا [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components)، لا داعي للقلق بشأن حجم ملفات الترجمة الذي يؤثر على حجم حزمة JavaScript على جانب العميل. هذا الرمز سيعمل **فقط على الخادم**، وسيتم إرسال HTML الناتج فقط إلى المتصفح.
+
+## التوليد الثابت
+
+لتوليد مسارات ثابتة لمجموعة معينة من اللغات، يمكننا استخدام `generateStaticParams` مع أي صفحة أو تخطيط. يمكن أن يكون هذا عالميًا، على سبيل المثال، في التخطيط الجذر:
+
+```jsx filename="app/[lang]/layout.js"
+export async function generateStaticParams() {
+  return [{ lang: 'en-US' }, { lang: 'de' }]
+}
+
+export default function Root({ children, params }) {
+  return (
+    <html lang={params.lang}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+## المصادر
+
+- [توجيه وترجمة دولية بسيطة](https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing)
+- [`next-intl`](https://next-intl-docs.vercel.app/docs/next-13)
+- [`next-international`](https://github.com/QuiiBz/next-international)
+- [`next-i18n-router`](https://github.com/i18nexus/next-i18n-router)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/index.mdx
new file mode 100644
index 00000000..061ffcff
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/01-routing/index.mdx
@@ -0,0 +1,162 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:09:47.349Z
+title: أساسيات التوجيه (Routing)
+nav_title: التوجيه
+description: تعلم الأساسيات الخاصة بتوجيه تطبيقات الواجهة الأمامية.
+---
+
+الهيكل الأساسي لكل تطبيق هو نظام التوجيه (Routing). ستقدم لك هذه الصفحة **المفاهيم الأساسية** لتوجيه الويب وكيفية التعامل مع التوجيه في Next.js.
+
+## المصطلحات
+
+أولاً، ستظهر هذه المصطلحات مستخدمة في جميع أنحاء الوثائق. إليك مرجع سريع:
+
+<Image
+  alt="مصطلحات لشجرة المكونات"
+  srcLight="/docs/light/terminology-component-tree.png"
+  srcDark="/docs/dark/terminology-component-tree.png"
+  width="1600"
+  height="832"
+/>
+
+- **الشجرة (Tree):** اتفاقية لتصور هيكل هرمي. على سبيل المثال، شجرة مكونات بها مكونات أب وأبناء، هيكل مجلدات، إلخ.
+- **الشجرة الفرعية (Subtree):** جزء من شجرة، يبدأ من جذر جديد (أول) وينتهي عند الأوراق (آخر).
+- **الجذر (Root):** العقدة الأولى في شجرة أو شجرة فرعية، مثل تخطيط الجذر.
+- **الورقة (Leaf):** عقد في شجرة فرعية ليس لها أبناء، مثل الجزء الأخير في مسار URL.
+
+<Image
+  alt="مصطلحات لتشريح URL"
+  srcLight="/docs/light/terminology-url-anatomy.png"
+  srcDark="/docs/dark/terminology-url-anatomy.png"
+  width="1600"
+  height="371"
+/>
+
+- **مقطع URL (URL Segment):** جزء من مسار URL محدد بشرطات مائلة.
+- **مسار URL (URL Path):** جزء من URL يأتي بعد النطاق (مكون من مقاطع).
+
+## موجه `app`
+
+في الإصدار 13، قدمت Next.js **موجه تطبيق (App Router)** جديد مبني على [مكونات الخادم في React](/docs/app/building-your-application/rendering/server-components)، والذي يدعم التخطيطات المشتركة، التوجيه المتداخل، حالات التحميل، معالجة الأخطاء، والمزيد.
+
+يعمل موجه التطبيق في دليل جديد باسم `app`. يعمل دليل `app` جنبًا إلى جنب مع دليل `pages` للسماح بالتبني التدريجي. هذا يسمح لك باختيار بعض مسارات تطبيقك للسلوك الجديد مع الاحتفاظ بمسارات أخرى في دليل `pages` للسلوك السابق. إذا كان تطبيقك يستخدم دليل `pages`، يرجى أيضًا الاطلاع على وثائق [موجه الصفحات (Pages Router)](/docs/pages/building-your-application/routing).
+
+> **جيد أن تعرف**: موجه التطبيق له الأولوية على موجه الصفحات. لا يجب أن تحل المسارات عبر الأدلة على نفس مسار URL وسيؤدي ذلك إلى خطأ في وقت البناء لمنع التعارض.
+
+<Image
+  alt="دليل Next.js للتطبيق"
+  srcLight="/docs/light/next-router-directories.png"
+  srcDark="/docs/dark/next-router-directories.png"
+  width="1600"
+  height="444"
+/>
+
+بشكل افتراضي، المكونات داخل `app` هي [مكونات خادم React](/docs/app/building-your-application/rendering/server-components). هذا تحسين للأداء ويسمح لك بتبنيها بسهولة، ويمكنك أيضًا استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components).
+
+> **توصية:** تحقق من صفحة [الخادم (Server)](/docs/app/building-your-application/rendering/server-components) إذا كنت جديدًا على مكونات الخادم.
+
+## أدوار المجلدات والملفات
+
+يستخدم Next.js موجهًا يعتمد على نظام الملفات حيث:
+
+- **المجلدات** تستخدم لتعريف المسارات. المسار هو مسار واحد من المجلدات المتداخلة، يتبع التسلسل الهرمي لنظام الملفات من **مجلد الجذر** إلى **مجلد الورقة** النهائي الذي يتضمن ملف `page.js`. انظر [تحديد المسارات](/docs/app/building-your-application/routing/defining-routes).
+- **الملفات** تستخدم لإنشاء واجهة مستخدم معروضة لمقطع مسار. انظر [الملفات الخاصة](#file-conventions).
+
+## مقاطع المسار
+
+كل مجلد في مسار يمثل **مقطع مسار (route segment)**. كل مقطع مسار يتم تعيينه إلى **مقطع** مقابِل في **مسار URL**.
+
+<Image
+  alt="كيفية تعيين مقاطع المسار إلى مقاطع URL"
+  srcLight="/docs/light/route-segments-to-path-segments.png"
+  srcDark="/docs/dark/route-segments-to-path-segments.png"
+  width="1600"
+  height="594"
+/>
+
+## المسارات المتداخلة
+
+لإنشاء مسار متداخل، يمكنك تداخل المجلدات داخل بعضها البعض. على سبيل المثال، يمكنك إضافة مسار جديد `/dashboard/settings` عن طريق تداخل مجلدين جديدين في دليل `app`.
+
+يتكون مسار `/dashboard/settings` من ثلاثة مقاطع:
+
+- `/` (مقطع الجذر)
+- `dashboard` (مقطع)
+- `settings` (مقطع الورقة)
+
+## اصطلاحات الملفات
+
+يوفر Next.js مجموعة من الملفات الخاصة لإنشاء واجهة مستخدم بسلوك محدد في المسارات المتداخلة:
+
+|                                                                                       |                                                                                                |
+| ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| [`layout`](/docs/app/building-your-application/routing/pages-and-layouts#layouts)     | واجهة مستخدم مشتركة لمقطع وأبنائه                                                             |
+| [`page`](/docs/app/building-your-application/routing/pages-and-layouts#pages)         | واجهة مستخدم فريدة لمسار وجعل المسارات قابلة للوصول العام                                     |
+| [`loading`](/docs/app/building-your-application/routing/loading-ui-and-streaming)     | واجهة مستخدم التحميل لمقطع وأبنائه                                                            |
+| [`not-found`](/docs/app/api-reference/file-conventions/not-found)                     | واجهة مستخدم غير موجود لمقطع وأبنائه                                                          |
+| [`error`](/docs/app/building-your-application/routing/error-handling)                 | واجهة مستخدم الخطأ لمقطع وأبنائه                                                              |
+| [`global-error`](/docs/app/building-your-application/routing/error-handling)          | واجهة مستخدم الخطأ العام                                                                      |
+| [`route`](/docs/app/building-your-application/routing/route-handlers)                 | نقطة نهاية API من جانب الخادم                                                                 |
+| [`template`](/docs/app/building-your-application/routing/pages-and-layouts#templates) | واجهة مستخدم تخطيط معاد عرضها بشكل خاص                                                       |
+| [`default`](/docs/app/api-reference/file-conventions/default)                         | واجهة مستخدم احتياطية لـ [المسارات المتوازية](/docs/app/building-your-application/routing/parallel-routes) |
+
+> **جيد أن تعرف**: يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للملفات الخاصة.
+
+## تسلسل المكونات الهرمي
+
+يتم عرض مكونات React المعرفة في الملفات الخاصة لمقطع مسار في تسلسل هرمي محدد:
+
+- `layout.js`
+- `template.js`
+- `error.js` (حدود خطأ React)
+- `loading.js` (حدود تعليق React)
+- `not-found.js` (حدود خطأ React)
+- `page.js` أو `layout.js` متداخل
+
+<Image
+  alt="التسلسل الهرمي للمكونات لاصطلاحات الملفات"
+  srcLight="/docs/light/file-conventions-component-hierarchy.png"
+  srcDark="/docs/dark/file-conventions-component-hierarchy.png"
+  width="1600"
+  height="643"
+/>
+
+في مسار متداخل، سيتم تداخل مكونات المقطع **داخل** مكونات مقطع الأب.
+
+<Image
+  alt="التسلسل الهرمي للمكونات المتداخلة لاصطلاحات الملفات"
+  srcLight="/docs/light/nested-file-conventions-component-hierarchy.png"
+  srcDark="/docs/dark/nested-file-conventions-component-hierarchy.png"
+  width="1600"
+  height="863"
+/>
+
+## التواجد المشترك
+
+بالإضافة إلى الملفات الخاصة، لديك خيار وضع ملفاتك الخاصة (مثل المكونات، الأنماط، الاختبارات، إلخ) داخل مجلدات في دليل `app`.
+
+هذا لأنه بينما تحدد المجلدات المسارات، فقط المحتويات التي يتم إرجاعها بواسطة `page.js` أو `route.js` قابلة للعنونة بشكل عام.
+
+<Image
+  alt="مثال على هيكل مجلد مع ملفات متواجدة معًا"
+  srcLight="/docs/light/project-organization-colocation.png"
+  srcDark="/docs/dark/project-organization-colocation.png"
+  width="1600"
+  height="1011"
+/>
+
+تعلم المزيد حول [تنظيم المشروع والتواجد المشترك](/docs/app/building-your-application/routing/colocation).
+
+## أنماط التوجيه المتقدمة
+
+يوفر موجه التطبيق أيضًا مجموعة من الاصطلاحات لمساعدتك في تنفيذ أنماط توجيه أكثر تقدمًا. تتضمن هذه:
+
+- [المسارات المتوازية (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes): تسمح لك بعرض صفحتين أو أكثر في نفس العرض في وقت واحد يمكن التنقل بينها بشكل مستقل. يمكنك استخدامها لعروض مقسمة لها تنقل فرعي خاص بها. مثل لوحات التحكم.
+- [مسارات الاعتراض (Intercepting Routes)](/docs/app/building-your-application/routing/intercepting-routes): تسمح لك باعتراض مسار وعرضه في سياق مسار آخر. يمكنك استخدام هذه عندما يكون الحفاظ على سياق الصفحة الحالية مهمًا. مثل رؤية جميع المهام أثناء تحرير مهمة واحدة أو توسيع صورة في موجز.
+
+تتيح لك هذه الأنماط بناء واجهات مستخدم أكثر ثراءً وتعقيدًا، مما يجعل الميزات التي كانت معقدة تاريخيًا لفريق صغيرة والمطورين الأفراد قابلة للتنفيذ.
+
+## الخطوات التالية
+
+الآن بعد أن فهمت أساسيات التوجيه في Next.js، اتبع الروابط أدناه لإنشاء مساراتك الأولى:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx
new file mode 100644
index 00000000..2cf877b7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx
@@ -0,0 +1,375 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:10:51.335Z
+title: جلب البيانات، التخزين المؤقت، وإعادة التحقق
+nav_title: الجلب، التخزين المؤقت، وإعادة التحقق
+description: تعلم كيفية جلب البيانات، تخزينها مؤقتًا، وإعادة التحقق منها في تطبيق Next.js الخاص بك.
+---
+
+يعد جلب البيانات جزءًا أساسيًا من أي تطبيق. تتناول هذه الصفحة كيفية جلب البيانات، تخزينها مؤقتًا، وإعادة التحقق منها في React وNext.js.
+
+هناك أربع طرق لجلب البيانات:
+
+1. [على الخادم باستخدام `fetch`](#جلب-البيانات-على-الخادم-باستخدام-fetch)
+2. [على الخادم باستخدام مكتبات الطرف الثالث](#جلب-البيانات-على-الخادم-باستخدام-مكتبات-الطرف-الثالث)
+3. [على العميل عبر Route Handler](#جلب-البيانات-على-العميل-باستخدام-route-handlers)
+4. [على العميل باستخدام مكتبات الطرف الثالث](#جلب-البيانات-على-العميل-باستخدام-route-handlers).
+
+## جلب البيانات على الخادم باستخدام `fetch`
+
+يمتد Next.js واجهة برمجة تطبيقات [`fetch` الأصلية](https://developer.mozilla.org/docs/Web/API/Fetch_API) للسماح لك بتكوين سلوك [التخزين المؤقت](#التخزين-المؤقت-للبيانات) و[إعادة التحقق](#إعادة-التحقق-من-البيانات) لكل طلب جلب على الخادم. يمتد React `fetch` لتلقائيًا [تذكر](/docs/app/building-your-application/data-fetching/patterns#جلب-البيانات-حيث-هي-مطلوبة) طلبات الجلب أثناء عرض شجرة مكونات React.
+
+يمكنك استخدام `fetch` مع [`async`/`await` في مكونات الخادم](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md)، في [Route Handlers](/docs/app/building-your-application/routing/route-handlers)، وفي [Server Actions](/docs/app/building-your-application/data-fetching/forms-and-mutations).
+
+على سبيل المثال:
+
+```tsx filename="app/page.tsx" switcher
+async function getData() {
+  const res = await fetch('https://api.example.com/...')
+  // القيمة المرجعة *ليست* متسلسلة
+  // يمكنك إرجاع Date، Map، Set، إلخ.
+
+  if (!res.ok) {
+    // سيؤدي هذا إلى تنشيط أقرب حد خطأ `error.js`
+    throw new Error('فشل في جلب البيانات')
+  }
+
+  return res.json()
+}
+
+export default async function Page() {
+  const data = await getData()
+
+  return <main></main>
+}
+```
+
+```jsx filename="app/page.js" switcher
+async function getData() {
+  const res = await fetch('https://api.example.com/...')
+  // القيمة المرجعة *ليست* متسلسلة
+  // يمكنك إرجاع Date، Map، Set، إلخ.
+
+  if (!res.ok) {
+    // سيؤدي هذا إلى تنشيط أقرب حد خطأ `error.js`
+    throw new Error('فشل في جلب البيانات')
+  }
+
+  return res.json()
+}
+
+export default async function Page() {
+  const data = await getData()
+
+  return <main></main>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - يوفر Next.js دوال مساعدة قد تحتاجها عند جلب البيانات في مكونات الخادم مثل [`cookies`](/docs/app/api-reference/functions/cookies) و[`headers`](/docs/app/api-reference/functions/headers). سيؤدي هذا إلى عرض المسار ديناميكيًا حيث تعتمد على معلومات وقت الطلب.
+> - في Route Handlers، لا يتم تذكر طلبات `fetch` حيث أن Route Handlers ليست جزءًا من شجرة مكونات React.
+> - لاستخدام `async`/`await` في مكون خادم مع TypeScript، ستحتاج إلى استخدام TypeScript `5.1.3` أو أعلى و `@types/react` `18.2.8` أو أعلى.
+
+### التخزين المؤقت للبيانات
+
+يخزن التخزين المؤقت البيانات حتى لا تحتاج إلى إعادة جلبها من مصدر البيانات في كل طلب.
+
+افتراضيًا، يقوم Next.js تلقائيًا بتخزين القيم المرجعة من `fetch` في [ذاكرة التخزين المؤقت للبيانات](/docs/app/building-your-application/caching#ذاكرة-التخزين-المؤقت-للبيانات) على الخادم. هذا يعني أنه يمكن جلب البيانات في وقت البناء أو وقت الطلب، تخزينها مؤقتًا، وإعادة استخدامها في كل طلب بيانات.
+
+```js
+// 'force-cache' هو الافتراضي، ويمكن حذفه
+fetch('https://...', { cache: 'force-cache' })
+```
+
+يتم أيضًا تخزين طلبات `fetch` التي تستخدم طريقة `POST` تلقائيًا. ما لم تكن داخل [Route Handler](/docs/app/building-your-application/routing/route-handlers) تستخدم طريقة `POST`، فلن يتم تخزينها مؤقتًا.
+
+> **ما هي ذاكرة التخزين المؤقت للبيانات؟**
+>
+> ذاكرة التخزين المؤقت للبيانات هي [ذاكرة تخزين مؤقت HTTP](https://developer.mozilla.org/docs/Web/HTTP/Caching) دائمة. اعتمادًا على منصتك، يمكن أن تتوسع الذاكرة المؤقتة تلقائيًا و[تكون مشتركة عبر مناطق متعددة](https://vercel.com/docs/infrastructure/data-cache).
+>
+> تعلم المزيد عن [ذاكرة التخزين المؤقت للبيانات](/docs/app/building-your-application/caching#ذاكرة-التخزين-المؤقت-للبيانات).
+
+### إعادة التحقق من البيانات
+
+إعادة التحقق هي عملية مسح ذاكرة التخزين المؤقت للبيانات وإعادة جلب أحدث البيانات. هذا مفيد عندما تتغير بياناتك وتريد التأكد من عرض أحدث المعلومات.
+
+يمكن إعادة التحقق من البيانات المخزنة مؤقتًا بطريقتين:
+
+- **إعادة التحقق المبنية على الوقت**: إعادة التحقق من البيانات تلقائيًا بعد مرور فترة زمنية معينة. هذا مفيد للبيانات التي تتغير بشكل غير متكرر ولا تكون الحداثة حرجة.
+- **إعادة التحقق عند الطلب**: إعادة التحقق من البيانات يدويًا بناءً على حدث (مثل إرسال نموذج). يمكن استخدام إعادة التحقق عند الطلب نهجًا يعتمد على العلامات أو المسارات لإعادة التحقق من مجموعات البيانات دفعة واحدة. هذا مفيد عندما تريد التأكد من عرض أحدث البيانات في أسرع وقت ممكن (مثل عند تحديث المحتوى من نظام إدارة المحتوى الخاص بك).
+
+#### إعادة التحقق المبنية على الوقت
+
+لإعادة التحقق من البيانات على فترات زمنية، يمكنك استخدام خيار `next.revalidate` في `fetch` لتعيين عمر ذاكرة التخزين المؤقت للمورد (بالثواني).
+
+```js
+fetch('https://...', { next: { revalidate: 3600 } })
+```
+
+بدلاً من ذلك، لإعادة التحقق من جميع طلبات `fetch` في مقطع مسار، يمكنك استخدام [خيارات تكوين المقطع](/docs/app/api-reference/file-conventions/route-segment-config).
+
+```jsx filename="layout.js | page.js"
+export const revalidate = 3600 // إعادة التحقق على الأكثر كل ساعة
+```
+
+إذا كان لديك عدة طلبات جلب في مسار معروض بشكل ثابت، ولكل منها تردد إعادة تحقق مختلف. سيتم استخدام أقل وقت لجميع الطلبات. بالنسبة للمسارات المعروضة ديناميكيًا، سيتم إعادة التحقق من كل طلب `fetch` بشكل مستقل.
+
+تعلم المزيد عن [إعادة التحقق المبنية على الوقت](/docs/app/building-your-application/caching#إعادة-التحقق-المبنية-على-الوقت).
+
+#### إعادة التحقق عند الطلب
+
+يمكن إعادة التحقق من البيانات عند الطلب عن طريق المسار ([`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)) أو عن طريق علامة التخزين المؤقت ([`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)) داخل Route Handler أو Server Action.
+
+لدى Next.js نظام وضع العلامات على الذاكرة المؤقتة لإبطال طلبات `fetch` عبر المسارات.
+
+1. عند استخدام `fetch`، لديك خيار وضع علامات على إدخالات الذاكرة المؤقتة بواحدة أو أكثر من العلامات.
+2. ثم يمكنك استدعاء `revalidateTag` لإعادة التحقق من جميع الإدخالات المرتبطة بهذه العلامة.
+
+على سبيل المثال، يضيف طلب `fetch` التالي علامة التخزين المؤقت `collection`:
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  const res = await fetch('https://...', { next: { tags: ['collection'] } })
+  const data = await res.json()
+  // ...
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default async function Page() {
+  const res = await fetch('https://...', { next: { tags: ['collection'] } })
+  const data = await res.json()
+  // ...
+}
+```
+
+إذا كنت تستخدم Route Handler، يجب إنشاء رمز سري يعرفه فقط تطبيق Next.js الخاص بك. سيتم استخدام هذا الرمز لمنع محاولات إعادة التحقق غير المصرح بها. على سبيل المثال، يمكنك الوصول إلى المسار (إما يدويًا أو عبر webhook) باستخدام هيكل URL التالي:
+
+```bash filename="URL"
+https://<your-site.com>/api/revalidate?tag=collection&secret=<token>
+```
+
+```ts filename="app/api/revalidate/route.ts" switcher
+import { NextRequest } from 'next/server'
+import { revalidateTag } from 'next/cache'
+
+// مثال: webhook إلى `your-website.com/api/revalidate?tag=collection&secret=<token>`
+export async function POST(request: NextRequest) {
+  const secret = request.nextUrl.searchParams.get('secret')
+  const tag = request.nextUrl.searchParams.get('tag')
+
+  if (secret !== process.env.MY_SECRET_TOKEN) {
+    return Response.json({ message: 'رمز سري غير صالح' }, { status: 401 })
+  }
+
+  if (!tag) {
+    return Response.json({ message: 'معلمة العلامة مفقودة' }, { status: 400 })
+  }
+
+  revalidateTag(tag)
+
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
+
+```js filename="app/api/revalidate/route.js" switcher
+import { revalidateTag } from 'next/cache'
+
+// مثال: webhook إلى `your-website.com/api/revalidate?tag=collection&secret=<token>`
+export async function POST(request) {
+  const secret = request.nextUrl.searchParams.get('secret')
+  const tag = request.nextUrl.searchParams.get('tag')
+
+  if (secret !== process.env.MY_SECRET_TOKEN) {
+    return Response.json({ message: 'رمز سري غير صالح' }, { status: 401 })
+  }
+
+  if (!tag) {
+    return Response.json({ message: 'معلمة العلامة مفقودة' }, { status: 400 })
+  }
+
+  revalidateTag(tag)
+
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) لإعادة التحقق من جميع البيانات المرتبطة بمسار.
+
+```ts filename="app/api/revalidate/route.ts" switcher
+import { NextRequest } from 'next/server'
+import { revalidatePath } from 'next/cache'
+
+export async function POST(request: NextRequest) {
+  const path = request.nextUrl.searchParams.get('path')
+
+  if (!path) {
+    return Response.json({ message: 'معلمة المسار مفقودة' }, { status: 400 })
+  }
+
+  revalidatePath(path)
+
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
+
+```js filename="app/api/revalidate/route.js" switcher
+import { revalidatePath } from 'next/cache'
+
+export async function POST(request) {
+  const path = request.nextUrl.searchParams.get('path')
+
+  if (!path) {
+    return Response.json({ message: 'معلمة المسار مفقودة' }, { status: 400 })
+  }
+
+  revalidatePath(path)
+
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
+
+تعلم المزيد عن [إعادة التحقق عند الطلب](/docs/app/building-your-application/caching#إعادة-التحقق-عند-الطلب).
+
+#### معالجة الأخطاء وإعادة التحقق
+
+إذا حدث خطأ أثناء محاولة إعادة التحقق من البيانات، سيتم الاستمرار في تقديم آخر بيانات تم إنشاؤها بنجاح من الذاكرة المؤقتة. في الطلب التالي، سيقوم Next.js بإعادة محاولة إعادة التحقق من البيانات.
+
+### عدم استخدام التخزين المؤقت للبيانات
+
+لا يتم تخزين طلبات `fetch` مؤقتًا إذا:
+
+- تمت إضافة `cache: 'no-store'` إلى طلبات `fetch`.
+- تمت إضافة خيار `revalidate: 0` إلى طلبات `fetch` الفردية.
+- كان طلب `fetch` داخل Route Handler يستخدم طريقة `POST`.
+- جاء طلب `fetch` بعد استخدام `headers` أو `cookies`.
+- تم استخدام خيار مقطع المسار `const dynamic = 'force-dynamic'`.
+- تم تكوين خيار مقطع المسار `fetchCache` لتخطي التخزين المؤقت افتراضيًا.
+- استخدم طلب `fetch` رؤوس `Authorization` أو `Cookie` وكان هناك طلب غير مخزن مؤقتًا فوقه في شجرة المكونات.
+
+#### طلبات `fetch` الفردية
+
+لعدم استخدام التخزين المؤقت لطلبات `fetch` الفردية، يمكنك تعيين خيار `cache` في `fetch` إلى `'no-store'`. سيؤدي هذا إلى جلب البيانات ديناميكيًا في كل طلب.
+
+```js filename="layout.js | page.js"
+fetch('https://...', { cache: 'no-store' })
+```
+
+عرض جميع خيارات `cache` المتاحة في [مرجع واجهة برمجة تطبيقات `fetch`](/docs/app/api-reference/functions/fetch).
+
+#### طلبات `fetch` المتعددة
+
+إذا كان لديك عدة طلبات `fetch` في مقطع مسار (مثل Layout أو Page)، يمكنك تكوين سلوك التخزين المؤقت لجميع طلبات البيانات في المقطع باستخدام [خيارات تكوين المقطع](/docs/app/api-reference/file-conventions/route-segment-config).
+
+على سبيل المثال، استخدام `const dynamic = 'force-dynamic'` سيؤدي إلى جلب جميع البيانات في وقت الطلب، وعرض المقطع ديناميكيًا.
+
+```js filename="layout.js | page.js"
+// أضف
+export const dynamic = 'force-dynamic'
+```
+
+هناك قائمة واسعة من خيارات تكوين المقطع، مما يمنحك تحكمًا دقيقًا في السلوك الثابت والديناميكي لمقطع مسار. راجع [مرجع API](/docs/app/api-reference/file-conventions/route-segment-config) للمزيد.
+
+## جلب البيانات على الخادم باستخدام مكتبات الطرف الثالث
+
+في الحالات التي تستخدم فيها مكتبة طرف ثالث لا تدعم أو تعرض `fetch` (مثل قاعدة بيانات، نظام إدارة محتوى، أو عميل ORM)، يمكنك تكوين سلوك التخزين المؤقت وإعادة التحقق من تلك الطلبات باستخدام [خيار تكوين مقطع المسار](/docs/app/api-reference/file-conventions/route-segment-config) ودالة `cache` في React.
+
+سيعتمد ما إذا كانت البيانات مخزنة مؤقتًا أم لا على ما إذا كان مقطع المسار [معروضًا بشكل ثابت أو ديناميكي](/docs/app/building-your-application/rendering/server-components#استراتيجيات-عرض-الخادم). إذا كان المقطع ثابتًا (افتراضيًا)، سيتم تخزين ناتج الطلب وإعادة التحقق منه كجزء من مقطع المسار. إذا كان المقطع ديناميكيًا، لن يتم تخزين ناتج الطلب وسيتم إعادة جلبه في كل طلب عند عرض المقطع.
+
+> **معلومة مفيدة:**
+>
+> يعمل Next.js على واجهة برمجة تطبيقات، `unstable_cache`، لتكوين سلوك التخزين المؤقت وإعادة التحقق من طلبات الطرف الثالث الفردية.
+
+### مثال
+
+في المثال التالي:
+
+- تم تعيين خيار `revalidate` إلى `3600`، مما يعني أنه سيتم تخزين البيانات مؤقتًا وإعادة التحقق منها على الأكثر كل ساعة.
+- يتم استخدام دالة `cache` في React [لتذكر](/docs/app/building-your-application/caching#تذكر-الطلبات) طلبات البيانات.
+
+```ts filename="utils/get-item.ts" switcher
+import { cache } from 'react'
+
+export const revalidate = 3600 // إعادة التحقق من البيانات على الأكثر كل ساعة
+
+export const getItem = cache(async (id: string) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
+
+```js filename="utils/get-item.js" switcher
+import { cache } from 'react'
+
+export const revalidate = 3600 // إعادة التحقق من البيانات على الأكثر كل ساعة
+
+export const getItem = cache(async (id) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
+
+على الرغم من استدعاء دالة `getItem` مرتين، سيتم إجراء استعلام واحد فقط إلى قاعدة البيانات.
+
+```tsx filename="app/item/[id]/layout.tsx" switcher
+import { getItem } from '@/utils/get-item'
+
+export default async function Layout({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+```jsx filename="app/item/[id]/layout.js" switcher
+import { getItem } from '@/utils/get-item'
+
+export default async function Layout({ params: { id } }) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+```tsx filename="app/item/[id]/page.tsx" switcher
+import { getItem } from '@/utils/get-item'
+
+export default async function Page({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+```jsx filename="app/item/[id]/page.js" switcher
+import { getItem } from '@/utils/get-item'
+
+export default async function Page({ params: { id } }) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+## جلب البيانات على العميل باستخدام Route Handlers
+
+إذا كنت بحاجة إلى جلب البيانات في مكون عميل، يمكنك استدعاء [Route Handler](/docs/app/building-your-application/routing/route-handlers) من العميل. يتم تنفيذ Route Handlers على الخادم وإرجاع البيانات إلى العميل. هذا مفيد عندما لا تريد الكشف عن معلومات حساسة للعميل، مثل رموز API.
+
+راجع وثائق [Route Handler](/docs/app/building-your-application/routing/route-handlers) للحصول على أمثلة.
+
+> **مكونات الخادم و Route Handlers**
+>
+> نظرًا لأن مكونات الخادم تعرض على الخادم، لا تحتاج إلى استدعاء Route Handler من مكون خادم لجلب البيانات. بدلاً من ذلك، يمكنك جلب البيانات مباشرة داخل مكون الخادم.
+
+## جلب البيانات على العميل باستخدام مكتبات الطرف الثالث
+
+يمكنك أيضًا جلب البيانات على العميل باستخدام مكتبات طرف ثالث مثل [SWR](https://swr.vercel.app/) أو [React Query](https://tanstack.com/query/latest). توفر هذه المكتبات واجهات برمجة تطبيقات خاصة بها لتذكر الطلبات، التخزين المؤقت، إعادة التحقق، وتحوير البيانات.
+
+> **واجهات برمجة التطبيقات المستقبلية**:
+>
+> `use` هي دالة React **تقبل وتتعامل مع وعد** تم إرجاعه بواسطة دالة. لف `fetch` في `use` غير موصى به حاليًا في مكونات العميل وقد يؤدي إلى إعادة عرض متعددة. تعلم المزيد عن `use` في [RFC React](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#usepromise).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx
new file mode 100644
index 00000000..c0a1958a
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx
@@ -0,0 +1,314 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:10:06.679Z
+title: أنماط جلب البيانات
+description: تعلم عن أنماط جلب البيانات الشائعة في React وNext.js.
+---
+
+هناك بعض الأنماط والممارسات الموصى بها لجلب البيانات في React وNext.js. ستغطي هذه الصفحة بعض الأنماط الأكثر شيوعًا وكيفية استخدامها.
+
+### جلب البيانات على الخادم
+
+عندما يكون ذلك ممكنًا، نوصي بجلب البيانات على الخادم. هذا يسمح لك بـ:
+
+- الوصول المباشر إلى موارد البيانات الخلفية (مثل قواعد البيانات).
+- الحفاظ على تطبيقك أكثر أمانًا عن طريق منع وصول المعلومات الحساسة مثل رموز الوصول ومفاتيح API إلى العميل.
+- جلب البيانات وعرضها في نفس البيئة. هذا يقلل من التواصل ذهابًا وإيابًا بين العميل والخادم، وكذلك [العمل على الخيط الرئيسي](https://vercel.com/blog/how-react-18-improves-application-performance) على العميل.
+- تنفيذ عمليات جلب بيانات متعددة برحلة ذهاب وإياب واحدة بدلاً من طلبات فردية متعددة على العميل.
+- تقليل [شلالات](#parallel-and-sequential-data-fetching) العميل-الخادم.
+- اعتمادًا على منطقتك، يمكن أن يحدث جلب البيانات بالقرب من مصدر البيانات، مما يقلل من زمن الوصول ويحسن الأداء.
+
+يمكنك جلب البيانات على الخادم باستخدام مكونات الخادم، [معالجات المسارات](/docs/app/building-your-application/routing/route-handlers)، و[أفعال الخادم](/docs/app/building-your-application/data-fetching/forms-and-mutations).
+
+### جلب البيانات حيثما تكون مطلوبة
+
+إذا كنت بحاجة إلى استخدام نفس البيانات (مثل المستخدم الحالي) في عدة مكونات في شجرة، ليس عليك جلب البيانات عالميًا، ولا تمرير الخصائص بين المكونات. بدلاً من ذلك، يمكنك استخدام `fetch` أو `cache` من React في المكون الذي يحتاج إلى البيانات دون القلق بشأن تأثيرات الأداء لإنشاء طلبات متعددة لنفس البيانات.
+
+هذا ممكن لأن طلبات `fetch` يتم تخزينها مؤقتًا تلقائيًا. تعلم المزيد عن [تخزين الطلبات مؤقتًا](/docs/app/building-your-application/caching#request-memoization)
+
+> **جيد أن تعرف**: هذا ينطبق أيضًا على التخطيطات، لأنه لا يمكن تمرير البيانات بين التخطيط الأب وأطفاله.
+
+### البث (Streaming)
+
+البث و[Suspense](https://react.dev/reference/react/Suspense) هما ميزتان في React تسمحان لك بعرض وحدات واجهة المستخدم تدريجيًا وبثها بشكل تدريجي إلى العميل.
+
+مع مكونات الخادم و[التخطيطات المتداخلة](/docs/app/building-your-application/routing/pages-and-layouts)، يمكنك عرض أجزاء من الصفحة التي لا تتطلب بيانات بشكل فوري، وعرض [حالة التحميل](/docs/app/building-your-application/routing/loading-ui-and-streaming) للأجزاء التي تقوم بجلب البيانات. هذا يعني أن المستخدم لا يحتاج إلى انتظار تحميل الصفحة بالكامل قبل أن يتمكن من التفاعل معها.
+
+<Image
+  alt="عرض الخادم مع البث"
+  srcLight="/docs/light/server-rendering-with-streaming.png"
+  srcDark="/docs/dark/server-rendering-with-streaming.png"
+  width="1600"
+  height="785"
+/>
+
+للمزيد عن البث وSuspense، راجع صفحات [واجهة التحميل](/docs/app/building-your-application/routing/loading-ui-and-streaming) و[البث مع Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense).
+
+### جلب البيانات المتوازي والتسلسلي
+
+عند جلب البيانات داخل مكونات React، تحتاج إلى الانتباه لنمطين لجلب البيانات: المتوازي والتسلسلي.
+
+<Image
+  alt="جلب البيانات التسلسلي والمتوازي"
+  srcLight="/docs/light/sequential-parallel-data-fetching.png"
+  srcDark="/docs/dark/sequential-parallel-data-fetching.png"
+  width="1600"
+  height="525"
+/>
+
+- مع **جلب البيانات التسلسلي**، تكون الطلبات في المسار معتمدة على بعضها البعض وبالتالي تخلق شلالات. قد تكون هناك حالات تريد فيها هذا النمط لأن أحد الطلبات يعتمد على نتيجة الآخر، أو تريد أن يتم استيفاء شرط قبل الطلب التالي لتوفير الموارد. ومع ذلك، قد يكون هذا السلوك غير مقصود ويؤدي إلى أوقات تحميل أطول.
+- مع **جلب البيانات المتوازي**، يتم بدء الطلبات في المسار بسرعة وسيتم تحميل البيانات في نفس الوقت. هذا يقلل من شلالات العميل-الخادم والوقت الإجمالي لتحميل البيانات.
+
+#### جلب البيانات التسلسلي
+
+إذا كان لديك مكونات متداخلة، وكل مكون يجلب بياناته الخاصة، فإن جلب البيانات سيحدث بشكل تسلسلي إذا كانت هذه الطلبات مختلفة (هذا لا ينطبق على الطلبات لنفس البيانات حيث يتم تخزينها مؤقتًا تلقائيًا [memoized](/docs/app/building-your-application/caching#request-memoization)).
+
+على سبيل المثال، لن يبدأ مكون `Playlists` في جلب البيانات إلا بعد أن ينتهي مكون `Artist` من جلب البيانات لأن `Playlists` يعتمد على خاصية `artistID`:
+
+```tsx filename="app/artist/page.tsx" switcher
+// ...
+
+async function Playlists({ artistID }: { artistID: string }) {
+  // انتظر قوائم التشغيل
+  const playlists = await getArtistPlaylists(artistID)
+
+  return (
+    <ul>
+      {playlists.map((playlist) => (
+        <li key={playlist.id}>{playlist.name}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default async function Page({
+  params: { username },
+}: {
+  params: { username: string }
+}) {
+  // انتظر الفنان
+  const artist = await getArtist(username)
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Playlists artistID={artist.id} />
+      </Suspense>
+    </>
+  )
+}
+```
+
+```jsx filename="app/artist/page.js" switcher
+// ...
+
+async function Playlists({ artistID }) {
+  // انتظر قوائم التشغيل
+  const playlists = await getArtistPlaylists(artistID)
+
+  return (
+    <ul>
+      {playlists.map((playlist) => (
+        <li key={playlist.id}>{playlist.name}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default async function Page({ params: { username } }) {
+  // انتظر الفنان
+  const artist = await getArtist(username)
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Playlists artistID={artist.id} />
+      </Suspense>
+    </>
+  )
+}
+```
+
+في مثل هذه الحالات، يمكنك استخدام [`loading.js`](/docs/app/building-your-application/routing/loading-ui-and-streaming) (لقطاعات المسار) أو [React `<Suspense>`](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) (للمكونات المتداخلة) لعرض حالة تحميل فورية بينما يقوم React ببث النتيجة.
+
+هذا سيمنع حظر المسار بالكامل بسبب جلب البيانات، وسيتمكن المستخدم من التفاعل مع أجزاء الصفحة غير المحظورة.
+
+> **طلبات البيانات الحاجزة:**
+>
+> نهج بديل لمنع الشلالات هو جلب البيانات عالميًا، في جذر تطبيقك، ولكن هذا سيحجب عرض جميع قطاعات المسار تحته حتى تنتهي البيانات من التحميل. يمكن وصف هذا بـ "الكل أو لا شيء" في جلب البيانات. إما أن يكون لديك جميع البيانات لصفحتك أو تطبيقك، أو لا شيء.
+>
+> أي طلبات `fetch` مع `await` ستحجب العرض وجلب البيانات للشجرة بأكملها تحتها، ما لم يتم تغليفها في حدود `<Suspense>` أو استخدام `loading.js`. نهج آخر هو استخدام [جلب البيانات المتوازي](#parallel-data-fetching) أو [نمط التحميل المسبق](#preloading-data).
+
+#### جلب البيانات المتوازي
+
+لجلب البيانات بشكل متوازي، يمكنك بدء الطلبات بسرعة عن طريق تعريفها خارج المكونات التي تستخدم البيانات، ثم استدعائها من داخل المكون. هذا يوفر الوقت عن طريق بدء كلا الطلبين في نفس الوقت، ولكن لن يرى المستخدم النتيجة المعروضة حتى يتم حل كلا الوعدين.
+
+في المثال أدناه، يتم تعريف الدالتين `getArtist` و`getArtistAlbums` خارج مكون `Page`، ثم يتم استدعاؤهما داخل المكون، وننتظر حل كلا الوعدين:
+
+```tsx filename="app/artist/[username]/page.tsx" switcher
+import Albums from './albums'
+
+async function getArtist(username: string) {
+  const res = await fetch(`https://api.example.com/artist/${username}`)
+  return res.json()
+}
+
+async function getArtistAlbums(username: string) {
+  const res = await fetch(`https://api.example.com/artist/${username}/albums`)
+  return res.json()
+}
+
+export default async function Page({
+  params: { username },
+}: {
+  params: { username: string }
+}) {
+  // ابدأ كلا الطلبين في نفس الوقت
+  const artistData = getArtist(username)
+  const albumsData = getArtistAlbums(username)
+
+  // انتظر حل الوعدين
+  const [artist, albums] = await Promise.all([artistData, albumsData])
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Albums list={albums}></Albums>
+    </>
+  )
+}
+```
+
+```jsx filename="app/artist/[username]/page.js" switcher
+import Albums from './albums'
+
+async function getArtist(username) {
+  const res = await fetch(`https://api.example.com/artist/${username}`)
+  return res.json()
+}
+
+async function getArtistAlbums(username) {
+  const res = await fetch(`https://api.example.com/artist/${username}/albums`)
+  return res.json()
+}
+
+export default async function Page({ params: { username } }) {
+  // ابدأ كلا الطلبين في نفس الوقت
+  const artistData = getArtist(username)
+  const albumsData = getArtistAlbums(username)
+
+  // انتظر حل الوعدين
+  const [artist, albums] = await Promise.all([artistData, albumsData])
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Albums list={albums}></Albums>
+    </>
+  )
+}
+```
+
+لتحسين تجربة المستخدم، يمكنك إضافة [حدود Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming) لتقسيم عمل العرض وإظهار جزء من النتيجة في أسرع وقت ممكن.
+
+### التحميل المسبق للبيانات
+
+طريقة أخرى لمنع الشلالات هي استخدام نمط التحميل المسبق. يمكنك إنشاء دالة `preload` اختيارية لتحسين جلب البيانات المتوازي. مع هذا النهج، لا تحتاج إلى تمرير الوعود كخصائص. يمكن أن يكون لدالة `preload` أي اسم لأنها نمط وليس واجهة برمجة تطبيقات.
+
+```tsx filename="components/Item.tsx" switcher
+import { getItem } from '@/utils/get-item'
+
+export const preload = (id: string) => {
+  // void تقيم التعبير المعطى وتعيد undefined
+  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
+  void getItem(id)
+}
+export default async function Item({ id }: { id: string }) {
+  const result = await getItem(id)
+  // ...
+}
+```
+
+```jsx filename="components/Item.js" switcher
+import { getItem } from '@/utils/get-item'
+
+export const preload = (id) => {
+  // void تقيم التعبير المعطى وتعيد undefined
+  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
+  void getItem(id)
+}
+export default async function Item({ id }) {
+  const result = await getItem(id)
+  // ...
+}
+```
+
+```tsx filename="app/item/[id]/page.tsx" switcher
+import Item, { preload, checkIsAvailable } from '@/components/Item'
+
+export default async function Page({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  // بدء تحميل بيانات العنصر
+  preload(id)
+  // تنفيذ مهمة غير متزامنة أخرى
+  const isAvailable = await checkIsAvailable()
+
+  return isAvailable ? <Item id={id} /> : null
+}
+```
+
+```jsx filename="app/item/[id]/page.js" switcher
+import Item, { preload, checkIsAvailable } from '@/components/Item'
+
+export default async function Page({ params: { id } }) {
+  // بدء تحميل بيانات العنصر
+  preload(id)
+  // تنفيذ مهمة غير متزامنة أخرى
+  const isAvailable = await checkIsAvailable()
+
+  return isAvailable ? <Item id={id} /> : null
+}
+```
+
+### استخدام React `cache`، `server-only`، ونمط التحميل المسبق
+
+يمكنك الجمع بين دالة `cache`، ونمط `preload`، وحزمة `server-only` لإنشاء أداة جلب بيانات يمكن استخدامها في جميع أنحاء تطبيقك.
+
+```ts filename="utils/get-item.ts" switcher
+import { cache } from 'react'
+import 'server-only'
+
+export const preload = (id: string) => {
+  void getItem(id)
+}
+
+export const getItem = cache(async (id: string) => {
+  // ...
+})
+```
+
+```js filename="utils/get-item.js" switcher
+import { cache } from 'react'
+import 'server-only'
+
+export const preload = (id) => {
+  void getItem(id)
+}
+
+export const getItem = cache(async (id) => {
+  // ...
+})
+```
+
+مع هذا النهج، يمكنك جلب البيانات بسرعة، تخزين الردود مؤقتًا، وضمان أن جلب البيانات هذا [يحدث فقط على الخادم](/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment).
+
+يمكن استخدام صادرات `utils/get-item` بواسطة التخطيطات، الصفحات، أو المكونات الأخرى لمنحها التحكم في وقت جلب بيانات العنصر.
+
+> **جيد أن تعرف:**
+>
+> - نوصي باستخدام حزمة [`server-only`](/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment) للتأكد من عدم استخدام دوال جلب بيانات الخادم على العميل أبدًا.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx
new file mode 100644
index 00000000..10c2d282
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx
@@ -0,0 +1,983 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:05.578Z
+title: النماذج والتحولات (Forms and Mutations)
+nav_title: النماذج والتحولات (Forms and Mutations)
+description: تعلم كيفية التعامل مع إرسال النماذج وتحولات البيانات باستخدام Next.js.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب أن لا يكون مغلفًا بمكون. */}
+
+<PagesOnly>
+
+تمكنك النماذج من إنشاء وتحديث البيانات في تطبيقات الويب. يوفر Next.js طريقة قوية للتعامل مع إرسال النماذج وتحولات البيانات باستخدام **مسارات API (API Routes)**.
+
+> **معلومة مفيدة:**
+>
+> - سنوصي قريبًا [بتبني تدريجي](/docs/app/building-your-application/upgrading/app-router-migration) لموجه التطبيق واستخدام [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/forms-and-mutations#how-server-actions-work) للتعامل مع إرسال النماذج وتحولات البيانات. تسمح لك إجراءات الخادم بتعريف دوال غير متزامنة يمكن استدعاؤها مباشرة من مكوناتك، دون الحاجة إلى إنشاء مسار API يدويًا.
+> - مسارات API [لا تحدد رؤوس CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)، مما يعني أنها تعمل فقط من نفس المصدر افتراضيًا.
+> - نظرًا لأن مسارات API تعمل على الخادم، يمكننا استخدام قيم حساسة (مثل مفاتيح API) عبر [متغيرات البيئة (Environment Variables)](/docs/pages/building-your-application/configuring/environment-variables) دون تعريضها للعميل. هذا أمر حاسم لأمان تطبيقك.
+
+</PagesOnly>
+
+<AppOnly>
+
+تمكنك النماذج من إنشاء وتحديث البيانات في تطبيقات الويب. يوفر Next.js طريقة قوية للتعامل مع إرسال النماذج وتحولات البيانات باستخدام **إجراءات الخادم (Server Actions)**.
+
+<details>
+  <summary>أمثلة</summary>
+
+- [نموذج بحالات التحميل والخطأ](https://github.com/vercel/next.js/tree/canary/examples/next-forms)
+
+</details>
+
+## كيفية عمل إجراءات الخادم
+
+مع إجراءات الخادم، لا تحتاج إلى إنشاء نقاط نهاية API يدويًا. بدلاً من ذلك، يمكنك تعريف دوال غير متزامنة يمكن استدعاؤها مباشرة من مكوناتك.
+
+> **🎥 شاهد:** تعلم المزيد عن النماذج والتحولات مع موجه التطبيق → [YouTube (10 دقائق)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
+
+يمكن تعريف إجراءات الخادم في مكونات الخادم أو استدعاؤها من مكونات العميل. تعريف الإجراء في مكون الخادم يسمح للنموذج بالعمل بدون JavaScript، مما يوفر تحسينًا تدريجيًا.
+
+قم بتمكين إجراءات الخادم في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    serverActions: true,
+  },
+}
+```
+
+> **معلومة مفيدة:**
+>
+> - يمكن للنماذج التي تستدعي إجراءات الخادم من مكونات الخادم أن تعمل بدون JavaScript.
+> - النماذج التي تستدعي إجراءات الخادم من مكونات العميل ستصطف عمليات الإرسال إذا لم يتم تحميل JavaScript بعد، مع إعطاء الأولوية لترطيب العميل.
+> - ترث إجراءات الخادم [وقت التشغيل (runtime)](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes) من الصفحة أو التخطيط الذي تستخدمه.
+> - تعمل إجراءات الخادم مع المسارات الثابتة بالكامل (بما في ذلك إعادة التحقق من البيانات مع ISR).
+
+## إعادة التحقق من البيانات المخزنة مؤقتًا
+
+تتكامل إجراءات الخادم بعمق مع بنية [التخزين المؤقت وإعادة التحقق (caching and revalidation)](/docs/app/building-your-application/caching) في Next.js. عند إرسال نموذج، يمكن لإجراء الخادم تحديث البيانات المخزنة مؤقتًا وإعادة التحقق من أي مفاتيح تخزين مؤقت يجب تغييرها.
+
+بدلاً من أن تكون محدودة بنموذج واحد لكل مسار كما في التطبيقات التقليدية، تمكنك إجراءات الخادم من وجود إجراءات متعددة لكل مسار. علاوة على ذلك، لا يحتاج المتصفح إلى التحديث عند إرسال النموذج. في رحلة شبكة واحدة، يمكن لـ Next.js إرجاع كل من واجهة المستخدم المحدثة والبيانات المنعشة.
+
+عرض الأمثلة أدناه لـ [إعادة التحقق من البيانات من إجراءات الخادم](#revalidating-data).
+
+</AppOnly>
+
+## أمثلة
+
+### نماذج الخادم فقط
+
+<PagesOnly>
+
+مع موجه الصفحات، تحتاج إلى إنشاء نقاط نهاية API يدويًا للتعامل مع تحويل البيانات على الخادم بشكل آمن.
+
+```ts filename="pages/api/submit.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const data = req.body
+  const id = await createItem(data)
+  res.status(200).json({ id })
+}
+```
+
+```js filename="pages/api/submit.js" switcher
+export default function handler(req, res) {
+  const data = req.body
+  const id = await createItem(data)
+  res.status(200).json({ id })
+}
+```
+
+ثم استدعاء مسار API من العميل مع معالج الأحداث:
+
+```tsx filename="pages/index.tsx" switcher
+import { FormEvent } from 'react'
+
+export default function Page() {
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const formData = new FormData(event.currentTarget)
+    const response = await fetch('/api/submit', {
+      method: 'POST',
+      body: formData,
+    })
+
+    // التعامل مع الاستجابة إذا لزم الأمر
+    const data = await response.json()
+    // ...
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit">إرسال</button>
+    </form>
+  )
+}
+```
+
+```jsx filename="pages/index.jsx" switcher
+export default function Page() {
+  async function onSubmit(event) {
+    event.preventDefault()
+
+    const formData = new FormData(event.target)
+    const response = await fetch('/api/submit', {
+      method: 'POST',
+      body: formData,
+    })
+
+    // التعامل مع الاستجابة إذا لزم الأمر
+    const data = await response.json()
+    // ...
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit">إرسال</button>
+    </form>
+  )
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+لإنشاء نموذج خادم فقط، قم بتعريف إجراء الخادم في مكون الخادم. يمكن تعريف الإجراء إما مضمنًا مع التوجيه `"use server"` في أعلى الدالة، أو في ملف منفصل مع التوجيه في أعلى الملف.
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  async function create(formData: FormData) {
+    'use server'
+
+    // تحويل البيانات
+    // إعادة التحقق من التخزين المؤقت
+  }
+
+  return <form action={create}>...</form>
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+export default function Page() {
+  async function create(formData) {
+    'use server'
+
+    // تحويل البيانات
+    // إعادة التحقق من التخزين المؤقت
+  }
+
+  return <form action={create}>...</form>
+}
+```
+
+> **معلومة مفيدة**: يأخذ `<form action={create}>` نوع البيانات [FormData](https://developer.mozilla.org/docs/Web/API/FormData/FormData). في المثال أعلاه، يمكن الوصول إلى FormData المرسل عبر [`form`](https://developer.mozilla.org/docs/Web/HTML/Element/form) HTML في إجراء الخادم `create`.
+
+### إعادة التحقق من البيانات
+
+تسمح لك إجراءات الخادم بإبطال [تخزين Next.js المؤقت (Next.js Cache)](/docs/app/building-your-application/caching) عند الطلب. يمكنك إبطال جزء مسار كامل باستخدام [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export default async function submit() {
+  await submitForm()
+  revalidatePath('/')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export default async function submit() {
+  await submitForm()
+  revalidatePath('/')
+}
+```
+
+أو إبطال جلب بيانات محدد باستخدام علامة تخزين مؤقت مع [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export default async function submit() {
+  await addPost()
+  revalidateTag('posts')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export default async function submit() {
+  await addPost()
+  revalidateTag('posts')
+}
+```
+
+</AppOnly>
+
+### إعادة التوجيه
+
+<PagesOnly>
+
+إذا كنت ترغب في إعادة توجيه المستخدم إلى مسار مختلف بعد التحويل، يمكنك [`redirect`](/docs/pages/building-your-application/routing/api-routes#response-helpers) إلى أي عنوان URL مطلق أو نسبي:
+
+```ts filename="pages/api/submit.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const id = await addPost()
+  res.redirect(307, `/post/${id}`)
+}
+```
+
+```js filename="pages/api/submit.js" switcher
+export default async function handler(req, res) {
+  const id = await addPost()
+  res.redirect(307, `/post/${id}`)
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+إذا كنت ترغب في إعادة توجيه المستخدم إلى مسار مختلف بعد اكتمال إجراء الخادم، يمكنك استخدام [`redirect`](/docs/app/api-reference/functions/redirect) وأي عنوان URL مطلق أو نسبي:
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+import { revalidateTag } from 'next/cache'
+
+export default async function submit() {
+  const id = await addPost()
+  revalidateTag('posts') // تحديث المشاركات المخزنة مؤقتًا
+  redirect(`/post/${id}`) // الانتقال إلى المسار الجديد
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+import { revalidateTag } from 'next/cache'
+
+export default async function submit() {
+  const id = await addPost()
+  revalidateTag('posts') // تحديث المشاركات المخزنة مؤقتًا
+  redirect(`/post/${id}`) // الانتقال إلى المسار الجديد
+}
+```
+
+</AppOnly>
+
+### التحقق من صحة النموذج
+
+نوصي باستخدام التحقق من صحة HTML مثل `required` و `type="email"` للتحقق الأساسي من صحة النموذج.
+
+للتحقق من صحة الخادم الأكثر تقدمًا، استخدم مكتبة تحقق من المخططات مثل [zod](https://zod.dev/) للتحقق من هيكل بيانات النموذج المحللة:
+
+<PagesOnly>
+
+```ts filename="pages/api/submit.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { z } from 'zod'
+
+const schema = z.object({
+  // ...
+})
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const parsed = schema.parse(req.body)
+  // ...
+}
+```
+
+```js filename="pages/api/submit.js" switcher
+import { z } from 'zod'
+
+const schema = z.object({
+  // ...
+})
+
+export default async function handler(req, res) {
+  const parsed = schema.parse(req.body)
+  // ...
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```tsx filename="app/actions.ts" switcher
+import { z } from 'zod'
+
+const schema = z.object({
+  // ...
+})
+
+export default async function submit(formData: FormData) {
+  const parsed = schema.parse({
+    id: formData.get('id'),
+  })
+  // ...
+}
+```
+
+```jsx filename="app/actions.js" switcher
+import { z } from 'zod'
+
+const schema = z.object({
+  // ...
+})
+
+export default async function submit(formData) {
+  const parsed = schema.parse({
+    id: formData.get('id'),
+  })
+  // ...
+}
+```
+
+</AppOnly>
+
+### عرض حالة التحميل
+
+<AppOnly>
+
+استخدم خطاف `useFormStatus` لعرض حالة التحميل عند إرسال نموذج على الخادم. يمكن استخدام خطاف `useFormStatus` فقط كعنصر فرعي لعنصر `form` يستخدم إجراء خادم.
+
+على سبيل المثال، زر الإرسال التالي:
+
+```tsx filename="app/submit-button.tsx" switcher
+'use client'
+
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+
+export function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button type="submit" aria-disabled={pending}>
+      إضافة
+    </button>
+  )
+}
+```
+
+```jsx filename="app/submit-button.jsx" switcher
+'use client'
+
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+
+export function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button type="submit" aria-disabled={pending}>
+      إضافة
+    </button>
+  )
+}
+```
+
+يمكن بعد ذلك استخدام `<SubmitButton />` في نموذج مع إجراء خادم:
+
+```tsx filename="app/page.tsx" switcher
+import { SubmitButton } from '@/app/submit-button'
+
+export default async function Home() {
+  return (
+    <form action={...}>
+      <input type="text" name="field-name" />
+      <SubmitButton />
+    </form>
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+import { SubmitButton } from '@/app/submit-button'
+
+export default async function Home() {
+  return (
+    <form action={...}>
+      <input type="text" name="field-name" />
+      <SubmitButton />
+    </form>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+يمكنك استخدام حالة React لعرض حالة التحميل عند إرسال نموذج على الخادم:
+
+```tsx filename="pages/index.tsx" switcher
+import React, { useState, FormEvent } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsLoading(true) // تعيين التحميل إلى true عند بدء الطلب
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      // التعامل مع الاستجابة إذا لزم الأمر
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // التعامل مع الخطأ إذا لزم الأمر
+      console.error(error)
+    } finally {
+      setIsLoading(false) // تعيين التحميل إلى false عند اكتمال الطلب
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit" disabled={isLoading}>
+        {isLoading ? 'جاري التحميل...' : 'إرسال'}
+      </button>
+    </form>
+  )
+}
+```
+
+```jsx filename="pages/index.jsx" switcher
+import React, { useState } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(false)
+
+  async function onSubmit(event) {
+    event.preventDefault()
+    setIsLoading(true) // تعيين التحميل إلى true عند بدء الطلب
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      // التعامل مع الاستجابة إذا لزم الأمر
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // التعامل مع الخطأ إذا لزم الأمر
+      console.error(error)
+    } finally {
+      setIsLoading(false) // تعيين التحميل إلى false عند اكتمال الطلب
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit" disabled={isLoading}>
+        {isLoading ? 'جاري التحميل...' : 'إرسال'}
+      </button>
+    </form>
+  )
+}
+```
+
+</PagesOnly>
+
+### معالجة الأخطاء
+
+<AppOnly>
+
+يمكن لإجراءات الخادم (Server Actions) أيضًا إرجاع [كائنات قابلة للتسلسلة](https://developer.mozilla.org/docs/Glossary/Serialization). على سبيل المثال، قد يعالج إجراء الخادم الخاص بك الأخطاء الناتجة عن إنشاء عنصر جديد:
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+export async function createTodo(prevState: any, formData: FormData) {
+  try {
+    await createItem(formData.get('todo'))
+    return revalidatePath('/')
+  } catch (e) {
+    return { message: 'Failed to create' }
+  }
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+export async function createTodo(prevState, formData) {
+  try {
+    await createItem(formData.get('todo'))
+    return revalidatePath('/')
+  } catch (e) {
+    return { message: 'Failed to create' }
+  }
+}
+```
+
+ثم، من مكون العميل (Client Component)، يمكنك قراءة هذه القيمة وعرض رسالة خطأ.
+
+```tsx filename="app/add-form.tsx" switcher
+'use client'
+
+import { experimental_useFormState as useFormState } from 'react-dom'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { createTodo } from '@/app/actions'
+
+const initialState = {
+  message: null,
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button type="submit" aria-disabled={pending}>
+      Add
+    </button>
+  )
+}
+
+export function AddForm() {
+  const [state, formAction] = useFormState(createTodo, initialState)
+
+  return (
+    <form action={formAction}>
+      <label htmlFor="todo">Enter Task</label>
+      <input type="text" id="todo" name="todo" required />
+      <SubmitButton />
+      <p aria-live="polite" className="sr-only">
+        {state?.message}
+      </p>
+    </form>
+  )
+}
+```
+
+```jsx filename="app/add-form.jsx" switcher
+'use client'
+
+import { experimental_useFormState as useFormState } from 'react-dom'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { createTodo } from '@/app/actions'
+
+const initialState = {
+  message: null,
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button type="submit" aria-disabled={pending}>
+      Add
+    </button>
+  )
+}
+
+export function AddForm() {
+  const [state, formAction] = useFormState(createTodo, initialState)
+
+  return (
+    <form action={formAction}>
+      <label htmlFor="todo">Enter Task</label>
+      <input type="text" id="todo" name="todo" required />
+      <SubmitButton />
+      <p aria-live="polite" className="sr-only">
+        {state?.message}
+      </p>
+    </form>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+يمكنك استخدام حالة (state) React لعرض رسالة خطأ عند فشل إرسال النموذج:
+
+```tsx filename="pages/index.tsx" switcher
+import React, { useState, FormEvent } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsLoading(true)
+    setError(null) // Clear previous errors when a new request starts
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to submit the data. Please try again.')
+      }
+
+      // Handle response if necessary
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // Capture the error message to display to the user
+      setError(error.message)
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+      <form onSubmit={onSubmit}>
+        <input type="text" name="name" />
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'Loading...' : 'Submit'}
+        </button>
+      </form>
+    </div>
+  )
+}
+```
+
+```jsx filename="pages/index.jsx" switcher
+import React, { useState } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  async function onSubmit(event) {
+    event.preventDefault()
+    setIsLoading(true)
+    setError(null) // Clear previous errors when a new request starts
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to submit the data. Please try again.')
+      }
+
+      // Handle response if necessary
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // Capture the error message to display to the user
+      setError(error.message)
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+      <form onSubmit={onSubmit}>
+        <input type="text" name="name" />
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'Loading...' : 'Submit'}
+        </button>
+      </form>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+### التحديثات التفاؤلية (Optimistic Updates)
+
+استخدم `useOptimistic` لتحديث واجهة المستخدم بشكل تفاؤلي قبل انتهاء إجراء الخادم، بدلاً من انتظار الرد:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import { experimental_useOptimistic as useOptimistic } from 'react'
+import { send } from './actions'
+
+type Message = {
+  message: string
+}
+
+export function Thread({ messages }: { messages: Message[] }) {
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic<Message[]>(
+    messages,
+    (state: Message[], newMessage: string) => [
+      ...state,
+      { message: newMessage },
+    ]
+  )
+
+  return (
+    <div>
+      {optimisticMessages.map((m, k) => (
+        <div key={k}>{m.message}</div>
+      ))}
+      <form
+        action={async (formData: FormData) => {
+          const message = formData.get('message')
+          addOptimisticMessage(message)
+          await send(message)
+        }}
+      >
+        <input type="text" name="message" />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+'use client'
+
+import { experimental_useOptimistic as useOptimistic } from 'react'
+import { send } from './actions'
+
+export function Thread({ messages }) {
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
+    messages,
+    (state, newMessage) => [...state, { message: newMessage }]
+  )
+
+  return (
+    <div>
+      {optimisticMessages.map((m) => (
+        <div>{m.message}</div>
+      ))}
+      <form
+        action={async (formData) => {
+          const message = formData.get('message')
+          addOptimisticMessage(message)
+          await send(message)
+        }}
+      >
+        <input type="text" name="message" />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  )
+}
+```
+
+</AppOnly>
+
+### تعيين ملفات تعريف الارتباط (Cookies)
+
+<PagesOnly>
+
+يمكنك تعيين ملفات تعريف الارتباط داخل مسار API باستخدام طريقة `setHeader` على الاستجابة:
+
+```ts filename="pages/api/cookie.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
+  res.status(200).send('Cookie has been set.')
+}
+```
+
+```js filename="pages/api/cookie.js" switcher
+export default async function handler(req, res) {
+  res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
+  res.status(200).send('Cookie has been set.')
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+يمكنك تعيين ملفات تعريف الارتباط داخل إجراء خادم باستخدام دالة [`cookies`](/docs/app/api-reference/functions/cookies):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function create() {
+  const cart = await createCart()
+  cookies().set('cartId', cart.id)
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function create() {
+  const cart = await createCart()
+  cookies().set('cartId', cart.id)
+}
+```
+
+</AppOnly>
+
+### قراءة ملفات تعريف الارتباط (Cookies)
+
+<PagesOnly>
+
+يمكنك قراءة ملفات تعريف الارتباط داخل مسار API باستخدام مساعد الطلب [`cookies`](/docs/pages/building-your-application/routing/api-routes#request-helpers):
+
+```ts filename="pages/api/cookie.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const auth = req.cookies.authorization
+  // ...
+}
+```
+
+```js filename="pages/api/cookie.js" switcher
+export default async function handler(req, res) {
+  const auth = req.cookies.authorization
+  // ...
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+يمكنك قراءة ملفات تعريف الارتباط داخل إجراء خادم باستخدام دالة [`cookies`](/docs/app/api-reference/functions/cookies):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function read() {
+  const auth = cookies().get('authorization')?.value
+  // ...
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function read() {
+  const auth = cookies().get('authorization')?.value
+  // ...
+}
+```
+
+</AppOnly>
+
+### حذف ملفات تعريف الارتباط (Cookies)
+
+<PagesOnly>
+
+يمكنك حذف ملفات تعريف الارتباط داخل مسار API باستخدام طريقة `setHeader` على الاستجابة:
+
+```ts filename="pages/api/cookie.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
+  res.status(200).send('Cookie has been deleted.')
+}
+```
+
+```js filename="pages/api/cookie.js" switcher
+export default async function handler(req, res) {
+  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
+  res.status(200).send('Cookie has been deleted.')
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+يمكنك حذف ملفات تعريف الارتباط داخل إجراء خادم باستخدام دالة [`cookies`](/docs/app/api-reference/functions/cookies):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function delete() {
+  cookies().delete('name')
+  // ...
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function delete() {
+  cookies().delete('name')
+  // ...
+}
+```
+
+راجع [أمثلة إضافية](/docs/app/api-reference/functions/cookies#deleting-cookies) لحذف ملفات تعريف الارتباط من إجراءات الخادم.
+
+</AppOnly>
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/index.mdx
new file mode 100644
index 00000000..7683978d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/02-data-fetching/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:08.613Z
+title: جلب البيانات
+description: تعلم كيفية جلب البيانات، تخزينها مؤقتًا، إعادة التحقق منها، وتحويرها باستخدام Next.js.
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/01-server-components.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/01-server-components.mdx
new file mode 100644
index 00000000..63f8891c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/01-server-components.mdx
@@ -0,0 +1,138 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:09:18.981Z
+title: مكونات الخادم (Server Components)
+description: تعلم كيفية استخدام مكونات React من جانب الخادم (Server Components) لعرض أجزاء من تطبيقك على الخادم.
+related:
+  description: تعرف على كيفية تخزين Next.js للبيانات ونتائج العرض الثابت.
+  links:
+    - app/building-your-application/caching
+---
+
+تسمح لك مكونات الخادم (Server Components) بكتابة واجهة مستخدم يمكن عرضها وتخزينها اختياريًا على الخادم. في Next.js، يتم تقسيم عمل العرض بشكل أكبر حسب أجزاء المسار لتمكين البث (Streaming) والعرض الجزئي، وهناك ثلاث استراتيجيات مختلفة لعرض الخادم:
+
+- [العرض الثابت (Static Rendering)](#static-rendering-default)
+- [العرض الديناميكي (Dynamic Rendering)](#dynamic-rendering)
+- [البث (Streaming)](#streaming)
+
+ستتعرف في هذه الصفحة على كيفية عمل مكونات الخادم، ومتى يمكنك استخدامها، واستراتيجيات عرض الخادم المختلفة.
+
+## فوائد العرض على الخادم
+
+هناك عدة فوائد لعملية العرض على الخادم، بما في ذلك:
+
+- **جلب البيانات (Data Fetching)**: تسمح لك مكونات الخادم بنقل جلب البيانات إلى الخادم، أقرب إلى مصدر البيانات الخاص بك. يمكن أن يحسن هذا الأداء عن طريق تقليل الوقت المستغرق لجلب البيانات اللازمة للعرض، وعدد الطلبات التي يحتاج العميل إلى إجرائها.
+- **الأمان (Security)**: تتيح لك مكونات الخادم الاحتفاظ بالبيانات الحساسة والمنطق على الخادم، مثل الرموز (Tokens) ومفاتيح API، دون خطر الكشف عنها للعميل.
+- **التخزين المؤقت (Caching)**: من خلال العرض على الخادم، يمكن تخزين النتيجة وإعادة استخدامها في الطلبات اللاحقة وعبر المستخدمين. يمكن أن يحسن هذا الأداء ويقلل التكلفة عن طريق تقليل كمية العرض وجلب البيانات المطلوبة في كل طلب.
+- **حجم الحزمة (Bundle Sizes)**: تسمح لك مكونات الخادم بالاحتفاظ بالتبعيات الكبيرة التي كانت تؤثر سابقًا على حجم حزمة JavaScript على العميل. هذا مفيد للمستخدمين الذين لديهم اتصال إنترنت أبطأ أو أجهزة أقل قوة، حيث لا يتعين على العميل تنزيل وتحليل وتنفيذ أي JavaScript لمكونات الخادم.
+- **تحميل الصفحة الأولي و [الرسم الأولي للمحتوى (FCP)](https://web.dev/fcp/)**: على الخادم، يمكننا إنشاء HTML للسماح للمستخدمين بمشاهدة الصفحة على الفور، دون انتظار قيام العميل بتنزيل وتحليل وتنفيذ JavaScript المطلوب لعرض الصفحة.
+- **تحسين محركات البحث (SEO) وإمكانية المشاركة على الشبكات الاجتماعية**: يمكن لمحركات البحث استخدام HTML المعروض لفهرسة صفحاتك، ويمكن للروبوتات الاجتماعية إنشاء معاينات بطاقات اجتماعية لصفحاتك.
+- **البث (Streaming)**: تتيح لك مكونات الخادم تقسيم عمل العرض إلى أجزاء وبثها إلى العميل عندما تصبح جاهزة. هذا يسمح للمستخدم برؤية أجزاء من الصفحة في وقت مبكر دون الحاجة إلى انتظار اكتمال عرض الصفحة بأكملها على الخادم.
+
+## استخدام مكونات الخادم في Next.js
+
+بشكل افتراضي، يستخدم Next.js مكونات الخادم. هذا يسمح لك بتنفيذ عرض الخادم تلقائيًا دون أي تكوين إضافي، ويمكنك اختيار استخدام مكونات العميل (Client Components) عند الحاجة، راجع [مكونات العميل](/docs/app/building-your-application/rendering/client-components).
+
+## كيف يتم عرض مكونات الخادم؟
+
+على الخادم، يستخدم Next.js واجهات برمجة تطبيقات React لتنسيق العرض. يتم تقسيم عمل العرض إلى أجزاء: حسب أجزاء المسار الفردية و [حدود Suspense](https://react.dev/reference/react/Suspense).
+
+يتم عرض كل جزء على خطوتين:
+
+1. تقوم React بعرض مكونات الخادم إلى تنسيق بيانات خاص يسمى **حمل مكون خادم React (RSC Payload)**.
+2. يستخدم Next.js حمل RSC وتعليمات JavaScript لمكون العميل لعرض **HTML** على الخادم.
+
+{/* رسم توضيحي للعرض */}
+
+ثم على العميل:
+
+1. يتم استخدام HTML لإظهار معاينة سريعة غير تفاعلية للمسار - هذا لتحميل الصفحة الأولي فقط.
+2. يتم استخدام حمل مكونات خادم React لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
+3. يتم استخدام تعليمات JavaScript لـ [ترطيب (Hydrate)](https://react.dev/reference/react-dom/client/hydrateRoot) مكونات العميل وجعل التطبيق تفاعليًا.
+
+> **ما هو حمل مكون خادم React (RSC)؟**
+>
+> حمل RSC هو تمثيل ثنائي مضغوط لشجرة مكونات خادم React المعروضة. يتم استخدامه بواسطة React على العميل لتحديث DOM المتصفح. يحتوي حمل RSC على:
+>
+> - نتيجة عرض مكونات الخادم
+> - عناصر نائبة لمكان عرض مكونات العميل ومراجع لملفات JavaScript الخاصة بها
+> - أي خصائص (props) تم تمريرها من مكون خادم إلى مكون عميل
+
+## استراتيجيات عرض الخادم
+
+هناك ثلاثة أنواع فرعية لعرض الخادم: الثابت، الديناميكي، والبث.
+
+### العرض الثابت (الافتراضي)
+
+{/* رسم توضيحي للعرض الثابت */}
+
+مع العرض الثابت، يتم عرض المسارات في **وقت البناء**، أو في الخلفية بعد [إعادة التحقق من البيانات](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data). يتم تخزين النتيجة ويمكن دفعها إلى [شبكة توصيل المحتوى (CDN)](https://developer.mozilla.org/docs/Glossary/CDN). تتيح لك هذه التحسينات مشاركة نتيجة عمل العرض بين المستخدمين وطلبات الخادم.
+
+العرض الثابت مفيد عندما يحتوي المسار على بيانات غير مخصصة للمستخدم ويمكن معرفتها في وقت البناء، مثل مقالة مدونة ثابتة أو صفحة منتج.
+
+### العرض الديناميكي
+
+{/* رسم توضيحي للعرض الديناميكي */}
+
+مع العرض الديناميكي، يتم عرض المسارات لكل مستخدم في **وقت الطلب**.
+
+العرض الديناميكي مفيد عندما يحتوي المسار على بيانات مخصصة للمستخدم أو معلومات لا يمكن معرفتها إلا في وقت الطلب، مثل ملفات تعريف الارتباط (Cookies) أو معلمات البحث في URL.
+
+> **المسارات الديناميكية مع البيانات المخزنة مؤقتًا**
+>
+> في معظم المواقع، لا تكون المسارات ثابتة بالكامل أو ديناميكية بالكامل - إنها سلسلة متصلة. على سبيل المثال، يمكن أن يكون لديك صفحة تجارة إلكترونية تستخدم بيانات منتج مخزنة مؤقتًا يتم إعادة التحقق منها على فترات، ولكن لديها أيضًا بيانات عملاء غير مخزنة مؤقتًا ومخصصة.
+>
+> في Next.js، يمكن أن يكون لديك مسارات معروضة ديناميكيًا تحتوي على بيانات مخزنة مؤقتًا وغير مخزنة مؤقتًا. هذا لأن حمل RSC والبيانات يتم تخزينها بشكل منفصل. هذا يسمح لك باختيار العرض الديناميكي دون القلق بشأن تأثير الأداء لجلب جميع البيانات في وقت الطلب.
+>
+> تعرف على المزيد حول [تخزين المسار الكامل](/docs/app/building-your-application/caching#full-route-cache) و [تخزين البيانات](/docs/app/building-your-application/caching#data-cache).
+
+#### التبديل إلى العرض الديناميكي
+
+أثناء العرض، إذا تم اكتشاف [وظيفة ديناميكية](#dynamic-functions) أو [طلب بيانات غير مخزن مؤقتًا](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching)، فسيقوم Next.js بالتبديل إلى عرض المسار بالكامل ديناميكيًا. يلخص هذا الجدول كيف تؤثر الوظائف الديناميكية وتخزين البيانات على ما إذا كان المسار معروضًا بشكل ثابت أو ديناميكي:
+
+| الوظائف الديناميكية | البيانات       | المسار                |
+| ----------------- | ---------- | -------------------- |
+| لا                | مخزنة مؤقتًا     | معروض بشكل ثابت  |
+| نعم               | مخزنة مؤقتًا     | معروض ديناميكيًا |
+| لا                | غير مخزنة مؤقتًا | معروض ديناميكيًا |
+| نعم               | غير مخزنة مؤقتًا | معروض ديناميكيًا |
+
+في الجدول أعلاه، لكي يكون المسار ثابتًا بالكامل، يجب تخزين جميع البيانات مؤقتًا. ومع ذلك، يمكن أن يكون لديك مسار معروض ديناميكيًا يستخدم كلاً من جلب البيانات المخزنة وغير المخزنة مؤقتًا.
+
+كمطور، لا تحتاج إلى الاختيار بين العرض الثابت والديناميكي حيث سيختار Next.js تلقائيًا أفضل استراتيجية عرض لكل مسار بناءً على الميزات وواجهات برمجة التطبيقات المستخدمة. بدلاً من ذلك، تختار متى [تخزن أو تعيد التحقق من بيانات محددة](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)، وقد تختار [بث](#streaming) أجزاء من واجهة المستخدم الخاصة بك.
+
+#### الوظائف الديناميكية
+
+تعتمد الوظائف الديناميكية على معلومات لا يمكن معرفتها إلا في وقت الطلب مثل ملفات تعريف الارتباط للمستخدم أو رؤوس الطلبات الحالية أو معلمات البحث في URL. في Next.js، هذه الوظائف الديناميكية هي:
+
+- **[`cookies()`](/docs/app/api-reference/functions/cookies) و [`headers()`](/docs/app/api-reference/functions/headers)**: استخدام هذه في مكون خادم سيؤدي إلى اختيار المسار بالكامل للعرض الديناميكي في وقت الطلب.
+- **[`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)**:
+  - في مكونات العميل، سيتخطى العرض الثابت ويعرض بدلاً من ذلك جميع مكونات العميل حتى الحد الأبسط لـ Suspense على العميل.
+  - نوصي بلف مكون العميل الذي يستخدم `useSearchParams()` في حد `<Suspense/>`. هذا سيسمح لأي مكونات عميل فوقها أن تُعرض بشكل ثابت. [مثال](/docs/app/api-reference/functions/use-search-params#static-rendering).
+- **[`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional)**: استخدام خاصية [الصفحات](/docs/app/api-reference/file-conventions/page) سيؤدي إلى اختيار الصفحة للعرض الديناميكي في وقت الطلب.
+
+استخدام أي من هذه الوظائف سيؤدي إلى اختيار المسار بالكامل للعرض الديناميكي في وقت الطلب.
+
+### البث (Streaming)
+
+<Image
+  alt="رسم توضيحي يظهر التزامن لأجزاء المسار أثناء البث، مع جلب البيانات والعرض والترطيب للأجزاء الفردية."
+  srcLight="/docs/light/sequential-parallel-data-fetching.png"
+  srcDark="/docs/dark/sequential-parallel-data-fetching.png"
+  width="1600"
+  height="525"
+/>
+
+يسمح لك البث بعرض واجهة المستخدم تدريجيًا من الخادم. يتم تقسيم العمل إلى أجزاء وبثها إلى العميل عندما تصبح جاهزة. هذا يسمح للمستخدم برؤية أجزاء من الصفحة على الفور، قبل اكتمال عرض المحتوى بالكامل على الخادم.
+
+<Image
+  alt="رسم توضيحي يظهر صفحة معروضة جزئيًا على العميل، مع واجهة تحميل للأجزاء التي يتم بثها."
+  srcLight="/docs/light/server-rendering-with-streaming.png"
+  srcDark="/docs/dark/server-rendering-with-streaming.png"
+  width="1600"
+  height="785"
+/>
+
+البث مضمن في موجه تطبيق Next.js افتراضيًا. هذا يساعد في تحسين أداء تحميل الصفحة الأولي، وكذلك واجهة المستخدم التي تعتمد على جلب بيانات أبطأ مما قد يعيق عرض المسار بالكامل. على سبيل المثال، التقييمات على صفحة منتج.
+
+يمكنك بدء بث أجزاء المسار باستخدام `loading.js` ومكونات واجهة المستخدم مع [React Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming). راجع قسم [واجهة تحميل وبث](/docs/app/building-your-application/routing/loading-ui-and-streaming) لمزيد من المعلومات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/02-client-components.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/02-client-components.mdx
new file mode 100644
index 00000000..1a640a44
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/02-client-components.mdx
@@ -0,0 +1,108 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:35.131Z
+title: مكونات العميل (Client Components)
+description: تعلم كيفية استخدام مكونات العميل (Client Components) لعرض أجزاء من تطبيقك على جانب العميل.
+---
+
+تسمح لك مكونات العميل (Client Components) بكتابة واجهة مستخدم تفاعلية يمكن عرضها على جانب العميل عند الطلب. في Next.js، يكون عرض جانب العميل **اختياريًا**، مما يعني أنه يجب عليك تحديد المكونات التي يجب أن يعرضها React على العميل بشكل صريح.
+
+ستتعرف في هذه الصفحة على كيفية عمل مكونات العميل، وكيف يتم عرضها، ومتى قد تستخدمها.
+
+## فوائد العرض على جانب العميل
+
+هناك عدة فوائد لعملية العرض على جانب العميل، بما في ذلك:
+
+- **التفاعلية**: يمكن لمكونات العميل استخدام الحالة (state)، والتأثيرات (effects)، ومستمعي الأحداث (event listeners)، مما يعني أنها يمكنها تقديم ردود فعل فورية للمستخدم وتحديث واجهة المستخدم.
+- **واجهات برمجة المتصفح (Browser APIs)**: يمكن لمكونات العميل الوصول إلى واجهات برمجة المتصفح، مثل [تحديد الموقع الجغرافي (geolocation)](https://developer.mozilla.org/docs/Web/API/Geolocation_API) أو [التخزين المحلي (localStorage)](https://developer.mozilla.org/docs/Web/API/Window/localStorage)، مما يسمح لك ببناء واجهة مستخدم لحالات استخدام محددة.
+
+## استخدام مكونات العميل في Next.js
+
+لاستخدام مكونات العميل، يمكنك إضافة توجيه React [`"use client"`](https://react.dev/reference/react/use-client) في أعلى الملف، قبل عمليات الاستيراد.
+
+يستخدم `"use client"` لتعريف [حد فاصل](/docs/app/building-your-application/rendering#network-boundary) بين وحدات مكون الخادم (Server Component) ومكون العميل (Client Component). هذا يعني أنه عند تعريف `"use client"` في ملف، فإن جميع الوحدات الأخرى المستوردة إليه، بما في ذلك المكونات الفرعية، تعتبر جزءًا من حزمة العميل.
+
+```tsx filename="app/counter.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/counter.js" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  )
+}
+```
+
+يظهر الرسم البياني أدناه مكونات متداخلة، حيث يؤدي استخدام `onClick` و `useState` في `toggle.js` إلى حدوث خطأ إذا لم يتم تعريف توجيه `"use client"`. وذلك لأنه افتراضيًا، يتم عرض المكونات على الخادم حيث لا تتوفر هذه الواجهات. من خلال تعريف توجيه `"use client"` في `toggle.js`، يمكنك إخبار React بعرض المكون ومكوناته الفرعية على العميل، حيث تتوفر الواجهات.
+
+<Image
+  alt="توجيه Use Client والحد الفاصل للشبكة"
+  srcLight="/docs/light/use-client-directive.png"
+  srcDark="/docs/dark/use-client-directive.png"
+  width="1600"
+  height="1320"
+/>
+
+> **تعريف نقاط دخول متعددة لـ `use client`**:
+>
+> يمكنك تعريف نقاط دخول متعددة لـ "use client" في شجرة مكونات React. هذا يسمح لك بتقسيم تطبيقك إلى عدة حزم عميل (أو فروع).
+>
+> ومع ذلك، لا يحتاج `"use client"` إلى تعريفه في كل مكون يحتاج إلى العرض على العميل. بمجرد تعريف الحد الفاصل، تعتبر جميع المكونات الفرعية والوحدات المستوردة إليه جزءًا من حزمة العميل.
+
+## كيف يتم عرض مكونات العميل؟
+
+في Next.js، يتم عرض مكونات العميل بشكل مختلف اعتمادًا على ما إذا كان الطلب جزءًا من تحميل صفحة كامل (زيارة أولية لتطبيقك أو إعادة تحميل الصفحة عن طريق تحديث المتصفح) أو تنقل لاحق.
+
+### تحميل صفحة كامل
+
+لتحسين تحميل الصفحة الأولي، سيستخدم Next.js واجهات React لعرض معاينة HTML ثابتة على الخادم لكل من مكونات العميل والخادم. هذا يعني أنه عندما يزور المستخدم تطبيقك لأول مرة، سيرى محتوى الصفحة على الفور، دون الحاجة إلى انتظار تحميل العميل وتحليل وتنفيذ حزمة JavaScript لمكون العميل.
+
+على الخادم:
+
+1. يقوم React بعرض مكونات الخادم في تنسيق بيانات خاص يسمى **حمولة مكون خادم React (RSC Payload)**، والذي يتضمن إشارات إلى مكونات العميل.
+2. يستخدم Next.js حمولة RSC وتعليمات JavaScript لمكون العميل لعرض **HTML** للمسار على الخادم.
+
+ثم على العميل:
+
+1. يتم استخدام HTML لعرض معاينة أولية سريعة غير تفاعلية للمسار على الفور.
+2. تستخدم حمولة مكونات خادم React لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
+3. تستخدم تعليمات JavaScript [لترطيب (hydrate)](https://react.dev/reference/react-dom/client/hydrateRoot) مكونات العميل وجعل واجهتها قابلة للتفاعل.
+
+> **ما هو الترطيب (hydration)؟**
+>
+> الترطيب هو عملية إضافة مستمعي الأحداث إلى DOM، لجعل HTML الثابت تفاعليًا. خلف الكواليس، يتم الترطيب باستخدام واجهة React [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot).
+
+### التنقلات اللاحقة
+
+في التنقلات اللاحقة، يتم عرض مكونات العميل بالكامل على العميل، دون HTML المعروض على الخادم.
+
+هذا يعني أنه يتم تحميل وتحليل حزمة JavaScript لمكون العميل. بمجرد أن تصبح الحزمة جاهزة، سيستخدم React حمولة RSC لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
+
+## العودة إلى بيئة الخادم
+
+في بعض الأحيان، بعد تعريف حد `"use client"` الفاصل، قد ترغب في العودة إلى بيئة الخادم. على سبيل المثال، قد ترغب في تقليل حجم حزمة العميل، أو جلب البيانات على الخادم، أو استخدام واجهة برمجة متاحة فقط على الخادم.
+
+يمكنك الاحتفاظ بالكود على الخادم حتى لو كان نظريًا متداخلًا داخل مكونات العميل عن طريق تبادل مكونات العميل والخادم وإجراءات الخادم. راجع صفحة [أنماط التكوين (Composition Patterns)](/docs/app/building-your-application/rendering/composition-patterns) لمزيد من المعلومات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx
new file mode 100644
index 00000000..76a7da0d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx
@@ -0,0 +1,556 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:10:41.462Z
+title: أنماط تكوين المكونات من جانب الخادم والعميل
+nav_title: أنماط التكوين
+description: أنماط موصى بها لاستخدام مكونات الخادم والعميل.
+---
+
+عند بناء تطبيقات React، ستحتاج إلى تحديد الأجزاء التي يجب عرضها على الخادم أو العميل. تغطي هذه الصفحة بعض أنماط التكوين الموصى بها عند استخدام مكونات الخادم والعميل.
+
+## متى تستخدم مكونات الخادم والعميل؟
+
+إليك ملخصًا سريعًا لحالات الاستخدام المختلفة لمكونات الخادم والعميل:
+
+| ما الذي تريد فعله؟                                                                 | مكون الخادم         | مكون العميل         |
+| ---------------------------------------------------------------------------------- | ------------------- | ------------------- |
+| جلب البيانات                                                                       | <Check size={18} /> | <Cross size={18} /> |
+| الوصول إلى موارد الخلفية (مباشرة)                                                   | <Check size={18} /> | <Cross size={18} /> |
+| الاحتفاظ بمعلومات حساسة على الخادم (رموز الوصول، مفاتيح API، إلخ)                    | <Check size={18} /> | <Cross size={18} /> |
+| الاحتفاظ بتبعيات كبيرة على الخادم / تقليل JavaScript على جانب العميل                 | <Check size={18} /> | <Cross size={18} /> |
+| إضافة تفاعلات ومستمعين للأحداث (`onClick()`, `onChange()`, إلخ)                     | <Cross size={18} /> | <Check size={18} /> |
+| استخدام الحالة وتأثيرات دورة الحياة (`useState()`, `useReducer()`, `useEffect()`, إلخ) | <Cross size={18} /> | <Check size={18} /> |
+| استخدام واجهات برمجة التطبيقات المتاحة فقط في المتصفح                                | <Cross size={18} /> | <Check size={18} /> |
+| استخدام خطافات مخصصة تعتمد على الحالة، التأثيرات، أو واجهات برمجة التطبيقات المتاحة فقط في المتصفح | <Cross size={18} /> | <Check size={18} /> |
+| استخدام [مكونات React الكلاسيكية](https://react.dev/reference/react/Component)      | <Cross size={18} /> | <Check size={18} /> |
+
+## أنماط مكونات الخادم
+
+قبل اختيار العرض على جانب العميل، قد ترغب في القيام ببعض الأعمال على الخادم مثل جلب البيانات أو الوصول إلى قاعدة البيانات أو خدمات الخلفية.
+
+إليك بعض الأنماط الشائعة عند العمل مع مكونات الخادم:
+
+### مشاركة البيانات بين المكونات
+
+عند جلب البيانات على الخادم، قد تكون هناك حالات تحتاج فيها إلى مشاركة البيانات بين مكونات مختلفة. على سبيل المثال، قد يكون لديك تخطيط وصفحة يعتمدان على نفس البيانات.
+
+بدلاً من استخدام [سياق React](https://react.dev/learn/passing-data-deeply-with-context) (غير متاح على الخادم) أو تمرير البيانات كخصائص، يمكنك استخدام [`fetch`](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch) أو دالة `cache` في React لجلب نفس البيانات في المكونات التي تحتاجها، دون القلق بشأن تكرار طلبات البيانات نفسها. وذلك لأن React يمتد `fetch` لتخزين طلبات البيانات تلقائيًا، ويمكن استخدام دالة `cache` عندما لا يكون `fetch` متاحًا.
+
+تعلم المزيد عن [التخزين المؤقت](/docs/app/building-your-application/caching#request-memoization) في React.
+
+### إبقاء كود الخادم فقط خارج بيئة العميل
+
+نظرًا لأن وحدات JavaScript يمكن مشاركتها بين كل من وحدات مكونات الخادم والعميل، فمن الممكن أن يتسلل الكود المخصص للعمل على الخادم فقط إلى العميل.
+
+على سبيل المثال، خذ دالة جلب البيانات التالية:
+
+```ts filename="lib/data.ts" switcher
+export async function getData() {
+  const res = await fetch('https://external-service.com/data', {
+    headers: {
+      authorization: process.env.API_KEY,
+    },
+  })
+
+  return res.json()
+}
+```
+
+```js filename="lib/data.js" switcher
+export async function getData() {
+  const res = await fetch('https://external-service.com/data', {
+    headers: {
+      authorization: process.env.API_KEY,
+    },
+  })
+
+  return res.json()
+}
+```
+
+للوهلة الأولى، يبدو أن `getData` تعمل على كل من الخادم والعميل. ومع ذلك، تحتوي هذه الدالة على `API_KEY`، المكتوبة بنية أن يتم تنفيذها على الخادم فقط.
+
+نظرًا لأن متغير البيئة `API_KEY` لا يبدأ بـ `NEXT_PUBLIC`، فهو متغير خاص لا يمكن الوصول إليه إلا على الخادم. لمنع تسرب متغيرات البيئة الخاصة إلى العميل، يستبدل Next.js متغيرات البيئة الخاصة بسلسلة فارغة.
+
+نتيجة لذلك، على الرغم من أنه يمكن استيراد `getData()` وتنفيذها على العميل، إلا أنها لن تعمل كما هو متوقع. وبينما جعل المتغير عامًا سيجعل الدالة تعمل على العميل، قد لا ترغب في الكشف عن معلومات حساسة للعميل.
+
+لمنع هذا النوع من الاستخدام غير المقصود لكود الخادم على العميل، يمكننا استخدام حزمة `server-only` لإعطاء مطورين آخرين خطأ في وقت البناء إذا قاموا باستيراد إحدى هذه الوحدات عن طريق الخطأ إلى مكون عميل.
+
+لاستخدام `server-only`، قم أولاً بتثبيت الحزمة:
+
+```bash filename="Terminal"
+npm install server-only
+```
+
+ثم استورد الحزمة في أي وحدة تحتوي على كود خاص بالخادم فقط:
+
+```js filename="lib/data.js"
+import 'server-only'
+
+export async function getData() {
+  const res = await fetch('https://external-service.com/data', {
+    headers: {
+      authorization: process.env.API_KEY,
+    },
+  })
+
+  return res.json()
+}
+```
+
+الآن، أي مكون عميل يستورد `getData()` سيتلقى خطأ في وقت البناء يوضح أن هذه الوحدة يمكن استخدامها فقط على الخادم.
+
+يمكن استخدام الحزمة المقابلة `client-only` لوضع علامة على الوحدات التي تحتوي على كود خاص بالعميل فقط - على سبيل المثال، الكود الذي يصل إلى كائن `window`.
+
+### استخدام الحزم والموفّرين من طرف ثالث
+
+نظرًا لأن مكونات الخادم هي ميزة جديدة في React، فإن الحزم والموفّرين من طرف ثالث في النظام البيئي بدأوا للتو في إضافة توجيه `"use client"` إلى المكونات التي تستخدم ميزات خاصة بالعميل مثل `useState` و`useEffect` و`createContext`.
+
+اليوم، العديد من المكونات من حزم `npm` التي تستخدم ميزات خاصة بالعميل لا تحتوي بعد على التوجيه. ستعمل هذه المكونات من طرف ثالث كما هو متوقع داخل مكونات العميل لأن لديها توجيه `"use client"`، لكنها لن تعمل داخل مكونات الخادم.
+
+على سبيل المثال، لنفترض أنك قمت بتثبيت حزمة افتراضية `acme-carousel` التي تحتوي على مكون `<Carousel />`. يستخدم هذا المكون `useState`، لكنه لا يحتوي بعد على توجيه `"use client"`.
+
+إذا استخدمت `<Carousel />` داخل مكون عميل، فسيعمل كما هو متوقع:
+
+```tsx filename="app/gallery.tsx" switcher
+'use client'
+
+import { useState } from 'react'
+import { Carousel } from 'acme-carousel'
+
+export default function Gallery() {
+  let [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)}>View pictures</button>
+
+      {/* Works, since Carousel is used within a Client Component */}
+      {isOpen && <Carousel />}
+    </div>
+  )
+}
+```
+
+```jsx filename="app/gallery.js" switcher
+'use client'
+
+import { useState } from 'react'
+import { Carousel } from 'acme-carousel'
+
+export default function Gallery() {
+  let [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)}>View pictures</button>
+
+      {/*  Works, since Carousel is used within a Client Component */}
+      {isOpen && <Carousel />}
+    </div>
+  )
+}
+```
+
+ومع ذلك، إذا حاولت استخدامه مباشرة داخل مكون خادم، فسترى خطأ:
+
+```tsx filename="app/page.tsx" switcher
+import { Carousel } from 'acme-carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>View pictures</p>
+
+      {/* Error: `useState` can not be used within Server Components */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { Carousel } from 'acme-carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>View pictures</p>
+
+      {/*  Error: `useState` can not be used within Server Components */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+هذا لأن Next.js لا يعرف أن `<Carousel />` يستخدم ميزات خاصة بالعميل.
+
+لإصلاح هذا، يمكنك تغليف المكونات من طرف ثالث التي تعتمد على ميزات خاصة بالعميل داخل مكونات العميل الخاصة بك:
+
+```tsx filename="app/carousel.tsx" switcher
+'use client'
+
+import { Carousel } from 'acme-carousel'
+
+export default Carousel
+```
+
+```jsx filename="app/carousel.js" switcher
+'use client'
+
+import { Carousel } from 'acme-carousel'
+
+export default Carousel
+```
+
+الآن، يمكنك استخدام `<Carousel />` مباشرة داخل مكون خادم:
+
+```tsx filename="app/page.tsx" switcher
+import Carousel from './carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>View pictures</p>
+
+      {/*  Works, since Carousel is a Client Component */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Carousel from './carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>View pictures</p>
+
+      {/*  Works, since Carousel is a Client Component */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+لا نتوقع أن تحتاج إلى تغليف معظم المكونات من طرف ثالث لأنك على الأرجح ستستخدمها داخل مكونات العميل. ومع ذلك، هناك استثناء واحد وهو الموفّرين، لأنهم يعتمدون على حالة وسياق React، وعادة ما تكون هناك حاجة إليهم في جذر التطبيق. [تعلم المزيد عن موفّري السياق من طرف ثالث أدناه](#using-context-providers).
+
+#### استخدام موفّري السياق
+
+عادةً ما يتم عرض موفّري السياق بالقرب من جذر التطبيق لمشاركة اهتمامات عامة، مثل السمة الحالية. نظرًا لأن [سياق React](https://react.dev/learn/passing-data-deeply-with-context) غير مدعوم في مكونات الخادم، فإن محاولة إنشاء سياق في جذر تطبيقك ستؤدي إلى حدوث خطأ:
+
+```tsx filename="app/layout.tsx" switcher
+import { createContext } from 'react'
+
+//  createContext is not supported in Server Components
+export const ThemeContext = createContext({})
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { createContext } from 'react'
+
+//  createContext is not supported in Server Components
+export const ThemeContext = createContext({})
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+      </body>
+    </html>
+  )
+}
+```
+
+لإصلاح هذا، قم بإنشاء سياقك وعرض موفّره داخل مكون عميل:
+
+```tsx filename="app/theme-provider.tsx" switcher
+'use client'
+
+import { createContext } from 'react'
+
+export const ThemeContext = createContext({})
+
+export default function ThemeProvider({ children }) {
+  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+}
+```
+
+```jsx filename="app/theme-provider.js" switcher
+'use client'
+
+import { createContext } from 'react'
+
+export const ThemeContext = createContext({})
+
+export default function ThemeProvider({ children }) {
+  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+}
+```
+
+سيكون مكون الخادم الخاص بك قادرًا الآن على عرض موفّرك مباشرةً لأنه تم وضع علامة عليه كمكون عميل:
+
+```tsx filename="app/layout.tsx" switcher
+import ThemeProvider from './theme-provider'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import ThemeProvider from './theme-provider'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+مع عرض الموفّر في الجذر، ستتمكن جميع مكونات العميل الأخرى في تطبيقك من استهلاك هذا السياق.
+
+> **ملاحظة جيدة**: يجب أن تعرض الموفّرين بأقصى عمق ممكن في الشجرة - لاحظ كيف أن `ThemeProvider` يلف فقط `{children}` بدلاً من مستند `<html>` بأكمله. هذا يجعل من السهل على Next.js تحسين الأجزاء الثابتة من مكونات الخادم الخاصة بك.
+
+#### نصائح لمؤلفي المكتبات
+
+بطريقة مماثلة، يمكن لمؤلفي المكتبات الذين ينشئون حزمًا ليتم استهلاكها من قبل مطورين آخرين استخدام توجيه `"use client"` لوضع علامة على نقاط دخول العميل في حزمتهم. هذا يسمح لمستخدمي الحزمة باستيراد مكونات الحزمة مباشرة إلى مكونات الخادم الخاصة بهم دون الحاجة إلى إنشاء حد تغليف.
+
+يمكنك تحسين حزمتك باستخدام ['use client' بشكل أعمق في الشجرة](#moving-client-components-down-the-tree)، مما يسمح لوحدات الوارد أن تكون جزءًا من الرسم البياني لوحدة مكون الخادم.
+
+من الجدير بالذكر أن بعض أدوات الحزم قد تزيل توجيهات `"use client"`. يمكنك العثور على مثال لكيفية تكوين esbuild لتضمين توجيه `"use client"` في مستودعات [React Wrap Balancer](https://github.com/shuding/react-wrap-balancer/blob/main/tsup.config.ts#L10-L13) و[Vercel Analytics](https://github.com/vercel/analytics/blob/main/packages/web/tsup.config.js#L26-L30).
+
+## مكونات العميل
+
+### نقل مكونات العميل لأسفل الشجرة
+
+لتقليل حجم حزمة JavaScript الخاصة بالعميل، نوصي بنقل مكونات العميل لأسفل شجرة المكونات الخاصة بك.
+
+على سبيل المثال، قد يكون لديك تخطيط يحتوي على عناصر ثابتة (مثل الشعار، الروابط، إلخ) وشريط بحث تفاعلي يستخدم الحالة.
+
+بدلاً من جعل التخطيط بأكمله مكون عميل، انقل المنطق التفاعلي إلى مكون عميل (مثل `<SearchBar />`) واحتفظ بتخطيطك كمكون خادم. هذا يعني أنك لست مضطرًا لإرسال جميع كود JavaScript الخاص بالمكونات في التخطيط إلى العميل.
+
+```tsx filename="app/layout.tsx" switcher
+// SearchBar هو مكون عميل
+import SearchBar from './searchbar'
+// Logo هو مكون خادم
+import Logo from './logo'
+
+// Layout هو مكون خادم افتراضيًا
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <nav>
+        <Logo />
+        <SearchBar />
+      </nav>
+      <main>{children}</main>
+    </>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+// SearchBar هو مكون عميل
+import SearchBar from './searchbar'
+// Logo هو مكون خادم
+import Logo from './logo'
+
+// Layout هو مكون خادم افتراضيًا
+export default function Layout({ children }) {
+  return (
+    <>
+      <nav>
+        <Logo />
+        <SearchBar />
+      </nav>
+      <main>{children}</main>
+    </>
+  )
+}
+```
+
+### تمرير الخصائص من الخادم إلى مكونات العميل (التسلسل)
+
+إذا قمت بجلب البيانات في مكون خادم، فقد ترغب في تمرير البيانات كخصائص إلى مكونات العميل. يجب أن تكون الخصائص الممررة من الخادم إلى مكونات العميل [قابلة للتسلسل](https://developer.mozilla.org/docs/Glossary/Serialization) بواسطة React.
+
+إذا كانت مكونات العميل الخاصة بك تعتمد على بيانات غير قابلة للتسلسل، يمكنك [جلب البيانات على العميل باستخدام مكتبة طرف ثالث](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-third-party-libraries) أو على الخادم عبر [معالج المسار](/docs/app/building-your-application/routing/route-handlers).
+
+## تداخل مكونات الخادم والعميل
+
+عند تداخل مكونات الخادم (Server Components) والعميل (Client Components)، قد يكون من المفيد تصوير واجهة المستخدم الخاصة بك كشجرة من المكونات. بدءًا من [تخطيط الجذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) وهو مكون خادم، يمكنك بعد ذلك عرض بعض الأشجار الفرعية للمكونات على جانب العميل عن طريق إضافة التوجيه `"use client"`.
+
+{/* رسم بياني - التداخل */}
+
+داخل أشجار العميل الفرعية هذه، لا يزال بإمكانك تضمين مكونات الخادم أو استدعاء إجراءات الخادم (Server Actions)، ولكن هناك بعض الأشياء التي يجب وضعها في الاعتبار:
+
+- خلال دورة حياة الطلب-الاستجابة، ينتقل الكود الخاص بك من الخادم إلى العميل. إذا كنت بحاجة إلى الوصول إلى بيانات أو موارد على الخادم أثناء وجودك على العميل، فستقوم بعمل طلب **جديد** إلى الخادم - وليس التبديل ذهابًا وإيابًا.
+- عند عمل طلب جديد إلى الخادم، يتم عرض جميع مكونات الخادم أولاً، بما في ذلك تلك المتداخلة داخل مكونات العميل. ستحتوي نتيجة العرض (RSC Payload) على إشارات إلى مواقع مكونات العميل. ثم، على العميل، يستخدم React حمولة RPC لتنسيق مكونات الخادم والعميل في شجرة واحدة.
+
+{/* رسم بياني */}
+
+- نظرًا لأن مكونات العميل يتم عرضها بعد مكونات الخادم، لا يمكنك استيراد مكون خادم إلى وحدة مكون عميل (لأن ذلك سيتطلب طلبًا جديدًا إلى الخادم). بدلاً من ذلك، يمكنك تمرير مكون خادم كـ `props` إلى مكون عميل. راجع الأقسام [النمط غير المدعوم](#unsupported-pattern-importing-server-components-into-client-components) و[النمط المدعوم](#supported-pattern-passing-server-components-to-client-components-as-props) أدناه.
+
+### النمط غير المدعوم: استيراد مكونات الخادم إلى مكونات العميل
+
+النمط التالي غير مدعوم. لا يمكنك استيراد مكون خادم إلى مكون عميل:
+
+```tsx filename="app/client-component.tsx" switcher highlight={4,17}
+'use client'
+
+// لا يمكنك استيراد مكون خادم إلى مكون عميل.
+import ServerComponent from './Server-Component'
+
+export default function ClientComponent({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+
+      <ServerComponent />
+    </>
+  )
+}
+```
+
+```jsx filename="app/client-component.js" switcher highlight={3,13}
+'use client'
+
+// لا يمكنك استيراد مكون خادم إلى مكون عميل.
+import ServerComponent from './Server-Component'
+
+export default function ClientComponent({ children }) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+
+      <ServerComponent />
+    </>
+  )
+}
+```
+
+### النمط المدعوم: تمرير مكونات الخادم إلى مكونات العميل كـ Props
+
+النمط التالي مدعوم. يمكنك تمرير مكونات الخادم كـ prop إلى مكون عميل.
+
+من الأنماط الشائعة استخدام خاصية React `children` لإنشاء "فتحة" في مكون العميل الخاص بك.
+
+في المثال أدناه، `<ClientComponent>` يقبل خاصية `children`:
+
+```tsx filename="app/client-component.tsx" switcher highlight={6,15}
+'use client'
+
+import { useState } from 'react'
+
+export default function ClientComponent({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+      {children}
+    </>
+  )
+}
+```
+
+```jsx filename="app/client-component.js" switcher highlight={5,12}
+'use client'
+
+import { useState } from 'react'
+
+export default function ClientComponent({ children }) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+
+      {children}
+    </>
+  )
+}
+```
+
+`<ClientComponent>` لا يعرف أن `children` سيتم ملؤها لاحقًا بنتيجة مكون خادم. المسؤولية الوحيدة لـ `<ClientComponent>` هي تحديد **أين** سيتم وضع `children` في النهاية.
+
+في مكون خادم أب، يمكنك استيراد كل من `<ClientComponent>` و `<ServerComponent>` وتمرير `<ServerComponent>` كطفل لـ `<ClientComponent>`:
+
+```tsx filename="app/page.tsx"  highlight={11} switcher
+// هذا النمط يعمل:
+// يمكنك تمرير مكون خادم كطفل أو prop لمكون عميل.
+import ClientComponent from './client-component'
+import ServerComponent from './server-component'
+
+// الصفحات في Next.js هي مكونات خادم افتراضيًا
+export default function Page() {
+  return (
+    <ClientComponent>
+      <ServerComponent />
+    </ClientComponent>
+  )
+}
+```
+
+```jsx filename="app/page.js" highlight={11} switcher
+// هذا النمط يعمل:
+// يمكنك تمرير مكون خادم كطفل أو prop لمكون عميل.
+import ClientComponent from './client-component'
+import ServerComponent from './server-component'
+
+// الصفحات في Next.js هي مكونات خادم افتراضيًا
+export default function Page() {
+  return (
+    <ClientComponent>
+      <ServerComponent />
+    </ClientComponent>
+  )
+}
+```
+
+بهذه الطريقة، يتم فصل `<ClientComponent>` و `<ServerComponent>` ويمكن عرضهما بشكل مستقل. في هذه الحالة، يمكن عرض الطفل `<ServerComponent>` على الخادم، قبل وقت طويل من عرض `<ClientComponent>` على العميل.
+
+> **معلومة جيدة:**
+>
+> - تم استخدام نمط "رفع المحتوى لأعلى" لتجنب إعادة عرض مكون طفل متداخل عند إعادة عرض مكون أب.
+> - لا تقتصر على خاصية `children`. يمكنك استخدام أي prop لتمرير JSX.
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/04-edge-and-nodejs-runtimes.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/04-edge-and-nodejs-runtimes.mdx
new file mode 100644
index 00000000..c242cca5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/04-edge-and-nodejs-runtimes.mdx
@@ -0,0 +1,86 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:28.922Z
+title: بيئات تشغيل Edge و Node.js
+description: تعرف على بيئات التشغيل القابلة للتبديل (Edge و Node.js) في Next.js.
+---
+
+{/* محتوى هذا المستند مشترك بين موجّه التطبيق وموجّه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجّه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+في سياق Next.js، يشير مصطلح بيئة التشغيل (Runtime) إلى مجموعة المكتبات وواجهات البرمجة والوظائف العامة المتاحة لشفرة التطبيق أثناء التنفيذ.
+
+على الخادم، هناك بيئتي تشغيل حيث يمكن عرض أجزاء من كود التطبيق:
+
+- **بيئة تشغيل Node.js** (الافتراضية) توفر الوصول إلى جميع واجهات برمجة Node.js والحزم المتوافقة من النظام البيئي.
+- **بيئة تشغيل Edge** تعتمد على [واجهات برمجة الويب (Web APIs)](/docs/app/api-reference/edge).
+
+## الفروق بين بيئتي التشغيل
+
+هناك العديد من الاعتبارات عند اختيار بيئة التشغيل. يوضح هذا الجدول الفروق الرئيسية بلمحة سريعة. إذا كنت تريد تحليلًا أكثر تفصيلاً للفروق، راجع الأقسام أدناه.
+
+|                                                                                                                                                     | Node   | Serverless | Edge             |
+| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ---------- | ---------------- |
+| [الإقلاع البارد (Cold Boot)](https://vercel.com/docs/concepts/get-started/compute#cold-and-hot-boots?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) | /      | ~250ms     | فوري          |
+| [البث المباشر HTTP](/docs/app/building-your-application/routing/loading-ui-and-streaming)                                                              | نعم    | نعم        | نعم              |
+| الإدخال/الإخراج                                                                                                                                                  | الكل    | الكل        | `fetch`          |
+| القابلية للتوسع                                                                                                                                         | /      | عالية       | الأعلى          |
+| الأمان                                                                                                                                            | عادي | عالي       | عالي             |
+| زمن الاستجابة                                                                                                                                             | عادي | منخفض        | الأقل           |
+| حزم npm                                                                                                                                        | الكل    | الكل        | مجموعة فرعية أصغر |
+| [العرض الثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default)                                        | نعم    | نعم        | لا               |
+| [العرض الديناميكي](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)                                              | نعم    | نعم        | نعم              |
+| [إعادة التحقق من البيانات مع `fetch`](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data)               | نعم    | نعم        | نعم              |
+
+### بيئة تشغيل Edge
+
+في Next.js، بيئة تشغيل Edge الخفيفة هي مجموعة فرعية من واجهات برمجة Node.js المتاحة.
+
+بيئة تشغيل Edge مثالية إذا كنت بحاجة إلى تقديم محتوى ديناميكي ومخصص بزمن استجابة منخفض باستخدام دوال صغيرة وبسيطة. تأتي سرعة بيئة تشغيل Edge من استخدامها الحد الأدنى من الموارد، ولكن هذا قد يكون محدودًا في العديد من السيناريوهات.
+
+على سبيل المثال، لا يمكن أن يتجاوز الكود المنفذ في بيئة تشغيل Edge [على Vercel بين 1 ميجابايت و4 ميجابايت](https://vercel.com/docs/concepts/limits/overview#edge-middleware-and-edge-functions-size)، وهذا الحد يشمل الحزم المستوردة والخطوط والملفات، وسيختلف اعتمادًا على بنية النشر الخاصة بك.
+
+### بيئة تشغيل Node.js
+
+استخدام بيئة تشغيل Node.js يمنحك الوصول إلى جميع واجهات برمجة Node.js، وجميع حزم npm التي تعتمد عليها. ومع ذلك، فإنها ليست سريعة في البدء مثل المسارات التي تستخدم بيئة تشغيل Edge.
+
+سيحتاج نشر تطبيق Next.js على خادم Node.js إلى إدارة وتوسيع وضبط البنية التحتية الخاصة بك. بدلاً من ذلك، يمكنك التفكير في نشر تطبيق Next.js على منصة بدون خادم مثل Vercel، والتي ستتعامل مع هذا نيابة عنك.
+
+### Node.js بدون خادم (Serverless)
+
+الحل بدون خادم مثالي إذا كنت بحاجة إلى حل قابل للتوسع يمكنه التعامل مع أحمال حسابية أكثر تعقيدًا من بيئة تشغيل Edge. مع دوال Serverless على Vercel، على سبيل المثال، يكون الحجم الإجمالي للشفرة [50 ميجابايت](https://vercel.com/docs/concepts/limits/overview#serverless-function-size) بما في ذلك الحزم المستوردة والخطوط والملفات.
+
+الجانب السلبي مقارنة بالمسارات التي تستخدم [Edge](https://vercel.com/docs/concepts/functions/edge-functions) هو أن دوال Serverless قد تستغرق مئات المللي ثانية للبدء قبل أن تبدأ في معالجة الطلبات. اعتمادًا على كمية الزيارات التي يتلقاها موقعك، قد يحدث هذا بشكل متكرر حيث أن الدوال ليست "دافئة" بشكل متكرر.
+
+<AppOnly>
+
+## أمثلة
+
+### خيار بيئة التشغيل للقطعة (Segment)
+
+يمكنك تحديد بيئة تشغيل لقطعات المسار الفردية في تطبيق Next.js الخاص بك. للقيام بذلك، [قم بتعريف متغير يسمى `runtime` وقم بتصديره](/docs/app/api-reference/file-conventions/route-segment-config). يجب أن يكون المتغير سلسلة نصية، ويجب أن تكون قيمته إما `'nodejs'` أو `'edge'`.
+
+يوضح المثال التالي قطعة مسار صفحة تقوم بتصدير `runtime` بقيمة `'edge'`:
+
+```tsx filename="app/page.tsx" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+```jsx filename="app/page.js" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+يمكنك أيضًا تعريف `runtime` على مستوى التخطيط (layout)، مما يجعل جميع المسارات تحت هذا التخطيط تعمل على بيئة تشغيل Edge:
+
+```tsx filename="app/layout.tsx" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+```jsx filename="app/layout.js" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+إذا لم يتم تعيين بيئة تشغيل القطعة، سيتم استخدام بيئة تشغيل `nodejs` الافتراضية. لا تحتاج إلى استخدام خيار `runtime` إذا كنت لا تخطط للتبديل من بيئة تشغيل Node.js.
+
+</AppOnly>
+
+> يرجى الرجوع إلى [وثائق Node.js](https://nodejs.org/docs/latest/api/) و[وثائق Edge](/docs/app/api-reference/edge) للحصول على القائمة الكاملة لواجهات البرمجة المتاحة. يمكن لكلا بيئتي التشغيل أيضًا دعم [البث المباشر (streaming)](/docs/app/building-your-application/routing/loading-ui-and-streaming) اعتمادًا على بنية النشر الخاصة بك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/index.mdx
new file mode 100644
index 00000000..1e4ba386
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/03-rendering/index.mdx
@@ -0,0 +1,80 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:11.723Z
+title: التصيير (Rendering)
+description: تعرف على الفروق بين بيئات التصيير في Next.js واستراتيجياته وبيئات التشغيل الخاصة به.
+---
+
+التحويل الذي تقوم به من الكود الذي تكتبه إلى واجهات المستخدم يُعرف بالتصيير. تسمح لك React وNext.js بإنشاء تطبيقات ويب هجينة حيث يمكن تصيير أجزاء من الكود على الخادم أو العميل. سيساعدك هذا القسم على فهم الفروق بين بيئات التصيير هذه واستراتيجياتها وبيئات التشغيل.
+
+## الأساسيات
+
+للبدء، من المفيد أن تتعرف على ثلاثة مفاهيم أساسية في الويب:
+
+- [بيئات التصيير](#rendering-environments) التي يمكن تنفيذ كود التطبيق فيها: الخادم والعميل.
+- [دورة الطلب-الاستجابة](#request-response-lifecycle) التي تبدأ عندما يزور المستخدم أو يتفاعل مع تطبيقك.
+- [حدود الشبكة](#network-boundary) التي تفصل بين كود الخادم والعميل.
+
+### بيئات التصيير
+
+هناك بيئتان يمكن فيهما تصيير تطبيقات الويب: العميل والخادم.
+
+<Image
+  alt="بيئات العميل والخادم"
+  srcLight="/docs/light/client-and-server-environments.png"
+  srcDark="/docs/dark/client-and-server-environments.png"
+  width="1600"
+  height="672"
+/>
+
+- **العميل (Client)** يشير إلى المتصفح على جهاز المستخدم الذي يرسل طلبًا إلى خادم للحصول على كود التطبيق. ثم يحول الاستجابة من الخادم إلى واجهة مستخدم.
+- **الخادم (Server)** يشير إلى الكمبيوتر في مركز البيانات الذي يخزن كود التطبيق الخاص بك، ويتلقى الطلبات من العميل، ويرسل استجابة مناسبة.
+
+تاريخيًا، كان على المطورين استخدام لغات مختلفة (مثل JavaScript، PHP) وأُطر عمل عند كتابة الكود للخادم والعميل. مع React، يمكن للمطورين استخدام **نفس اللغة** (JavaScript) و**نفس إطار العمل** (مثل Next.js أو إطار العمل الذي تختاره). هذه المرونة تتيح لك كتابة الكود بسلاسة لكلا البيئتين دون الحاجة إلى التبديل بين السياقات.
+
+ومع ذلك، لكل بيئة مجموعة خاصة من الإمكانيات والقيود. لذلك، فإن الكود الذي تكتبه للخادم والعميل ليس دائمًا متطابقًا. هناك عمليات معينة (مثل جلب البيانات أو إدارة حالة المستخدم) تكون أكثر ملاءمة لبيئة عن الأخرى.
+
+فهم هذه الفروق هو مفتاح الاستخدام الفعال لـ React وNext.js. سنغطي الفروق وحالات الاستخدام بمزيد من التفصيل في صفحات [مكونات الخادم](/docs/app/building-your-application/rendering/server-components) و[مكونات العميل](/docs/app/building-your-application/rendering/client-components)، لكن حاليًا دعونا نواصل البناء على أساسنا.
+
+### دورة الطلب-الاستجابة
+
+بشكل عام، تتبع جميع مواقع الويب نفس **دورة الطلب-الاستجابة**:
+
+1. **إجراء المستخدم:** يتفاعل المستخدم مع تطبيق الويب. يمكن أن يكون هذا النقر على رابط، أو إرسال نموذج، أو كتابة عنوان URL مباشرة في شريط عنوان المتصفح.
+2. **طلب HTTP:** يرسل العميل [طلب HTTP](https://developer.mozilla.org/docs/Web/HTTP) إلى الخادم يحتوي على المعلومات الضرورية حول الموارد المطلوبة، والطريقة المستخدمة (مثل `GET`، `POST`)، وبيانات إضافية إذا لزم الأمر.
+3. **الخادم:** يعالج الخادم الطلب ويستجيب بالموارد المناسبة. قد تتضمن هذه العملية عدة خطوات مثل التوجيه، جلب البيانات، إلخ.
+4. **استجابة HTTP:** بعد معالجة الطلب، يرسل الخادم استجابة HTTP إلى العميل. تحتوي هذه الاستجابة على رمز حالة (يخبر العميل ما إذا كان الطلب ناجحًا أم لا) والموارد المطلوبة (مثل HTML، CSS، JavaScript، موارد ثابتة، إلخ).
+5. **العميل:** يحلل العميل الموارد لعرض واجهة المستخدم.
+6. **إجراء المستخدم:** بمجرد عرض واجهة المستخدم، يمكن للمستخدم التفاعل معها، وتبدأ الدورة مرة أخرى.
+
+جزء كبير من بناء تطبيق ويب هجين هو تحديد كيفية تقسيم العمل في الدورة، وأين يتم وضع حدود الشبكة.
+
+### حدود الشبكة
+
+في تطوير الويب، **حدود الشبكة (Network Boundary)** هي خط مفاهيمي يفصل بين البيئات المختلفة. على سبيل المثال، العميل والخادم، أو الخادم ومخزن البيانات.
+
+{/* رسم توضيحي: حدود الشبكة */}
+
+في React، يمكنك اختيار مكان وضع حدود الشبكة بين العميل والخادم حيثما كان ذلك أكثر منطقية.
+
+خلف الكواليس، يتم تقسيم العمل إلى جزأين: **رسم بياني لوحدة العميل** و**رسم بياني لوحدة الخادم**. يحتوي رسم وحدة الخادم على جميع المكونات التي يتم تصييرها على الخادم، ويحتوي رسم وحدة العميل على جميع المكونات التي يتم تصييرها على العميل.
+
+{/* رسم توضيحي: رسومات وحدات العميل والخادم */}
+
+قد يكون من المفيد التفكير في رسومات الوحدات كتمثيل مرئي لكيفية اعتماد الملفات في تطبيقك على بعضها البعض.
+
+{/* على سبيل المثال، إذا كان لديك ملف يسمى `Page.jsx` يستورد ملفًا يسمى `Button.jsx` على الخادم، فسيبدو رسم الوحدة كالتالي: - رسم توضيحي - */}
+
+يمكنك استخدام اصطلاح React `"use client"` لتحديد الحدود. هناك أيضًا اصطلاح `"use server"`، الذي يخبر React بتنفيذ بعض الأعمال الحسابية على الخادم أثناء وجوده على العميل.
+
+## بناء تطبيقات هجينة
+
+عند العمل في هذه البيئات، من المفيد التفكير في تدفق الكود في تطبيقك على أنه **أحادي الاتجاه**. بمعنى آخر، أثناء الاستجابة، يتدفق كود التطبيق في اتجاه واحد: من الخادم إلى العميل.
+
+{/* رسم توضيحي: تدفق الاستجابة */}
+
+إذا كنت بحاجة إلى الوصول إلى الخادم من العميل، فترسل **طلبًا جديدًا** إلى الخادم بدلاً من إعادة استخدام نفس الطلب. وهذا يسهل فهم مكان تصيير المكونات وأين يتم وضع حدود الشبكة.
+
+عمليًا، يشجع هذا النموذج المطورين على التفكير فيما يريدون تنفيذه على الخادم أولاً، قبل إرسال النتيجة إلى العميل وجعل التطبيق تفاعليًا.
+
+سيصبح هذا المفهوم أوضح عندما ننظر إلى كيفية [تداخل مكونات العميل والخادم](/docs/app/building-your-application/rendering/composition-patterns) في نفس شجرة المكونات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/04-caching/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/04-caching/index.mdx
new file mode 100644
index 00000000..e96d6b8a
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/04-caching/index.mdx
@@ -0,0 +1,603 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:13:24.382Z
+title: التخزين المؤقت في Next.js
+nav_title: التخزين المؤقت
+description: نظرة عامة على آليات التخزين المؤقت في Next.js.
+---
+
+يحسن Next.js أداء تطبيقك ويقلل التكاليف من خلال تخزين أعمال التصيير وطلبات البيانات مؤقتًا. توفر هذه الصفحة نظرة متعمقة على آليات التخزين المؤقت في Next.js، وواجهات برمجة التطبيقات (APIs) التي يمكنك استخدامها لتكوينها، وكيفية تفاعلها مع بعضها البعض.
+
+> **معلومة مفيدة**: تساعدك هذه الصفحة على فهم كيفية عمل Next.js تحت الغطاء، لكنها **ليست** معرفة أساسية لتكون منتجًا باستخدام Next.js. يتم تحديد معظم استدلالات التخزين المؤقت في Next.js من خلال استخدامك لواجهات برمجة التطبيقات ولها إعدادات افتراضية لأفضل أداء مع تكوين صفري أو ضئيل.
+
+## نظرة عامة
+
+إليك نظرة عامة عالية المستوى على آليات التخزين المؤقت المختلفة والغرض منها:
+
+| الآلية                                   | ماذا تخزن                | أين    | الغرض                                         | المدة                        |
+| ------------------------------------------- | -------------------------- | ------ | ----------------------------------------------- | ------------------------------- |
+| [تخزين الطلبات مؤقتًا](#request-memoization) | قيم الإرجاع للدوال | الخادم | إعادة استخدام البيانات في شجرة مكونات React     | دورة حياة الطلب الواحد          |
+| [ذاكرة البيانات المؤقتة](#data-cache)       | البيانات                   | الخادم | تخزين البيانات عبر طلبات المستخدم والنشرات       | مستمر (يمكن إعادة التحقق منه)   |
+| [ذاكرة المسار الكامل المؤقتة](#full-route-cache) | HTML وحمولة RSC       | الخادم | تقليل تكلفة التصيير وتحسين الأداء               | مستمر (يمكن إعادة التحقق منه)   |
+| [ذاكرة الموجه المؤقتة](#router-cache)       | حمولة RSC                | العميل | تقليل طلبات الخادم أثناء التنقل                 | جلسة المستخدم أو بناءً على الوقت |
+
+بشكل افتراضي، سيخزن Next.js أكبر قدر ممكن لتحسين الأداء وتقليل التكلفة. وهذا يعني أن المسارات تُصَيَّر **بشكل ثابت** وطلبات البيانات **مخزنة مؤقتًا** إلا إذا اخترت عدم ذلك. يوضح الرسم البياني أدناه سلوك التخزين المؤقت الافتراضي: عندما يتم تصيير مسار بشكل ثابت في وقت البناء وعند زيارة مسار ثابت لأول مرة.
+
+<Image
+  alt="رسم بياني يوضح سلوك التخزين المؤقت الافتراضي في Next.js للآليات الأربع، مع HIT وMISS وSET في وقت البناء وعند زيارة المسار لأول مرة."
+  srcLight="/docs/light/caching-overview.png"
+  srcDark="/docs/dark/caching-overview.png"
+  width="1600"
+  height="1179"
+/>
+
+يتغير سلوك التخزين المؤقت اعتمادًا على ما إذا كان المسار يُصَيَّر بشكل ثابت أو ديناميكي، وما إذا كانت البيانات مخزنة مؤقتًا أم لا، وما إذا كان الطلب جزءًا من زيارة أولية أو تنقل لاحق. اعتمادًا على حالة الاستخدام، يمكنك تكوين سلوك التخزين المؤقت للمسارات الفردية وطلبات البيانات.
+
+## تخزين الطلبات مؤقتًا
+
+يمتد React لواجهة برمجة التطبيقات [`fetch`](#fetch) لتخزين الطلبات التي لها نفس URL والخيارات تلقائيًا **مؤقتًا**. وهذا يعني أنه يمكنك استدعاء دالة fetch لنفس البيانات في أماكن متعددة في شجرة مكونات React مع تنفيذها مرة واحدة فقط.
+
+<Image
+  alt="طلبات Fetch المكررة"
+  srcLight="/docs/light/deduplicated-fetch-requests.png"
+  srcDark="/docs/dark/deduplicated-fetch-requests.png"
+  width="1600"
+  height="857"
+/>
+
+على سبيل المثال، إذا كنت بحاجة إلى استخدام نفس البيانات عبر مسار (مثل في Layout وصفحة ومكونات متعددة)، فلا يتعين عليك جلب البيانات في أعلى الشجرة ثم تمرير الخصائص بين المكونات. بدلاً من ذلك، يمكنك جلب البيانات في المكونات التي تحتاجها دون القلق بشأن الآثار المترتبة على الأداء لإنشاء طلبات متعددة عبر الشبكة لنفس البيانات.
+
+```tsx filename="app/example.tsx" switcher
+async function getItem() {
+  // يتم تخزين دالة `fetch` تلقائيًا مؤقتًا وتخزين النتيجة
+  const res = await fetch('https://.../item/1')
+  return res.json()
+}
+
+// يتم استدعاء هذه الدالة مرتين، ولكن يتم تنفيذها فقط في المرة الأولى
+const item = await getItem() // cache MISS
+
+// يمكن أن يكون الاستدعاء الثاني في أي مكان في مسارك
+const item = await getItem() // cache HIT
+```
+
+```jsx filename="app/example.js" switcher
+async function getItem() {
+  // يتم تخزين دالة `fetch` تلقائيًا مؤقتًا وتخزين النتيجة
+  const res = await fetch('https://.../item/1')
+  return res.json()
+}
+
+// يتم استدعاء هذه الدالة مرتين، ولكن يتم تنفيذها فقط في المرة الأولى
+const item = await getItem() // cache MISS
+
+// يمكن أن يكون الاستدعاء الثاني في أي مكان في مسارك
+const item = await getItem() // cache HIT
+```
+
+**كيف يعمل تخزين الطلبات مؤقتًا**
+
+<Image
+  alt="رسم بياني يوضح كيفية عمل تخزين fetch مؤقتًا أثناء تصيير React."
+  srcLight="/docs/light/request-memoization.png"
+  srcDark="/docs/dark/request-memoization.png"
+  width="1600"
+  height="742"
+/>
+
+- أثناء تصيير مسار، في المرة الأولى التي يتم فيها استدعاء طلب معين، لن تكون نتيجته في الذاكرة وسيكون cache `MISS`.
+- لذلك، سيتم تنفيذ الدالة، وسيتم جلب البيانات من المصدر الخارجي، وسيتم تخزين النتيجة في الذاكرة.
+- سيؤدي استدعاء الدالة اللاحق لنفس الطلب في نفس تمرير التصيير إلى cache `HIT`، وسيتم إرجاع البيانات من الذاكرة دون تنفيذ الدالة.
+- بمجرد اكتمال تصيير المسار وتمرير التصيير، يتم "إعادة تعيين" الذاكرة ومسح جميع إدخالات تخزين الطلبات مؤقتًا.
+
+> **معلومة مفيدة**:
+>
+> - تخزين الطلبات مؤقتًا هو ميزة React وليست ميزة Next.js. تم تضمينها هنا لإظهار كيفية تفاعلها مع آليات التخزين المؤقت الأخرى.
+> - ينطبق التخزين المؤقت فقط على طريقة `GET` في طلبات `fetch`.
+> - ينطبق التخزين المؤقت فقط على شجرة مكونات React، وهذا يعني:
+>   - ينطبق على طلبات `fetch` في `generateMetadata` و`generateStaticParams` وLayouts وPages ومكونات الخادم الأخرى.
+>   - لا ينطبق على طلبات `fetch` في Route Handlers لأنها ليست جزءًا من شجرة مكونات React.
+> - للحالات التي لا يكون فيها `fetch` مناسبًا (مثل بعض عملاء قواعد البيانات أو عملاء CMS أو عملاء GraphQL)، يمكنك استخدام [دالة `cache` في React](#react-cache-function) لتخزين الدوال مؤقتًا.
+
+### المدة
+
+يستمر التخزين المؤقت طوال فترة حياة طلب الخادم حتى تنتهي شجرة مكونات React من التصيير.
+
+### إعادة التحقق
+
+نظرًا لأن التخزين المؤقت غير مشترك عبر طلبات الخادم وينطبق فقط أثناء التصيير، فلا حاجة لإعادة التحقق منه.
+
+### عدم المشاركة
+
+لعدم المشاركة في التخزين المؤقت لطلبات `fetch`، يمكنك تمرير `signal` من `AbortController` إلى الطلب.
+
+```js filename="app/example.js"
+const { signal } = new AbortController()
+fetch(url, { signal })
+```
+
+## ذاكرة البيانات المؤقتة
+
+يحتوي Next.js على ذاكرة بيانات مدمجة **تخزن** نتائج جلب البيانات عبر **طلبات الخادم** الواردة و**النشرات**. وهذا ممكن لأن Next.js يمتد واجهة برمجة التطبيقات `fetch` الأصلية للسماح لكل طلب على الخادم بتعيين دلالات التخزين المؤقت الخاصة به.
+
+> **معلومة مفيدة**: في المتصفح، يشير خيار `cache` في `fetch` إلى كيفية تفاعل الطلب مع ذاكرة HTTP للمتصفح، في Next.js، يشير خيار `cache` إلى كيفية تفاعل طلب الخادم مع ذاكرة البيانات على الخادم.
+
+بشكل افتراضي، يتم **تخزين** طلبات البيانات التي تستخدم `fetch` مؤقتًا. يمكنك استخدام خيارات [`cache`](#fetch-optionscache) و[`next.revalidate`](#fetch-optionsnextrevalidate) في `fetch` لتكوين سلوك التخزين المؤقت.
+
+**كيف تعمل ذاكرة البيانات المؤقتة**
+
+<Image
+  alt="رسم بياني يوضح كيفية تفاعل طلبات fetch المخزنة وغير المخزنة مؤقتًا مع ذاكرة البيانات المؤقتة. يتم تخزين الطلبات المخزنة مؤقتًا في ذاكرة البيانات المؤقتة وتخزينها مؤقتًا، بينما يتم جلب الطلبات غير المخزنة مؤقتًا من مصدر البيانات، ولا يتم تخزينها في ذاكرة البيانات المؤقتة، وتخزينها مؤقتًا."
+  srcLight="/docs/light/data-cache.png"
+  srcDark="/docs/dark/data-cache.png"
+  width="1600"
+  height="661"
+/>
+
+- في المرة الأولى التي يتم فيها استدعاء طلب `fetch` أثناء التصيير، يتحقق Next.js من ذاكرة البيانات المؤقتة للحصول على استجابة مخزنة مؤقتًا.
+- إذا تم العثور على استجابة مخزنة مؤقتًا، يتم إرجاعها على الفور و[تخزينها مؤقتًا](#request-memoization).
+- إذا لم يتم العثور على استجابة مخزنة مؤقتًا، يتم إجراء الطلب إلى مصدر البيانات، وتخزين النتيجة في ذاكرة البيانات المؤقتة، وتخزينها مؤقتًا.
+- بالنسبة للبيانات غير المخزنة مؤقتًا (مثل `{ cache: 'no-store' }`)، يتم دائمًا جلب النتيجة من مصدر البيانات، وتخزينها مؤقتًا.
+- سواء كانت البيانات مخزنة مؤقتًا أم لا، يتم دائمًا تخزين الطلبات مؤقتًا لتجنب إنشاء طلبات مكررة لنفس البيانات أثناء تمرير تصيير React.
+
+> **الاختلافات بين ذاكرة البيانات المؤقتة وتخزين الطلبات مؤقتًا**
+>
+> بينما تساعد كلتا آليتي التخزين المؤقت في تحسين الأداء من خلال إعادة استخدام البيانات المخزنة مؤقتًا، فإن ذاكرة البيانات المؤقتة مستمرة عبر الطلبات الواردة والنشرات، بينما يستمر التخزين المؤقت فقط طوال فترة حياة الطلب.
+>
+> مع التخزين المؤقت، نقلل عدد الطلبات **المكررة** في نفس تمرير التصيير التي يجب أن تعبر حدود الشبكة من خادم التصيير إلى خادم ذاكرة البيانات المؤقتة (مثل CDN أو شبكة Edge) أو مصدر البيانات (مثل قاعدة بيانات أو CMS). مع ذاكرة البيانات المؤقتة، نقلل عدد الطلبات الموجهة إلى مصدر البيانات الأصلي.
+
+### المدة
+
+ذاكرة البيانات المؤقتة مستمرة عبر الطلبات الواردة والنشرات ما لم تقم بإعادة التحقق أو عدم المشاركة.
+
+### إعادة التحقق
+
+يمكن إعادة التحقق من البيانات المخزنة مؤقتًا بطريقتين، باستخدام:
+
+- **إعادة التحقق بناءً على الوقت**: إعادة التحقق من البيانات بعد مرور فترة زمنية معينة وإجراء طلب جديد. هذا مفيد للبيانات التي تتغير بشكل غير متكرر وليست الحداثة فيها بالغة الأهمية.
+- **إعادة التحقق عند الطلب:** إعادة التحقق من البيانات بناءً على حدث (مثل إرسال نموذج). يمكن أن تستخدم إعادة التحقق عند الطلب نهجًا يعتمد على العلامات أو المسار لإعادة التحقق من مجموعات البيانات دفعة واحدة. هذا مفيد عندما تريد التأكد من عرض أحدث البيانات في أسرع وقت ممكن (مثل عند تحديث المحتوى من نظام إدارة المحتوى الخاص بك).
+
+#### إعادة التحقق بناءً على الوقت
+
+لإعادة التحقق من البيانات على فترات زمنية، يمكنك استخدام خيار `next.revalidate` في `fetch` لتعيين عمر ذاكرة التخزين المؤقت للمورد (بالثواني).
+
+```js
+// إعادة التحقق على الأكثر كل ساعة
+fetch('https://...', { next: { revalidate: 3600 } })
+```
+
+بدلاً من ذلك، يمكنك استخدام [خيارات تكوين قطاع المسار](#segment-config-options) لتكوين جميع طلبات `fetch` في قطاع أو للحالات التي لا يمكنك فيها استخدام `fetch`.
+
+**كيف تعمل إعادة التحقق بناءً على الوقت**
+
+<Image
+  alt="رسم بياني يوضح كيفية عمل إعادة التحقق بناءً على الوقت، بعد فترة إعادة التحقق، يتم إرجاع البيانات القديمة للطلب الأول، ثم يتم إعادة التحقق من البيانات."
+  srcLight="/docs/light/time-based-revalidation.png"
+  srcDark="/docs/dark/time-based-revalidation.png"
+  width="1600"
+  height="1252"
+/>
+
+- في المرة الأولى التي يتم فيها استدعاء طلب fetch مع `revalidate`، سيتم جلب البيانات من مصدر البيانات الخارجي وتخزينها في ذاكرة البيانات المؤقتة.
+- أي طلبات يتم استدعاؤها خلال الإطار الزمني المحدد (مثل 60 ثانية) سترجع البيانات المخزنة مؤقتًا.
+- بعد الإطار الزمني، سيظل الطلب التالي يرجع البيانات المخزنة (القديمة الآن) مؤقتًا.
+  - سيؤدي Next.js إلى إعادة التحقق من البيانات في الخلفية.
+  - بمجرد جلب البيانات بنجاح، سيحدث Next.js ذاكرة البيانات المؤقتة بالبيانات الجديدة.
+  - إذا فشلت إعادة التحقق في الخلفية، سيتم الاحتفاظ بالبيانات السابقة دون تغيير.
+
+هذا مشابه لسلوك [**stale-while-revalidate**](https://web.dev/stale-while-revalidate/).
+
+#### إعادة التحقق عند الطلب
+
+يمكن إعادة التحقق من البيانات عند الطلب عن طريق المسار ([`revalidatePath`](#revalidatepath)) أو عن طريق علامة ذاكرة التخزين المؤقت ([`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)).
+
+**كيف تعمل إعادة التحقق عند الطلب**
+
+<Image
+  alt="رسم بياني يوضح كيفية عمل إعادة التحقق عند الطلب، يتم تحديث ذاكرة البيانات المؤقتة بالبيانات الجديدة بعد طلب إعادة التحقق."
+  srcLight="/docs/light/on-demand-revalidation.png"
+  srcDark="/docs/dark/on-demand-revalidation.png"
+  width="1600"
+  height="1082"
+/>
+
+- في المرة الأولى التي يتم فيها استدعاء طلب `fetch`، سيتم جلب البيانات من مصدر البيانات الخارجي وتخزينها في ذاكرة البيانات المؤقتة.
+- عند تشغيل إعادة التحقق عند الطلب، سيتم مسح إدخالات ذاكرة التخزين المؤقت المناسبة من الذاكرة.
+  - يختلف هذا عن إعادة التحقق بناءً على الوقت، التي تحتفظ بالبيانات القديمة في الذاكرة حتى يتم جلب البيانات الجديدة.
+- في المرة التالية التي يتم فيها إجراء طلب، سيكون مرة أخرى cache `MISS`، وسيتم جلب البيانات من مصدر البيانات الخارجي وتخزينها في ذاكرة البيانات المؤقتة.
+
+### عدم المشاركة
+
+لطلبات جلب البيانات الفردية، يمكنك عدم المشاركة في التخزين المؤقت عن طريق تعيين خيار [`cache`](#fetch-optionscache) إلى `no-store`. وهذا يعني أنه سيتم جلب البيانات كلما تم استدعاء `fetch`.
+
+```jsx
+// عدم المشاركة في التخزين المؤقت لطلب `fetch` فردي
+fetch(`https://...`, { cache: 'no-store' })
+```
+
+بدلاً من ذلك، يمكنك أيضًا استخدام [خيارات تكوين قطاع المسار](#segment-config-options) لعدم المشاركة في التخزين المؤقت لقطاع مسار معين. سيؤثر هذا على جميع طلبات البيانات في قطاع المسار، بما في ذلك مكتبات الطرف الثالث.
+
+```jsx
+// عدم المشاركة في التخزين المؤقت لجميع طلبات البيانات في قطاع المسار
+export const dynamic = 'force-dynamic'
+```
+
+> **ذاكرة البيانات المؤقتة في Vercel**
+>
+> إذا تم نشر تطبيق Next.js الخاص بك على Vercel، نوصي بقراءة وثائق [ذاكرة البيانات المؤقتة في Vercel](https://vercel.com/docs/infrastructure/data-cache) لفهم أفضل للميزات الخاصة بـ Vercel.
+
+## ذاكرة المسار الكامل المؤقتة
+
+> **مصطلحات ذات صلة**:
+>
+> قد ترى مصطلحات **التحسين الثابت التلقائي** أو **توليد الموقع الثابت** أو **التصيير الثابت** تُستخدم بالتبادل للإشارة إلى عملية تصيير وتخزين مسارات تطبيقك مؤقتًا في وقت البناء.
+
+يُصَيِّر Next.js المسارات ويخزنها مؤقتًا تلقائيًا في وقت البناء. هذا تحسين يسمح لك بتقديم المسار المخزن مؤقتًا بدلاً من التصيير على الخادم لكل طلب، مما يؤدي إلى تحميل أسرع للصفحات.
+
+لفهم كيفية عمل ذاكرة المسار الكامل المؤقتة، من المفيد النظر إلى كيفية تعامل React مع التصيير، وكيف يخزن Next.js النتيجة:
+
+### 1. تصيير React على الخادم
+
+على الخادم، يستخدم Next.js واجهات برمجة تطبيقات React لتنظيم التصيير. يتم تقسيم عمل التصيير إلى أجزاء: حسب أجزاء المسار الفردية وحدود Suspense.
+
+يتم تصيير كل جزء في خطوتين:
+
+1. يُصَيِّر React مكونات الخادم إلى تنسيق بيانات خاص مُحَسَّن للبث، يُسمى **حمولة مكون خادم React**.
+2. يستخدم Next.js حمولة مكون خادم React وتعليمات JavaScript لمكون العميل لتصيير **HTML** على الخادم.
+
+هذا يعني أنه لا يتعين علينا الانتظار حتى يتم تصيير كل شيء قبل تخزين العمل مؤقتًا أو إرسال استجابة. بدلاً من ذلك، يمكننا بث استجابة أثناء اكتمال العمل.
+
+> **ما هي حمولة مكون خادم React؟**
+>
+> حمولة مكون خادم React هي تمثيل ثنائي مضغوط لشجرة مكونات خادم React المُصَيَّرة. يتم استخدامها بواسطة React على العميل لتحديث DOM للمتصفح. تحتوي حمولة مكون خادم React على:
+>
+> - نتيجة تصيير مكونات الخادم
+> - عناصر نائبة لمكان تصيير مكونات العميل ومراجع لملفات JavaScript الخاصة بها
+> - أي خصائص تم تمريرها من مكون خادم إلى مكون عميل
+>
+> لمعرفة المزيد، راجع وثائق [مكونات الخادم](/docs/app/building-your-application/rendering/server-components).
+
+### 2. تخزين Next.js مؤقتًا على الخادم (ذاكرة المسار الكامل المؤقتة)
+
+<Image
+  alt="السلوك الافتراضي لذاكرة المسار الكامل المؤقتة، يوضح كيفية تخزين حمولة مكون خادم React وHTML مؤقتًا على الخادم للمسارات المصَيَّرة بشكل ثابت."
+  srcLight="/docs/light/full-route-cache.png"
+  srcDark="/docs/dark/full-route-cache.png"
+  width="1600"
+  height="888"
+/>
+
+السلوك الافتراضي لـ Next.js هو تخزين نتيجة التصيير (حمولة مكون خادم React وHTML) لمسار على الخادم مؤقتًا. ينطبق هذا على المسارات المصَيَّرة بشكل ثابت في وقت البناء، أو أثناء إعادة التحقق.
+
+### 3. ترطيب React والمصالحة على العميل
+
+في وقت الطلب، على العميل:
+
+1. يتم استخدام HTML لعرض معاينة أولية سريعة غير تفاعلية لمكونات العميل والخادم.
+2. تُستخدم حمولة مكونات خادم React لمصالحة أشجار مكونات العميل والخادم المُصَيَّرة، وتحديث DOM.
+3. تُستخدم تعليمات JavaScript [لترطيب](https://react.dev/reference/react-dom/client/hydrateRoot) مكونات العميل وجعل التطبيق تفاعليًا.
+
+### 4. تخزين Next.js مؤقتًا على العميل (ذاكرة الموجه المؤقتة)
+
+يتم تخزين حمولة مكون خادم React في [ذاكرة الموجه المؤقتة](#router-cache) على جانب العميل - وهي ذاكرة تخزين مؤقت في الذاكرة، مقسمة حسب أجزاء المسار الفردية. تُستخدم ذاكرة الموجه المؤقتة لتحسين تجربة التنقل عن طريق تخزين المسارات التي تمت زيارتها مسبقًا وجلب المسارات المستقبلية مسبقًا.
+
+### 5. التنقلات اللاحقة
+
+في التنقلات اللاحقة أو أثناء الجلب المسبق (prefetching)، سيتحقق Next.js مما إذا كان حمولة مكونات الخادم (React Server Components Payload) مخزنة في ذاكرة التوجيه (Router Cache). إذا كانت موجودة، فسيتم تخطي إرسال طلب جديد إلى الخادم.
+
+إذا لم تكن أجزاء المسار موجودة في الذاكرة المؤقتة، سيقوم Next.js بجلب حمولة مكونات الخادم من الخادم، وملء ذاكرة التوجيه على العميل.
+
+### العرض الثابت والديناميكي
+
+ما إذا كان المسار مخزناً مؤقتاً أثناء البناء أم لا يعتمد على ما إذا كان يتم عرضه بشكل ثابت أو ديناميكي. يتم تخزين المسارات الثابتة مؤقتاً افتراضياً، بينما يتم عرض المسارات الديناميكية وقت الطلب ولا يتم تخزينها مؤقتاً.
+
+يوضح هذا الرسم البياني الفرق بين المسارات المعروضة بشكل ثابت وديناميكي، مع البيانات المخزنة وغير المخزنة مؤقتاً:
+
+<Image
+  alt="كيف يؤثر العرض الثابت والديناميكي على ذاكرة المسار الكاملة (Full Route Cache). يتم تخزين المسارات الثابتة مؤقتاً أثناء البناء أو بعد إعادة التحقق من البيانات، بينما لا يتم تخزين المسارات الديناميكية مؤقتاً أبداً"
+  srcLight="/docs/light/static-and-dynamic-routes.png"
+  srcDark="/docs/dark/static-and-dynamic-routes.png"
+  width="1600"
+  height="1314"
+/>
+
+تعرف على المزيد حول [العرض الثابت والديناميكي](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies).
+
+### المدة الزمنية
+
+افتراضياً، تكون ذاكرة المسار الكاملة (Full Route Cache) دائمة. وهذا يعني أن ناتج العرض يتم تخزينه مؤقتاً عبر طلبات المستخدمين.
+
+### إبطال الصلاحية
+
+هناك طريقتان يمكنك من خلالهما إبطال صلاحية ذاكرة المسار الكاملة:
+
+- **[إعادة التحقق من البيانات](/docs/app/building-your-application/caching#revalidating)**: إعادة التحقق من [ذاكرة البيانات (Data Cache)](#data-cache) سيقوم بدوره بإبطال صلاحية ذاكرة التوجيه (Router Cache) عن طريق إعادة عرض المكونات على الخادم وتخزين ناتج العرض الجديد مؤقتاً.
+- **إعادة النشر**: على عكس ذاكرة البيانات التي تظل عبر عمليات النشر، يتم مسح ذاكرة المسار الكاملة عند عمليات النشر الجديدة.
+
+### الانسحاب
+
+يمكنك الانسحاب من ذاكرة المسار الكاملة، أو بعبارة أخرى، عرض المكونات ديناميكياً لكل طلب وارد، عن طريق:
+
+- **استخدام [وظيفة ديناميكية (Dynamic Function)](#dynamic-functions)**: سيؤدي هذا إلى إخراج المسار من ذاكرة المسار الكاملة وعرضه ديناميكياً وقت الطلب. لا يزال يمكن استخدام ذاكرة البيانات.
+- **استخدام خيارات تكوين جزء المسار `dynamic = 'force-dynamic'` أو `revalidate = 0`**: سيؤدي هذا إلى تخطي ذاكرة المسار الكاملة وذاكرة البيانات. مما يعني أنه سيتم عرض المكونات وجلب البيانات في كل طلب وارد إلى الخادم. ستظل ذاكرة التوجيه سارية لأنها ذاكرة على جانب العميل.
+- **الانسحاب من [ذاكرة البيانات (Data Cache)](#data-cache)**: إذا كان للمسار طلب `fetch` غير مخزن مؤقتاً، فسيؤدي هذا إلى إخراج المسار من ذاكرة المسار الكاملة. سيتم جلب البيانات لطلب `fetch` المحدد لكل طلب وارد. ستظل طلبات `fetch` الأخرى التي لا تنسحب من التخزين المؤقت مخزنة في ذاكرة البيانات. وهذا يسمح بمزيج من البيانات المخزنة وغير المخزنة مؤقتاً.
+
+## ذاكرة التوجيه (Router Cache)
+
+> **المصطلحات ذات الصلة:**
+>
+> قد تشاهد الإشارة إلى ذاكرة التوجيه باسم **ذاكرة جانب العميل (Client-side Cache)** أو **ذاكرة الجلب المسبق (Prefetch Cache)**. بينما تشير **ذاكرة الجلب المسبق** إلى أجزاء المسار التي تم جلبها مسبقاً، تشير **ذاكرة جانب العميل** إلى ذاكرة التوجيه بأكملها، والتي تشمل كلاً من الأجزاء التي تمت زيارتها والتي تم جلبها مسبقاً.
+> هذه الذاكرة المؤقتة تنطبق تحديداً على Next.js ومكونات الخادم، وهي مختلفة عن [bfcache](https://web.dev/bfcache/) المتصفح، على الرغم من أن لها نتيجة مماثلة.
+
+يمتلك Next.js ذاكرة مؤقتة على جانب العميل في الذاكرة تقوم بتخزين حمولة مكونات الخادم (React Server Component Payload)، مقسمة حسب أجزاء المسار الفردية، طوال مدة جلسة المستخدم. وهذا ما يسمى بذاكرة التوجيه (Router Cache).
+
+**كيف تعمل ذاكرة التوجيه**
+
+<Image
+  alt="كيف تعمل ذاكرة التوجيه للمسارات الثابتة والديناميكية، مع عرض MISS و HIT للتنقلات الأولية واللاحقة."
+  srcLight="/docs/light/router-cache.png"
+  srcDark="/docs/dark/router-cache.png"
+  width="1600"
+  height="1375"
+/>
+
+عندما يتنقل المستخدمون بين المسارات، يقوم Next.js بتخزين أجزاء المسار التي تمت زيارتها [ويجلب مسبقاً](/docs/app/building-your-application/routing/linking-and-navigating#1-prefetching) المسارات التي من المحتمل أن يتنقل إليها المستخدم (بناءً على مكونات `<Link>` في نطاق الرؤية لديهم).
+
+ينتج عن هذا تحسين تجربة التنقل للمستخدم:
+
+- تنقل فوري للخلف/الأمام لأن المسارات التي تمت زيارتها مخزنة مؤقتاً وتنقل سريع إلى المسارات الجديدة بسبب الجلب المسبق و[العرض الجزئي (Partial Rendering)](/docs/app/building-your-application/routing/linking-and-navigating#3-partial-rendering).
+- لا يوجد إعادة تحميل كاملة للصفحة بين التنقلات ويتم الحفاظ على حالة React وحالة المتصفح.
+
+> **الفرق بين ذاكرة التوجيه وذاكرة المسار الكاملة**:
+>
+> تقوم ذاكرة التوجيه بتخزين حمولة مكونات الخادم (React Server Component Payload) مؤقتاً في المتصفح طوال مدة جلسة المستخدم، بينما تقوم ذاكرة المسار الكاملة بتخزين حمولة مكونات الخادم وHTML بشكل دائم على الخادم عبر طلبات متعددة للمستخدمين.
+>
+> بينما تقوم ذاكرة المسار الكاملة بتخزين المسارات المعروضة بشكل ثابت فقط، تنطبق ذاكرة التوجيه على كل من المسارات المعروضة بشكل ثابت وديناميكي.
+
+### المدة الزمنية
+
+يتم تخزين الذاكرة المؤقتة في الذاكرة المؤقتة للمتصفح. هناك عاملان يحددان المدة التي تستمر فيها ذاكرة التوجيه:
+
+- **الجلسة**: تظل الذاكرة المؤقتة عبر التنقل. ومع ذلك، يتم مسحها عند تحديث الصفحة.
+- **فترة الإبطال التلقائي**: يتم إبطال صلاحية ذاكرة جزء فردي تلقائياً بعد وقت محدد. تعتمد المدة على ما إذا كان المسار [معروضاً بشكل ثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default) أو [ديناميكي](/docs/app/building-your-application/rendering/server-components#dynamic-rendering):
+  - **المعروض ديناميكياً**: 30 ثانية
+  - **المعروض ثابتاً**: 5 دقائق
+
+بينما يؤدي تحديث الصفحة إلى مسح **جميع** الأجزاء المخزنة مؤقتاً، تؤثر فترة الإبطال التلقائي فقط على الجزء الفردي من وقت آخر وصول إليه أو إنشائه.
+
+عن طريق إضافة `prefetch={true}` أو استدعاء `router.prefetch` لمسار معروض ديناميكياً، يمكنك اختيار التخزين المؤقت لمدة 5 دقائق.
+
+### إبطال الصلاحية
+
+هناك طريقتان يمكنك من خلالهما إبطال صلاحية ذاكرة التوجيه:
+
+- في **إجراء خادم (Server Action)**:
+  - إعادة التحقق من البيانات حسب الطلب عن طريق المسار باستخدام ([`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)) أو عن طريق علامة الذاكرة المؤقتة باستخدام ([`revalidateTag`](/docs/app/api-reference/functions/revalidateTag))
+  - يؤدي استخدام [`cookies.set`](/docs/app/api-reference/functions/cookies#cookiessetname-value-options) أو [`cookies.delete`](/docs/app/api-reference/functions/cookies#deleting-cookies) إلى إبطال صلاحية ذاكرة التوجيه لمنع المسارات التي تستخدم ملفات تعريف الارتباط من أن تصبح قديمة (مثل المصادقة).
+- يؤدي استدعاء [`router.refresh`](/docs/app/api-reference/functions/use-router) إلى إبطال صلاحية ذاكرة التوجيه وإجراء طلب جديد إلى الخادم للمسار الحالي.
+
+### الانسحاب
+
+لا يمكن الانسحاب من ذاكرة التوجيه.
+
+يمكنك الانسحاب من **الجلب المسبق** عن طريق تعيين خاصية `prefetch` لمكون `<Link>` على `false`. ومع ذلك، سيظل هذا يقوم بتخزين أجزاء المسار مؤقتاً لمدة 30 ثانية للسماح بالتنقل الفوري بين الأجزاء المتداخلة، مثل أشرطة التبويب، أو التنقل للخلف والأمام. ستظل المسارات التي تمت زيارتها مخزنة مؤقتاً.
+
+## تفاعلات الذاكرة المؤقتة
+
+عند تكوين آليات التخزين المؤقت المختلفة، من المهم فهم كيفية تفاعلها مع بعضها البعض:
+
+### ذاكرة البيانات وذاكرة المسار الكاملة
+
+- إعادة التحقق من البيانات أو الانسحاب من ذاكرة البيانات **سوف** يبطل صلاحية ذاكرة المسار الكاملة، لأن ناتج العرض يعتمد على البيانات.
+- إبطال صلاحية ذاكرة المسار الكاملة أو الانسحاب منها **لا يؤثر** على ذاكرة البيانات. يمكنك عرض مسار ديناميكي يحتوي على كل من البيانات المخزنة وغير المخزنة مؤقتاً. هذا مفيد عندما تستخدم معظم صفحتك بيانات مخزنة مؤقتاً، ولكن لديك بعض المكونات التي تعتمد على البيانات التي يجب جلبها وقت الطلب. يمكنك العرض الديناميكي دون القلق بشأن تأثير الأداء لإعادة جلب جميع البيانات.
+
+### ذاكرة البيانات وذاكرة التوجيه على جانب العميل
+
+- إعادة التحقق من ذاكرة البيانات في [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers) **لن** يبطل صلاحية ذاكرة التوجيه على الفور لأن معالج المسار غير مرتبط بمسار محدد. هذا يعني أن ذاكرة التوجيه ستستمر في تقديم الحمولة السابقة حتى تحديث قوي، أو انتهاء فترة الإبطال التلقائي.
+- لإبطال صلاحية ذاكرة البيانات وذاكرة التوجيه على الفور، يمكنك استخدام [`revalidatePath`](#revalidatepath) أو [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag) في [إجراء خادم (Server Action)](/docs/app/building-your-application/data-fetching/forms-and-mutations).
+
+## واجهات برمجة التطبيقات (APIs)
+
+يوضح الجدول التالي نظرة عامة على كيفية تأثير واجهات برمجة التطبيقات المختلفة لـ Next.js على التخزين المؤقت:
+
+| الواجهة البرمجية                                                                     | ذاكرة التوجيه               | ذاكرة المسار الكاملة      | ذاكرة البيانات            | ذاكرة React |
+| ----------------------------------------------------------------------- | -------------------------- | --------------------- | --------------------- | ----------- |
+| [`<Link prefetch>`](#link)                                              | تخزين مؤقت                      |                       |                       |             |
+| [`router.prefetch`](#routerprefetch)                                    | تخزين مؤقت                      |                       |                       |             |
+| [`router.refresh`](#routerrefresh)                                      | إعادة التحقق                 |                       |                       |             |
+| [`fetch`](#fetch)                                                       |                            |                       | تخزين مؤقت                 | تخزين مؤقت       |
+| [`fetch` `options.cache`](#fetch-optionscache)                          |                            |                       | تخزين مؤقت أو انسحاب      |             |
+| [`fetch` `options.next.revalidate`](#fetch-optionsnextrevalidate)       |                            | إعادة التحقق            | إعادة التحقق            |             |
+| [`fetch` `options.next.tags`](#fetch-optionsnexttags-and-revalidatetag) |                            | تخزين مؤقت                 | تخزين مؤقت                 |             |
+| [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)             | إعادة التحقق (إجراء خادم) | إعادة التحقق            | إعادة التحقق            |             |
+| [`revalidatePath`](#revalidatepath)                                     | إعادة التحقق (إجراء خادم) | إعادة التحقق            | إعادة التحقق            |             |
+| [`const revalidate`](#segment-config-options)                           |                            | إعادة التحقق أو انسحاب | إعادة التحقق أو انسحاب |             |
+| [`const dynamic`](#segment-config-options)                              |                            | تخزين مؤقت أو انسحاب      | تخزين مؤقت أو انسحاب      |             |
+| [`cookies`](#cookies)                                                   | إعادة التحقق (إجراء خادم) | انسحاب               |                       |             |
+| [`headers`, `useSearchParams`, `searchParams`](#dynamic-functions)      |                            | انسحاب               |                       |             |
+| [`generateStaticParams`](#generatestaticparams)                         |                            | تخزين مؤقت                 |                       |             |
+| [`React.cache`](#react-cache-function)                                  |                            |                       |                       | تخزين مؤقت       |
+| [`unstable_cache`](#unstable_cache) (قريباً)                       |                            |                       |                       |             |
+
+### `<Link>`
+
+افتراضياً، يقوم مكون `<Link>` تلقائياً بجلب المسارات مسبقاً من ذاكرة المسار الكاملة وإضافة حمولة مكونات الخادم (React Server Component Payload) إلى ذاكرة التوجيه.
+
+لتعطيل الجلب المسبق، يمكنك تعيين خاصية `prefetch` على `false`. ولكن هذا لن يتخطى التخزين المؤقت بشكل دائم، سيظل جزء المسار مخزناً مؤقتاً على جانب العميل عندما يزور المستخدم المسار.
+
+تعرف على المزيد حول [مكون `<Link>`](/docs/app/api-reference/components/link).
+
+### `router.prefetch`
+
+يمكن استخدام خيار `prefetch` في خطاف `useRouter` لجلب مسار مسبقاً يدوياً. هذا يضيف حمولة مكونات الخادم (React Server Component Payload) إلى ذاكرة التوجيه.
+
+راجع مرجع واجهة برمجة التطبيقات لـ[خطاف `useRouter`](/docs/app/api-reference/functions/use-router).
+
+### `router.refresh`
+
+يمكن استخدام خيار `refresh` في خطاف `useRouter` لتحديث مسار يدوياً. هذا يمسح ذاكرة التوجيه بالكامل، ويجعل طلباً جديداً إلى الخادم للمسار الحالي. لا يؤثر `refresh` على ذاكرة البيانات أو ذاكرة المسار الكاملة.
+
+سيتم التوفيق بين نتيجة العرض على العميل مع الحفاظ على حالة React وحالة المتصفح.
+
+راجع مرجع واجهة برمجة التطبيقات لـ[خطاف `useRouter`](/docs/app/api-reference/functions/use-router).
+
+### `fetch`
+
+يتم تخزين البيانات التي يتم إرجاعها من `fetch` تلقائياً في ذاكرة البيانات.
+
+```jsx
+// مخزن مؤقت افتراضياً. `force-cache` هو الخيار الافتراضي ويمكن حذفه.
+fetch(`https://...`, { cache: 'force-cache' })
+```
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `fetch`](/docs/app/api-reference/functions/fetch) لمزيد من الخيارات.
+
+### `fetch options.cache`
+
+يمكنك الانسحاب من تخزين بيانات طلبات `fetch` الفردية عن طريق تعيين خيار `cache` على `no-store`:
+
+```jsx
+// الانسحاب من التخزين المؤقت
+fetch(`https://...`, { cache: 'no-store' })
+```
+
+نظراً لأن ناتج العرض يعتمد على البيانات، فإن استخدام `cache: 'no-store'` سيتخطى أيضاً ذاكرة المسار الكاملة للمسار حيث يتم استخدام طلب `fetch`. أي أن المسار سيتم عرضه ديناميكياً في كل طلب، ولكن يمكنك الحصول على طلبات بيانات أخرى مخزنة مؤقتاً في نفس المسار.
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `fetch`](/docs/app/api-reference/functions/fetch) لمزيد من الخيارات.
+
+### `fetch options.next.revalidate`
+
+يمكنك استخدام خيار `next.revalidate` لـ `fetch` لتعيين فترة إعادة التحقق (بالثواني) لطلب `fetch` فردي. سيؤدي هذا إلى إعادة التحقق من ذاكرة البيانات، والتي بدورها ستقوم بإعادة التحقق من ذاكرة المسار الكاملة. سيتم جلب بيانات جديدة، وسيتم إعادة عرض المكونات على الخادم.
+
+```jsx
+// إعادة التحقق على الأكثر بعد ساعة واحدة
+fetch(`https://...`, { next: { revalidate: 3600 } })
+```
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `fetch`](/docs/app/api-reference/functions/fetch) لمزيد من الخيارات.
+
+### `fetch options.next.tags` و `revalidateTag`
+
+يمتلك Next.js نظام وضع علامات على الذاكرة المؤقتة للتخزين المؤقت الدقيق للبيانات وإعادة التحقق منها.
+
+1. عند استخدام `fetch` أو `unstable_cache`، لديك خيار وضع علامات على إدخالات الذاكرة المؤقتة بواحدة أو أكثر من العلامات.
+2. ثم يمكنك استدعاء `revalidateTag` لمسح إدخالات الذاكرة المؤقتة المرتبطة بهذه العلامة.
+
+على سبيل المثال، يمكنك تعيين علامة عند جلب البيانات:
+
+```jsx
+// تخزين البيانات مع علامة
+fetch(`https://...`, { next: { tags: ['a', 'b', 'c'] } })
+```
+
+ثم استدعاء `revalidateTag` مع علامة لمسح إدخال الذاكرة المؤقتة:
+
+```jsx
+// إعادة التحقق من الإدخالات بعلامة محددة
+revalidateTag('a')
+```
+
+هناك مكانان يمكنك استخدام `revalidateTag` فيهما، اعتماداً على ما تحاول تحقيقه:
+
+1. [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) - لإعادة التحقق من البيانات استجابةً لحدث طرف ثالث (مثل webhook). هذا لن يبطل صلاحية ذاكرة التوجيه على الفور لأن معالج المسار غير مرتبط بمسار محدد.
+2. [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/forms-and-mutations) - لإعادة التحقق من البيانات بعد إجراء المستخدم (مثل تقديم نموذج). هذا سيبطل صلاحية ذاكرة التوجيه للمسار المرتبط.
+
+### `revalidatePath`
+
+تتيح لك `revalidatePath` إعادة التحقق يدويًا من البيانات **و** إعادة عرض مقاطع المسار أسفل مسار معين في عملية واحدة. يؤدي استدعاء طرق `revalidatePath` إلى إعادة التحقق من ذاكرة التخزين المؤقت للبيانات (Data Cache)، مما يؤدي بدوره إلى إبطال ذاكرة التخزين المؤقت الكاملة للمسار (Full Route Cache).
+
+```jsx
+revalidatePath('/')
+```
+
+هناك مكانان يمكنك استخدام `revalidatePath` فيهما، اعتمادًا على ما تحاول تحقيقه:
+
+1. [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) - لإعادة التحقق من البيانات استجابةً لحدث طرف ثالث (مثل webhook).
+2. [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/forms-and-mutations) - لإعادة التحقق من البيانات بعد تفاعل المستخدم (مثل تقديم نموذج، النقر على زر).
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `revalidatePath`](/docs/app/api-reference/functions/revalidatePath) لمزيد من المعلومات.
+
+> **`revalidatePath`** مقابل **`router.refresh`**:
+>
+> يؤدي استدعاء `router.refresh` إلى مسح ذاكرة التخزين المؤقت للموجه (Router cache)، وإعادة عرض مقاطع المسار على الخادم دون إبطال ذاكرة التخزين المؤقت للبيانات (Data Cache) أو ذاكرة التخزين المؤقت الكاملة للمسار (Full Route Cache).
+>
+> الفرق هو أن `revalidatePath` تفرغ ذاكرة التخزين المؤقت للبيانات وذاكرة التخزين المؤقت الكاملة للمسار، بينما `router.refresh()` لا تغير ذاكرة التخزين المؤقت للبيانات وذاكرة التخزين المؤقت الكاملة للمسار، لأنها واجهة برمجة تطبيقات من جانب العميل.
+
+### الدوال الديناميكية (Dynamic Functions)
+
+`cookies`، `headers`، `useSearchParams`، و `searchParams` هي دوال ديناميكية تعتمد على معلومات الطلب الواردة أثناء التشغيل. استخدامها سيؤدي إلى استبعاد المسار من ذاكرة التخزين المؤقت الكاملة للمسار (Full Route Cache)، بمعنى آخر، سيتم عرض المسار ديناميكيًا.
+
+#### `cookies`
+
+استخدام `cookies.set` أو `cookies.delete` في إجراء خادم (Server Action) يبطل ذاكرة التخزين المؤقت للموجه (Router Cache) لمنع المسارات التي تستخدم ملفات تعريف الارتباط (cookies) من أن تصبح قديمة (على سبيل المثال، لتعكس تغييرات المصادقة).
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `cookies`](/docs/app/api-reference/functions/cookies).
+
+### خيارات تكوين المقطع (Segment Config Options)
+
+يمكن استخدام خيارات تكوين مقطع المسار (Route Segment Config) لتجاوز الإعدادات الافتراضية لمقطع المسار أو عندما لا تتمكن من استخدام واجهة برمجة التطبيقات `fetch` (على سبيل المثال، عميل قاعدة بيانات أو مكتبات طرف ثالث).
+
+ستؤدي خيارات تكوين مقطع المسار التالية إلى استبعاد ذاكرة التخزين المؤقت للبيانات (Data Cache) وذاكرة التخزين المؤقت الكاملة للمسار (Full Route Cache):
+
+- `const dynamic = 'force-dynamic'`
+- `const revalidate = 0`
+
+راجع [توثيق تكوين مقطع المسار (Route Segment Config)](/docs/app/api-reference/file-conventions/route-segment-config) لمزيد من الخيارات.
+
+### `generateStaticParams`
+
+بالنسبة للمقاطع الديناميكية (dynamic segments) (على سبيل المثال `app/blog/[slug]/page.js`)، يتم تخزين المسارات المقدمة من `generateStaticParams` في ذاكرة التخزين المؤقت الكاملة للمسار (Full Route Cache) أثناء وقت البناء. في وقت الطلب، سيخزن Next.js أيضًا المسارات التي لم تكن معروفة في وقت البناء عند زيارتها لأول مرة.
+
+يمكنك تعطيل التخزين المؤقت في وقت الطلب باستخدام خيار `export const dynamicParams = false` في مقطع المسار. عند استخدام خيار التكوين هذا، سيتم تقديم المسارات المقدمة من `generateStaticParams` فقط، وستؤدي المسارات الأخرى إلى خطأ 404 أو تطابق (في حالة [المسارات الشاملة (catch-all routes)](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)).
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
+
+### دالة React `cache`
+
+تتيح لك دالة React `cache` تخزين القيمة المرجعة للدالة مؤقتًا، مما يسمح لك باستدعاء نفس الدالة عدة مرات مع تنفيذها مرة واحدة فقط.
+
+نظرًا لأن طلبات `fetch` يتم تخزينها مؤقتًا تلقائيًا، فلا تحتاج إلى تغليفها في React `cache`. ومع ذلك، يمكنك استخدام `cache` لتخزين طلبات البيانات يدويًا للحالات التي لا تكون فيها واجهة برمجة التطبيقات `fetch` مناسبة. على سبيل المثال، بعض عملاء قواعد البيانات، أو عملاء نظام إدارة المحتوى (CMS)، أو عملاء GraphQL.
+
+```tsx filename="utils/get-item.ts" switcher
+import { cache } from 'react'
+import db from '@/lib/db'
+
+export const getItem = cache(async (id: string) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
+
+```jsx filename="utils/get-item.js" switcher
+import { cache } from 'react'
+import db from '@/lib/db'
+
+export const getItem = cache(async (id) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
+
+### `unstable_cache`
+
+`unstable_cache` هي واجهة برمجة تطبيقات تجريبية لإضافة قيم إلى ذاكرة التخزين المؤقت للبيانات (Data Cache) عندما لا تكون واجهة برمجة التطبيقات `fetch` مناسبة. على سبيل المثال، عند استخدام عملاء قواعد البيانات، أو عملاء نظام إدارة المحتوى (CMS)، أو GraphQL.
+
+```jsx
+import { unstable_cache } from 'next/cache'
+
+export default async function Page() {
+  const cachedData = await unstable_cache(
+    async () => {
+      const data = await db.query('...')
+      return data
+    },
+    ['cache-key'],
+    {
+      tags: ['a', 'b', 'c'],
+      revalidate: 10,
+    }
+  )()
+}
+```
+
+> **تحذير**: هذه الواجهة قيد التطوير، ولا نوصي باستخدامها في الإنتاج. تم سردها هنا لإظهار الاتجاه المستقبلي لـ ذاكرة التخزين المؤقت للبيانات (Data Cache).
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/01-css-modules.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/01-css-modules.mdx
new file mode 100644
index 00000000..fbc3a295
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/01-css-modules.mdx
@@ -0,0 +1,297 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:03.130Z
+title: وحدات CSS
+description: تنسيق تطبيق Next.js باستخدام وحدات CSS.
+---
+
+{/* المحتوى مشترك بين تطبيقات الموجه (router) والصفحات. يمكن استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+<PagesOnly>
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مثال أساسي لـ CSS](https://github.com/vercel/next.js/tree/canary/examples/basic-css)
+
+</details>
+
+</PagesOnly>
+
+يدعم Next.js ميزة وحدات CSS مدمجة باستخدام امتداد `.module.css`.
+
+تقوم وحدات CSS بتحديد نطاق CSS محليًا عن طريق إنشاء اسم فئة فريد تلقائيًا. هذا يسمح لك باستخدام نفس اسم الفئة في ملفات مختلفة دون القلق عن التعارضات. هذا السلوك يجعل وحدات CSS الطريقة المثالية لتضمين CSS على مستوى المكون.
+
+## مثال
+
+<AppOnly>
+يمكن استيراد وحدات CSS إلى أي ملف داخل مجلد `app`:
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import styles from './styles.module.css'
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <section className={styles.dashboard}>{children}</section>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import styles from './styles.module.css'
+
+export default function DashboardLayout({ children }) {
+  return <section className={styles.dashboard}>{children}</section>
+}
+```
+
+```css filename="app/dashboard/styles.module.css"
+.dashboard {
+  padding: 24px;
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+على سبيل المثال، لنفكر في مكون `Button` قابل لإعادة الاستخدام في مجلد `components/`:
+
+أولاً، أنشئ `components/Button.module.css` بالمحتوى التالي:
+
+```css filename="Button.module.css"
+/*
+لا داعي للقلق بشأن تعارض .error {} مع أي ملفات `.css` أو
+`.module.css` أخرى!
+*/
+.error {
+  color: white;
+  background-color: red;
+}
+```
+
+ثم أنشئ `components/Button.js`، وقم باستيراد واستخدام ملف CSS أعلاه:
+
+```jsx filename="components/Button.js"
+import styles from './Button.module.css'
+
+export function Button() {
+  return (
+    <button
+      type="button"
+      // لاحظ كيف يتم الوصول إلى فئة "error" كخاصية في كائن
+      // `styles` المستورد.
+      className={styles.error}
+    >
+      Destroy
+    </button>
+  )
+}
+```
+
+</PagesOnly>
+
+وحدات CSS هي ميزة اختيارية وتكون مفعلة فقط للملفات ذات الامتداد `.module.css`.
+لا تزال أوراق الأنماط العادية `<link>` وملفات CSS العامة مدعومة.
+
+في بيئة الإنتاج، سيتم دمج جميع ملفات وحدات CSS تلقائيًا في ملفات `.css` مضغوطة ومقسمة بالكود. تمثل هذه الملفات مسارات تنفيذ ساخنة في تطبيقك، مما يضمن تحميل الحد الأدنى من CSS لرسم تطبيقك.
+
+## الأنماط العامة
+
+<AppOnly>
+يمكن استيراد الأنماط العامة إلى أي تخطيط أو صفحة أو مكون داخل مجلد `app`.
+
+> **ملاحظة مفيدة**: هذا يختلف عن مجلد `pages` حيث يمكنك استيراد الأنماط العامة فقط داخل ملف `_app.js`.
+
+على سبيل المثال، لنفكر في ورقة أنماط باسم `app/global.css`:
+
+```css
+body {
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+```
+
+داخل التخطيط الجذري (`app/layout.js`)، قم باستيراد ورقة الأنماط `global.css` لتطبيق الأنماط على كل مسار في تطبيقك:
+
+```tsx filename="app/layout.tsx" switcher
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import './global.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import './global.css'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لإضافة ورقة أنماط إلى تطبيقك، قم باستيراد ملف CSS داخل `pages/_app.js`.
+
+على سبيل المثال، لنفكر في ورقة الأنماط التالية المسماة `styles.css`:
+
+```css filename="styles.css"
+body {
+  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
+    'Arial', sans-serif;
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+```
+
+أنشئ ملف [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) إذا لم يكن موجودًا بالفعل.
+ثم، قم باستيراد ملف `styles.css` باستخدام [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import).
+
+```jsx filename="pages/_app.js"
+import '../styles.css'
+
+// هذا التصدير الافتراضي مطلوب في ملف `pages/_app.js` جديد.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+هذه الأنماط (`styles.css`) ستنطبق على جميع الصفحات والمكونات في تطبيقك.
+بسبب الطبيعة العامة لأوراق الأنماط، ولتجنب التعارضات، يمكنك استيرادها فقط داخل [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app).
+
+في بيئة التطوير، تسمح هذه الطريقة في التعبير عن أوراق الأنماط بإعادة تحميل الأنماط ساخنة أثناء تعديلها - مما يعني أنه يمكنك الحفاظ على حالة التطبيق.
+
+في بيئة الإنتاج، سيتم دمج جميع ملفات CSS تلقائيًا في ملف `.css` مضغوط واحد. سيتبع ترتيب دمج CSS ترتيب استيراد CSS في ملف `_app.js`. انتبه بشكل خاص إلى وحدات JS المستوردة التي تتضمن CSS خاص بها؛ سيتم دمج CSS الخاص بوحدة JS وفقًا لنفس قواعد الترتيب مثل ملفات CSS المستوردة. على سبيل المثال:
+
+```jsx
+import '../styles.css'
+// يعتمد CSS في ErrorBoundary على CSS العام في styles.css،
+// لذا نستورده بعد styles.css.
+import ErrorBoundary from '../components/ErrorBoundary'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <ErrorBoundary>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  )
+}
+```
+
+</PagesOnly>
+
+## أوراق الأنماط الخارجية
+
+<AppOnly>
+
+يمكن استيراد أوراق الأنماط المنشورة بواسطة حزم خارجية في أي مكان داخل مجلد `app`، بما في ذلك المكونات المجاورة:
+
+```tsx filename="app/layout.tsx" switcher
+import 'bootstrap/dist/css/bootstrap.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className="container">{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import 'bootstrap/dist/css/bootstrap.css'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className="container">{children}</body>
+    </html>
+  )
+}
+```
+
+> **ملاحظة مفيدة**: يجب استيراد أوراق الأنماط الخارجية مباشرة من حزمة npm أو تنزيلها ووضعها بجوار الكود الخاص بك. لا يمكنك استخدام `<link rel="stylesheet" />`.
+
+</AppOnly>
+
+<PagesOnly>
+
+يسمح Next.js باستيراد ملفات CSS من ملف JavaScript.
+هذا ممكن لأن Next.js يوسع مفهوم [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) ليشمل أكثر من JavaScript.
+
+### استيراد الأنماط من `node_modules`
+
+منذ Next.js **9.5.4**، يُسمح باستيراد ملف CSS من `node_modules` في أي مكان في تطبيقك.
+
+بالنسبة لأوراق الأنماط العامة، مثل `bootstrap` أو `nprogress`، يجب استيراد الملف داخل `pages/_app.js`. على سبيل المثال:
+
+```jsx filename="pages/_app.js"
+import 'bootstrap/dist/css/bootstrap.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+لاستيراد CSS المطلوب لمكون تابع لجهة خارجية، يمكنك القيام بذلك في مكونك. على سبيل المثال:
+
+```jsx filename="components/example-dialog.js"
+import { useState } from 'react'
+import { Dialog } from '@reach/dialog'
+import VisuallyHidden from '@reach/visually-hidden'
+import '@reach/dialog/styles.css'
+
+function ExampleDialog(props) {
+  const [showDialog, setShowDialog] = useState(false)
+  const open = () => setShowDialog(true)
+  const close = () => setShowDialog(false)
+
+  return (
+    <div>
+      <button onClick={open}>Open Dialog</button>
+      <Dialog isOpen={showDialog} onDismiss={close}>
+        <button className="close-button" onClick={close}>
+          <VisuallyHidden>Close</VisuallyHidden>
+          <span aria-hidden>×</span>
+        </button>
+        <p>Hello there. I am a dialog</p>
+      </Dialog>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+## ميزات إضافية
+
+يتضمن Next.js ميزات إضافية لتحسين تجربة كتابة وإضافة الأنماط:
+
+- عند التشغيل محليًا باستخدام `next dev`، ستستفيد أوراق الأنماط المحلية (سواء كانت عامة أو وحدات CSS) من [التحديث السريع (Fast Refresh)](/docs/architecture/fast-refresh) لتعكس التغييرات على الفور عند حفظ التعديلات.
+- عند بناء التطبيق للإنتاج باستخدام `next build`، سيتم تجميع ملفات CSS في عدد أقل من ملفات `.css` مضغوطة لتقليل عدد طلبات الشبكة المطلوبة لاسترداد الأنماط.
+- إذا قمت بتعطيل JavaScript، سيتم تحميل الأنماط في بناء الإنتاج (`next start`). ومع ذلك، لا يزال JavaScript مطلوبًا لـ `next dev` لتمكين [التحديث السريع (Fast Refresh)](/docs/architecture/fast-refresh).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/02-tailwind-css.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/02-tailwind-css.mdx
new file mode 100644
index 00000000..9aa84dd2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/02-tailwind-css.mdx
@@ -0,0 +1,183 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:07:24.622Z
+title: Tailwind CSS
+description: تنسيق تطبيق Next.js باستخدام Tailwind CSS.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+<PagesOnly>
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مع Tailwind CSS](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)
+
+</details>
+
+</PagesOnly>
+
+[Tailwind CSS](https://tailwindcss.com/) هو إطار عمل CSS يعتمد على الأدوات (utility-first) ويعمل بشكل استثنائي مع Next.js.
+
+## تثبيت Tailwind
+
+قم بتثبيت حزم Tailwind CSS وشغل الأمر `init` لإنشاء ملفات `tailwind.config.js` و `postcss.config.js`:
+
+```bash filename="Terminal"
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+## تكوين Tailwind
+
+بداخل ملف `tailwind.config.js`، أضف مسارات الملفات التي ستستخدم أسماء فئات Tailwind CSS:
+
+```js filename="tailwind.config.js"
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}', // لاحظ إضافة دليل `app`.
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+
+    // أو إذا كنت تستخدم دليل `src`:
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+لا تحتاج إلى تعديل ملف `postcss.config.js`.
+
+<AppOnly>
+
+## استيراد الأنماط
+
+أضف [توجيهات Tailwind CSS](https://tailwindcss.com/docs/functions-and-directives#directives) التي سيستخدمها Tailwind لحقن الأنماط التي يولدها إلى [ملف الأنماط العام](/docs/app/building-your-application/styling/css-modules#global-styles) في تطبيقك، على سبيل المثال:
+
+```css filename="app/globals.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+بداخل [تخطيط الجذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) (`app/layout.tsx`)، قم باستيراد ملف `globals.css` لتطبيق الأنماط على كل مسار في تطبيقك.
+
+```tsx filename="app/layout.tsx" switcher
+import type { Metadata } from 'next'
+
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import './globals.css'
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+## استخدام الفئات
+
+بعد تثبيت Tailwind CSS وإضافة الأنماط العامة، يمكنك استخدام فئات Tailwind المساعدة في تطبيقك.
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## استيراد الأنماط
+
+أضف [توجيهات Tailwind CSS](https://tailwindcss.com/docs/functions-and-directives#directives) التي سيستخدمها Tailwind لحقن الأنماط التي يولدها إلى [ملف الأنماط العام](/docs/pages/building-your-application/styling/css-modules#global-styles) في تطبيقك، على سبيل المثال:
+
+```css filename="styles/globals.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+بداخل [ملف التطبيق المخصص](/docs/pages/building-your-application/routing/custom-app) (`pages/_app.js`)، قم باستيراد ملف `globals.css` لتطبيق الأنماط على كل مسار في تطبيقك.
+
+```tsx filename="pages/_app.tsx" switcher
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import '@/styles/globals.css'
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+## استخدام الفئات
+
+بعد تثبيت Tailwind CSS وإضافة الأنماط العامة، يمكنك استخدام فئات Tailwind المساعدة في تطبيقك.
+
+```tsx filename="pages/index.tsx" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+</PagesOnly>
+
+## الاستخدام مع Turbopack
+
+بدءًا من Next.js 13.1، أصبح Tailwind CSS و PostCSS مدعومين مع [Turbopack](https://turbo.build/pack/docs/features/css#tailwind-css).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/03-css-in-js.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/03-css-in-js.mdx
new file mode 100644
index 00000000..adb903a2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/03-css-in-js.mdx
@@ -0,0 +1,314 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:10.976Z
+title: CSS-in-JS
+description: استخدام مكتبات CSS-in-JS مع Next.js
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+<AppOnly>
+
+> **تحذير:** مكتبات CSS-in-JS التي تتطلب تشغيل جافاسكريبت غير مدعومة حاليًا في مكونات الخادم (Server Components). استخدام CSS-in-JS مع ميزات React الجديدة مثل مكونات الخادم والبث يتطلب من مطوري المكتبات دعم أحدث إصدار من React، بما في ذلك [التصيير المتزامن (concurrent rendering)](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react).
+>
+> نحن نعمل مع فريق React على واجهات برمجة التطبيقات (APIs) لمعالجة أصول CSS وجافاسكريبت مع دعم مكونات خادم React وهندسة البث.
+
+المكتبات التالية مدعومة في مكونات العميل (Client Components) في دليل `app` (مرتبة أبجديًا):
+
+- [`kuma-ui`](https://kuma-ui.com)
+- [`@mui/material`](https://mui.com/material-ui/guides/next-js-app-router/)
+- [`pandacss`](https://panda-css.com)
+- [`styled-jsx`](#styled-jsx)
+- [`styled-components`](#styled-components)
+- [`style9`](https://github.com/johanholmerin/style9)
+- [`tamagui`](https://tamagui.dev/docs/guides/next-js#server-components)
+- [`tss-react`](https://tss-react.dev/)
+- [`vanilla-extract`](https://github.com/vercel/next.js/tree/canary/examples/with-vanilla-extract)
+
+المكتبات التالية تعمل حاليًا على إضافة الدعم:
+
+- [`emotion`](https://github.com/emotion-js/emotion/issues/2928)
+
+> **معلومة مفيدة**: نحن نختبر مكتبات CSS-in-JS مختلفة وسنضيف المزيد من الأمثلة للمكتبات التي تدعم ميزات React 18 و/أو دليل `app`.
+
+إذا كنت تريد تنسيق مكونات الخادم، نوصي باستخدام [وحدات CSS](/docs/app/building-your-application/styling/css-modules) أو حلول أخرى تنتج ملفات CSS، مثل PostCSS أو [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css).
+
+## تكوين CSS-in-JS في `app`
+
+يتكون تكوين CSS-in-JS من ثلاث خطوات اختيارية تشمل:
+
+1. **سجل الأنماط (style registry)** لجمع كل قواعد CSS في عملية التصيير.
+2. خطاف `useServerInsertedHTML` الجديد لحقن القواعد قبل أي محتوى قد يستخدمها.
+3. مكون عميل يلف تطبيقك مع سجل الأنماط أثناء التصيير الأولي من جانب الخادم.
+
+### `styled-jsx`
+
+استخدام `styled-jsx` في مكونات العميل يتطلب استخدام الإصدار `v5.1.0`. أولاً، أنشئ سجلًا جديدًا:
+
+```tsx filename="app/registry.tsx" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
+
+export default function StyledJsxRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
+
+  useServerInsertedHTML(() => {
+    const styles = jsxStyleRegistry.styles()
+    jsxStyleRegistry.flush()
+    return <>{styles}</>
+  })
+
+  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
+}
+```
+
+```jsx filename="app/registry.js" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
+
+export default function StyledJsxRegistry({ children }) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
+
+  useServerInsertedHTML(() => {
+    const styles = jsxStyleRegistry.styles()
+    jsxStyleRegistry.flush()
+    return <>{styles}</>
+  })
+
+  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
+}
+```
+
+ثم، لف [تخطيط الجذر (root layout)](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) مع السجل:
+
+```tsx filename="app/layout.tsx" switcher
+import StyledJsxRegistry from './registry'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <StyledJsxRegistry>{children}</StyledJsxRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import StyledJsxRegistry from './registry'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <StyledJsxRegistry>{children}</StyledJsxRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+[عرض مثال هنا](https://github.com/vercel/app-playground/tree/main/app/styling/styled-jsx).
+
+### Styled Components
+
+فيما يلي مثال لكيفية تكوين `styled-components@6` أو أحدث:
+
+أولاً، استخدم واجهة برمجة تطبيقات `styled-components` لإنشاء مكون سجل عام لجمع كل قواعد أنماط CSS التي تم إنشاؤها أثناء التصيير، ووظيفة لإرجاع هذه القواعد. ثم استخدم خطاف `useServerInsertedHTML` لحقن الأنماط المجمعة في السجل داخل وسم `<head>` HTML في تخطيط الجذر.
+
+```tsx filename="lib/registry.tsx" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
+```
+
+```jsx filename="lib/registry.js" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({ children }) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
+```
+
+لف `children` لتخطيط الجذر مع مكون سجل الأنماط:
+
+```tsx filename="app/layout.tsx" switcher
+import StyledComponentsRegistry from './lib/registry'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import StyledComponentsRegistry from './lib/registry'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+[عرض مثال هنا](https://github.com/vercel/app-playground/tree/main/app/styling/styled-components).
+
+> **معلومة مفيدة**:
+>
+> - أثناء تصيير الخادم، سيتم استخراج الأنماط إلى سجل عام وحقنها في `<head>` من HTML الخاص بك. هذا يضمن وضع قواعد الأنماط قبل أي محتوى قد يستخدمها. في المستقبل، قد نستخدم ميزة React القادمة لتحديد مكان حقن الأنماط.
+> - أثناء البث، سيتم جمع الأنماط من كل جزء وإضافتها إلى الأنماط الموجودة. بعد اكتمال الترطيب (hydration) من جانب العميل، سيتولى `styled-components` المهمة كالمعتاد ويحقن أي أنماط ديناميكية إضافية.
+> - نستخدم مكون عميل في أعلى مستوى من الشجرة لسجل الأنماط لأنه أكثر كفاءة لاستخراج قواعد CSS بهذه الطريقة. يتجنب هذا إعادة إنشاء الأنماط في عمليات تصيير الخادم اللاحقة، ويمنع إرسالها في حمولة مكون الخادم.
+
+</AppOnly>
+
+<PagesOnly>
+
+<details>
+  <summary>أمثلة</summary>
+
+- [Styled JSX](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx)
+- [Styled Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)
+- [Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)
+- [Linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria)
+- [Tailwind CSS + Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)
+- [Styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)
+- [Cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs)
+- [Aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
+- [Fela](https://github.com/vercel/next.js/tree/canary/examples/with-fela)
+- [Stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches)
+
+</details>
+
+من الممكن استخدام أي حل CSS-in-JS موجود. أبسطها هو الأنماط المضمنة:
+
+```jsx
+function HiThere() {
+  return <p style={{ color: 'red' }}>مرحبًا</p>
+}
+
+export default HiThere
+```
+
+نحن نضمّن [styled-jsx](https://github.com/vercel/styled-jsx) لتوفير دعم لأنماط CSS معزولة ومحددة النطاق.
+الهدف هو دعم "ظل CSS" مشابه لمكونات الويب، والتي للأسف [لا تدعم التصيير من الخادم وتعمل فقط بجافاسكريبت](https://github.com/w3c/webcomponents/issues/71).
+
+راجع الأمثلة أعلاه لحلول CSS-in-JS الشائعة الأخرى (مثل Styled Components).
+
+مكون يستخدم `styled-jsx` يبدو كالتالي:
+
+```jsx
+function HelloWorld() {
+  return (
+    <div>
+      مرحبًا بالعالم
+      <p>محدد النطاق!</p>
+      <style jsx>{`
+        p {
+          color: blue;
+        }
+        div {
+          background: red;
+        }
+        @media (max-width: 600px) {
+          div {
+            background: blue;
+          }
+        }
+      `}</style>
+      <style global jsx>{`
+        body {
+          background: black;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default HelloWorld
+```
+
+يرجى الاطلاع على [توثيق styled-jsx](https://github.com/vercel/styled-jsx) لمزيد من الأمثلة.
+
+### تعطيل جافاسكريبت
+
+نعم، إذا قمت بتعطيل جافاسكريبت، سيتم تحميل CSS في بناء الإنتاج (`next start`). أثناء التطوير، نحتاج إلى تمكين جافاسكريبت لتوفير أفضل تجربة مطور مع [التحديث السريع (Fast Refresh)](https://nextjs.org/blog/next-9-4#fast-refresh).
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/04-sass.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/04-sass.mdx
new file mode 100644
index 00000000..361c2289
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/04-sass.mdx
@@ -0,0 +1,83 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:06:35.215Z
+title: Sass
+description: تنسيق تطبيق Next.js باستخدام Sass.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه داخل مكون. */}
+
+يحتوي Next.js على دعم مدمج لـ Sass باستخدام امتدادات `.scss` و `.sass`. يمكنك استخدام Sass على مستوى المكونات عبر وحدات CSS والامتداد `.module.scss` أو `.module.sass`.
+
+أولاً، قم بتثبيت [`sass`](https://github.com/sass/sass):
+
+```bash filename="Terminal"
+npm install --save-dev sass
+```
+
+> **معلومة مفيدة**:
+>
+> يدعم Sass [تركيبتين مختلفتين](https://sass-lang.com/documentation/syntax)، لكل منهما امتداد خاص.
+> يتطلب امتداد `.scss` استخدام [تركيبة SCSS](https://sass-lang.com/documentation/syntax#scss)،
+> بينما يتطلب امتداد `.sass` استخدام [التركيبة ذات المسافات البادئة ("Sass")](https://sass-lang.com/documentation/syntax#the-indented-syntax).
+>
+> إذا لم تكن متأكدًا مما تختار، ابدأ باستخدام امتداد `.scss` وهو مجموعة شاملة لـ CSS، ولا يتطلب منك تعلم
+> تركيبة المسافات البادئة ("Sass").
+
+### تخصيص خيارات Sass
+
+إذا كنت ترغب في تكوين مترجم Sass، استخدم `sassOptions` في ملف `next.config.js`.
+
+```js filename="next.config.js"
+const path = require('path')
+
+module.exports = {
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+}
+```
+
+### متغيرات Sass
+
+يدعم Next.js متغيرات Sass المصدرة من ملفات وحدات CSS.
+
+على سبيل المثال، استخدام متغير Sass المصدر `primaryColor`:
+
+```scss filename="app/variables.module.scss"
+$primary-color: #64ff00;
+
+:export {
+  primaryColor: $primary-color;
+}
+```
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+// يشير إلى مسار URL الجذر `/`
+
+import variables from './variables.module.scss'
+
+export default function Page() {
+  return <h1 style={{ color: variables.primaryColor }}>مرحبًا، Next.js!</h1>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import variables from '../styles/variables.module.scss'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Layout color={variables.primaryColor}>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/index.mdx
new file mode 100644
index 00000000..9e39beaa
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/05-styling/index.mdx
@@ -0,0 +1,18 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:06:24.472Z
+title: التنسيقات
+description: تعرف على الطرق المختلفة لتنسيق تطبيق Next.js الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يدعم Next.js طرقًا مختلفة لتنسيق تطبيقك، بما في ذلك:
+
+- **CSS العام**: سهل الاستخدام ومألوف لمن لديهم خبرة في CSS التقليدي، ولكن قد يؤدي إلى حزم CSS كبيرة وصعوبة في إدارة التنسيقات مع نمو التطبيق.
+- **وحدات CSS**: إنشاء فئات CSS محلية لتجنب تعارض الأسماء وتحسين قابلية الصيانة.
+- **Tailwind CSS**: إطار عمل CSS يعتمد على الأدوات أولاً، ويسمح بتصميمات مخصصة سريعة من خلال تجميع فئات الأدوات.
+- **Sass**: معالج CSS شهير يمتد بـ CSS بميزات مثل المتغيرات والقواعد المتداخلة والميكسينات.
+- **CSS-in-JS**: تضمين CSS مباشرة في مكونات JavaScript، مما يتيح تنسيقات ديناميكية ومحددة النطاق.
+
+تعرف على المزيد حول كل طريقة من خلال استكشاف الوثائق الخاصة بها:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/01-images.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/01-images.mdx
new file mode 100644
index 00000000..67b9eabd
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/01-images.mdx
@@ -0,0 +1,359 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:24.380Z
+title: تحسين الصور
+nav_title: الصور
+description: قم بتحسين صورك باستخدام مكون `next/image` المدمج.
+related:
+  title: مرجع API
+  description: تعلم المزيد عن واجهة برمجة التطبيقات لـ next/image.
+  links:
+    - app/api-reference/components/image
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مكون الصورة](https://github.com/vercel/next.js/tree/canary/examples/image-component)
+
+</details>
+
+وفقًا لـ [Web Almanac](https://almanac.httparchive.org)، تشكل الصور جزءًا كبيرًا من [وزن الصفحة](https://almanac.httparchive.org/en/2022/page-weight#content-type-and-file-formats) النموذجي للموقع ويمكن أن يكون لها تأثير كبير على [أداء LCP](https://almanac.httparchive.org/en/2022/performance#lcp-image-optimization) لموقعك.
+
+يمتد مكون Next.js Image عنصر `<img>` HTML بميزات لتحسين الصور تلقائيًا:
+
+- **تحسين الحجم:** تقديم صور بحجم مناسب لكل جهاز تلقائيًا، باستخدام صيغ صور حديثة مثل WebP وAVIF.
+- **الاستقرار البصري:** منع [انزياح التخطيط](/learn/seo/web-performance/cls) تلقائيًا عند تحميل الصور.
+- **تحميل أسرع للصفحات:** يتم تحميل الصور فقط عند دخولها نطاق الرؤية باستخدام التحميل الكسول الأصيل للمتصفح، مع عناصر نائبة ضبابية اختيارية.
+- **مرونة الأصول:** تغيير حجم الصور حسب الطلب، حتى للصور المخزنة على خوادم بعيدة
+
+> **🎥 شاهد:** تعلم المزيد عن كيفية استخدام `next/image` → [YouTube (9 دقائق)](https://youtu.be/IU_qq_c_lKA).
+
+## الاستخدام
+
+```js
+import Image from 'next/image'
+```
+
+ثم يمكنك تحديد `src` لصورتك (محلية أو بعيدة).
+
+### الصور المحلية
+
+لاستخدام صورة محلية، قم باستيراد ملفات الصور الخاصة بك `.jpg` أو `.png` أو `.webp`.
+
+سيحدد Next.js تلقائيًا [`width` و `height`](#image-sizing) لصورتك بناءً على الملف المستورد. تُستخدم هذه القيم لمنع [انزياح التخطيط التراكمي](https://nextjs.org/learn/seo/web-performance/cls) أثناء تحميل صورتك.
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+import profilePic from './me.png'
+
+export default function Page() {
+  return (
+    <Image
+      src={profilePic}
+      alt="صورة المؤلف"
+      // width={500} يتم توفيره تلقائيًا
+      // height={500} يتم توفيره تلقائيًا
+      // blurDataURL="data:..." يتم توفيره تلقائيًا
+      // placeholder="blur" // عنصر نائب ضبابي اختياري أثناء التحميل
+    />
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import Image from 'next/image'
+import profilePic from '../public/me.png'
+
+export default function Page() {
+  return (
+    <Image
+      src={profilePic}
+      alt="صورة المؤلف"
+      // width={500} يتم توفيره تلقائيًا
+      // height={500} يتم توفيره تلقائيًا
+      // blurDataURL="data:..." يتم توفيره تلقائيًا
+      // placeholder="blur" // عنصر نائب ضبابي اختياري أثناء التحميل
+    />
+  )
+}
+```
+
+</PagesOnly>
+
+> **تحذير:** لا يتم دعم `await import()` الديناميكي أو `require()`. يجب أن يكون الاستيراد ثابتًا حتى يمكن تحليله في وقت البناء.
+
+### الصور البعيدة
+
+لاستخدام صورة بعيدة، يجب أن تكون خاصية `src` سلسلة URL.
+
+بما أن Next.js لا يمكنه الوصول إلى الملفات البعيدة أثناء عملية البناء، ستحتاج إلى توفير خصائص [`width`](/docs/app/api-reference/components/image#width) و [`height`](/docs/app/api-reference/components/image#height) و [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) الاختيارية يدويًا.
+
+تستخدم سمات `width` و `height` لاستنتاج نسبة العرض إلى الارتفاع الصحيحة للصورة وتجنب انزياح التخطيط عند تحميل الصورة. لا تحدد `width` و `height` حجم ملف الصورة المعروض. تعلم المزيد عن [تحديد حجم الصورة](#image-sizing).
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <Image
+      src="https://s3.amazonaws.com/my-bucket/profile.png"
+      alt="صورة المؤلف"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+للسماح بتحسين الصور بأمان، حدد قائمة بأنماط URL المدعومة في `next.config.js`. كن محددًا قدر الإمكان لمنع الاستخدام الضار. على سبيل المثال، سيتيح التكوين التالي الصور فقط من دلو AWS S3 محدد:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 's3.amazonaws.com',
+        port: '',
+        pathname: '/my-bucket/**',
+      },
+    ],
+  },
+}
+```
+
+تعلم المزيد عن تكوين [`remotePatterns`](/docs/app/api-reference/components/image#remotepatterns). إذا كنت تريد استخدام عناوين URL نسبية لـ `src` الصورة، استخدم [`loader`](/docs/app/api-reference/components/image#loader).
+
+### النطاقات
+
+في بعض الأحيان قد ترغب في تحسين صورة بعيدة، ولكن مع الاستمرار في استخدام واجهة برمجة تطبيقات تحسين الصور المدمجة في Next.js. للقيام بذلك، اترك `loader` على إعداداته الافتراضية وأدخل عنوان URL مطلق لخاصية `src` للصورة.
+
+لحماية تطبيقك من المستخدمين الضارين، يجب عليك تحديد قائمة بأسماء المضيفين البعيدة التي تنوي استخدامها مع مكون `next/image`.
+
+> تعلم المزيد عن تكوين [`remotePatterns`](/docs/app/api-reference/components/image#remotepatterns).
+
+### المحملات
+
+لاحظ أنه في [المثال السابق](#local-images)، تم توفير عنوان URL جزئي (`"/me.png"`) لصورة محلية. هذا ممكن بسبب بنية المحمل.
+
+المحمل هو دالة تقوم بإنشاء عناوين URL لصورتك. يقوم بتعديل `src` المقدم، وإنشاء عناوين URL متعددة لطلب الصورة بأحجام مختلفة. تُستخدم عناوين URL المتعددة هذه في إنشاء [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) التلقائي، بحيث يتم تقديم زوار موقعك صورة بحجم مناسب لمنطقة العرض الخاصة بهم.
+
+المحمل الافتراضي لتطبيقات Next.js يستخدم واجهة برمجة تطبيقات تحسين الصور المدمجة، والتي تقوم بتحسين الصور من أي مكان على الويب، ثم تقديمها مباشرة من خادم ويب Next.js. إذا كنت ترغب في تقديم صورك مباشرة من شبكة توصيل المحتوى (CDN) أو خادم صور، يمكنك كتابة دالة محمل خاصة بك ببضعة أسطر من JavaScript.
+
+يمكنك تحديد محمل لكل صورة باستخدام خاصية [`loader`](/docs/app/api-reference/components/image#loader)، أو على مستوى التطبيق باستخدام تكوين [`loaderFile`](/docs/app/api-reference/components/image#loaderfile).
+
+## الأولوية
+
+يجب عليك إضافة خاصية `priority` إلى الصورة التي ستكون [عنصر أكبر محتوى مرئي (LCP)](https://web.dev/lcp/#what-elements-are-considered) لكل صفحة. يتيح ذلك لـ Next.js إعطاء الأولوية بشكل خاص للصورة للتحميل (على سبيل المثال من خلال علامات التحميل المسبق أو تلميحات الأولوية)، مما يؤدي إلى تحسن ملحوظ في LCP.
+
+عادة ما يكون عنصر LCP هو أكبر صورة أو كتلة نصية مرئية ضمن نطاق رؤية الصفحة. عند تشغيل `next dev`، سترى تحذيرًا في وحدة التحكم إذا كان عنصر LCP عبارة عن `<Image>` بدون خاصية `priority`.
+
+بمجرد تحديد صورة LCP، يمكنك إضافة الخاصية كما يلي:
+
+<PagesOnly>
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <>
+      <h1>الصفحة الرئيسية</h1>
+      <Image
+        src="/me.png"
+        alt="صورة المؤلف"
+        width={500}
+        height={500}
+        priority
+      />
+      <p>مرحبًا بكم في صفحتي الرئيسية!</p>
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+import profilePic from '../public/me.png'
+
+export default function Page() {
+  return <Image src={profilePic} alt="صورة المؤلف" priority />
+}
+```
+
+</AppOnly>
+
+راجع المزيد حول الأولوية في [توثيق مكون `next/image`](/docs/app/api-reference/components/image#priority).
+
+## تحديد حجم الصورة
+
+إحدى الطرق الأكثر شيوعًا التي تؤثر بها الصور سلبًا على الأداء هي من خلال [انزياح التخطيط](/learn/seo/web-performance/cls)، حيث تدفع الصورة العناصر الأخرى حولها على الصفحة أثناء تحميلها. هذه المشكلة الأدائية مزعجة جدًا للمستخدمين لدرجة أن لها مقياس ويب أساسي خاص بها يسمى [انزياح التخطيط التراكمي](https://web.dev/cls/). طريقة تجنب انزياح التخطيط الناتج عن الصور هي [تحديد حجم صورك دائمًا](https://web.dev/optimize-cls/#images-without-dimensions). هذا يسمح للمتصفح بحجز مساحة كافية تمامًا للصورة قبل تحميلها.
+
+نظرًا لأن `next/image` مصمم لضمان نتائج أداء جيدة، لا يمكن استخدامه بطريقة تساهم في انزياح التخطيط، ويجب تحديد حجمه بإحدى الطرق الثلاث التالية:
+
+1. تلقائيًا، باستخدام [استيراد ثابت](#local-images)
+2. صراحةً، عن طريق تضمين خصائص [`width`](/docs/app/api-reference/components/image#width) و [`height`](/docs/app/api-reference/components/image#height)
+3. ضمنيًا، باستخدام [fill](/docs/app/api-reference/components/image#fill) مما يتسبب في توسع الصورة لملء العنصر الأب.
+
+> **ماذا لو لم أكن أعرف حجم صوري؟**
+>
+> إذا كنت تصل إلى الصور من مصدر لا تعرف أحجامها، فهناك عدة أشياء يمكنك القيام بها:
+>
+> **استخدم `fill`**
+>
+> تتيح لك خاصية [`fill`](/docs/app/api-reference/components/image#fill) تحديد حجم الصورة بواسطة العنصر الأب. فكر في استخدام CSS لإعطاء العنصر الأب للصورة مساحة على الصفحة مع خاصية [`sizes`](/docs/app/api-reference/components/image#sizes) لمطابقة أي نقاط توقف لاستعلامات الوسائط. يمكنك أيضًا استخدام [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit) مع `fill` أو `contain` أو `cover`، و [`object-position`](https://developer.mozilla.org/docs/Web/CSS/object-position) لتحديد كيفية احتلال الصورة لتلك المساحة.
+>
+> **توحيد صورك**
+>
+> إذا كنت تقدم الصور من مصدر تتحكم فيه، ففكر في تعديل خط أنابيب الصور لتوحيد الصور إلى حجم معين.
+>
+> **تعديل استدعاءات API الخاصة بك**
+>
+> إذا كان تطبيقك يسترد عناوين URL للصور باستخدام استدعاء API (مثل نظام إدارة المحتوى)، فقد تتمكن من تعديل استدعاء API لإرجاع أبعاد الصورة مع عنوان URL.
+
+إذا لم تنجح أي من الطرق المقترحة لتحديد حجم صورك، فإن مكون `next/image` مصمم للعمل بشكل جيد في الصفحة إلى جانب عناصر `<img>` القياسية.
+
+## التنسيق
+
+تنسيق مكون الصورة مشابه لتنسيق عنصر `<img>` العادي، ولكن هناك بعض الإرشادات التي يجب مراعاتها:
+
+- استخدم `className` أو `style`، وليس `styled-jsx`.
+  - في معظم الحالات، نوصي باستخدام خاصية `className`. يمكن أن يكون هذا وحدة [CSS Module](/docs/app/building-your-application/styling/css-modules) مستوردة، أو [stylesheet عام](/docs/app/building-your-application/styling/css-modules#global-styles)، إلخ.
+  - يمكنك أيضًا استخدام خاصية `style` لتعيين أنماط مضمنة.
+  - لا يمكنك استخدام [styled-jsx](/docs/app/building-your-application/styling/css-in-js) لأنه محدد للنطاق للمكون الحالي (ما لم تحدد النمط كـ `global`).
+- عند استخدام `fill`، يجب أن يكون للعنصر الأب `position: relative`
+  - هذا ضروري لعرض عنصر الصورة بشكل صحيح في وضع التخطيط هذا.
+- عند استخدام `fill`، يجب أن يكون للعنصر الأب `display: block`
+  - هذا هو الإعداد الافتراضي لعناصر `<div>` ولكن يجب تحديده بخلاف ذلك.
+
+## أمثلة
+
+### متجاوب
+
+<Image
+  alt="صورة متجاوبة تملأ عرض وارتفاع الحاوية الأب"
+  srcLight="/docs/light/responsive-image.png"
+  srcDark="/docs/dark/responsive-image.png"
+  width="1600"
+  height="629"
+/>
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Responsive() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <Image
+        alt="جبال"
+        // استيراد صورة سيقوم
+        // تلقائيًا بتعيين العرض والارتفاع
+        src={mountains}
+        sizes="100vw"
+        // جعل الصورة تعرض بعرض كامل
+        style={{
+          width: '100%',
+          height: 'auto',
+        }}
+      />
+    </div>
+  )
+}
+```
+
+### ملء الحاوية
+
+<Image
+  alt="شبكة من الصور تملأ عرض الحاوية الأب"
+  srcLight="/docs/light/fill-container.png"
+  srcDark="/docs/dark/fill-container.png"
+  width="1600"
+  height="529"
+/>
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Fill() {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridGap: '8px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
+      }}
+    >
+      <div style={{ position: 'relative', height: '400px' }}>
+        <Image
+          alt="جبال"
+          src={mountains}
+          fill
+          sizes="(min-width: 808px) 50vw, 100vw"
+          style={{
+            objectFit: 'cover', // cover, contain, none
+          }}
+        />
+      </div>
+      {/* والمزيد من الصور في الشبكة... */}
+    </div>
+  )
+}
+```
+
+### صورة الخلفية
+
+<Image
+  alt="صورة خلفية تأخذ عرض وارتفاع الصفحة بالكامل"
+  srcLight="/docs/light/background-image.png"
+  srcDark="/docs/dark/background-image.png"
+  width="1600"
+  height="427"
+/>
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Background() {
+  return (
+    <Image
+      alt="جبال"
+      src={mountains}
+      placeholder="blur"
+      quality={100}
+      fill
+      sizes="100vw"
+      style={{
+        objectFit: 'cover',
+      }}
+    />
+  )
+}
+```
+
+للاطلاع على أمثلة لمكون الصورة المستخدم مع أنماط مختلفة، راجع [معرض مكون الصورة](https://image-component.nextjs.gallery).
+
+## خصائص أخرى
+
+[**عرض جميع الخصائص المتاحة لمكون `next/image`.**](/docs/app/api-reference/components/image)
+
+## التكوين
+
+يمكن تكوين مكون `next/image` وواجهة برمجة تطبيقات تحسين الصور في Next.js في ملف [`next.config.js`](/docs/app/api-reference/next-config-js). تتيح لك هذه التكوينات [تمكين الصور البعيدة](/docs/app/api-reference/components/image#remotepatterns)، [تحديد نقاط توقف مخصصة للصور](/docs/app/api-reference/components/image#devicesizes)، [تغيير سلوك التخزين المؤقت](/docs/app/api-reference/components/image#caching-behavior) والمزيد.
+
+[**اقرأ وثائق تكوين الصور الكاملة لمزيد من المعلومات.**](/docs/app/api-reference/components/image#configuration-options)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx
new file mode 100644
index 00000000..b84ba528
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx
@@ -0,0 +1,644 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:08:30.667Z
+title: تحسين الخطوط
+nav_title: الخطوط
+description: قم بتحسين خطوط الويب لتطبيقك باستخدام محملي `next/font` المدمجين.
+related:
+  title: مرجع API
+  description: تعلم المزيد حول واجهة برمجة التطبيقات لـ next/font.
+  links:
+    - app/api-reference/components/font
+---
+
+{/* محتوى هذا المستند مشترك بين موجهي التطبيق والصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+[**`next/font`**](/docs/app/api-reference/components/font) سيقوم تلقائيًا بتحسين خطوطك (بما في ذلك الخطوط المخصصة) وإزالة طلبات الشبكة الخارجية لتحسين الخصوصية والأداء.
+
+> **🎥 شاهد:** تعلم المزيد حول كيفية استخدام `next/font` → [YouTube (6 دقائق)](https://www.youtube.com/watch?v=L8_98i_bMMA).
+
+يتضمن `next/font` **استضافة ذاتية تلقائية مدمجة** لأي ملف خط. هذا يعني أنه يمكنك تحميل خطوط الويب بشكل مثالي دون أي تغيير في التخطيط، بفضل خاصية CSS `size-adjust` المستخدمة.
+
+نظام الخطوط الجديد هذا يسمح لك أيضًا باستخدام جميع خطوط جوجل بسهولة مع مراعاة الأداء والخصوصية. يتم تنزيل ملفات CSS والخطوط في وقت البناء واستضافتها ذاتيًا مع باقي مواردك الثابتة. **لا يتم إرسال أي طلبات إلى جوجل من المتصفح.**
+
+## خطوط جوجل
+
+استضف أي خط من خطوط جوجل ذاتيًا تلقائيًا. يتم تضمين الخطوط في النشر وتقديمها من نفس النطاق كنشرك. **لا يتم إرسال أي طلبات إلى جوجل من المتصفح.**
+
+ابدأ باستيراد الخط الذي ترغب في استخدامه من `next/font/google` كدالة. نوصي باستخدام [الخطوط المتغيرة](https://fonts.google.com/variablefonts) للحصول على أفضل أداء ومرونة.
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter } from 'next/font/google'
+
+// إذا كنت تحمل خطًا متغيرًا، لا تحتاج إلى تحديد وزن الخط
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter } from 'next/font/google'
+
+// إذا كنت تحمل خطًا متغيرًا، لا تحتاج إلى تحديد وزن الخط
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+إذا لم تتمكن من استخدام خط متغير، ستحتاج **إلى تحديد وزن**:
+
+```tsx filename="app/layout.tsx" switcher
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={roboto.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={roboto.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لاستخدام الخط في جميع صفحاتك، أضفه إلى ملف [`_app.js`](/docs/pages/building-your-application/routing/custom-app) تحت `/pages` كما هو موضح أدناه:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+// إذا كنت تحمل خطًا متغيرًا، لا تحتاج إلى تحديد وزن الخط
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={inter.className}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+إذا لم تتمكن من استخدام خط متغير، ستحتاج **إلى تحديد وزن**:
+
+```jsx filename="pages/_app.js"
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+  weight: '400',
+  subsets: ['latin'],
+})
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={roboto.className}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+</PagesOnly>
+
+يمكنك تحديد أوزان و/أو أنماط متعددة باستخدام مصفوفة:
+
+```jsx filename="app/layout.js"
+const roboto = Roboto({
+  weight: ['400', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+> **جيد أن تعرف:** استخدم شرطة سفلية (_) لأسماء الخطوط التي تحتوي على كلمات متعددة. على سبيل المثال، `Roboto Mono` يجب استيرادها كـ `Roboto_Mono`.
+
+<PagesOnly>
+
+### تطبيق الخط في `<head>`
+
+يمكنك أيضًا استخدام الخط بدون غلاف و `className` عن طريق حقنه داخل `<head>` كما يلي:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <style jsx global>{`
+        html {
+          font-family: ${inter.style.fontFamily};
+        }
+      `}</style>
+      <Component {...pageProps} />
+    </>
+  )
+}
+```
+
+### استخدام في صفحة واحدة
+
+لاستخدام الخط في صفحة واحدة، أضفه إلى الصفحة المحددة كما هو موضح أدناه:
+
+```jsx filename="pages/index.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function Home() {
+  return (
+    <div className={inter.className}>
+      <p>مرحبًا بالعالم</p>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+### تحديد مجموعة فرعية
+
+يتم [تقسيم](https://fonts.google.com/knowledge/glossary/subsetting) خطوط جوجل تلقائيًا. هذا يقلل من حجم ملف الخط ويحسن الأداء. ستحتاج إلى تحديد أي من هذه المجموعات الفرعية تريد تحميلها مسبقًا. إذا فشلت في تحديد أي مجموعات فرعية بينما [`preload`](/docs/app/api-reference/components/font#preload) مضبوط على `true`، سيؤدي ذلك إلى تحذير.
+
+يمكن القيام بذلك عن طريق إضافته إلى استدعاء الدالة:
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+const inter = Inter({ subsets: ['latin'] })
+```
+
+```jsx filename="app/layout.js" switcher
+const inter = Inter({ subsets: ['latin'] })
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+const inter = Inter({ subsets: ['latin'] })
+```
+
+</PagesOnly>
+
+اطلع على [مرجع واجهة برمجة التطبيقات للخط](/docs/app/api-reference/components/font) لمزيد من المعلومات.
+
+### استخدام خطوط متعددة
+
+يمكنك استيراد واستخدام خطوط متعددة في تطبيقك. هناك طريقتان يمكنك اتباعهما.
+
+الطريقة الأولى هي إنشاء دالة مساعدة تصدر خطًا، تستورده، وتطبق `className` الخاص به حيثما دعت الحاجة. هذا يضمن تحميل الخط مسبقًا فقط عند عرضه:
+
+```ts filename="app/fonts.ts" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+export const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+```js filename="app/fonts.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+export const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { inter } from './fonts'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { inter } from './fonts'
+
+export default function Layout({ children }) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import { roboto_mono } from './fonts'
+
+export default function Page() {
+  return (
+    <>
+      <h1 className={roboto_mono.className}>صفحتي</h1>
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { roboto_mono } from './fonts'
+
+export default function Page() {
+  return (
+    <>
+      <h1 className={roboto_mono.className}>صفحتي</h1>
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+في المثال أعلاه، سيتم تطبيق `Inter` عالميًا، ويمكن استيراد `Roboto Mono` وتطبيقه حسب الحاجة.
+
+بدلاً من ذلك، يمكنك إنشاء [متغير CSS](/docs/app/api-reference/components/font#variable) واستخدامه مع حل CSS المفضل لديك:
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+import styles from './global.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  variable: '--font-roboto-mono',
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>
+        <h1>تطبيقي</h1>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  variable: '--font-roboto-mono',
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>
+        <h1>تطبيقي</h1>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+```css filename="app/global.css"
+html {
+  font-family: var(--font-inter);
+}
+
+h1 {
+  font-family: var(--font-roboto-mono);
+}
+```
+
+في المثال أعلاه، سيتم تطبيق `Inter` عالميًا، وسيتم تنسيق أي علامات `<h1>` باستخدام `Roboto Mono`.
+
+> **توصية:** استخدم خطوط متعددة بحذر لأن كل خط جديد هو مورد إضافي يجب على العميل تنزيله.
+
+## الخطوط المحلية
+
+استورد `next/font/local` وحدد `src` لملف الخط المحلي الخاص بك. نوصي باستخدام [الخطوط المتغيرة](https://fonts.google.com/variablefonts) للحصول على أفضل أداء ومرونة.
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import localFont from 'next/font/local'
+
+// يمكن وضع ملفات الخطوط داخل `app`
+const myFont = localFont({
+  src: './my-font.woff2',
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={myFont.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import localFont from 'next/font/local'
+
+// يمكن وضع ملفات الخطوط داخل `app`
+const myFont = localFont({
+  src: './my-font.woff2',
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={myFont.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import localFont from 'next/font/local'
+
+// يمكن وضع ملفات الخطوط داخل `pages`
+const myFont = localFont({ src: './my-font.woff2' })
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={myFont.className}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+</PagesOnly>
+
+إذا كنت ترغب في استخدام ملفات متعددة لعائلة خط واحدة، يمكن أن يكون `src` مصفوفة:
+
+```js
+const roboto = localFont({
+  src: [
+    {
+      path: './Roboto-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './Roboto-Italic.woff2',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './Roboto-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './Roboto-BoldItalic.woff2',
+      weight: '700',
+      style: 'italic',
+    },
+  ],
+})
+```
+
+اطلع على [مرجع واجهة برمجة التطبيقات للخط](/docs/app/api-reference/components/font) لمزيد من المعلومات.
+
+## مع Tailwind CSS
+
+يمكن استخدام `next/font` مع [Tailwind CSS](https://tailwindcss.com/) من خلال [متغير CSS](/docs/app/api-reference/components/font#css-variables).
+
+في المثال أدناه، نستخدم الخط `Inter` من `next/font/google` (يمكنك استخدام أي خط من جوجل أو الخطوط المحلية). قم بتحميل خطك باستخدام خيار `variable` لتعريف اسم متغير CSS الخاص بك وعيّنه إلى `inter`. ثم استخدم `inter.variable` لإضافة متغير CSS إلى مستند HTML الخاص بك.
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto-mono',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto-mono',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+})
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={`${inter.variable} font-sans`}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+</PagesOnly>
+
+أخيرًا، أضف متغير CSS إلى [إعدادات Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css#configuring-tailwind):
+
+```js filename="tailwind.config.js"
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+        mono: ['var(--font-roboto-mono)'],
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+يمكنك الآن استخدام فئات الأداة `font-sans` و `font-mono` لتطبيق الخط على عناصرك.
+
+## التحميل المسبق
+
+<AppOnly>
+عند استدعاء دالة خط في صفحة من موقعك، لا يكون الخط متاحًا عالميًا ولا يتم تحميله مسبقًا على جميع المسارات. بدلاً من ذلك، يتم تحميل الخط مسبقًا فقط على المسارات ذات الصلة بناءً على نوع الملف الذي يتم استخدامه فيه:
+
+- إذا كانت [صفحة فريدة](/docs/app/building-your-application/routing/pages-and-layouts#pages)، يتم تحميلها مسبقًا على المسار الفريد لتلك الصفحة.
+- إذا كانت [تخطيط](/docs/app/building-your-application/routing/pages-and-layouts#layouts)، يتم تحميلها مسبقًا على جميع المسارات المغلفة بالتخطيط.
+- إذا كانت [تخطيط الجذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)، يتم تحميلها مسبقًا على جميع المسارات.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استدعاء دالة خط في صفحة من موقعك، لا يكون الخط متاحًا عالميًا ولا يتم تحميله مسبقًا على جميع المسارات. بدلاً من ذلك، يتم تحميل الخط مسبقًا فقط على المسار/المسارات ذات الصلة بناءً على نوع الملف الذي يتم استخدامه فيه:
+
+- إذا كانت [صفحة فريدة](/docs/pages/building-your-application/routing/pages-and-layouts)، يتم تحميلها مسبقًا على المسار الفريد لتلك الصفحة
+- إذا كانت في [التطبيق المخصص](/docs/pages/building-your-application/routing/custom-app)، يتم تحميلها مسبقًا على جميع مسارات الموقع تحت `/pages`
+
+</PagesOnly>
+
+## إعادة استخدام الخطوط
+
+في كل مرة تستدعي فيها دالة الخط `localFont` أو خط جوجل، يتم استضافة هذا الخط كنسخة واحدة في تطبيقك. لذلك، إذا قمت بتحميل نفس دالة الخط في ملفات متعددة، يتم استضافة عدة نسخ من نفس الخط. في هذه الحالة، يوصى بما يلي:
+
+- استدعاء دالة محمل الخط في ملف مشترك واحد
+- تصديره كمتغير ثابت
+- استيراد المتغير في كل ملف ترغب في استخدام هذا الخط فيه
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx
new file mode 100644
index 00000000..8809d96c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx
@@ -0,0 +1,377 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:07:27.866Z
+title: تحسين النصوص البرمجية (Script Optimization)
+nav_title: النصوص البرمجية (Scripts)
+description: تحسين النصوص البرمجية لجهات خارجية باستخدام مكون Script المدمج.
+related:
+  title: مرجع API
+  description: تعلم المزيد عن واجهة next/script API.
+  links:
+    - app/api-reference/components/script
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+<AppOnly>
+
+### نصوص البرمجة للتخطيط (Layout Scripts)
+
+لتحميل نص برمجي لجهة خارجية لعدة مسارات، استورد `next/script` وقم بتضمين النص البرمجي مباشرة في مكون التخطيط الخاص بك:
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <section>{children}</section>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import Script from 'next/script'
+
+export default function DashboardLayout({ children }) {
+  return (
+    <>
+      <section>{children}</section>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+يتم جلب النص البرمجي لجهة خارجية عند الوصول إلى مسار المجلد (مثل `dashboard/page.js`) أو أي مسار متداخل (مثل `dashboard/settings/page.js`) من قبل المستخدم. سيضمن Next.js أن النص البرمجي **سيتم تحميله مرة واحدة فقط**، حتى إذا تنقل المستخدم بين عدة مسارات في نفس التخطيط.
+
+</AppOnly>
+
+### نصوص البرمجة للتطبيق (Application Scripts)
+
+<AppOnly>
+
+لتحميل نص برمجي لجهة خارجية لجميع المسارات، استورد `next/script` وقم بتضمين النص البرمجي مباشرة في تخطيط الجذر الخاص بك:
+
+```tsx filename="app/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <Script src="https://example.com/script.js" />
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import Script from 'next/script'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <Script src="https://example.com/script.js" />
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لتحميل نص برمجي لجهة خارجية لجميع المسارات، استورد `next/script` وقم بتضمين النص البرمجي مباشرة في `_app` المخصص الخاص بك:
+
+```jsx filename="pages/_app.js"
+import Script from 'next/script'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+سيتم تحميل وتنفيذ هذا النص البرمجي عند الوصول إلى _أي_ مسار في تطبيقك. سيضمن Next.js أن النص البرمجي **سيتم تحميله مرة واحدة فقط**، حتى إذا تنقل المستخدم بين عدة صفحات.
+
+> **التوصية**: نوصي بتضمين النصوص البرمجية لجهات خارجية في صفحات أو تخطيطات محددة فقط لتقليل أي تأثير غير ضروري على الأداء.
+
+### الاستراتيجية (Strategy)
+
+على الرغم من أن السلوك الافتراضي لـ `next/script` يسمح لك بتحميل النصوص البرمجية لجهات خارجية في أي صفحة أو تخطيط، يمكنك ضبط سلوك التحميل باستخدام خاصية `strategy`:
+
+- `beforeInteractive`: تحميل النص البرمجي قبل أي كود Next.js وقبل حدوث أي ترطيب للصفحة.
+- `afterInteractive`: (**الافتراضي**) تحميل النص البرمجي مبكرًا ولكن بعد حدوث بعض الترطيب على الصفحة.
+- `lazyOnload`: تحميل النص البرمجي لاحقًا خلال وقت الفراغ في المتصفح.
+- `worker`: (تجريبي) تحميل النص البرمجي في عامل ويب (web worker).
+
+راجع وثائق مرجع [`next/script`](/docs/app/api-reference/components/script#strategy) API لمعرفة المزيد عن كل استراتيجية وحالات استخدامها.
+
+### تفريغ النصوص البرمجية إلى عامل ويب (تجريبي)
+
+> **تحذير:** استراتيجية `worker` ليست مستقرة بعد ولا تعمل مع دليل [`app`](/docs/app/building-your-application/routing/defining-routes). استخدم بحذر.
+
+يتم تفريغ النصوص البرمجية التي تستخدم استراتيجية `worker` وتنفيذها في عامل ويب باستخدام [Partytown](https://partytown.builder.io/). يمكن أن يحسن هذا من أداء موقعك من خلال تخصيص الخيط الرئيسي لبقية كود التطبيق الخاص بك.
+
+لا تزال هذه الاستراتيجية تجريبية ويمكن استخدامها فقط إذا تم تمكين علم `nextScriptWorkers` في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    nextScriptWorkers: true,
+  },
+}
+```
+
+ثم، قم بتشغيل `next` (عادة `npm run dev` أو `yarn dev`) وسيرشدك Next.js خلال تثبيت الحزم المطلوبة لإكمال الإعداد:
+
+```bash filename="Terminal"
+npm run dev
+```
+
+سترى تعليمات مثل هذه: يرجى تثبيت Partytown عن طريق تشغيل `npm install @builder.io/partytown`
+
+بمجرد اكتمال الإعداد، سيؤدي تعريف `strategy="worker"` إلى إنشاء Partytown تلقائيًا في تطبيقك وتفريغ النص البرمجي إلى عامل ويب.
+
+```tsx filename="pages/home.tsx" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/home.js" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+هناك عدد من المقايضات التي يجب مراعاتها عند تحميل نص برمجي لجهة خارجية في عامل ويب. يرجى الاطلاع على وثائق [المقايضات](https://partytown.builder.io/trade-offs) لـ Partytown لمزيد من المعلومات.
+
+### النصوص البرمجية المضمنة (Inline Scripts)
+
+النصوص البرمجية المضمنة، أو النصوص البرمجية غير المحملة من ملف خارجي، مدعومة أيضًا بواسطة مكون Script. يمكن كتابتها بوضع JavaScript داخل الأقواس المعقوفة:
+
+```jsx
+<Script id="show-banner">
+  {`document.getElementById('banner').classList.remove('hidden')`}
+</Script>
+```
+
+أو باستخدام خاصية `dangerouslySetInnerHTML`:
+
+```jsx
+<Script
+  id="show-banner"
+  dangerouslySetInnerHTML={{
+    __html: `document.getElementById('banner').classList.remove('hidden')`,
+  }}
+/>
+```
+
+> **تحذير**: يجب تعيين خاصية `id` للنصوص البرمجية المضمنة حتى يتمكن Next.js من تتبع وتحسين النص البرمجي.
+
+### تنفيذ كود إضافي
+
+يمكن استخدام معالجات الأحداث مع مكون Script لتنفيذ كود إضافي بعد حدوث حدث معين:
+
+- `onLoad`: تنفيذ الكود بعد انتهاء تحميل النص البرمجي.
+- `onReady`: تنفيذ الكود بعد انتهاء تحميل النص البرمجي وكلما تم تركيب المكون.
+- `onError`: تنفيذ الكود إذا فشل تحميل النص البرمجي.
+
+<AppOnly>
+
+ستعمل هذه المعالجات فقط عند استيراد `next/script` واستخدامه داخل [مكون العميل](/docs/app/building-your-application/rendering/client-components) حيث يتم تعريف `"use client"` كأول سطر من الكود:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+راجع مرجع [`next/script`](/docs/app/api-reference/components/script#onload) API لمعرفة المزيد عن كل معالج حدث وعرض الأمثلة.
+
+</AppOnly>
+
+<PagesOnly>
+
+ستعمل هذه المعالجات فقط عند استيراد `next/script` واستخدامه داخل [مكون العميل](/docs/app/building-your-application/rendering/client-components) حيث يتم تعريف `"use client"` كأول سطر من الكود:
+
+```tsx filename="pages/index.tsx" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+راجع مرجع [`next/script`](/docs/pages/api-reference/components/script#onload) API لمعرفة المزيد عن كل معالج حدث وعرض الأمثلة.
+
+</PagesOnly>
+
+### سمات إضافية
+
+هناك العديد من سمات DOM التي يمكن تعيينها لعنصر `<script>` والتي لا تستخدمها مكون Script، مثل [`nonce`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) أو [سمات بيانات مخصصة](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/data-*). سيؤدي تضمين أي سمات إضافية إلى إعادة توجيهها تلقائيًا إلى عنصر `<script>` النهائي والمحسن المضمن في HTML.
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```tsx filename="pages/index.tsx" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/04-metadata.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
new file mode 100644
index 00000000..69239882
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
@@ -0,0 +1,369 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:07:34.750Z
+title: البيانات الوصفية (Metadata)
+description: استخدم Metadata API لتعريف البيانات الوصفية في أي تخطيط أو صفحة.
+related:
+  description: عرض جميع خيارات Metadata API.
+  links:
+    - app/api-reference/functions/generate-metadata
+    - app/api-reference/file-conventions/metadata
+---
+
+يقدم Next.js واجهة برمجة تطبيقات للبيانات الوصفية (Metadata API) يمكن استخدامها لتعريف بيانات وصفية لتطبيقك (مثل علامات `meta` و `link` داخل عنصر `head` في HTML) لتحسين تحسين محركات البحث (SEO) وإمكانية المشاركة على الويب.
+
+هناك طريقتان لإضافة بيانات وصفية لتطبيقك:
+
+- **البيانات الوصفية المعتمدة على التكوين**: قم بتصدير [كائن `metadata` ثابت](/docs/app/api-reference/functions/generate-metadata#metadata-object) أو [دالة `generateMetadata` ديناميكية](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) في ملف `layout.js` أو `page.js`.
+- **البيانات الوصفية المعتمدة على الملفات**: أضف ملفات خاصة ثابتة أو مُنشأة ديناميكيًا إلى أجزاء المسار.
+
+مع هذين الخيارين، سيقوم Next.js تلقائيًا بإنشاء عناصر `<head>` ذات الصلة لصفحاتك. يمكنك أيضًا إنشاء صور OG ديناميكية باستخدام منشئ [`ImageResponse`](/docs/app/api-reference/functions/image-response).
+
+## البيانات الوصفية الثابتة
+
+لتعريف بيانات وصفية ثابتة، قم بتصدير [كائن `Metadata`](/docs/app/api-reference/functions/generate-metadata#metadata-object) من ملف `layout.js` أو ملف `page.js` ثابت.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+```jsx filename="layout.js | page.js" switcher
+export const metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+لجميع الخيارات المتاحة، راجع [مرجع API](/docs/app/api-reference/functions/generate-metadata).
+
+## البيانات الوصفية الديناميكية
+
+يمكنك استخدام دالة `generateMetadata لجلب` بيانات وصفية تتطلب قيمًا ديناميكية.
+
+```tsx filename="app/products/[id]/page.tsx" switcher
+import type { Metadata, ResolvingMetadata } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية الأصلية وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }: Props) {}
+```
+
+```jsx filename="app/products/[id]/page.js" switcher
+export async function generateMetadata({ params, searchParams }, parent) {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية الأصلية وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }) {}
+```
+
+لجميع المعلمات المتاحة، راجع [مرجع API](/docs/app/api-reference/functions/generate-metadata).
+
+> **ملاحظة جيدة**:
+>
+> - يتم دعم كل من البيانات الوصفية الثابتة والديناميكية عبر `generateMetadata` **فقط في مكونات الخادم (Server Components)**.
+> - طلبات `fetch` يتم [تخزينها مؤقتًا تلقائيًا](/docs/app/building-your-application/caching#request-memoization) لنفس البيانات عبر `generateMetadata` و`generateStaticParams` والتخطيطات والصفحات ومكونات الخادم. يمكن استخدام [`cache` من React](/docs/app/building-your-application/caching#request-memoization) إذا لم يكن `fetch` متاحًا.
+> - سينتظر Next.js حتى يكتمل جلب البيانات داخل `generateMetadata` قبل بث واجهة المستخدم إلى العميل. وهذا يضمن أن الجزء الأول من [الاستجابة المبثوثة](/docs/app/building-your-application/routing/loading-ui-and-streaming) يتضمن علامات `<head>`.
+
+## البيانات الوصفية المعتمدة على الملفات
+
+هذه الملفات الخاصة متاحة للبيانات الوصفية:
+
+- [favicon.ico, apple-icon.jpg, and icon.jpg](/docs/app/api-reference/file-conventions/metadata/app-icons)
+- [opengraph-image.jpg and twitter-image.jpg](/docs/app/api-reference/file-conventions/metadata/opengraph-image)
+- [robots.txt](/docs/app/api-reference/file-conventions/metadata/robots)
+- [sitemap.xml](/docs/app/api-reference/file-conventions/metadata/sitemap)
+
+يمكنك استخدام هذه الملفات للبيانات الوصفية الثابتة، أو يمكنك إنشاء هذه الملفات برمجيًا باستخدام التعليمات البرمجية.
+
+للتنفيذ والأمثلة، راجع [مرجع ملفات البيانات الوصفية](/docs/app/api-reference/functions/generate-metadata) و[إنشاء الصور الديناميكية](#dynamic-image-generation).
+
+## السلوك
+
+البيانات الوصفية المعتمدة على الملفات لها أولوية أعلى وستتجاوز أي بيانات وصفية معتمدة على التكوين.
+
+### الحقول الافتراضية
+
+هناك علامتان `meta` افتراضيتان تتم إضافتهما دائمًا حتى إذا لم يحدد المسار بيانات وصفية:
+
+- [علامة meta charset](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-charset) تحدد ترميز الأحرف للموقع.
+- [علامة meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) تحدد عرض viewport ومقياسه للموقع للتكيف مع الأجهزة المختلفة.
+
+```html
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+```
+
+> **ملاحظة جيدة**: يمكنك تجاوز علامة [`viewport`](/docs/app/api-reference/functions/generate-metadata#viewport) الافتراضية.
+
+### الترتيب
+
+يتم تقييم البيانات الوصفية بالترتيب، بدءًا من جزء الجذر وصولاً إلى الجزء الأقرب إلى جزء `page.js` النهائي. على سبيل المثال:
+
+1. `app/layout.tsx` (تخطيط الجذر)
+2. `app/blog/layout.tsx` (تخطيط المدونة المتداخل)
+3. `app/blog/[slug]/page.tsx` (صفحة المدونة)
+
+### الدمج
+
+بعد [ترتيب التقييم](#ordering)، يتم دمج كائنات البيانات الوصفية المصدرة من أجزاء متعددة في نفس المسار **بشكل سطحي** معًا لتشكيل مخرجات البيانات الوصفية النهائية للمسار. يتم **استبدال** المفاتيح المكررة بناءً على ترتيبها.
+
+هذا يعني أن البيانات الوصفية مع الحقول المتداخلة مثل [`openGraph`](/docs/app/api-reference/functions/generate-metadata#opengraph) و[`robots`](/docs/app/api-reference/functions/generate-metadata#robots) التي يتم تعريفها في جزء سابق يتم **تجاوزها** بواسطة الجزء الأخير الذي يحددها.
+
+#### تجاوز الحقول
+
+```jsx filename="app/layout.js"
+export const metadata = {
+  title: 'Acme',
+  openGraph: {
+    title: 'Acme',
+    description: 'Acme is a...',
+  },
+}
+```
+
+```jsx filename="app/blog/page.js"
+export const metadata = {
+  title: 'Blog',
+  openGraph: {
+    title: 'Blog',
+  },
+}
+
+// المخرجات:
+// <title>Blog</title>
+// <meta property="og:title" content="Blog" />
+```
+
+في المثال أعلاه:
+
+- يتم **استبدال** `title` من `app/layout.js` بـ `title` في `app/blog/page.js`.
+- يتم **استبدال** جميع حقول `openGraph` من `app/layout.js` في `app/blog/page.js` لأن `app/blog/page.js` يحدد بيانات `openGraph`. لاحظ غياب `openGraph.description`.
+
+إذا كنت ترغب في مشاركة بعض الحقول المتداخلة بين الأجزاء أثناء تجاوز البعض الآخر، يمكنك استخراجها إلى متغير منفصل:
+
+```jsx filename="app/shared-metadata.js"
+export const openGraphImage = { images: ['http://...'] }
+```
+
+```jsx filename="app/page.js"
+import { openGraphImage } from './shared-metadata'
+
+export const metadata = {
+  openGraph: {
+    ...openGraphImage,
+    title: 'Home',
+  },
+}
+```
+
+```jsx filename="app/about/page.js"
+import { openGraphImage } from '../shared-metadata'
+
+export const metadata = {
+  openGraph: {
+    ...openGraphImage,
+    title: 'About',
+  },
+}
+```
+
+في المثال أعلاه، يتم مشاركة صورة OG بين `app/layout.js` و`app/about/page.js` بينما تختلف العناوين.
+
+#### وراثة الحقول
+
+```jsx filename="app/layout.js"
+export const metadata = {
+  title: 'Acme',
+  openGraph: {
+    title: 'Acme',
+    description: 'Acme is a...',
+  },
+}
+```
+
+```jsx filename="app/about/page.js"
+export const metadata = {
+  title: 'About',
+}
+
+// المخرجات:
+// <title>About</title>
+// <meta property="og:title" content="Acme" />
+// <meta property="og:description" content="Acme is a..." />
+```
+
+**ملاحظات**
+
+- يتم **استبدال** `title` من `app/layout.js` بـ `title` في `app/about/page.js`.
+- يتم **وراثة** جميع حقول `openGraph` من `app/layout.js` في `app/about/page.js` لأن `app/about/page.js` لا يحدد بيانات `openGraph`.
+
+## إنشاء الصور الديناميكية
+
+يسمح منشئ `ImageResponse` بإنشاء صور ديناميكية باستخدام JSX و CSS. هذا مفيد لإنشاء صور وسائل التواصل الاجتماعي مثل صور Open Graph وبطاقات Twitter وغيرها.
+
+يستخدم `ImageResponse` [Edge Runtime](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#edge-runtime)، ويقوم Next.js تلقائيًا بإضافة العناوين الصحيحة للصور المخزنة مؤقتًا عند الحافة، مما يساعد في تحسين الأداء وتقليل إعادة الحساب.
+
+لاستخدامه، يمكنك استيراد `ImageResponse` من `next/server`:
+
+```jsx filename="app/about/route.js"
+import { ImageResponse } from 'next/server'
+
+export const runtime = 'edge'
+
+export async function GET() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 128,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          textAlign: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        Hello world!
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 600,
+    }
+  )
+}
+```
+
+يتكامل `ImageResponse` جيدًا مع واجهات برمجة تطبيقات Next.js الأخرى، بما في ذلك [Route Handlers](/docs/app/building-your-application/routing/route-handlers) والبيانات الوصفية المعتمدة على الملفات. على سبيل المثال، يمكنك استخدام `ImageResponse` في ملف `opengraph-image.tsx` لإنشاء صور Open Graph أثناء وقت البناء أو ديناميكيًا عند وقت الطلب.
+
+يدعم `ImageResponse` خصائص CSS الشائعة بما في ذلك flexbox والتحديد المطلق والخطوط المخصصة ولف النص والمركزة والصور المتداخلة. [راجع القائمة الكاملة لخصائص CSS المدعومة](/docs/app/api-reference/functions/image-response).
+
+> **ملاحظة جيدة**:
+>
+> - تتوفر أمثلة في [Vercel OG Playground](https://og-playground.vercel.app/).
+> - يستخدم `ImageResponse` [@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation) و[Satori](https://github.com/vercel/satori) وResvg لتحويل HTML وCSS إلى PNG.
+> - يتم دعم Edge Runtime فقط. لن يعمل Node.js Runtime الافتراضي.
+> - يتم دعم flexbox ومجموعة فرعية من خصائص CSS فقط. لن تعمل التخطيطات المتقدمة (مثل `display: grid`).
+> - الحد الأقصى لحجم الحزمة هو `500KB`. يشمل حجم الحزمة JSX وCSS والخطوط والصور وأي أصول أخرى. إذا تجاوزت الحد، ففكر في تقليل حجم أي أصول أو جلبها في وقت التشغيل.
+> - يتم دعم تنسيقات الخطوط `ttf` و`otf` و`woff` فقط. لتحقيق أقصى سرعة لتحليل الخط، يُفضل استخدام `ttf` أو `otf` بدلاً من `woff`.
+
+## JSON-LD
+
+[JSON-LD](https://json-ld.org/) هو تنسيق للبيانات المنظمة التي يمكن استخدامها بواسطة محركات البحث لفهم محتواك. على سبيل المثال، يمكنك استخدامه لوصف شخص أو حدث أو منظمة أو فيلم أو كتاب أو وصفة والعديد من أنواع الكيانات الأخرى.
+
+توصيتنا الحالية لـ JSON-LD هي تقديم البيانات المنظمة كعلامة `<script>` في مكونات `layout.js` أو `page.js`. على سبيل المثال:
+
+```tsx filename="app/products/[id]/page.tsx" switcher
+export default async function Page({ params }) {
+  const product = await getProduct(params.id)
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    image: product.image,
+    description: product.description,
+  }
+
+  return (
+    <section>
+      {/* إضافة JSON-LD إلى صفحتك */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      {/* ... */}
+    </section>
+  )
+}
+```
+
+```jsx filename="app/products/[id]/page.js" switcher
+export default async function Page({ params }) {
+  const product = await getProduct(params.id)
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    image: product.image,
+    description: product.description,
+  }
+
+  return (
+    <section>
+      {/* إضافة JSON-LD إلى صفحتك */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      {/* ... */}
+    </section>
+  )
+}
+```
+
+يمكنك التحقق من صحة بياناتك المنظمة واختبارها باستخدام [Rich Results Test](https://search.google.com/test/rich-results) من Google أو [Schema Markup Validator](https://validator.schema.org/) العام.
+
+يمكنك كتابة JSON-LD باستخدام TypeScript باستخدام حزم المجتمع مثل [`schema-dts`](https://www.npmjs.com/package/schema-dts):
+
+```tsx
+import { Product, WithContext } from 'schema-dts'
+
+const jsonLd: WithContext<Product> = {
+  '@context': 'https://schema.org',
+  '@type': 'Product',
+  name: 'Next.js Sticker',
+  image: 'https://nextjs.org/imgs/sticker.png',
+  description: 'Dynamic at the speed of static.',
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/05-static-assets.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/05-static-assets.mdx
new file mode 100644
index 00000000..f3fed0b2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/05-static-assets.mdx
@@ -0,0 +1,37 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:05:49.829Z
+title: الموارد الثابتة
+description: يسمح لك Next.js بتقديم ملفات ثابتة مثل الصور في دليل public. يمكنك معرفة كيفية عمل ذلك هنا.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يمكن لـ Next.js تقديم ملفات ثابتة مثل الصور داخل مجلد يسمى `public` في الدليل الجذري. يمكن بعد ذلك الإشارة إلى الملفات داخل `public` بواسطة الكود الخاص بك بدءًا من عنوان URL الأساسي (`/`).
+
+على سبيل المثال، إذا أضفت `me.png` داخل `public`، سيقوم الكود التالي بالوصول إلى الصورة:
+
+```jsx filename="Avatar.js"
+import Image from 'next/image'
+
+export function Avatar() {
+  return <Image src="/me.png" alt="me" width="64" height="64" />
+}
+```
+
+<PagesOnly>
+
+هذا المجلد مفيد أيضًا لملفات مثل `robots.txt`، `favicon.ico`، التحقق من موقع Google، وأي ملفات ثابتة أخرى (بما في ذلك `.html`). ولكن تأكد من عدم وجود ملف ثابت بنفس اسم ملف في دليل `pages/`، لأن هذا سيؤدي إلى حدوث خطأ. [اقرأ المزيد](/docs/messages/conflicting-public-file-page).
+
+</PagesOnly>
+
+<AppOnly>
+
+بالنسبة لملفات البيانات الوصفية الثابتة مثل `robots.txt`، `favicon.ico`، وغيرها، يجب استخدام [ملفات بيانات وصفية خاصة](/docs/app/api-reference/file-conventions/metadata) داخل مجلد `app`.
+
+</AppOnly>
+
+> معلومة مفيدة:
+>
+> - يجب أن يكون اسم الدليل `public`. لا يمكن تغيير الاسم وهو الدليل الوحيد المستخدم لتقديم الموارد الثابتة.
+> - فقط الموارد الموجودة في دليل `public` أثناء [وقت البناء](/docs/app/api-reference/next-cli#build) سيتم تقديمها بواسطة Next.js. الملفات المضافة أثناء وقت الطلب لن تكون متاحة. نوصي باستخدام خدمة طرف ثالث مثل [AWS S3](https://aws.amazon.com/s3/) لتخزين الملفات بشكل دائم.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/06-lazy-loading.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/06-lazy-loading.mdx
new file mode 100644
index 00000000..d763a6c5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/06-lazy-loading.mdx
@@ -0,0 +1,246 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:06:34.423Z
+title: التحميل الكسول (Lazy Loading)
+description: تحميل المكتبات المستوردة ومكونات React بشكل كسول لتحسين أداء تحميل التطبيق.
+---
+
+{/* المحتوى مشترك بين تطبيق التوجيه (app) وتوجيه الصفحات (pages). يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بتوجيه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+يساعد [التحميل الكسول](https://developer.mozilla.org/docs/Web/Performance/Lazy_loading) في Next.js على تحسين أداء التحميل الأولي للتطبيق عن طريق تقليل كمية JavaScript المطلوبة لعرض مسار.
+
+يسمح لك بتأجيل تحميل **مكونات العميل (Client Components)** والمكتبات المستوردة، وإدراجها فقط في حزمة العميل عند الحاجة إليها. على سبيل المثال، قد ترغب في تأجيل تحميل نافذة مشروطة حتى ينقر المستخدم لفتحها.
+
+هناك طريقتان لتنفيذ التحميل الكسول في Next.js:
+
+1. استخدام [الاستيراد الديناميكي](#nextdynamic) مع `next/dynamic`
+2. استخدام [`React.lazy()`](https://react.dev/reference/react/lazy) مع [Suspense](https://react.dev/reference/react/Suspense)
+
+بشكل افتراضي، يتم [تقسيم الكود (Code Splitting)](https://developer.mozilla.org/docs/Glossary/Code_splitting) تلقائيًا لمكونات الخادم (Server Components)، ويمكنك استخدام [البث (Streaming)](/docs/app/building-your-application/routing/loading-ui-and-streaming) لإرسال أجزاء واجهة المستخدم تدريجيًا من الخادم إلى العميل. ينطبق التحميل الكسول على مكونات العميل.
+
+## `next/dynamic`
+
+`next/dynamic` هو مزيج من [`React.lazy()`](https://react.dev/reference/react/lazy) و [Suspense](https://react.dev/reference/react/Suspense). يعمل بنفس الطريقة في كل من دليل `app` و `pages` للسماح بالهجرة التدريجية.
+
+## أمثلة
+
+<AppOnly>
+### استيراد مكونات العميل
+
+```jsx filename="app/page.js"
+'use client'
+
+import { useState } from 'react'
+import dynamic from 'next/dynamic'
+
+// مكونات العميل:
+const ComponentA = dynamic(() => import('../components/A'))
+const ComponentB = dynamic(() => import('../components/B'))
+const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
+
+export default function ClientComponentExample() {
+  const [showMore, setShowMore] = useState(false)
+
+  return (
+    <div>
+      {/* يتم التحميل فورًا، ولكن في حزمة عميل منفصلة */}
+      <ComponentA />
+
+      {/* يتم التحميل عند الطلب، فقط عند تحقيق الشرط */}
+      {showMore && <ComponentB />}
+      <button onClick={() => setShowMore(!showMore)}>تبديل</button>
+
+      {/* يتم التحميل فقط على جانب العميل */}
+      <ComponentC />
+    </div>
+  )
+}
+```
+
+### تخطي العرض من جانب الخادم (SSR)
+
+عند استخدام `React.lazy()` و Suspense، سيتم عرض مكونات العميل مسبقًا (SSR) بشكل افتراضي.
+
+إذا كنت تريد تعطيل العرض المسبق لمكون عميل، يمكنك استخدام خيار `ssr` بقيمة `false`:
+
+```jsx
+const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
+```
+
+### استيراد مكونات الخادم
+
+إذا قمت باستيراد مكون خادم (Server Component) بشكل ديناميكي، فسيتم تحميل مكونات العميل التابعة له بشكل كسول فقط - وليس مكون الخادم نفسه.
+
+```jsx filename="app/page.js"
+import dynamic from 'next/dynamic'
+
+// مكون الخادم:
+const ServerComponent = dynamic(() => import('../components/ServerComponent'))
+
+export default function ServerComponentExample() {
+  return (
+    <div>
+      <ServerComponent />
+    </div>
+  )
+}
+```
+
+### تحميل المكتبات الخارجية
+
+يمكن تحميل المكتبات الخارجية عند الطلب باستخدام دالة [`import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import). هذا المثال يستخدم المكتبة الخارجية `fuse.js` للبحث الضبابي. يتم تحميل الوحدة فقط على العميل بعد إدخال المستخدم في حقل البحث.
+
+```jsx filename="app/page.js"
+'use client'
+
+import { useState } from 'react'
+
+const names = ['Tim', 'Joe', 'Bel', 'Lee']
+
+export default function Page() {
+  const [results, setResults] = useState()
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="بحث"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // تحميل fuse.js ديناميكيًا
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>النتائج: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+### إضافة مكون تحميل مخصص
+
+```jsx filename="app/page.js"
+import dynamic from 'next/dynamic'
+
+const WithCustomLoading = dynamic(
+  () => import('../components/WithCustomLoading'),
+  {
+    loading: () => <p>جاري التحميل...</p>,
+  }
+)
+
+export default function Page() {
+  return (
+    <div>
+      {/* سيتم عرض مكون التحميل أثناء تحميل <WithCustomLoading/> */}
+      <WithCustomLoading />
+    </div>
+  )
+}
+```
+
+### استيراد التصديرات المسماة
+
+لاستيراد تصدير مسماة بشكل ديناميكي، يمكنك إعادته من Promise الذي تُعيده دالة [`import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import):
+
+```jsx filename="components/hello.js"
+'use client'
+
+export function Hello() {
+  return <p>مرحبًا!</p>
+}
+```
+
+```jsx filename="app/page.js"
+import dynamic from 'next/dynamic'
+
+const ClientComponent = dynamic(() =>
+  import('../components/hello').then((mod) => mod.Hello)
+)
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+باستخدام `next/dynamic`، لن يتم تضمين مكون الرأس في حزمة JavaScript الأولية للصفحة. ستقوم الصفحة بعرض `fallback` الخاص بـ Suspense أولاً، متبوعًا بمكون `Header` عند حل حدود `Suspense`.
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const DynamicHeader = dynamic(() => import('../components/header'), {
+  loading: () => <p>جاري التحميل...</p>,
+})
+
+export default function Home() {
+  return <DynamicHeader />
+}
+```
+
+> **معلومة مفيدة**: في `import('مسار/إلى/المكون')`، يجب كتابة المسار بشكل صريح. لا يمكن أن يكون سلسلة قوالب ولا متغيرًا. بالإضافة إلى ذلك، يجب أن تكون `import()` داخل استدعاء `dynamic()` لكي يتمكن Next.js من مطابقة حزم webpack / معرفات الوحدات مع استدعاء `dynamic()` المحدد وتحميلها مسبقًا قبل العرض. لا يمكن استخدام `dynamic()` داخل عرض React لأنه يجب وسمها في المستوى العلوي للوحدة لكي يعمل التحميل المسبق، مشابهًا لـ `React.lazy`.
+
+## مع التصديرات المسماة
+
+لاستيراد تصدير مسماة بشكل ديناميكي، يمكنك إعادته من [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) الذي تُعيده [`import()`](https://github.com/tc39/proposal-dynamic-import#example):
+
+```jsx filename="components/hello.js"
+export function Hello() {
+  return <p>مرحبًا!</p>
+}
+
+// pages/index.js
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(() =>
+  import('../components/hello').then((mod) => mod.Hello)
+)
+```
+
+## بدون عرض من جانب الخادم (SSR)
+
+لتحميل مكون ديناميكيًا على جانب العميل فقط، يمكنك استخدام خيار `ssr` لتعطيل العرض من جانب الخادم. هذا مفيد إذا كانت تبعية خارجية أو مكون تعتمد على واجهات برمجة المتصفح مثل `window`.
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const DynamicHeader = dynamic(() => import('../components/header'), {
+  ssr: false,
+})
+```
+
+## مع المكتبات الخارجية
+
+هذا المثال يستخدم المكتبة الخارجية `fuse.js` للبحث الضبابي. يتم تحميل الوحدة فقط في المتصفح بعد إدخال المستخدم في حقل البحث.
+
+```jsx
+import { useState } from 'react'
+
+const names = ['Tim', 'Joe', 'Bel', 'Lee']
+
+export default function Page() {
+  const [results, setResults] = useState()
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="بحث"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // تحميل fuse.js ديناميكيًا
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>النتائج: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/07-analytics.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/07-analytics.mdx
new file mode 100644
index 00000000..5fb6ee54
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/07-analytics.mdx
@@ -0,0 +1,211 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:06:10.174Z
+title: التحليلات
+description: قياس وتتبع أداء الصفحات باستخدام Next.js Speed Insights
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يتيح لك [Next.js Speed Insights](https://nextjs.org/analytics) تحليل وقياس أداء الصفحات باستخدام مقاييس مختلفة.
+
+يمكنك البدء في جمع [درجة التجربة الحقيقية](https://vercel.com/docs/concepts/speed-insights#core-web-vitals-explained?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) بدون أي تكوين مسبق على [نشرات Vercel](https://vercel.com/docs/concepts/speed-insights?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+يصف باقي هذا التوثيق جهاز إعادة التوجيه المدمج الذي يستخدمه Next.js Speed Insights.
+
+<PagesOnly>
+
+## بناء نظامك الخاص
+
+أولاً، ستحتاج إلى إنشاء مكون [تطبيق مخصص](/docs/pages/building-your-application/routing/custom-app) وتحديد دالة `reportWebVitals`:
+
+```jsx filename="pages/_app.js"
+export function reportWebVitals(metric) {
+  console.log(metric)
+}
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
+```
+
+يتم تنشيط هذه الدالة عند اكتمال حساب القيم النهائية لأي من المقاييس على الصفحة. يمكنك استخدامها لتسجيل أي من النتائج في وحدة التحكم أو إرسالها إلى نقطة نهاية معينة.
+
+يتكون كائن `metric` الذي يتم إرجاعه إلى الدالة من عدد من الخصائص:
+
+- `id`: معرف فريد للمقياس في سياق تحميل الصفحة الحالي
+- `name`: اسم المقياس
+- `startTime`: الطابع الزمني الأول المسجل لإدخال الأداء بوحدة [الميللي ثانية](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp) (إذا كان مطبقًا)
+- `value`: القيمة، أو المدة بوحدة [الميللي ثانية](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp)، لإدخال الأداء
+- `label`: نوع المقياس (`web-vital` أو `custom`)
+
+هناك نوعان من المقاييس التي يتم تتبعها:
+
+- مؤشرات ويب الأساسية (Web Vitals)
+- مقاييس مخصصة
+
+</PagesOnly>
+
+## مؤشرات ويب الأساسية (Web Vitals)
+
+[مؤشرات ويب الأساسية](https://web.dev/vitals/) هي مجموعة من المقاييس المفيدة التي تهدف إلى التقاط تجربة المستخدم لصفحة الويب. تتضمن جميع مؤشرات ويب الأساسية التالية:
+
+- [الوقت حتى أول بايت](https://developer.mozilla.org/docs/Glossary/Time_to_first_byte) (TTFB)
+- [أول رسم للمحتوى](https://developer.mozilla.org/docs/Glossary/First_contentful_paint) (FCP)
+- [أكبر رسم للمحتوى](https://web.dev/lcp/) (LCP)
+- [تأخر أول إدخال](https://web.dev/fid/) (FID)
+- [تراكم تحول التخطيط](https://web.dev/cls/) (CLS)
+- [التفاعل حتى الرسم التالي](https://web.dev/inp/) (INP) _(تجريبي)_
+
+<PagesOnly>
+
+يمكنك معالجة جميع نتائج هذه المقاييس باستخدام التسمية `web-vital`:
+
+```js
+export function reportWebVitals(metric) {
+  if (metric.label === 'web-vital') {
+    console.log(metric) // يتم تسجيل كائن المقياس ({ id, name, startTime, value, label }) في وحدة التحكم
+  }
+}
+```
+
+هناك أيضًا خيار معالجة كل مقياس على حدة:
+
+```js
+export function reportWebVitals(metric) {
+  switch (metric.name) {
+    case 'FCP':
+      // معالجة نتائج FCP
+      break
+    case 'LCP':
+      // معالجة نتائج LCP
+      break
+    case 'CLS':
+      // معالجة نتائج CLS
+      break
+    case 'FID':
+      // معالجة نتائج FID
+      break
+    case 'TTFB':
+      // معالجة نتائج TTFB
+      break
+    case 'INP':
+      // معالجة نتائج INP (ملاحظة: INP لا يزال مقياسًا تجريبيًا)
+      break
+    default:
+      break
+  }
+}
+```
+
+يتم استخدام مكتبة طرف ثالث، [web-vitals](https://github.com/GoogleChrome/web-vitals)، لقياس هذه المقاييس. يعتمد توافق المتصفح على المقياس المحدد، لذا راجع قسم [دعم المتصفحات](https://github.com/GoogleChrome/web-vitals#browser-support) لمعرفة المتصفحات المدعومة.
+
+## المقاييس المخصصة
+
+بالإضافة إلى المقاييس الأساسية المذكورة أعلاه، هناك بعض المقاييس المخصصة الإضافية التي تقيس الوقت الذي تستغرقه الصفحة للترطيب والعرض:
+
+- `Next.js-hydration`: المدة الزمنية التي تستغرقها الصفحة لبدء وإنهاء الترطيب (بوحدة مللي ثانية)
+- `Next.js-route-change-to-render`: المدة الزمنية التي تستغرقها الصفحة لبدء العرض بعد تغيير المسار (بوحدة مللي ثانية)
+- `Next.js-render`: المدة الزمنية التي تستغرقها الصفحة لإنهاء العرض بعد تغيير المسار (بوحدة مللي ثانية)
+
+يمكنك معالجة جميع نتائج هذه المقاييس باستخدام التسمية `custom`:
+
+```js
+export function reportWebVitals(metric) {
+  if (metric.label === 'custom') {
+    console.log(metric) // يتم تسجيل كائن المقياس ({ id, name, startTime, value, label }) في وحدة التحكم
+  }
+}
+```
+
+هناك أيضًا خيار معالجة كل مقياس على حدة:
+
+```js
+export function reportWebVitals(metric) {
+  switch (metric.name) {
+    case 'Next.js-hydration':
+      // معالجة نتائج الترطيب
+      break
+    case 'Next.js-route-change-to-render':
+      // معالجة نتائج تغيير المسار إلى العرض
+      break
+    case 'Next.js-render':
+      // معالجة نتائج العرض
+      break
+    default:
+      break
+  }
+}
+```
+
+تعمل هذه المقاييس في جميع المتصفحات التي تدعم [واجهة برمجة تطبيقات توقيت المستخدم](https://caniuse.com/#feat=user-timing).
+
+## إرسال النتائج إلى أنظمة خارجية
+
+مع دالة إعادة التوجيه، يمكنك إرسال النتائج إلى أي نقطة نهاية لقياس وتتبع أداء المستخدم الحقيقي على موقعك. على سبيل المثال:
+
+```js
+export function reportWebVitals(metric) {
+  const body = JSON.stringify(metric)
+  const url = 'https://example.com/analytics'
+
+  // استخدم `navigator.sendBeacon()` إذا كان متاحًا، مع التراجع إلى `fetch()`.
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(url, body)
+  } else {
+    fetch(url, { body, method: 'POST', keepalive: true })
+  }
+}
+```
+
+> **معلومة مفيدة**: إذا كنت تستخدم [Google Analytics](https://analytics.google.com/analytics/web/)، فإن استخدام قيمة `id` يمكن أن يسمح لك ببناء توزيعات المقاييس يدويًا (لحساب النسب المئوية، إلخ.)
+>
+> ```js
+> export function reportWebVitals({ id, name, label, value }) {
+>   // استخدم `window.gtag` إذا قمت بتهيئة Google Analytics كما في هذا المثال:
+>   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
+>   window.gtag('event', name, {
+>     event_category:
+>       label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
+>     value: Math.round(name === 'CLS' ? value * 1000 : value), // يجب أن تكون القيم أعدادًا صحيحة
+>     event_label: id, // معرف فريد لتحميل الصفحة الحالي
+>     non_interaction: true, // يتجنب التأثير على معدل الارتداد.
+>   })
+> }
+> ```
+>
+> اقرأ المزيد عن [إرسال النتائج إلى Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
+
+## TypeScript
+
+إذا كنت تستخدم TypeScript، يمكنك استخدام النوع المدمج `NextWebVitalsMetric`:
+
+```tsx filename="pages/_app.tsx" switcher
+import type { AppProps, NextWebVitalsMetric } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export function reportWebVitals(metric: NextWebVitalsMetric) {
+  console.log(metric)
+}
+
+export default MyApp
+```
+
+```jsx filename="pages/_app.js" switcher
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export function reportWebVitals(metric) {
+  console.log(metric)
+}
+
+export default MyApp
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/08-open-telemetry.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/08-open-telemetry.mdx
new file mode 100644
index 00000000..becbb4fb
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/08-open-telemetry.mdx
@@ -0,0 +1,339 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:06:52.951Z
+title: OpenTelemetry
+description: تعلم كيفية إعداد تطبيق Next.js الخاص بك باستخدام OpenTelemetry.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+> **معلومة مفيدة**: هذه الميزة **تجريبية**، تحتاج إلى تفعيلها يدويًا عن طريق إضافة `experimental.instrumentationHook = true;` في ملف `next.config.js`.
+
+المراقبة (Observability) ضرورية لفهم وتحسين سلوك وأداء تطبيق Next.js الخاص بك.
+
+مع زيادة تعقيد التطبيقات، يصبح تحديد وتشخيص المشكلات أكثر صعوبة. من خلال استخدام أدوات المراقبة مثل التسجيل والمقاييس، يمكن للمطورين الحصول على رؤى حول سلوك التطبيق وتحديد مجالات التحسين. تمكن المراقبة المطورين من معالجة المشكلات بشكل استباقي قبل أن تصبح كبيرة وتوفير تجربة مستخدم أفضل. لذلك، يوصى بشدة باستخدام المراقبة في تطبيقات Next.js لتحسين الأداء وترشيد الموارد وتعزيز تجربة المستخدم.
+
+نوصي باستخدام OpenTelemetry لإعداد تطبيقاتك.
+إنها طريقة محايدة للمنصة لإعداد التطبيقات تتيح لك تغيير مزود المراقبة دون تغيير الكود.
+اقرأ [وثائق OpenTelemetry الرسمية](https://opentelemetry.io/docs/) لمزيد من المعلومات حول OpenTelemetry وكيفية عمله.
+
+يستخدم هذا التوثيق مصطلحات مثل _Span_، _Trace_ أو _Exporter_ والتي يمكن العثور عليها جميعًا في [دليل المراقبة الأساسي لـ OpenTelemetry](https://opentelemetry.io/docs/concepts/observability-primer/).
+
+يدعم Next.js إعداد OpenTelemetry مباشرة، مما يعني أننا قمنا بالفعل بإعداد Next.js نفسه.
+عند تفعيل OpenTelemetry، سنقوم تلقائيًا بتغليف جميع الأكواد مثل `getStaticProps` داخل _spans_ مع سمات مفيدة.
+
+> **معلومة مفيدة**: نحن ندعم حاليًا روابط OpenTelemetry فقط في دوال serverless.
+> لا نقدم أيًا منها لأكواد `edge` أو جانب العميل.
+
+## البدء
+
+OpenTelemetry قابل للتوسيع ولكن إعداده بشكل صحيح قد يكون مطولًا.
+لهذا السبب أعددنا حزمة `@vercel/otel` لمساعدتك في البدء بسرعة.
+إنها غير قابلة للتوسيع ويجب عليك تكوين OpenTelemetry يدويًا إذا كنت بحاجة إلى تخصيص إعدادك.
+
+### استخدام `@vercel/otel`
+
+للبدء، يجب تثبيت `@vercel/otel`:
+
+```bash filename="Terminal"
+npm install @vercel/otel
+```
+
+<AppOnly>
+
+بعد ذلك، أنشئ ملف [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation) (أو `.js`) مخصصًا في **الدليل الرئيسي** للمشروع (أو داخل مجلد `src` إذا كنت تستخدم واحدًا):
+
+</AppOnly>
+
+<PagesOnly>
+
+بعد ذلك، أنشئ ملف [`instrumentation.ts`](/docs/pages/building-your-application/optimizing/instrumentation) (أو `.js`) مخصصًا في **الدليل الرئيسي** للمشروع (أو داخل مجلد `src` إذا كنت تستخدم واحدًا):
+
+</PagesOnly>
+
+```ts filename="your-project/instrumentation.ts" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel('next-app')
+}
+```
+
+```js filename="your-project/instrumentation.js" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel('next-app')
+}
+```
+
+<AppOnly>
+
+> **معلومة مفيدة**
+>
+> - يجب أن يكون ملف `instrumentation` في جذر مشروعك وليس داخل مجلد `app` أو `pages`. إذا كنت تستخدم مجلد `src`، فضع الملف داخل `src` بجانب `pages` و `app`.
+> - إذا كنت تستخدم خيار التكوين [`pageExtensions`](/docs/app/api-reference/next-config-js/pageExtensions) لإضافة لاحقة، فستحتاج أيضًا إلى تحديث اسم ملف `instrumentation` ليتطابق.
+> - لقد أنشأنا مثالًا أساسيًا [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) يمكنك استخدامه.
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**
+>
+> - يجب أن يكون ملف `instrumentation` في جذر مشروعك وليس داخل مجلد `app` أو `pages`. إذا كنت تستخدم مجلد `src`، فضع الملف داخل `src` بجانب `pages` و `app`.
+> - إذا كنت تستخدم خيار التكوين [`pageExtensions`](/docs/pages/api-reference/next-config-js/pageExtensions) لإضافة لاحقة، فستحتاج أيضًا إلى تحديث اسم ملف `instrumentation` ليتطابق.
+> - لقد أنشأنا مثالًا أساسيًا [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) يمكنك استخدامه.
+
+</PagesOnly>
+
+### تكوين OpenTelemetry يدويًا
+
+إذا لم يكن الغلاف `@vercel/otel` مناسبًا لاحتياجاتك، يمكنك تكوين OpenTelemetry يدويًا.
+
+أولاً، تحتاج إلى تثبيت حزم OpenTelemetry:
+
+```bash filename="Terminal"
+npm install @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http
+```
+
+الآن يمكنك تهيئة `NodeSDK` في ملف `instrumentation.ts`.
+واجهات برمجة تطبيقات OpenTelemetry غير متوافقة مع وقت تشغيل edge، لذا تحتاج إلى التأكد من أنك تقوم باستيرادها فقط عندما يكون `process.env.NEXT_RUNTIME === 'nodejs'`. نوصي بإنشاء ملف جديد `instrumentation.node.ts` تقوم باستيراده شرطيًا فقط عند استخدام node:
+
+```ts filename="instrumentation.ts" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation.node.ts')
+  }
+}
+```
+
+```js filename="instrumentation.js" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation.node.js')
+  }
+}
+```
+
+```ts filename="instrumentation.node.ts" switcher
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { Resource } from '@opentelemetry/resources'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node'
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'next-app',
+  }),
+  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
+})
+sdk.start()
+```
+
+```js filename="instrumentation.node.js" switcher
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { Resource } from '@opentelemetry/resources'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node'
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'next-app',
+  }),
+  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
+})
+sdk.start()
+```
+
+هذا يعادل استخدام `@vercel/otel`، لكنه قابل للتعديل والتوسيع.
+على سبيل المثال، يمكنك استخدام `@opentelemetry/exporter-trace-otlp-grpc` بدلاً من `@opentelemetry/exporter-trace-otlp-http` أو يمكنك تحديد سمات موارد إضافية.
+
+## اختبار إعدادك
+
+تحتاج إلى جامع OpenTelemetry مع خلفية متوافقة لاختبار تتبع OpenTelemetry محليًا.
+نوصي باستخدام [بيئة التطوير OpenTelemetry](https://github.com/vercel/opentelemetry-collector-dev-setup).
+
+إذا كان كل شيء يعمل بشكل صحيح، يجب أن تكون قادرًا على رؤية نطاق الخادم الجذر المسمى كـ `GET /requested/pathname`.
+جميع النطاقات الأخرى من ذلك التتبع المحدد ستكون متداخلة تحته.
+
+يتتبع Next.js نطاقات أكثر من تلك المنبعثة افتراضيًا.
+لرؤية المزيد من النطاقات، يجب عليك تعيين `NEXT_OTEL_VERBOSE=1`.
+
+## النشر
+
+### استخدام جامع OpenTelemetry
+
+عند النشر مع جامع OpenTelemetry، يمكنك استخدام `@vercel/otel`.
+سيعمل هذا سواء على Vercel أو عند الاستضافة الذاتية.
+
+#### النشر على Vercel
+
+لقد تأكدنا من أن OpenTelemetry يعمل مباشرة على Vercel.
+
+اتبع [توثيق Vercel](https://vercel.com/docs/concepts/observability/otel-overview/quickstart) لربط مشروعك بمزود المراقبة.
+
+#### الاستضافة الذاتية
+
+النشر على منصات أخرى أيضًا مباشر. ستحتاج إلى تشغيل جامع OpenTelemetry الخاص بك لاستقبال ومعالجة بيانات المراقبة من تطبيق Next.js.
+
+للقيام بذلك، اتبع [دليل البدء لجامع OpenTelemetry](https://opentelemetry.io/docs/collector/getting-started/)، والذي سيرشدك خلال إعداد الجامع وتكوينه لاستقبال البيانات من تطبيق Next.js.
+
+بمجرد تشغيل الجامع، يمكنك نشر تطبيق Next.js على المنصة التي تختارها باتباع أدلة النشر الخاصة بها.
+
+### المصدرون المخصصون
+
+نوصي باستخدام جامع OpenTelemetry.
+إذا لم يكن ذلك ممكنًا على منصتك، يمكنك استخدام مصدر OpenTelemetry مخصص مع [تكوين OpenTelemetry يدويًا](/docs/pages/building-your-application/optimizing/open-telemetry#manual-opentelemetry-configuration)
+
+## النطاقات المخصصة
+
+يمكنك إضافة نطاق مخصص باستخدام [واجهات برمجة تطبيقات OpenTelemetry](https://opentelemetry.io/docs/instrumentation/js/instrumentation).
+
+```bash filename="Terminal"
+npm install @opentelemetry/api
+```
+
+يوضح المثال التالي دالة تقوم جلب نجوم GitHub وتضيف نطاق `fetchGithubStars` مخصصًا لتتبع نتيجة طلب الجلب:
+
+```ts
+import { trace } from '@opentelemetry/api'
+
+export async function fetchGithubStars() {
+  return await trace
+    .getTracer('nextjs-example')
+    .startActiveSpan('fetchGithubStars', async (span) => {
+      try {
+        return await getValue()
+      } finally {
+        span.end()
+      }
+    })
+}
+```
+
+سيتم تنفيذ دالة `register` قبل تشغيل الكود الخاص بك في بيئة جديدة.
+يمكنك البدء في إنشاء نطاقات جديدة، ويجب أن تتم إضافتها بشكل صحيح إلى التتبع المصدر.
+
+## النطاقات الافتراضية في Next.js
+
+يقوم Next.js تلقائيًا بإعداد عدة نطاقات لتوفير رؤى مفيدة حول أداء التطبيق الخاص بك.
+
+تتبع السمات على النطاقات [الاتفاقيات الدلالية لـ OpenTelemetry](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/). نضيف أيضًا بعض السمات المخصصة تحت مساحة الاسم `next`:
+
+- `next.span_name` - يكرر اسم النطاق
+- `next.span_type` - كل نوع نطاق له معرف فريد
+- `next.route` - نمط المسار للطلب (مثل `/[param]/user`).
+- `next.page`
+  - هذه قيمة داخلية تستخدمها موجه التطبيق.
+  - يمكنك التفكير فيها كمسار لملف خاص (مثل `page.ts`، `layout.ts`، `loading.ts` وغيرها)
+  - يمكن استخدامها كمعرف فريد فقط عند إقرانها بـ `next.route` لأن `/layout` يمكن استخدامها لتحديد كل من `/(groupA)/layout.ts` و `/(groupB)/layout.ts`
+
+### `[http.method] [next.route]`
+
+- `next.span_type`: `BaseServer.handleRequest`
+
+يمثل هذا النطاق النطاق الجذر لكل طلب وارد لتطبيق Next.js الخاص بك. يتتبع طريقة HTTP، المسار، الهدف، ورمز حالة الطلب.
+
+السمات:
+
+- [سمات HTTP المشتركة](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#common-attributes)
+  - `http.method`
+  - `http.status_code`
+- [سمات خادم HTTP](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#http-server-semantic-conventions)
+  - `http.route`
+  - `http.target`
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `render route (app) [next.route]`
+
+- `next.span_type`: `AppRender.getBodyResult`.
+
+يمثل هذا النطاق عملية عرض مسار في موجه التطبيق.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `fetch [http.method] [http.url]`
+
+- `next.span_type`: `AppRender.fetch`.
+
+يمثل هذا النطاق طلب الجلب المنفذ في الكود الخاص بك.
+
+السمات:
+
+- [سمات HTTP المشتركة](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#common-attributes)
+  - `http.method`
+- [سمات عميل HTTP](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#http-client)
+  - `http.url`
+  - `net.peer.name`
+  - `net.peer.port` (فقط إذا تم تحديده)
+- `next.span_name`
+- `next.span_type`
+
+### `executing api route (app) [next.route]`
+
+- `next.span_type`: `AppRouteRouteHandlers.runHandler`.
+
+يمثل هذا النطاق تنفيذ معالج مسار API في موجه التطبيق.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `getServerSideProps [next.route]`
+
+- `next.span_type`: `Render.getServerSideProps`.
+
+يمثل هذا النطاق تنفيذ `getServerSideProps` لمسار معين.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `getStaticProps [next.route]`
+
+- `next.span_type`: `Render.getStaticProps`.
+
+يمثل هذا النطاق تنفيذ `getStaticProps` لمسار معين.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `render route (pages) [next.route]`
+
+- `next.span_type`: `Render.renderDocument`.
+
+يمثل هذا النطاق عملية عرض المستند لمسار معين.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `generateMetadata [next.page]`
+
+- `next.span_type`: `ResolveMetadata.generateMetadata`.
+
+يمثل هذا النطاق عملية إنشاء بيانات وصفية لصفحة معينة (يمكن أن يحتوي مسار واحد على عدة نطاقات من هذه).
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.page`
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx
new file mode 100644
index 00000000..69ec68a7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx
@@ -0,0 +1,96 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:05:29.231Z
+title: التهيئة الآلية (Instrumentation)
+description: تعلم كيفية استخدام التهيئة الآلية لتشغيل التعليمات البرمجية عند بدء تشغيل الخادم في تطبيق Next.js الخاص بك
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+إذا قمت بتصدير دالة باسم `register` من ملف `instrumentation.ts` (أو `.js`) في **الدليل الجذري** لمشروعك (أو داخل مجلد `src` إذا كنت تستخدم واحدًا)، فسنقوم باستدعاء هذه الدالة عند بدء تشغيل أي نسخة جديدة من خادم Next.js.
+
+<AppOnly>
+
+> **معلومة مفيدة**
+>
+> - هذه الميزة **تجريبية**. لاستخدامها، يجب عليك الموافقة صراحةً عن طريق تعريف `experimental.instrumentationHook = true;` في ملف `next.config.js` الخاص بك.
+> - يجب أن يكون ملف `instrumentation` في جذر مشروعك وليس داخل مجلد `app` أو `pages`. إذا كنت تستخدم مجلد `src`، فضع الملف داخل `src` بجانب `pages` و `app`.
+> - إذا كنت تستخدم [خيار تكوين `pageExtensions`](/docs/app/api-reference/next-config-js/pageExtensions) لإضافة لاحقة، فستحتاج أيضًا إلى تحديث اسم ملف `instrumentation` ليتطابق.
+> - لقد أنشأنا مثالًا أساسيًا [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) يمكنك استخدامه.
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**
+>
+> - هذه الميزة **تجريبية**. لاستخدامها، يجب عليك الموافقة صراحةً عن طريق تعريف `experimental.instrumentationHook = true;` في ملف `next.config.js` الخاص بك.
+> - يجب أن يكون ملف `instrumentation` في جذر مشروعك وليس داخل مجلد `app` أو `pages`. إذا كنت تستخدم مجلد `src`، فضع الملف داخل `src` بجانب `pages` و `app`.
+> - إذا كنت تستخدم [خيار تكوين `pageExtensions`](/docs/pages/api-reference/next-config-js/pageExtensions) لإضافة لاحقة، فستحتاج أيضًا إلى تحديث اسم ملف `instrumentation` ليتطابق.
+> - لقد أنشأنا مثالًا أساسيًا [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) يمكنك استخدامه.
+
+</PagesOnly>
+
+عند نشر دالة `register` الخاصة بك، سيتم استدعاؤها عند كل إقلاع بارد (ولكن مرة واحدة بالضبط في كل بيئة).
+
+في بعض الأحيان، قد يكون من المفيد استيراد ملف في الكود الخاص بك بسبب الآثار الجانبية التي سيسببها. على سبيل المثال، قد تستورد ملفًا يحدد مجموعة من المتغيرات العامة، ولكن لا تستخدم الملف المستورد صراحةً في الكود الخاص بك. سيظل لديك إمكانية الوصول إلى المتغيرات العامة التي أعلن عنها الحزمة.
+
+يمكنك استيراد الملفات ذات الآثار الجانبية في `instrumentation.ts`، والتي قد ترغب في استخدامها في دالة `register` كما هو موضح في المثال التالي:
+
+```ts filename="your-project/instrumentation.ts" switcher
+import { init } from 'package-init'
+
+export function register() {
+  init()
+}
+```
+
+```js filename="your-project/instrumentation.js" switcher
+import { init } from 'package-init'
+
+export function register() {
+  init()
+}
+```
+
+ومع ذلك، نوصي باستيراد الملفات ذات الآثار الجانبية باستخدام `import` من داخل دالة `register` بدلاً من ذلك. يوضح المثال التالي استخدامًا أساسيًا لـ `import` في دالة `register`:
+
+```ts filename="your-project/instrumentation.ts" switcher
+export async function register() {
+  await import('package-with-side-effect')
+}
+```
+
+```js filename="your-project/instrumentation.js" switcher
+export async function register() {
+  await import('package-with-side-effect')
+}
+```
+
+بفعلك هذا، يمكنك تجميع جميع الآثار الجانبية في مكان واحد في الكود الخاص بك، وتجنب أي عواقب غير مقصودة من استيراد الملفات.
+
+نستدعي `register` في جميع البيئات، لذا من الضروري استيراد أي كود لا يدعم كلًا من `edge` و `nodejs` بشكل مشروط. يمكنك استخدام متغير البيئة `NEXT_RUNTIME` للحصول على البيئة الحالية. سيبدو استيراد كود خاص ببيئة معينة كما يلي:
+
+```ts filename="your-project/instrumentation.ts" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation-node')
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./instrumentation-edge')
+  }
+}
+```
+
+```js filename="your-project/instrumentation.js" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation-node')
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./instrumentation-edge')
+  }
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/index.mdx
new file mode 100644
index 00000000..274af68d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/06-optimizing/index.mdx
@@ -0,0 +1,48 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:04:45.242Z
+title: التحسينات
+nav_title: التحسين
+description: قم بتحسين تطبيق Next.js الخاص بك للحصول على أفضل أداء وتجربة مستخدم.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+يأتي Next.js مع مجموعة متنوعة من التحسينات المدمجة المصممة لتحسين سرعة تطبيقك و [مؤشرات الويب الأساسية (Core Web Vitals)](https://web.dev/vitals/). سيغطي هذا الدليل التحسينات التي يمكنك الاستفادة منها لتعزيز تجربة المستخدم.
+
+## المكونات المدمجة
+
+تقوم المكونات المدمجة بإخفاء تعقيد تنفيذ تحسينات واجهة المستخدم الشائعة. هذه المكونات هي:
+
+- **الصور**: مبنية على عنصر `<img>` الأصلي. يقوم مكون الصورة بتحسين الصور للأداء عن طريق التحميل البطيء وتغيير حجم الصور تلقائيًا بناءً على حجم الجهاز.
+- **الرابط**: مبنية على علامات `<a>` الأصلية. يقوم مكون الرابط بجلب الصفحات مسبقًا في الخلفية، لتحقيق انتقالات بين الصفحات أسرع وأكثر سلاسة.
+- **النصوص البرمجية**: مبنية على علامات `<script>` الأصلية. يمنحك مكون النص البرمجي تحكمًا في تحميل وتنفيذ النصوص البرمجية لجهات خارجية.
+
+## البيانات الوصفية
+
+تساعد البيانات الوصفية محركات البحث على فهم محتواك بشكل أفضل (مما قد يؤدي إلى تحسين تحسين محركات البحث SEO)، وتتيح لك تخصيص طريقة عرض محتواك على وسائل التواصل الاجتماعي، مما يساعدك على إنشاء تجربة مستخدم أكثر جاذبية واتساقًا عبر منصات مختلفة.
+
+<AppOnly>
+
+تتيح لك واجهة برمجة تطبيقات البيانات الوصفية في Next.js تعديل عنصر `<head>` للصفحة. يمكنك تكوين البيانات الوصفية بطريقتين:
+
+- **البيانات الوصفية المعتمدة على التكوين**: قم بتصدير كائن بيانات وصفية ثابت أو دالة generateMetadata ديناميكية في ملف `layout.js` أو `page.js`.
+- **البيانات الوصفية المعتمدة على الملفات**: أضف ملفات خاصة ثابتة أو تم إنشاؤها ديناميكيًا إلى مقاطع المسار.
+
+بالإضافة إلى ذلك، يمكنك إنشاء صور Open Graph ديناميكية باستخدام JSX و CSS مع منشئ [imageResponse](/docs/app/api-reference/functions/image-response).
+
+</AppOnly>
+
+<PagesOnly>
+
+يسمح لك مكون Head في Next.js بتعديل `<head>` للصفحة. تعلم المزيد في وثائق [مكون Head](/docs/pages/api-reference/components/head).
+
+</PagesOnly>
+
+## الأصول الثابتة
+
+يمكن استخدام مجلد `/public` في Next.js لخدمة الأصول الثابتة مثل الصور والخطوط والملفات الأخرى. يمكن أيضًا تخزين الملفات داخل `/public` مؤقتًا بواسطة موفري CDN حتى يتم تسليمها بكفاءة.
+
+## التحليلات والمراقبة
+
+بالنسبة للتطبيقات الكبيرة، يتكامل Next.js مع أدوات التحليلات والمراقبة الشائعة لمساعدتك في فهم أداء تطبيقك. تعلم المزيد في أدلة <PagesOnly>[التحليلات](/docs/app/building-your-application/optimizing/analytics)، </PagesOnly> [OpenTelemetry](/docs/pages/building-your-application/optimizing/open-telemetry)<PagesOnly>،</PagesOnly> و [أدوات القياس](/docs/pages/building-your-application/optimizing/instrumentation).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/01-typescript.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/01-typescript.mdx
new file mode 100644
index 00000000..6ccf538d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/01-typescript.mdx
@@ -0,0 +1,305 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:06:06.453Z
+title: TypeScript
+description: يوفر Next.js تجربة تطوير مع TypeScript كخيار أول لبناء تطبيق React الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+يوفر Next.js تجربة تطوير مع TypeScript كخيار أول لبناء تطبيق React الخاص بك.
+
+يأتي مع دعم مدمج لـ TypeScript لتثبيت الحزم الضرورية تلقائيًا وتهيئة الإعدادات المناسبة.
+
+<AppOnly>
+
+بالإضافة إلى [إضافة TypeScript](#typescript-plugin) لمحرر الأكواد الخاص بك.
+
+> **🎥 شاهد:** تعرف على إضافة TypeScript المدمجة → [YouTube (3 دقائق)](https://www.youtube.com/watch?v=pqMqn9fKEf8)
+
+</AppOnly>
+
+## المشاريع الجديدة
+
+`create-next-app` الآن يأتي مع TypeScript افتراضيًا.
+
+```bash filename="Terminal"
+npx create-next-app@latest
+```
+
+## المشاريع الحالية
+
+أضف TypeScript إلى مشروعك عن طريق إعادة تسمية ملف إلى `.ts` / `.tsx`. قم بتشغيل `next dev` و `next build` لتثبيت التبعيات الضرورية تلقائيًا وإضافة ملف `tsconfig.json` مع خيارات التهيئة الموصى بها.
+
+إذا كان لديك بالفعل ملف `jsconfig.json`، انسخ خيار `paths` من الملف القديم `jsconfig.json` إلى ملف `tsconfig.json` الجديد، واحذف ملف `jsconfig.json` القديم.
+
+<AppOnly>
+
+## إضافة TypeScript
+
+يتضمن Next.js إضافة TypeScript مخصصة ومدقق أنواع، والتي يمكن لـ VSCode ومحررات الأكواد الأخرى استخدامها للتحقق المتقدم من الأنواع والإكمال التلقائي.
+
+يمكنك تمكين الإضافة في VS Code عن طريق:
+
+1. فتح لوحة الأوامر (`Ctrl/⌘` + `Shift` + `P`)
+2. البحث عن "TypeScript: Select TypeScript Version"
+3. اختيار "Use Workspace Version"
+
+<Image
+  alt="لوحة أوامر TypeScript"
+  srcLight="/docs/light/typescript-command-palette.png"
+  srcDark="/docs/dark/typescript-command-palette.png"
+  width="1600"
+  height="637"
+/>
+
+الآن، عند تحرير الملفات، سيتم تفعيل الإضافة المخصصة. عند تشغيل `next build`، سيتم استخدام مدقق الأنواع المخصص.
+
+### ميزات الإضافة
+
+يمكن لإضافة TypeScript المساعدة في:
+
+- التحذير عند تمرير قيم غير صالحة لـ [خيارات تكوين المقاطع](/docs/app/api-reference/file-conventions/route-segment-config).
+- عرض الخيارات المتاحة والوثائق في السياق.
+- التأكد من استخدام توجيه `use client` بشكل صحيح.
+- التأكد من أن خطافات العميل (مثل `useState`) تستخدم فقط في مكونات العميل.
+
+> **معلومة جيدة:** سيتم إضافة المزيد من الميزات في المستقبل.
+
+</AppOnly>
+
+## الحد الأدنى لإصدار TypeScript
+
+يوصى بشدة أن تكون على الأقل على الإصدار `v4.5.2` من TypeScript للحصول على ميزات مثل [معدلات النوع على أسماء الاستيراد](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names) و[تحسينات الأداء](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#real-path-sync-native).
+
+<AppOnly>
+
+## الروابط المحددة سكونيًا
+
+يمكن لـ Next.js تحديد أنواع الروابط سكونيًا لمنع الأخطاء المطبعية وغيرها عند استخدام `next/link`، مما يحسن سلامة الأنواع عند التنقل بين الصفحات.
+
+لتفعيل هذه الميزة، يجب تمكين `experimental.typedRoutes` ويجب أن يكون المشروع يستخدم TypeScript.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    typedRoutes: true,
+  },
+}
+
+module.exports = nextConfig
+```
+
+سيقوم Next.js بإنشاء تعريف للروابط في `.next/types` يحتوي على معلومات عن جميع المسارات الموجودة في تطبيقك، والتي يمكن لـ TypeScript استخدامها لتقديم ملاحظات في محررك حول الروابط غير الصالحة.
+
+حاليًا، الدعم التجريبي يشمل أي سلسلة حرفية، بما في ذلك المقاطع الديناميكية. بالنسبة للسلاسل غير الحرفية، تحتاج حاليًا إلى تحويل `href` يدويًا باستخدام `as Route`:
+
+```tsx
+import type { Route } from 'next';
+import Link from 'next/link'
+
+// لا توجد أخطاء TypeScript إذا كان href مسارًا صالحًا
+<Link href="/about" />
+<Link href="/blog/nextjs" />
+<Link href={`/blog/${slug}`} />
+<Link href={('/blog' + slug) as Route} />
+
+// أخطاء TypeScript إذا كان href ليس مسارًا صالحًا
+<Link href="/aboot" />
+```
+
+لقبول `href` في مكون مخصص يغلف `next/link`، استخدم Generic:
+
+```tsx
+import type { Route } from 'next'
+import Link from 'next/link'
+
+function Card<T extends string>({ href }: { href: Route<T> | URL }) {
+  return (
+    <Link href={href}>
+      <div>My Card</div>
+    </Link>
+  )
+}
+```
+
+> **كيف يعمل؟**
+>
+> عند تشغيل `next dev` أو `next build`، ينشئ Next.js ملف `.d.ts` مخفيًا داخل `.next` يحتوي على معلومات عن جميع المسارات الموجودة في تطبيقك (جميع المسارات الصالحة كنوع `href` لـ `Link`). يتم تضمين هذا الملف `.d.ts` في `tsconfig.json` وسيتحقق مترجم TypeScript من هذا الملف `.d.ts` ويقدم ملاحظات في محررك حول الروابط غير الصالحة.
+
+## سلامة الأنواع من البداية إلى النهاية
+
+يحتوي Next.js 13 على **سلامة أنواع محسنة**. وهذا يشمل:
+
+1. **عدم تسلسل البيانات بين وظيفة الجلب والصفحة**: يمكنك `fetch` مباشرة في المكونات والتخطيطات والصفحات على الخادم. هذه البيانات _لا تحتاج_ إلى تسلسل (تحويل إلى سلسلة) ليتم تمريرها إلى جانب العميل للاستهلاك في React. بدلاً من ذلك، نظرًا لأن `app` يستخدم مكونات الخادم افتراضيًا، يمكننا استخدام قيم مثل `Date` و `Map` و `Set` والمزيد دون أي خطوات إضافية. سابقًا، كنت بحاجة إلى تحديد نوع الحدود بين الخادم والعميل يدويًا باستخدام أنواع خاصة بـ Next.js.
+2. **تدفق بيانات مبسط بين المكونات**: مع إزالة `_app` لصالح التخطيطات الجذرية، أصبح من الأسهل تصور تدفق البيانات بين المكونات والصفحات. سابقًا، كان تدفق البيانات بين `pages` الفردية و `_app` صعب التحديد ويمكن أن يؤدي إلى أخطاء مربكة. مع [جلب البيانات المجاور](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) في Next.js 13، لم يعد هذا مشكلة.
+
+[جلب البيانات في Next.js](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) يوفر الآن سلامة أنواع أقرب ما يكون من البداية إلى النهاية دون أن يكون تقييديًا بشأن اختيار قاعدة البيانات أو مزود المحتوى.
+
+يمكننا تحديد نوع بيانات الاستجابة كما تتوقع مع TypeScript العادي. على سبيل المثال:
+
+```tsx filename="app/page.tsx"
+async function getData() {
+  const res = await fetch('https://api.example.com/...')
+  // قيمة الإرجاع *ليست* مسلسلة
+  // يمكنك إرجاع Date و Map و Set وغيرها
+  return res.json()
+}
+
+export default async function Page() {
+  const name = await getData()
+
+  return '...'
+}
+```
+
+لـ سلامة أنواع _كاملة_ من البداية إلى النهاية، يتطلب هذا أيضًا أن تدعم قاعدة البيانات أو مزود المحتوى الخاص بك TypeScript. يمكن أن يكون ذلك من خلال استخدام [ORM](https://en.wikipedia.org/wiki/Object%E2%80%93relational_mapping) أو أداة بناء استعلامات آمنة للأنواع.
+
+## خطأ TypeScript في مكون الخادم غير المتزامن
+
+لاستخدام مكون خادم `async` مع TypeScript، تأكد من أنك تستخدم TypeScript `5.1.3` أو أعلى و `@types/react` `18.2.8` أو أعلى.
+
+إذا كنت تستخدم إصدارًا أقدم من TypeScript، فقد ترى خطأ نوع `'Promise<Element>' is not a valid JSX element`. التحديث إلى أحدث إصدار من TypeScript و `@types/react` يجب أن يحل هذه المشكلة.
+
+## تمرير البيانات بين مكونات الخادم والعميل
+
+عند تمرير البيانات بين مكون الخادم ومكون العميل عبر الخصائص، لا تزال البيانات مسلسلة (محولة إلى سلسلة) للاستخدام في المتصفح. ومع ذلك، لا تحتاج إلى نوع خاص. يتم تحديد نوعها بنفس طريقة تمرير أي خصائص أخرى بين المكونات.
+
+علاوة على ذلك، هناك كود أقل يحتاج إلى تسلسل، حيث أن البيانات غير المعروضة لا تعبر بين الخادم والعميل (تبقى على الخادم). هذا أصبح ممكنًا الآن فقط من خلال دعم مكونات الخادم.
+
+</AppOnly>
+
+<PagesOnly>
+
+## التوليد السكوني وعرض جانب الخادم
+
+لـ [`getStaticProps`](/docs/pages/api-reference/functions/get-static-props) و [`getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) و [`getServerSideProps`](/docs/pages/api-reference/functions/get-server-side-props)، يمكنك استخدام أنواع `GetStaticProps` و `GetStaticPaths` و `GetServerSideProps` على التوالي:
+
+```tsx filename="pages/blog/[slug].tsx"
+import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
+
+export const getStaticProps = (async (context) => {
+  // ...
+}) satisfies GetStaticProps
+
+export const getStaticPaths = (async () => {
+  // ...
+}) satisfies GetStaticPaths
+
+export const getServerSideProps = (async (context) => {
+  // ...
+}) satisfies GetServerSideProps
+```
+
+> **معلومة جيدة:** تمت إضافة `satisfies` إلى TypeScript في [الإصدار 4.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html). نوصي بالترقية إلى أحدث إصدار من TypeScript.
+
+## مسارات API
+
+إليك مثال لكيفية استخدام الأنواع المدمجة لمسارات API:
+
+```ts
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({ name: 'John Doe' })
+}
+```
+
+يمكنك أيضًا تحديد نوع بيانات الاستجابة:
+
+```ts
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
+```
+
+## `App` المخصص
+
+إذا كان لديك [تطبيق مخصص `App`](/docs/pages/building-your-application/routing/custom-app)، يمكنك استخدام النوع المدمج `AppProps` وتغيير اسم الملف إلى `./pages/_app.tsx` كما يلي:
+
+```ts
+import type { AppProps } from 'next/app'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+</PagesOnly>
+
+## أسماء مسارات مختصرة و baseUrl
+
+يدعم Next.js تلقائيًا خيارات `"paths"` و `"baseUrl"` في `tsconfig.json`.
+
+<AppOnly>
+
+يمكنك معرفة المزيد عن هذه الميزة في [وثائق أسماء مسارات الوحدات](/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases).
+
+</AppOnly>
+
+<PagesOnly>
+
+يمكنك معرفة المزيد عن هذه الميزة في [وثائق أسماء مسارات الوحدات](/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases).
+
+</PagesOnly>
+
+## التحقق من أنواع next.config.js
+
+يجب أن يكون ملف `next.config.js` ملف JavaScript لأنه لا يتم تحليله بواسطة Babel أو TypeScript، ولكن يمكنك إضافة بعض التحقق من الأنواع في بيئة التطوير الخاصة بك باستخدام JSDoc كما يلي:
+
+```js
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+  /* خيارات التهيئة هنا */
+}
+
+module.exports = nextConfig
+```
+
+## التحقق التدريجي من الأنواع
+
+منذ الإصدار `v10.2.1` يدعم Next.js [التحقق التدريجي من الأنواع](https://www.typescriptlang.org/tsconfig#incremental) عند تمكينه في `tsconfig.json` الخاص بك، وهذا يمكن أن يساعد في تسريع التحقق من الأنواع في التطبيقات الكبيرة.
+
+## تجاهل أخطاء TypeScript
+
+يفشل Next.js **بناء الإنتاج** (`next build`) الخاص بك عندما تكون هناك أخطاء TypeScript في مشروعك.
+
+إذا كنت تريد أن يقوم Next.js بإنتاج كود الإنتاج بشكل خطير حتى عندما يكون هناك أخطاء في تطبيقك، يمكنك تعطيل خطوة التحقق من الأنواع المدمجة.
+
+إذا تم تعطيله، تأكد من أنك تقوم بفحص الأنواع كجزء من عملية البناء أو النشر، وإلا فقد يكون هذا خطيرًا جدًا.
+
+افتح `next.config.js` وقم بتمكين خيار `ignoreBuildErrors` في تكوين `typescript`:
+
+```js filename="next.config.js"
+module.exports = {
+  typescript: {
+    // !! تحذير !!
+    // السماح خطيرًا لبناءات الإنتاج بالإكمال بنجاح حتى إذا
+    // كان هناك أخطاء أنواع في مشروعك.
+    // !! تحذير !!
+    ignoreBuildErrors: true,
+  },
+}
+```
+
+## تغييرات الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                              |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `v13.2.0` | أصبحت الروابط المحددة سكونيًا متاحة في النسخة التجريبية.                                                                                        |
+| `v12.0.0` | [SWC](/docs/architecture/nextjs-compiler) يستخدم الآن افتراضيًا لتحويل TypeScript و TSX لبناءات أسرع.                    |
+| `v10.2.1` | تمت إضافة دعم [التحقق التدريجي من الأنواع](https://www.typescriptlang.org/tsconfig#incremental) عند تمكينه في `tsconfig.json` الخاص بك. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/02-eslint.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/02-eslint.mdx
new file mode 100644
index 00000000..60751868
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/02-eslint.mdx
@@ -0,0 +1,301 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:06:07.334Z
+title: ESLint
+description: يوفر Next.js تجربة متكاملة مع ESLint بشكل افتراضي. هذه القواعد تساعدك على استخدام Next.js بأفضل طريقة ممكنة.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+يوفر Next.js تجربة متكاملة مع [ESLint](https://eslint.org/) جاهزة للاستخدام مباشرة. أضف `next lint` كسكريبت في ملف `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "lint": "next lint"
+  }
+}
+```
+
+ثم قم بتشغيل `npm run lint` أو `yarn lint`:
+
+```bash filename="Terminal"
+yarn lint
+```
+
+إذا لم يكن ESLint مضبوطًا مسبقًا في تطبيقك، سيتم توجيهك خلال عملية التثبيت والضبط.
+
+```bash filename="Terminal"
+yarn lint
+```
+
+> سترى رسالة مثل:
+>
+> ? كيف تريد ضبط ESLint؟
+>
+> ❯ صارم (موصى به)  
+> أساسي  
+> إلغاء
+
+يمكن اختيار أحد الخيارات الثلاثة التالية:
+
+- **صارم**: يتضمن إعدادات ESLint الأساسية لـ Next.js مع مجموعة قواعد أكثر صرامة [لـ Core Web Vitals](#core-web-vitals). هذا هو الإعداد الموصى به للمطورين الذين يقومون بإعداد ESLint لأول مرة.
+
+  ```json filename=".eslintrc.json"
+  {
+    "extends": "next/core-web-vitals"
+  }
+  ```
+
+- **أساسي**: يتضمن إعدادات ESLint الأساسية لـ Next.js.
+
+  ```json filename=".eslintrc.json"
+  {
+    "extends": "next"
+  }
+  ```
+
+- **إلغاء**: لا يتضمن أي إعدادات لـ ESLint. اختر هذا الخيار فقط إذا كنت تخطط لإعداد إعدادات ESLint مخصصة بنفسك.
+
+إذا تم اختيار أي من خياري الضبط، سيقوم Next.js تلقائيًا بتثبيت `eslint` و `eslint-config-next` كتبعيات في تطبيقك وإنشاء ملف `.eslintrc.json` في جذر مشروعك يتضمن الإعدادات المختارة.
+
+يمكنك الآن تشغيل `next lint` في أي وقت لتشغيل ESLint واكتشاف الأخطاء. بمجرد إعداد ESLint، سيعمل تلقائيًا أثناء كل عملية بناء (`next build`). الأخطاء ستفشل عملية البناء، بينما التحذيرات لن تفعل ذلك.
+
+<AppOnly>
+
+> إذا كنت لا تريد أن يعمل ESLint أثناء `next build`، راجع وثائق [تجاهل ESLint](/docs/app/api-reference/next-config-js/eslint).
+
+</AppOnly>
+
+<PagesOnly>
+
+> إذا كنت لا تريد أن يعمل ESLint أثناء `next build`، راجع وثائق [تجاهل ESLint](/docs/pages/api-reference/next-config-js/eslint).
+
+</PagesOnly>
+
+نوصي باستخدام [تكامل](https://eslint.org/docs/user-guide/integrations#editors) مناسب لعرض التحذيرات والأخطاء مباشرة في محرر الأكواد أثناء التطوير.
+
+## ضبط ESLint
+
+يتضمن الإعداد الافتراضي (`eslint-config-next`) كل ما تحتاجه لتجربة فحص مثالية جاهزة للاستخدام في Next.js. إذا لم يكن ESLint مضبوطًا مسبقًا في تطبيقك، نوصي باستخدام `next lint` لإعداد ESLint مع هذا الضبط.
+
+> إذا كنت ترغب في استخدام `eslint-config-next` مع إعدادات ESLint أخرى، راجع قسم [الإعدادات الإضافية](#additional-configurations) لمعرفة كيفية القيام بذلك دون حدوث تعارضات.
+
+يتم استخدام مجموعات القواعد الموصى بها من الإضافات التالية لـ ESLint ضمن `eslint-config-next`:
+
+- [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react)
+- [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)
+- [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)
+
+هذا سيتفوق على الإعدادات من `next.config.js`.
+
+## إضافة ESLint
+
+يوفر Next.js إضافة ESLint، [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)، مضمنة مسبقًا ضمن الإعدادات الأساسية التي تجعل من الممكن اكتشاف المشكلات الشائعة في تطبيقات Next.js. مجموعة القواعد الكاملة كالتالي:
+
+<Check size={18} /> مفعل في الإعداد الموصى به
+
+|                     | القاعدة                                                                                                                     | الوصف                                                                                                      |
+| :-----------------: | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| <Check size={18} /> | [@next/next/google-font-display](/docs/messages/google-font-display)                                                     | فرض سلوك font-display مع خطوط جوجل.                                                                 |
+| <Check size={18} /> | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect)                                               | التأكد من استخدام `preconnect` مع خطوط جوجل.                                                                   |
+| <Check size={18} /> | [@next/next/inline-script-id](/docs/messages/inline-script-id)                                                           | فرض وجود سمة `id` على مكونات `next/script` مع محتوى مضمن.                                          |
+| <Check size={18} /> | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga)                                                       | تفضيل مكون `next/script` عند استخدام السكريبت المضمن لتحليلات جوجل.                                |
+| <Check size={18} /> | [@next/next/no-assign-module-variable](/docs/messages/no-assign-module-variable)                                         | منع تعيين قيمة للمتغير `module`.                                                                     |
+| <Check size={18} /> | [@next/next/no-async-client-component](/docs/messages/no-async-client-component)                                         | منع أن تكون مكونات العميل دوال غير متزامنة.                                                            |
+| <Check size={18} /> | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document) | منع استخدام إستراتيجية `beforeInteractive` لـ `next/script` خارج `pages/_document.js`.                   |
+| <Check size={18} /> | [@next/next/no-css-tags](/docs/messages/no-css-tags)                                                                     | منع استخدام علامات أنماط CSS يدوية.                                                                                  |
+| <Check size={18} /> | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page)                                       | منع استيراد `next/document` خارج `pages/_document.js`.                                               |
+| <Check size={18} /> | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head)                                                         | منع الاستخدام المكرر لـ `<Head>` في `pages/_document.js`.                                                     |
+| <Check size={18} /> | [@next/next/no-head-element](/docs/messages/no-head-element)                                                             | منع استخدام عنصر `<head>`.                                                                               |
+| <Check size={18} /> | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document)                                       | منع استخدام `next/head` في `pages/_document.js`.                                                            |
+| <Check size={18} /> | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages)                                               | منع استخدام عناصر `<a>` للتنقل بين صفحات Next.js الداخلية.                                           |
+| <Check size={18} /> | [@next/next/no-img-element](/docs/messages/no-img-element)                                                               | منع استخدام عنصر `<img>` بسبب بطء LCP وزيادة استهلاك النطاق الترددي.                                         |
+| <Check size={18} /> | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font)                                                     | منع استخدام خطوط مخصصة للصفحات فقط.                                                                                  |
+| <Check size={18} /> | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head)                                     | منع استخدام `next/script` في مكون `next/head`.                                                         |
+| <Check size={18} /> | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document)                                         | منع استخدام `styled-jsx` في `pages/_document.js`.                                                           |
+| <Check size={18} /> | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts)                                                             | منع السكربتات المتزامنة.                                                                                     |
+| <Check size={18} /> | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head)                                         | منع استخدام `<title>` مع مكون `Head` من `next/document`.                                           |
+| <Check size={18} /> | @next/next/no-typos                                                                                                      | منع الأخطاء الإملائية الشائعة في [وظائف جلب البيانات في Next.js](/docs/pages/building-your-application/data-fetching) |
+| <Check size={18} /> | [@next/next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio)                                               | منع تكرار polyfills من Polyfill.io.                                                                    |
+
+إذا كان ESLint مضبوطًا مسبقًا في تطبيقك، نوصي بالتمديد من هذه الإضافة مباشرة بدلاً من تضمين `eslint-config-next` إلا إذا توفرت بعض الشروط. راجع [مجموعة قواعد الإضافة الموصى بها](#recommended-plugin-ruleset) للمزيد.
+
+### إعدادات مخصصة
+
+#### `rootDir`
+
+إذا كنت تستخدم `eslint-plugin-next` في مشروع حيث Next.js غير مثبت في الجذر (مثل monorepo)، يمكنك إخبار `eslint-plugin-next` عن مكان تطبيق Next.js باستخدام خاصية `settings` في ملف `.eslintrc`:
+
+```json filename=".eslintrc.json"
+{
+  "extends": "next",
+  "settings": {
+    "next": {
+      "rootDir": "packages/my-app/"
+    }
+  }
+}
+```
+
+`rootDir` يمكن أن يكون مسارًا (نسبي أو مطلق)، نمط (مثل `"packages/*/"`)، أو مصفوفة من المسارات و/أو الأنماط.
+
+## فحص المجلدات والملفات المخصصة
+
+افتراضيًا، سيقوم Next.js بتشغيل ESLint لجميع الملفات في مجلدات `pages/`، `app/`، `components/`، `lib/`، و `src/`. لكن يمكنك تحديد المجلدات باستخدام خيار `dirs` في ضبط `eslint` في `next.config.js` لعمليات البناء الإنتاجية:
+
+```js filename="next.config.js"
+module.exports = {
+  eslint: {
+    dirs: ['pages', 'utils'], // تشغيل ESLint فقط على مجلدات 'pages' و 'utils' أثناء عمليات البناء الإنتاجية (next build)
+  },
+}
+```
+
+بالمثل، يمكن استخدام أعلام `--dir` و `--file` مع `next lint` لفحص مجلدات وملفات محددة:
+
+```bash filename="Terminal"
+next lint --dir pages --dir utils --file bar.js
+```
+
+## التخزين المؤقت
+
+<AppOnly>
+
+لتحسين الأداء، يتم تخزين معلومات الملفات التي تمت معالجتها بواسطة ESLint افتراضيًا. يتم تخزين هذا في `.next/cache` أو في [دليل البناء](/docs/app/api-reference/next-config-js/distDir) المحدد. إذا كنت تستخدم أي قواعد ESLint تعتمد على أكثر من محتوى ملف مصدر واحد وتحتاج إلى تعطيل التخزين المؤقت، استخدم علم `--no-cache` مع `next lint`.
+
+</AppOnly>
+
+<PagesOnly>
+
+لتحسين الأداء، يتم تخزين معلومات الملفات التي تمت معالجتها بواسطة ESLint افتراضيًا. يتم تخزين هذا في `.next/cache` أو في [دليل البناء](/docs/pages/api-reference/next-config-js/distDir) المحدد. إذا كنت تستخدم أي قواعد ESLint تعتمد على أكثر من محتوى ملف مصدر واحد وتحتاج إلى تعطيل التخزين المؤقت، استخدم علم `--no-cache` مع `next lint`.
+
+</PagesOnly>
+
+```bash filename="Terminal"
+next lint --no-cache
+```
+
+## تعطيل القواعد
+
+إذا كنت ترغب في تعديل أو تعطيل أي قواعد من الإضافات المدعومة (`react`، `react-hooks`، `next`)، يمكنك تغييرها مباشرة باستخدام خاصية `rules` في ملف `.eslintrc`:
+
+```json filename=".eslintrc.json"
+{
+  "extends": "next",
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-page-custom-font": "off"
+  }
+}
+```
+
+### Core Web Vitals
+
+مجموعة قواعد `next/core-web-vitals` يتم تفعيلها عند تشغيل `next lint` لأول مرة واختيار الخيار **صارم**.
+
+```json filename=".eslintrc.json"
+{
+  "extends": "next/core-web-vitals"
+}
+```
+
+`next/core-web-vitals` يقوم بتحديث `eslint-plugin-next` ليعتبر بعض القواعد التي تكون تحذيرات افتراضيًا أخطاء إذا كانت تؤثر على [Core Web Vitals](https://web.dev/vitals/).
+
+> يتم تضمين نقطة الدخول `next/core-web-vitals` تلقائيًا للتطبيقات الجديدة المنشأة باستخدام [Create Next App](/docs/app/api-reference/create-next-app).
+
+## الاستخدام مع أدوات أخرى
+
+### Prettier
+
+يحتوي ESLint أيضًا على قواعد تنسيق الأكواد، والتي قد تتعارض مع إعدادات [Prettier](https://prettier.io/) الحالية. نوصي بتضمين [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) في ضبط ESLint لجعل ESLint و Prettier يعملان معًا.
+
+أولاً، قم بتثبيت التبعية:
+
+```bash filename="Terminal"
+npm install --save-dev eslint-config-prettier
+
+yarn add --dev eslint-config-prettier
+
+pnpm add --save-dev eslint-config-prettier
+
+bun add --dev eslint-config-prettier
+```
+
+ثم أضف `prettier` إلى ضبط ESLint الحالي:
+
+```json filename=".eslintrc.json"
+{
+  "extends": ["next", "prettier"]
+}
+```
+
+### lint-staged
+
+إذا كنت ترغب في استخدام `next lint` مع [lint-staged](https://github.com/okonet/lint-staged) لتشغيل الفاحص على الملفات المعدلة في git، يجب إضافة ما يلي إلى ملف `.lintstagedrc.js` في جذر مشروعك لتحديد استخدام علم `--file`.
+
+```js filename=".lintstagedrc.js"
+const path = require('path')
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+}
+```
+
+## ترحيل الإعدادات الحالية
+
+### مجموعة قواعد الإضافة الموصى بها
+
+إذا كان ESLint مضبوطًا مسبقًا في تطبيقك وأي من الشروط التالية صحيحة:
+
+- لديك واحدة أو أكثر من الإضافات التالية مثبتة مسبقًا (إما بشكل منفصل أو من خلال ضبط آخر مثل `airbnb` أو `react-app`):
+  - `react`
+  - `react-hooks`
+  - `jsx-a11y`
+  - `import`
+- لديك `parserOptions` محددة تختلف عن كيفية ضبط Babel في Next.js (هذا غير موصى به إلا إذا كنت قد [خصصت ضبط Babel](/docs/pages/building-your-application/configuring/babel))
+- لديك `eslint-plugin-import` مثبت مع Node.js و/أو TypeScript [resolvers](https://github.com/benmosher/eslint-plugin-import#resolvers) محددة للتعامل مع الاستيرادات
+
+ثم نوصي إما بإزالة هذه الإعدادات إذا كنت تفضل كيف تم ضبط هذه الخصائص في [`eslint-config-next`](https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/index.js) أو التمديد مباشرة من إضافة Next.js لـ ESLint بدلاً من ذلك:
+
+```js
+module.exports = {
+  extends: [
+    //...
+    'plugin:@next/next/recommended',
+  ],
+}
+```
+
+يمكن تثبيت الإضافة بشكل طبيعي في مشروعك دون الحاجة لتشغيل `next lint`:
+
+```bash filename="Terminal"
+npm install --save-dev @next/eslint-plugin-next
+
+yarn add --dev @next/eslint-plugin-next
+
+pnpm add --save-dev @next/eslint-plugin-next
+
+bun add --dev @next/eslint-plugin-next
+```
+
+هذا يقلل من خطر التصادمات أو الأخطاء التي قد تحدث بسبب استيراد نفس الإضافة أو المحلل عبر ضبط متعدد.
+
+### إعدادات إضافية
+
+إذا كنت تستخدم بالفعل تكوين ESLint منفصلًا وتريد تضمين `eslint-config-next`، تأكد من توسيعه أخيرًا بعد التكوينات الأخرى. على سبيل المثال:
+
+```json filename=".eslintrc.json"
+{
+  "extends": ["eslint:recommended", "next"]
+}
+```
+
+يتولى تكوين `next` بالفعل تعيين القيم الافتراضية لخصائص `parser` و `plugins` و `settings`. ليست هناك حاجة لإعادة تعريف أي من هذه الخصائص يدويًا إلا إذا كنت بحاجة إلى تكوين مختلف لاستخدامك الخاص.
+
+إذا قمت بتضمين أي تكوينات قابلة للمشاركة أخرى، **فسوف تحتاج إلى التأكد من عدم استبدال أو تعديل هذه الخصائص**. وإلا، نوصي بإزالة أي تكوينات تشترك في السلوك مع تكوين `next` أو التوسع مباشرة من إضافة ESLint لـ Next.js كما ذكر أعلاه.
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
new file mode 100644
index 00000000..3a71cdab
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
@@ -0,0 +1,184 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:05:18.672Z
+title: متغيرات البيئة
+description: تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js الخاص بك.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [متغيرات البيئة](https://github.com/vercel/next.js/tree/canary/examples/environment-variables)
+
+</details>
+
+يأتي Next.js مع دعم مدمج لمتغيرات البيئة، مما يسمح لك بما يلي:
+
+- [استخدام `.env.local` لتحميل متغيرات البيئة](#تحميل-متغيرات-البيئة)
+- [حزم متغيرات البيئة للمتصفح عن طريق البادئة `NEXT_PUBLIC_`](#حزم-متغيرات-البيئة-للمتصفح)
+
+## تحميل متغيرات البيئة
+
+يحتوي Next.js على دعم مدمج لتحميل متغيرات البيئة من ملف `.env.local` إلى `process.env`.
+
+```txt filename=".env.local"
+DB_HOST=localhost
+DB_USER=myuser
+DB_PASS=mypassword
+```
+
+<PagesOnly>
+
+هذا يحمل `process.env.DB_HOST` و`process.env.DB_USER` و`process.env.DB_PASS` تلقائيًا في بيئة Node.js مما يسمح لك باستخدامها في [طرق جلب البيانات في Next.js](/docs/pages/building-your-application/data-fetching) و[مسارات API](/docs/pages/building-your-application/routing/api-routes).
+
+على سبيل المثال، باستخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props):
+
+```js filename="pages/index.js"
+export async function getStaticProps() {
+  const db = await myDB.connect({
+    host: process.env.DB_HOST,
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+  })
+  // ...
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+هذا يحمل `process.env.DB_HOST` و`process.env.DB_USER` و`process.env.DB_PASS` تلقائيًا في بيئة Node.js مما يسمح لك باستخدامها في [معالجات المسار](/docs/app/building-your-application/routing/route-handlers).
+
+على سبيل المثال:
+
+```js filename="app/api/route.js"
+export async function GET() {
+  const db = await myDB.connect({
+    host: process.env.DB_HOST,
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+  })
+  // ...
+}
+```
+
+</AppOnly>
+
+### الإشارة إلى متغيرات أخرى
+
+سيقوم Next.js تلقائيًا بتوسيع المتغيرات التي تستخدم `$` للإشارة إلى متغيرات أخرى مثل `$VARIABLE` داخل ملفات `.env*`. هذا يسمح لك بالإشارة إلى أسرار أخرى. على سبيل المثال:
+
+```txt filename=".env"
+TWITTER_USER=nextjs
+TWITTER_URL=https://twitter.com/$TWITTER_USER
+```
+
+في المثال أعلاه، سيتم تعيين `process.env.TWITTER_URL` إلى `https://twitter.com/nextjs`.
+
+> **معلومة مفيدة**: إذا كنت بحاجة إلى استخدام متغير يحتوي على `$` في القيمة الفعلية، يجب تهريبه مثل `\$`.
+
+## حزم متغيرات البيئة للمتصفح
+
+المتغيرات غير المسبوقة بـ `NEXT_PUBLIC_` متاحة فقط في بيئة Node.js، مما يعني أنها غير متاحة للمتصفح (يعمل العميل في بيئة مختلفة).
+
+لجعل قيمة متغير البيئة متاحة في المتصفح، يمكن لـ Next.js "تضمين" القيمة، في وقت البناء، في حزمة js التي يتم تسليمها إلى العميل، واستبدال جميع الإشارات إلى `process.env.[variable]` بقيمة ثابتة. لإخباره بفعل ذلك، ما عليك سوى إضافة البادئة `NEXT_PUBLIC_` للمتغير. على سبيل المثال:
+
+```txt filename="Terminal"
+NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
+```
+
+سيخبر هذا Next.js باستبدال جميع الإشارات إلى `process.env.NEXT_PUBLIC_ANALYTICS_ID` في بيئة Node.js بالقيمة من البيئة التي تقوم فيها بتشغيل `next build`، مما يسمح لك باستخدامها في أي مكان في الكود الخاص بك. سيتم تضمينها في أي JavaScript يتم إرساله إلى المتصفح.
+
+> **ملاحظة**: بعد البناء، لن يستجيب تطبيقك للتغييرات في متغيرات البيئة هذه. على سبيل المثال، إذا كنت تستخدم خط أنابيب Heroku لترقية الإصدارات المبنية في بيئة واحدة إلى بيئة أخرى، أو إذا قمت ببناء ونشر صورة Docker واحدة في بيئات متعددة، فسيتم تجميد جميع متغيرات `NEXT_PUBLIC_` بالقيمة التي تم تقييمها في وقت البناء، لذا يجب تعيين هذه القيم بشكل مناسب عند بناء المشروع. إذا كنت بحاجة إلى الوصول إلى قيم بيئة التشغيل، فسيتعين عليك إعداد واجهة برمجة التطبيقات (API) الخاصة بك لتوفيرها للعميل (إما عند الطلب أو أثناء التهيئة).
+
+```js filename="pages/index.js"
+import setupAnalyticsService from '../lib/my-analytics-service'
+
+// يمكن استخدام 'NEXT_PUBLIC_ANALYTICS_ID' هنا لأنها مسبوقة بـ 'NEXT_PUBLIC_'.
+// سيتم تحويلها في وقت البناء إلى `setupAnalyticsService('abcdefghijk')`.
+setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
+
+function HomePage() {
+  return <h1>Hello World</h1>
+}
+
+export default HomePage
+```
+
+لاحظ أن عمليات البحث الديناميكية لن يتم تضمينها، مثل:
+
+```js
+// لن يتم تضمين هذا، لأنه يستخدم متغيرًا
+const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
+setupAnalyticsService(process.env[varName])
+
+// لن يتم تضمين هذا، لأنه يستخدم متغيرًا
+const env = process.env
+setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)
+```
+
+## متغيرات البيئة الافتراضية
+
+بشكل عام، هناك حاجة إلى ملف `.env.local` واحد فقط. ومع ذلك، قد ترغب أحيانًا في إضافة بعض الإعدادات الافتراضية لبيئة `التطوير` (`next dev`) أو `الإنتاج` (`next start`).
+
+يسمح لك Next.js بتعيين الإعدادات الافتراضية في `.env` (جميع البيئات)، `.env.development` (بيئة التطوير)، و `.env.production` (بيئة الإنتاج).
+
+`.env.local` يتجاوز دائمًا الإعدادات الافتراضية.
+
+> **معلومة مفيدة**: يجب تضمين ملفات `.env` و `.env.development` و `.env.production` في مستودعك لأنها تحدد الإعدادات الافتراضية. **يجب إضافة `.env*.local` إلى `.gitignore`**، لأن هذه الملفات مخصصة لتجاهلها. `.env.local` هو المكان الذي يمكن تخزين الأسرار فيه.
+
+## متغيرات البيئة على Vercel
+
+عند نشر تطبيق Next.js الخاص بك على [Vercel](https://vercel.com)، يمكن تكوين متغيرات البيئة [في إعدادات المشروع](https://vercel.com/docs/concepts/projects/environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+يجب تكوين جميع أنواع متغيرات البيئة هناك. حتى متغيرات البيئة المستخدمة في التطوير - والتي يمكن [تنزيلها على جهازك المحلي](https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لاحقًا.
+
+إذا قمت بتكوين [متغيرات بيئة التطوير](https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، يمكنك سحبها إلى ملف `.env.local` للاستخدام على جهازك المحلي باستخدام الأمر التالي:
+
+```bash filename="Terminal"
+vercel env pull .env.local
+```
+
+## متغيرات بيئة الاختبار
+
+بالإضافة إلى بيئات `التطوير` و`الإنتاج`، هناك خيار ثالث متاح: `الاختبار`. بنفس الطريقة التي يمكنك بها تعيين إعدادات افتراضية لبيئات التطوير أو الإنتاج، يمكنك فعل الشيء نفسه مع ملف `.env.test` لبيئة `الاختبار` (على الرغم من أن هذا ليس شائعًا مثل الخيارين السابقين). لن يقوم Next.js بتحميل متغيرات البيئة من `.env.development` أو `.env.production` في بيئة `الاختبار`.
+
+هذا مفيد عند تشغيل الاختبارات باستخدام أدوات مثل `jest` أو `cypress` حيث تحتاج إلى تعيين متغيرات بيئة محددة لأغراض الاختبار فقط. سيتم تحميل القيم الافتراضية للاختبار إذا تم تعيين `NODE_ENV` إلى `test`، على الرغم من أنك عادةً لا تحتاج إلى القيام بذلك يدويًا لأن أدوات الاختبار ستقوم بذلك نيابة عنك.
+
+هناك فرق بسيط بين بيئة `الاختبار`، وكل من بيئات `التطوير` و`الإنتاج` تحتاج إلى تذكره: لن يتم تحميل `.env.local`، لأنك تتوقع أن تنتج الاختبارات نفس النتائج للجميع. بهذه الطريقة، سيستخدم كل تنفيذ للاختبار نفس إعدادات البيئة الافتراضية عبر عمليات تنفيذ مختلفة عن طريق تجاهل ملف `.env.local` الخاص بك (والذي يهدف إلى تجاوز المجموعة الافتراضية).
+
+> **معلومة مفيدة**: على غرار متغيرات البيئة الافتراضية، يجب تضمين ملف `.env.test` في مستودعك، ولكن لا يجب تضمين `.env.test.local`، لأن ملفات `.env*.local` مخصصة لتجاهلها عبر `.gitignore`.
+
+أثناء تشغيل اختبارات الوحدة، يمكنك التأكد من تحميل متغيرات البيئة بنفس الطريقة التي يفعلها Next.js عن طريق الاستفادة من وظيفة `loadEnvConfig` من حزمة `@next/env`.
+
+```js
+// يمكن استخدام ما يلي في ملف إعداد عام لـ Jest أو ما شابه لإعداد الاختبار الخاص بك
+import { loadEnvConfig } from '@next/env'
+
+export default async () => {
+  const projectDir = process.cwd()
+  loadEnvConfig(projectDir)
+}
+```
+
+## ترتيب تحميل متغيرات البيئة
+
+يتم البحث عن متغيرات البيئة في الأماكن التالية، بالترتيب، والتوقف بمجرد العثور على المتغير.
+
+1. `process.env`
+1. `.env.$(NODE_ENV).local`
+1. `.env.local` (لا يتم التحقق منه عندما تكون `NODE_ENV` هي `test`.)
+1. `.env.$(NODE_ENV)`
+1. `.env`
+
+على سبيل المثال، إذا كانت `NODE_ENV` هي `development` وقمت بتعريف متغير في كل من `.env.development.local` و `.env`، فسيتم استخدام القيمة في `.env.development.local`.
+
+> **معلومة مفيدة**: القيم المسموح بها لـ `NODE_ENV` هي `production` و `development` و `test`.
+
+## معلومات مفيدة
+
+- إذا كنت تستخدم [دليل `/src`](/docs/app/building-your-application/configuring/src-directory)، يجب أن تبقى ملفات `.env.*` في جذر مشروعك.
+- إذا كان متغير البيئة `NODE_ENV` غير معين، فإن Next.js يعين تلقائيًا `development` عند تشغيل أمر `next dev`، أو `production` لجميع الأوامر الأخرى.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/04-absolute-imports-and-module-aliases.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/04-absolute-imports-and-module-aliases.mdx
new file mode 100644
index 00000000..328ed149
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/04-absolute-imports-and-module-aliases.mdx
@@ -0,0 +1,167 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:04:09.326Z
+title: الاستيراد المطلق واختصارات مسار الوحدات
+description: تكوين اختصارات مسار الوحدات التي تتيح لك إعادة تعيين مسارات استيراد معينة.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [الاستيراد المطلق والاختصارات](https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports)
+
+</details>
+
+يحتوي Next.js على دعم مدمج لخيارات `"paths"` و `"baseUrl"` في ملفات `tsconfig.json` و `jsconfig.json`.
+
+تتيح لك هذه الخيارات تعيين مسارات مطلقة لأدلة المشروع، مما يجعل استيراد الوحدات أسهل. على سبيل المثال:
+
+```tsx
+// قبل
+import { Button } from '../../../components/button'
+
+// بعد
+import { Button } from '@/components/button'
+```
+
+> **معلومة مفيدة**: سيقوم `create-next-app` بطلب تكوين هذه الخيارات لك تلقائيًا.
+
+## الاستيراد المطلق
+
+يسمح لك خيار التكوين `baseUrl` بالاستيراد مباشرة من جذر المشروع.
+
+مثال على هذا التكوين:
+
+```json filename="tsconfig.json أو jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}
+```
+
+```tsx filename="components/button.tsx" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```jsx filename="components/button.js" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import Button from 'components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Button from 'components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+## اختصارات الوحدات
+
+بالإضافة إلى تكوين مسار `baseUrl`، يمكنك استخدام خيار `"paths"` لـ"اختصار" مسارات الوحدات.
+
+على سبيل المثال، يقوم التكوين التالي بتعيين `@/components/*` إلى `components/*`:
+
+```json filename="tsconfig.json أو jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+```tsx filename="components/button.tsx" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```jsx filename="components/button.js" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import Button from '@/components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Button from '@/components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+كل من `"paths"` مرتبط بموقع `baseUrl`. على سبيل المثال:
+
+```json
+// tsconfig.json أو jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": "src/",
+    "paths": {
+      "@/styles/*": ["styles/*"],
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+```jsx
+// pages/index.js
+import Button from '@/components/button'
+import '@/styles/styles.css'
+import Helper from 'utils/helper'
+
+export default function HomePage() {
+  return (
+    <Helper>
+      <h1>Hello World</h1>
+      <Button />
+    </Helper>
+  )
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/05-mdx.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/05-mdx.mdx
new file mode 100644
index 00000000..2c954b0c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/05-mdx.mdx
@@ -0,0 +1,453 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:05:52.022Z
+title: MDX
+description: تعلم كيفية تكوين MDX لكتابة JSX في ملفات ماركداون الخاصة بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+[ماركداون (Markdown)](https://daringfireball.net/projects/markdown/syntax) هي لغة ترميز خفيفة الوزن تستخدم لتنسيق النصوص. تتيح لك الكتابة باستخدام صيغة نص عادي وتحويله إلى HTML صالح هيكليًا. تُستخدم عادةً لكتابة المحتوى على المواقع والمدونات.
+
+تكتب...
+
+```md
+أنا **أحب** استخدام [Next.js](https://nextjs.org/)
+```
+
+المخرجات:
+
+```html
+<p>أنا <strong>أحب</strong> استخدام <a href="https://nextjs.org/">Next.js</a></p>
+```
+
+[MDX](https://mdxjs.com/) هي مجموعة شاملة من ماركداون تتيح لك كتابة [JSX](https://react.dev/learn/writing-markup-with-jsx) مباشرة في ملفات ماركداون الخاصة بك. إنها طريقة قوية لإضافة تفاعل ديناميكي وتضمين مكونات React داخل محتواك.
+
+يدعم Next.js كلًا من محتوى MDX المحلي داخل تطبيقك، وكذلك ملفات MDX البعيدة التي يتم جلبها ديناميكيًا من الخادم. يقوم ملحق Next.js بتحويل ماركداون ومكونات React إلى HTML، بما في ذلك الدعم للاستخدام في مكونات الخادم (الافتراضي في App Router).
+
+## `@next/mdx`
+
+يُستخدم حزمة `@next/mdx` لتكوين Next.js حتى تتمكن من معالجة ماركداون وMDX. **إنها تستورد البيانات من الملفات المحلية**، مما يسمح لك بإنشاء صفحات بامتداد `.mdx`، مباشرة في مجلد `/pages` أو `/app`.
+
+دعنا نتعرف على كيفية تكوين واستخدام MDX مع Next.js.
+
+## البدء
+
+قم بتثبيت الحزم المطلوبة لعرض MDX:
+
+```bash filename="Terminal"
+npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
+```
+
+<AppOnly>
+
+قم بإنشاء ملف `mdx-components.tsx` في جذر تطبيقك (المجلد الأصلي لمجلد `app/` أو `src/`):
+
+> **معلومة مفيدة**: `mdx-components.tsx` مطلوب لاستخدام MDX مع App Router ولن يعمل بدونه.
+
+```tsx filename="mdx-components.tsx" switcher
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}
+```
+
+```js filename="mdx-components.js" switcher
+export function useMDXComponents(components) {
+  return {
+    ...components,
+  }
+}
+```
+
+</AppOnly>
+
+قم بتحديث ملف `next.config.js` في جذر مشروعك لتكوينه لاستخدام MDX:
+
+```js filename="next.config.js"
+const withMDX = require('@next/mdx')()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // قم بتكوين `pageExtensions` لتشمل ملفات MDX
+  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  // اختياريًا، أضف أي تكوين آخر لـ Next.js أدناه
+}
+
+module.exports = withMDX(nextConfig)
+```
+
+<AppOnly>
+
+بعد ذلك، قم بإنشاء صفحة MDX جديدة داخل مجلد `/app`:
+
+```txt
+  your-project
+  ├── app
+  │   └── my-mdx-page
+  │       └── page.mdx
+  └── package.json
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+بعد ذلك، قم بإنشاء صفحة MDX جديدة داخل مجلد `/pages`:
+
+```txt
+  your-project
+  ├── pages
+  │   └── my-mdx-page.mdx
+  └── package.json
+```
+
+</PagesOnly>
+
+الآن يمكنك استخدام ماركداون واستيراد مكونات React مباشرة داخل صفحة MDX الخاصة بك:
+
+```mdx
+import { MyComponent } from 'my-components'
+
+# مرحبًا بكم في صفحة MDX الخاصة بي!
+
+هذا بعض النصوص **غامق** و _مائل_.
+
+هذه قائمة في ماركداون:
+
+- واحد
+- اثنان
+- ثلاثة
+
+تحقق من مكون React الخاص بي:
+
+<MyComponent />
+```
+
+التصفح إلى مسار `/my-mdx-page` يجب أن يعرض MDX المقدم الخاص بك.
+
+## MDX البعيدة
+
+إذا كانت ملفات ماركداون أو MDX أو المحتوى موجودة في مكان آخر، يمكنك جلبها ديناميكيًا من الخادم. هذا مفيد للمحتوى المخزن في مجلد محلي منفصل، نظام إدارة المحتوى (CMS)، قاعدة بيانات، أو أي مكان آخر.
+
+هناك حزمتين شائعتين من المجتمع لجلب محتوى MDX:
+
+- [`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support)
+- [`contentlayer`](https://www.contentlayer.dev/)
+
+> **معلومة مفيدة**: يرجى المتابعة بحذر. يترجم MDX إلى JavaScript ويتم تنفيذه على الخادم. يجب عليك فقط جلب محتوى MDX من مصدر موثوق، وإلا يمكن أن يؤدي ذلك إلى تنفيذ كود بعيد (RCE).
+
+المثال التالي يستخدم `next-mdx-remote`:
+
+<AppOnly>
+
+```tsx filename="app/my-mdx-page-remote/page.tsx" switcher
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+export default async function RemoteMdxPage() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، CMS، جلب، أي مكان...
+  const res = await fetch('https://...')
+  const markdown = await res.text()
+  return <MDXRemote source={markdown} />
+}
+```
+
+```jsx filename="app/my-mdx-page-remote/page.js" switcher
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+export default async function RemoteMdxPage() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، CMS، جلب، أي مكان...
+  const res = await fetch('https://...')
+  const markdown = await res.text()
+  return <MDXRemote source={markdown} />
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```tsx filename="pages/my-mdx-page-remote.tsx" switcher
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+
+interface Props {
+  mdxSource: MDXRemoteSerializeResult
+}
+
+export default function RemoteMdxPage({ mdxSource }: Props) {
+  return <MDXRemote {...mdxSource} />
+}
+
+export async function getStaticProps() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، CMS، جلب، أي مكان...
+  const res = await fetch('https:...')
+  const mdxText = await res.text()
+  const mdxSource = await serialize(mdxText)
+  return { props: { source: mdxSource } }
+}
+```
+
+```jsx filename="pages/my-mdx-page-remote.js" switcher
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemote } from 'next-mdx-remote'
+
+export default function RemoteMdxPage({ mdxSource }) {
+  return <MDXRemote {...mdxSource} />
+}
+
+export async function getStaticProps() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، CMS، جلب، أي مكان...
+  const res = await fetch('https:...')
+  const mdxText = await res.text()
+  const mdxSource = await serialize(mdxText)
+  return { props: { source: mdxSource } }
+}
+```
+
+</PagesOnly>
+
+التصفح إلى مسار `/my-mdx-page-remote` يجب أن يعرض MDX المقدم الخاص بك.
+
+## التخطيطات
+
+<AppOnly>
+
+لمشاركة تخطيط بين صفحات MDX، يمكنك استخدام [دعم التخطيط المدمج](/docs/app/building-your-application/routing/pages-and-layouts#layouts) مع App Router.
+
+```tsx filename="app/my-mdx-page/layout.tsx" switcher
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  // يمكنك إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+```jsx filename="app/my-mdx-page/layout.js" switcher
+export default function MdxLayout({ children }) {
+  // يمكنك إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لمشاركة تخطيط حول صفحات MDX، قم بإنشاء مكون تخطيط:
+
+```tsx filename="components/mdx-layout.tsx" switcher
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  // يمكنك إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+```jsx filename="components/mdx-layout.js" switcher
+export default function MdxLayout({ children }) {
+  // يمكنك إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+ثم، قم باستيراد مكون التخطيط إلى صفحة MDX، وقم بتغليف محتوى MDX في التخطيط، وقم بتصديره:
+
+```mdx
+import MdxLayout from '../components/mdx-layout'
+
+# مرحبًا بكم في صفحة MDX الخاصة بي!
+
+export default function MDXPage({ children }) {
+  return <MdxLayout>{children}</MdxLayout>;
+
+}
+```
+
+</PagesOnly>
+
+## ملحقات Remark و Rehype
+
+يمكنك اختياريًا توفير ملحقات `remark` و `rehype` لتحويل محتوى MDX.
+
+على سبيل المثال، يمكنك استخدام `remark-gfm` لدعم ماركداون بنكهة جيت هاب (GitHub Flavored Markdown).
+
+نظرًا لأن نظام `remark` و `rehype` يعمل فقط مع ESM، ستحتاج إلى استخدام `next.config.mjs` كملف تكوين.
+
+```js filename="next.config.mjs"
+import remarkGfm from 'remark-gfm'
+import createMDX from '@next/mdx'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // قم بتكوين `pageExtensions` لتشمل ملفات MDX
+  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  // اختياريًا، أضف أي تكوين آخر لـ Next.js أدناه
+}
+
+const withMDX = createMDX({
+  // أضف ملحقات ماركداون هنا، كما تريد
+  options: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [],
+  },
+})
+
+// دمج تكوين MDX مع تكوين Next.js
+export default withMDX(nextConfig)
+```
+
+## Frontmatter
+
+Frontmatter هو زوج مفتاح/قيمة يشبه YAML يمكن استخدامه لتخزين البيانات حول الصفحة. لا يدعم `@next/mdx` Frontmatter افتراضيًا، على الرغم من وجود العديد من الحلول لإضافته إلى محتوى MDX الخاص بك، مثل:
+
+- [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter)
+- [gray-matter](https://github.com/jonschlinkert/gray-matter).
+
+للوصول إلى بيانات وصفية للصفحة مع `@next/mdx`، يمكنك تصدير كائن meta من داخل ملف `.mdx`:
+
+```mdx
+export const meta = {
+  author: 'John Doe',
+}
+
+# صفحة MDX الخاصة بي
+```
+
+## العناصر المخصصة
+
+أحد الجوانب الممتعة لاستخدام ماركداون، هو أنها تعين إلى عناصر `HTML` الأصلية، مما يجعل الكتابة سريعة وبديهية:
+
+```md
+هذه قائمة في ماركداون:
+
+- واحد
+- اثنان
+- ثلاثة
+```
+
+يولد ما سبق `HTML` التالية:
+
+```html
+<p>هذه قائمة في ماركداون:</p>
+
+<ul>
+  <li>واحد</li>
+  <li>اثنان</li>
+  <li>ثلاثة</li>
+</ul>
+```
+
+عندما تريد تخصيص العناصر الخاصة بك لمظهر مخصص لموقعك أو تطبيقك، يمكنك تمرير رموز قصيرة. هذه هي المكونات المخصصة الخاصة بك التي تعين إلى عناصر `HTML`.
+
+<AppOnly>
+
+للقيام بذلك، افتح ملف `mdx-components.tsx` في جذر تطبيقك وأضف عناصر مخصصة:
+
+</AppOnly>
+
+<PagesOnly>
+
+للقيام بذلك، قم بإنشاء ملف `mdx-components.tsx` في جذر تطبيقك (المجلد الأصلي لمجلد `pages/` أو `src/`) وأضف عناصر مخصصة:
+
+</PagesOnly>
+
+```tsx filename="mdx-components.tsx" switcher
+import type { MDXComponents } from 'mdx/types'
+import Image from 'next/image'
+
+// يسمح لك هذا الملف بتوفير مكونات React مخصصة
+// لاستخدامها في ملفات MDX. يمكنك استيراد واستخدام أي
+// مكون React تريده، بما في ذلك الأنماط المضمنة،
+// مكونات من مكتبات أخرى، والمزيد.
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // يسمح بتخصيص المكونات المدمجة، على سبيل المثال لإضافة أنماط.
+    h1: ({ children }) => <h1 style={{ fontSize: '100px' }}>{children}</h1>,
+    img: (props) => (
+      <Image
+        sizes="100vw"
+        style={{ width: '100%', height: 'auto' }}
+        {...props}
+      />
+    ),
+    ...components,
+  }
+}
+```
+
+```js filename="mdx-components.js" switcher
+import Image from 'next/image'
+
+// يسمح لك هذا الملف بتوفير مكونات React مخصصة
+// لاستخدامها في ملفات MDX. يمكنك استيراد واستخدام أي
+// مكون React تريده، بما في ذلك الأنماط المضمنة،
+// مكونات من مكتبات أخرى، والمزيد.
+
+export function useMDXComponents(components) {
+  return {
+    // يسمح بتخصيص المكونات المدمجة، على سبيل المثال لإضافة أنماط.
+    h1: ({ children }) => <h1 style={{ fontSize: '100px' }}>{children}</h1>,
+    img: (props) => (
+      <Image
+        sizes="100vw"
+        style={{ width: '100%', height: 'auto' }}
+        {...props}
+      />
+    ),
+    ...components,
+  }
+}
+```
+
+## تعمق: كيف يتم تحويل ماركداون إلى HTML؟
+
+لا يفهم React ماركداون بشكل أصلي. يجب تحويل نص ماركداون العادي أولاً إلى HTML. يمكن تحقيق ذلك باستخدام `remark` و `rehype`.
+
+`remark` هو نظام من الأدوات حول ماركداون. `rehype` هو نفسه، ولكن لـ HTML. على سبيل المثال، يقوم مقتطف الكود التالي بتحويل ماركداون إلى HTML:
+
+```js
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeStringify from 'rehype-stringify'
+
+main()
+
+async function main() {
+  const file = await unified()
+    .use(remarkParse) // تحويل إلى شجرة ماركداون المجردة (AST)
+    .use(remarkRehype) // تحويل إلى شجرة HTML المجردة (AST)
+    .use(rehypeSanitize) // تعقيم إدخال HTML
+    .use(rehypeStringify) // تحويل AST إلى HTML متسلسل
+    .process('مرحبًا، Next.js!')
+
+  console.log(String(file)) // <p>مرحبًا، Next.js!</p>
+}
+```
+
+يحتوي نظام `remark` و `rehype` على ملحقات لـ [تلوين الصيغة (syntax highlighting)](https://github.com/atomiks/rehype-pretty-code)، [ربط العناوين](https://github.com/rehypejs/rehype-autolink-headings)، [إنشاء جدول محتويات](https://github.com/remarkjs/remark-toc)، والمزيد.
+
+عند استخدام `@next/mdx` كما هو موضح أعلاه، **لا تحتاج** إلى استخدام `remark` أو `rehype` مباشرة، حيث يتم التعامل معها لك. نحن نصفها هنا لفهم أعمق لما تقوم به حزمة `@next/mdx` تحتها.
+
+## استخدام مترجم MDX المبني على Rust (تجريبي)
+
+يدعم Next.js مترجم MDX جديد مكتوب بلغة Rust. هذا المترجم لا يزال تجريبيًا ولا يُنصح باستخدامه في الإنتاج. لاستخدام المترجم الجديد، تحتاج إلى تكوين `next.config.js` عند تمريره إلى `withMDX`:
+
+```js filename="next.config.js"
+module.exports = withMDX({
+  experimental: {
+    mdxRs: true,
+  },
+})
+```
+
+## روابط مفيدة
+
+- [MDX](https://mdxjs.com)
+- [`@next/mdx`](https://www.npmjs.com/package/@next/mdx)
+- [remark](https://github.com/remarkjs/remark)
+- [rehype](https://github.com/rehypejs/rehype)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/06-src-directory.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/06-src-directory.mdx
new file mode 100644
index 00000000..c1f03c9f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/06-src-directory.mdx
@@ -0,0 +1,34 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:03:41.276Z
+title: دليل `src`
+description: حفظ الصفحات تحت دليل `src` كبديل عن دليل `pages` الأساسي.
+related:
+  links:
+    - app/building-your-application/routing/colocation
+---
+
+{/* محتوى هذا المستند مشترك بين موجّه التطبيق (app) وموجّه الصفحات (pages). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجّه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+كبديل عن وجود دليل `app` أو `pages` الخاص بـ Next.js في جذر مشروعك، يدعم Next.js أيضًا النمط الشائع لوضع كود التطبيق تحت دليل `src`.
+
+هذا يفصل كود التطبيق عن ملفات تكوين المشروع التي توجد غالبًا في جذر المشروع، وهو ما يفضله بعض الأفراد والفرق.
+
+لاستخدام دليل `src`، انقل مجلد موجّه التطبيق `app` أو مجلد موجّه الصفحات `pages` إلى `src/app` أو `src/pages` على التوالي.
+
+<Image
+  alt="مثال على هيكل المجلدات مع دليل `src`"
+  srcLight="/docs/light/project-organization-src-directory.png"
+  srcDark="/docs/dark/project-organization-src-directory.png"
+  width="1600"
+  height="687"
+/>
+
+> **معلومة مفيدة**
+>
+> - يجب أن يبقى دليل `/public` في جذر مشروعك.
+> - يجب أن تبقى ملفات التكوين مثل `package.json` و`next.config.js` و`tsconfig.json` في جذر المشروع.
+> - يجب أن تبقى ملفات `.env.*` في جذر المشروع.
+> - سيتم تجاهل `src/app` أو `src/pages` إذا كان `app` أو `pages` موجودين في الدليل الجذري.
+> - إذا كنت تستخدم `src`، فمن المحتمل أن تنقل مجلدات التطبيق الأخرى مثل `/components` أو `/lib`.
+> - إذا كنت تستخدم Tailwind CSS، ستحتاج إلى إضافة البادئة `/src` إلى ملف `tailwind.config.js` في [قسم المحتوى](https://tailwindcss.com/docs/content-configuration).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx
new file mode 100644
index 00000000..55a2cfe1
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx
@@ -0,0 +1,246 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:04:44.486Z
+title: وضع المسودة (Draft Mode)
+description: يوفر Next.js وضع المسودة للتبديل بين الصفحات الثابتة والديناميكية. يمكنك تعلم كيفية عمله مع App Router هنا.
+---
+
+يكون التصيير الثابت مفيدًا عندما تحصل صفحاتك على البيانات من نظام إدارة المحتوى (CMS). ومع ذلك، فهو ليس مثاليًا عندما تكتب مسودة على نظام إدارة المحتوى الخاص بك وتريد عرض المسودة فورًا على صفحتك. سترغب في أن يقوم Next.js بعرض هذه الصفحات في **وقت الطلب** بدلاً من وقت البناء وجلب محتوى المسودة بدلاً من المحتوى المنشور. سترغب في أن يتحول Next.js إلى [التصيير الديناميكي](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) فقط لهذه الحالة المحددة.
+
+يحتوي Next.js على ميزة تسمى **وضع المسودة (Draft Mode)** التي تحل هذه المشكلة. فيما يلي إرشادات حول كيفية استخدامها.
+
+## الخطوة 1: إنشاء معالج المسار والوصول إليه
+
+أولاً، قم بإنشاء [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers). يمكن أن يكون له أي اسم - مثلاً `app/api/draft/route.ts`
+
+ثم، استورد `draftMode` من `next/headers` واستدعِ طريقة `enable()`.
+
+```ts filename="app/api/draft/route.ts" switcher
+// معالج المسار لتمكين وضع المسودة
+import { draftMode } from 'next/headers'
+
+export async function GET(request: Request) {
+  draftMode().enable()
+  return new Response('تم تمكين وضع المسودة')
+}
+```
+
+```js filename="app/api/draft/route.js" switcher
+// معالج المسار لتمكين وضع المسودة
+import { draftMode } from 'next/headers'
+
+export async function GET(request) {
+  draftMode().enable()
+  return new Response('تم تمكين وضع المسودة')
+}
+```
+
+سيؤدي هذا إلى تعيين **كوكي** لتمكين وضع المسودة. الطلبات اللاحقة التي تحتوي على هذا الكوكي ستؤدي إلى تفعيل **وضع المسودة** مما يغير سلوك الصفحات المولدة بشكل ثابت (المزيد عن هذا لاحقًا).
+
+يمكنك اختبار هذا يدويًا بزيارة `/api/draft` والنظر في أدوات المطور في متصفحك. لاحظ رأس الاستجابة `Set-Cookie` مع كوكي باسم `__prerender_bypass`.
+
+### الوصول الآمن من نظام إدارة المحتوى الخاص بك
+
+عمليًا، سترغب في استدعاء معالج المسار هذا _بشكل آمن_ من نظام إدارة المحتوى الخاص بك. الخطوات المحددة ستختلف اعتمادًا على نظام إدارة المحتوى الذي تستخدمه، ولكن إليك بعض الخطوات الشائعة التي يمكنك اتخاذها.
+
+تفترض هذه الخطوات أن نظام إدارة المحتوى الذي تستخدمه يدعم تعيين **عنوان URL مخصص للمسودات**. إذا لم يكن كذلك، فلا يزال بإمكانك استخدام هذه الطريقة لتأمين عناوين URL للمسودات، ولكنك ستحتاج إلى إنشاء عنوان URL للمسودة والوصول إليه يدويًا.
+
+**أولاً**، يجب إنشاء **رمز سري (secret token)** باستخدام أداة توليد الرموز التي تختارها. سيعرف هذا السر فقط تطبيق Next.js الخاص بك ونظام إدارة المحتوى الخاص بك. يمنع هذا السر الأشخاص الذين لا يمكنهم الوصول إلى نظام إدارة المحتوى الخاص بك من الوصول إلى عناوين URL للمسودات.
+
+**ثانيًا**، إذا كان نظام إدارة المحتوى الخاص بك يدعم تعيين عناوين URL مخصصة للمسودات، فحدد ما يلي كعنوان URL للمسودة. يفترض هذا أن معالج المسار موجود في `app/api/draft/route.ts`
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+- `<your-site>` يجب أن يكون نطاق النشر الخاص بك.
+- `<token>` يجب استبداله بالرمز السري الذي أنشأته.
+- `<path>` يجب أن يكون المسار للصفحة التي تريد عرضها. إذا كنت تريد عرض `/posts/foo`، فيجب استخدام `&slug=/posts/foo`.
+
+قد يسمح لك نظام إدارة المحتوى الخاص بك بتضمين متغير في عنوان URL للمسودة بحيث يمكن تعيين `<path>` ديناميكيًا بناءً على بيانات نظام إدارة المحتوى مثل: `&slug=/posts/{entry.fields.slug}`
+
+**أخيرًا**، في معالج المسار:
+
+- تحقق من تطابق السر وأن معلمة `slug` موجودة (إذا لم تكن كذلك، يجب أن يفشل الطلب).
+- استدعِ `draftMode.enable()` لتعيين الكوكي.
+- ثم أعد توجيه المتصفح إلى المسار المحدد بواسطة `slug`.
+
+```ts filename="app/api/draft/route.ts" switcher
+// معالج المسار مع السر و slug
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export async function GET(request: Request) {
+  // تحليل معلمات سلسلة الاستعلام
+  const { searchParams } = new URL(request.url)
+  const secret = searchParams.get('secret')
+  const slug = searchParams.get('slug')
+
+  // تحقق من السر والمعلمات التالية
+  // يجب أن يعرف هذا السر فقط معالج المسار هذا ونظام إدارة المحتوى
+  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
+    return new Response('رمز غير صالح', { status: 401 })
+  }
+
+  // جلب نظام إدارة المحتوى للتحقق مما إذا كان slug المقدم موجودًا
+  // ستنفذ getPostBySlug منطق الجلب المطلوب لنظام إدارة المحتوى
+  const post = await getPostBySlug(slug)
+
+  // إذا لم يكن slug موجودًا، امنع تمكين وضع المسودة
+  if (!post) {
+    return new Response('slug غير صالح', { status: 401 })
+  }
+
+  // تمكين وضع المسودة عن طريق تعيين الكوكي
+  draftMode().enable()
+
+  // إعادة التوجيه إلى المسار من المنشور الذي تم جلبه
+  // لا نعيد التوجيه إلى searchParams.slug لأن ذلك قد يؤدي إلى ثغرات إعادة توجيه مفتوحة
+  redirect(post.slug)
+}
+```
+
+```js filename="app/api/draft/route.js" switcher
+// معالج المسار مع السر و slug
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export async function GET(request) {
+  // تحليل معلمات سلسلة الاستعلام
+  const { searchParams } = new URL(request.url)
+  const secret = searchParams.get('secret')
+  const slug = searchParams.get('slug')
+
+  // تحقق من السر والمعلمات التالية
+  // يجب أن يعرف هذا السر فقط معالج المسار هذا ونظام إدارة المحتوى
+  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
+    return new Response('رمز غير صالح', { status: 401 })
+  }
+
+  // جلب نظام إدارة المحتوى للتحقق مما إذا كان slug المقدم موجودًا
+  // ستنفذ getPostBySlug منطق الجلب المطلوب لنظام إدارة المحتوى
+  const post = await getPostBySlug(slug)
+
+  // إذا لم يكن slug موجودًا، امنع تمكين وضع المسودة
+  if (!post) {
+    return new Response('slug غير صالح', { status: 401 })
+  }
+
+  // تمكين وضع المسودة عن طريق تعيين الكوكي
+  draftMode().enable()
+
+  // إعادة التوجيه إلى المسار من المنشور الذي تم جلبه
+  // لا نعيد التوجيه إلى searchParams.slug لأن ذلك قد يؤدي إلى ثغرات إعادة توجيه مفتوحة
+  redirect(post.slug)
+}
+```
+
+إذا نجح ذلك، فسيتم إعادة توجيه المتصفح إلى المسار الذي تريد عرضه مع كوكي وضع المسودة.
+
+## الخطوة 2: تحديث الصفحة
+
+الخطوة التالية هي تحديث صفحتك للتحقق من قيمة `draftMode().isEnabled`.
+
+إذا طلبت صفحة تحتوي على الكوكي المعين، فسيتم جلب البيانات في **وقت الطلب** (بدلاً من وقت البناء).
+
+علاوة على ذلك، ستكون قيمة `isEnabled` `true`.
+
+```tsx filename="app/page.tsx" switcher
+// صفحة تجلب البيانات
+import { draftMode } from 'next/headers'
+
+async function getData() {
+  const { isEnabled } = draftMode()
+
+  const url = isEnabled
+    ? 'https://draft.example.com'
+    : 'https://production.example.com'
+
+  const res = await fetch(url)
+
+  return res.json()
+}
+
+export default async function Page() {
+  const { title, desc } = await getData()
+
+  return (
+    <main>
+      <h1>{title}</h1>
+      <p>{desc}</p>
+    </main>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+// صفحة تجلب البيانات
+import { draftMode } from 'next/headers'
+
+async function getData() {
+  const { isEnabled } = draftMode()
+
+  const url = isEnabled
+    ? 'https://draft.example.com'
+    : 'https://production.example.com'
+
+  const res = await fetch(url)
+
+  return res.json()
+}
+
+export default async function Page() {
+  const { title, desc } = await getData()
+
+  return (
+    <main>
+      <h1>{title}</h1>
+      <p>{desc}</p>
+    </main>
+  )
+}
+```
+
+هذا كل شيء! إذا قمت بالوصول إلى معالج مسار المسودة (مع `secret` و `slug`) من نظام إدارة المحتوى الخاص بك أو يدويًا، فيجب أن تكون قادرًا الآن على رؤية محتوى المسودة. وإذا قمت بتحديث مسودتك دون نشر، فيجب أن تكون قادرًا على عرض المسودة.
+
+قم بتعيين هذا كعنوان URL للمسودة على نظام إدارة المحتوى الخاص بك أو قم بالوصول يدويًا، ويجب أن تكون قادرًا على رؤية المسودة.
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+## المزيد من التفاصيل
+
+### مسح كوكي وضع المسودة
+
+افتراضيًا، تنتهي جلسة وضع المسودة عند إغلاق المتصفح.
+
+لمسح كوكي وضع المسودة يدويًا، أنشئ معالج مسار يستدعي `draftMode().disable()`:
+
+```ts filename="app/api/disable-draft/route.ts" switcher
+import { draftMode } from 'next/headers'
+
+export async function GET(request: Request) {
+  draftMode().disable()
+  return new Response('تم تعطيل وضع المسودة')
+}
+```
+
+```js filename="app/api/disable-draft/route.js" switcher
+import { draftMode } from 'next/headers'
+
+export async function GET(request) {
+  draftMode().disable()
+  return new Response('تم تعطيل وضع المسودة')
+}
+```
+
+ثم، أرسل طلبًا إلى `/api/disable-draft` لاستدعاء معالج المسار. إذا كنت تستدعي هذا المسار باستخدام [`next/link`](/docs/app/api-reference/components/link)، فيجب عليك تمرير `prefetch={false}` لمنع حذف الكوكي عن طريق الخطأ أثناء الجلب المسبق.
+
+### فريد لكل `next build`
+
+سيتم إنشاء قيمة جديدة لكوكي الالتفاف في كل مرة تقوم فيها بتشغيل `next build`.
+
+يضمن ذلك عدم إمكانية تخمين كوكي الالتفاف.
+
+> **معلومة مفيدة**: لاختبار وضع المسودة محليًا عبر HTTP، سيحتاج متصفحك إلى السماح بملفات تعريف الارتباط من طرف ثالث والوصول إلى التخزين المحلي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
new file mode 100644
index 00000000..34519002
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
@@ -0,0 +1,199 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:04:06.067Z
+title: سياسة أمان المحتوى (CSP)
+description: تعلم كيفية تعيين سياسة أمان المحتوى (CSP) لتطبيق Next.js الخاص بك.
+related:
+  links:
+    - app/building-your-application/routing/middleware
+    - app/api-reference/functions/headers
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+[سياسة أمان المحتوى (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) مهمة لحماية تطبيق Next.js الخاص بك من تهديدات أمنية مختلفة مثل البرمجة النصية عبر المواقع (XSS)، والتصيد بالنقر (clickjacking)، وهجمات حقن التعليمات البرمجية الأخرى.
+
+باستخدام CSP، يمكن للمطورين تحديد المصادر المسموح بها للمحتوى، والنصوص البرمجية، وملفات الأنماط، والصور، والخطوط، والكائنات، والوسائط (الصوت، الفيديو)، والإطارات المضمنة (iframes)، والمزيد.
+
+<details>
+  <summary>أمثلة</summary>
+
+- [CSP صارمة](https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp)
+
+</details>
+
+## القيم العشوائية لمرة واحدة (Nonces)
+
+[القيمة العشوائية لمرة واحدة (nonce)](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) هي سلسلة فريدة وعشوائية من الأحرف يتم إنشاؤها لاستخدام لمرة واحدة. تُستخدم مع CSP للسماح بشكل انتقائي بتنفيذ نصوص برمجية مضمنة معينة أو أنماط، متجاوزة توجيهات CSP الصارمة.
+
+### لماذا تستخدم nonce؟
+
+على الرغم من أن سياسات CSP مصممة لحجب النصوص البرمجية الضارة، إلا أن هناك حالات مشروعة حيث تكون النصوص البرمجية المضمنة ضرورية. في مثل هذه الحالات، توفر القيم العشوائية لمرة واحدة طريقة للسماح بتنفيذ هذه النصوص البرمجية إذا كانت تحتوي على القيمة العشوائية الصحيحة.
+
+### إضافة nonce باستخدام Middleware
+
+[البرنامج الوسيط (Middleware)](/docs/app/building-your-application/routing/middleware) يتيح لك إضافة رؤوس وإنشاء قيم عشوائية لمرة واحدة قبل عرض الصفحة.
+
+يجب إنشاء قيمة عشوائية جديدة في كل مرة يتم فيها عرض الصفحة. هذا يعني أنه **يجب عليك استخدام العرض الديناميكي لإضافة القيم العشوائية لمرة واحدة**.
+
+على سبيل المثال:
+
+```ts filename="middleware.ts" switcher
+import { NextRequest, NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+  const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+    style-src 'self' 'nonce-${nonce}';
+    img-src 'self' blob: data:;
+    font-src 'self';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    block-all-mixed-content;
+    upgrade-insecure-requests;
+`
+
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-nonce', nonce)
+  requestHeaders.set(
+    'Content-Security-Policy',
+    // استبدال الأحرف الجديدة والمسافات
+    cspHeader.replace(/\s{2,}/g, ' ').trim()
+  )
+
+  return NextResponse.next({
+    headers: requestHeaders,
+    request: {
+      headers: requestHeaders,
+    },
+  })
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+  const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+    style-src 'self' 'nonce-${nonce}';
+    img-src 'self' blob: data:;
+    font-src 'self';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    block-all-mixed-content;
+    upgrade-insecure-requests;
+`
+
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-nonce', nonce)
+  requestHeaders.set(
+    'Content-Security-Policy',
+    // استبدال الأحرف الجديدة والمسافات
+    cspHeader.replace(/\s{2,}/g, ' ').trim()
+  )
+
+  return NextResponse.next({
+    headers: requestHeaders,
+    request: {
+      headers: requestHeaders,
+    },
+  })
+}
+```
+
+بشكل افتراضي، يعمل البرنامج الوسيط على جميع الطلبات. يمكنك تصفية البرنامج الوسيط ليعمل على مسارات محددة باستخدام [`matcher`](/docs/app/building-your-application/routing/middleware#matcher).
+
+نوصي بتجاهل مطابقة الجلب المسبق (من `next/link`) والموارد الثابتة التي لا تحتاج إلى رأس CSP.
+
+```ts filename="middleware.ts" switcher
+export const config = {
+  matcher: [
+    /*
+     * مطابقة جميع مسارات الطلبات باستثناء تلك التي تبدأ بـ:
+     * - api (مسارات API)
+     * - _next/static (ملفات ثابتة)
+     * - _next/image (ملفات تحسين الصور)
+     * - favicon.ico (ملف الأيقونة)
+     */
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+  ],
+}
+```
+
+```js filename="middleware.js" switcher
+export const config = {
+  matcher: [
+    /*
+     * مطابقة جميع مسارات الطلبات باستثناء تلك التي تبدأ بـ:
+     * - api (مسارات API)
+     * - _next/static (ملفات ثابتة)
+     * - _next/image (ملفات تحسين الصور)
+     * - favicon.ico (ملف الأيقونة)
+     */
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+  ],
+}
+```
+
+### قراءة القيمة العشوائية لمرة واحدة
+
+يمكنك الآن قراءة القيمة العشوائية لمرة واحدة من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components) باستخدام [`headers`](/docs/app/api-reference/functions/headers):
+
+```tsx filename="app/page.tsx" switcher
+import { headers } from 'next/headers'
+import Script from 'next/script'
+
+export default function Page() {
+  const nonce = headers().get('x-nonce')
+
+  return (
+    <Script
+      src="https://www.googletagmanager.com/gtag/js"
+      strategy="afterInteractive"
+      nonce={nonce}
+    />
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+import { headers } from 'next/headers'
+import Script from 'next/script'
+
+export default function Page() {
+  const nonce = headers().get('x-nonce')
+
+  return (
+    <Script
+      src="https://www.googletagmanager.com/gtag/js"
+      strategy="afterInteractive"
+      nonce={nonce}
+    />
+  )
+}
+```
+
+## سجل الإصدارات
+
+نوصي باستخدام إصدار `v13.4.20+` من Next.js للتعامل مع القيم العشوائية لمرة واحدة وتطبيقها بشكل صحيح.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/index.mdx
new file mode 100644
index 00000000..5693dc83
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/07-configuring/index.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:03:10.233Z
+title: التهيئة
+description: تعلم كيفية تهيئة تطبيق Next.js الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يسمح لك Next.js بتخصيص مشروعك لتلبية متطلبات محددة. وهذا يشمل التكامل مع TypeScript وESlint وغيرها، بالإضافة إلى خيارات التهيئة الداخلية مثل الاستيراد المطلق (Absolute Imports) ومتغيرات البيئة (Environment Variables).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-deploying/01-static-exports.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-deploying/01-static-exports.mdx
new file mode 100644
index 00000000..564adf7f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-deploying/01-static-exports.mdx
@@ -0,0 +1,371 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:04:54.883Z
+title: التصدير الثابت
+description: يتيح Next.js البدء كموقع ثابت أو تطبيق أحادي الصفحة (SPA)، ثم الترقية لاحقًا بشكل اختياري لاستخدام الميزات التي تتطلب خادمًا.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+يتيح Next.js البدء كموقع ثابت أو تطبيق أحادي الصفحة (SPA)، ثم الترقية لاحقًا بشكل اختياري لاستخدام الميزات التي تتطلب خادمًا.
+
+عند تشغيل `next build`، يقوم Next.js بإنشاء ملف HTML لكل مسار. من خلال تقسيم تطبيق SPA صارم إلى ملفات HTML فردية، يمكن لـ Next.js تجنب تحميل كود JavaScript غير الضروري على جانب العميل، مما يقلل حجم الحزمة ويسمح بتحميل الصفحات بشكل أسرع.
+
+بما أن Next.js يدعم هذا التصدير الثابت، فيمكن نشره واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة من نوع HTML/CSS/JS.
+
+<PagesOnly>
+
+> **معلومة مفيدة**: نوصي باستخدام موجه التطبيق للحصول على دعم محسن للتصدير الثابت.
+
+</PagesOnly>
+
+## التكوين
+
+لتمكين التصدير الثابت، قم بتغيير وضع الإخراج داخل `next.config.js`:
+
+```js filename="next.config.js" highlight={5}
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  output: 'export',
+
+  // اختياري: تغيير الروابط `/me` -> `/me/` وإنشاء `/me.html` -> `/me/index.html`
+  // trailingSlash: true,
+
+  // اختياري: منع التحويل التلقائي `/me` -> `/me/`، والحفاظ على `href` كما هو
+  // skipTrailingSlashRedirect: true,
+
+  // اختياري: تغيير دليل الإخراج `out` -> `dist`
+  // distDir: 'dist',
+}
+
+module.exports = nextConfig
+```
+
+بعد تشغيل `next build`، سينشئ Next.js مجلد `out` الذي يحتوي على أصول HTML/CSS/JS لتطبيقك.
+
+<PagesOnly>
+
+يمكنك استخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) و [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths) لإنشاء ملف HTML لكل صفحة في دليل `pages` الخاص بك (أو أكثر لـ [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes)).
+
+</PagesOnly>
+
+<AppOnly>
+
+## الميزات المدعومة
+
+تم تصميم نواة Next.js لدعم التصدير الثابت.
+
+### مكونات الخادم
+
+عند تشغيل `next build` لإنشاء تصدير ثابت، ستتم معالجة مكونات الخادم المستخدمة داخل دليل `app` أثناء عملية البناء، بشكل مشابه لإنشاء المواقع الثابتة التقليدية.
+
+سيتم تحويل المكون الناتج إلى HTML ثابت للتحميل الأولي للصفحة وحمولة ثابتة للتنقل بين المسارات على جانب العميل. لا توجد حاجة لتغيير مكونات الخادم عند استخدام التصدير الثابت، إلا إذا كانت تستخدم [وظائف الخادم الديناميكية](#unsupported-features).
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  // سيتم تنفيذ هذا الـ fetch على الخادم أثناء `next build`
+  const res = await fetch('https://api.example.com/...')
+  const data = await res.json()
+
+  return <main>...</main>
+}
+```
+
+### مكونات العميل
+
+إذا كنت تريد تنفيذ جلب البيانات على جانب العميل، يمكنك استخدام مكون عميل مع [SWR](https://github.com/vercel/swr) لتخزين الطلبات مؤقتًا.
+
+```tsx filename="app/other/page.tsx" switcher
+'use client'
+
+import useSWR from 'swr'
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+export default function Page() {
+  const { data, error } = useSWR(
+    `https://jsonplaceholder.typicode.com/posts/1`,
+    fetcher
+  )
+  if (error) return 'فشل التحميل'
+  if (!data) return 'جاري التحميل...'
+
+  return data.title
+}
+```
+
+```jsx filename="app/other/page.js" switcher
+'use client'
+
+import useSWR from 'swr'
+
+const fetcher = (url) => fetch(url).then((r) => r.json())
+
+export default function Page() {
+  const { data, error } = useSWR(
+    `https://jsonplaceholder.typicode.com/posts/1`,
+    fetcher
+  )
+  if (error) return 'فشل التحميل'
+  if (!data) return 'جاري التحميل...'
+
+  return data.title
+}
+```
+
+نظرًا لأن انتقالات المسار تحدث على جانب العميل، فإن هذا يعمل مثل تطبيق SPA تقليدي. على سبيل المثال، مسار الفهرس التالي يسمح لك بالتنقل بين منشورات مختلفة على العميل:
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <>
+      <h1>صفحة الفهرس</h1>
+      <hr />
+      <ul>
+        <li>
+          <Link href="/post/1">المنشور 1</Link>
+        </li>
+        <li>
+          <Link href="/post/2">المنشور 2</Link>
+        </li>
+      </ul>
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <>
+      <h1>صفحة الفهرس</h1>
+      <p>
+        <Link href="/other">صفحة أخرى</Link>
+      </p>
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## الميزات المدعومة
+
+معظم ميزات Next.js الأساسية اللازمة لبناء موقع ثابت مدعومة، بما في ذلك:
+
+- [المسارات الديناميكية عند استخدام `getStaticPaths`](/docs/app/building-your-application/routing/dynamic-routes)
+- الجلب المسبق مع `next/link`
+- التحميل المسبق لـ JavaScript
+- [الاستيراد الديناميكي](/docs/pages/building-your-application/optimizing/lazy-loading)
+- أي خيارات للتنسيق (مثل وحدات CSS، styled-jsx)
+- [جلب البيانات على جانب العميل](/docs/pages/building-your-application/data-fetching/client-side)
+- [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)
+- [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths)
+
+</PagesOnly>
+
+### تحسين الصور
+
+يمكن استخدام [تحسين الصور](/docs/app/building-your-application/optimizing/images) عبر `next/image` مع التصدير الثابت عن طريق تحديد محمل صور مخصص في `next.config.js`. على سبيل المثال، يمكنك تحسين الصور باستخدام خدمة مثل Cloudinary:
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  images: {
+    loader: 'custom',
+    loaderFile: './my-loader.ts',
+  },
+}
+
+module.exports = nextConfig
+```
+
+سيحدد هذا المحمل المخصص كيفية جلب الصور من مصدر بعيد. على سبيل المثال، المحمل التالي سيقوم ببناء URL لـ Cloudinary:
+
+```ts filename="my-loader.ts" switcher
+export default function cloudinaryLoader({
+  src,
+  width,
+  quality,
+}: {
+  src: string
+  width: number
+  quality?: number
+}) {
+  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
+  return `https://res.cloudinary.com/demo/image/upload/${params.join(
+    ','
+  )}${src}`
+}
+```
+
+```js filename="my-loader.js" switcher
+export default function cloudinaryLoader({ src, width, quality }) {
+  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
+  return `https://res.cloudinary.com/demo/image/upload/${params.join(
+    ','
+  )}${src}`
+}
+```
+
+ثم يمكنك استخدام `next/image` في تطبيقك، مع تحديد مسارات نسبية للصورة في Cloudinary:
+
+```tsx filename="app/page.tsx" switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image alt="سلاحف" src="/turtles.jpg" width={300} height={300} />
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image alt="سلاحف" src="/turtles.jpg" width={300} height={300} />
+}
+```
+
+<AppOnly>
+
+### معالجات المسار
+
+ستقوم معالجات المسار (Route Handlers) بعرض استجابة ثابتة عند تشغيل `next build`. فقط فعل HTTP `GET` مدعوم. يمكن استخدام هذا لإنشاء ملفات ثابتة من نوع HTML أو JSON أو TXT أو غيرها من البيانات المخزنة مؤقتًا أو غير المخزنة. على سبيل المثال:
+
+```ts filename="app/data.json/route.ts" switcher
+export async function GET() {
+  return Response.json({ name: 'لي' })
+}
+```
+
+```js filename="app/data.json/route.js" switcher
+export async function GET() {
+  return Response.json({ name: 'لي' })
+}
+```
+
+سيتم تحويل الملف أعلاه `app/data.json/route.ts` إلى ملف ثابت أثناء `next build`، لينتج `data.json` الذي يحتوي على `{ name: 'لي' }`.
+
+إذا كنت بحاجة إلى قراءة قيم ديناميكية من الطلب الوارد، فلا يمكنك استخدام التصدير الثابت.
+
+### واجهات برمجة تطبيقات المتصفح
+
+يتم تحويل مكونات العميل مسبقًا إلى HTML أثناء `next build`. نظرًا لأن [واجهات برمجة تطبيقات الويب](https://developer.mozilla.org/docs/Web/API) مثل `window` و `localStorage` و `navigator` غير متوفرة على الخادم، فأنت بحاجة للوصول إلى هذه الواجهات بأمان فقط عند التشغيل في المتصفح. على سبيل المثال:
+
+```jsx
+'use client';
+
+import { useEffect } from 'react';
+
+export default function ClientComponent() {
+  useEffect(() => {
+    // لديك الآن حق الوصول إلى `window`
+    console.log(window.innerHeight);
+  }, [])
+
+  return ...;
+}
+```
+
+</AppOnly>
+
+## الميزات غير المدعومة
+
+الميزات التي تتطلب خادم Node.js، أو المنطق الديناميكي الذي لا يمكن حسابه أثناء عملية البناء، **غير** مدعومة:
+
+<AppOnly>
+
+- [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) مع `dynamicParams: true`
+- [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) بدون `generateStaticParams()`
+- [معالجات المسار](/docs/app/building-your-application/routing/route-handlers) التي تعتمد على Request
+- [الكوكيز](/docs/app/api-reference/functions/cookies)
+- [إعادة الكتابة](/docs/app/api-reference/next-config-js/rewrites)
+- [إعادة التوجيه](/docs/app/api-reference/next-config-js/redirects)
+- [الرؤوس](/docs/app/api-reference/next-config-js/headers)
+- [الوسيط](/docs/app/building-your-application/routing/middleware)
+- [التجديد الثابت التدريجي](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)
+- [تحسين الصور](/docs/app/building-your-application/optimizing/images) مع المحمل الافتراضي `loader`
+- [وضع المسودة](/docs/app/building-your-application/configuring/draft-mode)
+
+محاولة استخدام أي من هذه الميزات مع `next dev` ستؤدي إلى خطأ، مشابه لتعيين الخيار [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) إلى `error` في تخطيط الجذر.
+
+```jsx
+export const dynamic = 'error'
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+- [التوجيه الدولي](/docs/pages/building-your-application/routing/internationalization)
+- [مسارات API](/docs/pages/building-your-application/routing/api-routes)
+- [إعادة الكتابة](/docs/pages/api-reference/next-config-js/rewrites)
+- [إعادة التوجيه](/docs/pages/api-reference/next-config-js/redirects)
+- [الرؤوس](/docs/pages/api-reference/next-config-js/headers)
+- [الوسيط](/docs/pages/building-your-application/routing/middleware)
+- [التجديد الثابت التدريجي](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)
+- [تحسين الصور](/docs/pages/building-your-application/optimizing/images) مع المحمل الافتراضي `loader`
+- [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode)
+- [`getStaticPaths` مع `fallback: true`](/docs/pages/api-reference/functions/get-static-paths#fallback-true)
+- [`getStaticPaths` مع `fallback: 'blocking'`](/docs/pages/api-reference/functions/get-static-paths#fallback-blocking)
+- [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)
+
+</PagesOnly>
+
+## النشر
+
+مع التصدير الثابت، يمكن نشر Next.js واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة من نوع HTML/CSS/JS.
+
+عند تشغيل `next build`، ينشئ Next.js التصدير الثابت في مجلد `out`. لم يعد هناك حاجة لاستخدام `next export`. على سبيل المثال، لنفترض أن لديك المسارات التالية:
+
+- `/`
+- `/blog/[id]`
+
+بعد تشغيل `next build`، سينشئ Next.js الملفات التالية:
+
+- `/out/index.html`
+- `/out/404.html`
+- `/out/blog/post-1.html`
+- `/out/blog/post-2.html`
+
+إذا كنت تستخدم خادمًا ثابتًا مثل Nginx، يمكنك تكوين إعادة كتابة للطلبات الواردة إلى الملفات الصحيحة:
+
+```nginx filename="nginx.conf"
+server {
+  listen 80;
+  server_name acme.com;
+
+  root /var/www/out;
+
+  location / {
+      try_files $uri $uri.html $uri/ =404;
+  }
+
+  # هذا ضروري عندما `trailingSlash: false`.
+  # يمكنك حذف هذا عندما `trailingSlash: true`.
+  location /blog/ {
+      rewrite ^/blog/(.*)$ /blog/$1.html break;
+  }
+
+  error_page 404 /404.html;
+  location = /404.html {
+      internal;
+  }
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                              |
+| --------- | -------------------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | أضاف موجه التطبيق (المستقر) دعمًا محسنًا للتصدير الثابت، بما في ذلك استخدام مكونات خادم React ومعالجات المسار. |
+| `v13.3.0` | تم إهمال `next export` واستبداله بـ `"output": "export"`                                                   |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-deploying/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-deploying/index.mdx
new file mode 100644
index 00000000..73a21c78
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-deploying/index.mdx
@@ -0,0 +1,170 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:03:40.125Z
+title: النشر
+description: تعلم كيفية نشر تطبيق Next.js الخاص بك للإنتاج، سواءً كان مُدارًا أو مستضافًا ذاتيًا.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+تهانينا! أنت هنا لأنك جاهز لنشر تطبيق Next.js الخاص بك. هذه الصفحة سوف توضح كيفية النشر سواءً كان مُدارًا أو مستضافًا ذاتيًا باستخدام [واجهة برمجة تطبيقات بناء Next.js](#nextjs-build-api).
+
+## واجهة برمجة تطبيقات بناء Next.js
+
+`next build` يولد نسخة مُحسنة من تطبيقك للإنتاج. هذا الإخراج القياسي يتضمن:
+
+- ملفات HTML للصفحات التي تستخدم `getStaticProps` أو [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization)
+- ملفات CSS للأنماط العامة أو الأنماط ذات النطاق الفردي
+- جافاسكريبت لتقديم المحتوى الديناميكي مسبقًا من خادم Next.js
+- جافاسكريبت للتفاعلية على جانب العميل عبر React
+
+يتم توليد هذا الإخراج داخل مجلد `.next`:
+
+- `.next/static/chunks/pages` – كل ملف جافاسكريبت داخل هذا المجلد يرتبط بالمسار بنفس الاسم. على سبيل المثال، `.next/static/chunks/pages/about.js` سيكون ملف الجافاسكريبت الذي يتم تحميله عند عرض مسار `/about` في تطبيقك
+- `.next/static/media` – الصور المستوردة ثابتًا من `next/image` يتم تجزئتها ونسخها هنا
+- `.next/static/css` – ملفات CSS العامة لجميع الصفحات في تطبيقك
+- `.next/server/pages` – نقاط دخول HTML و JavaScript المقدمة مسبقًا من الخادم. ملفات `.nft.json` يتم إنشاؤها عند تمكين [تتبع ملف الإخراج](/docs/pages/api-reference/next-config-js/output) وتحتوي على جميع مسارات الملفات التي تعتمد على صفحة معينة.
+- `.next/server/chunks` – أجزاء جافاسكريبت المشتركة المستخدمة في أماكن متعددة عبر تطبيقك
+- `.next/cache` – إخراج لذاكرة التخزين المؤقت للبناء والصور المخزنة، والاستجابات، والصفحات من خادم Next.js. استخدام ذاكرة التخزين المؤقت يساعد في تقليل أوقات البناء وتحسين أداء تحميل الصور
+
+جميع أكواد جافاسكريبت داخل `.next` تم **تجميعها** وحزم المتصفح تم **تصغيرها** للمساعدة في تحقيق أفضل أداء ودعم [جميع المتصفحات الحديثة](/docs/architecture/supported-browsers).
+
+## Next.js المُدار مع Vercel
+
+[Vercel](https://vercel.com?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) هي أسرع طريقة لنشر تطبيق Next.js الخاص بك بدون أي تكوين.
+
+عند النشر على Vercel، المنصة [تكتشف Next.js تلقائيًا](https://vercel.com/solutions/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، وتشغل `next build`، وتحسن إخراج البناء لك، بما في ذلك:
+
+- الحفاظ على الأصول المخزنة مؤقتًا عبر عمليات النشر إذا لم تتغير
+- [عمليات نشر غير قابلة للتغيير](https://vercel.com/features/previews?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) مع عنوان URL فريد لكل commit
+- [الصفحات](/docs/pages/building-your-application/rendering/automatic-static-optimization) يتم تحسينها تلقائيًا بشكل ثابت، إذا أمكن
+- الأصول (جافاسكريبت، CSS، الصور، الخطوط) يتم ضغطها وتقديمها من [شبكة الحافة العالمية](https://vercel.com/features/infrastructure?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)
+- [مسارات API](/docs/pages/building-your-application/routing/api-routes) يتم تحسينها تلقائيًا كـ [وظائف بدون خادم](https://vercel.com/features/infrastructure?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) معزولة يمكنها التوسع بلا حدود
+- [البرمجية الوسيطة](/docs/pages/building-your-application/routing/middleware) يتم تحسينها تلقائيًا كـ [وظائف حافة](https://vercel.com/features/edge-functions?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) ليس لها بدايات باردة وتعمل على الفور
+
+بالإضافة إلى ذلك، توفر Vercel ميزات مثل:
+
+- مراقبة الأداء التلقائية مع [Next.js Speed Insights](https://vercel.com/analytics?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)
+- HTTPS وشهادات SSL التلقائية
+- CI/CD التلقائي (عبر GitHub، GitLab، Bitbucket، إلخ.)
+- دعم [متغيرات البيئة](https://vercel.com/docs/environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)
+- دعم [النطاقات المخصصة](https://vercel.com/docs/custom-domains?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)
+- دعم [تحسين الصور](/docs/pages/building-your-application/optimizing/images) مع `next/image`
+- عمليات نشر عالمية فورية عبر `git push`
+
+[انشر تطبيق Next.js على Vercel](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world&utm_source=next-site&utm_medium=docs&utm_campaign=next-website) مجانًا لتجربته.
+
+## الاستضافة الذاتية
+
+يمكنك استضافة Next.js ذاتيًا مع دعم جميع الميزات باستخدام Node.js أو Docker. يمكنك أيضًا تصدير HTML ثابت، والذي [له بعض القيود](/docs/app/building-your-application/deploying/static-exports).
+
+### خادم Node.js
+
+يمكن نشر Next.js على أي مزود استضافة يدعم Node.js. على سبيل المثال، [AWS EC2](https://aws.amazon.com/ec2/) أو [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/).
+
+أولاً، تأكد من أن ملف `package.json` يحتوي على نصوص `"build"` و `"start"`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+```
+
+ثم، شغل `npm run build` لبناء تطبيقك. أخيرًا، شغل `npm run start` لبدء خادم Node.js. هذا الخادم يدعم جميع ميزات Next.js.
+
+> إذا كنت تستخدم [`next/image`](/docs/pages/building-your-application/optimizing/images)، فكر في إضافة `sharp` لـ [تحسين الصور](/docs/pages/building-your-application/optimizing/images) بأداء أفضل في بيئة الإنتاج عن طريق تشغيل `npm install sharp` في دليل مشروعك. على منصات لينكس، قد يحتاج `sharp` إلى [تكوين إضافي](https://sharp.pixelplumbing.com/install#linux-memory-allocator) لمنع استخدام الذاكرة المفرط.
+
+### صورة Docker
+
+يمكن نشر Next.js على أي مزود استضافة يدعم حاويات [Docker](https://www.docker.com/). يمكنك استخدام هذا الأسلوب عند النشر على منسقات الحاويات مثل [Kubernetes](https://kubernetes.io/) أو [HashiCorp Nomad](https://www.nomadproject.io/)، أو عند التشغيل داخل عقدة واحدة في أي مزود سحابي.
+
+1. [ثبت Docker](https://docs.docker.com/get-docker/) على جهازك
+1. استنسخ مثال [with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker)
+1. ابن حاويتك: `docker build -t nextjs-docker .`
+1. شغل حاويتك: `docker run -p 3000:3000 nextjs-docker`
+
+إذا كنت بحاجة إلى استخدام متغيرات بيئة مختلفة عبر بيئات متعددة، تحقق من مثالنا [with-docker-multi-env](https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env).
+
+### تصدير HTML ثابت
+
+إذا كنت ترغب في تصدير HTML ثابت لتطبيق Next.js الخاص بك، اتبع الإرشادات في [توثيق تصدير HTML الثابت](/docs/app/building-your-application/deploying/static-exports).
+
+## خدمات أخرى
+
+الخدمات التالية تدعم Next.js `v12+`. أدناه، ستجد أمثلة أو أدلة لنشر Next.js على كل خدمة.
+
+### خادم مُدار
+
+- [AWS Copilot](https://aws.github.io/copilot-cli/)
+- [منصة تطبيقات Digital Ocean](https://docs.digitalocean.com/tutorials/app-nextjs-deploy/)
+- [Google Cloud Run](https://github.com/vercel/next.js/tree/canary/examples/with-docker)
+- [Heroku](https://elements.heroku.com/buildpacks/mars/heroku-nextjs)
+- [Railway](https://docs.railway.app/getting-started)
+- [Render](https://render.com/docs/deploy-nextjs-app)
+
+> **من الجيد معرفة**: هناك أيضًا منصات مُدارة تسمح لك باستخدام Dockerfile كما هو موضح في [المثال أعلاه](#docker-image).
+
+### ثابت فقط
+
+الخدمات التالية تدعم نشر Next.js فقط باستخدام [`output: 'export'`](/docs/app/building-your-application/deploying/static-exports).
+
+- [GitHub Pages](https://github.com/vercel/next.js/tree/canary/examples/github-pages)
+
+يمكنك أيضًا نشر الإخراج من [`output: 'export'`](/docs/app/building-your-application/deploying/static-exports) يدويًا على أي مزود استضافة ثابت، غالبًا عبر خط أنابيب CI/CD الخاص بك مثل GitHub Actions، Jenkins، AWS CodeBuild، Circle CI، Azure Pipelines، وغيرها.
+
+### بدون خادم
+
+- [AWS Amplify](https://aws.amazon.com/blogs/mobile/amplify-next-js-13/)
+- [Azure Static Web Apps](https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs)
+- [Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/)
+- [Firebase](https://firebase.google.com/docs/hosting/nextjs)
+- [Netlify](https://docs.netlify.com/integrations/frameworks/next-js)
+- [Terraform](https://github.com/milliHQ/terraform-aws-next-js)
+- [SST](https://docs.sst.dev/start/nextjs)
+
+> **من الجيد معرفة**: ليس كل مزودي الخدمات بدون خادم ينفذون [واجهة برمجة تطبيقات بناء Next.js](#nextjs-build-api) من `next start`. يرجى التحقق مع المزود لمعرفة الميزات المدعومة.
+
+## التحديثات التلقائية
+
+عند نشر تطبيق Next.js الخاص بك، تريد رؤية أحدث إصدار دون الحاجة إلى إعادة التحميل.
+
+سيقوم Next.js بتحميل أحدث إصدار من تطبيقك تلقائيًا في الخلفية عند التوجيه. بالنسبة للتنقلات من جانب العميل، سيعمل `next/link` مؤقتًا كعلامة `<a>` عادية.
+
+> **من الجيد معرفة**: إذا تم جلب صفحة جديدة (بإصدار قديم) مسبقًا بواسطة `next/link`، فسيستخدم Next.js الإصدار القديم. التنقل إلى صفحة لم يتم جلبها مسبقًا (ولم يتم تخزينها مؤقتًا على مستوى CDN) سيقوم بتحميل أحدث إصدار.
+
+## إيقاف التشغيل اليدوي المهذب
+
+عند الاستضافة الذاتية، قد ترغب في تشغيل كود عند إيقاف الخادم على إشارات `SIGTERM` أو `SIGINT`.
+
+يمكنك تعيين متغير البيئة `NEXT_MANUAL_SIG_HANDLE` إلى `true` ثم تسجيل معالج لتلك الإشارة داخل ملف `_document.js` الخاص بك. ستحتاج إلى تسجيل متغير البيئة مباشرة في نص `package.json`، وليس في ملف `.env`.
+
+> **من الجيد معرفة**: معالجة الإشارات اليدوية غير متاحة في `next dev`.
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
+  }
+}
+```
+
+```js filename="pages/_document.js"
+if (process.env.NEXT_MANUAL_SIG_HANDLE) {
+  // يجب إضافة هذا في _document المخصص الخاص بك
+  process.on('SIGTERM', () => {
+    console.log('تم استقبال SIGTERM: ', 'تنظيف')
+    process.exit(0)
+  })
+
+  process.on('SIGINT', () => {
+    console.log('تم استقبال SIGINT: ', 'تنظيف')
+    process.exit(0)
+  })
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx
new file mode 100644
index 00000000..bb326973
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx
@@ -0,0 +1,467 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:05:28.256Z
+title: الانتقال من Vite
+description: تعلم كيفية نقل تطبيق React الحالي من Vite إلى Next.js.
+---
+
+سيساعدك هذا الدليل في نقل تطبيق Vite موجود إلى Next.js.
+
+## لماذا التبديل؟
+
+هناك عدة أسباب قد تدفعك للتبديل من Vite إلى Next.js:
+
+1. **بطء وقت تحميل الصفحة الأولي**: إذا قمت ببناء تطبيقك باستخدام [إضافة Vite الافتراضية لـ React](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)، فإن تطبيقك هو تطبيق يعمل فقط من جانب العميل. التطبيقات التي تعمل فقط من جانب العميل، والمعروفة أيضًا باسم تطبيقات الصفحة الواحدة (SPAs)، غالبًا ما تعاني من بطء في وقت تحميل الصفحة الأولي. يحدث هذا لعدة أسباب:
+   1. يحتاج المتصفح إلى انتظار تنزيل وتشغيل كود React وحزمة التطبيق بالكامل قبل أن يتمكن الكود من إرسال طلبات لتحميل بعض البيانات.
+   2. ينمو كود التطبيق الخاص بك مع كل ميزة جديدة واعتماد إضافي تضيفه.
+2. **عدم وجود تقسيم تلقائي للكود**: يمكن إدارة مشكلة بطء أوقات التحميل السابقة إلى حد ما مع تقسيم الكود. ومع ذلك، إذا حاولت إجراء تقسيم الكود يدويًا، فغالبًا ما ستجعل الأداء أسوأ. من السهل إدخال شلالات الشبكة عن غير قصد عند تقسيم الكود يدويًا. يوفر Next.js تقسيم الكود التلقائي المدمج في جهاز التوجيه الخاص به.
+3. **شلالات الشبكة**: أحد الأسباب الشائعة لضعف الأداء يحدث عندما تقوم التطبيقات بعمل طلبات متتابعة بين العميل والخادم لجلب البيانات. أحد الأنماط الشائعة لجلب البيانات في SPA هو عرض عنصر نائب في البداية، ثم جلب البيانات بعد تحميل المكون. لسوء الحظ، هذا يعني أن المكون الفرعي الذي يجلب البيانات لا يمكنه بدء الجلب حتى ينتهي المكون الأصلي من تحميل بياناته الخاصة. في Next.js، [تم حل هذه المشكلة](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#no-client-server-waterfalls) عن طريق جلب البيانات في مكونات الخادم.
+4. **حالات التحميل السريعة والمقصودة**: بفضل الدعم المدمج لـ [البث مع Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)، مع Next.js، يمكنك أن تكون أكثر تحديدًا لأي أجزاء من واجهة المستخدم تريد تحميلها أولًا وبأي ترتيب دون إدخال شلالات الشبكة. هذا يمكّنك من بناء صفحات يتم تحميلها بشكل أسرع وأيضًا القضاء على [تحولات التخطيط](https://web.dev/cls/).
+5. **اختيار استراتيجية جلب البيانات**: اعتمادًا على احتياجاتك، يسمح لك Next.js باختيار استراتيجية جلب البيانات على أساس الصفحة والمكون. يمكنك أن تقرر الجلب في وقت البناء، أو في وقت الطلب على الخادم، أو على العميل. على سبيل المثال، يمكنك جلب البيانات من نظام إدارة المحتوى الخاص بك وعرض مشاركات مدونتك في وقت البناء، والتي يمكن بعد ذلك تخزينها بكفاءة على CDN.
+6. **البرمجيات الوسيطة**: [برمجيات Next.js الوسيطة](/docs/app/building-your-application/routing/middleware) تتيح لك تشغيل الكود على الخادم قبل اكتمال الطلب. هذا مفيد بشكل خاص لتجنب ظهور محتوى غير مصادق عليه عندما يزور المستخدم صفحة تتطلب مصادقة عن طريق توجيه المستخدم إلى صفحة تسجيل الدخول. البرمجيات الوسيطة مفيدة أيضًا للتجربة والتوطين.
+7. **تحسينات مدمجة**: غالبًا ما يكون للصور والخطوط والنصوص البرمجية لجهات خارجية تأثير كبير على أداء التطبيق. يأتي Next.js مع مكونات مدمجة تقوم بتحسينها تلقائيًا لك.
+
+## خطوات النقل
+
+هدفنا من هذا النقل هو الحصول على تطبيق Next.js يعمل في أسرع وقت ممكن، بحيث يمكنك بعد ذلك تبني ميزات Next.js تدريجيًا. في البداية، سنحافظ عليه كتطبيق يعمل فقط من جانب العميل (SPA) دون نقل جهاز التوجيه الحالي الخاص بك. هذا يساعد في تقليل فرص مواجهة مشكلات أثناء عملية النقل ويقلل من تعارضات الدمج.
+
+### الخطوة 1: تثبيت اعتماد Next.js
+
+أول شيء تحتاج إلى فعله هو تثبيت `next` كاعتماد:
+
+```bash filename="Terminal"
+npm install next@latest
+```
+
+### الخطوة 2: إنشاء ملف تكوين Next.js
+
+قم بإنشاء ملف `next.config.mjs` في جذر مشروعك. سيحتوي هذا الملف على [خيارات تكوين Next.js](/docs/app/api-reference/next-config-js).
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // يخرج تطبيق صفحة واحدة (SPA).
+  distDir: './dist', // يغير دليل إخراج البناء إلى `./dist/`.
+}
+
+export default nextConfig
+```
+
+> **جيد أن تعرف**: يمكنك استخدام إما `.js` أو `.mjs` لملف تكوين Next.js الخاص بك.
+
+### الخطوة 3: تحديث تكوين TypeScript
+
+إذا كنت تستخدم TypeScript، فأنت بحاجة إلى تحديث ملف `tsconfig.json` الخاص بك بالتغييرات التالية لجعله متوافقًا مع Next.js. إذا كنت لا تستخدم TypeScript، يمكنك تخطي هذه الخطوة.
+
+1. قم بإزالة [مرجع المشروع](https://www.typescriptlang.org/tsconfig#references) إلى `tsconfig.node.json`
+2. أضف `./dist/types/**/*.ts` و `./next-env.d.ts` إلى [مصفوفة `include`](https://www.typescriptlang.org/tsconfig#include)
+3. أضف `./node_modules` إلى [مصفوفة `exclude`](https://www.typescriptlang.org/tsconfig#exclude)
+4. أضف `{ "name": "next" }` إلى [مصفوفة `plugins` في `compilerOptions`](https://www.typescriptlang.org/tsconfig#plugins): `"plugins": [{ "name": "next" }]`
+5. اضبط [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) على `true`: `"esModuleInterop": true`
+6. اضبط [`jsx`](https://www.typescriptlang.org/tsconfig#jsx) على `preserve`: `"jsx": "preserve"`
+7. اضبط [`allowJs`](https://www.typescriptlang.org/tsconfig#allowJs) على `true`: `"allowJs": true`
+8. اضبط [`forceConsistentCasingInFileNames`](https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames) على `true`: `"forceConsistentCasingInFileNames": true`
+9. اضبط [`incremental`](https://www.typescriptlang.org/tsconfig#incremental) على `true`: `"incremental": true`
+
+إليك مثال على ملف `tsconfig.json` يعمل مع هذه التغييرات:
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts"],
+  "exclude": ["./node_modules"]
+}
+```
+
+يمكنك العثور على مزيد من المعلومات حول تكوين TypeScript في [وثائق Next.js](/docs/app/building-your-application/configuring/typescript#typescript-plugin).
+
+### الخطوة 4: إنشاء تخطيط الجذر
+
+يجب أن يتضمن تطبيق [جهاز توجيه التطبيق](/docs/app) في Next.js ملف [تخطيط جذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)، وهو [مكون خادم React](/docs/app/building-your-application/rendering/server-components) سيلف جميع الصفحات في تطبيقك. يتم تعريف هذا الملف في المستوى الأعلى من دليل `app`.
+
+أقرب ما يعادل ملف تخطيط الجذر في تطبيق Vite هو ملف [`index.html`](https://vitejs.dev/guide/#index-html-and-project-root)، الذي يحتوي على علامات `<html>` و `<head>` و `<body>` الخاصة بك.
+
+في هذه الخطوة، ستحول ملف `index.html` الخاص بك إلى ملف تخطيط جذر:
+
+1. قم بإنشاء دليل `app` جديد في دليل `src` الخاص بك.
+2. قم بإنشاء ملف `layout.tsx` جديد داخل دليل `app`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return null
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return null
+}
+```
+
+> **جيد أن تعرف**: يمكن استخدام امتدادات `.js` أو `.jsx` أو `.tsx` لملفات التخطيط.
+
+3. انسخ محتوى ملف `index.html` الخاص بك إلى مكون `<RootLayout>` الذي تم إنشاؤه مسبقًا مع استبدال علامات `body.div#root` و `body.script` بـ `<div id="root">{children}</div>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+4. يتضمن Next.js بالفعل بشكل افتراضي علامات [meta charset](https://developer.mozilla.org/docs/Web/HTML/Element/meta#charset) و [meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)، لذا يمكنك إزالتها بأمان من `<head>` الخاص بك:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+5. يتم إضافة أي [ملفات بيانات وصفية](/docs/app/building-your-application/optimizing/metadata#file-based-metadata) مثل `favicon.ico` و `icon.png` و `robots.txt` تلقائيًا إلى علامة `<head>` للتطبيق طالما أنك وضعتها في المستوى الأعلى من دليل `app`. بعد نقل [جميع الملفات المدعومة](/docs/app/building-your-application/optimizing/metadata#file-based-metadata) إلى دليل `app`، يمكنك حذف علامات `<link>` الخاصة بها بأمان:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+6. أخيرًا، يمكن لـ Next.js إدارة علامات `<head>` الأخيرة الخاصة بك باستخدام [واجهة برمجة تطبيقات البيانات الوصفية](/docs/app/building-your-application/optimizing/metadata). انقل معلومات البيانات الوصفية النهائية الخاصة بك إلى كائن [`metadata` مُصدر](/docs/app/api-reference/functions/generate-metadata#metadata-object):
+
+```tsx filename="app/layout.tsx" switcher
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'My App',
+  description: 'My App is a...',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: 'My App',
+  description: 'My App is a...',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+مع التغييرات المذكورة أعلاه، انتقلت من الإعلان عن كل شيء في `index.html` الخاص بك إلى استخدام نهج Next.js القائم على الاتفاقية المدمج في الإطار ([واجهة برمجة تطبيقات البيانات الوصفية](/docs/app/building-your-application/optimizing/metadata)). يتيح لك هذا النهج تحسين تحسين محركات البحث (SEO) وإمكانية مشاركة صفحاتك على الويب بسهولة أكبر.
+
+### الخطوة 5: إنشاء صفحة نقطة الدخول
+
+في Next.js، تقوم بتعريف نقطة دخول لتطبيقك عن طريق إنشاء ملف `page.tsx`. أقرب ما يعادل هذا الملف في Vite هو ملف `main.tsx` الخاص بك. في هذه الخطوة، ستقوم بإعداد نقطة دخول التطبيق الخاص بك.
+
+1. **قم بإنشاء دليل `[[...slug]]` في دليل `app` الخاص بك.**
+
+نظرًا لأننا في هذا الدليل نهدف أولاً إلى إعداد Next.js كـ SPA (تطبيق صفحة واحدة)، فأنت بحاجة إلى أن تكون نقطة دخول الصفحة الخاصة بك قادرة على التقاط جميع المسارات المحتملة لتطبيقك. لهذا، قم بإنشاء دليل `[[...slug]]` جديد في دليل `app` الخاص بك.
+
+هذا الدليل هو ما يسمى [جزء المسار الاختياري الشامل](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments). يستخدم Next.js جهاز توجيه يعتمد على نظام الملفات حيث [تستخدم الأدلة لتحديد المسارات](/docs/app/building-your-application/routing/defining-routes#creating-routes). سيضمن هذا الدليل الخاص توجيه جميع مسارات التطبيق الخاص بك إلى ملف `page.tsx` الموجود فيه.
+
+2. **قم بإنشاء ملف `page.tsx` جديد داخل دليل `app/[[...slug]]` بالمحتوى التالي:**
+
+```tsx filename="app/[[...slug]]/page.tsx" switcher
+'use client'
+
+import dynamic from 'next/dynamic'
+import '../../index.css'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export default function Page() {
+  return <App />
+}
+```
+
+```jsx filename="app/[[...slug]]/page.js" switcher
+'use client'
+
+import dynamic from 'next/dynamic'
+import '../../index.css'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export default function Page() {
+  return <App />
+}
+```
+
+> **جيد أن تعرف**: يمكن استخدام امتدادات `.js` أو `.jsx` أو `.tsx` لملفات الصفحة.
+
+يحتوي هذا الملف على مكون `<Page>` تم تمييزه كـ [مكون عميل](/docs/app/building-your-application/rendering/client-components) بواسطة توجيه `'use client'`. بدون هذا التوجيه، كان المكون سيكون [مكون خادم](/docs/app/building-your-application/rendering/server-components).
+
+في Next.js، يتم [تقديم مكونات العميل مسبقًا إلى HTML](/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered) على الخادم قبل إرسالها إلى العميل، ولكن نظرًا لأننا نريد أولاً الحصول على تطبيق يعمل فقط من جانب العميل، فأنت بحاجة إلى إخبار Next.js بتعطيل التقديم المسبق لمكون `<App>` عن طريق استيراده ديناميكيًا مع خيار `ssr` مضبوطًا على `false`:
+
+```tsx
+const App = dynamic(() => import('../../App'), { ssr: false })
+```
+
+### الخطوة 6: تحديث استيراد الصور الثابتة
+
+يتعامل Next.js مع استيراد الصور الثابتة بشكل مختلف قليلاً عن Vite. مع Vite، فإن استيراد ملف صورة سيعيد عنوان URL العام كسلسلة نصية:
+
+```tsx filename="App.tsx"
+import image from './img.png' // `image` سيكون '/assets/img.2d8efhg.png' في الإنتاج
+
+export default function App() {
+  return <img src={image} />
+}
+```
+
+مع Next.js، يعيد استيراد الصور الثابتة كائنًا. يمكن بعد ذلك استخدام هذا الكائن مباشرة مع مكون [`<Image>`](/docs/app/api-reference/components/image) الخاص بـ Next.js، أو يمكنك استخدام خاصية `src` للكائن مع وسم `<img>` الحالي.
+
+يتمتع مكون `<Image>` بمزايا إضافية مثل [تحسين الصور التلقائي](/docs/app/building-your-application/optimizing/images). يقوم مكون `<Image>` تلقائيًا بتعيين سمات `width` و `height` لوسم `<img>` الناتج بناءً على أبعاد الصورة. هذا يمنع حدوث تغييرات في التخطيط عند تحميل الصورة. ومع ذلك، قد يسبب هذا مشاكل إذا كان تطبيقك يحتوي على صور يتم تصميم أحد أبعادها فقط دون الآخر ليكون `auto`. عندما لا يتم تعيينه إلى `auto`، سيعتمد البعد على قيمة سمة البعد لوسم `<img>`، مما قد يجعل الصورة تظهر مشوهة.
+
+سيؤدي الاحتفاظ بوسم `<img>` إلى تقليل عدد التغييرات في تطبيقك ومنع المشاكل المذكورة أعلاه. ومع ذلك، سترغب لاحقًا في الانتقال إلى مكون `<Image>` للاستفادة من التحسينات التلقائية.
+
+1. **تحويل مسارات الاستيراد المطلقة للصور المستوردة من `/public` إلى استيراد نسبي:**
+
+```tsx
+// قبل
+import logo from '/logo.png'
+
+// بعد
+import logo from '../public/logo.png'
+```
+
+2. **تمرير خاصية `src` للصورة بدلاً من كائن الصورة بالكامل إلى وسم `<img>`:**
+
+```tsx
+// قبل
+<img src={logo} />
+
+// بعد
+<img src={logo.src} />
+```
+
+> **تحذير:** إذا كنت تستخدم TypeScript، فقد تواجه أخطاء نوع عند الوصول إلى خاصية `src`. يمكنك تجاهلها بأمان الآن. سيتم إصلاحها بنهاية هذا الدليل.
+
+### الخطوة 7: ترحيل متغيرات البيئة
+
+يدعم Next.js [متغيرات البيئة](/docs/app/building-your-application/configuring/environment-variables) في ملفات `.env` بشكل مشابه لـ Vite. الفرق الرئيسي هو البادئة المستخدمة لعرض متغيرات البيئة على جانب العميل.
+
+- قم بتغيير جميع متغيرات البيئة ذات البادئة `VITE_` إلى `NEXT_PUBLIC_`.
+
+يعرض Vite بعض متغيرات البيئة المدمجة على كائن `import.meta.env` الخاص الذي لا يدعمه Next.js. تحتاج إلى تحديث استخدامها كما يلي:
+
+- `import.meta.env.MODE` ⇒ `process.env.NODE_ENV`
+- `import.meta.env.PROD` ⇒ `process.env.NODE_ENV === 'production'`
+- `import.meta.env.DEV` ⇒ `process.env.NODE_ENV !== 'production'`
+- `import.meta.env.SSR` ⇒ `typeof window !== 'undefined'`
+
+لا يوفر Next.js أيضًا متغير بيئة مدمج باسم `BASE_URL`. ومع ذلك، لا يزال بإمكانك تكوين واحد إذا كنت بحاجة إليه:
+
+1. **أضف ما يلي إلى ملف `.env` الخاص بك:**
+
+```bash filename=".env"
+# ...
+NEXT_PUBLIC_BASE_PATH="/some-base-path"
+```
+
+2. **قم بتعيين [`basePath`](/docs/app/api-reference/next-config-js/basePath) إلى `process.env.NEXT_PUBLIC_BASE_PATH` في ملف `next.config.mjs`:**
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // يخرج تطبيقًا أحادي الصفحة (SPA).
+  distDir: './dist', // يغير دليل إخراج البناء إلى `./dist/`.
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH, // يعيين المسار الأساسي إلى `/some-base-path`.
+}
+
+export default nextConfig
+```
+
+3. **قم بتحديث استخدامات `import.meta.env.BASE_URL` إلى `process.env.NEXT_PUBLIC_BASE_PATH`**
+
+### الخطوة 8: تحديث الأوامر في `package.json`
+
+يجب أن تكون الآن قادرًا على تشغيل تطبيقك لاختبار ما إذا كنت قد نجحت في ترحيله إلى Next.js. ولكن قبل ذلك، تحتاج إلى تحديث `scripts` في `package.json` بأوامر Next.js ذات الصلة، وإضافة `.next` و `next-env.d.ts` إلى `.gitignore`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+```
+
+```txt filename=".gitignore"
+# ...
+.next
+next-env.d.ts
+```
+
+الآن قم بتشغيل `npm run dev`، وافتح [`http://localhost:3000`](http://localhost:3000). من المفترض أن ترى تطبيقك يعمل الآن على Next.js.
+
+إذا كان تطبيقك يتبع تكوين Vite التقليدي، فهذا كل ما تحتاج إلى فعله للحصول على نسخة عاملة من تطبيقك.
+
+> **مثال:** تحقق من [طلب السحب هذا](https://github.com/inngest/vite-to-nextjs/pull/1) لمثال عملي لتطبيق Vite تم ترحيله إلى Next.js.
+
+### الخطوة 9: التنظيف
+
+يمكنك الآن تنظيف قاعدة التعليمات البرمجية من آثار Vite ذات الصلة:
+
+- احذف `main.tsx`
+- احذف `index.html`
+- احذف `vite-env.d.ts`
+- احذف `tsconfig.node.json`
+- احذف `vite.config.ts`
+- أزل تبعيات Vite
+
+## الخطوات التالية
+
+إذا سار كل شيء وفقًا للخطة، فلديك الآن تطبيق Next.js يعمل كتطبيق أحادي الصفحة. ومع ذلك، لم تستفد بعد من معظم مزايا Next.js، ولكن يمكنك الآن البدء في إجراء تغييرات تدريجية لتحقيق جميع الفوائد. إليك ما قد ترغب في القيام به بعد ذلك:
+
+- الانتقال من React Router إلى [موجه تطبيق Next.js](/docs/app/building-your-application/routing) للحصول على:
+  - تقسيم الشفرة التلقائي
+  - [عرض الخادم المتدفق](/docs/app/building-your-application/routing/loading-ui-and-streaming)
+  - [مكونات خادم React](/docs/app/building-your-application/rendering/server-components)
+- [تحسين الصور باستخدام مكون `<Image>`](/docs/app/building-your-application/optimizing/images)
+- [تحسين الخطوط باستخدام `next/font`](/docs/app/building-your-application/optimizing/fonts)
+- [تحسين نصوص الطرف الثالث باستخدام مكون `<Script>`](/docs/app/building-your-application/optimizing/scripts)
+- [تحديث تكوين ESLint لدعم قواعد Next.js](/docs/app/building-your-application/configuring/eslint)
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/01-codemods.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/01-codemods.mdx
new file mode 100644
index 00000000..29f8c0a5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/01-codemods.mdx
@@ -0,0 +1,321 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:02:59.818Z
+title: Codemods
+description: استخدم Codemods لترقية قاعدة كود Next.js عند إطلاق ميزات جديدة.
+---
+
+Codemods هي تحويلات تعمل على قاعدة الكود الخاصة بك برمجيًا. هذا يسمح بتطبيق عدد كبير من التغييرات برمجيًا دون الحاجة إلى المرور يدويًا عبر كل ملف.
+
+يوفر Next.js تحويلات Codemod لمساعدتك في ترقية قاعدة كود Next.js عند تحديث API أو إيقاف استخدامه.
+
+## الاستخدام
+
+في طرفيتك، انتقل (`cd`) إلى مجلد مشروعك، ثم قم بتشغيل:
+
+```bash filename="Terminal"
+npx @next/codemod <transform> <path>
+```
+
+استبدل `<transform>` و `<path>` بقيم مناسبة.
+
+- `transform` - اسم التحويل
+- `path` - الملفات أو المجلد المراد تحويله
+- `--dry` تشغيل تجريبي، لن يتم تعديل أي كود
+- `--print` طباعة المخرجات المتغيرة للمقارنة
+
+## Codemods الخاصة بـ Next.js
+
+### 13.2
+
+#### استخدام الخط المدمج
+
+##### `built-in-next-font`
+
+```bash filename="Terminal"
+npx @next/codemod@latest built-in-next-font .
+```
+
+يقوم هذا الكودمود بإلغاء تثبيت حزمة `@next/font` وتحويل استيرادات `@next/font` إلى `next/font` المدمج.
+
+على سبيل المثال:
+
+```js
+import { Inter } from '@next/font/google'
+```
+
+يتحول إلى:
+
+```js
+import { Inter } from 'next/font/google'
+```
+
+### 13.0
+
+#### إعادة تسمية استيرادات Next Image
+
+##### `next-image-to-legacy-image`
+
+```bash filename="Terminal"
+npx @next/codemod@latest next-image-to-legacy-image .
+```
+
+يقوم بإعادة تسمية استيرادات `next/image` بأمان في تطبيقات Next.js 10 أو 11 أو 12 الحالية إلى `next/legacy/image` في Next.js 13. كما يعيد تسمية `next/future/image` إلى `next/image`.
+
+على سبيل المثال:
+
+```jsx filename="pages/index.js"
+import Image1 from 'next/image'
+import Image2 from 'next/future/image'
+
+export default function Home() {
+  return (
+    <div>
+      <Image1 src="/test.jpg" width="200" height="300" />
+      <Image2 src="/test.png" width="500" height="400" />
+    </div>
+  )
+}
+```
+
+يتحول إلى:
+
+```jsx filename="pages/index.js"
+// 'next/image' تصبح 'next/legacy/image'
+import Image1 from 'next/legacy/image'
+// 'next/future/image' تصبح 'next/image'
+import Image2 from 'next/image'
+
+export default function Home() {
+  return (
+    <div>
+      <Image1 src="/test.jpg" width="200" height="300" />
+      <Image2 src="/test.png" width="500" height="400" />
+    </div>
+  )
+}
+```
+
+#### الانتقال إلى مكون الصورة الجديد
+
+##### `next-image-experimental`
+
+```bash filename="Terminal"
+npx @next/codemod@latest next-image-experimental .
+```
+
+يقوم بنقل محفوف بالمخاطر من `next/legacy/image` إلى `next/image` الجديد عن طريق إضافة أنماط مضمنة وإزالة الخصائص غير المستخدمة.
+
+- يزيل خاصية `layout` ويضيف `style`.
+- يزيل خاصية `objectFit` ويضيف `style`.
+- يزيل خاصية `objectPosition` ويضيف `style`.
+- يزيل خاصية `lazyBoundary`.
+- يزيل خاصية `lazyRoot`.
+
+#### إزالة وسم `<a>` من مكونات Link
+
+##### `new-link`
+
+```bash filename="Terminal"
+npx @next/codemod@latest new-link .
+```
+
+<AppOnly>
+
+قم بإزالة وسم `<a>` داخل [مكونات Link](/docs/app/api-reference/components/link)، أو أضف خاصية `legacyBehavior` إلى الروابط التي لا يمكن إصلاحها تلقائيًا.
+
+</AppOnly>
+
+<PagesOnly>
+
+قم بإزالة وسم `<a>` داخل [مكونات Link](/docs/pages/api-reference/components/link)، أو أضف خاصية `legacyBehavior` إلى الروابط التي لا يمكن إصلاحها تلقائيًا.
+
+</PagesOnly>
+
+على سبيل المثال:
+
+```jsx
+<Link href="/about">
+  <a>About</a>
+</Link>
+// يتحول إلى
+<Link href="/about">
+  About
+</Link>
+
+<Link href="/about">
+  <a onClick={() => console.log('clicked')}>About</a>
+</Link>
+// يتحول إلى
+<Link href="/about" onClick={() => console.log('clicked')}>
+  About
+</Link>
+```
+
+في الحالات التي لا يمكن فيها تطبيق الإصلاح التلقائي، تتم إضافة خاصية `legacyBehavior`. هذا يسمح لتطبيقك بالاستمرار في العمل باستخدام السلوك القديم لهذا الرابط المحدد.
+
+```jsx
+const Component = () => <a>About</a>
+
+<Link href="/about">
+  <Component />
+</Link>
+// يصبح
+<Link href="/about" legacyBehavior>
+  <Component />
+</Link>
+```
+
+### 11
+
+#### الانتقال من CRA
+
+##### `cra-to-next`
+
+```bash filename="Terminal"
+npx @next/codemod cra-to-next
+```
+
+ينقل مشروع Create React App إلى Next.js؛ إنشاء Pages Router والإعدادات اللازمة لمطابقة السلوك. يتم استخدام عرض جانب العميل فقط في البداية لمنع كسر التوافق بسبب استخدام `window` أثناء SSR ويمكن تمكينه بسلاسة للسماح بالتبني التدريجي لميزات Next.js المحددة.
+
+يرجى مشاركة أي ملاحظات متعلقة بهذا التحويل [في هذه المناقشة](https://github.com/vercel/next.js/discussions/25858).
+
+### 10
+
+#### إضافة استيرادات React
+
+##### `add-missing-react-import`
+
+```bash filename="Terminal"
+npx @next/codemod add-missing-react-import
+```
+
+يحول الملفات التي لا تستورد `React` لتشمل الاستيراد من أجل عمل [تحويل JSX الجديد في React](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
+
+على سبيل المثال:
+
+```jsx filename="my-component.js"
+export default class Home extends React.Component {
+  render() {
+    return <div>Hello World</div>
+  }
+}
+```
+
+يتحول إلى:
+
+```jsx filename="my-component.js"
+import React from 'react'
+export default class Home extends React.Component {
+  render() {
+    return <div>Hello World</div>
+  }
+}
+```
+
+### 9
+
+#### تحويل المكونات المجهولة إلى مكونات مسماة
+
+##### `name-default-component`
+
+```bash filename="Terminal"
+npx @next/codemod name-default-component
+```
+
+**الإصدارات 9 وما فوق.**
+
+يحول المكونات المجهولة إلى مكونات مسماة للتأكد من عملها مع [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
+
+على سبيل المثال:
+
+```jsx filename="my-component.js"
+export default function () {
+  return <div>Hello World</div>
+}
+```
+
+يتحول إلى:
+
+```jsx filename="my-component.js"
+export default function MyComponent() {
+  return <div>Hello World</div>
+}
+```
+
+سيكون للمكون اسم بحالة الجمل (camel-case) بناءً على اسم الملف، ويعمل أيضًا مع دوال السهم.
+
+### 8
+
+#### تحويل HOC الخاص بـ AMP إلى تكوين الصفحة
+
+##### `withamp-to-config`
+
+```bash filename="Terminal"
+npx @next/codemod withamp-to-config
+```
+
+يحول HOC `withAmp` إلى تكوين صفحة Next.js 9.
+
+على سبيل المثال:
+
+```js
+// قبل
+import { withAmp } from 'next/amp'
+
+function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export default withAmp(Home)
+```
+
+```js
+// بعد
+export default function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export const config = {
+  amp: true,
+}
+```
+
+### 6
+
+#### استخدام `withRouter`
+
+##### `url-to-withrouter`
+
+```bash filename="Terminal"
+npx @next/codemod url-to-withrouter
+```
+
+يحول خاصية `url` المهملة التي يتم حقنها تلقائيًا في الصفحات الرئيسية إلى استخدام `withRouter` وخاصية `router` التي يحقنها. اقرأ المزيد هنا: [https://nextjs.org/docs/messages/url-deprecated](/docs/messages/url-deprecated)
+
+على سبيل المثال:
+
+```js filename="من"
+import React from 'react'
+export default class extends React.Component {
+  render() {
+    const { pathname } = this.props.url
+    return <div>Current pathname: {pathname}</div>
+  }
+}
+```
+
+```js filename="إلى"
+import React from 'react'
+import { withRouter } from 'next/router'
+export default withRouter(
+  class extends React.Component {
+    render() {
+      const { pathname } = this.props.router
+      return <div>Current pathname: {pathname}</div>
+    }
+  }
+)
+```
+
+هذه حالة واحدة. جميع الحالات التي يتم تحويلها (واختبارها) يمكن العثور عليها في [مجلد `__testfixtures__`](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/02-app-router-migration.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/02-app-router-migration.mdx
new file mode 100644
index 00000000..8bed3d4f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/02-app-router-migration.mdx
@@ -0,0 +1,919 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:07:33.650Z
+title: دليل التبني التدريجي لموجه التطبيق (App Router)
+nav_title: الانتقال إلى موجه التطبيق
+description: تعلم كيفية ترقية تطبيق Next.js الحالي من موجه الصفحات (Pages Router) إلى موجه التطبيق (App Router).
+---
+
+سيساعدك هذا الدليل في:
+
+- [تحديث تطبيق Next.js من الإصدار 12 إلى الإصدار 13](#nextjs-version)
+- [ترقية الميزات التي تعمل في كل من دليل `pages` ودليل `app`](#upgrading-new-features)
+- [هجرة تطبيقك الحالي تدريجيًا من `pages` إلى `app`](#migrating-from-pages-to-app)
+
+## الترقية
+
+### إصدار Node.js
+
+أصبح الحد الأدنى لإصدار Node.js الآن **v16.14**. راجع [توثيق Node.js](https://nodejs.org/docs/latest-v16.x/api/) لمزيد من المعلومات.
+
+### إصدار Next.js
+
+لتحديث Next.js إلى الإصدار 13، قم بتشغيل الأمر التالي باستخدام مدير الحزم المفضل لديك:
+
+```bash filename="Terminal"
+npm install next@latest react@latest react-dom@latest
+```
+
+### إصدار ESLint
+
+إذا كنت تستخدم ESLint، فستحتاج إلى تحديث إصدار ESLint:
+
+```bash filename="Terminal"
+npm install -D eslint-config-next@latest
+```
+
+> **معلومة مفيدة**: قد تحتاج إلى إعادة تشغيل خادم ESLint في VS Code لتفعيل تغييرات ESLint. افتح لوحة الأوامر (`cmd+shift+p` على Mac؛ `ctrl+shift+p` على Windows) وابحث عن `ESLint: Restart ESLint Server`.
+
+## الخطوات التالية
+
+بعد التحديث، راجع الأقسام التالية للخطوات التالية:
+
+- [ترقية الميزات الجديدة](#upgrading-new-features): دليل لمساعدتك في الترقية إلى ميزات جديدة مثل مكونات الصورة والرابط المحسنة.
+- [الهجرة من دليل `pages` إلى `app`](#migrating-from-pages-to-app): دليل خطوة بخطوة لمساعدتك في الهجرة التدريجية من دليل `pages` إلى `app`.
+
+## ترقية الميزات الجديدة
+
+أدخل Next.js 13 [موجه التطبيق الجديد (App Router)](/docs/app/building-your-application/routing) بميزات واتفاقيات جديدة. يتوفر الموجه الجديد في دليل `app` ويتعايش مع دليل `pages`.
+
+لا تتطلب الترقية إلى Next.js 13 استخدام [موجه التطبيق الجديد (App Router)](/docs/app/building-your-application/routing#the-app-router). يمكنك الاستمرار في استخدام `pages` مع ميزات جديدة تعمل في كلا الدليلين، مثل [مكون الصورة](#image-component) المحدث، [مكون الرابط](#link-component)، [مكون النص البرمجي](#script-component)، و[تحسين الخطوط](#font-optimization).
+
+### مكون `<Image/>`
+
+قدم Next.js 12 تحسينات جديدة لمكون الصورة باستخدام استيراد مؤقت: `next/future/image`. شملت هذه التحسينات كمية أقل من JavaScript على جانب العميل، طرق أسهل لتوسيع وتصميم الصور، تحسين إمكانية الوصول، وتحميل كسول متصفح أصلي.
+
+في الإصدار 13، أصبح هذا السلوك الجديد هو الافتراضي لـ `next/image`.
+
+هناك اثنان من أدوات التعديل التلقائي (codemods) لمساعدتك في الهجرة إلى مكون الصورة الجديد:
+
+- [**أداة `next-image-to-legacy-image` التلقائية**](/docs/app/building-your-application/upgrading/codemods#next-image-to-legacy-image): تعيد تسمية استيرادات `next/image` إلى `next/legacy/image` بأمان وتلقائيًا. سيحافظ المكونات الحالية على نفس السلوك.
+- [**أداة `next-image-experimental` التلقائية**](/docs/app/building-your-application/upgrading/codemods#next-image-experimental): تضيف أنماط مضمنة بشكل خطير وتزيل الخصائص غير المستخدمة. سيغير هذا سلوك المكونات الحالية لتتوافق مع الإعدادات الافتراضية الجديدة. لاستخدام هذه الأداة، تحتاج إلى تشغيل أداة `next-image-to-legacy-image` أولاً.
+
+### مكون `<Link>`
+
+لم يعد مكون [`<Link>`](/docs/app/building-your-application/routing/linking-and-navigating#link-component) يتطلب إضافة علامة `<a>` يدويًا كطفل. تمت إضافة هذا السلوك كخيار تجريبي في [الإصدار 12.2](https://nextjs.org/blog/next-12-2) وأصبح الآن الافتراضي. في Next.js 13، يقوم `<Link>` دائمًا بعرض `<a>` ويسمح لك بإعادة توجيه الخصائص إلى العلامة الأساسية.
+
+على سبيل المثال:
+
+```jsx
+import Link from 'next/link'
+
+// Next.js 12: يجب تداخل `<a>` وإلا سيتم استبعادها
+<Link href="/about">
+  <a>About</a>
+</Link>
+
+// Next.js 13: يقوم `<Link>` دائمًا بعرض `<a>` في الخلفية
+<Link href="/about">
+  About
+</Link>
+```
+
+لترقية روابطك إلى Next.js 13، يمكنك استخدام [أداة `new-link` التلقائية](/docs/app/building-your-application/upgrading/codemods#new-link).
+
+### مكون `<Script>`
+
+تم تحديث سلوك [`next/script`](/docs/app/api-reference/components/script) لدعم كل من `pages` و`app`، ولكن هناك بعض التغييرات التي يجب إجراؤها لضمان هجرة سلسة:
+
+- انقل أي نصوص برمجية `beforeInteractive` قمت بتضمينها سابقًا في `_document.js` إلى ملف التخطيط الجذري (`app/layout.tsx`).
+- لا تعمل استراتيجية `worker` التجريبية بعد في `app` وسيتعين إزالة النصوص البرمجية المحددة بهذه الاستراتيجية أو تعديلها لاستخدام استراتيجية مختلفة (مثل `lazyOnload`).
+- لن تعمل معالجات `onLoad` و`onReady` و`onError` في مكونات الخادم، لذا تأكد من نقلها إلى [مكون العميل (Client Component)](/docs/app/building-your-application/rendering/server-components) أو إزالتها تمامًا.
+
+### تحسين الخطوط
+
+سابقًا، ساعدك Next.js في تحسين الخطوط عن طريق [تضمين CSS الخطوط](/docs/app/building-your-application/optimizing/fonts). يقدم الإصدار 13 وحدة [`next/font`](/docs/app/building-your-application/optimizing/fonts) الجديدة التي تمنحك القدرة على تخصيص تجربة تحميل الخطوط مع ضمان أداء وخصوصية رائعين. يدعم `next/font` كل من دليل `pages` و`app`.
+
+بينما لا يزال [تضمين CSS](/docs/app/building-your-application/optimizing/fonts) يعمل في `pages`، إلا أنه لا يعمل في `app`. يجب عليك استخدام [`next/font`](/docs/app/building-your-application/optimizing/fonts) بدلاً من ذلك.
+
+راجع صفحة [تحسين الخطوط](/docs/app/building-your-application/optimizing/fonts) لتعلم كيفية استخدام `next/font`.
+
+## الهجرة من `pages` إلى `app`
+
+> **🎥 شاهد:** تعلم كيفية تبني موجه التطبيق تدريجيًا → [YouTube (16 دقيقة)](https://www.youtube.com/watch?v=YQMSietiFm0).
+
+قد تكون الانتقال إلى موجه التطبيق هي المرة الأولى التي تستخدم فيها ميزات React التي يبني عليها Next.js مثل مكونات الخادم (Server Components)، Suspense، والمزيد. عند دمجها مع ميزات Next.js الجديدة مثل [الملفات الخاصة](/docs/app/building-your-application/routing#file-conventions) و[التخطيطات (layouts)](/docs/app/building-your-application/routing/pages-and-layouts#layouts)، تعني الهجرة تعلم مفاهيم ونماذج عقلية وسلوكيات جديدة.
+
+نوصي بتقليل تعقيد هذه التحديثات المجتمعة عن طريق تقسيم هجرتك إلى خطوات أصغر. تم تصميم دليل `app` عمدًا للعمل بالتزامن مع دليل `pages` للسماح بالهجرة صفحة بصفحة.
+
+- يدعم دليل `app` المسارات المتداخلة _و_ التخطيطات. [تعلم المزيد](/docs/app/building-your-application/routing).
+- استخدم المجلدات المتداخلة ل[تحديد المسارات](/docs/app/building-your-application/routing/defining-routes) وملف `page.js` الخاص لجعل جزء المسار متاحًا للجمهور. [تعلم المزيد](#step-4-migrating-pages).
+- تُستخدم [الاتفاقيات الخاصة للملفات](/docs/app/building-your-application/routing#file-conventions) لإنشاء واجهة مستخدم لكل جزء مسار. أكثر الملفات الخاصة شيوعًا هي `page.js` و`layout.js`.
+  - استخدم `page.js` لتعريف واجهة مستخدم فريدة لمسار.
+  - استخدم `layout.js` لتعريف واجهة مستخدم مشتركة عبر مسارات متعددة.
+  - يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للملفات الخاصة.
+- يمكنك وضع ملفات أخرى داخل دليل `app` مثل المكونات والأنماط والاختبارات والمزيد. [تعلم المزيد](/docs/app/building-your-application/routing).
+- تم استبدال وظائف جلب البيانات مثل `getServerSideProps` و`getStaticProps` بـ [واجهة برمجة تطبيقات جديدة](/docs/app/building-your-application/data-fetching) داخل `app`. تم استبدال `getStaticPaths` بـ [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
+- تم استبدال `pages/_app.js` و`pages/_document.js` بتخطيط جذري واحد `app/layout.js`. [تعلم المزيد](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
+- تم استبدال `pages/_error.js` بملفات `error.js` خاصة أكثر دقة. [تعلم المزيد](/docs/app/building-your-application/routing/error-handling).
+- تم استبدال `pages/404.js` بملف [`not-found.js`](/docs/app/api-reference/file-conventions/not-found).
+- لا يزال `pages/api/*` موجودًا داخل دليل `pages`.
+
+### الخطوة 1: إنشاء دليل `app`
+
+قم بتحديث إلى أحدث إصدار من Next.js (يتطلب الإصدار 13.4 أو أحدث):
+
+```bash
+npm install next@latest
+```
+
+ثم، أنشئ دليل `app` جديد في جذر مشروعك (أو دليل `src/`).
+
+### الخطوة 2: إنشاء تخطيط جذري
+
+أنشئ ملف `app/layout.tsx` جديد داخل دليل `app`. هذا هو [التخطيط الجذري](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) الذي سيتم تطبيقه على جميع المسارات داخل `app`.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  // يجب أن تقبل التخطيطات خاصية children.
+  // سيتم ملؤها بالتخطيطات أو الصفحات المتداخلة
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({
+  // يجب أن تقبل التخطيطات خاصية children.
+  // سيتم ملؤها بالتخطيطات أو الصفحات المتداخلة
+  children,
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+- **يجب** أن يتضمن دليل `app` تخطيطًا جذريًا.
+- يجب أن يحدد التخطيط الجذري علامات `<html>` و`<body>` لأن Next.js لا ينشئها تلقائيًا
+- يحل التخطيط الجذري محل ملفات `pages/_app.tsx` و`pages/_document.tsx`.
+- يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` لملفات التخطيط.
+
+لإدارة عناصر `<head>` HTML، يمكنك استخدام [دعم SEO المدمج](/docs/app/building-your-application/optimizing/metadata):
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Home',
+  description: 'Welcome to Next.js',
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: 'Home',
+  description: 'Welcome to Next.js',
+}
+```
+
+#### هجرة `_document.js` و`_app.js`
+
+إذا كان لديك ملف `_app` أو `_document` موجود، يمكنك نسخ المحتويات (مثل الأنماط العامة) إلى التخطيط الجذري (`app/layout.tsx`). لن تنطبق الأنماط في `app/layout.tsx` على `pages/*`. يجب أن تحتفظ بـ `_app`/`_document` أثناء الهجرة لمنع تعطل مسارات `pages/*`. بمجرد اكتمال الهجرة، يمكنك حذفها بأمان.
+
+إذا كنت تستخدم أي موفري سياق React، فسيتعين نقلهم إلى [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components).
+
+#### هجرة نمط `getLayout()` إلى التخطيطات (اختياري)
+
+أوصى Next.js بإضافة [خاصية إلى مكونات الصفحة](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts) لتحقيق تخطيطات لكل صفحة في دليل `pages`. يمكن استبدال هذا النمط بدعم أصلي لـ[التخطيطات المتداخلة](/docs/app/building-your-application/routing/pages-and-layouts#layouts) في دليل `app`.
+
+<details>
+  <summary>راجع مثال قبل وبعد</summary>
+
+**قبل**
+
+```jsx filename="components/DashboardLayout.js"
+export default function DashboardLayout({ children }) {
+  return (
+    <div>
+      <h2>My Dashboard</h2>
+      {children}
+    </div>
+  )
+}
+```
+
+```jsx filename="pages/dashboard/index.js"
+import DashboardLayout from '../components/DashboardLayout'
+
+export default function Page() {
+  return <p>My Page</p>
+}
+
+Page.getLayout = function getLayout(page) {
+  return <DashboardLayout>{page}</DashboardLayout>
+}
+```
+
+**بعد**
+
+- أزل خاصية `Page.getLayout` من `pages/dashboard/index.js` واتبع [خطوات هجرة الصفحات](#step-4-migrating-pages) إلى دليل `app`.
+
+  ```jsx filename="app/dashboard/page.js"
+  export default function Page() {
+    return <p>My Page</p>
+  }
+  ```
+
+- انقل محتويات `DashboardLayout` إلى [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components) جديد للاحتفاظ بسلوك دليل `pages`.
+
+  ```jsx filename="app/dashboard/DashboardLayout.js"
+  'use client' // يجب أن تكون هذه التوجيه في أعلى الملف، قبل أي استيرادات.
+
+  // هذا مكون عميل
+  export default function DashboardLayout({ children }) {
+    return (
+      <div>
+        <h2>My Dashboard</h2>
+        {children}
+      </div>
+    )
+  }
+  ```
+
+- استورد `DashboardLayout` إلى ملف `layout.js` جديد داخل دليل `app`.
+
+  ```jsx filename="app/dashboard/layout.js"
+  import DashboardLayout from './DashboardLayout'
+
+  // هذا مكون خادم
+  export default function Layout({ children }) {
+    return <DashboardLayout>{children}</DashboardLayout>
+  }
+  ```
+
+- يمكنك نقل الأجزاء غير التفاعلية من `DashboardLayout.js` (مكون العميل) إلى `layout.js` (مكون الخادم) تدريجيًا لتقليل كمية JavaScript المكون التي ترسلها إلى العميل.
+
+</details>
+
+### الخطوة 3: هجرة `next/head`
+
+في دليل `pages`، يتم استخدام مكون React `next/head` لإدارة عناصر `<head>` HTML مثل `title` و`meta`. في دليل `app`، تم استبدال `next/head` بـ[دعم SEO المدمج الجديد](/docs/app/building-your-application/optimizing/metadata).
+
+**قبل:**
+
+```tsx filename="pages/index.tsx" switcher
+import Head from 'next/head'
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>My page title</title>
+      </Head>
+    </>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+import Head from 'next/head'
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>My page title</title>
+      </Head>
+    </>
+  )
+}
+```
+
+**بعد:**
+
+```tsx filename="app/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'My Page Title',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+```jsx filename="app/page.js" switcher
+export const metadata = {
+  title: 'My Page Title',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+[راجع جميع خيارات البيانات الوصفية](/docs/app/api-reference/functions/generate-metadata).
+
+### الخطوة 4: ترحيل الصفحات
+
+- الصفحات في [دليل `app`](/docs/app/building-your-application/routing) هي [مكونات خادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا. هذا يختلف عن دليل `pages` حيث تكون الصفحات [مكونات عميل (Client Components)](/docs/app/building-your-application/rendering/client-components).
+- [جلب البيانات (Data fetching)](/docs/app/building-your-application/data-fetching) قد تغير في `app`. تم استبدال `getServerSideProps` و `getStaticProps` و `getInitialProps` بواجهة برمجة تطبيقات أبسط.
+- يستخدم دليل `app` مجلدات متداخلة لـ[تحديد المسارات (defining routes)](/docs/app/building-your-application/routing/defining-routes) وملف `page.js` خاص لجعل جزء المسار متاحًا للجمهور.
+- | دليل `pages` | دليل `app`       | المسار          |
+  | ----------------- | --------------------- | -------------- |
+  | `index.js`        | `page.js`             | `/`            |
+  | `about.js`        | `about/page.js`       | `/about`       |
+  | `blog/[slug].js`  | `blog/[slug]/page.js` | `/blog/post-1` |
+
+نوصي بتقسيم ترحيل الصفحة إلى خطوتين رئيسيتين:
+
+- الخطوة 1: نقل مكون الصفحة المُصدَّر افتراضيًا إلى مكون عميل جديد.
+- الخطوة 2: استيراد مكون العميل الجديد إلى ملف `page.js` جديد داخل دليل `app`.
+
+> **معلومة مفيدة**: هذا هو أسهل مسار للترحيل لأنه الأكثر تشابهًا مع سلوك دليل `pages`.
+
+**الخطوة 1: إنشاء مكون عميل جديد**
+
+- أنشئ ملفًا منفصلًا جديدًا داخل دليل `app` (مثل `app/home-page.tsx` أو ما شابه) يُصدِّر مكون عميل. لتحديد مكونات العميل، أضف توجيه `'use client'` في أعلى الملف (قبل أي استيرادات).
+- انقل مكون الصفحة المُصدَّر افتراضيًا من `pages/index.js` إلى `app/home-page.tsx`.
+
+```tsx filename="app/home-page.tsx" switcher
+'use client'
+
+// هذا مكون عميل. يستقبل البيانات كخصائص (props)
+// وله إمكانية الوصول إلى الحالة والتأثيرات تمامًا مثل مكونات الصفحة
+// في دليل `pages`.
+export default function HomePage({ recentPosts }) {
+  return (
+    <div>
+      {recentPosts.map((post) => (
+        <div key={post.id}>{post.title}</div>
+      ))}
+    </div>
+  )
+}
+```
+
+```jsx filename="app/home-page.js" switcher
+'use client'
+
+// هذا مكون عميل. يستقبل البيانات كخصائص (props)
+// وله إمكانية الوصول إلى الحالة والتأثيرات تمامًا مثل مكونات الصفحة
+// في دليل `pages`.
+export default function HomePage({ recentPosts }) {
+  return (
+    <div>
+      {recentPosts.map((post) => (
+        <div key={post.id}>{post.title}</div>
+      ))}
+    </div>
+  )
+}
+```
+
+**الخطوة 2: إنشاء صفحة جديدة**
+
+- أنشئ ملف `app/page.tsx` جديد داخل دليل `app`. هذا مكون خادم افتراضيًا.
+- استورد مكون العميل `home-page.tsx` إلى الصفحة.
+- إذا كنت تجلب البيانات في `pages/index.js`، انقل منطق جلب البيانات مباشرة إلى مكون الخادم باستخدام [واجهات برمجة تطبيقات جلب البيانات الجديدة](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating). راجع [دليل ترقية جلب البيانات](#step-6-migrating-data-fetching-methods) لمزيد من التفاصيل.
+
+  ```tsx filename="app/page.tsx" switcher
+  // استورد مكون العميل الخاص بك
+  import HomePage from './home-page'
+
+  async function getPosts() {
+    const res = await fetch('https://...')
+    const posts = await res.json()
+    return posts
+  }
+
+  export default async function Page() {
+    // جلب البيانات مباشرة في مكون خادم
+    const recentPosts = await getPosts()
+    // إعادة توجيه البيانات التي تم جلبها إلى مكون العميل الخاص بك
+    return <HomePage recentPosts={recentPosts} />
+  }
+  ```
+
+  ```jsx filename="app/page.js" switcher
+  // استورد مكون العميل الخاص بك
+  import HomePage from './home-page'
+
+  async function getPosts() {
+    const res = await fetch('https://...')
+    const posts = await res.json()
+    return posts
+  }
+
+  export default async function Page() {
+    // جلب البيانات مباشرة في مكون خادم
+    const recentPosts = await getPosts()
+    // إعادة توجيه البيانات التي تم جلبها إلى مكون العميل الخاص بك
+    return <HomePage recentPosts={recentPosts} />
+  }
+  ```
+
+- إذا كانت صفحتك السابقة تستخدم `useRouter`، فستحتاج إلى التحديث إلى خطافات التوجيه الجديدة. [تعلم المزيد](/docs/app/api-reference/functions/use-router).
+- ابدأ خادم التطوير الخاص بك وقم بزيارة [`http://localhost:3000`](http://localhost:3000). يجب أن ترى مسار الفهرس الحالي الخاص بك، الذي يتم تقديمه الآن عبر دليل التطبيق.
+
+### الخطوة 5: ترحيل خطافات التوجيه
+
+تمت إضافة موجه جديد لدعم السلوك الجديد في دليل `app`.
+
+في `app`، يجب عليك استخدام الخطافات الثلاثة الجديدة المستوردة من `next/navigation`: [`useRouter()`](/docs/app/api-reference/functions/use-router)، [`usePathname()`](/docs/app/api-reference/functions/use-pathname)، و [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params).
+
+- خطاف `useRouter` الجديد مستورد من `next/navigation` وله سلوك مختلف عن خطاف `useRouter` في `pages` المستورد من `next/router`.
+  - [خطاف `useRouter` المستورد من `next/router`](/docs/pages/api-reference/functions/use-router) غير مدعوم في دليل `app` ولكن يمكن الاستمرار في استخدامه في دليل `pages`.
+- خطاف `useRouter` الجديد لا يُرجع سلسلة `pathname`. استخدم خطاف `usePathname` المنفصل بدلاً من ذلك.
+- خطاف `useRouter` الجديد لا يُرجع كائن `query`. استخدم خطاف `useSearchParams` المنفصل بدلاً من ذلك.
+- يمكنك استخدام `useSearchParams` و `usePathname` معًا للاستماع إلى تغييرات الصفحة. راجع قسم [أحداث الموجه (Router Events)](/docs/app/api-reference/functions/use-router#router-events) لمزيد من التفاصيل.
+- هذه الخطافات الجديدة مدعومة فقط في مكونات العميل. لا يمكن استخدامها في مكونات الخادم.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // ...
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // ...
+}
+```
+
+بالإضافة إلى ذلك، يحتوي خطاف `useRouter` الجديد على التغييرات التالية:
+
+- تمت إزالة `isFallback` لأن `fallback` قد [تم استبداله](#replacing-fallback).
+- تمت إزالة قيم `locale` و `locales` و `defaultLocales` و `domainLocales` لأن ميزات i18n المدمجة في Next.js لم تعد ضرورية في دليل `app`. [تعلم المزيد حول i18n](/docs/pages/building-your-application/routing/internationalization).
+- تمت إزالة `basePath`. البديل لن يكون جزءًا من `useRouter`. لم يتم تنفيذه بعد.
+- تمت إزالة `asPath` لأن مفهوم `as` قد تمت إزالته من الموجه الجديد.
+- تمت إزالة `isReady` لأنه لم يعد ضروريًا. أثناء [التصيير الثابت (static rendering)](/docs/app/building-your-application/rendering/server-components#static-rendering-default)، أي مكون يستخدم خطاف [`useSearchParams()`](/docs/app/api-reference/functions/use-params) سيتخطى خطوة التصيير المسبق وسيتم تصييره على العميل في وقت التشغيل بدلاً من ذلك.
+
+[عرض مرجع واجهة برمجة تطبيقات `useRouter()`](/docs/app/api-reference/functions/use-router).
+
+### الخطوة 6: ترحيل طرق جلب البيانات
+
+يستخدم دليل `pages` الدالتين `getServerSideProps` و `getStaticProps` لجلب البيانات للصفحات. داخل دليل `app`، تم استبدال دوال جلب البيانات السابقة هذه بـ[واجهة برمجة تطبيقات أبسط](/docs/app/building-your-application/data-fetching) مبنية على `fetch()` ومكونات خادم React غير المتزامنة.
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا بعمر افتراضي 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا بعمر افتراضي 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+#### تصيير جانب الخادم (`getServerSideProps`)
+
+في دليل `pages`، يُستخدم `getServerSideProps` لجلب البيانات على الخادم وإعادة توجيه الخصائص إلى مكون React المُصدَّر افتراضيًا في الملف. يتم تصيير HTML الأولي للصفحة من الخادم، يليه "ترطيب" الصفحة في المتصفح (جعلها تفاعلية).
+
+```jsx filename="pages/dashboard.js"
+// دليل `pages`
+
+export async function getServerSideProps() {
+  const res = await fetch(`https://...`)
+  const projects = await res.json()
+
+  return { props: { projects } }
+}
+
+export default function Dashboard({ projects }) {
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>{project.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+في دليل `app`، يمكننا وضع جلب البيانات داخل مكونات React الخاصة بنا باستخدام [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components). هذا يسمح لنا بإرسال كمية أقل من JavaScript إلى العميل، مع الحفاظ على HTML المُصيَّر من الخادم.
+
+عن طريق تعيين خيار `cache` إلى `no-store`، يمكننا الإشارة إلى أنه لا يجب تخزين البيانات التي تم جلبها [مطلقًا](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating). هذا مشابه لـ `getServerSideProps` في دليل `pages`.
+
+```tsx filename="app/dashboard/page.tsx" switcher
+// دليل `app`
+
+// يمكن تسمية هذه الدالة بأي شيء
+async function getProjects() {
+  const res = await fetch(`https://...`, { cache: 'no-store' })
+  const projects = await res.json()
+
+  return projects
+}
+
+export default async function Dashboard() {
+  const projects = await getProjects()
+
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>{project.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+// دليل `app`
+
+// يمكن تسمية هذه الدالة بأي شيء
+async function getProjects() {
+  const res = await fetch(`https://...`, { cache: 'no-store' })
+  const projects = await res.json()
+
+  return projects
+}
+
+export default async function Dashboard() {
+  const projects = await getProjects()
+
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>{project.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+#### الوصول إلى كائن الطلب
+
+في دليل `pages`، يمكنك استرداد البيانات المستندة إلى الطلب بناءً على واجهة برمجة تطبيقات HTTP لـ Node.js.
+
+على سبيل المثال، يمكنك استرداد كائن `req` من `getServerSideProps` واستخدامه لاسترداد ملفات تعريف الارتباط (cookies) ورؤوس (headers) الطلب.
+
+```jsx filename="pages/index.js"
+// دليل `pages`
+
+export async function getServerSideProps({ req, query }) {
+  const authHeader = req.getHeaders()['authorization'];
+  const theme = req.cookies['theme'];
+
+  return { props: { ... }}
+}
+
+export default function Page(props) {
+  return ...
+}
+```
+
+يكشف دليل `app` عن دوال جديدة للقراءة فقط لاسترداد بيانات الطلب:
+
+- [`headers()`](/docs/app/api-reference/functions/headers): مبنية على واجهة برمجة تطبيقات رؤوس الويب، ويمكن استخدامها داخل [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) لاسترداد رؤوس الطلب.
+- [`cookies()`](/docs/app/api-reference/functions/cookies): مبنية على واجهة برمجة تطبيقات ملفات تعريف الارتباط للويب، ويمكن استخدامها داخل [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) لاسترداد ملفات تعريف الارتباط.
+
+```tsx filename="app/page.tsx" switcher
+// دليل `app`
+import { cookies, headers } from 'next/headers'
+
+async function getData() {
+  const authHeader = headers().get('authorization')
+
+  return '...'
+}
+
+export default async function Page() {
+  // يمكنك استخدام `cookies()` أو `headers()` داخل مكونات الخادم
+  // مباشرة أو في دالة جلب البيانات الخاصة بك
+  const theme = cookies().get('theme')
+  const data = await getData()
+  return '...'
+}
+```
+
+```jsx filename="app/page.js" switcher
+// دليل `app`
+import { cookies, headers } from 'next/headers'
+
+async function getData() {
+  const authHeader = headers().get('authorization')
+
+  return '...'
+}
+
+export default async function Page() {
+  // يمكنك استخدام `cookies()` أو `headers()` داخل مكونات الخادم
+  // مباشرة أو في دالة جلب البيانات الخاصة بك
+  const theme = cookies().get('theme')
+  const data = await getData()
+  return '...'
+}
+```
+
+#### توليد الموقع الثابت (`getStaticProps`)
+
+في دليل `pages`، تُستخدم الدالة `getStaticProps` لتصيير صفحة مسبقًا في وقت البناء. يمكن استخدام هذه الدالة لجلب البيانات من واجهة برمجة تطبيقات خارجية أو مباشرة من قاعدة بيانات، وتمرير هذه البيانات إلى الصفحة بأكملها أثناء إنشائها أثناء البناء.
+
+```jsx filename="pages/index.js"
+// دليل `pages`
+
+export async function getStaticProps() {
+  const res = await fetch(`https://...`)
+  const projects = await res.json()
+
+  return { props: { projects } }
+}
+
+export default function Index({ projects }) {
+  return projects.map((project) => <div>{project.name}</div>)
+}
+```
+
+في دليل `app`، سيكون جلب البيانات باستخدام [`fetch()`](/docs/app/api-reference/functions/fetch) افتراضيًا إلى `cache: 'force-cache'`، والذي سيخزن بيانات الطلب مؤقتًا حتى يتم إبطالها يدويًا. هذا مشابه لـ `getStaticProps` في دليل `pages`.
+
+```jsx filename="app/page.js"
+// دليل `app`
+
+// يمكن تسمية هذه الدالة بأي شيء
+async function getProjects() {
+  const res = await fetch(`https://...`)
+  const projects = await res.json()
+
+  return projects
+}
+
+export default async function Index() {
+  const projects = await getProjects()
+
+  return projects.map((project) => <div>{project.name}</div>)
+}
+```
+
+#### المسارات الديناميكية (`getStaticPaths`)
+
+في دليل `pages`، تُستخدم الدالة `getStaticPaths` لتحديد المسارات الديناميكية التي يجب تقديمها مسبقًا أثناء وقت البناء.
+
+```jsx filename="pages/posts/[id].js"
+// دليل `pages`
+import PostLayout from '@/components/post-layout'
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  return { props: { post } }
+}
+
+export default function Post({ post }) {
+  return <PostLayout post={post} />
+}
+```
+
+في دليل `app`، يتم استبدال `getStaticPaths` بـ [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
+
+تتصرف [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) بشكل مشابه لـ `getStaticPaths`، ولكن لديها واجهة برمجة تطبيقات مبسطة لإرجاع معلمات المسار ويمكن استخدامها داخل [التخطيطات (layouts)](/docs/app/building-your-application/routing/pages-and-layouts). الشكل الذي تُرجعه `generateStaticParams` هو مصفوفة من الأجزاء بدلاً من مصفوفة من كائنات `param` متداخلة أو سلسلة من المسارات المحلولة.
+
+```jsx filename="app/posts/[id]/page.js"
+// دليل `app`
+import PostLayout from '@/components/post-layout'
+
+export async function generateStaticParams() {
+  return [{ id: '1' }, { id: '2' }]
+}
+
+async function getPost(params) {
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  return post
+}
+
+export default async function Post({ params }) {
+  const post = await getPost(params)
+
+  return <PostLayout post={post} />
+}
+```
+
+استخدام الاسم `generateStaticParams` أكثر ملاءمة من `getStaticPaths` للنموذج الجديد في دليل `app`. يتم استبدال البادئة `get` بـ `generate` الأكثر وصفية، والتي تتناسب بشكل أفضل الآن بعد أن لم تعد `getStaticProps` و `getServerSideProps` ضرورية. يتم استبدال اللاحقة `Paths` بـ `Params`، وهي أكثر ملاءمة للتوجيه المتداخل مع أجزاء ديناميكية متعددة.
+
+---
+
+#### استبدال `fallback`
+
+في دليل `pages`، تُستخدم الخاصية `fallback` التي تُرجعها `getStaticPaths` لتحديد سلوك الصفحة التي لم يتم تقديمها مسبقًا أثناء وقت البناء. يمكن تعيين هذه الخاصية إلى `true` لعرض صفحة احتياطية أثناء إنشاء الصفحة، أو `false` لعرض صفحة 404، أو `blocking` لإنشاء الصفحة عند وقت الطلب.
+
+```jsx filename="pages/posts/[id].js"
+// دليل `pages`
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking'
+  };
+}
+
+export async function getStaticProps({ params }) {
+  ...
+}
+
+export default function Post({ post }) {
+  return ...
+}
+```
+
+في دليل `app`، تتحكم خاصية [`config.dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) في كيفية التعامل مع المعلمات خارج [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params):
+
+- **`true`**: (الافتراضي) يتم إنشاء الأجزاء الديناميكية غير المضمنة في `generateStaticParams` عند الطلب.
+- **`false`**: ستعيد الأجزاء الديناميكية غير المضمنة في `generateStaticParams` خطأ 404.
+
+هذا يحل محل خيار `fallback: true | false | 'blocking'` لـ `getStaticPaths` في دليل `pages`. لا يتم تضمين خيار `fallback: 'blocking'` في `dynamicParams` لأن الفرق بين `'blocking'` و `true` ضئيل مع البث (streaming).
+
+```jsx filename="app/posts/[id]/page.js"
+// دليل `app`
+
+export const dynamicParams = true;
+
+export async function generateStaticParams() {
+  return [...]
+}
+
+async function getPost(params) {
+  ...
+}
+
+export default async function Post({ params }) {
+  const post = await getPost(params);
+
+  return ...
+}
+```
+
+عند تعيين [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) إلى `true` (الافتراضي)، عند طلب جزء مسار لم يتم إنشاؤه، سيتم عرضه من جانب الخادم (server-rendered) وتخزينه مؤقتًا.
+
+#### التجديد الثابت التدريجي (`getStaticProps` مع `revalidate`)
+
+في دليل `pages`، تسمح لك الدالة `getStaticProps` بإضافة حقل `revalidate` لإعادة إنشاء الصفحة تلقائيًا بعد فترة زمنية معينة.
+
+```jsx filename="pages/index.js"
+// دليل `pages`
+
+export async function getStaticProps() {
+  const res = await fetch(`https://.../posts`)
+  const posts = await res.json()
+
+  return {
+    props: { posts },
+    revalidate: 60,
+  }
+}
+
+export default function Index({ posts }) {
+  return (
+    <Layout>
+      <PostList posts={posts} />
+    </Layout>
+  )
+}
+```
+
+في دليل `app`، يمكن لجلب البيانات باستخدام [`fetch()`](/docs/app/api-reference/functions/fetch) استخدام `revalidate`، والتي ستخزن الطلب مؤقتًا للعدد المحدد من الثواني.
+
+```jsx filename="app/page.js"
+// دليل `app`
+
+async function getPosts() {
+  const res = await fetch(`https://.../posts`, { next: { revalidate: 60 } })
+  const data = await res.json()
+
+  return data.posts
+}
+
+export default async function PostList() {
+  const posts = await getPosts()
+
+  return posts.map((post) => <div>{post.name}</div>)
+}
+```
+
+#### مسارات API
+
+تستمر مسارات API في العمل في دليل `pages/api` دون أي تغييرات. ومع ذلك، تم استبدالها بـ [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) في دليل `app`.
+
+تسمح لك معالجات المسار بإنشاء معالجات طلب مخصصة لمسار معين باستخدام واجهات برمجة تطبيقات الويب [Request](https://developer.mozilla.org/docs/Web/API/Request) و [Response](https://developer.mozilla.org/docs/Web/API/Response).
+
+```ts filename="app/api/route.ts" switcher
+export async function GET(request: Request) {}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {}
+```
+
+> **معلومة جيدة**: إذا كنت تستخدم مسارات API سابقًا لاستدعاء API خارجي من العميل، يمكنك الآن استخدام [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) بدلاً من ذلك لجلب البيانات بأمان. تعلم المزيد حول [جلب البيانات](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating).
+
+### الخطوة 7: التنسيق
+
+في دليل `pages`، كانت أوراق الأنماط العالمية مقصورة على `pages/_app.js` فقط. مع دليل `app`، تم رفع هذا القيد. يمكن إضافة الأنماط العالمية إلى أي تخطيط أو صفحة أو مكون.
+
+- [وحدات CSS](/docs/app/building-your-application/styling/css-modules)
+- [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css)
+- [الأنماط العالمية](/docs/app/building-your-application/styling/css-modules#global-styles)
+- [CSS-in-JS](/docs/app/building-your-application/styling/css-in-js)
+- [أوراق الأنماط الخارجية](/docs/app/building-your-application/styling/css-modules#external-stylesheets)
+- [Sass](/docs/app/building-your-application/styling/sass)
+
+#### Tailwind CSS
+
+إذا كنت تستخدم Tailwind CSS، فستحتاج إلى إضافة دليل `app` إلى ملف `tailwind.config.js` الخاص بك:
+
+```js filename="tailwind.config.js"
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}', // <-- أضف هذا السطر
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+}
+```
+
+ستحتاج أيضًا إلى استيراد أنماطك العالمية في ملف `app/layout.js` الخاص بك:
+
+```jsx filename="app/layout.js"
+import '../styles/globals.css'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+تعلم المزيد حول [التنسيق باستخدام Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css)
+
+## Codemods
+
+يوفر Next.js تحويلات Codemod لمساعدتك في ترقية قاعدة التعليمات البرمجية الخاصة بك عند إهمال ميزة ما. راجع [Codemods](/docs/app/building-your-application/upgrading/codemods) لمزيد من المعلومات.
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/index.mdx
new file mode 100644
index 00000000..f623352b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/09-upgrading/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:39.773Z
+title: دليل الترقية
+nav_title: الترقية
+description: تعلم كيفية الترقية إلى أحدث إصدارات إطار العمل Next.js.
+---
+
+قم بترقية تطبيقك إلى إصدارات أحدث من Next.js أو قم بالهجرة من موجه الصفحات (Pages Router) إلى موجه التطبيقات (App Router).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/01-building-your-application/index.mdx b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/index.mdx
new file mode 100644
index 00000000..773cba46
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/01-building-your-application/index.mdx
@@ -0,0 +1,24 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:46.884Z
+title: بناء تطبيقك
+description: تعلم كيفية استخدام ميزات Next.js لبناء تطبيقك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app) وموجه الصفحات (pages). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+يوفر Next.js اللبنات الأساسية لإنشاء تطبيقات ويب كاملة المرونة ومتكاملة. توضح أدلة **بناء تطبيقك** كيفية استخدام هذه الميزات وكيفية تخصيص سلوك تطبيقك.
+
+تم تنظيم الأقسام والصفحات بالتسلسل، من الأساسي إلى المتقدم، حتى تتمكن من متابعتها خطوة بخطوة عند بناء تطبيق Next.js الخاص بك. ومع ذلك، يمكنك قراءتها بأي ترتيب أو التخطي إلى الصفحات التي تنطبق على حالتك الاستخدامية.
+
+<AppOnly>
+
+إذا كنت جديدًا على Next.js، نوصي بالبدء بأقسام [التوجيه (Routing)](/docs/app/building-your-application/routing)، [التصيير (Rendering)](/docs/app/building-your-application/rendering)، [جلب البيانات (Data Fetching)](/docs/app/building-your-application/data-fetching) و[التنسيق (Styling)](/docs/app/building-your-application/styling)، حيث تقدم المفاهيم الأساسية لـ Next.js والويب لمساعدتك على البدء. ثم يمكنك التعمق أكثر في الأقسام الأخرى مثل [التحسين (Optimizing)](/docs/app/building-your-application/optimizing) و[التكوين (Configuring)](/docs/app/building-your-application/configuring). أخيرًا، عندما تكون مستعدًا، تحقق من أقسام [النشر (Deploying)](/docs/app/building-your-application/deploying) و[الترقية (Upgrading)](/docs/app/building-your-application/upgrading).
+
+</AppOnly>
+
+<PagesOnly>
+
+إذا كنت جديدًا على Next.js، نوصي بالبدء بأقسام [التوجيه (Routing)](/docs/pages/building-your-application/routing)، [التصيير (Rendering)](/docs/pages/building-your-application/rendering)، [جلب البيانات (Data Fetching)](/docs/pages/building-your-application/data-fetching) و[التنسيق (Styling)](/docs/pages/building-your-application/styling)، حيث تقدم المفاهيم الأساسية لـ Next.js والويب لمساعدتك على البدء. ثم يمكنك التعمق أكثر في الأقسام الأخرى مثل [التحسين (Optimizing)](/docs/pages/building-your-application/optimizing) و[التكوين (Configuring)](/docs/pages/building-your-application/configuring). أخيرًا، عندما تكون مستعدًا، تحقق من أقسام [النشر (Deploying)](/docs/pages/building-your-application/deploying) و[الترقية (Upgrading)](/docs/pages/building-your-application/upgrading).
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/font.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/font.mdx
new file mode 100644
index 00000000..24a1b602
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/font.mdx
@@ -0,0 +1,356 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:03:33.756Z
+title: وحدة الخطوط
+nav_title: الخطوط
+description: تحسين تحميل خطوط الويب باستخدام محملي `next/font` المدمجين.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجّه التطبيق وموجّه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجّه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+سيساعدك مرجع API هذا على فهم كيفية استخدام [`next/font/google`](/docs/app/building-your-application/optimizing/fonts#google-fonts) و [`next/font/local`](/docs/app/building-your-application/optimizing/fonts#local-fonts). لميزات الاستخدام، يرجى زيارة صفحة [تحسين الخطوط](/docs/app/building-your-application/optimizing/fonts).
+
+### وسائط دالة الخط
+
+للاستخدام، راجع [خطوط جوجل](/docs/app/building-your-application/optimizing/fonts#google-fonts) و [الخطوط المحلية](/docs/app/building-your-application/optimizing/fonts#local-fonts).
+
+| المفتاح                                         | `font/google`       | `font/local`        | النوع                       | مطلوب          |
+| ------------------------------------------- | ------------------- | ------------------- | -------------------------- | ----------------- |
+| [`src`](#src)                               | <Cross size={18} /> | <Check size={18} /> | سلسلة أو مصفوفة من الكائنات | نعم               |
+| [`weight`](#weight)                         | <Check size={18} /> | <Check size={18} /> | سلسلة أو مصفوفة            | مطلوب/اختياري |
+| [`style`](#style)                           | <Check size={18} /> | <Check size={18} /> | سلسلة أو مصفوفة            | -                 |
+| [`subsets`](#subsets)                       | <Check size={18} /> | <Cross size={18} /> | مصفوفة من السلاسل           | -                 |
+| [`axes`](#axes)                             | <Check size={18} /> | <Cross size={18} /> | مصفوفة من السلاسل           | -                 |
+| [`display`](#display)                       | <Check size={18} /> | <Check size={18} /> | سلسلة                     | -                 |
+| [`preload`](#preload)                       | <Check size={18} /> | <Check size={18} /> | قيمة منطقية                    | -                 |
+| [`fallback`](#fallback)                     | <Check size={18} /> | <Check size={18} /> | مصفوفة من السلاسل           | -                 |
+| [`adjustFontFallback`](#adjustfontfallback) | <Check size={18} /> | <Check size={18} /> | قيمة منطقية أو سلسلة          | -                 |
+| [`variable`](#variable)                     | <Check size={18} /> | <Check size={18} /> | سلسلة                     | -                 |
+| [`declarations`](#declarations)             | <Cross size={18} /> | <Check size={18} /> | مصفوفة من الكائنات           | -                 |
+
+### `src`
+
+مسار ملف الخط كسلسلة أو مصفوفة من الكائنات (من نوع `Array<{path: string, weight?: string, style?: string}>`) بالنسبة إلى الدليل الذي يتم فيه استدعاء دالة محمل الخط.
+
+يستخدم في `next/font/local`
+
+- مطلوب
+
+أمثلة:
+
+- `src:'./fonts/my-font.woff2'` حيث يتم وضع `my-font.woff2` في دليل باسم `fonts` داخل دليل `app`
+- `src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]`
+- إذا تم استدعاء دالة محمل الخط في `app/page.tsx` باستخدام `src:'../styles/fonts/my-font.ttf'`، فإن `my-font.ttf` يوضع في `styles/fonts` في جذر المشروع
+
+### `weight`
+
+[`وزن`](https://fonts.google.com/knowledge/glossary/weight) الخط مع الاحتمالات التالية:
+
+- سلسلة بقيم محتملة للأوزان المتاحة للخط المحدد أو نطاق من القيم إذا كان خطًا [متغيرًا](https://fonts.google.com/variablefonts)
+- مصفوفة من قيم الوزن إذا لم يكن الخط [خط جوجل متغير](https://fonts.google.com/variablefonts). ينطبق على `next/font/google` فقط.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- مطلوب إذا كان الخط المستخدم **ليس** [متغيرًا](https://fonts.google.com/variablefonts)
+
+أمثلة:
+
+- `weight: '400'`: سلسلة لقيمة وزن واحدة - للخط [`Inter`](https://fonts.google.com/specimen/Inter?query=inter)، القيم المحتملة هي `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'` أو `'variable'` حيث `'variable'` هي القيمة الافتراضية)
+- `weight: '100 900'`: سلسلة للنطاق بين `100` و `900` لخط متغير
+- `weight: ['100','400','900']`: مصفوفة من 3 قيم محتملة لخط غير متغير
+
+### `style`
+
+[`نمط`](https://developer.mozilla.org/docs/Web/CSS/font-style) الخط مع الاحتمالات التالية:
+
+- سلسلة [قيمة](https://developer.mozilla.org/docs/Web/CSS/font-style#values) بقيمة افتراضية `'normal'`
+- مصفوفة من قيم النمط إذا لم يكن الخط [خط جوجل متغير](https://fonts.google.com/variablefonts). ينطبق على `next/font/google` فقط.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `style: 'italic'`: سلسلة - يمكن أن تكون `normal` أو `italic` لـ `next/font/google`
+- `style: 'oblique'`: سلسلة - يمكن أن تأخذ أي قيمة لـ `next/font/local` ولكن من المتوقع أن تأتي من [أنماط الخطوط القياسية](https://developer.mozilla.org/docs/Web/CSS/font-style)
+- `style: ['italic','normal']`: مصفوفة من قيمتين لـ `next/font/google` - القيم من `normal` و `italic`
+
+### `subsets`
+
+[`مجموعات فرعية`](https://fonts.google.com/knowledge/glossary/subsetting) الخط المحددة بمصفوفة من قيم السلسلة بأسماء كل مجموعة فرعية تريد [تحميلها مسبقًا](/docs/app/building-your-application/optimizing/fonts#specifying-a-subset). سيتم حقق علامة تحميل مسبق للرابط في الرأس عند تعيين خيار [`preload`](#preload) على `true`، وهو الإعداد الافتراضي.
+
+يستخدم في `next/font/google`
+
+- اختياري
+
+أمثلة:
+
+- `subsets: ['latin']`: مصفوفة بمجموعة فرعية `latin`
+
+يمكنك العثور على قائمة بجميع المجموعات الفرعية في صفحة خطوط جوجل للخط الخاص بك.
+
+### `axes`
+
+بعض الخطوط المتغيرة تحتوي على محاور إضافية `axes` يمكن تضمينها. افتراضيًا، يتم تضمين وزن الخط فقط للحفاظ على حجم الملف. تعتمد القيم المحتملة لـ `axes` على الخط المحدد.
+
+يستخدم في `next/font/google`
+
+- اختياري
+
+أمثلة:
+
+- `axes: ['slnt']`: مصفوفة بقيمة `slnt` للخط المتغير `Inter` الذي يحتوي على `slnt` كمحاور إضافية كما هو موضح [هنا](https://fonts.google.com/variablefonts?vfquery=inter#font-families). يمكنك العثور على قيم `axes` المحتملة للخط الخاص بك باستخدام الفلتر في [صفحة خطوط جوجل المتغيرة](https://fonts.google.com/variablefonts#font-families) والبحث عن محاور غير `wght`
+
+### `display`
+
+[`عرض`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) الخط بقيم سلسلة محتملة [قيم](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#values) `'auto'`, `'block'`, `'swap'`, `'fallback'` أو `'optional'` بقيمة افتراضية `'swap'`.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `display: 'optional'`: سلسلة معينة لقيمة `optional`
+
+### `preload`
+
+قيمة منطقية تحدد ما إذا كان يجب [تحميل الخط مسبقًا](/docs/app/building-your-application/optimizing/fonts#preloading) أم لا. الافتراضي هو `true`.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `preload: false`
+
+### `fallback`
+
+الخط الاحتياطي لاستخدامه إذا تعذر تحميل الخط. مصفوفة من السلاسل للخطوط الاحتياطية بدون قيمة افتراضية.
+
+- اختياري
+
+يستخدم في `next/font/google` و `next/font/local`
+
+أمثلة:
+
+- `fallback: ['system-ui', 'arial']`: مصفوفة تعيين الخطوط الاحتياطية إلى `system-ui` أو `arial`
+
+### `adjustFontFallback`
+
+- لـ `next/font/google`: قيمة منطقية تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل [تحول التخطيط التراكمي](https://web.dev/cls/). الافتراضي هو `true`.
+- لـ `next/font/local`: سلسلة أو قيمة منطقية `false` تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل [تحول التخطيط التراكمي](https://web.dev/cls/). القيم المحتملة هي `'Arial'`, `'Times New Roman'` أو `false`. الافتراضي هو `'Arial'`.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `adjustFontFallback: false`: لـ `next/font/google`
+- `adjustFontFallback: 'Times New Roman'`: لـ `next/font/local`
+
+### `variable`
+
+قيمة سلسلة لتحديد اسم متغير CSS لاستخدامه إذا تم تطبيق النمط باستخدام [طريقة متغير CSS](#css-variables).
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `variable: '--my-font'`: يتم تعريف متغير CSS `--my-font`
+
+### `declarations`
+
+مصفوفة من أزواج مفتاح-قيمة لـ [واصف](https://developer.mozilla.org/docs/Web/CSS/@font-face#descriptors) وجه الخط التي تحدد `@font-face` المُنشأ بشكل أكبر.
+
+يستخدم في `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `declarations: [{ prop: 'ascent-override', value: '90%' }]`
+
+## تطبيق الأنماط
+
+يمكنك تطبيق أنماط الخط بثلاث طرق:
+
+- [`className`](#classname)
+- [`style`](#style-1)
+- [متغيرات CSS](#css-variables)
+
+### `className`
+
+تُرجع `className` CSS للقراءة فقط للخط المحمل لتمريرها إلى عنصر HTML.
+
+```tsx
+<p className={inter.className}>Hello, Next.js!</p>
+```
+
+### `style`
+
+تُرجع كائن `style` CSS للقراءة فقط للخط المحمل لتمريرها إلى عنصر HTML، بما في ذلك `style.fontFamily` للوصول إلى اسم عائلة الخط والخطوط الاحتياطية.
+
+```tsx
+<p style={inter.style}>Hello World</p>
+```
+
+### متغيرات CSS
+
+إذا كنت ترغب في تعيين أنماطك في ورقة أنماط خارجية وتحديد خيارات إضافية هناك، استخدم طريقة متغير CSS.
+
+بالإضافة إلى استيراد الخط، استورد أيضًا ملف CSS حيث يتم تعريف متغير CSS وقم بتعيين خيار متغير لكائن محمل الخط كما يلي:
+
+```tsx filename="app/page.tsx" switcher
+import { Inter } from 'next/font/google'
+import styles from '../styles/component.module.css'
+
+const inter = Inter({
+  variable: '--font-inter',
+})
+```
+
+```jsx filename="app/page.js" switcher
+import { Inter } from 'next/font/google'
+import styles from '../styles/component.module.css'
+
+const inter = Inter({
+  variable: '--font-inter',
+})
+```
+
+لاستخدام الخط، قم بتعيين `className` للحاوية الأصلية للنص الذي تريد تنسيقه إلى قيمة `variable` لمحمل الخط و `className` للنص إلى خاصية `styles` من ملف CSS الخارجي.
+
+```tsx filename="app/page.tsx" switcher
+<main className={inter.variable}>
+  <p className={styles.text}>Hello World</p>
+</main>
+```
+
+```jsx filename="app/page.js" switcher
+<main className={inter.variable}>
+  <p className={styles.text}>Hello World</p>
+</main>
+```
+
+حدد فئة المحدد `text` في ملف CSS `component.module.css` كما يلي:
+
+```css filename="styles/component.module.css"
+.text {
+  font-family: var(--font-inter);
+  font-weight: 200;
+  font-style: italic;
+}
+```
+
+في المثال أعلاه، يتم تنسيق النص `Hello World` باستخدام خط `Inter` والخط الاحتياطي المُنشأ مع `font-weight: 200` و `font-style: italic`.
+
+## استخدام ملف تعريف الخطوط
+
+في كل مرة تستدعي فيها دالة `localFont` أو خط جوجل، سيتم استضافة هذا الخط كنسخة واحدة في تطبيقك. لذلك، إذا كنت بحاجة إلى استخدام نفس الخط في أماكن متعددة، يجب تحميله في مكان واحد واستيراد كائن الخط ذي الصلة حيث تحتاجه. يتم ذلك باستخدام ملف تعريف الخطوط.
+
+على سبيل المثال، أنشئ ملف `fonts.ts` في مجلد `styles` في جذر دليل تطبيقك.
+
+ثم، حدد تعريفات الخطوط الخاصة بك كما يلي:
+
+```ts filename="styles/fonts.ts" switcher
+import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
+import localFont from 'next/font/local'
+
+// تعريف الخطوط المتغيرة
+const inter = Inter()
+const lora = Lora()
+// تعريف وزنين لخط غير متغير
+const sourceCodePro400 = Source_Sans_3({ weight: '400' })
+const sourceCodePro700 = Source_Sans_3({ weight: '700' })
+// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد الأنماط
+const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })
+
+export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }
+```
+
+```js filename="styles/fonts.js" switcher
+import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
+import localFont from 'next/font/local'
+
+// تعريف الخطوط المتغيرة
+const inter = Inter()
+const lora = Lora()
+// تعريف وزنين لخط غير متغير
+const sourceCodePro400 = Source_Sans_3({ weight: '400' })
+const sourceCodePro700 = Source_Sans_3({ weight: '700' })
+// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد الأنماط
+const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })
+
+export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }
+```
+
+يمكنك الآن استخدام هذه التعريفات في الكود الخاص بك كما يلي:
+
+```tsx filename="app/page.tsx" switcher
+import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'
+
+export default function Page() {
+  return (
+    <div>
+      <p className={inter.className}>Hello world using Inter font</p>
+      <p style={lora.style}>Hello world using Lora font</p>
+      <p className={sourceCodePro700.className}>
+        Hello world using Source_Sans_3 font with weight 700
+      </p>
+      <p className={greatVibes.className}>My title in Great Vibes font</p>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'
+
+export default function Page() {
+  return (
+    <div>
+      <p className={inter.className}>Hello world using Inter font</p>
+      <p style={lora.style}>Hello world using Lora font</p>
+      <p className={sourceCodePro700.className}>
+        Hello world using Source_Sans_3 font with weight 700
+      </p>
+      <p className={greatVibes.className}>My title in Great Vibes font</p>
+    </div>
+  )
+}
+```
+
+لتسهيل الوصول إلى تعريفات الخطوط في الكود الخاص بك، يمكنك تعريف اسم مسار في ملفات `tsconfig.json` أو `jsconfig.json` كما يلي:
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      "@/fonts": ["./styles/fonts"]
+    }
+  }
+}
+```
+
+يمكنك الآن استيراد أي تعريف خط كما يلي:
+
+```tsx filename="app/about/page.tsx" switcher
+import { greatVibes, sourceCodePro400 } from '@/fonts'
+```
+
+```jsx filename="app/about/page.js" switcher
+import { greatVibes, sourceCodePro400 } from '@/fonts'
+```
+
+## تغييرات الإصدار
+
+| الإصدار   | التغييرات                                                               |
+| --------- | --------------------------------------------------------------------- |
+| `v13.2.0` | تمت إعادة تسمية `@next/font` إلى `next/font`. لم يعد التثبيت مطلوبًا. |
+| `v13.0.0` | تمت إضافة `@next/font`.                                               |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/image.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/image.mdx
new file mode 100644
index 00000000..39f2a016
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/image.mdx
@@ -0,0 +1,815 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:07:11.734Z
+title: <Image>
+description: تحسين الصور في تطبيق Next.js الخاص بك باستخدام مكون `next/image` المدمج.
+---
+
+{/* المحتوى مشترك بين تطبيقات وموجهات الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مكون الصورة](https://github.com/vercel/next.js/tree/canary/examples/image-component)
+
+</details>
+
+<PagesOnly>
+
+> **معلومة مفيدة**: إذا كنت تستخدم إصدارًا من Next.js قبل الإصدار 13، فستحتاج إلى استخدام وثائق [next/legacy/image](/docs/pages/api-reference/components/image-legacy) حيث تم تغيير اسم المكون.
+
+</PagesOnly>
+
+سيساعدك مرجع API هذا على فهم كيفية استخدام [الخصائص (props)](#props) وخيارات [التكوين](#configuration-options) المتاحة لمكون الصورة. لميزات الاستخدام، يرجى زيارة صفحة [مكون الصورة](/docs/app/building-your-application/optimizing/images).
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <Image
+      src="/profile.png"
+      width={500}
+      height={500}
+      alt="صورة المؤلف"
+    />
+  )
+}
+```
+
+## الخصائص (Props)
+
+فيما يلي ملخص للخصائص المتاحة لمكون الصورة:
+
+<div style={{ overflowX: 'auto', width: '100%' }}>
+| الخاصية                                      | مثال                              | النوع            | مطلوب |
+| ----------------------------------------- | ------------------------------------ | --------------- | -------- |
+| [`src`](#src)                             | `src="/profile.png"`                 | سلسلة نصية          | نعم      |
+| [`width`](#width)                         | `width={500}`                        | عدد صحيح (بكسل)    | نعم      |
+| [`height`](#height)                       | `height={500}`                       | عدد صحيح (بكسل)    | نعم      |
+| [`alt`](#alt)                             | `alt="صورة المؤلف"`        | سلسلة نصية          | نعم      |
+| [`loader`](#loader)                       | `loader={imageLoader}`               | دالة        | -        |
+| [`fill`](#fill)                           | `fill={true}`                        | قيمة منطقية         | -        |
+| [`sizes`](#sizes)                         | `sizes="(max-width: 768px) 100vw"`   | سلسلة نصية          | -        |
+| [`quality`](#quality)                     | `quality={80}`                       | عدد صحيح (1-100) | -        |
+| [`priority`](#priority)                   | `priority={true}`                    | قيمة منطقية         | -        |
+| [`placeholder`](#placeholder)             | `placeholder="blur"`                 | سلسلة نصية          | -        |
+| [`style`](#style)                         | `style={{objectFit: "contain"}}`     | كائن          | -        |
+| [`onLoadingComplete`](#onloadingcomplete) | `onLoadingComplete={img => done())}` | دالة        | -        |
+| [`onLoad`](#onload)                       | `onLoad={event => done())}`          | دالة        | -        |
+| [`onError`](#onerror)                     | `onError(event => fail()}`           | دالة        | -        |
+| [`loading`](#loading)                     | `loading="lazy"`                     | سلسلة نصية          | -        |
+| [`blurDataURL`](#blurdataurl)             | `blurDataURL="data:image/jpeg..."`   | سلسلة نصية          | -        |
+</div>
+
+## الخصائص المطلوبة
+
+يتطلب مكون الصورة الخصائص التالية: `src`، `width`، `height`، و `alt`.
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <Image
+        src="/profile.png"
+        width={500}
+        height={500}
+        alt="صورة المؤلف"
+      />
+    </div>
+  )
+}
+```
+
+### `src`
+
+يجب أن يكون أحد الخيارات التالية:
+
+- ملف صورة [مستورد بشكل ثابت](/docs/app/building-your-application/optimizing/images#local-images)
+- مسار نصي. يمكن أن يكون هذا عنوان URL خارجي مطلق، أو مسار داخلي اعتمادًا على خاصية [المحمل (loader)](#loader).
+
+عند استخدام عنوان URL خارجي، يجب إضافته إلى [remotePatterns](#remotepatterns) في ملف `next.config.js`.
+
+### `width`
+
+تمثل خاصية `width` العرض _المعروض_ بالبكسل، لذا ستؤثر على حجم الصورة الظاهر.
+
+مطلوبة، باستثناء الصور [المستوردة بشكل ثابت](/docs/app/building-your-application/optimizing/images#local-images) أو الصور ذات خاصية [`fill`](#fill).
+
+### `height`
+
+تمثل خاصية `height` الارتفاع _المعروض_ بالبكسل، لذا ستؤثر على حجم الصورة الظاهر.
+
+مطلوبة، باستثناء الصور [المستوردة بشكل ثابت](/docs/app/building-your-application/optimizing/images#local-images) أو الصور ذات خاصية [`fill`](#fill).
+
+### `alt`
+
+تستخدم خاصية `alt` لوصف الصورة لبرامج قراءة الشاشة ومحركات البحث. وهي أيضًا النص الاحتياطي إذا تم تعطيل الصور أو حدث خطأ أثناء تحميل الصورة.
+
+يجب أن يحتوي على نص يمكن أن يحل محل الصورة [دون تغيير معنى الصفحة](https://html.spec.whatwg.org/multipage/images.html#general-guidelines). ليس المقصود منه استكمال الصورة ولا يجب أن يكرر المعلومات المقدمة بالفعل في التسميات التوضيحية أعلى أو أسفل الصورة.
+
+إذا كانت الصورة [زخرفية بحتة](https://html.spec.whatwg.org/multipage/images.html#a-purely-decorative-image-that-doesn't-add-any-information) أو [غير مخصصة للمستخدم](https://html.spec.whatwg.org/multipage/images.html#an-image-not-intended-for-the-user)، فيجب أن تكون خاصية `alt` سلسلة نصية فارغة (`alt=""`).
+
+[تعلم المزيد](https://html.spec.whatwg.org/multipage/images.html#alt)
+
+## الخصائص الاختيارية
+
+يقبل مكون `<Image />` عددًا من الخصائص الإضافية بخلاف تلك المطلوبة. يصف هذا القسم الخصائص الأكثر استخدامًا لمكون الصورة. يمكن العثور على تفاصيل حول الخصائص الأقل استخدامًا في قسم [الخصائص المتقدمة](#advanced-props).
+
+### `loader`
+
+دالة مخصصة تستخدم لحل عناوين URL للصور.
+
+`loader` هي دالة تُرجع سلسلة نصية لعنوان URL للصورة، مع الأخذ في الاعتبار المعلمات التالية:
+
+- [`src`](#src)
+- [`width`](#width)
+- [`quality`](#quality)
+
+فيما يلي مثال لاستخدام محمل مخصص:
+
+```js
+'use client'
+
+import Image from 'next/image'
+
+const imageLoader = ({ src, width, quality }) => {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+
+export default function Page() {
+  return (
+    <Image
+      loader={imageLoader}
+      src="me.png"
+      alt="صورة المؤلف"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+<AppOnly>
+
+> **معلومة مفيدة**: استخدام خصائص مثل `loader`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة.
+
+</AppOnly>
+
+بدلاً من ذلك، يمكنك استخدام تكوين [loaderFile](#loaderfile) في ملف `next.config.js` لتكوين كل مثيل لـ `next/image` في تطبيقك، دون تمرير خاصية.
+
+### `fill`
+
+```js
+fill={true} // {true} | {false}
+```
+
+قيمة منطقية تجعل الصورة تملأ العنصر الأصل، وهو مفيد عندما يكون [`width`](#width) و [`height`](#height) غير معروفين.
+
+يجب أن يخصص العنصر الأصل نمط `position: "relative"` أو `position: "fixed"` أو `position: "absolute"`.
+
+بشكل افتراضي، سيتم تخصيص نمط `position: "absolute"` لعنصر img تلقائيًا.
+
+إذا لم يتم تطبيق أي أنماط على الصورة، فستتمدد الصورة لملء الحاوية. قد تفضل تعيين `object-fit: "contain"` للصورة التي يتم ضبطها لملء الحاوية مع الحفاظ على نسبة العرض إلى الارتفاع.
+
+بدلاً من ذلك، سيؤدي `object-fit: "cover"` إلى ملء الصورة للحاوية بالكامل واقتصاصها للحفاظ على نسبة العرض إلى الارتفاع. لكي يبدو هذا صحيحًا، يجب تعيين نمط `overflow: "hidden"` للعنصر الأصل.
+
+لمزيد من المعلومات، انظر أيضًا:
+
+- [`position`](https://developer.mozilla.org/docs/Web/CSS/position)
+- [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit)
+- [`object-position`](https://developer.mozilla.org/docs/Web/CSS/object-position)
+
+### `sizes`
+
+سلسلة نصية، تشبه استعلام الوسائط، توفر معلومات حول عرض الصورة عند نقاط التوقف المختلفة. ستؤثر قيمة `sizes` بشكل كبير على أداء الصور التي تستخدم [`fill`](#fill) أو التي [تم تصميمها بحجم متجاوب](#responsive-images).
+
+تخدم خاصية `sizes` غرضين مهمين متعلقين بأداء الصورة:
+
+- أولاً، تستخدم المتصفحات قيمة `sizes` لتحديد حجم الصورة الذي يجب تنزيله، من `srcset` الذي تم إنشاؤه تلقائيًا بواسطة `next/image`. عندما يختار المتصفح، لا يعرف بعد حجم الصورة على الصفحة، لذا يختار صورة بنفس حجم أو أكبر من نافذة العرض. تتيح لك خاصية `sizes` إخبار المتصفح بأن الصورة ستكون في الواقع أصغر من عرض الشاشة بالكامل. إذا لم تحدد قيمة `sizes` في صورة ذات خاصية `fill`، فسيتم استخدام القيمة الافتراضية `100vw` (عرض الشاشة بالكامل).
+- ثانيًا، تغير خاصية `sizes` سلوك قيمة `srcset` التي تم إنشاؤها تلقائيًا. إذا لم تكن هناك قيمة `sizes` موجودة، يتم إنشاء `srcset` صغير مناسب لصورة بحجم ثابت (1x/2x/إلخ). إذا تم تعريف `sizes`، يتم إنشاء `srcset` كبير مناسب لصورة متجاوبة (640w/750w/إلخ). إذا كانت خاصية `sizes` تتضمن أحجامًا مثل `50vw`، التي تمثل نسبة مئوية من عرض نافذة العرض، فسيتم تقليم `srcset` لاستبعاد أي قيم صغيرة جدًا بحيث لا تكون ضرورية أبدًا.
+
+على سبيل المثال، إذا كنت تعلم أن تصميمك سيجعل الصورة بعرض كامل على الأجهزة المحمولة، وتخطيط من عمودين على الأجهزة اللوحية، وتخطيط من ثلاثة أعمدة على شاشات سطح المكتب، فيجب عليك تضمين خاصية sizes مثل التالي:
+
+```jsx
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div className="grid-element">
+      <Image
+        fill
+        src="/example.png"
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+      />
+    </div>
+  )
+}
+```
+
+يمكن أن يكون لهذا المثال من `sizes` تأثير كبير على مقاييس الأداء. بدون `sizes` بقيمة `33vw`، ستكون الصورة المختارة من الخادم أوسع بثلاث مرات مما يجب أن تكون. نظرًا لأن حجم الملف يتناسب مع مربع العرض، فبدون `sizes`، سيقوم المستخدم بتنزيل صورة أكبر بتسع مرات مما هو ضروري.
+
+تعلم المزيد عن `srcset` و `sizes`:
+
+- [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
+- [mdn](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes)
+
+### `quality`
+
+```js
+quality={75} // {number 1-100}
+```
+
+جودة الصورة المحسنة، عدد صحيح بين `1` و `100`، حيث `100` هي أفضل جودة وبالتالي أكبر حجم ملف. القيمة الافتراضية هي `75`.
+
+### `priority`
+
+```js
+priority={false} // {false} | {true}
+```
+
+عندما تكون القيمة `true`، ستعتبر الصورة ذات أولوية عالية وسيتم [تحميلها مسبقًا](https://web.dev/preload-responsive-images/). يتم تعطيل التحميل البطيء تلقائيًا للصور التي تستخدم `priority`.
+
+يجب استخدام خاصية `priority` على أي صورة تم اكتشافها كعنصر [أكبر محتوى مرئي (LCP)](https://nextjs.org/learn/seo/web-performance/lcp). قد يكون من المناسب وجود عدة صور ذات أولوية، حيث يمكن أن تكون صور مختلفة هي عنصر LCP لأحجام نافذة عرض مختلفة.
+
+يجب استخدامها فقط عندما تكون الصورة مرئية فوق الطية. القيمة الافتراضية هي `false`.
+
+### `placeholder`
+
+```js
+placeholder = 'empty' // "empty" | "blur" | "data:image/..."
+```
+
+عنصر نائب لاستخدامه أثناء تحميل الصورة. القيم الممكنة هي `blur`، `empty`، أو `data:image/...`. القيمة الافتراضية هي `empty`.
+
+عند `blur`، سيتم استخدام خاصية [`blurDataURL`](#blurdataurl) كعنصر نائب. إذا كان `src` كائنًا من [استيراد ثابت](/docs/app/building-your-application/optimizing/images#local-images) وكانت الصورة المستوردة بصيغة `.jpg`، أو `.png`، أو `.webp`، أو `.avif`، فسيتم ملء `blurDataURL` تلقائيًا، إلا إذا تم اكتشاف أن الصورة متحركة.
+
+للصور الديناميكية، يجب توفير خاصية [`blurDataURL`](#blurdataurl). يمكن أن تساعد حلول مثل [Plaiceholder](https://github.com/joe-bell/plaiceholder) في إنشاء `base64`.
+
+عند `data:image/...`، سيتم استخدام [عنوان URL للبيانات (Data URL)](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) كعنصر نائب أثناء تحميل الصورة.
+
+عند `empty`، لن يكون هناك عنصر نائب أثناء تحميل الصورة، فقط مساحة فارغة.
+
+جربها:
+
+- [عرض تجريبي لعنصر النائب `blur`](https://image-component.nextjs.gallery/placeholder)
+- [عرض تجريبي لتأثير الوميض مع خاصية `placeholder` لعنوان URL للبيانات](https://image-component.nextjs.gallery/shimmer)
+- [عرض تجريبي لتأثير اللون مع خاصية `blurDataURL`](https://image-component.nextjs.gallery/color)
+
+## الخصائص المتقدمة
+
+في بعض الحالات، قد تحتاج إلى استخدام أكثر تقدمًا. يقبل مكون `<Image />` الخصائص المتقدمة التالية اختياريًا.
+
+### `style`
+
+يسمح بتمرير أنماط CSS إلى عنصر الصورة الأساسي.
+
+```jsx filename="components/ProfileImage.js"
+const imageStyle = {
+  borderRadius: '50%',
+  border: '1px solid #fff',
+}
+
+export default function ProfileImage() {
+  return <Image src="..." style={imageStyle} />
+}
+```
+
+تذكر أن خصائص العرض والارتفاع المطلوبة يمكن أن تتفاعل مع التصميم الخاص بك. إذا استخدمت التصميم لتعديل عرض الصورة، فيجب أيضًا تصميم ارتفاعها على `auto` للحفاظ على نسبة العرض إلى الارتفاع الأصلية، وإلا سيتم تشويه الصورة.
+
+### `onLoadingComplete`
+
+```jsx
+'use client'
+
+<Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />
+```
+
+دالة رد اتصال يتم استدعاؤها بمجرد تحميل الصورة بالكامل وإزالة [العنصر النائب (placeholder)](#placeholder).
+
+سيتم استدعاء دالة الرد بوسيطة واحدة، وهي مرجع لعنصر `<img>` الأساسي.
+
+<AppOnly>
+
+> **معلومة مفيدة**: استخدام خصائص مثل `onLoadingComplete`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة.
+
+</AppOnly>
+
+### `onLoad`
+
+```jsx
+<Image onLoad={(e) => console.log(e.target.naturalWidth)} />
+```
+
+دالة رد اتصال يتم استدعاؤها عند تحميل الصورة.
+
+قد يحدث حدث التحميل قبل إزالة العنصر النائب للصورة وفك تشفير الصورة بالكامل. إذا كنت تريد الانتظار حتى يتم تحميل الصورة بالكامل، فاستخدم [`onLoadingComplete`](#onloadingcomplete) بدلاً من ذلك.
+
+<AppOnly>
+
+> **معلومة مفيدة**: استخدام خصائص مثل `onLoad`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة.
+
+</AppOnly>
+
+### `onError`
+
+```jsx
+<Image onError={(e) => console.error(e.target.id)} />
+```
+
+دالة رد اتصال يتم استدعاؤها إذا فشل تحميل الصورة.
+
+<AppOnly>
+
+> **معلومة مفيدة**: استخدام خصائص مثل `onError`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة.
+
+</AppOnly>
+
+### `loading`
+
+> **توصية**: هذه الخاصية مخصصة فقط لحالات الاستخدام المتقدمة. تحويل صورة للتحميل بـ `eager` عادةً ما **يضر بالأداء**. نوصي باستخدام خاصية [`priority`](#priority) بدلاً من ذلك، والتي ستحمل الصورة مسبقًا بفارغ الصبر.
+
+```js
+loading = 'lazy' // {lazy} | {eager}
+```
+
+سلوك تحميل الصورة. القيمة الافتراضية هي `lazy`.
+
+عند `lazy`، يتم تأجيل تحميل الصورة حتى تصل إلى مسافة محسوبة من نافذة العرض.
+
+عند `eager`، يتم تحميل الصورة على الفور.
+
+تعلم المزيد عن [خاصية `loading`](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-loading).
+
+### `blurDataURL`
+
+[رابط البيانات (Data URL)](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) ليتم استخدامه كصورة نائبة قبل تحميل صورة `src` بنجاح. يكون فعالاً فقط عند دمجه مع [`placeholder="blur"`](#placeholder).
+
+يجب أن تكون الصورة مشفرة بـ base64. سيتم تكبيرها وطمسها، لذا يُنصح باستخدام صورة صغيرة جدًا (10 بكسل أو أقل). قد يؤدي تضمين صور أكبر كعناصر نائبة إلى الإضرار بأداء تطبيقك.
+
+جربها:
+
+- [عرض خاصية `blurDataURL` الافتراضية](https://image-component.nextjs.gallery/placeholder)
+- [عرض تأثير اللون مع خاصية `blurDataURL`](https://image-component.nextjs.gallery/color)
+
+يمكنك أيضًا [إنشاء رابط بيانات بلون ثابت](https://png-pixel.com) لتتناسب مع الصورة.
+
+### `unoptimized`
+
+```js
+unoptimized = {false} // {false} | {true}
+```
+
+عندما يكون `true`، سيتم تقديم الصورة المصدر كما هي دون تغيير الجودة، الحجم، أو التنسيق. القيمة الافتراضية هي `false`.
+
+```js
+import Image from 'next/image'
+
+const UnoptimizedImage = (props) => {
+  return <Image {...props} unoptimized />
+}
+```
+
+بدءًا من Next.js 12.3.0، يمكن تعيين هذه الخاصية لجميع الصور عن طريق تحديث `next.config.js` بالإعداد التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    unoptimized: true,
+  },
+}
+```
+
+### الخصائص الأخرى
+
+سيتم تمرير الخصائص الأخرى في مكون `<Image />` إلى عنصر `img` الأساسي باستثناء ما يلي:
+
+- `srcSet`. استخدم [أحجام الجهاز (Device Sizes)](#devicesizes) بدلاً من ذلك.
+- `decoding`. تكون دائمًا `"async"`.
+
+## خيارات التكوين
+
+بالإضافة إلى الخصائص، يمكنك تكوين مكون الصورة في `next.config.js`. الخيارات المتاحة هي:
+
+### `remotePatterns`
+
+لحماية تطبيقك من المستخدمين الضارين، يلزم التكوين لاستخدام الصور الخارجية. هذا يضمن أن الصور الخارجية من حسابك فقط يمكن تقديمها من واجهة برمجة تطبيقات تحسين الصور في Next.js. يمكن تكوين هذه الصور الخارجية باستخدام خاصية `remotePatterns` في ملف `next.config.js`، كما هو موضح أدناه:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'example.com',
+        port: '',
+        pathname: '/account123/**',
+      },
+    ],
+  },
+}
+```
+
+> **معلومة جيدة**: المثال أعلاه يضمن أن خاصية `src` في `next/image` يجب أن تبدأ بـ `https://example.com/account123/`. أي بروتوكول آخر، أو اسم مضيف، أو منفذ، أو مسار غير متطابق سيؤدي إلى رد بـ 400 Bad Request.
+
+إليك مثال آخر لخاصية `remotePatterns` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.example.com',
+      },
+    ],
+  },
+}
+```
+
+> **معلومة جيدة**: المثال أعلاه يضمن أن خاصية `src` في `next/image` يجب أن تبدأ بـ `https://img1.example.com` أو `https://me.avatar.example.com` أو أي عدد من النطاقات الفرعية. أي بروتوكول آخر أو اسم مضيف غير متطابق سيؤدي إلى رد بـ 400 Bad Request.
+
+يمكن استخدام أنماط الأحرف البدلة (wildcard) لكل من `pathname` و `hostname` ولها الصيغة التالية:
+
+- `*` تطابق مقطع مسار واحد أو نطاق فرعي
+- `**` تطابق أي عدد من مقاطع المسار في النهاية أو النطاقات الفرعية في البداية
+
+لا تعمل صيغة `**` في منتصف النمط.
+
+### `domains`
+
+> **تحذير**: نوصي بتكوين [`remotePatterns`](#remotepatterns) بدقة بدلاً من `domains` لحماية تطبيقك من المستخدمين الضارين. استخدم `domains` فقط إذا كنت تملك كل المحتوى المقدم من النطاق.
+
+على غرار [`remotePatterns`](#remotepatterns)، يمكن استخدام تكوين `domains` لتوفير قائمة بأسماء المضيفين المسموح بها للصور الخارجية.
+
+ومع ذلك، لا يدعم تكوين `domains` مطابقة أنماط الأحرف البدلة ولا يمكنه تقييد البروتوكول، المنفذ، أو مسار الملف.
+
+إليك مثال لخاصية `domains` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    domains: ['assets.acme.com'],
+  },
+}
+```
+
+### `loaderFile`
+
+إذا كنت ترغب في استخدام موفر سحابي لتحسين الصور بدلاً من استخدام واجهة برمجة تطبيقات تحسين الصور المدمجة في Next.js، يمكنك تكوين `loaderFile` في `next.config.js` كما يلي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    loader: 'custom',
+    loaderFile: './my/image/loader.js',
+  },
+}
+```
+
+يجب أن يشير هذا إلى ملف نسبي إلى جذر تطبيق Next.js الخاص بك. يجب أن يصدر الملف دالة افتراضية تُرجع سلسلة نصية، على سبيل المثال:
+
+```js
+'use client'
+
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام [خاصية `loader`](#loader) لتكوين كل مثيل من `next/image`.
+
+أمثلة:
+
+- [تكوين محمل الصور المخصص](/docs/app/api-reference/next-config-js/images#example-loader-configuration)
+
+<AppOnly>
+
+> **معلومة جيدة**: يتطلب تخصيص ملف محمل الصور، الذي يقبل دالة، استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة إلى تنسيق قابل للتخزين.
+
+</AppOnly>
+
+## متقدم
+
+التكوين التالي مخصص لحالات الاستخدام المتقدمة وعادةً لا يكون ضروريًا. إذا اخترت تكوين الخصائص أدناه، فستتجاوز أي تغييرات على الإعدادات الافتراضية لـ Next.js في التحديثات المستقبلية.
+
+### `deviceSizes`
+
+إذا كنت تعرف عرض الأجهزة المتوقع لمستخدميك، يمكنك تحديد قائمة بنقاط التوقف لعرض الجهاز باستخدام خاصية `deviceSizes` في `next.config.js`. تُستخدم هذه الأبعاد عندما يستخدم مكون `next/image` خاصية [`sizes`](#sizes) لضمان تقديم الصورة الصحيحة لجهاز المستخدم.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  },
+}
+```
+
+### `imageSizes`
+
+يمكنك تحديد قائمة بعروض الصور باستخدام خاصية `images.imageSizes` في ملف `next.config.js` الخاص بك. يتم دمج هذه الأبعاد مع مصفوفة [أحجام الجهاز (deviceSizes)](#devicesizes) لتشكيل المصفوفة الكاملة للأحجام المستخدمة لإنشاء [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) للصور.
+
+السبب في وجود قائمتين منفصلتين هو أن `imageSizes` تُستخدم فقط للصور التي توفر خاصية [`sizes`](#sizes)، مما يشير إلى أن الصورة أصغر من العرض الكامل للشاشة. **لذلك، يجب أن تكون جميع الأحجام في `imageSizes` أصغر من أصغر حجم في `deviceSizes`.**
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+}
+```
+
+### `formats`
+
+ستكتشف [واجهة برمجة تطبيقات تحسين الصور (Image Optimization API)](#loader) الافتراضية تلقائيًا تنسيقات الصور المدعومة من المتصفح عبر رأس `Accept` للطلب.
+
+إذا كان رأس `Accept` يتطابق مع أكثر من تنسيق واحد من التنسيقات المكونة، يتم استخدام أول تطابق في المصفوفة. لذلك، ترتيب المصفوفة مهم. إذا لم يكن هناك تطابق (أو إذا كانت الصورة المصدر [متحركة (animated)](#animated-images))، ستعود واجهة برمجة تطبيقات تحسين الصور إلى تنسيق الصورة الأصلي.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/webp'],
+  },
+}
+```
+
+يمكنك تمكين دعم AVIF مع التكوين التالي.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+  },
+}
+```
+
+> **معلومة جيدة**:
+>
+> - عادةً ما يستغرق ترميز AVIF وقتًا أطول بنسبة 20٪ ولكنه يضغط بنسبة 20٪ أصغر مقارنة بـ WebP. هذا يعني أن المرة الأولى التي يتم فيها طلب الصورة، ستكون عادةً أبطأ ثم الطلبات اللاحقة التي يتم تخزينها مؤقتًا ستكون أسرع.
+> - إذا كنت تستضيف بنفسك مع وكيل/شبكة توصيل محتوى (Proxy/CDN) أمام Next.js، يجب تكوين الوكيل لإعادة توجيه رأس `Accept`.
+
+## سلوك التخزين المؤقت
+
+يصف ما يلي خوارزمية التخزين المؤقت لـ [المحمل (loader)](#loader) الافتراضي. بالنسبة لجميع المحملات الأخرى، يرجى الرجوع إلى وثائق موفر السحابة الخاص بك.
+
+يتم تحسين الصور ديناميكيًا عند الطلب وتخزينها في دليل `<distDir>/cache/images`. سيتم تقديم ملف الصورة المحسن للطلبات اللاحقة حتى يتم الوصول إلى تاريخ الانتهاء. عند إجراء طلب يتطابق مع ملف مخزن مؤقتًا ولكنه منتهي الصلاحية، يتم تقديم الصورة المنتهية الصلاحية على الفور. ثم يتم تحسين الصورة مرة أخرى في الخلفية (يُسمى أيضًا إعادة التحقق) وحفظها في ذاكرة التخزين المؤقت مع تاريخ انتهاء جديد.
+
+يمكن تحديد حالة التخزين المؤقت للصورة عن طريق قراءة قيمة رأس الاستجابة `x-nextjs-cache`. القيم الممكنة هي كما يلي:
+
+- `MISS` - المسار غير موجود في ذاكرة التخزين المؤقت (يحدث مرة واحدة على الأكثر، في الزيارة الأولى)
+- `STALE` - المسار موجود في ذاكرة التخزين المؤقت ولكنه تجاوز وقت إعادة التحقق لذلك سيتم تحديثه في الخلفية
+- `HIT` - المسار موجود في ذاكرة التخزين المؤقت ولم يتجاوز وقت إعادة التحقق
+
+يتم تعريف تاريخ الانتهاء (أو بالأحرى الحد الأقصى للعمر) إما عن طريق تكوين [`minimumCacheTTL`](#minimumcachettl) أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر. على وجه التحديد، يتم استخدام قيمة `max-age` لرأس `Cache-Control`. إذا تم العثور على كل من `s-maxage` و `max-age`، يتم تفضيل `s-maxage`. يتم أيضًا تمرير `max-age` إلى أي عملاء لاحقين بما في ذلك شبكات توصيل المحتوى (CDNs) والمتصفحات.
+
+- يمكنك تكوين [`minimumCacheTTL`](#minimumcachettl) لزيادة مدة التخزين المؤقت عندما لا يتضمن رأس `Cache-Control` للصورة الأصلية أو كانت القيمة منخفضة جدًا.
+- يمكنك تكوين [`deviceSizes`](#devicesizes) و [`imageSizes`](#imagesizes) لتقليل العدد الإجمالي للصور الممكن إنشاؤها.
+- يمكنك تكوين [formats](#formats) لتعطيل تنسيقات متعددة لصالح تنسيق صورة واحد.
+
+### `minimumCacheTTL`
+
+يمكنك تكوين وقت البقاء (TTL) بالثواني للصور المحسنة المخزنة مؤقتًا. في كثير من الحالات، من الأفضل استخدام [استيراد صورة ثابتة (Static Image Import)](/docs/app/building-your-application/optimizing/images#local-images) والتي ستقوم تلقائيًا بتجزئة محتويات الملف وتخزين الصورة مؤقتًا إلى الأبد مع رأس `Cache-Control` بقيمة `immutable`.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    minimumCacheTTL: 60,
+  },
+}
+```
+
+يتم تعريف تاريخ انتهاء الصورة المحسنة (أو بالأحرى الحد الأقصى للعمر) إما عن طريق `minimumCacheTTL` أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر.
+
+إذا كنت بحاجة إلى تغيير سلوك التخزين المؤقت لكل صورة، يمكنك تكوين [`headers`](/docs/app/api-reference/next-config-js/headers) لتعيين رأس `Cache-Control` على الصورة الأصلية (مثل `/some-asset.jpg`، وليس `/_next/image` نفسها).
+
+لا توجد آلية لإبطال ذاكرة التخزين المؤقت في هذا الوقت، لذا من الأفضل الحفاظ على `minimumCacheTTL` منخفضًا. وإلا قد تحتاج إلى تغيير خاصية [`src`](#src) يدويًا أو حذف `<distDir>/cache/images`.
+
+### `disableStaticImages`
+
+يسمح السلوك الافتراضي باستيراد الملفات الثابتة مثل `import icon from './icon.png'` ثم تمريرها إلى خاصية `src`.
+
+في بعض الحالات، قد ترغب في تعطيل هذه الميزة إذا كانت تتعارض مع الملحقات الأخرى التي تتوقع أن يكون الاستيراد مختلفًا.
+
+يمكنك تعطيل استيراد الصور الثابتة داخل `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
+### `dangerouslyAllowSVG`
+
+لا يقوم [المحمل (loader)](#loader) الافتراضي بتحسين صور SVG لعدة أسباب. أولاً، SVG هو تنسيق متجه مما يعني أنه يمكن تغيير حجمه دون فقدان الجودة. ثانيًا، يحتوي SVG على العديد من الميزات نفسها مثل HTML/CSS، مما قد يؤدي إلى ثغرات أمنية بدون [سياسة أمان محتوى (Content Security Policy)](/docs/app/building-your-application/configuring/content-security-policy) مناسبة.
+
+إذا كنت بحاجة إلى تقديم صور SVG باستخدام واجهة برمجة تطبيقات تحسين الصور الافتراضية، يمكنك تعيين `dangerouslyAllowSVG` داخل `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    dangerouslyAllowSVG: true,
+    contentDispositionType: 'attachment',
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
+}
+```
+
+بالإضافة إلى ذلك، يُوصى بشدة أيضًا بتعيين `contentDispositionType` لإجبار المتصفح على تنزيل الصورة، وكذلك `contentSecurityPolicy` لمنع تنفيذ البرامج النصية المضمنة في الصورة.
+
+## الصور المتحركة
+
+سيقوم [المحمل (loader)](#loader) الافتراضي تلقائيًا بتجاوز تحسين الصور للصور المتحركة وتقديم الصورة كما هي.
+
+الكشف التلقائي عن الملفات المتحركة هو أفضل جهد ويدعم GIF و APNG و WebP. إذا كنت ترغب في تجاوز تحسين الصور صراحةً لصورة متحركة معينة، استخدم خاصية [unoptimized](#unoptimized).
+
+## الصور المتجاوبة
+
+يحتوي `srcset` المُنشأ افتراضيًا على صور `1x` و `2x` لدعم نسب بكسل الجهاز المختلفة. ومع ذلك، قد ترغب في عرض صورة متجاوبة تتمدد مع نافذة العرض. في هذه الحالة، ستحتاج إلى تعيين [`sizes`](#sizes) بالإضافة إلى `style` (أو `className`).
+
+يمكنك عرض صورة متجاوبة باستخدام إحدى الطرق التالية.
+
+### صورة متجاوبة باستخدام استيراد ثابت
+
+إذا لم تكن الصورة المصدر ديناميكية، يمكنك استيرادها بشكل ثابت لإنشاء صورة متجاوبة:
+
+```jsx filename="components/author.js"
+import Image from 'next/image'
+import me from '../photos/me.jpg'
+
+export default function Author() {
+  return (
+    <Image
+      src={me}
+      alt="Picture of the author"
+      sizes="100vw"
+      style={{
+        width: '100%',
+        height: 'auto',
+      }}
+    />
+  )
+}
+```
+
+جربها:
+
+- [عرض الصورة المتجاوبة مع نافذة العرض](https://image-component.nextjs.gallery/responsive)
+
+### صورة متجاوبة مع نسبة العرض إلى الارتفاع
+
+إذا كانت الصورة المصدر ديناميكية أو عنوان URL بعيد، ستحتاج أيضًا إلى توفير `width` و `height` لتعيين نسبة العرض إلى الارتفاع الصحيحة للصورة المتجاوبة:
+
+```jsx filename="components/page.js"
+import Image from 'next/image'
+
+export default function Page({ photoUrl }) {
+  return (
+    <Image
+      src={photoUrl}
+      alt="Picture of the author"
+      sizes="100vw"
+      style={{
+        width: '100%',
+        height: 'auto',
+      }}
+      width={500}
+      height={300}
+    />
+  )
+}
+```
+
+جربها:
+
+- [عرض الصورة المتجاوبة مع نافذة العرض](https://image-component.nextjs.gallery/responsive)
+
+### صورة متجاوبة مع `fill`
+
+إذا كنت لا تعرف نسبة العرض إلى الارتفاع، ستحتاج إلى تعيين خاصية [`fill`](#fill) وتعيين `position: relative` على العنصر الأب. اختياريًا، يمكنك تعيين `object-fit` حسب سلوك التمدد أو الاقتصاص المطلوب:
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page({ photoUrl }) {
+  return (
+    <div style={{ position: 'relative', width: '500px', height: '300px' }}>
+      <Image
+        src={photoUrl}
+        alt="Picture of the author"
+        sizes="500px"
+        fill
+        style={{
+          objectFit: 'contain',
+        }}
+      />
+    </div>
+  )
+}
+```
+
+جربها:
+
+- [عرض خاصية `fill`](https://image-component.nextjs.gallery/fill)
+
+## اكتشاف السمة (Theme Detection)
+
+إذا كنت تريد عرض صورة مختلفة لوضعي الضوء والظلام، يمكنك إنشاء مكون جديد يضم مكوني `<Image>` ويكشف الصورة الصحيحة بناءً على استعلام CSS الإعلامي.
+
+```css filename="components/theme-image.module.css"
+.imgDark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .imgLight {
+    display: none;
+  }
+  .imgDark {
+    display: unset;
+  }
+}
+```
+
+```tsx filename="components/theme-image.tsx" switcher
+import styles from './theme-image.module.css'
+import Image, { ImageProps } from 'next/image'
+
+type Props = Omit<ImageProps, 'src' | 'priority' | 'loading'> & {
+  srcLight: string
+  srcDark: string
+}
+
+const ThemeImage = (props: Props) => {
+  const { srcLight, srcDark, ...rest } = props
+
+  return (
+    <>
+      <Image {...rest} src={srcLight} className={styles.imgLight} />
+      <Image {...rest} src={srcDark} className={styles.imgDark} />
+    </>
+  )
+}
+```
+
+```jsx filename="components/theme-image.js" switcher
+import styles from './theme-image.module.css'
+import Image from 'next/image'
+
+const ThemeImage = (props) => {
+  const { srcLight, srcDark, ...rest } = props
+
+  return (
+    <>
+      <Image {...rest} src={srcLight} className={styles.imgLight} />
+      <Image {...rest} src={srcDark} className={styles.imgDark} />
+    </>
+  )
+}
+```
+
+> **جيد أن تعرف**: السلوك الافتراضي لـ `loading="lazy"` يضمن تحميل الصورة الصحيحة فقط. لا يمكنك استخدام `priority` أو `loading="eager"` لأن ذلك سيؤدي إلى تحميل كلا الصورتين. بدلاً من ذلك، يمكنك استخدام [`fetchPriority="high"`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority).
+
+جربها بنفسك:
+
+- [عرض توضيحي لاكتشاف سمة الضوء/الظلام](https://image-component.nextjs.gallery/theme)
+
+## أخطاء متصفح معروفة (Known Browser Bugs)
+
+يستخدم مكون `next/image` هذا [تحميل كسول (lazy loading)](https://caniuse.com/loading-lazy-attr) أصلي من المتصفح، والذي قد يعود إلى التحميل المتعطش (eager loading) للمتصفحات القديمة قبل Safari 15.4. عند استخدام عنصر نائب ضبابي (blur-up placeholder)، ستعود المتصفحات القديمة قبل Safari 12 إلى عنصر نائب فارغ. عند استخدام أنماط مع `width`/`height` بقيمة `auto`، من الممكن التسبب في [انزياح تخطيط (Layout Shift)](https://web.dev/cls/) على المتصفحات القديمة قبل Safari 15 التي لا [تحافظ على نسبة العرض إلى الارتفاع (aspect ratio)](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes). لمزيد من التفاصيل، راجع [هذا الفيديو من MDN](https://www.youtube.com/watch?v=4-d_SoCHeWE).
+
+- [Safari 15 - 16.3](https://bugs.webkit.org/show_bug.cgi?id=243601) يعرض حدودًا رمادية أثناء التحميل. Safari 16.4 [أصلح هذه المشكلة](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/#:~:text=Now%20in%20Safari%2016.4%2C%20a%20gray%20line%20no%20longer%20appears%20to%20mark%20the%20space%20where%20a%20lazy%2Dloaded%20image%20will%20appear%20once%20it%E2%80%99s%20been%20loaded.). حلول ممكنة:
+  - استخدم CSS `@supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }`
+  - استخدم [`priority`](#priority) إذا كانت الصورة فوق الطية (above the fold)
+- [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) يعرض خلفية بيضاء أثناء التحميل. حلول ممكنة:
+  - تمكين [`formats`](#formats) من نوع AVIF
+  - استخدم [`placeholder`](#placeholder)
+
+## سجل الإصدارات (Version History)
+
+| الإصدار    | التغييرات                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.4.14` | دعم خاصية `placeholder` لـ `data:/image...`                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `v13.2.0`  | إضافة تكوين `contentDispositionType`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `v13.0.6`  | إضافة خاصية `ref`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `v13.0.0`  | تم تغيير اسم استيراد `next/image` إلى `next/legacy/image`. تم تغيير اسم استيراد `next/future/image` إلى `next/image`. يتوفر [أداة تحويل تلقائي (codemod)](/docs/app/building-your-application/upgrading/codemods#next-image-to-legacy-image) لإعادة تسمية الاستيرادات بأمان. تمت إزالة غلاف `<span>`. تمت إزالة خصائص `layout`, `objectFit`, `objectPosition`, `lazyBoundary`, `lazyRoot`. أصبحت خاصية `alt` مطلوبة. تستقبل `onLoadingComplete` مرجعًا لعنصر `img`. تمت إزالة تكوين المحمل المدمج. |
+| `v12.3.0`  | أصبح تكوين `remotePatterns` و `unoptimized` مستقرًا.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `v12.2.0`  | إضافة تكوين `remotePatterns` و `unoptimized` تجريبيًا. تمت إزالة `layout="raw"`.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `v12.1.1`  | إضافة خاصية `style`. إضافة دعم تجريبي لـ `layout="raw"`.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `v12.1.0`  | إضافة تكوين `dangerouslyAllowSVG` و `contentSecurityPolicy`.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `v12.0.9`  | إضافة خاصية `lazyRoot`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `v12.0.0`  | إضافة تكوين `formats`.<br/>إضافة دعم AVIF.<br/>تغيير غلاف `<div>` إلى `<span>`.                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `v11.1.0`  | إضافة خصائص `onLoadingComplete` و `lazyBoundary`.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `v11.0.0`  | دعم خاصية `src` للاستيراد الثابت.<br/>إضافة خاصية `placeholder`.<br/>إضافة خاصية `blurDataURL`.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `v10.0.5`  | إضافة خاصية `loader`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `v10.0.1`  | إضافة خاصية `layout`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `v10.0.0`  | تقديم `next/image`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/index.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/index.mdx
new file mode 100644
index 00000000..3d750821
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:10.964Z
+title: المكونات
+description: مرجع API للمكونات المدمجة في Next.js.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/link.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/link.mdx
new file mode 100644
index 00000000..e67caed3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/link.mdx
@@ -0,0 +1,457 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:03:17.449Z
+title: <Link>
+description: تمكين التنقل السريع من جانب العميل باستخدام مكون `next/link` المدمج.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [Hello World](https://github.com/vercel/next.js/tree/canary/examples/hello-world)
+- [Active className على Link](https://github.com/vercel/next.js/tree/canary/examples/active-class-name)
+
+</details>
+
+`<Link>` هو مكون React يمتد عنصر HTML `<a>` لتوفير [الجلب المسبق (Prefetching)](/docs/app/building-your-application/routing/linking-and-navigating#1-prefetching) والتنقل من جانب العميل بين المسارات. وهو الطريقة الأساسية للتنقل بين المسارات في Next.js.
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">لوحة التحكم</Link>
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">لوحة التحكم</Link>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+على سبيل المثال، ضع في الاعتبار دليل `pages` مع الملفات التالية:
+
+- `pages/index.js`
+- `pages/about.js`
+- `pages/blog/[slug].js`
+
+يمكننا إنشاء رابط لكل من هذه الصفحات كما يلي:
+
+```jsx
+import Link from 'next/link'
+
+function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/">الرئيسية</Link>
+      </li>
+      <li>
+        <Link href="/about">من نحن</Link>
+      </li>
+      <li>
+        <Link href="/blog/hello-world">مقال المدونة</Link>
+      </li>
+    </ul>
+  )
+}
+
+export default Home
+```
+
+</PagesOnly>
+
+## الخصائص (Props)
+
+فيما يلي ملخص للخصائص المتاحة لمكون Link:
+
+| الخاصية                   | مثال                 | النوع             | مطلوب |
+| ------------------------ | ------------------- | ---------------- | -------- |
+| [`href`](#href-required) | `href="/dashboard"` | نص أو كائن | نعم      |
+| [`replace`](#replace)    | `replace={false}`   | منطقي          | -        |
+| [`scroll`](#scroll)      | `scroll={false}`    | منطقي          | -        |
+| [`prefetch`](#prefetch)  | `prefetch={false}`  | منطقي          | -        |
+
+> **معلومة مفيدة**: يمكن إضافة سمات وسم `<a>` مثل `className` أو `target="_blank"` إلى `<Link>` كخصائص وسيتم تمريرها إلى العنصر الأساسي `<a>`.
+
+### `href` (مطلوب)
+
+المسار أو URL للانتقال إليه.
+
+```jsx
+<Link href="/dashboard">لوحة التحكم</Link>
+```
+
+يمكن أن يقبل `href` كائنًا أيضًا، على سبيل المثال:
+
+```jsx
+// الانتقال إلى /about?name=test
+<Link
+  href={{
+    pathname: '/about',
+    query: { name: 'test' },
+  }}
+>
+  حول
+</Link>
+```
+
+### `replace`
+
+**القيمة الافتراضية `false`.** عندما تكون `true`، سيستبدل `next/link` حالة التاريخ الحالية بدلاً من إضافة URL جديد إلى [مكدس تاريخ المتصفح](https://developer.mozilla.org/docs/Web/API/History_API).
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" replace>
+      لوحة التحكم
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" replace>
+      لوحة التحكم
+    </Link>
+  )
+}
+```
+
+### `scroll`
+
+**القيمة الافتراضية `true`.** السلوك الافتراضي لـ `<Link>` هو التمرير إلى أعلى المسار الجديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام. عندما تكون `false`، لن يقوم `next/link` بالتمرير إلى أعلى الصفحة بعد التنقل.
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" scroll={false}>
+      لوحة التحكم
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" scroll={false}>
+      لوحة التحكم
+    </Link>
+  )
+}
+```
+
+### `prefetch`
+
+**القيمة الافتراضية `true`.** عندما تكون `true`، سيقوم `next/link` بجلب الصفحة (المشار إليها بـ `href`) مسبقًا في الخلفية. هذا مفيد لتحسين أداء التنقل من جانب العميل. سيتم تحميل أي `<Link />` في نطاق الرؤية (مبدئيًا أو عن طريق التمرير) مسبقًا.
+
+يمكن تعطيل الجلب المسبق عن طريق تمرير `prefetch={false}`. يتم تمكين الجلب المسبق فقط في بيئة الإنتاج.
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" prefetch={false}>
+      لوحة التحكم
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" prefetch={false}>
+      لوحة التحكم
+    </Link>
+  )
+}
+```
+
+<PagesOnly>
+
+## خصائص أخرى
+
+### `legacyBehavior`
+
+لم يعد عنصر `<a>` مطلوبًا كعنصر فرعي لـ `<Link>`. أضف خاصية `legacyBehavior` لاستخدام السلوك القديم أو قم بإزالة `<a>` للترقية. يتوفر [أداة تحويل أكواد (codemod)](/docs/app/building-your-application/upgrading/codemods#new-link) لترقية الكود الخاص بك تلقائيًا.
+
+> **معلومة مفيدة**: عندما لا يتم تعيين `legacyBehavior` إلى `true`، يمكن تمرير جميع خصائص وسم [`anchor`](https://developer.mozilla.org/docs/Web/HTML/Element/a) إلى `next/link` أيضًا مثل `className`، `onClick`، إلخ.
+
+### `passHref`
+
+يجبر `Link` على إرسال خاصية `href` إلى العنصر الفرعي. القيمة الافتراضية `false`.
+
+### `scroll`
+
+التمرير إلى أعلى الصفحة بعد التنقل. القيمة الافتراضية `true`.
+
+### `shallow`
+
+تحديث مسار الصفحة الحالية دون إعادة تشغيل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)، [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) أو [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props). القيمة الافتراضية `false`.
+
+### `locale`
+
+يتم إضافة اللغة النشطة تلقائيًا. تسمح `locale` بتوفير لغة مختلفة. عندما تكون `false`، يجب أن يتضمن `href` اللغة حيث يتم تعطيل السلوك الافتراضي.
+
+</PagesOnly>
+
+## أمثلة
+
+### الربط مع المسارات الديناميكية
+
+بالنسبة للمسارات الديناميكية، يمكن أن يكون استخدام القوالب النصية (template literals) مفيدًا لإنشاء مسار الرابط.
+
+<PagesOnly>
+
+على سبيل المثال، يمكنك إنشاء قائمة من الروابط للمسار الديناميكي `pages/blog/[slug].js`
+
+```jsx filename="pages/blog/index.js"
+import Link from 'next/link'
+
+function Posts({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Posts
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+على سبيل المثال، يمكنك إنشاء قائمة من الروابط للمسار الديناميكي `app/blog/[slug]/page.js`:
+
+```jsx filename="app/blog/page.js"
+import Link from 'next/link'
+
+function Page({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+### إذا كان العنصر الفرعي مكونًا مخصصًا يلف وسم `<a>`
+
+<AppOnly>
+
+إذا كان العنصر الفرعي لـ `Link` هو مكون مخصص يلف وسم `<a>`، فيجب عليك إضافة `passHref` إلى `Link`. هذا ضروري إذا كنت تستخدم مكتبات مثل [styled-components](https://styled-components.com/). بدون هذا، لن يحتوي وسم `<a>` على سمة `href`، مما يؤثر على إمكانية الوصول إلى موقعك وقد يؤثر على SEO. إذا كنت تستخدم [ESLint](/docs/app/building-your-application/configuring/eslint#eslint-plugin)، فهناك قاعدة مدمجة `next/link-passhref` لضمان الاستخدام الصحيح لـ `passHref`.
+
+</AppOnly>
+
+<PagesOnly>
+
+إذا كان العنصر الفرعي لـ `Link` هو مكون مخصص يلف وسم `<a>`، فيجب عليك إضافة `passHref` إلى `Link`. هذا ضروري إذا كنت تستخدم مكتبات مثل [styled-components](https://styled-components.com/). بدون هذا، لن يحتوي وسم `<a>` على سمة `href`، مما يؤثر على إمكانية الوصول إلى موقعك وقد يؤثر على SEO. إذا كنت تستخدم [ESLint](/docs/pages/building-your-application/configuring/eslint#eslint-plugin)، فهناك قاعدة مدمجة `next/link-passhref` لضمان الاستخدام الصحيح لـ `passHref`.
+
+</PagesOnly>
+
+```jsx
+import Link from 'next/link'
+import styled from 'styled-components'
+
+// هذا ينشئ مكونًا مخصصًا يلف وسم <a>
+const RedLink = styled.a`
+  color: red;
+`
+
+function NavLink({ href, name }) {
+  return (
+    <Link href={href} passHref legacyBehavior>
+      <RedLink>{name}</RedLink>
+    </Link>
+  )
+}
+
+export default NavLink
+```
+
+- إذا كنت تستخدم ميزة JSX pragma الخاصة بـ [emotion](https://emotion.sh/) (`@jsx jsx`)، فيجب عليك استخدام `passHref` حتى إذا كنت تستخدم وسم `<a>` مباشرة.
+- يجب أن يدعم المكون خاصية `onClick` لتنشيط التنقل بشكل صحيح
+
+### إذا كان العنصر الفرعي مكونًا وظيفيًا
+
+إذا كان العنصر الفرعي لـ `Link` هو مكون وظيفي، بالإضافة إلى استخدام `passHref` و `legacyBehavior`، يجب عليك تغليف المكون في [`React.forwardRef`](https://react.dev/reference/react/forwardRef):
+
+```jsx
+import Link from 'next/link'
+
+// `onClick`, `href`, و `ref` يجب تمريرها إلى عنصر DOM
+// للمعالجة الصحيحة
+const MyButton = React.forwardRef(({ onClick, href }, ref) => {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      انقر هنا
+    </a>
+  )
+})
+
+function Home() {
+  return (
+    <Link href="/about" passHref legacyBehavior>
+      <MyButton />
+    </Link>
+  )
+}
+
+export default Home
+```
+
+### مع كائن URL
+
+يمكن أن يتلقى `Link` أيضًا كائن URL وسيقوم تلقائيًا بتنسيقه لإنشاء سلسلة URL. إليك كيفية القيام بذلك:
+
+```jsx
+import Link from 'next/link'
+
+function Home() {
+  return (
+    <ul>
+      <li>
+        <Link
+          href={{
+            pathname: '/about',
+            query: { name: 'test' },
+          }}
+        >
+          من نحن
+        </Link>
+      </li>
+      <li>
+        <Link
+          href={{
+            pathname: '/blog/[slug]',
+            query: { slug: 'my-post' },
+          }}
+        >
+          مقال المدونة
+        </Link>
+      </li>
+    </ul>
+  )
+}
+
+export default Home
+```
+
+يحتوي المثال أعلاه على رابط إلى:
+
+- مسار محدد مسبقًا: `/about?name=test`
+- [مسار ديناميكي](/docs/app/building-your-application/routing/dynamic-routes): `/blog/my-post`
+
+يمكنك استخدام كل خاصية كما هو موضح في [توثيق وحدة Node.js URL](https://nodejs.org/api/url.html#url_url_strings_and_url_objects).
+
+### استبدال URL بدلاً من الإضافة
+
+السلوك الافتراضي لمكون `Link` هو `push` عنوان URL جديد إلى مكدس `history`. يمكنك استخدام خاصية `replace` لمنع إضافة إدخال جديد، كما في المثال التالي:
+
+```jsx
+<Link href="/about" replace>
+  من نحن
+</Link>
+```
+
+### تعطيل التمرير إلى أعلى الصفحة
+
+السلوك الافتراضي لـ `Link` هو التمرير إلى أعلى الصفحة. عندما يكون هناك hash محدد، سيقوم بالتمرير إلى id معين، مثل وسم `<a>` العادي. لمنع التمرير إلى الأعلى / hash، يمكن إضافة `scroll={false}` إلى `Link`:
+
+```jsx
+<Link href="/#hashid" scroll={false}>
+  تعطيل التمرير إلى الأعلى
+</Link>
+```
+
+</PagesOnly>
+
+### Middleware
+
+من الشائع استخدام [Middleware](/docs/app/building-your-application/routing/middleware) للمصادقة أو أغراض أخرى تتضمن إعادة توجيه المستخدم إلى صفحة مختلفة. لكي يعمل مكون `<Link />` بشكل صحيح في جلب الروابط مع إعادة الكتابة عبر Middleware، تحتاج إلى إخبار Next.js بكل من URL المعروض وURL المطلوب جلبها مسبقًا. هذا مطلوب لتجنب طلبات الجلب غير الضرورية إلى middleware لمعرفة المسار الصحيح للجلب المسبق.
+
+على سبيل المثال، إذا كنت تريد تقديم مسار `/dashboard` الذي يحتوي على واجهات للمستخدمين المصادق عليهم والزوار، يمكنك إضافة شيء مشابه لما يلي في Middleware الخاص بك لإعادة توجيه المستخدم إلى الصفحة الصحيحة:
+
+```js filename="middleware.js"
+export function middleware(req) {
+  const nextUrl = req.nextUrl
+  if (nextUrl.pathname === '/dashboard') {
+    if (req.cookies.authToken) {
+      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
+    } else {
+      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
+    }
+  }
+}
+```
+
+في هذه الحالة، سترغب في استخدام الكود التالي في مكون `<Link />` الخاص بك:
+
+```js
+import Link from 'next/link'
+import useIsAuthed from './hooks/useIsAuthed'
+
+export default function Page() {
+  const isAuthed = useIsAuthed()
+  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
+  return (
+    <Link as="/dashboard" href={path}>
+      لوحة التحكم
+    </Link>
+  )
+}
+```
+
+<PagesOnly>
+
+> **معلومة مفيدة**: إذا كنت تستخدم [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes)، فستحتاج إلى تكييف خصائص `as` و `href`. على سبيل المثال، إذا كان لديك مسار ديناميكي مثل `/dashboard/[user]` تريد عرضه بشكل مختلف عبر middleware، ستكتب: `<Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">الملف الشخصي</Link>`.
+
+</PagesOnly>
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                                                         |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.0.0` | لم يعد يتطلب وسم `<a>` فرعي. تم توفير [أداة تحويل أكواد (codemod)](/docs/app/building-your-application/upgrading/codemods#remove-a-tags-from-link-components) لترقية الكود الخاص بك تلقائيًا. |
+| `v10.0.0` | خصائص `href` التي تشير إلى مسار ديناميكي يتم حلها تلقائيًا ولم تعد تتطلب خاصية `as`.                                                                                         |
+| `v8.0.0`  | تحسين أداء الجلب المسبق.                                                                                                                                                               |
+| `v1.0.0`  | تم تقديم `next/link`.                                                                                                                                                                         |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/script.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/script.mdx
new file mode 100644
index 00000000..7b53ef81
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/01-components/script.mdx
@@ -0,0 +1,456 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:03:01.000Z
+title: مكون <Script>
+description: تحسين النصوص البرمجية الخارجية في تطبيق Next.js باستخدام مكون `next/script` المدمج.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكن استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+سيساعدك مرجع API هذا على فهم كيفية استخدام [الخصائص](#props) المتاحة لمكون Script. لميزات الاستخدام، يرجى الاطلاع على صفحة [تحسين النصوص البرمجية](/docs/app/building-your-application/optimizing/scripts).
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import Script from 'next/script'
+
+export default function Dashboard() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import Script from 'next/script'
+
+export default function Dashboard() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+## الخصائص
+
+فيما يلي ملخص للخصائص المتاحة لمكون Script:
+
+| الخاصية                  | مثال                             | النوع     | مطلوب                              |
+| ----------------------- | --------------------------------- | -------- | ------------------------------------- |
+| [`src`](#src)           | `src="http://example.com/script"` | String   | مطلوب إلا إذا تم استخدام نص برمجي مضمن |
+| [`strategy`](#strategy) | `strategy="lazyOnload"`           | String   | -                                     |
+| [`onLoad`](#onload)     | `onLoad={onLoadFunc}`             | Function | -                                     |
+| [`onReady`](#onready)   | `onReady={onReadyFunc}`           | Function | -                                     |
+| [`onError`](#onerror)   | `onError={onErrorFunc}`           | Function | -                                     |
+
+## الخصائص المطلوبة
+
+يتطلب مكون `<Script />` الخصائص التالية.
+
+### `src`
+
+سلسلة تحدد مسار URL للنص البرمجي الخارجي. يمكن أن يكون هذا عنوان URL خارجيًا مطلقًا أو مسارًا داخليًا. خاصية `src` مطلوبة إلا إذا تم استخدام نص برمجي مضمن.
+
+## الخصائص الاختيارية
+
+يقبل مكون `<Script />` عددًا من الخصائص الإضافية بخلاف تلك المطلوبة.
+
+### `strategy`
+
+استراتيجية تحميل النص البرمجي. هناك أربع استراتيجيات مختلفة يمكن استخدامها:
+
+- `beforeInteractive`: التحميل قبل أي كود Next.js وقبل أي عملية ترطيب للصفحة.
+- `afterInteractive`: (**الافتراضي**) التحميل مبكرًا ولكن بعد حدوث بعض الترطيب للصفحة.
+- `lazyOnload`: التحميل خلال وقت الخمول في المتصفح.
+- `worker`: (تجريبي) التحميل في عامل ويب.
+
+### `beforeInteractive`
+
+يتم حقن النصوص البرمجية التي تستخدم استراتيجية `beforeInteractive` في HTML الأولي من الخادم، وتحميلها قبل أي وحدة Next.js، وتنفيذها بالترتيب الذي توضع فيه قبل أي ترطيب للصفحة.
+
+يتم جلب النصوص البرمجية المحددة بهذه الاستراتيجية مسبقًا قبل أي كود أساسي، لكن تنفيذها لا يعيق ترطيب الصفحة.
+
+يجب وضع النصوص البرمجية `beforeInteractive` داخل التخطيط الجذري (`app/layout.tsx`) وهي مصممة لتحميل النصوص البرمجية المطلوبة من قبل الموقع بأكمله (أي سيتم تحميل النص البرمجي عند تحميل أي صفحة في التطبيق من جانب الخادم).
+
+**يجب استخدام هذه الاستراتيجية فقط للنصوص البرمجية الحرجة التي يجب جلبها قبل أن يصبح أي جزء من الصفحة تفاعليًا.**
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <Script
+        src="https://example.com/script.js"
+        strategy="beforeInteractive"
+      />
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import Script from 'next/script'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <Script
+        src="https://example.com/script.js"
+        strategy="beforeInteractive"
+      />
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx
+import { Html, Head, Main, NextScript } from 'next/document'
+import Script from 'next/script'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+        <Script
+          src="https://example.com/script.js"
+          strategy="beforeInteractive"
+        />
+      </body>
+    </Html>
+  )
+}
+```
+
+</PagesOnly>
+
+> **ملاحظة مهمة**: سيتم دائمًا حقن النصوص البرمجية مع `beforeInteractive` داخل `head` من مستند HTML بغض النظر عن مكان وضعها في المكون.
+
+بعض الأمثلة على النصوص البرمجية التي يجب تحميلها في أقرب وقت ممكن باستخدام `beforeInteractive` تشمل:
+
+- كاشفات الروبوتات
+- مديرو موافقات ملفات تعريف الارتباط
+
+### `afterInteractive`
+
+يتم حقن النصوص البرمجية التي تستخدم استراتيجية `afterInteractive` في HTML من جانب العميل وسيتم تحميلها بعد حدوث بعض (أو كل) الترطيب على الصفحة. **هذه هي الاستراتيجية الافتراضية** لمكون Script ويجب استخدامها لأي نص برمجي يحتاج إلى التحميل في أقرب وقت ممكن ولكن ليس قبل أي كود Next.js أساسي.
+
+يمكن وضع النصوص البرمجية `afterInteractive` داخل أي صفحة أو تخطيط وسيتم تحميلها وتنفيذها فقط عند فتح تلك الصفحة (أو مجموعة الصفحات) في المتصفح.
+
+```jsx filename="app/page.js"
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="afterInteractive" />
+    </>
+  )
+}
+```
+
+بعض الأمثلة على النصوص البرمجية المناسبة لـ `afterInteractive` تشمل:
+
+- مديري العلامات
+- أدوات التحليل
+
+### `lazyOnload`
+
+يتم حقن النصوص البرمجية التي تستخدم استراتيجية `lazyOnload` في HTML من جانب العميل خلال وقت الخمول في المتصفح وسيتم تحميلها بعد جلب جميع الموارد على الصفحة. يجب استخدام هذه الاستراتيجية لأي نصوص برمجية خلفية أو منخفضة الأولوية لا تحتاج إلى التحميل مبكرًا.
+
+يمكن وضع النصوص البرمجية `lazyOnload` داخل أي صفحة أو تخطيط وسيتم تحميلها وتنفيذها فقط عند فتح تلك الصفحة (أو مجموعة الصفحات) في المتصفح.
+
+```jsx filename="app/page.js"
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="lazyOnload" />
+    </>
+  )
+}
+```
+
+أمثلة على النصوص البرمجية التي لا تحتاج إلى التحميل فورًا ويمكن جلبها باستخدام `lazyOnload` تشمل:
+
+- ملحقات دعم الدردشة
+- أدوات وسائل التواصل الاجتماعي
+
+### `worker`
+
+> **تحذير:** استراتيجية `worker` ليست مستقرة بعد ولا تعمل مع دليل [`app`](/docs/app/building-your-application/routing/defining-routes). استخدم بحذر.
+
+يتم تحميل النصوص البرمجية التي تستخدم استراتيجية `worker` في عامل ويب لتحرير الخيط الرئيسي وضمان معالجة الموارد الأساسية فقط عليه. بينما يمكن استخدام هذه الاستراتيجية لأي نص برمجي، فهي حالة استخدام متقدمة ولا تضمن دعم جميع النصوص البرمجية الخارجية.
+
+لاستخدام `worker` كاستراتيجية، يجب تمكين علم `nextScriptWorkers` في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    nextScriptWorkers: true,
+  },
+}
+```
+
+يمكن حاليًا استخدام النصوص البرمجية `worker` **فقط في دليل `pages/`**:
+
+```tsx filename="pages/home.tsx" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/home.js" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+### `onLoad`
+
+> **تحذير:** `onLoad` لا يعمل بعد مع مكونات الخادم ويمكن استخدامه فقط في مكونات العميل. بالإضافة إلى ذلك، لا يمكن استخدام `onLoad` مع `beforeInteractive` - فكر في استخدام `onReady` بدلاً من ذلك.
+
+تتطلب بعض النصوص البرمجية الخارجية من المستخدمين تشغيل كود JavaScript مرة واحدة بعد اكتمال تحميل النص البرمجي لإنشاء المحتوى أو استدعاء دالة. إذا كنت تقوم بتحميل نص برمجي باستخدام استراتيجية التحميل `afterInteractive` أو `lazyOnload`، فيمكنك تنفيذ الكود بعد تحميله باستخدام خاصية `onLoad`.
+
+فيما يلي مثال لتنفيذ طريقة lodash فقط بعد تحميل المكتبة.
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
+        onLoad={() => {
+          console.log(_.sample([1, 2, 3, 4]))
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
+        onLoad={() => {
+          console.log(_.sample([1, 2, 3, 4]))
+        }}
+      />
+    </>
+  )
+}
+```
+
+### `onReady`
+
+> **تحذير:** `onReady` لا يعمل بعد مع مكونات الخادم ويمكن استخدامه فقط في مكونات العميل.
+
+تتطلب بعض النصوص البرمجية الخارجية من المستخدمين تشغيل كود JavaScript بعد اكتمال تحميل النص البرمجي وفي كل مرة يتم فيها تحميل المكون (على سبيل المثال بعد التنقل بين الصفحات). يمكنك تنفيذ الكود بعد حدث تحميل النص البرمجي عند تحميله لأول مرة ثم بعد كل إعادة تحميل لاحقة للمكون باستخدام خاصية `onReady`.
+
+فيما يلي مثال لكيفية إعادة إنشاء تضمين خرائط Google JS في كل مرة يتم فيها تحميل المكون:
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import { useRef } from 'react'
+import Script from 'next/script'
+
+export default function Page() {
+  const mapRef = useRef()
+
+  return (
+    <>
+      <div ref={mapRef}></div>
+      <Script
+        id="google-maps"
+        src="https://maps.googleapis.com/maps/api/js"
+        onReady={() => {
+          new google.maps.Map(mapRef.current, {
+            center: { lat: -34.397, lng: 150.644 },
+            zoom: 8,
+          })
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import { useRef } from 'react'
+import Script from 'next/script'
+
+export default function Page() {
+  const mapRef = useRef()
+
+  return (
+    <>
+      <div ref={mapRef}></div>
+      <Script
+        id="google-maps"
+        src="https://maps.googleapis.com/maps/api/js"
+        onReady={() => {
+          new google.maps.Map(mapRef.current, {
+            center: { lat: -34.397, lng: 150.644 },
+            zoom: 8,
+          })
+        }}
+      />
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx
+import { useRef } from 'react';
+import Script from 'next/script';
+
+export default function Page() {
+  const mapRef = useRef();
+
+  return (
+    <PagesOnly>
+      <div ref={mapRef}></div>
+      <Script
+        id="google-maps"
+        src="https://maps.googleapis.com/maps/api/js"
+        onReady={() => {
+          new google.maps.Map(mapRef.current, {
+            center: { lat: -34.397, lng: 150.644 },
+            zoom: 8,
+          });
+        }}
+      />
+    </>
+  );
+}
+```
+
+</PagesOnly>
+
+### `onError`
+
+> **تحذير:** `onError` لا يعمل بعد مع مكونات الخادم ويمكن استخدامه فقط في مكونات العميل. لا يمكن استخدام `onError` مع استراتيجية التحميل `beforeInteractive`.
+
+في بعض الأحيان يكون من المفيد اكتشاف فشل تحميل النص البرمجي. يمكن التعامل مع هذه الأخطاء باستخدام خاصية `onError`:
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onError={(e: Error) => {
+          console.error('فشل تحميل النص البرمجي', e)
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onError={(e: Error) => {
+          console.error('فشل تحميل النص البرمجي', e)
+        }}
+      />
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onError={(e: Error) => {
+          console.error('فشل تحميل النص البرمجي', e)
+        }}
+      />
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                   |
+| --------- | ------------------------------------------------------------------------- |
+| `v13.0.0` | تم تعديل `beforeInteractive` و `afterInteractive` لدعم `app`.             |
+| `v12.2.4` | إضافة خاصية `onReady`.                                                    |
+| `v12.2.2` | السماح بـ `next/script` مع `beforeInteractive` في `_document`.            |
+| `v11.0.0` | تقديم `next/script`.                                                      |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
new file mode 100644
index 00000000..9a15f922
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
@@ -0,0 +1,286 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:14:23.151Z
+title: أيقونة الموقع (favicon)، الأيقونة (icon)، وأيقونة آبل (apple-icon)
+description: مرجع API لاتفاقيات ملفات أيقونة الموقع (favicon)، الأيقونة (icon)، وأيقونة آبل (apple-icon).
+---
+
+تتيح لك اتفاقيات ملفات `favicon` أو `icon` أو `apple-icon` تعيين أيقونات لتطبيقك.
+
+هذه الأيقونات مفيدة لإضافة رموز التطبيقات التي تظهر في أماكن مثل علامات تبويب المتصفحات، شاشات الهواتف الرئيسية، ونتائج محركات البحث.
+
+هناك طريقتان لتعيين أيقونات التطبيق:
+
+- [باستخدام ملفات الصور (.ico, .jpg, .png)](#ملفات-الصور-ico-jpg-png)
+- [باستخدام الكود لإنشاء أيقونة (.js, .ts, .tsx)](#إنشاء-أيقونات-باستخدام-الكود-js-ts-tsx)
+
+## ملفات الصور (.ico, .jpg, .png)
+
+استخدم ملف صورة لتعيين أيقونة التطبيق عن طريق وضع ملف صورة `favicon` أو `icon` أو `apple-icon` داخل دليل `/app` الخاص بك.
+يمكن أن يكون ملف صورة `favicon` موجودًا فقط في المستوى الأعلى من `app/`.
+
+سيقوم Next.js بتقييم الملف وإضافة الوسوم المناسبة تلقائيًا إلى عنصر `<head>` في تطبيقك.
+
+| اتفاقية الملف             | أنواع الملفات المدعومة                    | المواقع الصالحة |
+| --------------------------- | --------------------------------------- | --------------- |
+| [`favicon`](#favicon)       | `.ico`                                  | `app/`          |
+| [`icon`](#icon)             | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*`      |
+| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png`                 | `app/**/*`      |
+
+### `favicon`
+
+أضف ملف صورة `favicon.ico` إلى مقطع المسار الجذري `/app`.
+
+```html filename="<head> output"
+<link rel="icon" href="/favicon.ico" sizes="any" />
+```
+
+### `icon`
+
+أضف ملف صورة `icon.(ico|jpg|jpeg|png|svg)`.
+
+```html filename="<head> output"
+<link
+  rel="icon"
+  href="/icon?<generated>"
+  type="image/<generated>"
+  sizes="<generated>"
+/>
+```
+
+### `apple-icon`
+
+أضف ملف صورة `apple-icon.(jpg|jpeg|png)`.
+
+```html filename="<head> output"
+<link
+  rel="apple-touch-icon"
+  href="/apple-icon?<generated>"
+  type="image/<generated>"
+  sizes="<generated>"
+/>
+```
+
+> **معلومة مفيدة**
+>
+> - يمكنك تعيين عدة أيقونات عن طريق إضافة لاحقة رقمية لاسم الملف. على سبيل المثال، `icon1.png`، `icon2.png`، إلخ. سيتم ترتيب الملفات المرقمة أبجديًا.
+> - يمكن تعيين أيقونات الموقع (favicons) فقط في مقطع `/app` الجذري. إذا كنت بحاجة إلى مزيد من التفصيل، يمكنك استخدام [`icon`](#icon).
+> - يتم تحديد وسوم `<link>` والسمات المناسبة مثل `rel` و`href` و`type` و`sizes` بناءً على نوع الأيقونة وبيانات الملف الذي تم تقييمه.
+>   - على سبيل المثال، ملف `.png` بحجم 32 × 32 بكسل سيكون له سمات `type="image/png"` و`sizes="32x32"`.
+> - تتم إضافة `sizes="any"` إلى إخراج `favicon.ico` لتجنب [خلل في المتصفح](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) حيث يتم تفضيل أيقونة `.ico` على `.svg`.
+
+## إنشاء أيقونات باستخدام الكود (.js, .ts, .tsx)
+
+بالإضافة إلى استخدام [ملفات الصور الحرفية](#ملفات-الصور-ico-jpg-png)، يمكنك **إنشاء** أيقونات برمجيًا باستخدام الكود.
+
+قم بإنشاء أيقونة تطبيق عن طريق إنشاء مسار `icon` أو `apple-icon` يقوم بتصدير دالة افتراضية.
+
+| اتفاقية الملف | أنواع الملفات المدعومة |
+| --------------- | -------------------- |
+| `icon`          | `.js`, `.ts`, `.tsx` |
+| `apple-icon`    | `.js`, `.ts`, `.tsx` |
+
+أسهل طريقة لإنشاء أيقونة هي استخدام واجهة برمجة التطبيقات [`ImageResponse`](/docs/app/api-reference/functions/image-response) من `next/server`.
+
+```tsx filename="app/icon.tsx" switcher
+import { ImageResponse } from 'next/server'
+
+// تكوين مقطع المسار
+export const runtime = 'edge'
+
+// بيانات الصورة
+export const size = {
+  width: 32,
+  height: 32,
+}
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default function Icon() {
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 24,
+          background: 'black',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+        }}
+      >
+        A
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // للراحة، يمكننا إعادة استخدام بيانات حجم الأيقونة المصدرة
+      // للتكوين لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+    }
+  )
+}
+```
+
+```jsx filename="app/icon.js" switcher
+import { ImageResponse } from 'next/server'
+
+// تكوين مقطع المسار
+export const runtime = 'edge'
+
+// بيانات الصورة
+export const size = {
+  width: 32,
+  height: 32,
+}
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default function Icon() {
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 24,
+          background: 'black',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+        }}
+      >
+        A
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // للراحة، يمكننا إعادة استخدام بيانات حجم الأيقونة المصدرة
+      // للتكوين لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+    }
+  )
+}
+```
+
+```html filename="<head> output"
+<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />
+```
+
+> **معلومة مفيدة**
+>
+> - بشكل افتراضي، يتم [**تحسين الأيقونات المولدة ثابتًا**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (يتم إنشاؤها وقت البناء وتخزينها مؤقتًا) ما لم تستخدم [وظائف ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) أو بيانات غير مخزنة مؤقتًا.
+> - يمكنك إنشاء عدة أيقونات في نفس الملف باستخدام [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
+> - لا يمكنك إنشاء أيقونة `favicon`. استخدم [`icon`](#icon) أو ملف [favicon.ico](#favicon) بدلاً من ذلك.
+
+### الخصائص (Props)
+
+تستقبل الدالة المصدرة افتراضيًا الخصائص التالية:
+
+#### `params` (اختياري)
+
+كائن يحتوي على [كائن معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من المقطع الجذري وصولاً إلى المقطع الذي يوجد فيه `icon` أو `apple-icon`.
+
+```tsx filename="app/shop/[slug]/icon.tsx" switcher
+export default function Icon({ params }: { params: { slug: string } }) {
+  // ...
+}
+```
+
+```jsx filename="app/shop/[slug]/icon.js" switcher
+export default function Icon({ params }) {
+  // ...
+}
+```
+
+| المسار                           | URL         | `params`                  |
+| ------------------------------- | ----------- | ------------------------- |
+| `app/shop/icon.js`              | `/shop`     | `undefined`               |
+| `app/shop/[slug]/icon.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/icon.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/icon.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+### القيمة المرجعة
+
+يجب أن ترجع الدالة المصدرة افتراضيًا `Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `ReadableStream` | `Response`.
+
+> **معلومة مفيدة**: `ImageResponse` تلبي نوع الإرجاع هذا.
+
+### تصدير التكوين
+
+يمكنك تكوين بيانات وصفية للأيقونة اختياريًا عن طريق تصدير متغيرات `size` و `contentType` من مسار `icon` أو `apple-icon`.
+
+| الخيار                        | النوع                                                                                                            |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| [`size`](#size)               | `{ width: number; height: number }`                                                                             |
+| [`contentType`](#contenttype) | `string` - [نوع MIME للصورة](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) |
+
+#### `size`
+
+```tsx filename="icon.tsx | apple-icon.tsx" switcher
+export const size = { width: 32, height: 32 }
+
+export default function Icon() {}
+```
+
+```jsx filename="icon.js | apple-icon.js" switcher
+export const size = { width: 32, height: 32 }
+
+export default function Icon() {}
+```
+
+```html filename="<head> output"
+<link rel="icon" sizes="32x32" />
+```
+
+#### `contentType`
+
+```tsx filename="icon.tsx | apple-icon.tsx" switcher
+export const contentType = 'image/png'
+
+export default function Icon() {}
+```
+
+```jsx filename="icon.js | apple-icon.js" switcher
+export const contentType = 'image/png'
+
+export default function Icon() {}
+```
+
+```html filename="<head> output"
+<link rel="icon" type="image/png" />
+```
+
+#### تكوين مقطع المسار
+
+`icon` و `apple-icon` هما [معالجات مسار](/docs/app/building-your-application/routing/route-handlers) متخصصة يمكنهما استخدام نفس [خيارات تكوين مقطع المسار](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات.
+
+| الخيار                                                                                             | النوع                                                     | الافتراضي    |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------- |
+| [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic)                 | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'` | `'auto'`   |
+| [`revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate)           | `false \| 'force-cache' \| 0 \| number`                  | `false`    |
+| [`runtime`](/docs/app/api-reference/file-conventions/route-segment-config#runtime)                 | `'nodejs' \| 'edge'`                                     | `'nodejs'` |
+| [`preferredRegion`](/docs/app/api-reference/file-conventions/route-segment-config#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]`     | `'auto'`   |
+
+```tsx filename="app/icon.tsx" switcher
+export const runtime = 'edge'
+
+export default function Icon() {}
+```
+
+```jsx filename="app/icon.js" switcher
+export const runtime = 'edge'
+
+export default function Icon() {}
+```
+
+## تاريخ الإصدارات
+
+| الإصدار   | التغييرات                                      |
+| --------- | -------------------------------------------- |
+| `v13.3.0` | تم تقديم `favicon` و `icon` و `apple-icon` |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/index.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/index.mdx
new file mode 100644
index 00000000..92c800a7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/index.mdx
@@ -0,0 +1,13 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:50.440Z
+title: مرجع API لملفات البيانات الوصفية (Metadata Files)
+nav_title: ملفات البيانات الوصفية
+description: وثائق API لاتفاقيات ملفات البيانات الوصفية.
+---
+
+يغطي هذا القسم من الوثائق **اتفاقيات ملفات البيانات الوصفية**. يمكن تعريف البيانات الوصفية المعتمدة على الملفات عن طريق إضافة ملفات بيانات وصفية خاصة إلى مقاطع المسار (route segments).
+
+يمكن تعريف كل اتفاقية ملف إما باستخدام ملف ثابت (مثل `opengraph-image.jpg`)، أو متغير ديناميكي يستخدم الكود لإنشاء الملف (مثل `opengraph-image.js`).
+
+بمجرد تعريف الملف، سيقوم Next.js تلقائيًا بخدمة الملف (مع تجزئة في بيئة الإنتاج للتخزين المؤقت) وتحديث عناصر الرأس (head) ذات الصلة بالبيانات الوصفية الصحيحة، مثل عنوان URL للأصل، ونوع الملف، وحجم الصورة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
new file mode 100644
index 00000000..29007a24
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
@@ -0,0 +1,72 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:52.000Z
+title: ملف manifest.json
+description: مرجع API لملف manifest.json.
+---
+
+أضف أو أنشئ ملف `manifest.(json|webmanifest)` يتوافق مع [مواصفات ويب مانيفست](https://developer.mozilla.org/docs/Web/Manifest) في **الجذر** من دليل `app` لتوفير معلومات عن تطبيق الويب الخاص بك للمتصفح.
+
+## ملف مانيفست ثابت
+
+```json filename="app/manifest.json | app/manifest.webmanifest"
+{
+  "name": "My Next.js Application",
+  "short_name": "Next.js App",
+  "description": "An application built with Next.js",
+  "start_url": "/"
+  // ...
+}
+```
+
+## إنشاء ملف مانيفست
+
+أضف ملف `manifest.js` أو `manifest.ts` الذي يُرجع [كائن `Manifest`](#manifest-object).
+
+```ts filename="app/manifest.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Next.js App',
+    short_name: 'Next.js App',
+    description: 'Next.js App',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}
+```
+
+```js filename="app/manifest.js" switcher
+export default function manifest() {
+  return {
+    name: 'Next.js App',
+    short_name: 'Next.js App',
+    description: 'Next.js App',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}
+```
+
+### كائن Manifest
+
+يحتوي كائن المانيفست على قائمة واسعة من الخيارات التي قد يتم تحديثها بسبب معايير الويب الجديدة. لمعلومات عن جميع الخيارات الحالية، راجع نوع `MetadataRoute.Manifest` في محرر الأكواد إذا كنت تستخدم [TypeScript](https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin) أو راجع وثائق [MDN](https://developer.mozilla.org/docs/Web/Manifest).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
new file mode 100644
index 00000000..eb0161c6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
@@ -0,0 +1,430 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:14:33.329Z
+title: opengraph-image و twitter-image
+description: مرجع API لاتفاقيات ملفات صورة Open Graph وصورة Twitter.
+---
+
+تتيح لك اتفاقيات ملفات `opengraph-image` و `twitter-image` تعيين صور Open Graph و Twitter لمقطع المسار.
+
+هذه الملفات مفيدة لتعيين الصور التي تظهر على الشبكات الاجتماعية وتطبيقات المراسلة عندما يشارك المستخدم رابط موقعك.
+
+هناك طريقتان لتعيين صور Open Graph و Twitter:
+
+- [استخدام ملفات الصور (.jpg, .png, .gif)](#image-files-jpg-png-gif)
+- [استخدام الكود لإنشاء الصور (.js, .ts, .tsx)](#generate-images-using-code-js-ts-tsx)
+
+## ملفات الصور (.jpg, .png, .gif)
+
+استخدم ملف صورة لتعيين صورة مشتركة لمقطع المسار عن طريق وضع ملف صورة `opengraph-image` أو `twitter-image` في المقطع.
+
+سيقوم Next.js بتقييم الملف وإضافة العلامات المناسبة تلقائيًا إلى عنصر `<head>` لتطبيقك.
+
+| اتفاقية الملف                                 | أنواع الملفات المدعومة            |
+| ----------------------------------------------- | ------------------------------- |
+| [`opengraph-image`](#opengraph-image)           | `.jpg`, `.jpeg`, `.png`, `.gif` |
+| [`twitter-image`](#twitter-image)               | `.jpg`, `.jpeg`, `.png`, `.gif` |
+| [`opengraph-image.alt`](#opengraph-imagealttxt) | `.txt`                          |
+| [`twitter-image.alt`](#twitter-imagealttxt)     | `.txt`                          |
+
+### `opengraph-image`
+
+أضف ملف صورة `opengraph-image.(jpg|jpeg|png|gif)` إلى أي مقطع مسار.
+
+```html filename="<head> output"
+<meta property="og:image" content="<generated>" />
+<meta property="og:image:type" content="<generated>" />
+<meta property="og:image:width" content="<generated>" />
+<meta property="og:image:height" content="<generated>" />
+```
+
+### `twitter-image`
+
+أضف ملف صورة `twitter-image.(jpg|jpeg|png|gif)` إلى أي مقطع مسار.
+
+```html filename="<head> output"
+<meta name="twitter:image" content="<generated>" />
+<meta name="twitter:image:type" content="<generated>" />
+<meta name="twitter:image:width" content="<generated>" />
+<meta name="twitter:image:height" content="<generated>" />
+```
+
+### `opengraph-image.alt.txt`
+
+أضف ملف `opengraph-image.alt.txt` مصاحب في نفس مقطع المسار مثل صورة `opengraph-image.(jpg|jpeg|png|gif)` كنص بديل لها.
+
+```txt filename="opengraph-image.alt.txt"
+About Acme
+```
+
+```html filename="<head> output"
+<meta property="og:image:alt" content="About Acme" />
+```
+
+### `twitter-image.alt.txt`
+
+أضف ملف `twitter-image.alt.txt` مصاحب في نفس مقطع المسار مثل صورة `twitter-image.(jpg|jpeg|png|gif)` كنص بديل لها.
+
+```txt filename="twitter-image.alt.txt"
+About Acme
+```
+
+```html filename="<head> output"
+<meta property="twitter:image:alt" content="About Acme" />
+```
+
+## إنشاء الصور باستخدام الكود (.js, .ts, .tsx)
+
+بالإضافة إلى استخدام [ملفات الصور الحرفية](#image-files-jpg-png-gif)، يمكنك **إنشاء** الصور برمجيًا باستخدام الكود.
+
+قم بإنشاء صورة مشتركة لمقطع المسار عن طريق إنشاء مسار `opengraph-image` أو `twitter-image` يقوم بتصدير دالة افتراضية.
+
+| اتفاقية الملف   | أنواع الملفات المدعومة |
+| ----------------- | -------------------- |
+| `opengraph-image` | `.js`, `.ts`, `.tsx` |
+| `twitter-image`   | `.js`, `.ts`, `.tsx` |
+
+> **معلومة مفيدة**
+>
+> - بشكل افتراضي، يتم [**تحسين الصور المُنشأة بشكل ثابت**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (يتم إنشاؤها وقت البناء وتخزينها مؤقتًا) ما لم تستخدم [وظائف ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) أو بيانات غير مخزنة مؤقتًا.
+> - يمكنك إنشاء صور متعددة في نفس الملف باستخدام [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
+
+أسهل طريقة لإنشاء صورة هي استخدام واجهة برمجة التطبيقات [ImageResponse](/docs/app/api-reference/functions/image-response) من `next/server`.
+
+```tsx filename="app/about/opengraph-image.tsx" switcher
+import { ImageResponse } from 'next/server'
+
+// تهيئة مقطع المسار
+export const runtime = 'edge'
+
+// بيانات وصفية للصورة
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default async function Image() {
+  // الخط
+  const interSemiBold = fetch(
+    new URL('./Inter-SemiBold.ttf', import.meta.url)
+  ).then((res) => res.arrayBuffer())
+
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 128,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        About Acme
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // لتسهيل الأمر، يمكننا إعادة استخدام إعدادات الحجم
+      // المُصدّرة من opengraph-image لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+      fonts: [
+        {
+          name: 'Inter',
+          data: await interSemiBold,
+          style: 'normal',
+          weight: 400,
+        },
+      ],
+    }
+  )
+}
+```
+
+```jsx filename="app/about/opengraph-image.js" switcher
+import { ImageResponse } from 'next/server'
+
+// تهيئة مقطع المسار
+export const runtime = 'edge'
+
+// بيانات وصفية للصورة
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default async function Image() {
+  // الخط
+  const interSemiBold = fetch(
+    new URL('./Inter-SemiBold.ttf', import.meta.url)
+  ).then((res) => res.arrayBuffer())
+
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 128,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        About Acme
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // لتسهيل الأمر، يمكننا إعادة استخدام إعدادات الحجم
+      // المُصدّرة من opengraph-image لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+      fonts: [
+        {
+          name: 'Inter',
+          data: await interSemiBold,
+          style: 'normal',
+          weight: 400,
+        },
+      ],
+    }
+  )
+}
+```
+
+```html filename="<head> output"
+<meta property="og:image" content="<generated>" />
+<meta property="og:image:alt" content="About Acme" />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+```
+
+### الخصائص (Props)
+
+تستقبل الدالة المُصدّرة افتراضيًا الخصائص التالية:
+
+#### `params` (اختياري)
+
+كائن يحتوي على كائن [معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من المقطع الجذري وصولاً إلى المقطع الذي يوجد فيه `opengraph-image` أو `twitter-image`.
+
+```tsx filename="app/shop/[slug]/opengraph-image.tsx" switcher
+export default function Image({ params }: { params: { slug: string } }) {
+  // ...
+}
+```
+
+```jsx filename="app/shop/[slug]/opengraph-image.js" switcher
+export default function Image({ params }) {
+  // ...
+}
+```
+
+| المسار                                      | URL         | `params`                  |
+| ------------------------------------------ | ----------- | ------------------------- |
+| `app/shop/opengraph-image.js`              | `/shop`     | `undefined`               |
+| `app/shop/[slug]/opengraph-image.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/opengraph-image.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/opengraph-image.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+### القيم المُرجعة
+
+يجب أن تُرجع الدالة المُصدّرة افتراضيًا `Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `ReadableStream` | `Response`.
+
+> **معلومة مفيدة**: `ImageResponse` تفي بهذا النوع من القيم المُرجعة.
+
+### تصدير التهيئة
+
+يمكنك تهيئة البيانات الوصفية للصورة اختياريًا عن طريق تصدير المتغيرات `alt` و `size` و `contentType` من مسار `opengraph-image` أو `twitter-image`.
+
+| الخيار                        | النوع                                                                                                            |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| [`alt`](#alt)                 | `string`                                                                                                        |
+| [`size`](#size)               | `{ width: number; height: number }`                                                                             |
+| [`contentType`](#contenttype) | `string` - [نوع MIME للصورة](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) |
+
+#### `alt`
+
+```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
+export const alt = 'My images alt text'
+
+export default function Image() {}
+```
+
+```jsx filename="opengraph-image.js | twitter-image.js" switcher
+export const alt = 'My images alt text'
+
+export default function Image() {}
+```
+
+```html filename="<head> output"
+<meta property="og:image:alt" content="My images alt text" />
+```
+
+#### `size`
+
+```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
+export const size = { width: 1200, height: 630 }
+
+export default function Image() {}
+```
+
+```jsx filename="opengraph-image.js | twitter-image.js" switcher
+export const size = { width: 1200, height: 630 }
+
+export default function Image() {}
+```
+
+```html filename="<head> output"
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+```
+
+#### `contentType`
+
+```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
+export const contentType = 'image/png'
+
+export default function Image() {}
+```
+
+```jsx filename="opengraph-image.js | twitter-image.js" switcher
+export const contentType = 'image/png'
+
+export default function Image() {}
+```
+
+```html filename="<head> output"
+<meta property="og:image:type" content="image/png" />
+```
+
+#### تهيئة مقطع المسار
+
+`opengraph-image` و `twitter-image` هما معالجان متخصصان [للمسارات](/docs/app/building-your-application/routing/route-handlers) يمكنهما استخدام نفس [خيارات تهيئة مقطع المسار](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات.
+
+| الخيار                                                                                             | النوع                                                     | الافتراضي    |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------- |
+| [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic)                 | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'` | `'auto'`   |
+| [`revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate)           | `false \| 'force-cache' \| 0 \| number`                  | `false`    |
+| [`runtime`](/docs/app/api-reference/file-conventions/route-segment-config#runtime)                 | `'nodejs' \| 'edge'`                                     | `'nodejs'` |
+| [`preferredRegion`](/docs/app/api-reference/file-conventions/route-segment-config#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]`     | `'auto'`   |
+
+```tsx filename="app/opengraph-image.tsx" switcher
+export const runtime = 'edge'
+
+export default function Image() {}
+```
+
+```jsx filename="app/opengraph-image.js" switcher
+export const runtime = 'edge'
+
+export default function Image() {}
+```
+
+### أمثلة
+
+#### استخدام بيانات خارجية
+
+يستخدم هذا المثال كائن `params` والبيانات الخارجية لإنشاء الصورة.
+
+> **معلومة مفيدة**:
+> بشكل افتراضي، سيتم [تحسين هذه الصورة المُنشأة بشكل ثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default). يمكنك تهيئة [خيارات](/docs/app/api-reference/functions/fetch) `fetch` الفردية أو [خيارات](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) مقاطع المسار لتغيير هذا السلوك.
+
+```tsx filename="app/posts/[slug]/opengraph-image.tsx" switcher
+import { ImageResponse } from 'next/server'
+
+export const runtime = 'edge'
+
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image({ params }: { params: { slug: string } }) {
+  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
+    res.json()
+  )
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 48,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {post.title}
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}
+```
+
+```jsx filename="app/posts/[slug]/opengraph-image.js" switcher
+import { ImageResponse } from 'next/server'
+
+export const runtime = 'edge'
+
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image({ params }) {
+  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
+    res.json()
+  )
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 48,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {post.title}
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                           |
+| --------- | ------------------------------------------------- |
+| `v13.3.0` | تم تقديم `opengraph-image` و `twitter-image`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx
new file mode 100644
index 00000000..75781bb7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx
@@ -0,0 +1,88 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:29.729Z
+title: ملف robots.txt
+description: مرجع API لملف robots.txt.
+---
+
+أضف أو أنشئ ملف `robots.txt` يتوافق مع [معيار استثناء الروبوتات](https://en.wikipedia.org/wiki/Robots.txt#Standard) في **الجذر** من دليل `app` لإخبار زواحف محركات البحث عن عناوين URL التي يمكنها الوصول إليها في موقعك.
+
+## ملف `robots.txt` الثابت
+
+```txt filename="app/robots.txt"
+User-Agent: *
+Allow: /
+Disallow: /private/
+
+Sitemap: https://acme.com/sitemap.xml
+```
+
+## إنشاء ملف Robots
+
+أضف ملف `robots.js` أو `robots.ts` الذي يُرجع [كائن `Robots`](#robots-object).
+
+```ts filename="app/robots.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/private/',
+    },
+    sitemap: 'https://acme.com/sitemap.xml',
+  }
+}
+```
+
+```js filename="app/robots.js" switcher
+export default function robots() {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/private/',
+    },
+    sitemap: 'https://acme.com/sitemap.xml',
+  }
+}
+```
+
+النتيجة:
+
+```txt
+User-Agent: *
+Allow: /
+Disallow: /private/
+
+Sitemap: https://acme.com/sitemap.xml
+```
+
+### كائن Robots
+
+```tsx
+type Robots = {
+  rules:
+    | {
+        userAgent?: string | string[]
+        allow?: string | string[]
+        disallow?: string | string[]
+        crawlDelay?: number
+      }
+    | Array<{
+        userAgent: string | string[]
+        allow?: string | string[]
+        disallow?: string | string[]
+        crawlDelay?: number
+      }>
+  sitemap?: string | string[]
+  host?: string
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات              |
+| --------- | -------------------- |
+| `v13.3.0` | تم إدخال `robots`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
new file mode 100644
index 00000000..5a87625a
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
@@ -0,0 +1,143 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:46.167Z
+title: ملف sitemap.xml
+description: مرجع API لملف `sitemap.xml`.
+---
+
+أضف أو أنشئ ملف `sitemap.xml` يتوافق مع [تنسيق Sitemaps XML](https://www.sitemaps.org/protocol.html) في **الجذر** من دليل `app` لمساعدة زواحف محركات البحث على فحص موقعك بكفاءة أكبر.
+
+## ملف `sitemap.xml` الثابت
+
+```xml filename="app/sitemap.xml"
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://acme.com</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>1</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/about</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/blog</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>
+```
+
+## إنشاء خريطة الموقع
+
+أضف ملف `sitemap.js` أو `sitemap.ts` الذي يُرجع [`Sitemap`](#sitemap-return-type).
+
+```ts filename="app/sitemap.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: 'https://acme.com',
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+    {
+      url: 'https://acme.com/about',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: 'https://acme.com/blog',
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.5,
+    },
+  ]
+}
+```
+
+```js filename="app/sitemap.js" switcher
+export default function sitemap() {
+  return [
+    {
+      url: 'https://acme.com',
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+    {
+      url: 'https://acme.com/about',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: 'https://acme.com/blog',
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.5,
+    },
+  ]
+}
+```
+
+النتيجة:
+
+```xml filename="acme.com/sitemap.xml"
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://acme.com</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>1</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/about</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/blog</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>
+```
+
+### نوع الإرجاع لخريطة الموقع
+
+```tsx
+type Sitemap = Array<{
+  url: string
+  lastModified?: string | Date
+  changeFrequency?:
+    | 'always'
+    | 'hourly'
+    | 'daily'
+    | 'weekly'
+    | 'monthly'
+    | 'yearly'
+    | 'never'
+  priority?: number
+}>
+```
+
+> **معلومة مفيدة**
+>
+> - في المستقبل، سندعم خرائط مواقع متعددة وفهارس خرائط المواقع.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                     |
+| --------- | ------------------------------------------------------------ |
+| `v13.3.0` | تم تقديم `sitemap`.                                        |
+| `v13.4.5` | إضافة سمات `changeFrequency` و `priority` إلى خرائط المواقع. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/default.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/default.mdx
new file mode 100644
index 00000000..6e324a08
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/default.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:02.258Z
+title: default.js
+description: مرجع API لملف default.js.
+---
+
+هذه الوثائق لا تزال قيد الكتابة. يرجى التحقق لاحقًا.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/error.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/error.mdx
new file mode 100644
index 00000000..cdd3e2a7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/error.mdx
@@ -0,0 +1,161 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:43.848Z
+title: error.js
+description: مرجع API لملف error.js الخاص.
+related:
+  title: تعلم المزيد عن معالجة الأخطاء
+  links:
+    - app/building-your-application/routing/error-handling
+---
+
+يحدد ملف **error** حدود واجهة المستخدم (UI boundary) لمعالجة الأخطاء في مقطع المسار.
+
+وهو مفيد لالتقاط الأخطاء **غير المتوقعة** التي تحدث في مكونات الخادم (Server Components) ومكونات العميل (Client Components) وعرض واجهة مستخدم بديلة.
+
+```tsx filename="app/dashboard/error.tsx" switcher
+'use client' // مكونات الأخطاء يجب أن تكون من نوع مكونات العميل
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة تقارير الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاسترداد عن طريق إعادة عرض المقطع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/dashboard/error.js" switcher
+'use client' // مكونات الأخطاء يجب أن تكون من نوع مكونات العميل
+
+import { useEffect } from 'react'
+
+export default function Error({ error, reset }) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة تقارير الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاسترداد عن طريق إعادة عرض المقطع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+## الخصائص (Props)
+
+### `error`
+
+نسخة من كائن [`Error`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error) يتم تمريرها إلى مكون العميل `error.js`.
+
+#### `error.message`
+
+رسالة الخطأ.
+
+- بالنسبة للأخطاء الممررة من مكونات العميل، ستكون هذه الرسالة الأصلية للخطأ.
+- بالنسبة للأخطاء الممررة من مكونات الخادم، ستكون رسالة خطأ عامة لتجنب تسريب تفاصيل حساسة. يمكن استخدام `errors.digest` لمطابقة الخطأ المقابل في سجلات الخادم.
+
+#### `error.digest`
+
+تجزئة (hash) يتم إنشاؤها تلقائيًا للخطأ الذي تم طرحه في مكون الخادم. يمكن استخدامها لمطابقة الخطأ المقابل في سجلات الخادم.
+
+### `reset`
+
+وظيفة لإعادة تعيين حدود الخطأ. عند تنفيذها، تحاول الوظيفة إعادة عرض محتويات حدود الخطأ. إذا نجحت، يتم استبدال مكون الخطأ الاحتياطي بنتيجة إعادة العرض.
+
+يمكن استخدامها لدفع المستخدم لمحاولة الاسترداد من الخطأ.
+
+> **معلومة مفيدة**:
+>
+> - حدود `error.js` يجب أن تكون **[مكونات عميل](/docs/app/building-your-application/rendering/client-components)**.
+> - في إصدارات الإنتاج، يتم إزالة التفاصيل المحددة للأخطاء الممررة من مكونات الخادم لتجنب تسريب معلومات حساسة.
+> - حدود `error.js` **لن** تتعامل مع الأخطاء المطروحة في مكون `layout.js` في **نفس** المقطع لأن حدود الخطأ متداخلة **داخل** مكون التخطيط ذلك.
+>   - للتعامل مع الأخطاء لتخطيط معين، ضع ملف `error.js` في المقطع الأب للتخطيط.
+>   - للتعامل مع الأخطاء داخل التخطيط الجذر أو القالب، استخدم متغيرًا من `error.js` يسمى `app/global-error.js`.
+
+## `global-error.js`
+
+للتعامل مع الأخطاء في `layout.js` الجذر بشكل خاص، استخدم متغيرًا من `error.js` يسمى `app/global-error.js` موجود في دليل الجذر `app`.
+
+```tsx filename="app/global-error.tsx" switcher
+'use client'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/global-error.js" switcher
+'use client'
+
+export default function GlobalError({ error, reset }) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - `global-error.js` يحل محل `layout.js` الجذر عند التنشيط ولذلك **يجب** أن يحدد علامات `<html>` و `<body>` الخاصة به.
+> - أثناء تصميم واجهة مستخدم للأخطاء، قد تجد أنه من المفيد استخدام [أدوات مطوري React](https://react.dev/learn/react-developer-tools) لتبديل حدود الأخطاء يدويًا.
+
+## not-found.js
+
+يستخدم ملف [`not-found`](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) لعرض واجهة المستخدم عند استدعاء دالة `notFound()` داخل مقطع مسار.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                    |
+| --------- | -------------------------- |
+| `v13.1.0` | تم تقديم `global-error`. |
+| `v13.0.0` | تم تقديم `error`.        |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/index.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/index.mdx
new file mode 100644
index 00000000..d903ca00
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:54.276Z
+title: اصطلاحات الملفات
+description: مرجع API لملفات Next.js الخاصة.
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/layout.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/layout.mdx
new file mode 100644
index 00000000..d61b24c7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/layout.mdx
@@ -0,0 +1,135 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:47.702Z
+title: ملف layout.js
+description: مرجع API لملف layout.js.
+---
+
+**التنسيق (Layout)** هو واجهة مستخدم مشتركة بين المسارات.
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <section>{children}</section>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+export default function DashboardLayout({ children }) {
+  return <section>{children}</section>
+}
+```
+
+**تنسيق الجذر (Root Layout)** هو أعلى تنسيق في دليل الجذر `app`. يُستخدم لتعريف علامات `<html>` و `<body>` وواجهات المستخدم المشتركة عالميًا.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+## الخصائص (Props)
+
+### `children` (مطلوب)
+
+يجب أن تقبل مكونات التنسيق وتستخدم خاصية `children`. أثناء التقديم، سيتم ملء `children` بمقاطع المسار التي يحيط بها التنسيق. ستكون هذه في الغالب مكون [التنسيق](/docs/app/building-your-application/routing/pages-and-layouts#pages) الفرعي (إذا وجد) أو [الصفحة](/docs/app/building-your-application/routing/pages-and-layouts#pages)، ولكن يمكن أن تكون أيضًا ملفات خاصة أخرى مثل [التحميل](/docs/app/building-your-application/routing/loading-ui-and-streaming) أو [الخطأ](/docs/app/building-your-application/routing/error-handling) عند الاقتضاء.
+
+### `params` (اختياري)
+
+كائن [معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من مقطع الجذر وصولاً إلى ذلك التنسيق.
+
+| مثال                           | URL            | `params`                  |
+| ------------------------------ | -------------- | ------------------------- |
+| `app/dashboard/[team]/layout.js`  | `/dashboard/1` | `{ team: '1' }`           |
+| `app/shop/[tag]/[item]/layout.js` | `/shop/1/2`    | `{ tag: '1', item: '2' }` |
+| `app/blog/[...slug]/layout.js`    | `/blog/1/2`    | `{ slug: ['1', '2'] }`    |
+
+مثال:
+
+```tsx filename="app/shop/[tag]/[item]/layout.tsx" switcher
+export default function ShopLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {
+    tag: string
+    item: string
+  }
+}) {
+  // URL -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  return <section>{children}</section>
+}
+```
+
+```jsx filename="app/shop/[tag]/[item]/layout.js" switcher
+export default function ShopLayout({ children, params }) {
+  // URL -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  return <section>{children}</section>
+}
+```
+
+## معلومات مفيدة
+
+### التنسيقات لا تستقبل `searchParams`
+
+على عكس [الصفحات](/docs/app/api-reference/file-conventions/page)، مكونات التنسيق **لا** تستقبل خاصية `searchParams`. هذا لأن التنسيق المشترك [لا يتم إعادة تقديمه أثناء التنقل](/docs/app/building-your-application/routing/linking-and-navigating#3-partial-rendering) مما قد يؤدي إلى `searchParams` قديمة بين عمليات التنقل.
+
+عند استخدام التنقل من جانب العميل، يقوم Next.js تلقائيًا بتقديم جزء الصفحة أسفل التنسيق المشترك بين مسارين فقط.
+
+على سبيل المثال، في هيكل الدليل التالي، `dashboard/layout.tsx` هو التنسيق المشترك لكل من `/dashboard/settings` و `/dashboard/analytics`:
+
+```txt highight={3} hideLineNumbers
+app
+└── dashboard
+    ├── layout.tsx
+    ├── settings
+    │   └── page.tsx
+    └── analytics
+        └── page.js
+```
+
+عند التنقل من `/dashboard/settings` إلى `/dashboard/analytics`، سيتم تقديم `page.tsx` في `/dashboard/analytics` على الخادم لأنه واجهة المستخدم التي تغيرت، بينما لن يتم إعادة تقديم `dashboard/layout.tsx` لأنه واجهة مستخدم مشتركة بين المسارين.
+
+يسمح هذا التحسين للأداء بالتنقل بين الصفحات التي تشترك في تنسيق أن يكون أسرع حيث يتعين فقط تشغيل جلب البيانات وتقديم الصفحة، بدلاً من المسار بالكامل الذي قد يتضمن تنسيقات مشتركة تجلب بياناتها الخاصة.
+
+نظرًا لأن `dashboard/layout.tsx` لا يعاد تقديمه، قد تصبح خاصية `searchParams` في مكون الخادم للتنسيق **قديمة** بعد التنقل.
+
+- بدلاً من ذلك، استخدم خاصية [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) للصفحة أو خطاف [`useSearchParams`](/docs/app/api-reference/functions/use-search-params) في مكون العميل، والذي يعاد تقديمه على العميل بأحدث `searchParams`.
+
+### تنسيقات الجذر
+
+- **يجب** أن يتضمن دليل `app` ملف `app/layout.js` للجذر.
+- **يجب** أن يحدد تنسيق الجذر علامات `<html>` و `<body>`.
+  - **لا يجب** إضافة علامات `<head>` يدويًا مثل `<title>` و `<meta>` إلى تنسيقات الجذر. بدلاً من ذلك، يجب استخدام [واجهة برمجة تطبيقات البيانات الوصفية (Metadata API)](/docs/app/api-reference/functions/generate-metadata) التي تتعامل تلقائيًا مع المتطلبات المتقدمة مثل البث وإزالة تكرار عناصر `<head>`.
+- يمكنك استخدام [مجموعات المسارات (route groups)](/docs/app/building-your-application/routing/route-groups) لإنشاء تنسيقات جذر متعددة.
+  - التنقل **بين تنسيقات جذر متعددة** سيؤدي إلى **تحميل كامل للصفحة** (على عكس التنقل من جانب العميل). على سبيل المثال، التنقل من `/cart` الذي يستخدم `app/(shop)/layout.js` إلى `/blog` الذي يستخدم `app/(marketing)/layout.js` سيؤدي إلى تحميل كامل للصفحة. هذا **ينطبق فقط** على تنسيقات الجذر المتعددة.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات              |
+| --------- | ---------------------- |
+| `v13.0.0` | تم تقديم `layout`.     |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/loading.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/loading.mdx
new file mode 100644
index 00000000..a7e65acb
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/loading.mdx
@@ -0,0 +1,36 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:59.197Z
+title: loading.js
+description: مرجع API لملف loading.js.
+---
+
+يمكن لملف **تحميل** إنشاء حالات تحميل فورية مبنية على [Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming).
+
+بشكل افتراضي، هذا الملف هو [مكون خادم (Server Component)](/docs/app/building-your-application/rendering/server-components) - ولكن يمكن أيضًا استخدامه كمكون عميل (Client Component) عبر توجيه `"use client"`.
+
+```tsx filename="app/feed/loading.tsx" switcher
+export default function Loading() {
+  // أو مكون هيكل تحميل مخصص
+  return <p>'Loading...'</p>
+}
+```
+
+```jsx filename="app/feed/loading.js" switcher
+export default function Loading() {
+  // أو مكون هيكل تحميل مخصص
+  return <p>'Loading...'</p>
+}
+```
+
+مكونات واجهة المستخدم للتحميل لا تقبل أي معاملات.
+
+> **معلومة مفيدة**
+>
+> - أثناء تصميم واجهة مستخدم التحميل، قد تجد أنه من المفيد استخدام [أدوات مطوري React (React Developer Tools)](https://react.dev/learn/react-developer-tools) لتبديل حدود Suspense يدويًا.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات               |
+| --------- | --------------------- |
+| `v13.0.0` | تم تقديم `loading`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/not-found.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/not-found.mdx
new file mode 100644
index 00000000..83ab0e18
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/not-found.mdx
@@ -0,0 +1,93 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:05.059Z
+title: not-found.js
+description: مرجع API لملف not-found.js.
+---
+
+يتم استخدام ملف **not-found** لعرض واجهة المستخدم عند استدعاء دالة [`notFound`](/docs/app/api-reference/functions/not-found) داخل جزء من المسار. بالإضافة إلى تقديم واجهة مستخدم مخصصة، سيقوم Next.js بإرجاع رمز حالة HTTP `200` للاستجابات المُدفقة (streamed)، و `404` للاستجابات غير المدفوعة.
+
+```tsx filename="app/blog/not-found.tsx" switcher
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/blog/not-found.js" switcher
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  )
+}
+```
+
+> **معلومة مفيدة**: بالإضافة إلى التقاط أخطاء `notFound()` المتوقعة، فإن ملف `app/not-found.js` الأساسي يتعامل أيضًا مع أي عناوين URL غير متطابقة لتطبيقك بالكامل. هذا يعني أن المستخدمين الذين يزورون عنوان URL غير مدعوم من تطبيقك سوف يرون واجهة المستخدم المعروضة من ملف `app/not-found.js`.
+
+## الخصائص (Props)
+
+لا تقبل مكونات `not-found.js` أي خصائص.
+
+## جلب البيانات (Data Fetching)
+
+بشكل افتراضي، `not-found` هو مكون خادم (Server Component). يمكنك تحديده كـ `async` لجلب وعرض البيانات:
+
+```tsx filename="app/blog/not-found.tsx" switcher
+import Link from 'next/link'
+import { headers } from 'next/headers'
+
+export default async function NotFound() {
+  const headersList = headers()
+  const domain = headersList.get('host')
+  const data = await getSiteData(domain)
+  return (
+    <div>
+      <h2>Not Found: {data.name}</h2>
+      <p>Could not find requested resource</p>
+      <p>
+        View <Link href="/blog">all posts</Link>
+      </p>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/blog/not-found.jsx" switcher
+import Link from 'next/link'
+import { headers } from 'next/headers'
+
+export default async function NotFound() {
+  const headersList = headers()
+  const domain = headersList.get('host')
+  const data = await getSiteData(domain)
+  return (
+    <div>
+      <h2>Not Found: {data.name}</h2>
+      <p>Could not find requested resource</p>
+      <p>
+        View <Link href="/blog">all posts</Link>
+      </p>
+    </div>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                             |
+| --------- | --------------------------------------------------- |
+| `v13.3.0` | ملف `app/not-found` الأساسي يتعامل مع عناوين URL غير المتطابقة عالميًا. |
+| `v13.0.0` | تم تقديم `not-found`.                             |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/page.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/page.mdx
new file mode 100644
index 00000000..a5286d70
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/page.mdx
@@ -0,0 +1,59 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:51.664Z
+title: ملف page.js
+description: مرجع API لملف page.js.
+---
+
+**الصفحة** هي واجهة مستخدم فريدة لكل مسار.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function Page({
+  params,
+  searchParams,
+}: {
+  params: { slug: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}) {
+  return <h1>My Page</h1>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export default function Page({ params, searchParams }) {
+  return <h1>My Page</h1>
+}
+```
+
+## الخصائص
+
+### `params` (اختياري)
+
+كائن يحتوي على [معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من الجزء الجذري وصولاً إلى تلك الصفحة. على سبيل المثال:
+
+| المثال                               | الرابط       | `params`                       |
+| ------------------------------------ | ----------- | ------------------------------ |
+| `app/shop/[slug]/page.js`            | `/shop/1`   | `{ slug: '1' }`                |
+| `app/shop/[category]/[item]/page.js` | `/shop/1/2` | `{ category: '1', item: '2' }` |
+| `app/shop/[...slug]/page.js`         | `/shop/1/2` | `{ slug: ['1', '2'] }`         |
+
+### `searchParams` (اختياري)
+
+كائن يحتوي على [معلمات البحث](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) لرابط URL الحالي. على سبيل المثال:
+
+| الرابط             | `searchParams`       |
+| --------------- | -------------------- |
+| `/shop?a=1`     | `{ a: '1' }`         |
+| `/shop?a=1&b=2` | `{ a: '1', b: '2' }` |
+| `/shop?a=1&a=2` | `{ a: ['1', '2'] }`  |
+
+> **معلومة مفيدة**:
+>
+> - `searchParams` هو [واجهة برمجة تطبيقات ديناميكية (Dynamic API)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) لا يمكن معرفة قيمها مسبقًا. استخدامها سيؤدي إلى تحويل الصفحة إلى [عرض ديناميكي (dynamic rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) عند وقت الطلب.
+> - `searchParams` يُرجع كائن JavaScript عادي وليس نسخة من `URLSearchParams`.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات            |
+| --------- | ------------------ |
+| `v13.0.0` | تم تقديم `page`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
new file mode 100644
index 00000000..287a848d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
@@ -0,0 +1,227 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:02:49.928Z
+title: تكوين جزء المسار (Route Segment Config)
+description: تعرف على كيفية تكوين خيارات أجزاء المسار في Next.js.
+---
+
+تتيح لك خيارات جزء المسار تكوين سلوك [الصفحة](/docs/app/building-your-application/routing/pages-and-layouts) أو [التخطيط](/docs/app/building-your-application/routing/pages-and-layouts) أو [معالج المسار](/docs/app/building-your-application/routing/route-handlers) من خلال تصدير المتغيرات التالية مباشرة:
+
+| الخيار                                | النوع                                                                                                                      | الافتراضي                    |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| [`dynamic`](#dynamic)                 | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`                                                                  | `'auto'`                   |
+| [`dynamicParams`](#dynamicparams)     | `boolean`                                                                                                                 | `true`                     |
+| [`revalidate`](#revalidate)           | `false \| 'force-cache' \| 0 \| number`                                                                                   | `false`                    |
+| [`fetchCache`](#fetchcache)           | `'auto' \| 'default-cache' \| 'only-cache' \| 'force-cache' \| 'force-no-store' \| 'default-no-store' \| 'only-no-store'` | `'auto'`                   |
+| [`runtime`](#runtime)                 | `'nodejs' \| 'edge'`                                                                                                      | `'nodejs'`                 |
+| [`preferredRegion`](#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]`                                                                      | `'auto'`                   |
+| [`maxDuration`](#maxduration)         | `number`                                                                                                                  | يتم تعيينه بواسطة منصة النشر |
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+export const maxDuration = 5
+
+export default function MyComponent() {}
+```
+
+```jsx filename="layout.js | page.js | route.js" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+export const maxDuration = 5
+
+export default function MyComponent() {}
+```
+
+> **معلومة مفيدة**:
+>
+> - يجب أن تكون قيم خيارات التكوين قابلة للتحليل الثابت حاليًا. على سبيل المثال `revalidate = 600` صالحة، لكن `revalidate = 60 * 10` غير صالحة.
+
+## الخيارات
+
+### `dynamic`
+
+تغيير السلوك الديناميكي للتخطيط أو الصفحة ليصبح ثابتًا بالكامل أو ديناميكيًا بالكامل.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const dynamic = 'auto'
+// 'auto' | 'force-dynamic' | 'error' | 'force-static'
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const dynamic = 'auto'
+// 'auto' | 'force-dynamic' | 'error' | 'force-static'
+```
+
+> **معلومة مفيدة**: يفضل النموذج الجديد في دليل `app` التحكم الدقيق في التخزين المؤقت على مستوى طلب `fetch` بدلاً من النموذج الثنائي الكلي في دليل `pages` باستخدام `getServerSideProps` و `getStaticProps` على مستوى الصفحة. خيار `dynamic` هو طريقة للعودة إلى النموذج السابق كتسهيل ويوفر مسار هجرة أبسط.
+
+- **`'auto'`** (الافتراضي): الخيار الافتراضي لتخزين أكبر قدر ممكن دون منع أي مكونات من اختيار السلوك الديناميكي.
+- **`'force-dynamic'`**: فرض التصيير الديناميكي وجلب البيانات غير المخزنة للتخطيط أو الصفحة عن طريق تعطيل جميع التخزين المؤقت لطلبات `fetch` وإعادة التحقق دائمًا. يعادل هذا الخيار:
+  - `getServerSideProps()` في دليل `pages`.
+  - تعيين خيار كل طلب `fetch()` في التخطيط أو الصفحة إلى `{ cache: 'no-store', next: { revalidate: 0 } }`.
+  - تعيين تكوين الجزء إلى `export const fetchCache = 'force-no-store'`
+- **`'error'`**: فرض التصيير الثابت وتخزين بيانات التخطيط أو الصفحة عن طريق التسبب في خطأ إذا استخدمت أي مكونات [وظائف ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) أو جلب بيانات غير مخزنة. يعادل هذا الخيار:
+  - `getStaticProps()` في دليل `pages`.
+  - تعيين خيار كل طلب `fetch()` في التخطيط أو الصفحة إلى `{ cache: 'force-cache' }`.
+  - تعيين تكوين الجزء إلى `fetchCache = 'only-cache', dynamicParams = false`.
+  - `dynamic = 'error'` يغير الافتراضي لـ `dynamicParams` من `true` إلى `false`. يمكنك العودة إلى تصيير الصفحات ديناميكيًا للمعاملات الديناميكية غير المولدة بواسطة `generateStaticParams` عن طريق تعيين `dynamicParams = true` يدويًا.
+- **`'force-static'`**: فرض التصيير الثابت وتخزين بيانات التخطيط أو الصفحة عن طريق إجبار [`cookies()`](/docs/app/api-reference/functions/cookies) و [`headers()`](/docs/app/api-reference/functions/headers) و [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) على إرجاع قيم فارغة.
+
+> **معلومة مفيدة**:
+>
+> - يمكن العثور على تعليمات [كيفية الهجرة](/docs/app/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods) من `getServerSideProps` و `getStaticProps` إلى `dynamic: 'force-dynamic'` و `dynamic: 'error'` في [دليل الترقية](/docs/app/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods).
+
+### `dynamicParams`
+
+التحكم في ما يحدث عند زيارة جزء ديناميكي لم يتم توليده باستخدام [generateStaticParams](/docs/app/api-reference/functions/generate-static-params).
+
+```tsx filename="layout.tsx | page.tsx" switcher
+export const dynamicParams = true // true | false,
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const dynamicParams = true // true | false,
+```
+
+- **`true`** (الافتراضي): يتم توليد الأجزاء الديناميكية غير المضمنة في `generateStaticParams عند الطلب.
+- **`false`**: سترجع الأجزاء الديناميكية غير المضمنة في `generateStaticParams` خطأ 404.
+
+> **معلومة مفيدة**:
+>
+> - يحل هذا الخيار محل خيار `fallback: true | false | blocking` لـ `getStaticPaths` في دليل `pages`.
+> - عندما يكون `dynamicParams = true`، يستخدم الجزء [تصيير الخادم المتدفق (Streaming Server Rendering)](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense).
+> - إذا تم استخدام `dynamic = 'error'` و `dynamic = 'force-static'`، فسيغير الافتراضي لـ `dynamicParams` إلى `false`.
+
+### `revalidate`
+
+تعيين وقت إعادة التحقق الافتراضي للتخطيط أو الصفحة. لا يتجاوز هذا الخيار قيمة `revalidate` المعينة بواسطة طلبات `fetch` الفردية.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const revalidate = false
+// false | 'force-cache' | 0 | number
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const revalidate = false
+// false | 'force-cache' | 0 | number
+```
+
+- **`false`**: (الافتراضي) الإرشاد الافتراضي لتخزين أي طلبات `fetch` التي تعين خيار `cache` إلى `'force-cache'` أو التي يتم اكتشافها قبل استخدام [وظيفة ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions). يعادل دلاليًا `revalidate: Infinity` مما يعني بشكل فعال أنه يجب تخزين المورد إلى أجل غير مسمى. لا يزال بإمكان طلبات `fetch` الفردية استخدام `cache: 'no-store'` أو `revalidate: 0` لتجنب التخزين وجعل المسار معروضًا ديناميكيًا. أو تعيين `revalidate` إلى رقم موجب أقل من الافتراضي للمسار لزيادة تكرار إعادة التحقق للمسار.
+- **`0`**: التأكد من أن التخطيط أو الصفحة يتم [تصييره ديناميكيًا](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) دائمًا حتى إذا لم يتم اكتشاف أي وظائف ديناميكية أو جلب بيانات غير مخزنة. يغير هذا الخيار الافتراضي لطلبات `fetch` التي لا تعين خيار `cache` إلى `'no-store'` لكنه يترك طلبات `fetch` التي تختار `'force-cache'` أو تستخدم `revalidate` موجبًا كما هي.
+- **`number`**: (بالثواني) تعيين تكرار إعادة التحقق الافتراضي للتخطيط أو الصفحة إلى `n` ثانية.
+
+> **معلومة مفيدة**: خيار `revalidate` متاح فقط عند استخدام [وقت تشغيل Node.js](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#nodejs-runtime). هذا يعني أن استخدام خيار `revalidate` مع `runtime = 'edge'` لن يعمل.
+
+#### تكرار إعادة التحقق
+
+- سيحدد أقل `revalidate` عبر كل تخطيط وصفحة لمسار واحد تكرار إعادة التحقق للمسار _بالكامل_. يضمن هذا إعادة التحقق من الصفحات الفرعية بنفس تكرار تخطيطاتها الأصلية.
+- يمكن لطلبات `fetch` الفردية تعيين `revalidate` أقل من `revalidate` الافتراضي للمسار لزيادة تكرار إعادة التحقق للمسار بالكامل. يتيح لك هذا الاختيار ديناميكيًا تكرار إعادة التحقق الأكثر تكرارًا لمسارات معينة بناءً على بعض المعايير.
+
+### `fetchCache`
+
+<details>
+  <summary>هذا خيار متقدم يجب استخدامه فقط إذا كنت بحاجة إلى تجاوز السلوك الافتراضي.</summary>
+
+بشكل افتراضي، سيخزن Next.js **أي** طلبات `fetch()` يمكن الوصول إليها **قبل** استخدام أي [وظائف ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) **ولن** يخزن طلبات `fetch` التي يتم اكتشافها **بعد** استخدام الوظائف الديناميكية.
+
+يسمح لك `fetchCache` بتجاوز خيار `cache` الافتراضي لجميع طلبات `fetch` في تخطيط أو صفحة.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const fetchCache = 'auto'
+// 'auto' | 'default-cache' | 'only-cache'
+// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const fetchCache = 'auto'
+// 'auto' | 'default-cache' | 'only-cache'
+// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
+```
+
+- **`'auto'`** (الافتراضي)- الخيار الافتراضي لتخزين طلبات `fetch` قبل الوظائف الديناميكية مع خيار `cache` الذي توفره وعدم تخزين طلبات `fetch` بعد الوظائف الديناميكية.
+- **`'default-cache'`**: السماح بأي خيار `cache` يتم تمريره إلى `fetch` ولكن إذا لم يتم توفير خيار، فسيتم تعيين خيار `cache` إلى `'force-cache'`. هذا يعني أنه حتى طلبات `fetch` بعد الوظائف الديناميكية تعتبر ثابتة.
+- **`'only-cache'`**: التأكد من أن جميع طلبات `fetch` تختار التخزين عن طريق تغيير الافتراضي إلى `cache: 'force-cache'` إذا لم يتم توفير خيار والتسبب في خطأ إذا استخدمت أي طلبات `fetch` `cache: 'no-store'`.
+- **`'force-cache'`**: التأكد من أن جميع طلبات `fetch` تختار التخزين عن طريق تعيين خيار `cache` لجميع طلبات `fetch` إلى `'force-cache'`.
+- **`'default-no-store'`**: السماح بأي خيار `cache` يتم تمريره إلى `fetch` ولكن إذا لم يتم توفير خيار، فسيتم تعيين خيار `cache` إلى `'no-store'`. هذا يعني أنه حتى طلبات `fetch` قبل الوظائف الديناميكية تعتبر ديناميكية.
+- **`'only-no-store'`**: التأكد من أن جميع طلبات `fetch` تختار عدم التخزين عن طريق تغيير الافتراضي إلى `cache: 'no-store'` إذا لم يتم توفير خيار والتسبب في خطأ إذا استخدمت أي طلبات `fetch` `cache: 'force-cache'`
+- **`'force-no-store'`**: التأكد من أن جميع طلبات `fetch` تختار عدم التخزين عن طريق تعيين خيار `cache` لجميع طلبات `fetch` إلى `'no-store'`. يجبر هذا جميع طلبات `fetch` على إعادة الجلب في كل طلب حتى إذا قدمت خيار `'force-cache'`.
+
+#### سلوك أجزاء المسار المتقاطعة
+
+- يجب أن تكون أي خيارات معينة عبر كل تخطيط وصفحة لمسار واحد متوافقة مع بعضها البعض.
+  - إذا تم توفير كل من `'only-cache'` و `'force-cache'`، فإن `'force-cache'` يفوز. إذا تم توفير كل من `'only-no-store'` و `'force-no-store'`، فإن `'force-no-store'` يفوز. يغير خيار القوة السلوك عبر المسار بحيث يمنع جزء واحد مع `'force-*'` أي أخطاء ناتجة عن `'only-*'`.
+  - الهدف من خيارات `'only-*'` و `force-*'` هو ضمان أن يكون المسار بالكامل إما ثابتًا بالكامل أو ديناميكيًا بالكامل. هذا يعني:
+    - لا يُسمح بدمج `'only-cache'` و `'only-no-store'` في مسار واحد.
+    - لا يُسمح بدمج `'force-cache'` و `'force-no-store'` في مسار واحد.
+  - لا يمكن للوالد توفير `'default-no-store'` إذا كان الابن يوفر `'auto'` أو `'*-cache'` لأن ذلك قد يجعل نفس طلب `fetch` له سلوك مختلف.
+- يُوصى عمومًا بترك التخطيطات الأصلية المشتركة كـ `'auto'` وتخصيص الخيارات حيث تختلف الأجزاء الفرعية.
+
+</details>
+
+### `runtime`
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const runtime = 'nodejs'
+// 'edge' | 'nodejs'
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const runtime = 'nodejs'
+// 'edge' | 'nodejs'
+```
+
+- **`nodejs`** (الافتراضي)
+- **`edge`**
+
+تعرف على المزيد حول [وقت تشغيل Edge و Node.js](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+
+### `preferredRegion`
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const preferredRegion = 'auto'
+// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const preferredRegion = 'auto'
+// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
+```
+
+يعتمد دعم `preferredRegion` والمناطق المدعومة على منصة النشر الخاصة بك.
+
+> **معلومة مفيدة**:
+>
+> - إذا لم يتم تحديد `preferredRegion`، فسوف يرث خيار أقرب تخطيط أب.
+> - التخطيط الجذر يحدد افتراضيًا جميع المناطق.
+
+### `maxDuration`
+
+بناءً على منصة النشر الخاصة بك، قد تتمكن من استخدام وقت تنفيذ افتراضي أعلى لوظيفتك.
+يسمح لك هذا الإعداد بالاختيار لوقت تنفيذ أعلى ضمن حدود خطتك.
+**ملاحظة**: يتطلب هذا الإعداد Next.js `13.4.10` أو أعلى.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const maxDuration = 5
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const maxDuration = 5
+```
+
+> **معلومة مفيدة**:
+>
+> - إذا لم يتم تحديد `maxDuration`، فإن القيمة الافتراضية تعتمد على منصة النشر وخطتك.
+
+### `generateStaticParams`
+
+يمكن استخدام الدالة `generateStaticParams` بالاشتراك مع [أجزاء المسار الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) لتحديد قائمة معلمات جزء المسار التي سيتم توليدها ثابتًا في وقت البناء بدلاً من عند الطلب في وقت الطلب.
+
+راجع [مرجع API](/docs/app/api-reference/functions/generate-static-params) لمزيد من التفاصيل.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/route.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/route.mdx
new file mode 100644
index 00000000..ff3d6892
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/route.mdx
@@ -0,0 +1,80 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:03.221Z
+title: ملف route.js
+description: مرجع API لملف route.js الخاص.
+---
+
+تسمح لك معالجات المسارات (Route Handlers) بإنشاء معالجات طلبات مخصصة لمسار معين باستخدام واجهات برمجة التطبيقات [Request](https://developer.mozilla.org/docs/Web/API/Request) و [Response](https://developer.mozilla.org/docs/Web/API/Response) الخاصة بالويب.
+
+## طرق HTTP
+
+يسمح لك ملف **المسار** بإنشاء معالجات طلبات مخصصة لمسار معين. يتم دعم طرق [HTTP](https://developer.mozilla.org/docs/Web/HTTP/Methods) التالية: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, و `OPTIONS`.
+
+```ts filename="route.ts" switcher
+export async function GET(request: Request) {}
+
+export async function HEAD(request: Request) {}
+
+export async function POST(request: Request) {}
+
+export async function PUT(request: Request) {}
+
+export async function DELETE(request: Request) {}
+
+export async function PATCH(request: Request) {}
+
+// إذا لم يتم تعريف `OPTIONS`، سيقوم Next.js تلقائيًا بتنفيذ `OPTIONS` وتعيين رأس الاستجابة `Allow` المناسب بناءً على الطرق الأخرى المعرفة في معالج المسار.
+export async function OPTIONS(request: Request) {}
+```
+
+```js filename="route.js" switcher
+export async function GET(request) {}
+
+export async function HEAD(request) {}
+
+export async function POST(request) {}
+
+export async function PUT(request) {}
+
+export async function DELETE(request) {}
+
+export async function PATCH(request) {}
+
+// إذا لم يتم تعريف `OPTIONS`، سيقوم Next.js تلقائيًا بتنفيذ `OPTIONS` وتعيين رأس الاستجابة `Allow` المناسب بناءً على الطرق الأخرى المعرفة في معالج المسار.
+export async function OPTIONS(request) {}
+```
+
+> **معلومة مفيدة**: معالجات المسارات متاحة فقط داخل دليل `app`. **لا تحتاج** إلى استخدام مسارات API (`pages`) ومعالجات المسارات (`app`) معًا، حيث يجب أن تكون معالجات المسارات قادرة على التعامل مع جميع حالات الاستخدام.
+
+## المعاملات
+
+### `request` (اختياري)
+
+كائن `request` هو كائن [NextRequest](/docs/app/api-reference/functions/next-request)، وهو امتداد لواجهة برمجة التطبيقات [Request](https://developer.mozilla.org/docs/Web/API/Request) الخاصة بالويب. يمنحك `NextRequest` تحكمًا أكبر في الطلب الوارد، بما في ذلك الوصول السهل إلى `cookies` وكائن URL ممتد ومحلل `nextUrl`.
+
+### `context` (اختياري)
+
+```ts filename="app/dashboard/[team]/route.js"
+export async function GET(request, context: { params }) {
+  const team = params.team // '1'
+}
+```
+
+حاليًا، القيمة الوحيدة لـ `context` هي `params`، وهو كائن يحتوي على [معاملات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) للمسار الحالي.
+
+| مثال                          | URL            | `params`                  |
+| ----------------------------- | -------------- | ------------------------- |
+| `app/dashboard/[team]/route.js`  | `/dashboard/1` | `{ team: '1' }`           |
+| `app/shop/[tag]/[item]/route.js` | `/shop/1/2`    | `{ tag: '1', item: '2' }` |
+| `app/blog/[...slug]/route.js`    | `/blog/1/2`    | `{ slug: ['1', '2'] }`    |
+
+## NextResponse
+
+يمكن لمعالجات المسارات تمديد واجهة برمجة التطبيقات Response الخاصة بالويب عن طريق إرجاع كائن `NextResponse`. هذا يسمح لك بسهولة تعيين ملفات تعريف الارتباط (cookies) والرؤوس (headers) وإعادة التوجيه (redirect) وإعادة الكتابة (rewrite). [عرض مرجع API](/docs/app/api-reference/functions/next-response).
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                        |
+| --------- | ------------------------------ |
+| `v13.2.0` | تم تقديم معالجات المسارات. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/template.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/template.mdx
new file mode 100644
index 00000000..74f6ed90
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/02-file-conventions/template.mdx
@@ -0,0 +1,57 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:49.217Z
+title: template.js
+description: مرجع API لملف template.js.
+---
+
+ملف **القالب (template)** يشبه [التخطيط (layout)](/docs/app/building-your-application/routing/pages-and-layouts#layouts) من حيث أنه يغلف كل تخطيط فرعي أو صفحة. ولكن على عكس التخطيطات التي تبقى عبر المسارات وتحافظ على الحالة، فإن القوالب تنشئ نسخة جديدة لكل من عناصرها الفرعية عند التنقل.
+
+```tsx filename="app/template.tsx" switcher
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>
+}
+```
+
+```jsx filename="app/template.jsx" switcher
+export default function Template({ children }) {
+  return <div>{children}</div>
+}
+```
+
+<Image
+  alt="ملف template.js الخاص"
+  srcLight="/docs/light/template-special-file.png"
+  srcDark="/docs/dark/template-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+على الرغم من أنه أقل شيوعًا، قد تختار استخدام القالب بدلاً من التخطيط إذا كنت تريد:
+
+- ميزات تعتمد على `useEffect` (مثل تسجيل مشاهدات الصفحة) و `useState` (مثل نموذج تعليقات لكل صفحة).
+- تغيير السلوك الافتراضي للإطار. على سبيل المثال، حدود Suspense داخل التخطيطات تظهر الحالة الاحتياطية فقط عند تحميل التخطيط لأول مرة وليس عند تبديل الصفحات. أما في القوالب، فإن الحالة الاحتياطية تظهر في كل تنقل.
+
+## الخصائص
+
+### `children` (مطلوب)
+
+يجب أن تقبل مكونات القالب وتستخدم خاصية `children`. يتم عرض `template` بين [التخطيط (layout)](/docs/app/api-reference/file-conventions/layout) وعناصره الفرعية. على سبيل المثال:
+
+```jsx filename="Output"
+<Layout>
+  {/* لاحظ أن القالب يحصل على مفتاح فريد. */}
+  <Template key={routeParam}>{children}</Template>
+</Layout>
+```
+
+> **معلومة مفيدة**:
+>
+> - افتراضيًا، `template` هو [مكون خادم (Server Component)](/docs/app/building-your-application/rendering/server-components)، ولكن يمكن أيضًا استخدامه كـ [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components) من خلال توجيه `"use client"`.
+> - عندما ينتقل المستخدم بين المسارات التي تشترك في `template`، يتم تحميل نسخة جديدة من المكون، يتم إعادة إنشاء عناصر DOM، **لا** يتم الحفاظ على الحالة، ويتم إعادة مزامنة التأثيرات.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                |
+| --------- | ---------------------- |
+| `v13.0.0` | تم إدخال `template`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/cookies.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/cookies.mdx
new file mode 100644
index 00000000..15d72617
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/cookies.mdx
@@ -0,0 +1,159 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:53.445Z
+title: ملفات تعريف الارتباط (cookies)
+description: مرجع API لوظيفة ملفات تعريف الارتباط (cookies).
+related:
+  title: الخطوات التالية
+  description: لمزيد من المعلومات حول ما يمكنك القيام به بعد ذلك، نوصي بالأقسام التالية
+  links:
+    - app/building-your-application/data-fetching/forms-and-mutations
+---
+
+تتيح لك وظيفة `cookies` قراءة ملفات تعريف الارتباط (cookies) الواردة في طلب HTTP من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components) أو كتابة ملفات تعريف الارتباط الصادرة في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/forms-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+> **معلومة مفيدة**: `cookies()` هي [وظيفة ديناميكية (Dynamic Function)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) لا يمكن معرفة قيمها المُرجعة مسبقًا. استخدامها في تخطيط أو صفحة سيجعل المسار يعتمد على [التصيير الديناميكي (dynamic rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) وقت الطلب.
+
+## `cookies().get(name)`
+
+طريقة تأخذ اسم ملف تعريف الارتباط وتُرجع كائنًا يحتوي على الاسم والقيمة. إذا لم يتم العثور على ملف تعريف الارتباط بالاسم المحدد، تُرجع `undefined`. إذا تطابق عدة ملفات، سترجع فقط أول تطابق.
+
+```jsx filename="app/page.js"
+import { cookies } from 'next/headers'
+
+export default function Page() {
+  const cookieStore = cookies()
+  const theme = cookieStore.get('theme')
+  return '...'
+}
+```
+
+## `cookies().getAll()`
+
+طريقة مشابهة لـ `get`، ولكنها تُرجع قائمة بجميع ملفات تعريف الارتباط المتطابقة مع الاسم. إذا لم يتم تحديد الاسم، تُرجع جميع ملفات تعريف الارتباط المتاحة.
+
+```jsx filename="app/page.js"
+import { cookies } from 'next/headers'
+
+export default function Page() {
+  const cookieStore = cookies()
+  return cookieStore.getAll().map((cookie) => (
+    <div key={cookie.name}>
+      <p>Name: {cookie.name}</p>
+      <p>Value: {cookie.value}</p>
+    </div>
+  ))
+}
+```
+
+## `cookies().has(name)`
+
+طريقة تأخذ اسم ملف تعريف الارتباط وتُرجع قيمة `boolean` بناءً على وجود الملف (`true`) أو عدم وجوده (`false`).
+
+```jsx filename="app/page.js"
+import { cookies } from 'next/headers'
+
+export default function Page() {
+  const cookiesList = cookies()
+  const hasCookie = cookiesList.has('theme')
+  return '...'
+}
+```
+
+## `cookies().set(name, value, options)`
+
+طريقة تأخذ اسم ملف تعريف الارتباط، القيمة، والخيارات وتقوم بتعيين ملف تعريف الارتباط الصادر.
+
+> **معلومة مفيدة**: لا يسمح HTTP بتعيين ملفات تعريف الارتباط بعد بدء البث، لذا يجب استخدام `.set()` في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/forms-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function create(data) {
+  cookies().set('name', 'lee')
+  // أو
+  cookies().set('name', 'lee', { secure: true })
+  // أو
+  cookies().set({
+    name: 'name',
+    value: 'lee',
+    httpOnly: true,
+    path: '/',
+  })
+}
+```
+
+## حذف ملفات تعريف الارتباط
+
+> **معلومة مفيدة**: يمكنك فقط حذف ملفات تعريف الارتباط في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/forms-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+هناك عدة خيارات لحذف ملف تعريف الارتباط:
+
+### `cookies().delete(name)`
+
+يمكنك حذف ملف تعريف الارتباط صراحةً بالاسم المحدد.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function create(data) {
+  cookies().delete('name')
+}
+```
+
+### `cookies().set(name, '')`
+
+بدلاً من ذلك، يمكنك تعيين ملف تعريف ارتباط جديد بنفس الاسم وقيمة فارغة.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function create(data) {
+  cookies().set('name', '')
+}
+```
+
+> **معلومة مفيدة**: `.set()` متاح فقط في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/forms-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+### `cookies().set(name, value, { maxAge: 0 })`
+
+تعيين `maxAge` إلى 0 سيجعل ملف تعريف الارتباط ينتهي صلاحيته فورًا.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function create(data) {
+  cookies().set('name', 'value', { maxAge: 0 })
+}
+```
+
+### `cookies().set(name, value, { expires: timestamp })`
+
+تعيين `expires` إلى أي قيمة في الماضي سيجعل ملف تعريف الارتباط ينتهي صلاحيته فورًا.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function create(data) {
+  const oneDay = 24 * 60 * 60 * 1000
+  cookies().set('name', 'value', { expires: Date.now() - oneDay })
+}
+```
+
+> **معلومة مفيدة**: يمكنك فقط حذف ملفات تعريف الارتباط التي تنتمي إلى نفس النطاق الذي يتم استدعاء `.set()` منه. بالإضافة إلى ذلك، يجب تنفيذ الكود على نفس البروتوكول (HTTP أو HTTPS) مثل ملف تعريف الارتباط الذي تريد حذفه.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات               |
+| --------- | --------------------- |
+| `v13.0.0` | تم إدخال `cookies`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/draft-mode.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/draft-mode.mdx
new file mode 100644
index 00000000..d60f3e1e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/draft-mode.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:10.236Z
+title: draftMode
+description: مرجع API لوظيفة draftMode.
+---
+
+تتيح لك وظيفة `draftMode` اكتشاف [وضع المسودة (Draft Mode)](/docs/app/building-your-application/configuring/draft-mode) داخل [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components).
+
+```jsx filename="app/page.js"
+import { draftMode } from 'next/headers'
+
+export default function Page() {
+  const { isEnabled } = draftMode()
+  return (
+    <main>
+      <h1>My Blog Post</h1>
+      <p>Draft Mode is currently {isEnabled ? 'Enabled' : 'Disabled'}</p>
+    </main>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                 |
+| --------- | ----------------------- |
+| `v13.4.0` | تم تقديم `draftMode`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/fetch.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/fetch.mdx
new file mode 100644
index 00000000..905cc460
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/fetch.mdx
@@ -0,0 +1,109 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:47.538Z
+title: fetch
+description: مرجع API لدالة fetch الممتدة.
+---
+
+يمتد Next.js [واجهة برمجة تطبيقات `fetch()` الأصلية على الويب](https://developer.mozilla.org/docs/Web/API/Fetch_API) ليسمح لكل طلب على الخادم بتعيين دلالات التخزين المؤقت الدائمة الخاصة به.
+
+في المتصفح، يشير خيار `cache` إلى كيفية تفاعل طلب fetch مع _ذاكرة التخزين المؤقت HTTP للمتصفح_. مع هذا الامتداد، يشير `cache` إلى كيفية تفاعل طلب fetch من _جانب الخادم_ مع ذاكرة التخزين المؤقت HTTP الدائمة للإطار.
+
+يمكنك استدعاء `fetch` مع `async` و `await` مباشرة داخل مكونات الخادم.
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الإعداد الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا بعمر افتراضي 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الإعداد الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا بعمر افتراضي 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+## `fetch(url, options)`
+
+بما أن Next.js يمتد [واجهة برمجة تطبيقات `fetch()` الأصلية على الويب](https://developer.mozilla.org/docs/Web/API/Fetch_API)، يمكنك استخدام أي من [الخيارات الأصلية المتاحة](https://developer.mozilla.org/docs/Web/API/fetch#parameters).
+
+### `options.cache`
+
+تكوين كيفية تفاعل الطلب مع [ذاكرة التخزين المؤقت للبيانات](/docs/app/building-your-application/caching#data-cache) في Next.js.
+
+```ts
+fetch(`https://...`, { cache: 'force-cache' | 'no-store' })
+```
+
+- **`force-cache`** (الافتراضي) - يبحث Next.js عن طلب مطابق في ذاكرة التخزين المؤقت للبيانات.
+  - إذا كان هناك تطابق وكان حديثًا، سيتم إرجاعه من الذاكرة المؤقتة.
+  - إذا لم يكن هناك تطابق أو تطابق قديم، سيجلب Next.js المورد من الخادم البعيد ويحدث الذاكرة المؤقتة بالمورد الذي تم تنزيله.
+- **`no-store`** - يجلب Next.js المورد من الخادم البعيد في كل طلب دون البحث في الذاكرة المؤقتة، ولن يقوم بتحديث الذاكرة المؤقتة بالمورد الذي تم تنزيله.
+
+> **معلومة مفيدة**:
+>
+> - إذا لم تقدم خيار `cache`، سيقوم Next.js بالافتراض إلى `force-cache`، ما لم يتم استخدام [وظيفة ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) مثل `cookies()`، وفي هذه الحالة سيكون الافتراض `no-store`.
+> - يعمل خيار `no-cache` بنفس طريقة `no-store` في Next.js.
+
+### `options.next.revalidate`
+
+```ts
+fetch(`https://...`, { next: { revalidate: false | 0 | number } })
+```
+
+تعيين العمر الافتراضي لتخزين مورد مؤقتًا (بالثواني).
+
+- **`false`** - تخزين المورد مؤقتًا إلى أجل غير مسمى. مكافئ دلاليًا لـ `revalidate: Infinity`. قد تقوم ذاكرة التخزين المؤقت HTTP بإزالة الموارد القديمة بمرور الوقت.
+- **`0`** - منع تخزين المورد مؤقتًا.
+- **`number`** - (بالثواني) تحديد أن المورد يجب أن يكون له عمر تخزين مؤقت بحد أقصى `n` ثانية.
+
+> **معلومة مفيدة**:
+>
+> - إذا قام طلب `fetch()` فردي بتعيين رقم `revalidate` أقل من [الافتراضي `revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) لمسار، فسيتم تقليل فاصل إعادة التحقق من صحة المسار بالكامل.
+> - إذا كان هناك طلبا fetch بنفس URL في نفس المسار لهما قيم `revalidate` مختلفة، سيتم استخدام القيمة الأقل.
+> - كتسهيل، ليس من الضروري تعيين خيار `cache` إذا تم تعيين `revalidate` إلى رقم لأن `0` تعني `cache: 'no-store'` والقيمة الموجبة تعني `cache: 'force-cache'`.
+> - الخيارات المتضاربة مثل `{ revalidate: 0, cache: 'force-cache' }` أو `{ revalidate: 10, cache: 'no-store' }` ستؤدي إلى حدوث خطأ.
+
+### `options.next.tags`
+
+```ts
+fetch(`https://...`, { next: { tags: ['collection'] } })
+```
+
+تعيين علامات التخزين المؤقت لمورد. يمكن بعد ذلك إعادة التحقق من صحة البيانات عند الطلب باستخدام [`revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/revalidateTag). الحد الأقصى لطول العلامة المخصصة هو 256 حرفًا.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات             |
+| --------- | ------------------- |
+| `v13.0.0` | تم تقديم `fetch`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-image-metadata.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-image-metadata.mdx
new file mode 100644
index 00000000..96dec32c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-image-metadata.mdx
@@ -0,0 +1,230 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:37.454Z
+title: generateImageMetadata
+description: تعلم كيفية إنشاء صور متعددة في ملف خاص واحد لواجهة برمجة تطبيقات البيانات الوصفية (Metadata API).
+related:
+  title: الخطوات التالية
+  description: عرض جميع خيارات واجهة برمجة تطبيقات البيانات الوصفية.
+  links:
+    - app/api-reference/file-conventions/metadata
+    - app/building-your-application/optimizing/metadata
+---
+
+يمكنك استخدام `generateImageMetadata` لإنشاء إصدارات مختلفة من صورة واحدة أو إرجاع صور متعددة لقطاع مسار واحد. هذا مفيد عندما تريد تجنب ترميز قيم البيانات الوصفية بشكل ثابت، مثل الأيقونات.
+
+## المعاملات
+
+تقبل دالة `generateImageMetadata` المعاملات التالية:
+
+#### `params` (اختياري)
+
+كائن يحتوي على [معاملات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من القطاع الجذري وصولاً إلى القطاع الذي يتم استدعاء `generateImageMetadata` منه.
+
+```tsx filename="icon.tsx" switcher
+export function generateImageMetadata({
+  params,
+}: {
+  params: { slug: string }
+}) {
+  // ...
+}
+```
+
+```jsx filename="icon.js" switcher
+export function generateImageMetadata({ params }) {
+  // ...
+}
+```
+
+| المسار                           | الرابط         | `params`                  |
+| ------------------------------- | ----------- | ------------------------- |
+| `app/shop/icon.js`              | `/shop`     | `undefined`               |
+| `app/shop/[slug]/icon.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/icon.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/icon.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+## القيم المُرجعة
+
+يجب أن تُرجع دالة `generateImageMetadata` مصفوفة من الكائنات تحتوي على البيانات الوصفية للصورة مثل `alt` و `size`. بالإضافة إلى ذلك، يجب أن يتضمن كل عنصر قيمة `id` والتي سيتم تمريرها إلى خاصيات دالة إنشاء الصورة.
+
+| كائن البيانات الوصفية للصورة | النوع                                |
+| --------------------- | ----------------------------------- |
+| `id`                  | `string` (مطلوب)                 |
+| `alt`                 | `string`                            |
+| `size`                | `{ width: number; height: number }` |
+| `contentType`         | `string`                            |
+
+```tsx filename="icon.tsx" switcher
+import { ImageResponse } from 'next/server'
+
+export function generateImageMetadata() {
+  return [
+    {
+      contentType: 'image/png',
+      size: { width: 48, height: 48 },
+      id: 'small',
+    },
+    {
+      contentType: 'image/png',
+      size: { width: 72, height: 72 },
+      id: 'medium',
+    },
+  ]
+}
+
+export default function Icon({ id }: { id: string }) {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 88,
+          background: '#000',
+          color: '#fafafa',
+        }}
+      >
+        Icon {id}
+      </div>
+    )
+  )
+}
+```
+
+```jsx filename="icon.js" switcher
+import { ImageResponse } from 'next/server'
+
+export function generateImageMetadata() {
+  return [
+    {
+      contentType: 'image/png',
+      size: { width: 48, height: 48 },
+      id: 'small',
+    },
+    {
+      contentType: 'image/png',
+      size: { width: 72, height: 72 },
+      id: 'medium',
+    },
+  ]
+}
+
+export default function Icon({ id }) {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 88,
+          background: '#000',
+          color: '#fafafa',
+        }}
+      >
+        Icon {id}
+      </div>
+    )
+  )
+}
+```
+
+### أمثلة
+
+#### استخدام بيانات خارجية
+
+يستخدم هذا المثال كائن `params` وبيانات خارجية لإنشاء صور متعددة [لصورة Open Graph](/docs/app/api-reference/file-conventions/metadata/opengraph-image) لقطاع مسار.
+
+```tsx filename="app/products/[id]/opengraph-image.tsx" switcher
+import { ImageResponse } from 'next/server'
+import { getCaptionForImage, getOGImages } from '@/app/utils/images'
+
+export async function generateImageMetadata({
+  params,
+}: {
+  params: { id: string }
+}) {
+  const images = await getOGImages(params.id)
+
+  return images.map((image, idx) => ({
+    id: idx,
+    size: { width: 1200, height: 600 },
+    alt: image.text,
+    contentType: 'image/png',
+  }))
+}
+
+export default async function Image({
+  params,
+  id,
+}: {
+  params: { id: string }
+  id: number
+}) {
+  const productId = params.id
+  const imageId = id
+  const text = await getCaptionForImage(productId, imageId)
+
+  return new ImageResponse(
+    (
+      <div
+        style={
+          {
+            // ...
+          }
+        }
+      >
+        {text}
+      </div>
+    )
+  )
+}
+```
+
+```jsx filename="app/products/[id]/opengraph-image.js" switcher
+import { ImageResponse } from 'next/server'
+import { getCaptionForImage, getOGImages } from '@/app/utils/images'
+
+export async function generateImageMetadata({ params }) {
+  const images = await getOGImages(params.id)
+
+  return images.map((image, idx) => ({
+    id: idx,
+    size: { width: 1200, height: 600 },
+    alt: image.text,
+    contentType: 'image/png',
+  }))
+}
+
+export default async function Image({ params, id }) {
+  const productId = params.id
+  const imageId = id
+  const text = await getCaptionForImage(productId, imageId)
+
+  return new ImageResponse(
+    (
+      <div
+        style={
+          {
+            // ...
+          }
+        }
+      >
+        {text}
+      </div>
+    )
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                             |
+| --------- | ----------------------------------- |
+| `v13.3.0` | تم تقديم `generateImageMetadata`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-metadata.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-metadata.mdx
new file mode 100644
index 00000000..ca3c9b84
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-metadata.mdx
@@ -0,0 +1,1161 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:03:35.107Z
+title: كائن البيانات الوصفية وخيارات generateMetadata
+nav_title: generateMetadata
+description: تعلم كيفية إضافة البيانات الوصفية إلى تطبيق Next.js لتحسين تحسين محركات البحث (SEO) وإمكانية مشاركة الويب.
+related:
+  title: الخطوات التالية
+  description: عرض جميع خيارات واجهة برمجة تطبيقات البيانات الوصفية.
+  links:
+    - app/api-reference/file-conventions/metadata
+    - app/building-your-application/optimizing/metadata
+---
+
+تغطي هذه الصفحة جميع خيارات **البيانات الوصفية المعتمدة على التكوين** باستخدام `generateMetadata` وكائن البيانات الوصفية الثابت.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import { Metadata } from 'next'
+
+// إما بيانات وصفية ثابتة
+export const metadata: Metadata = {
+  title: '...',
+}
+
+// أو بيانات وصفية ديناميكية
+export async function generateMetadata({ params }) {
+  return {
+    title: '...',
+  }
+}
+```
+
+```jsx filename="layout.js | page.js" switcher
+// إما بيانات وصفية ثابتة
+export const metadata = {
+  title: '...',
+}
+
+// أو بيانات وصفية ديناميكية
+export async function generateMetadata({ params }) {
+  return {
+    title: '...',
+  }
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - تصدير كائن `metadata` ودالة `generateMetadata` **مدعوم فقط في مكونات الخادم**.
+> - لا يمكنك تصدير كائن `metadata` ودالة `generateMetadata` من نفس مقطع المسار.
+
+## كائن `metadata`
+
+لتحديد بيانات وصفية ثابتة، قم بتصدير كائن [`Metadata`](#metadata-fields) من ملف `layout.js` أو `page.js`.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+```jsx filename="layout.js | page.js" switcher
+export const metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+راجع [حقول البيانات الوصفية](#metadata-fields) للحصول على قائمة كاملة بالخيارات المدعومة.
+
+## دالة `generateMetadata`
+
+يمكن تعيين البيانات الوصفية الديناميكية التي تعتمد على **معلومات ديناميكية**، مثل معلمات المسار الحالية أو البيانات الخارجية أو `metadata` في المقاطع الأصلية، عن طريق تصدير دالة `generateMetadata` التي تُرجع كائن [`Metadata`](#metadata-fields).
+
+```tsx filename="app/products/[id]/page.tsx" switcher
+import { Metadata, ResolvingMetadata } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية الأصلية وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }: Props) {}
+```
+
+```jsx filename="app/products/[id]/page.js" switcher
+export async function generateMetadata({ params, searchParams }, parent) {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية الأصلية وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }) {}
+```
+
+### المعاملات
+
+تقبل دالة `generateMetadata` المعاملات التالية:
+
+- `props` - كائن يحتوي على معلمات المسار الحالي:
+
+  - `params` - كائن يحتوي على كائن [معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من المقطع الجذري وصولاً إلى المقطع الذي يتم استدعاء `generateMetadata` منه. أمثلة:
+
+    | المسار                           | URL         | `params`                  |
+    | ------------------------------- | ----------- | ------------------------- |
+    | `app/shop/[slug]/page.js`       | `/shop/1`   | `{ slug: '1' }`           |
+    | `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+    | `app/shop/[...slug]/page.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+  - `searchParams` - كائن يحتوي على [معلمات البحث](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) لـ URL الحالي. أمثلة:
+
+    | URL             | `searchParams`       |
+    | --------------- | -------------------- |
+    | `/shop?a=1`     | `{ a: '1' }`         |
+    | `/shop?a=1&b=2` | `{ a: '1', b: '2' }` |
+    | `/shop?a=1&a=2` | `{ a: ['1', '2'] }`  |
+
+- `parent` - وعد بحل البيانات الوصفية من مقاطع المسار الأصلية.
+
+### القيم المُرجعة
+
+يجب أن تُرجع `generateMetadata` كائن [`Metadata`](#metadata-fields) يحتوي على حقل بيانات وصفية واحد أو أكثر.
+
+> **معلومة مفيدة**:
+>
+> - إذا كانت البيانات الوصفية لا تعتمد على معلومات وقت التشغيل، فيجب تعريفها باستخدام كائن [`metadata` الثابت](#the-metadata-object) بدلاً من `generateMetadata`.
+> - يتم [تخزين](/docs/app/building-your-application/caching#request-memoization) طلبات `fetch` تلقائيًا لنفس البيانات عبر `generateMetadata` و`generateStaticParams` والتخطيطات والصفحات ومكونات الخادم. يمكن استخدام [`cache` من React](/docs/app/building-your-application/caching#request-memoization) إذا لم يكن `fetch` متاحًا.
+> - `searchParams` متاحة فقط في مقاطع `page.js`.
+> - يمكن أيضًا استخدام طرق Next.js [`redirect()`](/docs/app/api-reference/functions/redirect) و[`notFound()`](/docs/app/api-reference/functions/not-found) داخل `generateMetadata`.
+
+## حقول البيانات الوصفية
+
+### `title`
+
+يُستخدم سمة `title` لتعيين عنوان المستند. يمكن تعريفها كـ [سلسلة](#string) بسيطة أو [كائن قالب](#template-object) اختياري.
+
+#### سلسلة
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  title: 'Next.js',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<title>Next.js</title>
+```
+
+#### كائن القالب
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    template: '...',
+    default: '...',
+    absolute: '...',
+  },
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: {
+    default: '...',
+    template: '...',
+    absolute: '...',
+  },
+}
+```
+
+##### الافتراضي
+
+يمكن استخدام `title.default` لتوفير **عنوان احتياطي** لمقاطع المسار الفرعية التي لا تحدد `title`.
+
+```tsx filename="app/layout.tsx"
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Acme',
+  },
+}
+```
+
+```tsx filename="app/about/page.tsx"
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {}
+
+// الناتج: <title>Acme</title>
+```
+
+##### القالب
+
+يمكن استخدام `title.template` لإضافة بادئة أو لاحقة إلى `titles` المحددة في مقاطع المسار **الفرعية**.
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme',
+    default: 'Acme', // مطلوب افتراضي عند إنشاء قالب
+  },
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: {
+    template: '%s | Acme',
+    default: 'Acme', // مطلوب افتراضي عند إنشاء قالب
+  },
+}
+```
+
+```tsx filename="app/about/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'About',
+}
+
+// الناتج: <title>About | Acme</title>
+```
+
+```jsx filename="app/about/page.js" switcher
+export const metadata = {
+  title: 'About',
+}
+
+// الناتج: <title>About | Acme</title>
+```
+
+> **معلومة مفيدة**:
+>
+> - `title.template` ينطبق على مقاطع المسار **الفرعية** وليس المقطع الذي تم تعريفه فيه. هذا يعني:
+>
+>   - `title.default` **مطلوب** عند إضافة `title.template`.
+>   - `title.template` المحدد في `layout.js` لن ينطبق على `title` المحدد في `page.js` لنفس مقطع المسار.
+>   - `title.template` المحدد في `page.js` ليس له تأثير لأن الصفحة دائمًا هي المقطع النهائي (ليس لديها أي مقاطع مسار فرعية).
+>
+> - `title.template` **ليس له تأثير** إذا لم يحدد المسار `title` أو `title.default`.
+
+##### المطلق
+
+يمكن استخدام `title.absolute` لتوفير عنوان **يتجاهل** `title.template` المحدد في المقاطع الأصلية.
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme',
+  },
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: {
+    template: '%s | Acme',
+  },
+}
+```
+
+```tsx filename="app/about/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    absolute: 'About',
+  },
+}
+
+// الناتج: <title>About</title>
+```
+
+```jsx filename="app/about/page.js" switcher
+export const metadata = {
+  title: {
+    absolute: 'About',
+  },
+}
+
+// الناتج: <title>About</title>
+```
+
+> **معلومة مفيدة**:
+>
+> - `layout.js`
+>
+>   - `title` (سلسلة) و `title.default` يحددان العنوان الافتراضي للمقاطع الفرعية (التي لا تحدد `title` الخاصة بها). سيعزز `title.template` من أقرب مقطع أصل إذا كان موجودًا.
+>   - `title.absolute` يحدد العنوان الافتراضي للمقاطع الفرعية. يتجاهل `title.template` من المقاطع الأصلية.
+>   - `title.template` يحدد قالب عنوان جديد للمقاطع الفرعية.
+>
+> - `page.js`
+>   - إذا لم تحدد الصفحة عنوانها الخاص، سيتم استخدام عنوان الأصل الأقرب الذي تم حله.
+>   - `title` (سلسلة) يحدد عنوان المسار. سيعزز `title.template` من أقرب مقطع أصل إذا كان موجودًا.
+>   - `title.absolute` يحدد عنوان المسار. يتجاهل `title.template` من المقاطع الأصلية.
+>   - `title.template` ليس له تأثير في `page.js` لأن الصفحة دائمًا هي المقطع النهائي للمسار.
+
+### `description`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  description: 'إطار عمل React للويب',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="description" content="إطار عمل React للويب" />
+```
+
+### الحقول الأساسية
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  generator: 'Next.js',
+  applicationName: 'Next.js',
+  referrer: 'origin-when-cross-origin',
+  keywords: ['Next.js', 'React', 'JavaScript'],
+  authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
+  colorScheme: 'dark',
+  creator: 'Jiachi Liu',
+  publisher: 'Sebastian Markbåge',
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="application-name" content="Next.js" />
+<meta name="author" content="Seb" />
+<link rel="author" href="https://nextjs.org" />
+<meta name="author" content="Josh" />
+<meta name="generator" content="Next.js" />
+<meta name="keywords" content="Next.js,React,JavaScript" />
+<meta name="referrer" content="origin-when-cross-origin" />
+<meta name="color-scheme" content="dark" />
+<meta name="creator" content="Jiachi Liu" />
+<meta name="publisher" content="Sebastian Markbåge" />
+<meta name="format-detection" content="telephone=no, address=no, email=no" />
+```
+
+### `metadataBase`
+
+`metadataBase` هو خيار ملائم لتعيين بادئة عنوان URL أساسي لحقول `metadata` التي تتطلب عنوان URL مؤهل بالكامل.
+
+- يسمح `metadataBase` لحقول `metadata` المستندة إلى URL المحددة في **مقطع المسار الحالي وما دونه** باستخدام **مسار نسبي** بدلاً من عنوان URL المطلق المطلوب.
+- سيتم دمج المسار النسبي للحقل مع `metadataBase` لتشكيل عنوان URL مؤهل بالكامل.
+- إذا لم يتم تكوينه، يتم **تعبئة `metadataBase` تلقائيًا** بـ [قيمة افتراضية](#default-value).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  metadataBase: new URL('https://acme.com'),
+  alternates: {
+    canonical: '/',
+    languages: {
+      'en-US': '/en-US',
+      'de-DE': '/de-DE',
+    },
+  },
+  openGraph: {
+    images: '/og-image.png',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="canonical" href="https://acme.com" />
+<link rel="alternate" hreflang="en-US" href="https://acme.com/en-US" />
+<link rel="alternate" hreflang="de-DE" href="https://acme.com/de-DE" />
+<meta property="og:image" content="https://acme.com/og-image.png" />
+```
+
+> **معلومة مفيدة**:
+>
+> - يتم تعيين `metadataBase` عادةً في `app/layout.js` الجذر ليتم تطبيقه على حقول `metadata` المستندة إلى URL عبر جميع المسارات.
+> - يمكن تكوين جميع حقول `metadata` المستندة إلى URL التي تتطلب عناوين URL مطلقة باستخدام خيار `metadataBase`.
+> - يمكن أن يحتوي `metadataBase` على نطاق فرعي مثل `https://app.acme.com` أو مسار أساسي مثل `https://acme.com/start/from/here`
+> - إذا قدم حقل `metadata` عنوان URL مطلقًا، فسيتم تجاهل `metadataBase`.
+> - سيؤدي استخدام مسار نسبي في حقل `metadata` مستند إلى URL دون تكوين `metadataBase` إلى حدوث خطأ في البناء.
+> - سيقوم Next.js بتوحيد الشرطات المائلة المكررة بين `metadataBase` (مثل `https://acme.com/`) وحقل نسبي (مثل `/path`) إلى شرطة مائلة واحدة (مثل `https://acme.com/path`)
+
+#### القيمة الافتراضية
+
+إذا لم يتم تكوينه، فإن `metadataBase` له **قيمة افتراضية**
+
+- عند اكتشاف [`VERCEL_URL`](https://vercel.com/docs/concepts/projects/environment-variables/system-environment-variables#:~:text=.-,VERCEL_URL,-The%20domain%20name): `https://${process.env.VERCEL_URL`} وإلا فسيعود إلى `http://localhost:${process.env.PORT || 3000}`.
+- عند تجاوز الافتراضي، نوصي باستخدام متغيرات البيئة لحساب عنوان URL. يتيح ذلك تكوين عنوان URL لبيئات التطوير المحلية وبيئات الاختبار والإنتاج.
+
+#### تكوين URL
+
+يفضل تكوين URL نية المطور على دلالات اجتياز الدليل الافتراضية.
+
+- يتم توحيد الشرطات المائلة بين `metadataBase` وحقول `metadata`.
+- يتم التعامل مع المسار "المطلق" في حقل `metadata` (الذي من شأنه عادةً استبدال مسار URL بالكامل) على أنه مسار "نسبي" (بدءًا من نهاية `metadataBase`).
+
+على سبيل المثال، بالنظر إلى `metadataBase` التالي:
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://acme.com'),
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  metadataBase: new URL('https://acme.com'),
+}
+```
+
+سيتم حل أي حقول `metadata` التي ترث `metadataBase` أعلاه وتعيين قيمتها الخاصة على النحو التالي:
+
+| حقل `metadata`                 | عنوان URL المحلول             |
+| -------------------------------- | -------------------------------- |
+| `/`                              | `https://acme.com`               |
+| `./`                             | `https://acme.com`               |
+| `payments`                       | `https://acme.com/payments`      |
+| `/payments`                      | `https://acme.com/payments`      |
+| `./payments`                     | `https://acme.com/payments`      |
+| `../payments`                    | `https://acme.com/payments`      |
+| `https://beta.acme.com/payments` | `https://beta.acme.com/payments` |
+
+### `openGraph`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  openGraph: {
+    title: 'Next.js',
+    description: 'The React Framework for the Web',
+    url: 'https://nextjs.org',
+    siteName: 'Next.js',
+    images: [
+      {
+        url: 'https://nextjs.org/og.png',
+        width: 800,
+        height: 600,
+      },
+      {
+        url: 'https://nextjs.org/og-alt.png',
+        width: 1800,
+        height: 1600,
+        alt: 'My custom alt',
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="og:title" content="Next.js" />
+<meta property="og:description" content="The React Framework for the Web" />
+<meta property="og:url" content="https://nextjs.org/" />
+<meta property="og:site_name" content="Next.js" />
+<meta property="og:locale" content="en_US" />
+<meta property="og:image:url" content="https://nextjs.org/og.png" />
+<meta property="og:image:width" content="800" />
+<meta property="og:image:height" content="600" />
+<meta property="og:image:url" content="https://nextjs.org/og-alt.png" />
+<meta property="og:image:width" content="1800" />
+<meta property="og:image:height" content="1600" />
+<meta property="og:image:alt" content="My custom alt" />
+<meta property="og:type" content="website" />
+```
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  openGraph: {
+    title: 'Next.js',
+    description: 'The React Framework for the Web',
+    type: 'article',
+    publishedTime: '2023-01-01T00:00:00.000Z',
+    authors: ['Seb', 'Josh'],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="og:title" content="Next.js" />
+<meta property="og:description" content="The React Framework for the Web" />
+<meta property="og:type" content="article" />
+<meta property="article:published_time" content="2023-01-01T00:00:00.000Z" />
+<meta property="article:author" content="Seb" />
+<meta property="article:author" content="Josh" />
+```
+
+> **معلومة مفيدة**:
+>
+> - قد يكون استخدام [واجهة برمجة تطبيقات البيانات الوصفية القائمة على الملفات](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) لصور Open Graph أكثر ملاءمة. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيقات القائمة على الملفات بإنشاء البيانات الوصفية الصحيحة تلقائيًا لك.
+
+### `robots`
+
+```tsx
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  robots: {
+    index: false,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: false,
+      noimageindex: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="robots" content="noindex, follow, nocache" />
+<meta
+  name="googlebot"
+  content="index, nofollow, noimageindex, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
+/>
+```
+
+### `icons`
+
+> **معلومة مفيدة**: نوصي باستخدام [واجهة برمجة تطبيقات البيانات الوصفية القائمة على الملفات](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) للأيقونات حيثما أمكن ذلك. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيقات القائمة على الملفات بإنشاء البيانات الوصفية الصحيحة تلقائيًا لك.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  icons: {
+    icon: '/icon.png',
+    shortcut: '/shortcut-icon.png',
+    apple: '/apple-icon.png',
+    other: {
+      rel: 'apple-touch-icon-precomposed',
+      url: '/apple-touch-icon-precomposed.png',
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="shortcut icon" href="/shortcut-icon.png" />
+<link rel="icon" href="/icon.png" />
+<link rel="apple-touch-icon" href="/apple-icon.png" />
+<link
+  rel="apple-touch-icon-precomposed"
+  href="/apple-touch-icon-precomposed.png"
+/>
+```
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  icons: {
+    icon: [{ url: '/icon.png' }, new URL('/icon.png', 'https://example.com')],
+    shortcut: ['/shortcut-icon.png'],
+    apple: [
+      { url: '/apple-icon.png' },
+      { url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
+    ],
+    other: [
+      {
+        rel: 'apple-touch-icon-precomposed',
+        url: '/apple-touch-icon-precomposed.png',
+      },
+    ],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="shortcut icon" href="/shortcut-icon.png" />
+<link rel="icon" href="/icon.png" />
+<link rel="apple-touch-icon" href="/apple-icon.png" />
+<link
+  rel="apple-touch-icon-precomposed"
+  href="/apple-touch-icon-precomposed.png"
+/>
+<link rel="icon" href="https://example.com/icon.png" />
+<link
+  rel="apple-touch-icon"
+  href="/apple-icon-x3.png"
+  sizes="180x180"
+  type="image/png"
+/>
+```
+
+> **معلومة مفيدة**: لم تعد علامات الميتا `msapplication-*` مدعومة في إصدارات Chromium من Microsoft Edge، وبالتالي لم تعد هناك حاجة إليها.
+
+### `themeColor`
+
+تعرف على المزيد حول [theme-color](https://developer.mozilla.org/docs/Web/HTML/Element/meta/name/theme-color).
+
+**لون المظهر البسيط**
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  themeColor: 'black',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="theme-color" content="black" />
+```
+
+**مع سمة media**
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'cyan' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+```
+
+### `manifest`
+
+بيان تطبيق ويب، كما هو محدد في [مواصفات بيان تطبيق الويب](https://developer.mozilla.org/docs/Web/Manifest).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  manifest: 'https://nextjs.org/manifest.json',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="manifest" href="https://nextjs.org/manifest.json" />
+```
+
+### `twitter`
+
+تعرف على المزيد حول [مرجع ترميز بطاقات تويتر](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Next.js',
+    description: 'The React Framework for the Web',
+    siteId: '1467726470533754880',
+    creator: '@nextjs',
+    creatorId: '1467726470533754880',
+    images: ['https://nextjs.org/og.png'],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site:id" content="1467726470533754880" />
+<meta name="twitter:creator" content="@nextjs" />
+<meta name="twitter:creator:id" content="1467726470533754880" />
+<meta name="twitter:title" content="Next.js" />
+<meta name="twitter:description" content="The React Framework for the Web" />
+<meta name="twitter:image" content="https://nextjs.org/og.png" />
+```
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  twitter: {
+    card: 'app',
+    title: 'Next.js',
+    description: 'The React Framework for the Web',
+    siteId: '1467726470533754880',
+    creator: '@nextjs',
+    creatorId: '1467726470533754880',
+    images: {
+      url: 'https://nextjs.org/og.png',
+      alt: 'Next.js Logo',
+    },
+    app: {
+      name: 'twitter_app',
+      id: {
+        iphone: 'twitter_app://iphone',
+        ipad: 'twitter_app://ipad',
+        googleplay: 'twitter_app://googleplay',
+      },
+      url: {
+        iphone: 'https://iphone_url',
+        ipad: 'https://ipad_url',
+      },
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="twitter:site:id" content="1467726470533754880" />
+<meta name="twitter:creator" content="@nextjs" />
+<meta name="twitter:creator:id" content="1467726470533754880" />
+<meta name="twitter:title" content="Next.js" />
+<meta name="twitter:description" content="The React Framework for the Web" />
+<meta name="twitter:card" content="app" />
+<meta name="twitter:image" content="https://nextjs.org/og.png" />
+<meta name="twitter:image:alt" content="Next.js Logo" />
+<meta name="twitter:app:name:iphone" content="twitter_app" />
+<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
+<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
+<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
+<meta name="twitter:app:url:iphone" content="https://iphone_url" />
+<meta name="twitter:app:url:ipad" content="https://ipad_url" />
+<meta name="twitter:app:name:ipad" content="twitter_app" />
+<meta name="twitter:app:name:googleplay" content="twitter_app" />
+```
+
+### `viewport`
+
+> **معلومة مفيدة**: يتم تعيين علامة الميتا `viewport` تلقائيًا بالقيم الافتراضية التالية. عادةً، لا تكون هناك حاجة للتكوين اليدوي حيث أن الافتراضي كافٍ. ومع ذلك، يتم توفير المعلومات للاكتمال.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1, maximum-scale=1"
+/>
+```
+
+### `verification`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  verification: {
+    google: 'google',
+    yandex: 'yandex',
+    yahoo: 'yahoo',
+    other: {
+      me: ['my-email', 'my-link'],
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="google-site-verification" content="google" />
+<meta name="y_key" content="yahoo" />
+<meta name="yandex-verification" content="yandex" />
+<meta name="me" content="my-email" />
+<meta name="me" content="my-link" />
+```
+
+### `appleWebApp`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  itunes: {
+    appId: 'myAppStoreID',
+    appArgument: 'myAppArgument',
+  },
+  appleWebApp: {
+    title: 'Apple Web App',
+    statusBarStyle: 'black-translucent',
+    startupImage: [
+      '/assets/startup/apple-touch-startup-image-768x1004.png',
+      {
+        url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
+        media: '(device-width: 768px) and (device-height: 1024px)',
+      },
+    ],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta
+  name="apple-itunes-app"
+  content="app-id=myAppStoreID, app-argument=myAppArgument"
+/>
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-title" content="Apple Web App" />
+<link
+  href="/assets/startup/apple-touch-startup-image-768x1004.png"
+  rel="apple-touch-startup-image"
+/>
+<link
+  href="/assets/startup/apple-touch-startup-image-1536x2008.png"
+  media="(device-width: 768px) and (device-height: 1024px)"
+  rel="apple-touch-startup-image"
+/>
+<meta
+  name="apple-mobile-web-app-status-bar-style"
+  content="black-translucent"
+/>
+```
+
+### `alternates`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  alternates: {
+    canonical: 'https://nextjs.org',
+    languages: {
+      'en-US': 'https://nextjs.org/en-US',
+      'de-DE': 'https://nextjs.org/de-DE',
+    },
+    media: {
+      'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
+    },
+    types: {
+      'application/rss+xml': 'https://nextjs.org/rss',
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="canonical" href="https://nextjs.org" />
+<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
+<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
+<link
+  rel="alternate"
+  media="only screen and (max-width: 600px)"
+  href="https://nextjs.org/mobile"
+/>
+<link
+  rel="alternate"
+  type="application/rss+xml"
+  href="https://nextjs.org/rss"
+/>
+```
+
+### `appLinks`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  appLinks: {
+    ios: {
+      url: 'https://nextjs.org/ios',
+      app_store_id: 'app_store_id',
+    },
+    android: {
+      package: 'com.example.android/package',
+      app_name: 'app_name_android',
+    },
+    web: {
+      url: 'https://nextjs.org/web',
+      should_fallback: true,
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="al:ios:url" content="https://nextjs.org/ios" />
+<meta property="al:ios:app_store_id" content="app_store_id" />
+<meta property="al:android:package" content="com.example.android/package" />
+<meta property="al:android:app_name" content="app_name_android" />
+<meta property="al:web:url" content="https://nextjs.org/web" />
+<meta property="al:web:should_fallback" content="true" />
+```
+
+### `archives`
+
+يصف مجموعة من السجلات أو المستندات أو المواد الأخرى ذات الأهمية التاريخية ([المصدر](https://www.w3.org/TR/2011/WD-html5-20110113/links.html#rel-archives)).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  archives: ['https://nextjs.org/13'],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="archives" href="https://nextjs.org/13" />
+```
+
+### `assets`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  assets: ['https://nextjs.org/assets'],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="assets" href="https://nextjs.org/assets" />
+```
+
+### `bookmarks`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  bookmarks: ['https://nextjs.org/13'],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="bookmarks" href="https://nextjs.org/13" />
+```
+
+### `category`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  category: 'technology',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="category" content="technology" />
+```
+
+### `other`
+
+يجب أن تغطي جميع خيارات البيانات الوصفية الدعم المدمج. ومع ذلك، قد تكون هناك علامات بيانات وصفية مخصصة خاصة بموقعك، أو علامات بيانات وصفية جديدة تم إصدارها للتو. يمكنك استخدام الخيار `other` لعرض أي علامة بيانات وصفية مخصصة.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  other: {
+    custom: 'meta',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="custom" content="meta" />
+```
+
+## بيانات وصفية غير مدعومة
+
+الأنواع التالية من البيانات الوصفية لا تدعم حاليًا بشكل مدمج. ومع ذلك، لا يزال يمكن عرضها في التخطيط أو الصفحة نفسها.
+
+| البيانات الوصفية               | التوصية                                                                                                                                                                                                                                     |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<meta http-equiv="...">`     | استخدم رؤوس HTTP المناسبة عبر [`redirect()`](/docs/app/api-reference/functions/redirect)، [البرمجيات الوسيطة](/docs/app/building-your-application/routing/middleware#nextresponse)، [رؤوس الأمان](/docs/app/api-reference/next-config-js/headers) |
+| `<base>`                      | عرض العلامة في التخطيط أو الصفحة نفسها.                                                                                                                                                                                                       |
+| `<noscript>`                  | عرض العلامة في التخطيط أو الصفحة نفسها.                                                                                                                                                                                                       |
+| `<style>`                     | تعلم المزيد حول [التنسيق في Next.js](/docs/app/building-your-application/styling/css-modules).                                                                                                                                                    |
+| `<script>`                    | تعلم المزيد حول [استخدام النصوص البرمجية](/docs/app/building-your-application/optimizing/scripts).                                                                                                                                                          |
+| `<link rel="stylesheet" />`   | `استيراد` أوراق الأنماط مباشرة في التخطيط أو الصفحة نفسها.                                                                                                                                                                                        |
+| `<link rel="preload />`       | استخدم [طريقة ReactDOM المسبقة التحميل](#link-relpreload)                                                                                                                                                                                                    |
+| `<link rel="preconnect" />`   | استخدم [طريقة ReactDOM المسبقة الاتصال](#link-relpreconnect)                                                                                                                                                                                              |
+| `<link rel="dns-prefetch" />` | استخدم [طريقة ReactDOM المسبقة لـ DNS](#link-reldns-prefetch)                                                                                                                                                                                           |
+
+### تلميحات الموارد
+
+يحتوي عنصر `<link>` على عدد من الكلمات الرئيسية `rel` التي يمكن استخدامها للإشارة إلى المتصفح أن موردًا خارجيًا قد يكون مطلوبًا. يستخدم المتصفح هذه المعلومات لتطبيق تحسينات التحميل المسبق اعتمادًا على الكلمة الرئيسية.
+
+بينما لا يدعم واجهة برمجة تطبيقات البيانات الوصفية هذه التلميحات مباشرة، يمكنك استخدام [طرق `ReactDOM` الجديدة](https://github.com/facebook/react/pull/26237) لإدراجها بأمان في `<head>` المستند.
+
+```tsx filename="app/preload-resources.tsx" switcher
+'use client'
+
+import ReactDOM from 'react-dom'
+
+export function PreloadResources() {
+  ReactDOM.preload('...', { as: '...' })
+  ReactDOM.preconnect('...', { crossOrigin: '...' })
+  ReactDOM.prefetchDNS('...')
+
+  return null
+}
+```
+
+```jsx filename="app/preload-resources.js" switcher
+'use client'
+
+import ReactDOM from 'react-dom'
+
+export function PreloadResources() {
+  ReactDOM.preload('...', { as: '...' })
+  ReactDOM.preconnect('...', { crossOrigin: '...' })
+  ReactDOM.prefetchDNS('...')
+
+  return null
+}
+```
+
+##### `<link rel="preload">`
+
+ابدأ تحميل مورد مبكرًا في دورة عرض الصفحة (المتصفح). [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload).
+
+```tsx
+ReactDOM.preload(href: string, options: { as: string })
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="preload" href="..." as="..." />
+```
+
+##### `<link rel="preconnect">`
+
+ابدأ اتصالًا مسبقًا بأصل. [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect).
+
+```tsx
+ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="preconnect" href="..." crossorigin />
+```
+
+##### `<link rel="dns-prefetch">`
+
+حاول حل اسم نطاق قبل طلب الموارد. [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/dns-prefetch).
+
+```tsx
+ReactDOM.prefetchDNS(href: string)
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="dns-prefetch" href="..." />
+```
+
+> **جيد أن تعرف**:
+>
+> - هذه الطرق مدعومة حاليًا فقط في مكونات العميل، والتي لا تزال تُعرض من جانب الخادم عند التحميل الأولي للصفحة.
+> - الميزات المدمجة في Next.js مثل `next/font`، `next/image` و `next/script` تتعامل تلقائيًا مع تلميحات الموارد ذات الصلة.
+> - React 18.3 لا يتضمن بعد تعريفات النوع لـ `ReactDOM.preload`، `ReactDOM.preconnect`، و `ReactDOM.preconnectDNS`. يمكنك استخدام `// @ts-ignore` كحل مؤقت لتجنب أخطاء النوع.
+
+## الأنواع
+
+يمكنك إضافة أمان النوع إلى بياناتك الوصفية باستخدام نوع `Metadata`. إذا كنت تستخدم [البرنامج المساعد TypeScript المدمج](/docs/app/building-your-application/configuring/typescript) في بيئة التطوير المتكاملة (IDE)، فلن تحتاج إلى إضافة النوع يدويًا، ولكن لا يزال بإمكانك إضافته صراحة إذا أردت.
+
+### كائن `metadata`
+
+```tsx
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Next.js',
+}
+```
+
+### دالة `generateMetadata`
+
+#### دالة عادية
+
+```tsx
+import type { Metadata } from 'next'
+
+export function generateMetadata(): Metadata {
+  return {
+    title: 'Next.js',
+  }
+}
+```
+
+#### دالة غير متزامنة
+
+```tsx
+import type { Metadata } from 'next'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: 'Next.js',
+  }
+}
+```
+
+#### مع خاصية القطعة
+
+```tsx
+import type { Metadata } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export function generateMetadata({ params, searchParams }: Props): Metadata {
+  return {
+    title: 'Next.js',
+  }
+}
+
+export default function Page({ params, searchParams }: Props) {}
+```
+
+#### مع البيانات الوصفية الأصلية
+
+```tsx
+import type { Metadata, ResolvingMetadata } from 'next'
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  return {
+    title: 'Next.js',
+  }
+}
+```
+
+#### مشاريع JavaScript
+
+لمشاريع JavaScript، يمكنك استخدام JSDoc لإضافة أمان النوع.
+
+```js
+/** @type {import("next").Metadata} */
+export const metadata = {
+  title: 'Next.js',
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                       |
+| --------- | --------------------------------------------- |
+| `v13.2.0` | تم تقديم `metadata` و `generateMetadata`. |
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-static-params.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-static-params.mdx
new file mode 100644
index 00000000..c51380b5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/generate-static-params.mdx
@@ -0,0 +1,310 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:16.393Z
+title: generateStaticParams
+description: مرجع API لوظيفة generateStaticParams.
+---
+
+يمكن استخدام دالة `generateStaticParams` بالاشتراك مع [شرائح المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) لإنشاء المسارات [**بشكل ثابت**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) أثناء وقت البناء بدلاً من الطلب عند وقت الطلب.
+
+```jsx filename="app/blog/[slug]/page.js"
+// إرجاع قائمة من `params` لملء الجزء الديناميكي [slug]
+export async function generateStaticParams() {
+  const posts = await fetch('https://.../posts').then((res) => res.json())
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+
+// سيتم إنشاء عدة نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` التي تم إرجاعها بواسطة `generateStaticParams`
+export default function Page({ params }) {
+  const { slug } = params
+  // ...
+}
+```
+
+> **معلومة مفيدة**
+>
+> - يمكنك استخدام خيار تكوين شريحة [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) للتحكم فيما يحدث عند زيارة شريحة ديناميكية لم يتم إنشاؤها باستخدام `generateStaticParams`.
+> - أثناء `next dev`، سيتم استدعاء `generateStaticParams` عند الانتقال إلى مسار.
+> - أثناء `next build`، يتم تشغيل `generateStaticParams` قبل إنشاء التخطيطات أو الصفحات المقابلة.
+> - أثناء إعادة التحقق (ISR)، لن يتم استدعاء `generateStaticParams` مرة أخرى.
+> - تحل `generateStaticParams` محل دالة [`getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) في جهاز التوجيه الخاص بالصفحات.
+
+## المعاملات
+
+`options.params` (اختياري)
+
+إذا استخدمت عدة شرائح ديناميكية في مسار `generateStaticParams`، يتم تنفيذ دالة `generateStaticParams` الفرعية مرة واحدة لكل مجموعة من `params` التي يولدها الأصل.
+
+يحتوي كائن `params` على `params` المملوءة من `generateStaticParams` الأصلية، والتي يمكن استخدامها [لإنشاء `params` في شريحة فرعية](#multiple-dynamic-segments-in-a-route).
+
+## القيم المُرجعة
+
+يجب أن تُرجع `generateStaticParams` مصفوفة من الكائنات حيث يمثل كل كائن الشرائح الديناميكية المملوءة لمسار واحد.
+
+- كل خاصية في الكائن هي شريحة ديناميكية يجب ملؤها للمسار.
+- اسم الخاصية هو اسم الشريحة، وقيمة الخاصية هي ما يجب ملء الشريحة به.
+
+| مثال للمسار                 | نوع الإرجاع لـ `generateStaticParams` |
+| --------------------------- | ------------------------------------- |
+| `/product/[id]`             | `{ id: string }[]`                    |
+| `/products/[category]/[product]` | `{ category: string, product: string }[]` |
+| `/products/[...slug]`       | `{ slug: string[] }[]`                |
+
+## شريحة ديناميكية واحدة
+
+```tsx filename="app/product/[id]/page.tsx" switcher
+export function generateStaticParams() {
+  return [{ id: '1' }, { id: '2' }, { id: '3' }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` التي تم إرجاعها بواسطة `generateStaticParams`
+// - /product/1
+// - /product/2
+// - /product/3
+export default function Page({ params }: { params: { id: string } }) {
+  const { id } = params
+  // ...
+}
+```
+
+```jsx filename="app/product/[id]/page.js" switcher
+export function generateStaticParams() {
+  return [{ id: '1' }, { id: '2' }, { id: '3' }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` التي تم إرجاعها بواسطة `generateStaticParams`
+// - /product/1
+// - /product/2
+// - /product/3
+export default function Page({ params }) {
+  const { id } = params
+  // ...
+}
+```
+
+## شرائح ديناميكية متعددة
+
+```tsx filename="app/products/[category]/[product]/page.tsx" switcher
+export function generateStaticParams() {
+  return [
+    { category: 'a', product: '1' },
+    { category: 'b', product: '2' },
+    { category: 'c', product: '3' },
+  ]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` التي تم إرجاعها بواسطة `generateStaticParams`
+// - /products/a/1
+// - /products/b/2
+// - /products/c/3
+export default function Page({
+  params,
+}: {
+  params: { category: string; product: string }
+}) {
+  const { category, product } = params
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/[product]/page.js" switcher
+export function generateStaticParams() {
+  return [
+    { category: 'a', product: '1' },
+    { category: 'b', product: '2' },
+    { category: 'c', product: '3' },
+  ]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` التي تم إرجاعها بواسطة `generateStaticParams`
+// - /products/a/1
+// - /products/b/2
+// - /products/c/3
+export default function Page({ params }) {
+  const { category, product } = params
+  // ...
+}
+```
+
+## شريحة ديناميكية شاملة
+
+```tsx filename="app/product/[...slug]/page.tsx" switcher
+export function generateStaticParams() {
+  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` التي تم إرجاعها بواسطة `generateStaticParams`
+// - /product/a/1
+// - /product/b/2
+// - /product/c/3
+export default function Page({ params }: { params: { slug: string[] } }) {
+  const { slug } = params
+  // ...
+}
+```
+
+```jsx filename="app/product/[...slug]/page.js" switcher
+export function generateStaticParams() {
+  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` التي تم إرجاعها بواسطة `generateStaticParams`
+// - /product/a/1
+// - /product/b/2
+// - /product/c/3
+export default function Page({ params }) {
+  const { slug } = params
+  // ...
+}
+```
+
+## أمثلة
+
+### شرائح ديناميكية متعددة في مسار
+
+يمكنك إنشاء params للشرائح الديناميكية فوق التخطيط أو الصفحة الحالية، ولكن **ليس تحتها**. على سبيل المثال، بالنظر إلى مسار `app/products/[category]/[product]`:
+
+- يمكن لـ `app/products/[category]/[product]/page.js` إنشاء params **لكل** من `[category]` و `[product]`.
+- يمكن لـ `app/products/[category]/layout.js` إنشاء params **فقط** لـ `[category]`.
+
+هناك طريقتان لإنشاء params لمسار به شرائح ديناميكية متعددة:
+
+### إنشاء params من الأسفل إلى الأعلى
+
+إنشاء شرائح ديناميكية متعددة من شريحة المسار الفرعية.
+
+```tsx filename="app/products/[category]/[product]/page.tsx" switcher
+// إنشاء شرائح لكل من [category] و [product]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+    product: product.id,
+  }))
+}
+
+export default function Page({
+  params,
+}: {
+  params: { category: string; product: string }
+}) {
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/[product]/page.js" switcher
+// إنشاء شرائح لكل من [category] و [product]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+    product: product.id,
+  }))
+}
+
+export default function Page({ params }) {
+  // ...
+}
+```
+
+### إنشاء params من الأعلى إلى الأسفل
+
+إنشاء الشرائح الأصلية أولاً واستخدام النتيجة لإنشاء الشرائح الفرعية.
+
+```tsx filename="app/products/[category]/layout.tsx" switcher
+// إنشاء شرائح لـ [category]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+  }))
+}
+
+export default function Layout({ params }: { params: { category: string } }) {
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/layout.js" switcher
+// إنشاء شرائح لـ [category]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+  }))
+}
+
+export default function Layout({ params }) {
+  // ...
+}
+```
+
+يتم تنفيذ دالة `generateStaticParams` لشريحة المسار الفرعية مرة واحدة لكل شريحة يولدها الأصل `generateStaticParams`.
+
+يمكن لدالة `generateStaticParams` الفرعية استخدام `params` المرجعة من دالة `generateStaticParams` الأصلية لإنشاء شرائحها الخاصة بشكل ديناميكي.
+
+```tsx filename="app/products/[category]/[product]/page.tsx" switcher
+// إنشاء شرائح لـ [product] باستخدام `params` الممررة من
+// دالة `generateStaticParams` للشريحة الأصلية
+export async function generateStaticParams({
+  params: { category },
+}: {
+  params: { category: string }
+}) {
+  const products = await fetch(
+    `https://.../products?category=${category}`
+  ).then((res) => res.json())
+
+  return products.map((product) => ({
+    product: product.id,
+  }))
+}
+
+export default function Page({
+  params,
+}: {
+  params: { category: string; product: string }
+}) {
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/[product]/page.js" switcher
+// إنشاء شرائح لـ [product] باستخدام `params` الممررة من
+// دالة `generateStaticParams` للشريحة الأصلية
+export async function generateStaticParams({ params: { category } }) {
+  const products = await fetch(
+    `https://.../products?category=${category}`
+  ).then((res) => res.json())
+
+  return products.map((product) => ({
+    product: product.id,
+  }))
+}
+
+export default function Page({ params }) {
+  // ...
+}
+```
+
+> **معلومة مفيدة**: يتم [تخزين](/docs/app/building-your-application/caching#request-memoization) طلبات `fetch` تلقائيًا لنفس البيانات عبر `generateMetadata`، `generateStaticParams`، التخطيطات، الصفحات، ومكونات الخادم. يمكن استخدام [`cache` في React](/docs/app/building-your-application/caching#request-memoization) إذا لم يكن `fetch` متاحًا.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                            |
+| --------- | ------------------------------------ |
+| `v13.0.0` | تم تقديم `generateStaticParams`.     |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/headers.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/headers.mdx
new file mode 100644
index 00000000..5caff378
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/headers.mdx
@@ -0,0 +1,90 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:22.001Z
+title: headers
+description: مرجع API لدالة headers.
+---
+
+تتيح لك دالة `headers` قراءة رؤوس طلب HTTP الواردة من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components).
+
+## `headers()`
+
+هذه API تمتد [لواجهة Web Headers API](https://developer.mozilla.org/docs/Web/API/Headers). وهي **للقراءة فقط**، مما يعني أنه لا يمكنك `تعيين` أو `حذف` رؤوس الطلب الصادرة.
+
+```tsx filename="app/page.tsx" switcher
+import { headers } from 'next/headers'
+
+export default function Page() {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return <div>Referer: {referer}</div>
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { headers } from 'next/headers'
+
+export default function Page() {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return <div>Referer: {referer}</div>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - `headers()` هي [دالة ديناميكية (Dynamic Function)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) لا يمكن معرفة قيمها المُرجعة مسبقًا. استخدامها في تخطيط أو صفحة سيؤدي إلى اختيار المسار لـ [عرض ديناميكي (dynamic rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) وقت الطلب.
+
+### مرجع API
+
+```tsx
+const headersList = headers()
+```
+
+#### المعاملات
+
+لا تأخذ `headers` أي معاملات.
+
+#### القيم المُرجعة
+
+ترجع `headers` كائن [Web Headers](https://developer.mozilla.org/docs/Web/API/Headers) **للقراءة فقط**.
+
+- [`Headers.entries()`](https://developer.mozilla.org/docs/Web/API/Headers/entries): تُرجع [مكررًا (iterator)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) يسمح بالمرور عبر جميع أزواج المفتاح/القيمة في هذا الكائن.
+- [`Headers.forEach()`](https://developer.mozilla.org/docs/Web/API/Headers/forEach): تنفذ دالة معينة مرة واحدة لكل زوج مفتاح/قيمة في كائن `Headers` هذا.
+- [`Headers.get()`](https://developer.mozilla.org/docs/Web/API/Headers/get): تُرجع [سلسلة نصية (String)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) تحتوي على جميع قيم رأس معين في كائن `Headers`.
+- [`Headers.has()`](https://developer.mozilla.org/docs/Web/API/Headers/has): تُرجع قيمة منطقية تشير إلى ما إذا كان كائن `Headers` يحتوي على رأس معين.
+- [`Headers.keys()`](https://developer.mozilla.org/docs/Web/API/Headers/keys): تُرجع [مكررًا (iterator)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) يسمح بالمرور عبر جميع مفاتيح أزواج المفتاح/القيمة في هذا الكائن.
+- [`Headers.values()`](https://developer.mozilla.org/docs/Web/API/Headers/values): تُرجع [مكررًا (iterator)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) يسمح بالمرور عبر جميع قيم أزواج المفتاح/القيمة في هذا الكائن.
+
+### أمثلة
+
+#### الاستخدام مع جلب البيانات
+
+يمكن استخدام `headers()` مع [Suspense لجلب البيانات (Suspense for Data Fetching)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating).
+
+```jsx filename="app/page.js"
+import { headers } from 'next/headers'
+
+async function getUser() {
+  const headersInstance = headers()
+  const authorization = headersInstance.get('authorization')
+  // تمرير رأس التفويض
+  const res = await fetch('...', {
+    headers: { authorization },
+  })
+  return res.json()
+}
+
+export default async function UserPage() {
+  const user = await getUser()
+  return <h1>{user.name}</h1>
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات               |
+| --------- | --------------------- |
+| `v13.0.0` | تم إدخال `headers`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/image-response.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/image-response.mdx
new file mode 100644
index 00000000..14620f83
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/image-response.mdx
@@ -0,0 +1,46 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:56.746Z
+title: ImageResponse
+description: مرجع API لبناء ImageResponse.
+---
+
+يسمح لك مُنشئ `ImageResponse` بإنشاء صور ديناميكية باستخدام JSX وCSS. هذا مفيد لإنشاء صور وسائل التواصل الاجتماعي مثل صور Open Graph وبطاقات Twitter وغيرها.
+
+الخيارات المتاحة لـ `ImageResponse` هي:
+
+```jsx
+import { ImageResponse } from 'next/server'
+
+new ImageResponse(
+  element: ReactElement,
+  options: {
+    width?: number = 1200
+    height?: number = 630
+    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
+    fonts?: {
+      name: string,
+      data: ArrayBuffer,
+      weight: number,
+      style: 'normal' | 'italic'
+    }[]
+    debug?: boolean = false
+
+    // Options that will be passed to the HTTP response
+    status?: number = 200
+    statusText?: string
+    headers?: Record<string, string>
+  },
+)
+```
+
+## خصائص CSS المدعومة
+
+يرجى الرجوع إلى [توثيق Satori](https://github.com/vercel/satori#css) للحصول على قائمة بميزات HTML وCSS المدعومة.
+
+## سجل التغييرات
+
+| الإصدار   | التغييرات                                              |
+| --------- | ---------------------------------------------------- |
+| `v13.3.0` | أصبح `ImageResponse` متاحًا للاستيراد من `next/server`.  |
+| `v13.0.0` | تم تقديم `ImageResponse` عبر حزمة `@vercel/og`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/index.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/index.mdx
new file mode 100644
index 00000000..a37262bc
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:38.494Z
+title: الدوال (Functions)
+description: مرجع API لدوال وخطافات (Hooks) Next.js.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/next-request.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/next-request.mdx
new file mode 100644
index 00000000..6eb144f6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/next-request.mdx
@@ -0,0 +1,91 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:59.576Z
+title: NextRequest
+description: مرجع API لـ NextRequest.
+---
+
+يمتد `NextRequest` من [واجهة طلب الويب (Web Request API)](https://developer.mozilla.org/docs/Web/API/Request) مع إضافة طرق إضافية لتسهيل الاستخدام.
+
+## `cookies`
+
+قراءة أو تعديل رأس [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) للطلب.
+
+### `set(name, value)`
+
+بالنظر إلى اسم، يقوم بتعيين كوكي بقيمة معينة في الطلب.
+
+```ts
+// عند استلام طلب لـ /home
+// تعيين كوكي لإخفاء اللافتة
+// سيكون للطلب رأس `Set-Cookie:show-banner=false;path=/home`
+request.cookies.set('show-banner', 'false')
+```
+
+### `get(name)`
+
+بالنظر إلى اسم الكوكي، يقوم بإرجاع قيمة الكوكي. إذا لم يتم العثور على الكوكي، يتم إرجاع `undefined`. إذا تم العثور على أكثر من كوكي، يتم إرجاع الأول.
+
+```ts
+// عند استلام طلب لـ /home
+// { name: 'show-banner', value: 'false', Path: '/home' }
+request.cookies.get('show-banner')
+```
+
+### `getAll()`
+
+بالنظر إلى اسم الكوكي، يقوم بإرجاع قيم الكوكي. إذا لم يتم تحديد اسم، يتم إرجاع جميع الكوكيز في الطلب.
+
+```ts
+// عند استلام طلب لـ /home
+// [
+//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
+//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
+// ]
+request.cookies.getAll('experiments')
+// بدلاً من ذلك، الحصول على جميع الكوكيز للطلب
+request.cookies.getAll()
+```
+
+### `delete(name)`
+
+بالنظر إلى اسم الكوكي، يقوم بحذف الكوكي من الطلب.
+
+```ts
+// إرجاع true إذا تم الحذف، false إذا لم يتم حذف شيء
+request.cookies.delete('experiments')
+```
+
+### `has(name)`
+
+بالنظر إلى اسم الكوكي، يقوم بإرجاع `true` إذا كان الكوكي موجودًا في الطلب.
+
+```ts
+// إرجاع true إذا كان الكوكي موجودًا، false إذا لم يكن موجودًا
+request.cookies.has('experiments')
+```
+
+### `clear()`
+
+إزالة رأس `Set-Cookie` من الطلب.
+
+```ts
+request.cookies.clear()
+```
+
+## `nextUrl`
+
+يمتد من واجهة [`URL`](https://developer.mozilla.org/docs/Web/API/URL) الأصلية مع إضافة طرق إضافية لتسهيل الاستخدام، بما في ذلك خصائص خاصة بـ Next.js.
+
+```ts
+// عند استلام طلب لـ /home، يكون pathname هو /home
+request.nextUrl.pathname
+// عند استلام طلب لـ /home?name=lee، يكون searchParams هو { 'name': 'lee' }
+request.nextUrl.searchParams
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                       |
+| --------- | ----------------------------- |
+| `v13.0.0` | تم تقديم `useSearchParams`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/next-response.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/next-response.mdx
new file mode 100644
index 00000000..f68a91f5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/next-response.mdx
@@ -0,0 +1,146 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:04.910Z
+title: NextResponse
+description: مرجع API لـ NextResponse.
+---
+
+تمتد `NextResponse` من [واجهة برمجة تطبيقات الرد على الويب (Web Response API)](https://developer.mozilla.org/docs/Web/API/Response) مع إضافة طرق إضافية لسهولة الاستخدام.
+
+## `cookies`
+
+قراءة أو تعديل رأس [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) في الرد.
+
+### `set(name, value)`
+
+تعيين كوكي بقيمة معينة في الرد باستخدام الاسم المحدد.
+
+```ts
+// مع طلب وارد إلى /home
+let response = NextResponse.next()
+// تعيين كوكي لإخفاء اللافتة
+response.cookies.set('show-banner', 'false')
+// سيكون للرد رأس `Set-Cookie:show-banner=false;path=/home`
+return response
+```
+
+### `get(name)`
+
+الحصول على قيمة الكوكي باستخدام اسمه. إذا لم يتم العثور على الكوكي، يتم إرجاع `undefined`. إذا تم العثور على أكثر من كوكي، يتم إرجاع الأول.
+
+```ts
+// مع طلب وارد إلى /home
+let response = NextResponse.next()
+// { name: 'show-banner', value: 'false', Path: '/home' }
+response.cookies.get('show-banner')
+```
+
+### `getAll()`
+
+الحصول على قيم الكوكي باستخدام اسمه. إذا لم يتم تحديد اسم، يتم إرجاع جميع الكوكيز في الرد.
+
+```ts
+// مع طلب وارد إلى /home
+let response = NextResponse.next()
+// [
+//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
+//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
+// ]
+response.cookies.getAll('experiments')
+// أو الحصول على جميع الكوكيز للرد
+response.cookies.getAll()
+```
+
+### `delete(name)`
+
+حذف الكوكي من الرد باستخدام اسمه.
+
+```ts
+// مع طلب وارد إلى /home
+let response = NextResponse.next()
+// إرجاع true إذا تم الحذف، false إذا لم يتم حذف أي شيء
+response.cookies.delete('experiments')
+```
+
+## `json()`
+
+إنشاء رد يحتوي على جسم JSON معين.
+
+```ts filename="app/api/route.ts" switcher
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { NextResponse } from 'next/server'
+
+export async function GET(request) {
+  return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+}
+```
+
+## `redirect()`
+
+إنشاء رد يقوم بإعادة التوجيه إلى [عنوان URL](https://developer.mozilla.org/docs/Web/API/URL).
+
+```ts
+import { NextResponse } from 'next/server'
+
+return NextResponse.redirect(new URL('/new', request.url))
+```
+
+يمكن إنشاء [عنوان URL](https://developer.mozilla.org/docs/Web/API/URL) وتعديله قبل استخدامه في طريقة `NextResponse.redirect()`. على سبيل المثال، يمكنك استخدام خاصية `request.nextUrl` للحصول على عنوان URL الحالي، ثم تعديله لإعادة التوجيه إلى عنوان URL مختلف.
+
+```ts
+import { NextResponse } from 'next/server'
+
+// مع طلب وارد...
+const loginUrl = new URL('/login', request.url)
+// إضافة ?from=/incoming-url إلى عنوان URL /login
+loginUrl.searchParams.set('from', request.nextUrl.pathname)
+// ثم إعادة التوجيه إلى عنوان URL الجديد
+return NextResponse.redirect(loginUrl)
+```
+
+## `rewrite()`
+
+إنشاء رد يقوم بإعادة الكتابة (الوكالة) لعنوان URL معين مع الحفاظ على عنوان URL الأصلي.
+
+```ts
+import { NextResponse } from 'next/server'
+
+// الطلب الوارد: /about، المتصفح يعرض /about
+// الطلب المعاد كتابته: /proxy، المتصفح يعرض /about
+return NextResponse.rewrite(new URL('/proxy', request.url))
+```
+
+## `next()`
+
+طريقة `next()` مفيدة في البرمجيات الوسيطة (Middleware)، حيث تسمح لك بالعودة مبكرًا ومتابعة التوجيه.
+
+```ts
+import { NextResponse } from 'next/server'
+
+return NextResponse.next()
+```
+
+يمكنك أيضًا تمرير `headers` عند إنشاء الرد:
+
+```ts
+import { NextResponse } from 'next/server'
+
+// مع طلب وارد...
+const newHeaders = new Headers(request.headers)
+// إضافة رأس جديد
+newHeaders.set('x-version', '123')
+// وإنشاء رد مع الرؤوس الجديدة
+return NextResponse.next({
+  request: {
+    // رؤوس الطلب الجديدة
+    headers: newHeaders,
+  },
+})
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/not-found.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/not-found.mdx
new file mode 100644
index 00000000..36069df7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/not-found.mdx
@@ -0,0 +1,40 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:31.321Z
+title: notFound
+description: مرجع API لوظيفة notFound.
+---
+
+تتيح لك وظيفة `notFound` عرض [ملف not-found](/docs/app/api-reference/file-conventions/not-found) داخل مقطع مسار (route segment) بالإضافة إلى إدراج وسم `<meta name="robots" content="noindex" />`.
+
+## `notFound()`
+
+استدعاء الدالة `notFound()` يرمي خطأً من نوع `NEXT_NOT_FOUND` ويوقف عرض مقطع المسار الذي تم استدعاؤها فيه. يتيح لك تحديد [ملف not-found](/docs/app/api-reference/file-conventions/not-found) معالجة هذه الأخطاء بطريقة متحضرة عن طريق عرض واجهة Not Found داخل المقطع.
+
+```jsx filename="app/user/[id]/page.js"
+import { notFound } from 'next/navigation'
+
+async function fetchUser(id) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }) {
+  const user = await fetchUser(params.id)
+
+  if (!user) {
+    notFound()
+  }
+
+  // ...
+}
+```
+
+> **معلومة مفيدة**: لا تحتاج لاستخدام `return notFound()` مع الدالة `notFound()` بسبب استخدام نوع [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never) في TypeScript.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                 |
+| --------- | ------------------------- |
+| `v13.0.0` | تم إدخال `notFound`.       |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/permanentRedirect.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/permanentRedirect.mdx
new file mode 100644
index 00000000..650013a0
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/permanentRedirect.mdx
@@ -0,0 +1,60 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:41.461Z
+title: permanentRedirect
+description: مرجع API لوظيفة permanentRedirect.
+---
+
+تتيح لك وظيفة `permanentRedirect` توجيه المستخدم إلى عنوان URL آخر. يمكن استخدام `permanentRedirect` في مكونات الخادم، ومكونات العميل، [وحدات معالجة المسارات](/docs/app/building-your-application/routing/route-handler)، و[إجراءات الخادم](/docs/app/building-your-application/data-fetching/forms-and-mutations).
+
+عند استخدامها في سياق بث، سيتم إدراج وسم meta لإصدار التوجيه على جانب العميل. وإلا، سيتم تقديم استجابة توجيه HTTP 308 (دائم) للمتصل.
+
+إذا لم يكن المورد موجودًا، يمكنك استخدام [وظيفة `notFound`](/docs/app/api-reference/functions/not-found) بدلاً من ذلك.
+
+> **معلومة مفيدة**: إذا كنت تفضل إرجاع توجيه HTTP 307 (مؤقت) بدلاً من 308 (دائم)، يمكنك استخدام [وظيفة `redirect`](/docs/app/api-reference/functions/redirect) بدلاً من ذلك.
+
+## المعاملات
+
+تقبل وظيفة `permanentRedirect` وسيطين:
+
+```js
+permanentRedirect(path, type)
+```
+
+| المعامل  | النوع                                                        | الوصف                                                 |
+| --------- | ------------------------------------------------------------- | ----------------------------------------------------------- |
+| `path`    | `string`                                                      | عنوان URL للتوجيه إليه. يمكن أن يكون مسارًا نسبيًا أو مطلقًا. |
+| `type`    | `'replace'` (افتراضي) أو `'push'` (افتراضي في إجراءات الخادم) | نوع التوجيه المطلوب تنفيذه.                            |
+
+بشكل افتراضي، سيستخدم `permanentRedirect` `push` (إضافة إدخال جديد إلى سجل المتصفح) في [إجراءات الخادم](/docs/app/building-your-application/data-fetching/forms-and-mutations) و`replace` (استبدال عنوان URL الحالي في سجل المتصفح) في جميع الأماكن الأخرى. يمكنك تجاوز هذا السلوك عن طريق تحديد معامل `type`.
+
+لا يؤثر معامل `type` عند استخدامه في مكونات الخادم.
+
+## القيم المرجعة
+
+لا ترجع `permanentRedirect` أي قيمة.
+
+## مثال
+
+استدعاء وظيفة `permanentRedirect()` يرمي خطأ `NEXT_REDIRECT` ويوقف عرض مقطع المسار الذي تم رميه فيه.
+
+```jsx filename="app/team/[id]/page.js"
+import { permanentRedirect } from 'next/navigation'
+
+async function fetchTeam(id) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }) {
+  const team = await fetchTeam(params.id)
+  if (!team) {
+    permanentRedirect('/login')
+  }
+
+  // ...
+}
+```
+
+> **معلومة مفيدة**: لا يتطلب `permanentRedirect` منك استخدام `return permanentRedirect()` لأنه يستخدم نوع TypeScript [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/redirect.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/redirect.mdx
new file mode 100644
index 00000000..afdb094b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/redirect.mdx
@@ -0,0 +1,64 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:42.171Z
+title: إعادة التوجيه (redirect)
+description: مرجع API لوظيفة إعادة التوجيه (redirect function).
+---
+
+تتيح لك وظيفة `redirect` توجيه المستخدم إلى عنوان URL آخر. يمكن استخدام `redirect` في مكونات الخادم (Server Components)، ومكونات العميل (Client Components)، [ومعالجات المسارات (Route Handlers)](/docs/app/building-your-application/routing/route-handlers)، و[وأفعال الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/forms-and-mutations).
+
+عند استخدامها في [سياق البث (streaming context)](/docs/app/building-your-application/routing/loading-ui-and-streaming#what-is-streaming)، سيقوم هذا بإدراج وسم meta لتنفيذ إعادة التوجيه على جانب العميل. وإلا، سيقوم بإرسال استجابة إعادة توجيه HTTP 307 إلى المتصل.
+
+إذا لم يكن المورد موجودًا، يمكنك استخدام [وظيفة `notFound`](/docs/app/api-reference/functions/not-found) بدلاً من ذلك.
+
+> **معلومة مفيدة**: إذا كنت تفضل إرجاع إعادة توجيه HTTP 308 (دائم) بدلاً من 307 (مؤقت)، يمكنك استخدام [وظيفة `permanentRedirect`](/docs/app/api-reference/functions/permanentRedirect) بدلاً من ذلك.
+
+## المعاملات (Parameters)
+
+تقبل وظيفة `redirect` وسيطين:
+
+```js
+redirect(path, type)
+```
+
+| المعامل   | النوع                                                          | الوصف                                                 |
+| --------- | ------------------------------------------------------------- | ----------------------------------------------------------- |
+| `path`    | `string`                                                      | عنوان URL لإعادة التوجيه إليه. يمكن أن يكون مسارًا نسبيًا أو مطلقًا. |
+| `type`    | `'replace'` (افتراضي) أو `'push'` (افتراضي في Server Actions) | نوع إعادة التوجيه المطلوب تنفيذه.                            |
+
+بشكل افتراضي، سيستخدم `redirect` `push` (إضافة إدخال جديد إلى سجل المتصفح) في [أفعال الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/forms-and-mutations) و`replace` (استبدال عنوان URL الحالي في سجل المتصفح) في جميع الأماكن الأخرى. يمكنك تجاوز هذا السلوك عن طريق تحديد معامل `type`.
+
+لا يؤثر معامل `type` عند استخدامه في مكونات الخادم (Server Components).
+
+## القيم المرجعة (Returns)
+
+لا ترجع وظيفة `redirect` أي قيمة.
+
+## مثال
+
+استدعاء وظيفة `redirect()` يثير خطأ `NEXT_REDIRECT` ويوقف عرض مقطع المسار الذي تم إثارته فيه.
+
+```jsx filename="app/team/[id]/page.js"
+import { redirect } from 'next/navigation'
+
+async function fetchTeam(id) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }) {
+  const team = await fetchTeam(params.id)
+  if (!team) {
+    redirect('/login')
+  }
+
+  // ...
+}
+```
+
+> **معلومة مفيدة**: لا يتطلب `redirect` استخدام `return redirect()` حيث يستخدم نوع TypeScript [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never).
+
+| الإصدار   | التغييرات                |
+| --------- | ---------------------- |
+| `v13.0.0` | تم إدخال `redirect`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/revalidatePath.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/revalidatePath.mdx
new file mode 100644
index 00000000..a10e6f17
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/revalidatePath.mdx
@@ -0,0 +1,113 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:43.552Z
+title: revalidatePath
+description: مرجع API لوظيفة revalidatePath.
+---
+
+تتيح لك `revalidatePath` إزالة [البيانات المخزنة مؤقتًا](/docs/app/building-your-application/caching) عند الطلب لمسار معين.
+
+> **معلومة مفيدة**:
+>
+> - `revalidatePath` متاحة في كل من [بيئات تشغيل Node.js وEdge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+> - `revalidatePath` تبطِل ذاكرة التخزين المؤقت فقط عند زيارة المسار المضمن بعد ذلك. هذا يعني أن استدعاء `revalidatePath` مع جزء مسار ديناميكي لن يؤدي إلى تشغيل العديد من عمليات إعادة التحقق على الفور. يحدث الإبطال فقط عند زيارة المسار بعد ذلك.
+
+## المعاملات
+
+```tsx
+revalidatePath(path: string, type?: 'page' | 'layout'): void;
+```
+
+- `path`: إما سلسلة تمثل مسار نظام الملفات المرتبط بالبيانات التي تريد إعادة التحقق منها (على سبيل المثال، `/product/[slug]/page`)، أو جزء المسار الحرفي (على سبيل المثال، `/product/123`). يجب أن يكون أقل من 1024 حرفًا.
+- `type`: (اختياري) سلسلة `'page'` أو `'layout'` لتغيير نوع المسار لإعادة التحقق منه.
+
+## القيم المُرجعة
+
+لا تُرجع `revalidatePath` أي قيمة.
+
+## أمثلة
+
+### إعادة التحقق من عنوان URL معين
+
+```ts
+import { revalidatePath } from 'next/cache'
+revalidatePath('/blog/post-1')
+```
+
+سيؤدي هذا إلى إعادة التحقق من عنوان URL معين عند الزيارة التالية للصفحة.
+
+### إعادة التحقق من مسار صفحة
+
+```ts
+import { revalidatePath } from 'next/cache'
+revalidatePath('/blog/[slug]', 'page')
+// أو مع مجموعات المسارات
+revalidatePath('/(main)/post/[slug]', 'page')
+```
+
+سيؤدي هذا إلى إعادة التحقق من أي عنوان URL يتطابق مع ملف `page` المقدم عند الزيارة التالية للصفحة. هذا _لن_ يبطل الصفحات الموجودة أسفل الصفحة المحددة. على سبيل المثال، `/blog/[slug]` لن تبطل `/blog/[slug]/[author]`.
+
+### إعادة التحقق من مسار تخطيط
+
+```ts
+import { revalidatePath } from 'next/cache'
+revalidatePath('/blog/[slug]', 'layout')
+// أو مع مجموعات المسارات
+revalidatePath('/(main)/post/[slug]', 'layout')
+```
+
+سيؤدي هذا إلى إعادة التحقق من أي عنوان URL يتطابق مع ملف `layout` المقدم عند الزيارة التالية للصفحة. سيؤدي هذا إلى إعادة التحقق من الصفحات الموجودة أسفل نفس التخطيط عند الزيارة التالية. على سبيل المثال، في الحالة أعلاه، سيتم أيضًا إعادة التحقق من `/blog/[slug]/[another]` عند الزيارة التالية.
+
+### إجراء الخادم (Server Action)
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export default async function submit() {
+  await submitForm()
+  revalidatePath('/')
+}
+```
+
+### معالج المسار (Route Handler)
+
+```ts filename="app/api/revalidate/route.ts" switcher
+import { revalidatePath } from 'next/cache'
+import { NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const path = request.nextUrl.searchParams.get('path')
+
+  if (path) {
+    revalidatePath(path)
+    return Response.json({ revalidated: true, now: Date.now() })
+  }
+
+  return Response.json({
+    revalidated: false,
+    now: Date.now(),
+    message: 'Missing path to revalidate',
+  })
+}
+```
+
+```js filename="app/api/revalidate/route.js" switcher
+import { revalidatePath } from 'next/cache'
+
+export async function GET(request) {
+  const path = request.nextUrl.searchParams.get('path')
+
+  if (path) {
+    revalidatePath(path)
+    return Response.json({ revalidated: true, now: Date.now() })
+  }
+
+  return Response.json({
+    revalidated: false,
+    now: Date.now(),
+    message: 'Missing path to revalidate',
+  })
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/revalidateTag.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/revalidateTag.mdx
new file mode 100644
index 00000000..faffc748
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/revalidateTag.mdx
@@ -0,0 +1,69 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:25.233Z
+title: revalidateTag
+description: مرجع API لوظيفة `revalidateTag`.
+---
+
+تتيح لك `revalidateTag` إبطال [البيانات المخزنة مؤقتًا](/docs/app/building-your-application/caching) عند الطلب لعلامة تخزين مؤقت محددة.
+
+> **معلومة مفيدة**:
+>
+> - `revalidateTag` متاحة في كل من [بيئات تشغيل Node.js و Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+> - `revalidateTag` لا تبطل التخزين المؤقت إلا عند زيارة المسار التالية. هذا يعني أن استدعاء `revalidateTag` مع جزء مسار ديناميكي لن يؤدي إلى إطلاق العديد من عمليات الإبطال مرة واحدة. يحدث الإبطال فقط عند زيارة المسار التالية.
+
+## المعاملات
+
+```tsx
+revalidateTag(tag: string): void;
+```
+
+- `tag`: سلسلة تمثل علامة التخزين المؤقت المرتبطة بالبيانات التي تريد إبطالها. يجب أن تكون أقل من أو تساوي 256 حرفًا.
+
+يمكنك إضافة علامات إلى `fetch` كما يلي:
+
+```tsx
+fetch(url, { next: { tags: [...] } });
+```
+
+## القيم المُرجعة
+
+لا ترجع `revalidateTag` أي قيمة.
+
+## أمثلة
+
+### إجراء الخادم (Server Action)
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export default async function submit() {
+  await addPost()
+  revalidateTag('posts')
+}
+```
+
+### معالج المسار (Route Handler)
+
+```ts filename="app/api/revalidate/route.ts" switcher
+import { NextRequest } from 'next/server'
+import { revalidateTag } from 'next/cache'
+
+export async function GET(request: NextRequest) {
+  const tag = request.nextUrl.searchParams.get('tag')
+  revalidateTag(tag)
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
+
+```js filename="app/api/revalidate/route.js" switcher
+import { revalidateTag } from 'next/cache'
+
+export async function GET(request) {
+  const tag = request.nextUrl.searchParams.get('tag')
+  revalidateTag(tag)
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/server-actions.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/server-actions.mdx
new file mode 100644
index 00000000..6caff12e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/server-actions.mdx
@@ -0,0 +1,177 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:56.691Z
+title: إجراءات الخادم (Server Actions)
+nav_title: إجراءات الخادم
+description: مرجع API لإجراءات الخادم (Server Actions) في Next.js.
+related:
+  title: الخطوات التالية
+  description: لمزيد من المعلومات حول ما يمكنك القيام به بعد ذلك، نوصي بالأقسام التالية
+  links:
+    - app/building-your-application/data-fetching/forms-and-mutations
+---
+
+{/* TODO: This page will need to link back to React docs mentioned at the bottom */}
+
+تتكامل Next.js مع إجراءات React لتوفير حل مدمج لـ [التحولات على الخادم (server mutations)](/docs/app/building-your-application/data-fetching/forms-and-mutations).
+
+## الاتفاقية
+
+يمكنك تمكين إجراءات الخادم في مشروع Next.js الخاص بك عن طريق تفعيل العلامة التجريبية `serverActions`.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    serverActions: true,
+  },
+}
+```
+
+يمكن تعريف إجراءات الخادم في مكانين:
+
+- داخل المكون الذي يستخدمه (مكونات الخادم فقط).
+- في ملف منفصل (لمكونات العميل والخادم)، لإعادة الاستخدام. يمكنك تعريف عدة إجراءات خادم في ملف واحد.
+
+### مع مكونات الخادم
+
+قم بإنشاء إجراء خادم عن طريق تعريف دالة غير متزامنة مع التوجيه [`"use server"`](https://react.dev/reference/react/use-server) في أعلى جسم الدالة. يضمن `"use server"` أن هذه الدالة تنفذ فقط على الخادم.
+
+يجب أن تحتوي هذه الدالة على [وسائط قابلة للتسلسل (serializable arguments)](https://developer.mozilla.org/docs/Glossary/Serialization) وقيمة [قابلة للتسلسل (serializable return value)](https://developer.mozilla.org/docs/Glossary/Serialization).
+
+```jsx filename="app/page.js" highlight={2}
+export default function ServerComponent() {
+  async function myAction() {
+    'use server'
+    // ...
+  }
+}
+```
+
+### مع مكونات العميل
+
+#### الاستيراد
+
+قم بإنشاء إجراء الخادم في ملف منفصل مع التوجيه `"use server"` في أعلى الملف. ثم استورد إجراء الخادم إلى مكون العميل الخاص بك:
+
+```js filename="app/actions.js" highlight={1}
+'use server'
+
+export async function myAction() {
+  // ...
+}
+```
+
+```jsx filename="app/client-component.jsx" highlight={1}
+'use client'
+
+import { myAction } from './actions'
+
+export default function ClientComponent() {
+  return (
+    <form action={myAction}>
+      <button type="submit">إضافة إلى السلة</button>
+    </form>
+  )
+}
+```
+
+> **معلومة مفيدة**: عند استخدام التوجيه `"use server"` في أعلى الملف، سيتم اعتبار جميع الصادرات أدناه كإجراءات خادم. يمكنك الحصول على عدة إجراءات خادم في ملف واحد.
+
+#### الخصائص (Props)
+
+في بعض الحالات، قد ترغب في تمرير إجراء خادم إلى مكون عميل كخاصية.
+
+```jsx
+<ClientComponent updateItem={updateItem} />
+```
+
+```jsx filename="app/client-component.jsx"
+'use client'
+
+export default function ClientComponent({ myAction }) {
+  return (
+    <form action={myAction}>
+      <input type="text" name="name" />
+      <button type="submit">تحديث العنصر</button>
+    </form>
+  )
+}
+```
+
+### ربط الوسائط
+
+يمكنك ربط الوسائط بإجراء خادم باستخدام طريقة `bind`. هذا يسمح لك بإنشاء إجراء خادم جديد مع بعض الوسائط المربوطة مسبقًا. يكون هذا مفيدًا عندما تريد تمرير وسائط إضافية إلى إجراء خادم.
+
+```jsx filename="app/client-component.jsx" highlight={6}
+'use client'
+
+import { updateUser } from './actions'
+
+export function UserProfile({ userId }) {
+  const updateUserWithId = updateUser.bind(null, userId)
+
+  return (
+    <form action={updateUserWithId}>
+      <input type="text" name="name" />
+      <button type="submit">تحديث اسم المستخدم</button>
+    </form>
+  )
+}
+```
+
+ثم سيستقبل إجراء الخادم `updateUser` وسيطة `userId` بالإضافة إلى بيانات النموذج:
+
+```js filename="app/actions.js"
+'use server'
+
+export async function updateUser(userId, formData) {
+  // ...
+}
+```
+
+> **معلومة مفيدة**: تعمل `.bind` لإجراء خادم في كل من مكونات الخادم والعميل. كما أنها تدعم [التحسين التدريجي (Progressive Enhancement)](#progressive-enhancement).
+
+## الاستدعاء
+
+يمكنك استدعاء إجراءات الخادم باستخدام الطرق التالية:
+
+- باستخدام `action`: خاصية `action` في React تسمح باستدعاء إجراء خادم على عنصر `<form>`.
+- باستخدام `formAction`: خاصية `formAction` في React تسمح بالتعامل مع عناصر `<button>`، `<input type="submit">`، و `<input type="image">` داخل `<form>`.
+- استدعاء مخصص باستخدام `startTransition`: استدعاء إجراءات الخادم دون استخدام `action` أو `formAction` عن طريق استخدام `startTransition`. هذه الطريقة **تعطل [التحسين التدريجي (Progressive Enhancement)](#progressive-enhancement)**.
+
+## التحسين التدريجي (Progressive Enhancement)
+
+يسمح التحسين التدريجي لـ `<form>` بالعمل بشكل صحيح بدون JavaScript، أو مع تعطيل JavaScript. هذا يسمح للمستخدمين بالتفاعل مع النموذج وإرسال البيانات حتى إذا لم يتم تحميل JavaScript للنموذج بعد أو إذا فشل في التحميل.
+
+تدعم إجراءات React (سواء على الخادم أو العميل) التحسين التدريجي، باستخدام إحدى الاستراتيجيتين:
+
+- إذا تم تمرير **إجراء خادم** مباشرة إلى `<form>`، فإن النموذج يكون تفاعليًا **حتى إذا كان JavaScript معطلاً**.
+- إذا تم تمرير **إجراء عميل** إلى `<form>`، يظل النموذج تفاعليًا، ولكن سيتم وضع الإجراء في قائمة انتظار حتى يتم ترطيب النموذج. يعطي React الأولوية للإجراء، لذلك يحدث بسرعة.
+
+في كلتا الحالتين، يكون النموذج تفاعليًا قبل حدوث الترطيب. على الرغم من أن إجراءات الخادم لها فائدة إضافية تتمثل في عدم الاعتماد على JavaScript من جانب العميل، يمكنك مع ذلك تكوين سلوك إضافي مع إجراءات العميل حسب الرغبة دون التضحية بالتفاعلية.
+
+## حد الحجم
+
+بشكل افتراضي، الحد الأقصى لحجم جسم الطلب المرسل إلى إجراء خادم هو 1MB، لمنع استهلاك موارد الخادم المفرطة في تحليل كميات كبيرة من البيانات.
+
+ومع ذلك، يمكنك تكوين هذا الحد باستخدام خيار `serverActionsBodySizeLimit`. يمكن أن يأخذ عدد البايتات أو أي تنسيق سلسلة مدعوم من البايتات، على سبيل المثال `1000`، `'500kb'` أو `'3mb'`.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    serverActions: true,
+    serverActionsBodySizeLimit: '2mb',
+  },
+}
+```
+
+## موارد إضافية
+
+يتم حاليًا توثيق صفحات React API التالية:
+
+- [`"use server"`](https://react.dev/reference/react/use-server)
+- `action` (🚧)
+- `formAction` (🚧)
+- `useFormStatus` (🚧)
+- `useFormState` (🚧)
+- `useOptimistic` (🚧)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-params.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-params.mdx
new file mode 100644
index 00000000..2c7f369f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-params.mdx
@@ -0,0 +1,75 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:05.815Z
+title: useParams
+description: مرجع API لخطاف `useParams`.
+---
+
+`useParams` هو خطاف لمكون **العميل (Client Component)** يتيح لك قراءة [المعاملات الديناميكية (dynamic params)](/docs/app/building-your-application/routing/dynamic-routes) للمسار المملوءة بواسطة عنوان URL الحالي.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const params = useParams()
+
+  // Route -> /shop/[tag]/[item]
+  // URL -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  console.log(params)
+
+  return <></>
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const params = useParams()
+
+  // Route -> /shop/[tag]/[item]
+  // URL -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  console.log(params)
+
+  return <></>
+}
+```
+
+## المعاملات
+
+```tsx
+const params = useParams()
+```
+
+لا يأخذ `useParams` أي معاملات.
+
+## القيم المُرجعة
+
+يُرجع `useParams` كائنًا يحتوي على [المعاملات الديناميكية (dynamic parameters)](/docs/app/building-your-application/routing/dynamic-routes) المملوءة للمسار الحالي.
+
+- كل خاصية في الكائن تمثل مقطعًا ديناميكيًا نشطًا.
+- اسم الخاصية هو اسم المقطع، وقيمة الخاصية هي القيمة التي تم ملء المقطع بها.
+- ستكون قيمة الخاصية إما `string` أو مصفوفة من `string` بناءً على [نوع المقطع الديناميكي](/docs/app/building-your-application/routing/dynamic-routes).
+- إذا كان المسار لا يحتوي على معاملات ديناميكية، يُرجع `useParams` كائنًا فارغًا.
+- إذا تم استخدامه في `pages`، يُرجع `useParams` قيمة `null`.
+
+على سبيل المثال:
+
+| المسار                           | العنوان URL  | `useParams()`             |
+| ------------------------------- | ----------- | ------------------------- |
+| `app/shop/page.js`              | `/shop`     | `null`                    |
+| `app/shop/[slug]/page.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/page.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                 |
+| --------- | ----------------------- |
+| `v13.3.0` | تم تقديم `useParams`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-pathname.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-pathname.mdx
new file mode 100644
index 00000000..d2028d26
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-pathname.mdx
@@ -0,0 +1,96 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:11.552Z
+title: usePathname
+description: مرجع API لخطاف `usePathname`.
+---
+
+`usePathname` هو خطاف لمكون العميل (Client Component) يتيح لك قراءة مسار (pathname) عنوان URL الحالي.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const pathname = usePathname()
+  return <p>Current pathname: {pathname}</p>
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const pathname = usePathname()
+  return <p>Current pathname: {pathname}</p>
+}
+```
+
+يتطلب `usePathname` عمدًا استخدام [مكون العميل (Client Component)](/docs/app/building-your-application/rendering/client-components). من المهم ملاحظة أن مكونات العميل ليست تحسينًا سلبيًا، بل هي جزء أساسي من بنية [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components).
+
+على سبيل المثال، سيتم عرض مكون العميل الذي يستخدم `usePathname` في HTML عند تحميل الصفحة الأولى. عند الانتقال إلى مسار جديد، لا يحتاج هذا المكون إلى إعادة جلب البيانات. بدلاً من ذلك، يتم تنزيل المكون مرة واحدة (في حزمة جافاسكريبت الخاصة بالعميل)، ويعاد عرضه بناءً على الحالة الحالية.
+
+> **معلومة مفيدة**:
+>
+> - قراءة عنوان URL الحالي من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components) غير مدعومة. هذا التصميم مقصود لدعم الحفاظ على حالة التخطيط عبر تنقلات الصفحات.
+> - وضع التوافق:
+>   - يمكن أن يُرجع `usePathname` قيمة `null` عند عرض [مسار احتياطي (fallback route)](/docs/pages/api-reference/functions/get-static-paths#fallback-true) أو عندما يتم [تحسين صفحة دليل `pages` تلقائيًا بشكل ثابت](/docs/pages/building-your-application/rendering/automatic-static-optimization) بواسطة Next.js ولم يكن الموجه جاهزًا.
+>   - سيقوم Next.js بتحديث أنواعك تلقائيًا إذا اكتشف وجود كل من دليل `app` و`pages` في مشروعك.
+
+## المعاملات
+
+```tsx
+const pathname = usePathname()
+```
+
+لا يأخذ `usePathname` أي معاملات.
+
+## القيم المُرجعة
+
+يُرجع `usePathname` سلسلة تمثل مسار عنوان URL الحالي. على سبيل المثال:
+
+| URL                 | القيمة المُرجعة       |
+| ------------------- | --------------------- |
+| `/`                 | `'/'`                 |
+| `/dashboard`        | `'/dashboard'`        |
+| `/dashboard?v=2`    | `'/dashboard'`        |
+| `/blog/hello-world` | `'/blog/hello-world'` |
+
+## أمثلة
+
+### تنفيذ إجراء استجابةً لتغيير المسار
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+
+function ExampleClientComponent() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  useEffect(() => {
+    // نفّذ شيئًا هنا...
+  }, [pathname, searchParams])
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+
+function ExampleClientComponent() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  useEffect(() => {
+    // نفّذ شيئًا هنا...
+  }, [pathname, searchParams])
+}
+```
+
+| الإصدار   | التغييرات                   |
+| --------- | ------------------------- |
+| `v13.0.0` | تم تقديم `usePathname`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx
new file mode 100644
index 00000000..39a9a586
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx
@@ -0,0 +1,224 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:51.750Z
+title: useReportWebVitals
+description: مرجع API لوظيفة useReportWebVitals.
+---
+
+{/* المحتوى مشترك بين موجّه التطبيق وموجّه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجّه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+يتيح لك خطاف `useReportWebVitals` الإبلاغ عن [مؤشرات الويب الأساسية (Core Web Vitals)](https://web.dev/vitals/)، ويمكن استخدامه مع خدمة التحليلات الخاصة بك.
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { useReportWebVitals } from 'next/web-vitals'
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals((metric) => {
+    console.log(metric)
+  })
+
+  return <Component {...pageProps} />
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```jsx filename="app/_components/web-vitals.js"
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    console.log(metric)
+  })
+}
+```
+
+```jsx filename="app/layout.js"
+import { WebVitals } from './_components/web-vitals'
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>
+        <WebVitals />
+        {children}
+      </body>
+    </html>
+  )
+}
+```
+
+> نظرًا لأن خطاف `useReportWebVitals` يتطلب توجيه `"use client"`، فإن النهج الأكثر كفاءة هو إنشاء مكون منفصل يستورده التخطيط الجذري. هذا يحصر حدود العميل حصريًا على مكون `WebVitals`.
+
+</AppOnly>
+
+## useReportWebVitals
+
+كائن `metric` الممر كوسيطة للخطاف يتكون من عدة خصائص:
+
+- `id`: معرف فريد للمقياس في سياق تحميل الصفحة الحالي
+- `name`: اسم مقياس الأداء. القيم المحتملة تشمل أسماء مقاييس [مؤشرات الويب](#web-vitals) (TTFB, FCP, LCP, FID, CLS) الخاصة بتطبيق الويب.
+- `delta`: الفرق بين القيمة الحالية والقيمة السابقة للمقياس. القيمة عادةً تكون بالميلي ثانية وتمثل التغيير في قيمة المقياس بمرور الوقت.
+- `entries`: مصفوفة من [إدخالات الأداء (Performance Entries)](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) المرتبطة بالمقياس. توفر هذه الإدخالات معلومات مفصلة عن أحداث الأداء المتعلقة بالمقياس.
+- `navigationType`: يشير إلى [نوع التنقل (type of navigation)](https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming/type) الذي أطلق جمع المقياس. القيم المحتملة تشمل `"navigate"`, `"reload"`, `"back_forward"`, و `"prerender"`.
+- `rating`: تقييم نوعي لقيمة المقياس، يوفر تقييمًا للأداء. القيم المحتملة هي `"good"`, `"needs-improvement"`, و `"poor"`. يتم تحديد التقييم عادةً بمقارنة قيمة المقياس مع عتبات محددة مسبقًا تشير إلى أداء مقبول أو دون المستوى الأمثل.
+- `value`: القيمة الفعلية أو مدة إدخال الأداء، عادةً بالميلي ثانية. توفر القيمة مقياسًا كميًا لجانب الأداء الذي يتم تتبعه بواسطة المقياس. يعتمد مصدر القيمة على المقياس المحدد الذي يتم قياسه ويمكن أن يأتي من واجهات [أداء API (Performance API)](https://developer.mozilla.org/docs/Web/API/Performance_API) المختلفة.
+
+## مؤشرات الويب (Web Vitals)
+
+[مؤشرات الويب (Web Vitals)](https://web.dev/vitals/) هي مجموعة من المقاييس المفيدة التي تهدف إلى التقاط تجربة المستخدم لصفحة الويب. تتضمن جميع مؤشرات الويب التالية:
+
+- [الوقت حتى أول بايت (Time to First Byte)](https://developer.mozilla.org/docs/Glossary/Time_to_first_byte) (TTFB)
+- [أول عرض للمحتوى (First Contentful Paint)](https://developer.mozilla.org/docs/Glossary/First_contentful_paint) (FCP)
+- [أكبر عرض للمحتوى (Largest Contentful Paint)](https://web.dev/lcp/) (LCP)
+- [تأخر أول إدخال (First Input Delay)](https://web.dev/fid/) (FID)
+- [الانزياح التراكمي للتخطيط (Cumulative Layout Shift)](https://web.dev/cls/) (CLS)
+- [التفاعل حتى العرض التالي (Interaction to Next Paint)](https://web.dev/inp/) (INP)
+
+يمكنك التعامل مع جميع نتائج هذه المقاييس باستخدام خاصية `name`.
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { useReportWebVitals } from 'next/web-vitals'
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // التعامل مع نتائج FCP
+      }
+      case 'LCP': {
+        // التعامل مع نتائج LCP
+      }
+      // ...
+    }
+  })
+
+  return <Component {...pageProps} />
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```tsx filename="app/components/web-vitals.tsx" switcher
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // التعامل مع نتائج FCP
+      }
+      case 'LCP': {
+        // التعامل مع نتائج LCP
+      }
+      // ...
+    }
+  })
+}
+```
+
+```jsx filename="app/components/web-vitals.js" switcher
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // التعامل مع نتائج FCP
+      }
+      case 'LCP': {
+        // التعامل مع نتائج LCP
+      }
+      // ...
+    }
+  })
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## مقاييس مخصصة
+
+بالإضافة إلى المقاييس الأساسية المذكورة أعلاه، هناك بعض المقاييس المخصصة الإضافية التي تقيس الوقت الذي تستغرقه الصفحة للترطيب والعرض:
+
+- `Next.js-hydration`: طول الوقت الذي تستغرقه الصفحة لبدء وإنهاء الترطيب (بالميلي ثانية)
+- `Next.js-route-change-to-render`: طول الوقت الذي تستغرقه الصفحة لبدء العرض بعد تغيير المسار (بالميلي ثانية)
+- `Next.js-render`: طول الوقت الذي تستغرقه الصفحة لإنهاء العرض بعد تغيير المسار (بالميلي ثانية)
+
+يمكنك التعامل مع جميع نتائج هذه المقاييس بشكل منفصل:
+
+```js
+export function reportWebVitals(metric) {
+  switch (metric.name) {
+    case 'Next.js-hydration':
+      // التعامل مع نتائج الترطيب
+      break
+    case 'Next.js-route-change-to-render':
+      // التعامل مع نتائج تغيير المسار إلى العرض
+      break
+    case 'Next.js-render':
+      // التعامل مع نتائج العرض
+      break
+    default:
+      break
+  }
+}
+```
+
+تعمل هذه المقاييس في جميع المتصفحات التي تدعم [واجهة مستخدم التوقيت (User Timing API)](https://caniuse.com/#feat=user-timing).
+
+</PagesOnly>
+
+## الاستخدام على Vercel
+
+[رؤى سرعة Vercel (Vercel Speed Insights)](https://vercel.com/docs/concepts/speed-insights) يتم تكوينها تلقائيًا على نُشر Vercel، ولا تتطلب استخدام `useReportWebVitals`. هذا الخطاف مفيد في التطوير المحلي، أو إذا كنت تستخدم خدمة تحليلات مختلفة.
+
+## إرسال النتائج إلى أنظمة خارجية
+
+يمكنك إرسال النتائج إلى أي نقطة نهاية لقياس وتتبع أداء المستخدم الحقيقي على موقعك. على سبيل المثال:
+
+```js
+useReportWebVitals((metric) => {
+  const body = JSON.stringify(metric)
+  const url = 'https://example.com/analytics'
+
+  // استخدم `navigator.sendBeacon()` إذا كان متاحًا، مع التراجع إلى `fetch()`.
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(url, body)
+  } else {
+    fetch(url, { body, method: 'POST', keepalive: true })
+  }
+})
+```
+
+> **جيد للمعرفة**: إذا كنت تستخدم [Google Analytics](https://analytics.google.com/analytics/web/)، فإن استخدام قيمة `id` يمكن أن يسمح لك ببناء توزيعات المقاييس يدويًا (لحساب النسب المئوية، إلخ.)
+
+> ```js
+> useReportWebVitals(metric => {
+>   // استخدم `window.gtag` إذا قمت بتهيئة Google Analytics كما في هذا المثال:
+>   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
+>   window.gtag('event', metric.name, {
+>     value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // يجب أن تكون القيم أعدادًا صحيحة
+>     event_label: metric.id, // معرف فريد لتحميل الصفحة الحالي
+>     non_interaction: true, // يتجنب التأثير على معدل الارتداد.
+>   });
+> }
+> ```
+>
+> اقرأ المزيد عن [إرسال النتائج إلى Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-router.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-router.mdx
new file mode 100644
index 00000000..cc42f445
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-router.mdx
@@ -0,0 +1,163 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:14.357Z
+title: useRouter
+description: مرجع API لخطاف `useRouter`.
+---
+
+يسمح لك خطاف `useRouter` بتغيير المسارات برمجيًا داخل [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components).
+
+> **توصية:** استخدم [مكون `<Link>`](/docs/app/building-your-application/routing/linking-and-navigating#link-component) للتنقل إلا إذا كان لديك متطلب محدد لاستخدام `useRouter`.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      Dashboard
+    </button>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      Dashboard
+    </button>
+  )
+}
+```
+
+## `useRouter()`
+
+- `router.push(href: string, { scroll: boolean })`: تنفيذ تنقل من جانب العميل إلى المسار المحدد. يضيف إدخالًا جديدًا إلى [سجل المتصفح (browser’s history)](https://developer.mozilla.org/docs/Web/API/History_API).
+- `router.replace(href: string, { scroll: boolean })`: تنفيذ تنقل من جانب العميل إلى المسار المحدد دون إضافة إدخال جديد إلى [سجل المتصفح (browser’s history stack)](https://developer.mozilla.org/docs/Web/API/History_API).
+- `router.refresh()`: تحديث المسار الحالي. يقوم بعمل طلب جديد إلى الخادم، وإعادة جلب طلبات البيانات، وإعادة عرض مكونات الخادم. سيقوم العميل بدمج حمولة مكون خادم React المحدثة دون فقدان حالة React من جانب العميل (مثل `useState`) أو حالة المتصفح (مثل موضع التمرير).
+- `router.prefetch(href: string)`: [جلب مسبق (Prefetch)](/docs/app/building-your-application/routing/linking-and-navigating#1-prefetching) للمسار المحدد لتحقيق انتقالات أسرع من جانب العميل.
+- `router.back()`: التنقل للخلف إلى المسار السابق في سجل المتصفح.
+- `router.forward()`: التنقل للأمام إلى الصفحة التالية في سجل المتصفح.
+
+> **معلومة مفيدة**:
+>
+> - يقوم مكون `<Link>` تلقائيًا بجلب المسارات مسبقًا عندما تصبح مرئية في نافذة العرض.
+> - يمكن أن يعيد `refresh()` نفس النتيجة إذا كانت طلبات الجلب مخزنة مؤقتًا. قد تؤدي الوظائف الديناميكية الأخرى مثل `cookies` و `headers` أيضًا إلى تغيير الاستجابة.
+
+### الانتقال من `next/router`
+
+- يجب استيراد خطاف `useRouter` من `next/navigation` وليس من `next/router` عند استخدام موجه التطبيق (App Router)
+- تمت إزالة سلسلة `pathname` واستبدالها بـ [`usePathname()`](/docs/app/api-reference/functions/use-pathname)
+- تمت إزالة كائن `query` واستبداله بـ [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)
+- تم استبدال `router.events`. [انظر أدناه.](#router-events)
+
+[عرض دليل الانتقال الكامل](/docs/app/building-your-application/upgrading/app-router-migration).
+
+## أمثلة
+
+### أحداث الموجه (Router events)
+
+يمكنك الاستماع لتغييرات الصفحة عن طريق تكوين خطافات مكونات العميل الأخرى مثل `usePathname` و `useSearchParams`.
+
+```jsx filename="app/components/navigation-events.js"
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+
+export function NavigationEvents() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    const url = `${pathname}?${searchParams}`
+    console.log(url)
+    // يمكنك الآن استخدام عنوان URL الحالي
+    // ...
+  }, [pathname, searchParams])
+
+  return null
+}
+```
+
+والتي يمكن استيرادها في تخطيط (layout).
+
+```jsx filename="app/layout.js" highlight={2,10-12}
+import { Suspense } from 'react'
+import { NavigationEvents } from './components/navigation-events'
+
+export default function Layout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+
+        <Suspense fallback={null}>
+          <NavigationEvents />
+        </Suspense>
+      </body>
+    </html>
+  )
+}
+```
+
+> **معلومة مفيدة**: تم تغليف `<NavigationEvents>` في [حدود `Suspense`](/docs/app/building-your-application/routing/loading-ui-and-streaming#example) لأن [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) يتسبب في عرض من جانب العميل حتى حدود `Suspense` الأقرب أثناء [العرض الثابت (static rendering)](/docs/app/building-your-application/rendering/server-components#static-rendering-default). [معرفة المزيد](/docs/app/api-reference/functions/use-search-params#behavior).
+
+### تعطيل استعادة التمرير (scroll restoration)
+
+بشكل افتراضي، سيقوم Next.js بالتمرير إلى أعلى الصفحة عند التنقل إلى مسار جديد. يمكنك تعطيل هذا السلوك عن طريق تمرير `scroll: false` إلى `router.push()` أو `router.replace()`.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button
+      type="button"
+      onClick={() => router.push('/dashboard', { scroll: false })}
+    >
+      Dashboard
+    </button>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.jsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button
+      type="button"
+      onClick={() => router.push('/dashboard', { scroll: false })}
+    >
+      Dashboard
+    </button>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                        |
+| --------- | ---------------------------------------------- |
+| `v13.0.0` | تم تقديم `useRouter` من `next/navigation`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-search-params.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-search-params.mdx
new file mode 100644
index 00000000..58e6bfae
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-search-params.mdx
@@ -0,0 +1,367 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:04.624Z
+title: useSearchParams
+description: مرجع API لخطاف `useSearchParams`.
+---
+
+`useSearchParams` هو خطاف لمكون **العميل (Client Component)** يتيح لك قراءة **سلسلة الاستعلام (query string)** لـ URL الحالي.
+
+`useSearchParams` يُرجع نسخة **للقراءة فقط** من واجهة [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams).
+
+```tsx filename="app/dashboard/search-bar.tsx" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // URL -> `/dashboard?search=my-project`
+  // `search` -> 'my-project'
+  return <>Search: {search}</>
+}
+```
+
+```jsx filename="app/dashboard/search-bar.js" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // URL -> `/dashboard?search=my-project`
+  // `search` -> 'my-project'
+  return <>Search: {search}</>
+}
+```
+
+## المعاملات
+
+```tsx
+const searchParams = useSearchParams()
+```
+
+`useSearchParams` لا يأخذ أي معاملات.
+
+## القيم المُرجعة
+
+`useSearchParams` يُرجع نسخة **للقراءة فقط** من واجهة [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams)، والتي تتضمن طرقًا مساعدة لقراءة سلسلة استعلام URL:
+
+- [`URLSearchParams.get()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/get): تُرجع القيمة الأولى المرتبطة بمعامل البحث. على سبيل المثال:
+
+  | URL                  | `searchParams.get("a")`                                                                                         |
+  | -------------------- | --------------------------------------------------------------------------------------------------------------- |
+  | `/dashboard?a=1`     | `'1'`                                                                                                           |
+  | `/dashboard?a=`      | `''`                                                                                                            |
+  | `/dashboard?b=3`     | `null`                                                                                                          |
+  | `/dashboard?a=1&a=2` | `'1'` _- استخدم [`getAll()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/getAll) للحصول على جميع القيم_ |
+
+- [`URLSearchParams.has()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/has): تُرجع قيمة منطقية تشير إلى وجود المعامل المحدد. على سبيل المثال:
+
+  | URL              | `searchParams.has("a")` |
+  | ---------------- | ----------------------- |
+  | `/dashboard?a=1` | `true`                  |
+  | `/dashboard?b=3` | `false`                 |
+
+- تعرف على المزيد حول الطرق الأخرى **للقراءة فقط** في [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams)، بما في ذلك [`getAll()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/getAll)، [`keys()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/keys)، [`values()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/values)، [`entries()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/entries)، [`forEach()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/forEach)، و [`toString()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/toString).
+
+> **معلومة مفيدة**:
+>
+> - `useSearchParams` هو خطاف لمكون [العميل (Client Component)](/docs/app/building-your-application/rendering/client-components) و**غير مدعوم** في [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) لمنع قيم قديمة أثناء [التصيير الجزئي (partial rendering)](/docs/app/building-your-application/routing/linking-and-navigating#3-partial-rendering).
+> - إذا كان التطبيق يتضمن دليل `/pages`، فإن `useSearchParams` سيرجع `ReadonlyURLSearchParams | null`. القيمة `null` هي لأغراض التوافق أثناء الترحيل حيث لا يمكن معرفة معلمات البحث أثناء التصيير المسبق لصفحة لا تستخدم `getServerSideProps`
+
+## السلوك
+
+### التصيير الثابت (Static Rendering)
+
+إذا تم [تصيير المسار بشكل ثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default)، فإن استدعاء `useSearchParams()` سيؤدي إلى تصيير الشجرة حتى أقرب [حد `Suspense`](/docs/app/building-your-application/routing/loading-ui-and-streaming#example) على جانب العميل.
+
+هذا يسمح بتصيير جزء من الصفحة بشكل ثابت بينما الجزء الديناميكي الذي يستخدم `searchParams` يتم تصييره على جانب العميل.
+
+يمكنك تقليل الجزء من المسار الذي يتم تصييره على جانب العميل عن طريق تغليف المكون الذي يستخدم `useSearchParams` في حد `Suspense`. على سبيل المثال:
+
+```tsx filename="app/dashboard/search-bar.tsx" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // لن يتم تسجيل هذا على الخادم عند استخدام التصيير الثابت
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```jsx filename="app/dashboard/search-bar.js" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // لن يتم تسجيل هذا على الخادم عند استخدام التصيير الثابت
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import { Suspense } from 'react'
+import SearchBar from './search-bar'
+
+// هذا المكون الممرر كاحتياطي لحد Suspense
+// سيتم تصييره مكان شريط البحث في HTML الأولي.
+// عندما تصبح القيمة متاحة أثناء ترطيب React، سيتم استبدال
+// الاحتياطي بمكون `<SearchBar>`.
+function SearchBarFallback() {
+  return <>placeholder</>
+}
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <Suspense fallback={<SearchBarFallback />}>
+          <SearchBar />
+        </Suspense>
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import { Suspense } from 'react'
+import SearchBar from './search-bar'
+
+// هذا المكون الممرر كاحتياطي لحد Suspense
+// سيتم تصييره مكان شريط البحث في HTML الأولي.
+// عندما تصبح القيمة متاحة أثناء ترطيب React، سيتم استبدال
+// الاحتياطي بمكون `<SearchBar>`.
+function SearchBarFallback() {
+  return <>placeholder</>
+}
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <Suspense fallback={<SearchBarFallback />}>
+          <SearchBar />
+        </Suspense>
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+### التصيير الديناميكي (Dynamic Rendering)
+
+إذا تم [تصيير المسار بشكل ديناميكي](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)، فإن `useSearchParams` سيكون متاحًا على الخادم أثناء التصيير الأولي لمكون العميل.
+
+> **معلومة مفيدة**: يمكن استخدام خيار [`dynamic` في تكوين قطعة المسار](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) بالقيمة `force-dynamic` لإجبار التصيير الديناميكي.
+
+على سبيل المثال:
+
+```tsx filename="app/dashboard/search-bar.tsx" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // سيتم تسجيل هذا على الخادم أثناء التصيير الأولي
+  // وعلى العميل أثناء التنقلات اللاحقة.
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```jsx filename="app/dashboard/search-bar.js" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // سيتم تسجيل هذا على الخادم أثناء التصيير الأولي
+  // وعلى العميل أثناء التنقلات اللاحقة.
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import SearchBar from './search-bar'
+
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <SearchBar />
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import SearchBar from './search-bar'
+
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <SearchBar />
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+### مكونات الخادم (Server Components)
+
+#### الصفحات (Pages)
+
+للوصول إلى معلمات البحث في [الصفحات (Pages)](/docs/app/api-reference/file-conventions/page) (مكونات الخادم)، استخدم خاصية [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional).
+
+#### التخطيطات (Layouts)
+
+على عكس الصفحات، [التخطيطات (Layouts)](/docs/app/api-reference/file-conventions/layout) (مكونات الخادم) **لا** تتلقى خاصية `searchParams`. هذا لأن التخطيط المشترك [لا يتم إعادة تصييره أثناء التنقل](/docs/app/building-your-application/routing/linking-and-navigating#3-partial-rendering) مما قد يؤدي إلى `searchParams` قديمة بين التنقلات. راجع [الشرح التفصيلي](/docs/app/api-reference/file-conventions/layout#layouts-do-not-receive-searchparams).
+
+بدلاً من ذلك، استخدم خاصية [`searchParams`](/docs/app/api-reference/file-conventions/page) للصفحة أو خطاف [`useSearchParams`](/docs/app/api-reference/functions/use-search-params) في مكون عميل، والذي يتم إعادة تصييره على العميل بأحدث `searchParams`.
+
+## أمثلة
+
+### تحديث `searchParams`
+
+يمكنك استخدام [`useRouter`](/docs/app/api-reference/functions/use-router) أو [`Link`](/docs/app/api-reference/components/link) لتعيين `searchParams` جديدة. بعد إجراء التنقل، ستتلقى الصفحة الحالية [`page.js`](/docs/app/api-reference/file-conventions/page) خاصية [`searchParams` محدثة](/docs/app/api-reference/file-conventions/page#searchparams-optional).
+
+```tsx filename="app/example-client-component.tsx" switcher
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()!
+
+  // الحصول على سلسلة searchParams جديدة عن طريق دمج
+  // searchParams الحالية مع زوج مفتاح/قيمة معين
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams)
+      params.set(name, value)
+
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  return (
+    <>
+      <p>Sort By</p>
+
+      {/* باستخدام useRouter */}
+      <button
+        onClick={() => {
+          // <pathname>?sort=asc
+          router.push(pathname + '?' + createQueryString('sort', 'asc'))
+        }}
+      >
+        ASC
+      </button>
+
+      {/* باستخدام <Link> */}
+      <Link
+        href={
+          // <pathname>?sort=desc
+          pathname + '?' + createQueryString('sort', 'desc')
+        }
+      >
+        DESC
+      </Link>
+    </>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // الحصول على سلسلة searchParams جديدة عن طريق دمج
+  // searchParams الحالية مع زوج مفتاح/قيمة معين
+  const createQueryString = useCallback(
+    (name, value) => {
+      const params = new URLSearchParams(searchParams)
+      params.set(name, value)
+
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  return (
+    <>
+      <p>Sort By</p>
+
+      {/* باستخدام useRouter */}
+      <button
+        onClick={() => {
+          // <pathname>?sort=asc
+          router.push(pathname + '?' + createQueryString('sort', 'asc'))
+        }}
+      >
+        ASC
+      </button>
+
+      {/* باستخدام <Link> */}
+      <Link
+        href={
+          // <pathname>?sort=desc
+          pathname + '?' + createQueryString('sort', 'desc')
+        }
+      >
+        DESC
+      </Link>
+    </>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                       |
+| --------- | ----------------------------- |
+| `v13.0.0` | تم تقديم `useSearchParams`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx
new file mode 100644
index 00000000..ba975ba6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx
@@ -0,0 +1,174 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:03.495Z
+title: useSelectedLayoutSegment
+description: مرجع API لخطاف useSelectedLayoutSegment.
+---
+
+`useSelectedLayoutSegment` هو خطاف لمكون العميل (Client Component) يسمح لك بقراءة مقطع المسار النشط بمستوى واحد أسفل التخطيط (Layout) الذي يتم استدعاؤه منه.
+
+يكون مفيدًا لواجهة المستخدم الخاصة بالتنقل، مثل علامات التبويب داخل التخطيط الرئيسي التي تغير النمط بناءً على مقطع الابن النشط.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segment = useSelectedLayoutSegment()
+
+  return <p>Active segment: {segment}</p>
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segment = useSelectedLayoutSegment()
+
+  return <p>Active segment: {segment}</p>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - بما أن `useSelectedLayoutSegment` هو خطاف لمكون العميل (Client Component)، وأن التخطيطات (Layouts) هي مكونات خادم (Server Components) افتراضيًا، فإن `useSelectedLayoutSegment` عادةً ما يتم استدعاؤه عبر مكون عميل يتم استيراده إلى التخطيط.
+> - `useSelectedLayoutSegment` يُرجع فقط المقطع بمستوى واحد أسفل. لاسترجاع جميع المقاطع النشطة، راجع [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments)
+
+## المعاملات
+
+```tsx
+const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)
+```
+
+يقبل `useSelectedLayoutSegment` اختياريًا [`parallelRoutesKey`](/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments)، مما يسمح لك بقراءة مقطع المسار النشط ضمن تلك الفتحة.
+
+## القيم المُرجعة
+
+يُرجع `useSelectedLayoutSegment` سلسلة نصية للمقطع النشط أو `null` إذا لم يوجد.
+
+على سبيل المثال، بالنظر إلى التخطيطات وعناوين URL أدناه، سيكون المقطع المُرجع:
+
+| التخطيط                    | عنوان URL المزور                 | المقطع المُرجع |
+| ------------------------- | ------------------------------ | ---------------- |
+| `app/layout.js`           | `/`                            | `null`           |
+| `app/layout.js`           | `/dashboard`                   | `'dashboard'`    |
+| `app/dashboard/layout.js` | `/dashboard`                   | `null`           |
+| `app/dashboard/layout.js` | `/dashboard/settings`          | `'settings'`     |
+| `app/dashboard/layout.js` | `/dashboard/analytics`         | `'analytics'`    |
+| `app/dashboard/layout.js` | `/dashboard/analytics/monthly` | `'analytics'`    |
+
+## أمثلة
+
+### إنشاء مكون رابط نشط
+
+يمكنك استخدام `useSelectedLayoutSegment` لإنشاء مكون رابط نشط يغير النمط بناءً على المقطع النشط. على سبيل المثال، قائمة مشاركات مميزة في الشريط الجانبي لمدونة:
+
+```tsx filename="app/blog/blog-nav-link.tsx" switcher
+'use client'
+
+import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+// هذا المكون *العميل* سيتم استيراده إلى تخطيط المدونة
+export default function BlogNavLink({
+  slug,
+  children,
+}: {
+  slug: string
+  children: React.ReactNode
+}) {
+  // الانتقال إلى `/blog/hello-world` سيرجع 'hello-world'
+  // لمقطع التخطيط المحدد
+  const segment = useSelectedLayoutSegment()
+  const isActive = slug === segment
+
+  return (
+    <Link
+      href={`/blog/${slug}`}
+      // تغيير النمط بناءً على ما إذا كان الرابط نشطًا
+      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
+    >
+      {children}
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/blog/blog-nav-link.js" switcher
+'use client'
+
+import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+// هذا المكون *العميل* سيتم استيراده إلى تخطيط المدونة
+export default function BlogNavLink({ slug, children }) {
+  // الانتقال إلى `/blog/hello-world` سيرجع 'hello-world'
+  // لمقطع التخطيط المحدد
+  const segment = useSelectedLayoutSegment()
+  const isActive = slug === segment
+
+  return (
+    <Link
+      href={`/blog/${slug}`}
+      // تغيير النمط بناءً على ما إذا كان الرابط نشطًا
+      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
+    >
+      {children}
+    </Link>
+  )
+}
+```
+
+```tsx filename="app/blog/layout.tsx" switcher
+// استيراد مكون العميل إلى تخطيط رئيسي (مكون خادم)
+import { BlogNavLink } from './blog-nav-link'
+import getFeaturedPosts from './get-featured-posts'
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const featuredPosts = await getFeaturedPosts()
+  return (
+    <div>
+      {featuredPosts.map((post) => (
+        <div key={post.id}>
+          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
+        </div>
+      ))}
+      <div>{children}</div>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/blog/layout.js" switcher
+// استيراد مكون العميل إلى تخطيط رئيسي (مكون خادم)
+import { BlogNavLink } from './blog-nav-link'
+import getFeaturedPosts from './get-featured-posts'
+
+export default async function Layout({ children }) {
+  const featuredPosts = await getFeaturedPosts()
+  return (
+    <div>
+      {featuredPosts.map((post) => (
+        <div key={post.id}>
+          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
+        </div>
+      ))}
+      <div>{children}</div>
+    </div>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                |
+| --------- | -------------------------------------- |
+| `v13.0.0` | تم تقديم `useSelectedLayoutSegment`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-selected-layout-segments.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-selected-layout-segments.mdx
new file mode 100644
index 00000000..c11cf18b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/04-functions/use-selected-layout-segments.mdx
@@ -0,0 +1,79 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:37.822Z
+title: useSelectedLayoutSegments
+description: مرجع API لخطاف `useSelectedLayoutSegments`.
+---
+
+`useSelectedLayoutSegments` هو خطاف **مكون العميل (Client Component)** يتيح لك قراءة مقاطع المسار النشط **أسفل** التخطيط الذي يتم استدعاؤه منه.
+
+هو مفيد لإنشاء واجهة المستخدم في التخطيطات الأم التي تحتاج إلى معرفة بالمقاطع الفرعية النشطة مثل مسار التصفح (breadcrumbs).
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useSelectedLayoutSegments } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segments = useSelectedLayoutSegments()
+
+  return (
+    <ul>
+      {segments.map((segment, index) => (
+        <li key={index}>{segment}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useSelectedLayoutSegments } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segments = useSelectedLayoutSegments()
+
+  return (
+    <ul>
+      {segments.map((segment, index) => (
+        <li key={index}>{segment}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - نظرًا لأن `useSelectedLayoutSegments` هو خطاف [مكون العميل (Client Component)](/docs/app/building-your-application/rendering/client-components)، والتخطيطات هي [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا، فإن `useSelectedLayoutSegments` عادةً ما يتم استدعاؤه عبر مكون عميل يتم استيراده إلى التخطيط.
+> - المقاطع المُرجعة تتضمن [مجموعات المسار (Route Groups)](/docs/app/building-your-application/routing/route-groups)، والتي قد لا ترغب في تضمينها في واجهة المستخدم. يمكنك استخدام طريقة المصفوفة `filter()` لإزالة العناصر التي تبدأ بقوس.
+
+## المعاملات
+
+```tsx
+const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)
+```
+
+يقبل `useSelectedLayoutSegments` اختياريًا [`parallelRoutesKey`](/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments)، مما يسمح لك بقراءة مقطع المسار النشط داخل تلك الفتحة.
+
+## القيم المُرجعة
+
+يُرجع `useSelectedLayoutSegments` مصفوفة من السلاسل تحتوي على المقاطع النشطة بمستوى واحد أسفل التخطيط الذي تم استدعاء الخطاف منه. أو مصفوفة فارغة إذا لم تكن هناك مقاطع.
+
+على سبيل المثال، بالنظر إلى التخطيطات وعناوين URL أدناه، ستكون المقاطع المُرجعة:
+
+| التخطيط                    | عنوان URL المزور      | المقاطع المُرجعة           |
+| ------------------------- | --------------------- | --------------------------- |
+| `app/layout.js`           | `/`                   | `[]`                        |
+| `app/layout.js`           | `/dashboard`          | `['dashboard']`             |
+| `app/layout.js`           | `/dashboard/settings` | `['dashboard', 'settings']` |
+| `app/dashboard/layout.js` | `/dashboard`          | `[]`                        |
+| `app/dashboard/layout.js` | `/dashboard/settings` | `['settings']`              |
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                 |
+| --------- | --------------------------------------- |
+| `v13.0.0` | تم تقديم `useSelectedLayoutSegments`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/appDir.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/appDir.mdx
new file mode 100644
index 00000000..50bbc66e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/appDir.mdx
@@ -0,0 +1,12 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:24.623Z
+title: دليل appDir
+description: تمكين موجه التطبيق (App Router) لاستخدام التخطيطات (layouts)، البث (streaming)، والمزيد.
+---
+
+> **من الجيد معرفة**: هذا الخيار **لم يعد** مطلوبًا بدءًا من Next.js 13.4. حيث أصبح موجه التطبيق (App Router) مستقرًا الآن.
+
+يُمكّن موجه التطبيق ([دليل `app`](/docs/app/building-your-application/routing)) من دعم [التخطيطات](/docs/app/building-your-application/routing/pages-and-layouts)، [مكونات الخادم](/docs/app/building-your-application/rendering/server-components)، [البث](/docs/app/building-your-application/routing/loading-ui-and-streaming)، و[جلب البيانات المدمج](/docs/app/building-your-application/data-fetching).
+
+سيؤدي استخدام دليل `app` إلى تمكين [وضع React الصارم (React Strict Mode)](https://react.dev/reference/react/StrictMode) تلقائيًا. تعلم كيفية [تبني دليل `app` تدريجيًا](/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx
new file mode 100644
index 00000000..19cf76a4
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx
@@ -0,0 +1,68 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:49.750Z
+title: assetPrefix
+description: تعلم كيفية استخدام خيار التكوين assetPrefix لضبط شبكة توصيل المحتوى (CDN) الخاصة بك.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+<AppOnly>
+
+> **تنبيه**: [النشر على Vercel](/docs/app/building-your-application/deploying) يقوم تلقائيًا بضبط شبكة توصيل محتوى (CDN) عالمية لمشروع Next.js الخاص بك.
+> لا تحتاج إلى إعداد بادئة الأصول (Asset Prefix) يدويًا.
+
+</AppOnly>
+
+<PagesOnly>
+
+> **تنبيه**: [النشر على Vercel](/docs/pages/building-your-application/deploying) يقوم تلقائيًا بضبط شبكة توصيل محتوى (CDN) عالمية لمشروع Next.js الخاص بك.
+> لا تحتاج إلى إعداد بادئة الأصول (Asset Prefix) يدويًا.
+
+</PagesOnly>
+
+> **معلومة مفيدة**: Next.js 9.5+ أضاف دعمًا لـ [مسار الأساس (Base Path)](/docs/app/api-reference/next-config-js/basePath) القابل للتخصيص، وهو أكثر ملاءمة لاستضافة تطبيقك على مسار فرعي مثل `/docs`.
+> لا ننصح باستخدام بادئة أصول مخصصة لهذا الغرض.
+
+لإعداد [شبكة توصيل محتوى (CDN)](https://ar.wikipedia.org/wiki/شبكة_توصيل_المحتوى)، يمكنك ضبط بادئة الأصول وتكوين أصل CDN الخاص بك ليحل إلى النطاق الذي يستضيف Next.js.
+
+افتح ملف `next.config.js` وأضف تكوين `assetPrefix`:
+
+```js filename="next.config.js"
+const isProd = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  // استخدم CDN في الإنتاج و localhost للتطوير.
+  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
+}
+```
+
+سيستخدم Next.js تلقائيًا بادئة الأصول الخاصة بك لملفات JavaScript و CSS التي يتم تحميلها من المسار `/_next/` (مجلد `.next/static/`). على سبيل المثال، مع التكوين أعلاه، طلب جزء JS التالي:
+
+```
+/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
+```
+
+سيصبح بدلاً من ذلك:
+
+```
+https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
+```
+
+سيعتمد التكوين الدقيق لرفع ملفاتك إلى CDN معين على CDN الذي تختاره. المجلد الوحيد الذي تحتاج إلى استضافته على CDN الخاص بك هو محتويات `.next/static/`، والتي يجب رفعها كـ `_next/static/` كما يشير عنوان URL أعلاه. **لا ترفع بقية مجلد `.next/` الخاص بك**، حيث لا يجب كشف كود الخادم والتكوينات الأخرى للعامة.
+
+بينما تغطي `assetPrefix` طلبات `_next/static`، إلا أنها لا تؤثر على المسارات التالية:
+
+<AppOnly>
+
+- الملفات في مجلد [public](/docs/app/building-your-application/optimizing/static-assets)؛ إذا كنت تريد تقديم هذه الأصول عبر CDN، يجب عليك إضافة البادئة بنفسك
+
+</AppOnly>
+
+<PagesOnly>
+
+- الملفات في مجلد [public](/docs/pages/building-your-application/optimizing/static-assets)؛ إذا كنت تريد تقديم هذه الأصول عبر CDN، يجب عليك إضافة البادئة بنفسك
+- طلبات `/_next/data/` لصفحات `getServerSideProps`. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لأنها ليست ثابتة.
+- طلبات `/_next/data/` لصفحات `getStaticProps`. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لدعم [التوليد الثابت التدريجي (Incremental Static Generation)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)، حتى لو لم تكن تستخدمه (لضمان الاتساق).
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/basePath.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/basePath.mdx
new file mode 100644
index 00000000..2bfc3ec3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/basePath.mdx
@@ -0,0 +1,81 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:33.218Z
+title: basePath
+description: استخدم `basePath` لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه داخل مكون. */}
+
+لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق، يمكنك استخدام خيار التكوين `basePath`.
+
+`basePath` يسمح لك بتعيين بادئة مسار للتطبيق. على سبيل المثال، لاستخدام `/docs` بدلاً من `''` (سلسلة فارغة، القيمة الافتراضية)، افتح ملف `next.config.js` وأضف تكوين `basePath`:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+}
+```
+
+> **معلومة مفيدة**: يجب تعيين هذه القيمة أثناء عملية البناء ولا يمكن تغييرها دون إعادة البناء لأن القيمة مضمنة في حزم جانب العميل.
+
+### الروابط
+
+عند الربط بصفحات أخرى باستخدام `next/link` و `next/router`، سيتم تطبيق `basePath` تلقائيًا.
+
+على سبيل المثال، استخدام `/about` سيصبح تلقائيًا `/docs/about` عندما يتم تعيين `basePath` إلى `/docs`.
+
+```js
+export default function HomePage() {
+  return (
+    <>
+      <Link href="/about">صفحة حول</Link>
+    </>
+  )
+}
+```
+
+إخراج HTML:
+
+```html
+<a href="/docs/about">صفحة حول</a>
+```
+
+هذا يضمن أنك لست مضطرًا لتغيير جميع الروابط في تطبيقك عند تغيير قيمة `basePath`.
+
+### الصور
+
+<AppOnly>
+
+عند استخدام مكون [`next/image`](/docs/app/api-reference/components/image)، ستحتاج إلى إضافة `basePath` قبل `src`.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استخدام مكون [`next/image`](/docs/pages/api-reference/components/image)، ستحتاج إلى إضافة `basePath` قبل `src`.
+
+</PagesOnly>
+
+على سبيل المثال، استخدام `/docs/me.png` سيقدم صورتك بشكل صحيح عندما يتم تعيين `basePath` إلى `/docs`.
+
+```jsx
+import Image from 'next/image'
+
+function Home() {
+  return (
+    <>
+      <h1>صفحتي الرئيسية</h1>
+      <Image
+        src="/docs/me.png"
+        alt="صورة المؤلف"
+        width={500}
+        height={500}
+      />
+      <p>مرحبًا بكم في صفحتي الرئيسية!</p>
+    </>
+  )
+}
+
+export default Home
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/compress.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/compress.mdx
new file mode 100644
index 00000000..870dd83c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/compress.mdx
@@ -0,0 +1,18 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:10.024Z
+title: الضغط (compress)
+description: يوفر Next.js ضغط gzip لضغط المحتوى المعروض والملفات الثابتة، وهو يعمل فقط مع هدف الخادم. تعلم المزيد عنه هنا.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يوفر Next.js ضغط [**gzip**](https://tools.ietf.org/html/rfc6713#section-3) لضغط المحتوى المعروض والملفات الثابتة. بشكل عام، سترغب في تمكين الضغط على وكيل HTTP مثل [nginx](https://www.nginx.com/)، لتخفيف الحمل عن عملية `Node.js`.
+
+لتعطيل **الضغط**، افتح ملف `next.config.js` وعطل إعداد `compress`:
+
+```js filename="next.config.js"
+module.exports = {
+  compress: false,
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/devIndicators.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/devIndicators.mdx
new file mode 100644
index 00000000..43479c27
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/devIndicators.mdx
@@ -0,0 +1,56 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:15.558Z
+title: مؤشرات التطوير (devIndicators)
+description: تتضمن الصفحات المُحسنة مؤشرًا لإعلامك إذا كانت تخضع للتحسين الثابت. يمكنك تعطيله هنا.
+---
+
+{/* المحتوى المشترك بين موجه التطبيق (app) وموجه الصفحات (pages). يمكن استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+<AppOnly>
+
+عند تحرير الكود الخاص بك، وعندما يقوم Next.js بتحويل التطبيق، يظهر مؤشر التحويل في الزاوية اليمنى السفلية من الصفحة.
+
+> **معلومة مفيدة**: هذا المؤشر موجود فقط في وضع التطوير ولن يظهر عند بناء وتشغيل التطبيق في وضع الإنتاج.
+
+في بعض الحالات قد يكون هذا المؤشر في موضع غير مناسب في صفحتك، على سبيل المثال، عندما يتعارض مع مشغّل الدردشة. لتغيير موضعه، افتح ملف `next.config.js` وقم بتعيين `buildActivityPosition` في كائن `devIndicators` إلى `bottom-right` (الافتراضي)، `bottom-left`، `top-right` أو `top-left`:
+
+```js filename="next.config.js"
+module.exports = {
+  devIndicators: {
+    buildActivityPosition: 'bottom-right',
+  },
+}
+```
+
+في بعض الحالات قد لا يكون هذا المؤشر مفيدًا لك. لإزالته، افتح ملف `next.config.js` وعطّل إعداد `buildActivity` في كائن `devIndicators`:
+
+```js filename="next.config.js"
+module.exports = {
+  devIndicators: {
+    buildActivity: false,
+  },
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**: تمت إزالة هذا المؤشر في إصدار Next.js 10.0.1. نوصي بالترقية إلى أحدث إصدار من Next.js.
+
+عندما تكون الصفحة مؤهلة لـ[التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization)، نعرض مؤشرًا لإعلامك بذلك.
+
+هذا مفيد لأن التحسين الثابت التلقائي يمكن أن يكون مفيدًا جدًا، ومعرفة ما إذا كانت الصفحة مؤهلة فورًا أثناء التطوير يمكن أن يكون مفيدًا.
+
+في بعض الحالات قد لا يكون هذا المؤشر مفيدًا، مثل عند العمل على تطبيقات إلكترون. لإزالته، افتح ملف `next.config.js` وعطّل إعداد `autoPrerender` في كائن `devIndicators`:
+
+```js filename="next.config.js"
+module.exports = {
+  devIndicators: {
+    autoPrerender: false,
+  },
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/distDir.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/distDir.mdx
new file mode 100644
index 00000000..5992d307
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/distDir.mdx
@@ -0,0 +1,22 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:57.170Z
+title: distDir
+description: تعيين دليل بناء مخصص للاستخدام بدلاً من الدليل الافتراضي .next.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يمكنك تحديد اسم لاستخدامه كدليل بناء مخصص بدلاً من `.next`.
+
+افتح ملف `next.config.js` وأضف إعداد `distDir`:
+
+```js filename="next.config.js"
+module.exports = {
+  distDir: 'build',
+}
+```
+
+الآن عند تشغيل `next build`، سيستخدم Next.js دليل `build` بدلاً من المجلد الافتراضي `.next`.
+
+> `distDir` **يجب ألا** يخرج من دليل مشروعك. على سبيل المثال، `../build` يعتبر مسارًا **غير صالح**.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/env.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/env.mdx
new file mode 100644
index 00000000..a65e1723
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/env.mdx
@@ -0,0 +1,73 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:07.830Z
+title: متغيرات البيئة (env)
+description: تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js أثناء وقت البناء.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<AppOnly>
+
+> منذ إصدار [Next.js 9.4](https://nextjs.org/blog/next-9-4) أصبح لدينا تجربة أكثر سهولة وبديهية [لإضافة متغيرات البيئة](/docs/app/building-your-application/configuring/environment-variables). جربها الآن!
+
+</AppOnly>
+
+<PagesOnly>
+
+> منذ إصدار [Next.js 9.4](https://nextjs.org/blog/next-9-4) أصبح لدينا تجربة أكثر سهولة وبديهية [لإضافة متغيرات البيئة](/docs/pages/building-your-application/configuring/environment-variables). جربها الآن!
+
+</PagesOnly>
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مع متغيرات البيئة](https://github.com/vercel/next.js/tree/canary/examples/with-env-from-next-config-js)
+
+</details>
+
+<AppOnly>
+
+> **معلومة مفيدة**: متغيرات البيئة المحددة بهذه الطريقة سيتم **دائمًا** تضمينها في حزمة JavaScript، إضافة البادئة `NEXT_PUBLIC_` أمام اسم متغير البيئة يكون له تأثير فقط عند تحديدها [من خلال البيئة أو ملفات .env](/docs/app/building-your-application/configuring/environment-variables).
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**: متغيرات البيئة المحددة بهذه الطريقة سيتم **دائمًا** تضمينها في حزمة JavaScript، إضافة البادئة `NEXT_PUBLIC_` أمام اسم متغير البيئة يكون له تأثير فقط عند تحديدها [من خلال البيئة أو ملفات .env](/docs/pages/building-your-application/configuring/environment-variables).
+
+</PagesOnly>
+
+لإضافة متغيرات البيئة إلى حزمة JavaScript، افتح ملف `next.config.js` وأضف تكوين `env`:
+
+```js filename="next.config.js"
+module.exports = {
+  env: {
+    customKey: 'my-value',
+  },
+}
+```
+
+الآن يمكنك الوصول إلى `process.env.customKey` في الكود الخاص بك. على سبيل المثال:
+
+```jsx
+function Page() {
+  return <h1>قيمة customKey هي: {process.env.customKey}</h1>
+}
+
+export default Page
+```
+
+سيقوم Next.js باستبدال `process.env.customKey` بقيمة `'my-value'` أثناء وقت البناء. محاولة تفكيك متغيرات `process.env` لن تعمل بسبب طريقة عمل [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) في webpack.
+
+على سبيل المثال، السطر التالي:
+
+```jsx
+return <h1>قيمة customKey هي: {process.env.customKey}</h1>
+```
+
+سينتهي به الأمر إلى:
+
+```jsx
+return <h1>قيمة customKey هي: {'my-value'}</h1>
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/eslint.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/eslint.mdx
new file mode 100644
index 00000000..c126eb56
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/eslint.mdx
@@ -0,0 +1,24 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:49.617Z
+title: eslint
+description: يُبلغ Next.js عن أخطاء وتحذيرات ESLint أثناء عمليات البناء بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+عند اكتشاف ESLint في مشروعك، يفشل Next.js في **بناء الإنتاج** (`next build`) عند وجود أخطاء.
+
+إذا كنت ترغب في أن يقوم Next.js بإنتاج كود الإنتاج حتى عندما يحتوي تطبيقك على أخطاء ESLint، يمكنك تعطيل خطوة الفحص المضمنة تمامًا. لا يُنصح بهذا إلا إذا كنت قد قمت بالفعل بتكوين ESLint للتشغيل في جزء منفصل من سير العمل الخاص بك (على سبيل المثال، في CI أو خطاف pre-commit).
+
+افتح ملف `next.config.js` وقم بتمكين خيار `ignoreDuringBuilds` في تكوين `eslint`:
+
+```js filename="next.config.js"
+module.exports = {
+  eslint: {
+    // تحذير: هذا يسمح لعمليات بناء الإنتاج بالإكمال بنجاح حتى إذا
+    // كان مشروعك يحتوي على أخطاء ESLint.
+    ignoreDuringBuilds: true,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/exportPathMap.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/exportPathMap.mdx
new file mode 100644
index 00000000..5d019a8b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/exportPathMap.mdx
@@ -0,0 +1,96 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:23.776Z
+title: exportPathMap (مهمل)
+nav_title: exportPathMap
+description: تخصيص الصفحات التي سيتم تصديرها كملفات HTML عند استخدام `next export`.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+> هذه الميزة حصرية لـ `next export` وهي حاليًا **مهملة** لصالح `getStaticPaths` مع `pages` أو `generateStaticParams` مع `app`.
+
+<details>
+  <summary>أمثلة</summary>
+  
+- [التصدير الثابت](https://github.com/vercel/next.js/tree/canary/examples/with-static-export)
+
+</details>
+
+`exportPathMap` تسمح لك بتحديد تعيين مسارات الطلبات إلى وجهات الصفحات، لاستخدامها أثناء التصدير. المسارات المعرفة في `exportPathMap` ستكون متاحة أيضًا عند استخدام [`next dev`](/docs/app/api-reference/next-cli#development).
+
+لنبدأ بمثال، لإنشاء `exportPathMap` مخصص لتطبيق به الصفحات التالية:
+
+- `pages/index.js`
+- `pages/about.js`
+- `pages/post.js`
+
+افتح `next.config.js` وأضف تكوين `exportPathMap` التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  exportPathMap: async function (
+    defaultPathMap,
+    { dev, dir, outDir, distDir, buildId }
+  ) {
+    return {
+      '/': { page: '/' },
+      '/about': { page: '/about' },
+      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
+      '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
+      '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
+    }
+  },
+}
+```
+
+> **جيد أن تعرف**: حقل `query` في `exportPathMap` لا يمكن استخدامه مع [الصفحات المحسنة ثابتًا تلقائيًا](/docs/pages/building-your-application/rendering/automatic-static-optimization) أو [صفحات `getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) لأنها تُصدر إلى ملفات HTML وقت البناء ولا يمكن توفير معلومات استعلام إضافية أثناء `next export`.
+
+سيتم بعد ذلك تصدير الصفحات كملفات HTML، على سبيل المثال، `/about` ستصبح `/about.html`.
+
+`exportPathMap` هي دالة `async` تستقبل وسيطتين: الأولى هي `defaultPathMap`، وهي الخريطة الافتراضية التي يستخدمها Next.js. الوسيطة الثانية هي كائن يحتوي على:
+
+- `dev` - `true` عندما يتم استدعاء `exportPathMap` في وضع التطوير. `false` عند تشغيل `next export`. في التطوير، `exportPathMap` يستخدم لتعريف المسارات.
+- `dir` - المسار المطلق لدليل المشروع
+- `outDir` - المسار المطلق لدليل `out/` [قابل للتخصيص باستخدام `-o`](#تخصيص-دليل-الخرج)]. عندما يكون `dev` هو `true`، ستكون قيمة `outDir` هي `null`.
+- `distDir` - المسار المطلق لدليل `.next/` [قابل للتخصيص باستخدام تكوين `distDir`](/docs/pages/api-reference/next-config-js/distDir)
+- `buildId` - معرف البناء المُنشأ
+
+الكائن المُعاد هو خريطة للصفحات حيث يكون `المفتاح` هو `مسار الصفحة` والقيمة هي كائن يقبل الحقول التالية:
+
+- `page`: `String` - الصفحة داخل دليل `pages` التي سيتم عرضها
+- `query`: `Object` - كائن `query` الذي يتم تمريره إلى `getInitialProps` عند التصيير المسبق. القيمة الافتراضية هي `{}`
+
+> يمكن أن يكون `مسار الصفحة` المُصدر أيضًا اسم ملف (على سبيل المثال، `/readme.md`)، ولكن قد تحتاج إلى تعيين رأس `Content-Type` إلى `text/html` عند تقديم محتواه إذا كان مختلفًا عن `.html`.
+
+## إضافة شرطة مائلة في النهاية
+
+من الممكن تكوين Next.js لتصدير الصفحات كملفات `index.html` وتطلب شرطة مائلة في النهاية، `/about` تصبح `/about/index.html` ويمكن توجيهها عبر `/about/`. كان هذا هو السلوك الافتراضي قبل Next.js 9.
+
+للرجوع إلى هذا السلوك وإضافة شرطة مائلة في النهاية، افتح `next.config.js` وقم بتمكين تكوين `trailingSlash`:
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+}
+```
+
+## تخصيص دليل الخرج
+
+<AppOnly>
+
+[`next export`](/docs/app/building-your-application/deploying/static-exports) سوف يستخدم `out` كدليل الخرج الافتراضي، يمكنك تخصيص هذا باستخدام وسيطة `-o`، كما يلي:
+
+</AppOnly>
+
+<PagesOnly>
+
+[`next export`](/docs/pages/building-your-application/deploying/static-exports) سوف يستخدم `out` كدليل الخرج الافتراضي، يمكنك تخصيص هذا باستخدام وسيطة `-o`، كما يلي:
+
+</PagesOnly>
+
+```bash filename="Terminal"
+next export -o outdir
+```
+
+> **تحذير**: استخدام `exportPathMap` مهمل ويتم تجاوزه بواسطة `getStaticPaths` داخل `pages`. لا نوصي باستخدامهما معًا.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/generateBuildId.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/generateBuildId.mdx
new file mode 100644
index 00000000..75ff88cb
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/generateBuildId.mdx
@@ -0,0 +1,21 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:43.626Z
+title: generateBuildId
+description: تكوين معرّف البناء المستخدم لتحديد النسخة الحالية من التطبيق التي يتم تقديمها.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+يستخدم Next.js معرّفًا ثابتًا يتم إنشاؤه أثناء عملية البناء لتحديد أي نسخة من التطبيق يتم تقديمها. قد يسبب هذا مشاكل في عمليات النشر متعددة الخوادم عند تشغيل `next build` على كل خادم. للحفاظ على معرّف بناء متسق بين عمليات البناء المختلفة، يمكنك توفير معرّف البناء الخاص بك.
+
+افتح ملف `next.config.js` وأضف دالة `generateBuildId`:
+
+```js filename="next.config.js"
+module.exports = {
+  generateBuildId: async () => {
+    // يمكنك هنا على سبيل المثال الحصول على آخر تجزئة (hash) لالتزام git
+    return 'my-build-id'
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/generateEtags.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/generateEtags.mdx
new file mode 100644
index 00000000..e8cdd779
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/generateEtags.mdx
@@ -0,0 +1,18 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:35.169Z
+title: generateEtags
+description: يقوم Next.js بتوليد علامات etag افتراضيًا لكل صفحة. تعلم المزيد حول كيفية تعطيل توليد etag هنا.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يقوم Next.js بتوليد [علامات etag](https://en.wikipedia.org/wiki/HTTP_ETag) افتراضيًا لكل صفحة. قد ترغب في تعطيل توليد etag لصفحات HTML اعتمادًا على إستراتيجية التخزين المؤقت الخاصة بك.
+
+افتح ملف `next.config.js` وعطّل خيار `generateEtags`:
+
+```js filename="next.config.js"
+module.exports = {
+  generateEtags: false,
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/headers.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/headers.mdx
new file mode 100644
index 00000000..ad34c782
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/headers.mdx
@@ -0,0 +1,516 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:44.608Z
+title: رؤوس HTTP
+description: إضافة رؤوس HTTP مخصصة لتطبيق Next.js الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+تسمح لك الرؤوس (Headers) بتعيين رؤوس HTTP مخصصة على الاستجابة لطلب وارد على مسار معين.
+
+لتعيين رؤوس HTTP مخصصة، يمكنك استخدام مفتاح `headers` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/about',
+        headers: [
+          {
+            key: 'x-custom-header',
+            value: 'قيمة الرأس المخصصة',
+          },
+          {
+            key: 'x-another-custom-header',
+            value: 'قيمة رأس مخصص آخر',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+`headers` هي دالة غير متزامنة تتوقع إرجاع مصفوفة تحتوي على كائنات بخصائص `source` و `headers`:
+
+- `source`: نمط مسار الطلب الوارد.
+- `headers`: مصفوفة من كائنات رأس الاستجابة، بخصائص `key` و `value`.
+- `basePath`: `false` أو `undefined` - إذا كانت false فلن يتم تضمين basePath عند المطابقة، يمكن استخدامه لإعادة الكتابة الخارجية فقط.
+- `locale`: `false` أو `undefined` - ما إذا كان يجب عدم تضمين اللغة عند المطابقة.
+- `has`: مصفوفة من [كائنات has](#header-cookie-and-query-matching) بخصائص `type` و `key` و `value`.
+- `missing`: مصفوفة من [كائنات missing](#header-cookie-and-query-matching) بخصائص `type` و `key` و `value`.
+
+يتم التحقق من الرؤوس قبل نظام الملفات الذي يتضمن الصفحات وملفات `/public`.
+
+## سلوك تجاوز الرؤوس
+
+إذا تطابق رأسان على نفس المسار وقاما بتعيين نفس مفتاح الرأس، فإن مفتاح الرأس الأخير سيتجاوز الأول. باستخدام الرؤوس أدناه، سيؤدي المسار `/hello` إلى أن يكون رأس `x-hello` بقيمة `world` لأن آخر قيمة تم تعيينها للرأس هي `world`.
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'there',
+          },
+        ],
+      },
+      {
+        source: '/hello',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## مطابقة المسارات
+
+يُسمح بمطابقة المسارات، على سبيل المثال `/blog/:slug` ستطابق `/blog/hello-world` (بدون مسارات متداخلة):
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/blog/:slug',
+        headers: [
+          {
+            key: 'x-slug',
+            value: ':slug', // يمكن استخدام المعلمات المطابقة في القيمة
+          },
+          {
+            key: 'x-slug-:slug', // يمكن استخدام المعلمات المطابقة في المفتاح
+            value: 'قيمة رأس مخصص آخر',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Wildcard
+
+لمطابقة مسار wildcard، يمكنك استخدام `*` بعد معلمة، على سبيل المثال `/blog/:slug*` ستطابق `/blog/a/b/c/d/hello-world`:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/blog/:slug*',
+        headers: [
+          {
+            key: 'x-slug',
+            value: ':slug*', // يمكن استخدام المعلمات المطابقة في القيمة
+          },
+          {
+            key: 'x-slug-:slug*', // يمكن استخدام المعلمات المطابقة في المفتاح
+            value: 'قيمة رأس مخصص آخر',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Regex
+
+لمطابقة مسار regex، يمكنك لف الـ regex بين قوسين بعد معلمة، على سبيل المثال `/blog/:slug(\\d{1,})` ستطابق `/blog/123` ولكن ليس `/blog/abc`:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/blog/:post(\\d{1,})',
+        headers: [
+          {
+            key: 'x-post',
+            value: ':post',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+الأحرف التالية `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` تُستخدم لمطابقة مسار regex، لذا عند استخدامها في `source` كقيم غير خاصة يجب الهروب منها بإضافة `\\` قبلها:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        // هذا سيطابق طلب `/english(default)/something`
+        source: '/english\\(default\\)/:slug',
+        headers: [
+          {
+            key: 'x-header',
+            value: 'value',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## مطابقة الرؤوس، الكوكيز، والاستعلامات
+
+لتطبيق رأس فقط عندما تتطابق قيم الرأس أو الكوكيز أو الاستعلامات مع حقل `has` أو لا تتطابق مع حقل `missing`، يمكن استخدام `has` و `missing`. يجب أن يتطابق كل من `source` وجميع عناصر `has` وألا تتطابق أي عناصر `missing` لتطبيق الرأس.
+
+يمكن أن تحتوي عناصر `has` و `missing` على الحقول التالية:
+
+- `type`: `String` - يجب أن يكون إما `header` أو `cookie` أو `host` أو `query`.
+- `key`: `String` - المفتاح من النوع المحدد للمطابقة.
+- `value`: `String` أو `undefined` - القيمة للتحقق منها، إذا كانت undefined فإن أي قيمة ستطابق. يمكن استخدام سلسلة تشبه regex لالتقاط جزء معين من القيمة، على سبيل المثال إذا تم استخدام القيمة `first-(?<paramName>.*)` لـ `first-second` فإن `second` ستكون قابلة للاستخدام في الوجهة مع `:paramName`.
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      // إذا كان رأس `x-add-header` موجودًا،
+      // سيتم تطبيق رأس `x-another-header`
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-add-header',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: 'hello',
+          },
+        ],
+      },
+      // إذا لم يكن رأس `x-no-header` موجودًا،
+      // سيتم تطبيق رأس `x-another-header`
+      {
+        source: '/:path*',
+        missing: [
+          {
+            type: 'header',
+            key: 'x-no-header',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: 'hello',
+          },
+        ],
+      },
+      // إذا تمت مطابقة المصدر والاستعلام والكوكي،
+      // سيتم تطبيق رأس `x-authorized`
+      {
+        source: '/specific/:path*',
+        has: [
+          {
+            type: 'query',
+            key: 'page',
+            // لن تكون قيمة الصفحة متاحة في
+            // مفاتيح/قيم الرأس حيث يتم توفير القيمة و
+            // لا تستخدم مجموعة capture مسماة مثل (?<page>home)
+            value: 'home',
+          },
+          {
+            type: 'cookie',
+            key: 'authorized',
+            value: 'true',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-authorized',
+            value: ':authorized',
+          },
+        ],
+      },
+      // إذا كان رأس `x-authorized` موجودًا و
+      // يحتوي على قيمة مطابقة، سيتم تطبيق `x-another-header`
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-authorized',
+            value: '(?<authorized>yes|true)',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: ':authorized',
+          },
+        ],
+      },
+      // إذا كان المضيف هو `example.com`،
+      // سيتم تطبيق هذا الرأس
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'host',
+            value: 'example.com',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: ':authorized',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## الرؤوس مع دعم basePath
+
+عند استخدام [دعم `basePath`](/docs/app/api-reference/next-config-js/basePath) مع الرؤوس، يتم تلقائيًا إضافة بادئة `basePath` لكل `source` ما لم تقم بإضافة `basePath: false` إلى الرأس:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+
+  async headers() {
+    return [
+      {
+        source: '/with-basePath', // تصبح /docs/with-basePath
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        source: '/without-basePath', // لا يتم تعديلها حيث تم تعيين basePath: false
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+        basePath: false,
+      },
+    ]
+  },
+}
+```
+
+## الرؤوس مع دعم i18n
+
+<AppOnly>
+
+عند استخدام [دعم `i18n`](/docs/app/building-your-application/routing/internationalization) مع الرؤوس، يتم تلقائيًا إضافة بادئة لكل `source` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى الرأس. إذا تم استخدام `locale: false`، يجب إضافة بادئة `source` بلغة ليتم مطابقتها بشكل صحيح.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استخدام [دعم `i18n`](/docs/pages/building-your-application/routing/internationalization) مع الرؤوس، يتم تلقائيًا إضافة بادئة لكل `source` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى الرأس. إذا تم استخدام `locale: false`، يجب إضافة بادئة `source` بلغة ليتم مطابقتها بشكل صحيح.
+
+</PagesOnly>
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async headers() {
+    return [
+      {
+        source: '/with-locale', // يتعامل تلقائيًا مع جميع اللغات
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        // لا يتعامل مع اللغات تلقائيًا حيث تم تعيين locale: false
+        source: '/nl/with-locale-manual',
+        locale: false,
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        // هذا يطابق '/' حيث أن `en` هي defaultLocale
+        source: '/en',
+        locale: false,
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        // هذا يتحول إلى /(en|fr|de)/(.*) لذا لن يطابق
+        // المسارات الرئيسية `/` أو `/fr` مثل /:path*
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## Cache-Control
+
+لا يمكنك تعيين رؤوس `Cache-Control` في `next.config.js` للصفحات أو الأصول، حيث سيتم تجاوز هذه الرؤوس في الإنتاج لضمان تخزين الاستجابات والأصول الثابتة بشكل فعال.
+
+<AppOnly>
+
+تعلم المزيد عن [التخزين المؤقت](/docs/app/building-your-application/caching) مع موجه التطبيق.
+
+</AppOnly>
+
+<PagesOnly>
+
+إذا كنت بحاجة إلى إعادة التحقق من ذاكرة التخزين المؤقت لصفحة تم [إنشاؤها بشكل ثابت](/docs/pages/building-your-application/rendering/static-site-generation)، يمكنك القيام بذلك عن طريق تعيين خاصية `revalidate` في دالة [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) للصفحة.
+
+يمكنك تعيين رأس `Cache-Control` في [مسارات API](/docs/pages/building-your-application/routing/api-routes) الخاصة بك باستخدام طريقة `res.setHeader`:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.setHeader('Cache-Control', 's-maxage=86400')
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  res.setHeader('Cache-Control', 's-maxage=86400')
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+</PagesOnly>
+
+## الخيارات
+
+### X-DNS-Prefetch-Control
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control) يتحكم في prefetching لـ DNS، مما يسمح للمتصفحات بإجراء تحليل اسم النطاق بشكل استباقي للروابط الخارجية والصور وCSS وJavaScript وغير ذلك. يتم تنفيذ هذا prefetching في الخلفية، بحيث يكون [DNS](https://developer.mozilla.org/docs/Glossary/DNS) أكثر احتمالية للحل بحلول الوقت الذي تكون فيه العناصر المشار إليها مطلوبة. هذا يقلل من زمن الوصول عندما ينقر المستخدم على رابط.
+
+```js
+{
+  key: 'X-DNS-Prefetch-Control',
+  value: 'on'
+}
+```
+
+### Strict-Transport-Security
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) يخبر المتصفحات أنه يجب الوصول إليه فقط باستخدام HTTPS، بدلاً من استخدام HTTP. باستخدام التكوين أدناه، ستستخدم جميع النطاقات الفرعية الحالية والمستقبلية HTTPS لمدة `max-age` تبلغ عامين. هذا يمنع الوصول إلى الصفحات أو النطاقات الفرعية التي يمكن تقديمها فقط عبر HTTP.
+
+إذا كنت تقوم بالنشر على [Vercel](https://vercel.com/docs/concepts/edge-network/headers#strict-transport-security?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، فإن هذا الرأس ليس ضروريًا حيث يتم إضافته تلقائيًا إلى جميع عمليات النشر ما لم تعلن عن `headers` في ملف `next.config.js` الخاص بك.
+
+```js
+{
+  key: 'Strict-Transport-Security',
+  value: 'max-age=63072000; includeSubDomains; preload'
+}
+```
+
+### X-Frame-Options
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options) يشير إلى ما إذا كان يجب السماح بعرض الموقع داخل `iframe`. يمكن أن يمنع هذا من هجمات clickjacking.
+
+**تم استبدال هذا الرأس بخيار `frame-ancestors` في CSP**، والذي يتمتع بدعم أفضل في المتصفحات الحديثة.
+
+```js
+{
+  key: 'X-Frame-Options',
+  value: 'SAMEORIGIN'
+}
+```
+
+### Permissions-Policy
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/Permissions-Policy) يسمح لك بالتحكم في الميزات وواجهات برمجة التطبيقات التي يمكن استخدامها في المتصفح. كان يُعرف سابقًا باسم `Feature-Policy`.
+
+```js
+{
+  key: 'Permissions-Policy',
+  value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()'
+}
+```
+
+### X-Content-Type-Options
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Content-Type-Options) يمنع المتصفح من محاولة تخمين نوع المحتوى إذا لم يتم تعيين رأس `Content-Type` بشكل صريح. يمكن أن يمنع هذا من استغلال XSS للمواقع التي تسمح للمستخدمين بتحميل ومشاركة الملفات.
+
+على سبيل المثال، قد يحاول مستخدم تنزيل صورة، ولكن يتم معاملتها كنوع `Content-Type` مختلف مثل ملف قابل للتنفيذ، والذي قد يكون ضارًا. ينطبق هذا الرأس أيضًا على تنزيل ملحقات المتصفح. القيمة الوحيدة الصالحة لهذا الرأس هي `nosniff`.
+
+```js
+{
+  key: 'X-Content-Type-Options',
+  value: 'nosniff'
+}
+```
+
+### Referrer-Policy
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) يتحكم في مقدار المعلومات التي يدرجها المتصفح عند الانتقال من الموقع الحالي (origin) إلى موقع آخر.
+
+```js
+{
+  key: 'Referrer-Policy',
+  value: 'origin-when-cross-origin'
+}
+```
+
+### Content-Security-Policy
+
+تعلم المزيد عن إضافة [سياسة أمان المحتوى](/docs/app/building-your-application/configuring/content-security-policy) إلى تطبيقك.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات          |
+| --------- | ---------------- |
+| `v13.3.0` | تمت إضافة `missing`. |
+| `v10.2.0` | تمت إضافة `has`.     |
+| `v9.5.0`  | تمت إضافة الرؤوس.   |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/httpAgentOptions.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/httpAgentOptions.mdx
new file mode 100644
index 00000000..5fa4d49c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/httpAgentOptions.mdx
@@ -0,0 +1,20 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:29.964Z
+title: خيارات وكيل HTTP
+description: سيقوم Next.js تلقائيًا باستخدام HTTP Keep-Alive افتراضيًا. تعلم المزيد حول كيفية تعطيل HTTP Keep-Alive هنا.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+في إصدارات Node.js السابقة للإصدار 18، يقوم Next.js تلقائيًا بتوفير polyfill لـ `fetch()` باستخدام [undici](/docs/architecture/supported-browsers#polyfills) وتمكين [HTTP Keep-Alive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Keep-Alive) افتراضيًا.
+
+لتعطيل HTTP Keep-Alive لجميع استدعاءات `fetch()` على جانب الخادم، افتح ملف `next.config.js` وأضف إعداد `httpAgentOptions`:
+
+```js filename="next.config.js"
+module.exports = {
+  httpAgentOptions: {
+    keepAlive: false,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/images.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/images.mdx
new file mode 100644
index 00000000..3b149c78
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/images.mdx
@@ -0,0 +1,187 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:11.555Z
+title: الصور
+description: التهيئة المخصصة لأداة تحميل next/image
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+إذا كنت ترغب في استخدام مزود سحابي لتحسين الصور بدلاً من استخدام واجهة برمجة التطبيقات المدمجة لتحسين الصور في Next.js، يمكنك تهيئة `next.config.js` بالتالي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    loader: 'custom',
+    loaderFile: './my/image/loader.js',
+  },
+}
+```
+
+يجب أن يشير `loaderFile` هذا إلى ملف نسبي من جذر تطبيق Next.js الخاص بك. يجب أن يصدر الملف دالة افتراضية تُرجع سلسلة نصية، على سبيل المثال:
+
+```js
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+<AppOnly>
+
+بدلاً من ذلك، يمكنك استخدام [خاصية `loader`](/docs/app/api-reference/components/image#loader) لتمرير الدالة إلى كل نسخة من `next/image`.
+
+</AppOnly>
+
+<PagesOnly>
+
+بدلاً من ذلك، يمكنك استخدام [خاصية `loader`](/docs/pages/api-reference/components/image#loader) لتمرير الدالة إلى كل نسخة من `next/image`.
+
+</PagesOnly>
+
+## أمثلة تهيئة أداة التحميل
+
+- [Akamai](#akamai)
+- [Cloudinary](#cloudinary)
+- [Cloudflare](#cloudflare)
+- [Contentful](#contentful)
+- [Fastly](#fastly)
+- [Gumlet](#gumlet)
+- [ImageEngine](#imageengine)
+- [Imgix](#imgix)
+- [Thumbor](#thumbor)
+- [Sanity](#sanity)
+- [Supabase](#supabase)
+
+### Akamai
+
+```js
+// الوثائق: https://techdocs.akamai.com/ivm/reference/test-images-on-demand
+export default function akamaiLoader({ src, width, quality }) {
+  return `https://example.com/${src}?imwidth=${width}`
+}
+```
+
+### Cloudinary
+
+```js
+// العرض التوضيحي: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
+export default function cloudinaryLoader({ src, width, quality }) {
+  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
+  return `https://example.com/${params.join(',')}${src}`
+}
+```
+
+### Cloudflare
+
+```js
+// الوثائق: https://developers.cloudflare.com/images/url-format
+export default function cloudflareLoader({ src, width, quality }) {
+  const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto']
+  return `https://example.com/cdn-cgi/image/${params.join(',')}/${src}`
+}
+```
+
+### Contentful
+
+```js
+// الوثائق: https://www.contentful.com/developers/docs/references/images-api/
+export default function contentfulLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('fm', 'webp')
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', (quality || 75).toString())
+  return url.href
+}
+```
+
+### Fastly
+
+```js
+// الوثائق: https://developer.fastly.com/reference/io/
+export default function fastlyLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('auto', 'webp')
+  url.searchParams.set('width', width.toString())
+  url.searchParams.set('quality', (quality || 75).toString())
+  return url.href
+}
+```
+
+### Gumlet
+
+```js
+// الوثائق: https://docs.gumlet.com/reference/image-transform-size
+export default function gumletLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('format', 'auto')
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', (quality || 75).toString())
+  return url.href
+}
+```
+
+### ImageEngine
+
+```js
+// الوثائق: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives
+export default function imageengineLoader({ src, width, quality }) {
+  const compression = 100 - (quality || 50)
+  const params = [`w_${width}`, `cmpr_${compression}`)]
+  return `https://example.com${src}?imgeng=/${params.join('/')`
+}
+```
+
+### Imgix
+
+```js
+// العرض التوضيحي: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300
+export default function imgixLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  const params = url.searchParams
+  params.set('auto', params.getAll('auto').join(',') || 'format')
+  params.set('fit', params.get('fit') || 'max')
+  params.set('w', params.get('w') || width.toString())
+  params.set('q', (quality || 50).toString())
+  return url.href
+}
+```
+
+### Thumbor
+
+```js
+// الوثائق: https://thumbor.readthedocs.io/en/latest/
+export default function thumborLoader({ src, width, quality }) {
+  const params = [`${width}x0`, `filters:quality(${quality || 75})`]
+  return `https://example.com${params.join('/')}${src}`
+}
+```
+
+### Sanity
+
+```js
+// الوثائق: https://www.sanity.io/docs/image-urls
+export default function sanityLoader({ src, width, quality }) {
+  const prj = 'zp7mbokg'
+  const dataset = 'production'
+  const url = new URL(`https://cdn.sanity.io/images/${prj}/${dataset}${src}`)
+  url.searchParams.set('auto', 'format')
+  url.searchParams.set('fit', 'max')
+  url.searchParams.set('w', width.toString())
+  if (quality) {
+    url.searchParams.set('q', quality.toString())
+  }
+  return url.href
+}
+```
+
+### Supabase
+
+```js
+// الوثائق: https://supabase.com/docs/guides/storage/image-transformations#nextjs-loader
+export default function supabaseLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('width', width.toString())
+  url.searchParams.set('quality', (quality || 75).toString())
+  return url.href
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/incrementalCacheHandlerPath.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/incrementalCacheHandlerPath.mdx
new file mode 100644
index 00000000..b7efe675
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/incrementalCacheHandlerPath.mdx
@@ -0,0 +1,69 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:38.932Z
+title: incrementalCacheHandlerPath
+description: تكوين ذاكرة التخزين المؤقت لـ Next.js المستخدمة لتخزين البيانات وإعادة التحقق منها.
+---
+
+في Next.js، [معالج ذاكرة التخزين المؤقت الافتراضي](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) يستخدم ذاكرة التخزين المؤقت لنظام الملفات. هذا لا يتطلب أي تكوين، ولكن يمكنك تخصيص معالج ذاكرة التخزين المؤقت باستخدام حقل `incrementalCacheHandlerPath` في ملف `next.config.js`.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    incrementalCacheHandlerPath: require.resolve('./cache-handler.js'),
+  },
+}
+```
+
+إليك مثالًا على معالج ذاكرة تخزين مؤقت مخصص:
+
+```js filename="cache-handler.js"
+const cache = new Map()
+
+module.exports = class CacheHandler {
+  constructor(options) {
+    this.options = options
+    this.cache = {}
+  }
+
+  async get(key) {
+    return cache.get(key)
+  }
+
+  async set(key, data) {
+    cache.set(key, {
+      value: data,
+      lastModified: Date.now(),
+    })
+  }
+}
+```
+
+## مرجع API
+
+يمكن لمعالج ذاكرة التخزين المؤقت تنفيذ الطرق التالية: `get`، `set`، و `revalidateTag`.
+
+### `get()`
+
+| المعامل | النوع     | الوصف                  |
+| --------- | -------- | ---------------------------- |
+| `key`     | `string` | المفتاح للقيمة المخزنة مؤقتًا. |
+
+تُرجع القيمة المخزنة مؤقتًا أو `null` إذا لم يتم العثور عليها.
+
+### `set()`
+
+| المعامل | النوع           | الوصف                      |
+| --------- | -------------- | -------------------------------- |
+| `key`     | `string`       | المفتاح لتخزين البيانات تحته. |
+| `data`    | Data أو `null` | البيانات التي سيتم تخزينها مؤقتًا. |
+
+تُرجع `Promise<void>`.
+
+### `revalidateTag()`
+
+| المعامل | النوع     | الوصف                  |
+| --------- | -------- | ---------------------------- |
+| `tag`     | `string` | وسم ذاكرة التخزين المؤقت لإعادة التحقق منه. |
+
+تُرجع `Promise<void>`. تعلم المزيد حول [إعادة التحقق من البيانات](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) أو دالة [`revalidateTag()`](/docs/app/api-reference/functions/revalidateTag).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/index.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/index.mdx
new file mode 100644
index 00000000..cca07744
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/index.mdx
@@ -0,0 +1,88 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:34.842Z
+title: خيارات next.config.js
+description: تعلم كيفية تكوين تطبيقك باستخدام ملف next.config.js.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يمكن تكوين Next.js من خلال ملف `next.config.js` في جذر دليل المشروع (على سبيل المثال، بجانب `package.json`).
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+}
+
+module.exports = nextConfig
+```
+
+ملف `next.config.js` هو وحدة Node.js عادية وليس ملف JSON. يتم استخدامه بواسطة خادم Next.js ومراحل البناء، ولا يتم تضمينه في بناء المتصفح.
+
+إذا كنت بحاجة إلى [وحدات ECMAScript](https://nodejs.org/api/esm.html)، يمكنك استخدام `next.config.mjs`:
+
+```js filename="next.config.mjs"
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  /* config options here */
+}
+
+export default nextConfig
+```
+
+يمكنك أيضًا استخدام دالة:
+
+```js filename="next.config.mjs"
+module.exports = (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  }
+  return nextConfig
+}
+```
+
+منذ Next.js 12.1.0، يمكنك استخدام دالة غير متزامنة:
+
+```js filename="next.config.js"
+module.exports = async (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  }
+  return nextConfig
+}
+```
+
+`phase` هو السياق الحالي الذي يتم فيه تحميل التكوين. يمكنك رؤية [المراحل المتاحة](https://github.com/vercel/next.js/blob/5e6b008b561caf2710ab7be63320a3d549474a5b/packages/next/shared/lib/constants.ts#L19-L23). يمكن استيراد المراحل من `next/constants`:
+
+```js
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
+
+module.exports = (phase, { defaultConfig }) => {
+  if (phase === PHASE_DEVELOPMENT_SERVER) {
+    return {
+      /* development only config options here */
+    }
+  }
+
+  return {
+    /* config options for all phases except development here */
+  }
+}
+```
+
+الأسطر المعلقة هي المكان الذي يمكنك وضع التكوينات المسموح بها بواسطة `next.config.js`، والتي [تم تعريفها في هذا الملف](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/config-shared.ts).
+
+ومع ذلك، لا يوجد أي من التكوينات مطلوب، وليس من الضروري فهم ما يفعله كل تكوين. بدلاً من ذلك، ابحث عن الميزات التي تحتاج إلى تمكينها أو تعديلها في هذا القسم وسوف تظهر لك ما يجب القيام به.
+
+> تجنب استخدام ميزات JavaScript الجديدة غير المتوفرة في إصدار Node.js المستهدف. لن يتم تحليل `next.config.js` بواسطة Webpack أو Babel أو TypeScript.
+
+توثق هذه الصفحة جميع خيارات التكوين المتاحة:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/mdxRs.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/mdxRs.mdx
new file mode 100644
index 00000000..4f128cb8
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/mdxRs.mdx
@@ -0,0 +1,22 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:13.179Z
+title: mdxRs
+description: استخدم مترجم Rust الجديد لتحويل ملفات MDX في مسار التطبيق (App Router).
+---
+
+للاستخدام مع `@next/mdx`. قم بتحويل ملفات MDX باستخدام مترجم Rust الجديد.
+
+```js filename="next.config.js"
+const withMDX = require('@next/mdx')()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['ts', 'tsx', 'mdx'],
+  experimental: {
+    mdxRs: true,
+  },
+}
+
+module.exports = withMDX(nextConfig)
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/onDemandEntries.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/onDemandEntries.mdx
new file mode 100644
index 00000000..4be27dc1
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/onDemandEntries.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:15.955Z
+title: onDemandEntries
+description: تكوين كيفية تعامل Next.js مع التخلص من الصفحات أو الاحتفاظ بها في الذاكرة أثناء التطوير.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق (app) وموجه الصفحات (pages). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يقدم Next.js بعض الخيارات التي تمنحك تحكمًا في كيفية تعامل الخادم مع التخلص من الصفحات المبنية أو الاحتفاظ بها في الذاكرة أثناء التطوير.
+
+لتغيير الإعدادات الافتراضية، افتح ملف `next.config.js` وأضف تكوين `onDemandEntries`:
+
+```js filename="next.config.js"
+module.exports = {
+  onDemandEntries: {
+    // الفترة (بالميلي ثانية) التي سيحتفظ فيها الخادم بالصفحات في المخزن المؤقت
+    maxInactiveAge: 25 * 1000,
+    // عدد الصفحات التي يجب الاحتفاظ بها في نفس الوقت دون التخلص منها
+    pagesBufferLength: 2,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/optimizePackageImports.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/optimizePackageImports.mdx
new file mode 100644
index 00000000..f9f57282
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/optimizePackageImports.mdx
@@ -0,0 +1,22 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:14.765Z
+title: optimizePackageImports
+description: مرجع API لخيار تكوين optimizePackageImports في Next.js
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+بعض الحزم يمكن أن تصدر مئات أو آلاف الوحدات (modules)، مما قد يسبب مشاكل في الأداء أثناء التطوير وفي الإنتاج.
+
+إضافة حزمة إلى `experimental.optimizePackageImports` ستحمّل فقط الوحدات التي تستخدمها فعليًا، مع الحفاظ على راحتك في كتابة عبارات الاستيراد (import) مع العديد من الصادرات المسماة (named exports).
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['package-name'],
+  },
+}
+```
+
+مكتبات مثل `@mui/icons-material`، `@mui/material`، `date-fns`، `lodash`، `lodash-es`، `react-bootstrap`، `@headlessui/react`، `@heroicons/react`، و `lucide-react` محسنة بالفعل بشكل افتراضي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/output.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/output.mdx
new file mode 100644
index 00000000..62ea28ec
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/output.mdx
@@ -0,0 +1,143 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:13.637Z
+title: الإخراج (output)
+description: يتتبع Next.js تلقائيًا الملفات المطلوبة لكل صفحة لتمكين نشر تطبيقك بسهولة. تعرف هنا على كيفية عمل هذه الميزة.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+أثناء عملية البناء، سيتتبع Next.js تلقائيًا كل صفحة والتبعيات الخاصة بها لتحديد جميع الملفات المطلوبة لنشر نسخة إنتاجية من تطبيقك.
+
+تساعد هذه الميزة في تقليل حجم عمليات النشر بشكل كبير. في السابق، عند النشر باستخدام Docker، كنت بحاجة إلى تثبيت جميع الملفات من `dependencies` للحزمة لتشغيل `next start`. بدءًا من Next.js 12، يمكنك الاستفادة من تتبع ملفات الإخراج في دليل `.next/` لتضمين الملفات الضرورية فقط.
+
+علاوة على ذلك، يلغي هذا الحاجة إلى هدف `serverless` المهمل والذي يمكن أن يسبب مشكلات متعددة ويخلق أيضًا تكرارًا غير ضروري.
+
+## كيفية العمل
+
+أثناء `next build`، سيستخدم Next.js [`@vercel/nft`](https://github.com/vercel/nft) لتحليل `import` و`require` واستخدام `fs` بشكل ثابت لتحديد جميع الملفات التي قد تحتاجها الصفحة.
+
+يتم أيضًا تتبع خادم الإنتاج الخاص بـ Next.js للملفات المطلوبة وإخراجها في `.next/next-server.js.nft.json` والتي يمكن الاستفادة منها في بيئة الإنتاج.
+
+للاستفادة من ملفات `.nft.json` المنشأة في دليل الإخراج `.next`، يمكنك قراءة قائمة الملفات في كل تتبع والتي تكون مرتبطة بملف `.nft.json` ثم نسخها إلى موقع النشر الخاص بك.
+
+## النسخ التلقائي للملفات المتتبعة
+
+يمكن لـ Next.js إنشاء مجلد `standalone` تلقائيًا الذي ينسخ فقط الملفات الضرورية لنشر الإنتاج بما في ذلك ملفات مختارة من `node_modules`.
+
+للاستفادة من هذه النسخ التلقائي، يمكنك تمكينه في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  output: 'standalone',
+}
+```
+
+سيؤدي هذا إلى إنشاء مجلد في `.next/standalone` والذي يمكن نشره بمفرده دون الحاجة إلى تثبيت `node_modules`.
+
+بالإضافة إلى ذلك، يتم إخراج ملف `server.js` بسيط يمكن استخدامه بدلاً من `next start`. لا يقوم هذا الخادم البسيط بنسخ مجلدات `public` أو `.next/static` افتراضيًا حيث يُفضل التعامل مع هذه المجلدات عبر CDN، على الرغم من أنه يمكن نسخ هذه المجلدات يدويًا إلى `standalone/public` و `standalone/.next/static`، بعد ذلك سيخدمها ملف `server.js` تلقائيًا.
+
+<AppOnly>
+
+> **معلومة مفيدة**:
+>
+> - إذا كان مشروعك بحاجة إلى الاستماع إلى منفذ أو اسم مضيف محدد، يمكنك تعريف متغيرات البيئة `PORT` أو `HOSTNAME` قبل تشغيل `server.js`. على سبيل المثال، قم بتشغيل `PORT=8080 HOSTNAME=0.0.0.0 node server.js` لبدء الخادم على `http://0.0.0.0:8080`.
+> - إذا كان مشروعك يستخدم [تحسين الصور](/docs/app/building-your-application/optimizing/images) مع محمل `loader` الافتراضي، يجب تثبيت `sharp` كتبعية:
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**:
+>
+> - يتم قراءة `next.config.js` أثناء `next build` وتسلسله في ملف الإخراج `server.js`. إذا كانت خيارات [`serverRuntimeConfig` أو `publicRuntimeConfig` القديمة](/docs/pages/api-reference/next-config-js/runtime-configuration) مستخدمة، فإن القيم ستكون محددة بالقيم في وقت البناء.
+> - إذا كان مشروعك بحاجة إلى الاستماع إلى منفذ أو اسم مضيف محدد، يمكنك تعريف متغيرات البيئة `PORT` أو `HOSTNAME` قبل تشغيل `server.js`. على سبيل المثال، قم بتشغيل `PORT=8080 HOSTNAME=0.0.0.0 node server.js` لبدء الخادم على `http://0.0.0.0:8080`.
+> - إذا كان مشروعك يستخدم [تحسين الصور](/docs/pages/building-your-application/optimizing/images) مع محمل `loader` الافتراضي، يجب تثبيت `sharp` كتبعية:
+
+</PagesOnly>
+
+```bash filename="Terminal"
+npm i sharp
+```
+
+```bash filename="Terminal"
+yarn add sharp
+```
+
+```bash filename="Terminal"
+pnpm add sharp
+```
+
+```bash filename="Terminal"
+bun add sharp
+```
+
+## محاذير
+
+- أثناء التتبع في إعدادات monorepo، يتم استخدام دليل المشروع افتراضيًا للتتبع. بالنسبة لـ `next build packages/web-app`، سيكون `packages/web-app` هو جذر التتبع ولن يتم تضمين أي ملفات خارج هذا المجلد. لتضمين ملفات خارج هذا المجلد، يمكنك تعيين `experimental.outputFileTracingRoot` في `next.config.js`.
+
+```js filename="packages/web-app/next.config.js"
+module.exports = {
+  experimental: {
+    // يتضمن هذا الملفات من قاعدة monorepo بمستويين أعلى
+    outputFileTracingRoot: path.join(__dirname, '../../'),
+  },
+}
+```
+
+- هناك بعض الحالات التي قد يفشل فيها Next.js في تضمين الملفات المطلوبة، أو قد يتضمن ملفات غير مستخدمة عن طريق الخطأ. في هذه الحالات، يمكنك الاستفادة من `experimental.outputFileTracingExcludes` و `experimental.outputFileTracingIncludes` على التوالي في `next.config.js`. يقبل كل تكوين كائنًا يحتوي على [minimatch globs](https://www.npmjs.com/package/minimatch) للمفتاح لمطابقة صفحات محددة ومصفوفة من globs مرتبطة بجذر المشروع لتضمينها أو استبعادها في التتبع.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    outputFileTracingExcludes: {
+      '/api/hello': ['./un-necessary-folder/**/*'],
+    },
+    outputFileTracingIncludes: {
+      '/api/another': ['./necessary-folder/**/*'],
+    },
+  },
+}
+```
+
+- حاليًا، لا يفعل Next.js أي شيء مع ملفات `.nft.json` المنشأة. يجب قراءة هذه الملفات بواسطة منصة النشر الخاصة بك، مثل [Vercel](https://vercel.com)، لإنشاء نشر بسيط. في إصدار مستقبلي، من المخطط إصدار أمر جديد للاستفادة من ملفات `.nft.json` هذه.
+
+## `turbotrace` التجريبي
+
+يمكن أن يكون تتبع التبعيات بطيئًا لأنه يتطلب حسابات وتحليلات معقدة جدًا. لقد أنشأنا `turbotrace` بلغة Rust كبديل أسرع وأذكى للتنفيذ بلغة JavaScript.
+
+لتمكينه، يمكنك إضافة التكوين التالي إلى `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    turbotrace: {
+      // التحكم في مستوى تسجيل turbotrace، الافتراضي هو `error`
+      logLevel?:
+      | 'bug'
+      | 'fatal'
+      | 'error'
+      | 'warning'
+      | 'hint'
+      | 'note'
+      | 'suggestions'
+      | 'info',
+      // التحكم فيما إذا كان سجل turbotrace يجب أن يحتوي على تفاصيل التحليل، الافتراضي هو `false`
+      logDetail?: boolean
+      // عرض جميع رسائل السجل دون حدود
+      // يعرض turbotrace رسالة سجل واحدة فقط لكل فئة افتراضيًا
+      logAll?: boolean
+      // التحكم في دليل السياق لـ turbotrace
+      // لن يتم تتبع الملفات خارج دليل السياق
+      // تعيين `experimental.outputFileTracingRoot` له نفس التأثير
+      // إذا تم تعيين كل من `experimental.outputFileTracingRoot` وهذا الخيار، سيتم استخدام `experimental.turbotrace.contextDirectory`
+      contextDirectory?: string
+      // إذا كان هناك تعبير `process.cwd()` في الكود الخاص بك، يمكنك تعيين هذا الخيار لإخبار `turbotrace` بقيمة `process.cwd()` أثناء التتبع.
+      // على سبيل المثال، سيتم تتبع require(process.cwd() + '/package.json') كـ require('/path/to/cwd/package.json')
+      processCwd?: string
+      // التحكم في الحد الأقصى لاستخدام الذاكرة لـ `turbotrace`، بوحدة `MB`، الافتراضي هو `6000`.
+      memoryLimit?: number
+    },
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx
new file mode 100644
index 00000000..8e395bf8
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx
@@ -0,0 +1,62 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:23.770Z
+title: ملحقات الصفحة (pageExtensions)
+description: توسيع ملحقات الصفحة الافتراضية المستخدمة من قبل Next.js عند حل الصفحات في موجه الصفحات (Pages Router).
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+<AppOnly>
+
+بشكل افتراضي، يقبل Next.js الملفات ذات الملحقات التالية: `.tsx`, `.ts`, `.jsx`, `.js`. يمكن تعديل هذا للسماح بملحقات أخرى مثل markdown (`.md`, `.mdx`).
+
+```js filename="next.config.js"
+const withMDX = require('@next/mdx')()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['ts', 'tsx', 'mdx'],
+  experimental: {
+    mdxRs: true,
+  },
+}
+
+module.exports = withMDX(nextConfig)
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+يمكنك توسيع ملحقات الصفحة الافتراضية (`.tsx`, `.ts`, `.jsx`, `.js`) المستخدمة من قبل Next.js. داخل ملف `next.config.js`، أضف إعداد `pageExtensions`:
+
+```js filename="next.config.js"
+module.exports = {
+  pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
+}
+```
+
+تغيير هذه القيم يؤثر على _جميع_ صفحات Next.js، بما في ذلك:
+
+- [`middleware.js`](/docs/pages/building-your-application/routing/middleware)
+- [`instrumentation.js`](/docs/pages/building-your-application/optimizing/instrumentation)
+- `pages/_document.js`
+- `pages/_app.js`
+- `pages/api/`
+
+على سبيل المثال، إذا قمت بإعادة تكوين ملحقات الصفحة `.ts` إلى `.page.ts`، فستحتاج إلى إعادة تسمية الصفحات مثل `middleware.page.ts`, `instrumentation.page.ts`, `_app.page.ts`.
+
+## تضمين ملفات غير صفحات في دليل `pages`
+
+يمكنك وضع ملفات الاختبار أو الملفات الأخرى المستخدمة من قبل المكونات في دليل `pages`. داخل ملف `next.config.js`، أضف إعداد `pageExtensions`:
+
+```js filename="next.config.js"
+module.exports = {
+  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
+}
+```
+
+ثم، أعد تسمية صفحاتك لتحتوي على ملحق ملف يتضمن `.page` (مثال: إعادة تسمية `MyPage.tsx` إلى `MyPage.page.tsx`). تأكد من إعادة تسمية _جميع_ صفحات Next.js، بما في ذلك الملفات المذكورة أعلاه.
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/poweredByHeader.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/poweredByHeader.mdx
new file mode 100644
index 00000000..e13e8d67
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/poweredByHeader.mdx
@@ -0,0 +1,16 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:04.867Z
+title: poweredByHeader
+description: بشكل افتراضي، يضيف Next.js رأس `x-powered-by`. تعلم كيفية تعطيله هنا.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+بشكل افتراضي، يضيف Next.js رأس `x-powered-by`. لتعطيله، افتح ملف `next.config.js` وعطل إعداد `poweredByHeader`:
+
+```js filename="next.config.js"
+module.exports = {
+  poweredByHeader: false,
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx
new file mode 100644
index 00000000..c0268655
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:02.490Z
+title: productionBrowserSourceMaps
+description: تمكين إنشاء خرائط المصدر (source maps) للمتصفح أثناء بناء الإنتاج.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+خرائط المصدر (source maps) مفعلة افتراضيًا أثناء التطوير. أثناء عمليات بناء الإنتاج، يتم تعطيلها لمنع تسريب المصدر على العميل، إلا إذا قمت بالاشتراك صراحة باستخدام علامة التكوين.
+
+يوفر Next.js علامة تكوين يمكنك استخدامها لتمكين إنشاء خرائط المصدر للمتصفح أثناء بناء الإنتاج:
+
+```js filename="next.config.js"
+module.exports = {
+  productionBrowserSourceMaps: true,
+}
+```
+
+عند تفعيل خيار `productionBrowserSourceMaps`، سيتم إخراج خرائط المصدر في نفس دليل ملفات JavaScript. سيقوم Next.js تلقائيًا بخدمة هذه الملفات عند الطلب.
+
+- إضافة خرائط المصدر قد تزيد من وقت `next build`
+- تزيد من استخدام الذاكرة أثناء `next build`
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
new file mode 100644
index 00000000..c4fc19a0
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
@@ -0,0 +1,24 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:06.149Z
+title: reactStrictMode
+description: بيئة تشغيل Next.js بالكامل متوافقة الآن مع الوضع الصارم، تعلم كيفية التفعيل
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+> **من الجيد معرفته**: منذ Next.js 13.4، الوضع الصارم (Strict Mode) مفعل افتراضيًا مع موجه `app`، لذا الإعدادات أعلاه ضرورية فقط لموجه `pages`. يمكنك تعطيل الوضع الصارم عن طريق تعيين `reactStrictMode: false`.
+
+> **مقترح**: ننصح بشدة بتفعيل الوضع الصارم في تطبيق Next.js الخاص بك لتحضير تطبيقك لمستقبل React.
+
+[الوضع الصارم (Strict Mode)](https://react.dev/reference/react/StrictMode) في React هو ميزة خاصة بوضع التطوير فقط لتسليط الضوء على المشاكل المحتملة في التطبيق. يساعد في تحديد دورات الحياة غير الآمنة، واستخدام واجهات برمجة التطبيقات القديمة، وعدد من الميزات الأخرى.
+
+بيئة تشغيل Next.js متوافقة مع الوضع الصارم. لتفعيل الوضع الصارم، قم بتكوين الخيار التالي في ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+module.exports = {
+  reactStrictMode: true,
+}
+```
+
+إذا كنت أو فريقك غير مستعدين لاستخدام الوضع الصارم في تطبيقك بالكامل، لا بأس! يمكنك الهجرة تدريجيًا على أساس صفحة بصفحة باستخدام `<React.StrictMode>`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/redirects.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/redirects.mdx
new file mode 100644
index 00000000..51cacaae
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/redirects.mdx
@@ -0,0 +1,322 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:00:43.269Z
+title: إعادة التوجيهات
+description: إضافة إعادة التوجيهات إلى تطبيق Next.js الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+تسمح لك إعادة التوجيهات بتوجيه مسار طلب وارد إلى مسار وجهة مختلف.
+
+لاستخدام إعادة التوجيهات، يمكنك استخدام مفتاح `redirects` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/about',
+        destination: '/',
+        permanent: true,
+      },
+    ]
+  },
+}
+```
+
+`redirects` هي دالة غير متزامنة تتوقع إرجاع مصفوفة تحتوي على كائنات ذات خصائص `source` و`destination` و`permanent`:
+
+- `source`: نمط مسار الطلب الوارد.
+- `destination`: المسار الذي تريد التوجيه إليه.
+- `permanent`: `true` أو `false` - إذا كانت `true` سيتم استخدام رمز الحالة 308 الذي يوجه العملاء/محركات البحث إلى تخزين إعادة التوجيه مؤقتًا إلى الأبد، إذا كانت `false` سيتم استخدام رمز الحالة 307 وهو مؤقت ولا يتم تخزينه.
+
+> **لماذا يستخدم Next.js الرموز 307 و308؟** تقليديًا، كان يتم استخدام 302 لإعادة التوجيه المؤقتة، و301 لإعادة التوجيه الدائمة، لكن العديد من المتصفحات غيرت طريقة طلب إعادة التوجيه إلى `GET` بغض النظر عن الطريقة الأصلية. على سبيل المثال، إذا قام المتصفح بطلب `POST /v1/users` الذي أعاد رمز الحالة `302` مع موقع `/v2/users`، فقد يكون الطلب اللاحق `GET /v2/users` بدلاً من `POST /v2/users` المتوقع. يستخدم Next.js رمز الحالة 307 لإعادة التوجيه المؤقتة، و308 لإعادة التوجيه الدائمة للحفاظ بشكل صريح على طريقة الطلب المستخدمة.
+
+- `basePath`: `false` أو `undefined` - إذا كانت `false` فلن يتم تضمين `basePath` عند المطابقة، يمكن استخدامها لإعادة التوجيه الخارجية فقط.
+- `locale`: `false` أو `undefined` - ما إذا كان يجب عدم تضمين اللغة عند المطابقة.
+- `has`: مصفوفة من [كائنات has](#header-cookie-and-query-matching) مع خصائص `type` و`key` و`value`.
+- `missing`: مصفوفة من [كائنات missing](#header-cookie-and-query-matching) مع خصائص `type` و`key` و`value`.
+
+يتم التحقق من إعادة التوجيهات قبل نظام الملفات الذي يتضمن الصفحات وملفات `/public`.
+
+لا يتم تطبيق إعادة التوجيهات على التوجيه من جانب العميل (`Link`، `router.push`)، إلا إذا كان [البرنامج الوسيط](/docs/app/building-your-application/routing/middleware) موجودًا ويتطابق مع المسار.
+
+عند تطبيق إعادة التوجيه، سيتم تمرير أي قيم استعلام مقدمة في الطلب إلى وجهة إعادة التوجيه. على سبيل المثال، انظر إلى تكوين إعادة التوجيه التالي:
+
+```js
+{
+  source: '/old-blog/:path*',
+  destination: '/blog/:path*',
+  permanent: false
+}
+```
+
+عند طلب `/old-blog/post-1?hello=world`، سيتم توجيه العميل إلى `/blog/post-1?hello=world`.
+
+## مطابقة المسار
+
+يُسمح بمطابقة المسار، على سبيل المثال `/old-blog/:slug` سيطابق `/old-blog/hello-world` (بدون مسارات متداخلة):
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/old-blog/:slug',
+        destination: '/news/:slug', // يمكن استخدام المعلمات المطابقة في الوجهة
+        permanent: true,
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار النمط العام
+
+لمطابقة مسار النمط العام، يمكنك استخدام `*` بعد معلمة، على سبيل المثال `/blog/:slug*` سيطابق `/blog/a/b/c/d/hello-world`:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/blog/:slug*',
+        destination: '/news/:slug*', // يمكن استخدام المعلمات المطابقة في الوجهة
+        permanent: true,
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار التعبير النمطي
+
+لمطابقة مسار تعبير نمطي، يمكنك لف التعبير النمطي بين قوسين بعد معلمة، على سبيل المثال `/post/:slug(\\d{1,})` سيطابق `/post/123` لكن ليس `/post/abc`:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/post/:slug(\\d{1,})',
+        destination: '/news/:slug', // يمكن استخدام المعلمات المطابقة في الوجهة
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+الأحرف التالية `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` تستخدم لمطابقة مسار التعبير النمطي، لذا عند استخدامها في `source` كقيم غير خاصة يجب الهروب منها بإضافة `\\` قبلها:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        // هذا سيطابق `/english(default)/something` عند الطلب
+        source: '/english\\(default\\)/:slug',
+        destination: '/en-us/:slug',
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+## مطابقة الرأس، الكوكي، والاستعلام
+
+لمطابقة إعادة التوجيه فقط عندما تتطابق قيم الرأس أو الكوكي أو الاستعلام مع حقل `has` أو لا تتطابق مع حقل `missing`، يمكن استخدام `has` أو `missing`. يجب أن يتطابق كل من `source` وجميع عناصر `has` وألا تتطابق جميع عناصر `missing` لتطبيق إعادة التوجيه.
+
+يمكن أن تحتوي عناصر `has` و`missing` على الحقول التالية:
+
+- `type`: `String` - يجب أن يكون إما `header` أو `cookie` أو `host` أو `query`.
+- `key`: `String` - المفتاح من النوع المحدد للمطابقة ضده.
+- `value`: `String` أو `undefined` - القيمة للتحقق منها، إذا كانت `undefined` فإن أي قيمة ستطابق. يمكن استخدام سلسلة تشبه التعبير النمطي لالتقاط جزء محدد من القيمة، على سبيل المثال إذا تم استخدام القيمة `first-(?<paramName>.*)` لـ `first-second` فإن `second` ستكون قابلة للاستخدام في الوجهة مع `:paramName`.
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      // إذا كان رأس `x-redirect-me` موجودًا،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path((?!another-page$).*)',
+        has: [
+          {
+            type: 'header',
+            key: 'x-redirect-me',
+          },
+        ],
+        permanent: false,
+        destination: '/another-page',
+      },
+      // إذا كان رأس `x-dont-redirect` موجودًا،
+      // لن يتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path((?!another-page$).*)',
+        missing: [
+          {
+            type: 'header',
+            key: 'x-do-not-redirect',
+          },
+        ],
+        permanent: false,
+        destination: '/another-page',
+      },
+      // إذا تمت مطابقة المصدر والاستعلام والكوكي،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/specific/:path*',
+        has: [
+          {
+            type: 'query',
+            key: 'page',
+            // لن تكون قيمة الصفحة متاحة في الوجهة
+            // لأن القيمة مقدمة ولا تستخدم مجموعة التقاط مسماة مثل (?<page>home)
+            value: 'home',
+          },
+          {
+            type: 'cookie',
+            key: 'authorized',
+            value: 'true',
+          },
+        ],
+        permanent: false,
+        destination: '/another/:path*',
+      },
+      // إذا كان رأس `x-authorized` موجودًا ويحتوي على
+      // قيمة مطابقة، سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/',
+        has: [
+          {
+            type: 'header',
+            key: 'x-authorized',
+            value: '(?<authorized>yes|true)',
+          },
+        ],
+        permanent: false,
+        destination: '/home?authorized=:authorized',
+      },
+      // إذا كان المضيف هو `example.com`،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path((?!another-page$).*)',
+        has: [
+          {
+            type: 'host',
+            value: 'example.com',
+          },
+        ],
+        permanent: false,
+        destination: '/another-page',
+      },
+    ]
+  },
+}
+```
+
+### إعادة التوجيهات مع دعم basePath
+
+عند الاستفادة من [دعم `basePath`](/docs/app/api-reference/next-config-js/basePath) مع إعادة التوجيهات، يتم تلقائيًا إضافة بادئة `basePath` إلى كل `source` و`destination` ما لم تقم بإضافة `basePath: false` إلى إعادة التوجيه:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+
+  async redirects() {
+    return [
+      {
+        source: '/with-basePath', // يصبح تلقائيًا /docs/with-basePath
+        destination: '/another', // يصبح تلقائيًا /docs/another
+        permanent: false,
+      },
+      {
+        // لا يضيف /docs لأن basePath: false مضبوط
+        source: '/without-basePath',
+        destination: 'https://example.com',
+        basePath: false,
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+### إعادة التوجيهات مع دعم i18n
+
+<AppOnly>
+
+عند الاستفادة من [دعم `i18n`](/docs/app/building-your-application/routing/internationalization) مع إعادة التوجيهات، يتم تلقائيًا إضافة بادئة إلى كل `source` و`destination` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، يجب إضافة بادئة `source` و`destination` بلغة ليتم مطابقتها بشكل صحيح.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند الاستفادة من [دعم `i18n`](/docs/pages/building-your-application/routing/internationalization) مع إعادة التوجيهات، يتم تلقائيًا إضافة بادئة إلى كل `source` و`destination` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، يجب إضافة بادئة `source` و`destination` بلغة ليتم مطابقتها بشكل صحيح.
+
+</PagesOnly>
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async redirects() {
+    return [
+      {
+        source: '/with-locale', // يتعامل تلقائيًا مع جميع اللغات
+        destination: '/another', // يمرر اللغة تلقائيًا
+        permanent: false,
+      },
+      {
+        // لا يتعامل مع اللغات تلقائيًا لأن locale: false مضبوط
+        source: '/nl/with-locale-manual',
+        destination: '/nl/another',
+        locale: false,
+        permanent: false,
+      },
+      {
+        // هذا يطابق '/' لأن `en` هي defaultLocale
+        source: '/en',
+        destination: '/en/another',
+        locale: false,
+        permanent: false,
+      },
+      // من الممكن مطابقة جميع اللغات حتى عند ضبط locale: false
+      {
+        source: '/:locale/page',
+        destination: '/en/newpage',
+        permanent: false,
+        locale: false,
+      },
+      {
+        // هذا يتحول إلى /(en|fr|de)/(.*) لذا لن يطابق المسارات
+        // الأساسية `/` أو `/fr` مثل /:path*
+        source: '/(.*)',
+        destination: '/another',
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء HTTP القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية `statusCode` بدلاً من خاصية `permanent`، ولكن ليس كلاهما. لضمان توافق IE11، يتم إضافة رأس `Refresh` تلقائيًا لرمز الحالة 308.
+
+## إعادة التوجيهات الأخرى
+
+- داخل [مسارات API](/docs/pages/api-reference/functions/next-server)، يمكنك استخدام `res.redirect()`.
+- داخل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) و[`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)، يمكنك إعادة توجيه صفحات محددة في وقت الطلب.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات            |
+| --------- | ------------------ |
+| `v13.3.0` | تمت إضافة `missing`.   |
+| `v10.2.0` | تمت إضافة `has`.       |
+| `v9.5.0`  | تمت إضافة `redirects`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/rewrites.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/rewrites.mdx
new file mode 100644
index 00000000..903ec849
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/rewrites.mdx
@@ -0,0 +1,479 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:01:32.520Z
+title: إعادة التوجيه (rewrites)
+description: إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+تسمح لك إعادة التوجيه (rewrites) بتعيين مسار طلب وارد إلى مسار وجهة مختلف.
+
+<AppOnly>
+
+تعمل إعادة التوجيه كوكيل URL وتخفي مسار الوجهة، مما يجعل المستخدم يبدو وكأنه لم يغير موقعه على الموقع. على النقيض من ذلك، فإن [عمليات إعادة التوجيه (redirects)](/docs/app/api-reference/next-config-js/redirects) ستوجه إلى صفحة جديدة وتظهر تغييرات URL.
+
+</AppOnly>
+
+<PagesOnly>
+
+تعمل إعادة التوجيه كوكيل URL وتخفي مسار الوجهة، مما يجعل المستخدم يبدو وكأنه لم يغير موقعه على الموقع. على النقيض من ذلك، فإن [عمليات إعادة التوجيه (redirects)](/docs/pages/api-reference/next-config-js/redirects) ستوجه إلى صفحة جديدة وتظهر تغييرات URL.
+
+</PagesOnly>
+
+لاستخدام إعادة التوجيه، يمكنك استخدام مفتاح `rewrites` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/about',
+        destination: '/',
+      },
+    ]
+  },
+}
+```
+
+يتم تطبيق إعادة التوجيه على التوجيه من جانب العميل، حيث سيتم تطبيق إعادة التوجيه على `<Link href="/about">` في المثال أعلاه.
+
+`rewrites` هي دالة غير متزامنة تتوقع إرجاع مصفوفة أو كائن من المصفوفات (انظر أدناه) يحتوي على كائنات بخصائص `source` و `destination`:
+
+- `source`: `String` - هو نمط مسار الطلب الوارد.
+- `destination`: `String` - هو المسار الذي تريد التوجيه إليه.
+- `basePath`: `false` أو `undefined` - إذا كانت false فلن يتم تضمين basePath عند المطابقة، يمكن استخدامها لإعادة التوجيه الخارجية فقط.
+- `locale`: `false` أو `undefined` - ما إذا كان يجب عدم تضمين اللغة عند المطابقة.
+- `has` هي مصفوفة من [كائنات has](#header-cookie-and-query-matching) مع خصائص `type` و `key` و `value`.
+- `missing` هي مصفوفة من [كائنات missing](#header-cookie-and-query-matching) مع خصائص `type` و `key` و `value`.
+
+عندما ترجع دالة `rewrites` مصفوفة، يتم تطبيق إعادة التوجيه بعد التحقق من نظام الملفات (الصفحات وملفات `/public`) وقبل المسارات الديناميكية. عندما ترجع دالة `rewrites` كائنًا من المصفوفات بشكل محدد، يمكن تغيير هذا السلوك والتحكم فيه بدقة أكبر، بدءًا من إصدار `v10.1` من Next.js:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return {
+      beforeFiles: [
+        // يتم التحقق من عمليات إعادة التوجيه هذه بعد الرؤوس/إعادة التوجيه
+        // وقبل جميع الملفات بما في ذلك ملفات _next/public مما
+        // يسمح بتجاوز ملفات الصفحات
+        {
+          source: '/some-page',
+          destination: '/somewhere-else',
+          has: [{ type: 'query', key: 'overrideMe' }],
+        },
+      ],
+      afterFiles: [
+        // يتم التحقق من عمليات إعادة التوجيه هذه بعد التحقق من ملفات الصفحات/العامة
+        // ولكن قبل المسارات الديناميكية
+        {
+          source: '/non-existent',
+          destination: '/somewhere-else',
+        },
+      ],
+      fallback: [
+        // يتم التحقق من عمليات إعادة التوجيه هذه بعد التحقق من ملفات الصفحات/العامة
+        // والمسارات الديناميكية
+        {
+          source: '/:path*',
+          destination: `https://my-old-site.com/:path*`,
+        },
+      ],
+    }
+  },
+}
+```
+
+> **معلومة جيدة**: عمليات إعادة التوجيه في `beforeFiles` لا تتحقق من نظام الملفات/المسارات الديناميكية مباشرة بعد مطابقة مصدر، بل تستمر حتى يتم التحقق من جميع `beforeFiles`.
+
+ترتيب التحقق من المسارات في Next.js هو:
+
+<AppOnly>
+
+1. يتم التحقق من [الرؤوس (headers)](/docs/app/api-reference/next-config-js/headers) وتطبيقها
+2. يتم التحقق من [عمليات إعادة التوجيه (redirects)](/docs/app/api-reference/next-config-js/redirects) وتطبيقها
+3. يتم التحقق من عمليات إعادة التوجيه `beforeFiles` وتطبيقها
+4. يتم التحقق من الملفات الثابتة من [الدليل العام (public directory)](/docs/app/building-your-application/optimizing/static-assets)، وملفات `_next/static`، والصفحات غير الديناميكية وتقديمها
+5. يتم التحقق من عمليات إعادة التوجيه `afterFiles` وتطبيقها، إذا تمت مطابقة إحدى عمليات إعادة التوجيه هذه، نتحقق من المسارات الديناميكية/الملفات الثابتة بعد كل مطابقة
+6. يتم التحقق من عمليات إعادة التوجيه `fallback` وتطبيقها، يتم تطبيق هذه قبل عرض صفحة 404 وبعد التحقق من جميع المسارات الديناميكية/الأصول الثابتة. إذا كنت تستخدم [fallback: true/'blocking'](/docs/pages/api-reference/functions/get-static-paths#fallback-true) في `getStaticPaths`، فلن يتم تشغيل عمليات إعادة التوجيه `fallback` المحددة في ملف `next.config.js`.
+
+</AppOnly>
+
+<PagesOnly>
+
+1. يتم التحقق من [الرؤوس (headers)](/docs/pages/api-reference/next-config-js/headers) وتطبيقها
+2. يتم التحقق من [عمليات إعادة التوجيه (redirects)](/docs/pages/api-reference/next-config-js/redirects) وتطبيقها
+3. يتم التحقق من عمليات إعادة التوجيه `beforeFiles` وتطبيقها
+4. يتم التحقق من الملفات الثابتة من [الدليل العام (public directory)](/docs/pages/building-your-application/optimizing/static-assets)، وملفات `_next/static`، والصفحات غير الديناميكية وتقديمها
+5. يتم التحقق من عمليات إعادة التوجيه `afterFiles` وتطبيقها، إذا تمت مطابقة إحدى عمليات إعادة التوجيه هذه، نتحقق من المسارات الديناميكية/الملفات الثابتة بعد كل مطابقة
+6. يتم التحقق من عمليات إعادة التوجيه `fallback` وتطبيقها، يتم تطبيق هذه قبل عرض صفحة 404 وبعد التحقق من جميع المسارات الديناميكية/الأصول الثابتة. إذا كنت تستخدم [fallback: true/'blocking'](/docs/pages/api-reference/functions/get-static-paths#fallback-true) في `getStaticPaths`، فلن يتم تشغيل عمليات إعادة التوجيه `fallback` المحددة في ملف `next.config.js`.
+
+</PagesOnly>
+
+## معلمات إعادة التوجيه
+
+عند استخدام المعلمات في إعادة التوجيه، يتم تمرير المعلمات في الاستعلام افتراضيًا عندما لا يتم استخدام أي من المعلمات في `destination`.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/old-about/:path*',
+        destination: '/about', // معلمة :path غير مستخدمة هنا لذا سيتم تمريرها تلقائيًا في الاستعلام
+      },
+    ]
+  },
+}
+```
+
+إذا تم استخدام معلمة في الوجهة، فلن يتم تمرير أي من المعلمات تلقائيًا في الاستعلام.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/docs/:path*',
+        destination: '/:path*', // معلمة :path مستخدمة هنا لذا لن يتم تمريرها تلقائيًا في الاستعلام
+      },
+    ]
+  },
+}
+```
+
+لا يزال بإمكانك تمرير المعلمات يدويًا في الاستعلام إذا تم استخدام أحدها بالفعل في الوجهة عن طريق تحديد الاستعلام في `destination`.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/:first/:second',
+        destination: '/:first?second=:second',
+        // نظرًا لأن معلمة :first مستخدمة في الوجهة، لن تتم إضافة معلمة :second
+        // تلقائيًا في الاستعلام على الرغم من أنه يمكننا إضافتها يدويًا
+        // كما هو موضح أعلاه
+      },
+    ]
+  },
+}
+```
+
+> **معلومة جيدة**: سيتم تحليل معلمات الصفحات الثابتة من [التحسين الثابت التلقائي (Automatic Static Optimization)](/docs/pages/building-your-application/rendering/automatic-static-optimization) أو [التقديم المسبق (prerendering)](/docs/pages/building-your-application/data-fetching/get-static-props) من عمليات إعادة التوجيه على العميل بعد الترطيب وتوفيرها في الاستعلام.
+
+## مطابقة المسار
+
+يُسمح بمطابقة المسارات، على سبيل المثال `/blog/:slug` ستطابق `/blog/hello-world` (بدون مسارات متداخلة):
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog/:slug',
+        destination: '/news/:slug', // يمكن استخدام المعلمات المطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Wildcard
+
+لمطابقة مسار wildcard، يمكنك استخدام `*` بعد معلمة، على سبيل المثال `/blog/:slug*` ستطابق `/blog/a/b/c/d/hello-world`:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog/:slug*',
+        destination: '/news/:slug*', // يمكن استخدام المعلمات المطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Regex
+
+لمطابقة مسار regex، يمكنك لف regex بين قوسين بعد معلمة، على سبيل المثال `/blog/:slug(\\d{1,})` ستطابق `/blog/123` ولكن ليس `/blog/abc`:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/old-blog/:post(\\d{1,})',
+        destination: '/blog/:post', // يمكن استخدام المعلمات المطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+الرموز التالية `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` تُستخدم لمطابقة مسار regex، لذا عند استخدامها في `source` كقيم غير خاصة، يجب تهريبها بإضافة `\\` قبلها:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        // هذا سيطابق `/english(default)/something` عند الطلب
+        source: '/english\\(default\\)/:slug',
+        destination: '/en-us/:slug',
+      },
+    ]
+  },
+}
+```
+
+## مطابقة الرأس، الكوكي، والاستعلام
+
+لمطابقة إعادة التوجيه فقط عندما تتطابق قيم الرأس أو الكوكي أو الاستعلام مع حقل `has` أو لا تتطابق مع حقل `missing`، يمكن استخدام `has` و `missing`. يجب أن يتطابق كل من `source` وجميع عناصر `has`، ويجب ألا تتطابق جميع عناصر `missing` لتطبيق إعادة التوجيه.
+
+يمكن أن تحتوي عناصر `has` و `missing` على الحقول التالية:
+
+- `type`: `String` - يجب أن يكون إما `header` أو `cookie` أو `host` أو `query`.
+- `key`: `String` - المفتاح من النوع المحدد للمطابقة ضده.
+- `value`: `String` أو `undefined` - القيمة للتحقق منها، إذا كانت undefined فستطابق أي قيمة. يمكن استخدام سلسلة تشبه regex لالتقاط جزء محدد من القيمة، على سبيل المثال إذا تم استخدام القيمة `first-(?<paramName>.*)` لـ `first-second`، فيمكن استخدام `second` في الوجهة مع `:paramName`.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      // إذا كان رأس `x-rewrite-me` موجودًا،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-rewrite-me',
+          },
+        ],
+        destination: '/another-page',
+      },
+      // إذا لم يكن رأس `x-rewrite-me` موجودًا،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        missing: [
+          {
+            type: 'header',
+            key: 'x-rewrite-me',
+          },
+        ],
+        destination: '/another-page',
+      },
+      // إذا تمت مطابقة المصدر والاستعلام والكوكي،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/specific/:path*',
+        has: [
+          {
+            type: 'query',
+            key: 'page',
+            // لن تكون قيمة الصفحة متاحة في
+            // الوجهة نظرًا لتوفير القيمة وعدم
+            // استخدام مجموعة capture مسماة مثل (?<page>home)
+            value: 'home',
+          },
+          {
+            type: 'cookie',
+            key: 'authorized',
+            value: 'true',
+          },
+        ],
+        destination: '/:path*/home',
+      },
+      // إذا كان رأس `x-authorized` موجودًا و
+      // يحتوي على قيمة مطابقة، سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-authorized',
+            value: '(?<authorized>yes|true)',
+          },
+        ],
+        destination: '/home?authorized=:authorized',
+      },
+      // إذا كان المضيف هو `example.com`،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'host',
+            value: 'example.com',
+          },
+        ],
+        destination: '/another-page',
+      },
+    ]
+  },
+}
+```
+
+## إعادة التوجيه إلى عنوان URL خارجي
+
+<details>
+  <summary>أمثلة</summary>
+
+- [التبني التدريجي لـ Next.js](https://github.com/vercel/next.js/tree/canary/examples/custom-routes-proxying)
+- [استخدام مناطق متعددة](https://github.com/vercel/next.js/tree/canary/examples/with-zones)
+
+</details>
+
+تسمح لك إعادة التوجيه بإعادة التوجيه إلى عنوان URL خارجي. هذا مفيد بشكل خاص للتبني التدريجي لـ Next.js. فيما يلي مثال لإعادة توجيه مسار `/blog` من تطبيقك الرئيسي إلى موقع خارجي.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog',
+        destination: 'https://example.com/blog',
+      },
+      {
+        source: '/blog/:slug',
+        destination: 'https://example.com/blog/:slug', // يمكن استخدام المعلمات المطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+إذا كنت تستخدم `trailingSlash: true`، فأنت بحاجة أيضًا إلى إدراج شرطة مائلة في معلمة `source`. إذا كان خادم الوجهة يتوقع أيضًا شرطة مائلة، فيجب تضمينها في معلمة `destination`.
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+  async rewrites() {
+    return [
+      {
+        source: '/blog/',
+        destination: 'https://example.com/blog/',
+      },
+      {
+        source: '/blog/:path*/',
+        destination: 'https://example.com/blog/:path*/',
+      },
+    ]
+  },
+}
+```
+
+### التبني التدريجي لـ Next.js
+
+يمكنك أيضًا جعل Next.js يعود إلى التوجيه إلى موقع ويب موجود بعد التحقق من جميع مسارات Next.js.
+
+بهذه الطريقة لا تحتاج إلى تغيير تكوين إعادة التوجيه عند نقل المزيد من الصفحات إلى Next.js
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return {
+      fallback: [
+        {
+          source: '/:path*',
+          destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,
+        },
+      ],
+    }
+  },
+}
+```
+
+### إعادة التوجيه مع دعم basePath
+
+عند الاستفادة من [دعم `basePath`](/docs/app/api-reference/next-config-js/basePath) مع إعادة التوجيه، يتم إضافة `basePath` تلقائيًا إلى كل `source` و `destination` ما لم تقم بإضافة `basePath: false` إلى إعادة التوجيه:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+
+  async rewrites() {
+    return [
+      {
+        source: '/with-basePath', // تصبح تلقائيًا /docs/with-basePath
+        destination: '/another', // تصبح تلقائيًا /docs/another
+      },
+      {
+        // لا يضيف /docs إلى /without-basePath نظرًا لتعيين basePath: false
+        // ملاحظة: لا يمكن استخدام هذا لإعادة التوجيه الداخلية مثل `destination: '/another'`
+        source: '/without-basePath',
+        destination: 'https://example.com',
+        basePath: false,
+      },
+    ]
+  },
+}
+```
+
+### إعادة التوجيه مع دعم i18n
+
+<AppOnly>
+
+عند الاستفادة من [دعم `i18n`](/docs/app/building-your-application/routing/internationalization) مع إعادة التوجيه، يتم إضافة `locales` المكونة تلقائيًا إلى كل `source` و `destination` ما لم تقم بإضافة `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، فيجب إضافة بادئة `source` و `destination` بلغة لمطابقتها بشكل صحيح.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند الاستفادة من [دعم `i18n`](/docs/pages/building-your-application/routing/internationalization) مع إعادة التوجيه، يتم إضافة `locales` المكونة تلقائيًا إلى كل `source` و `destination` ما لم تقم بإضافة `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، فيجب إضافة بادئة `source` و `destination` بلغة لمطابقتها بشكل صحيح.
+
+</PagesOnly>
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async rewrites() {
+    return [
+      {
+        source: '/with-locale', // يتعامل تلقائيًا مع جميع اللغات
+        destination: '/another', // يمرر اللغة تلقائيًا
+      },
+      {
+        // لا يتعامل مع اللغات تلقائيًا نظرًا لتعيين locale: false
+        source: '/nl/with-locale-manual',
+        destination: '/nl/another',
+        locale: false,
+      },
+      {
+        // هذا يطابق '/' نظرًا لأن `en` هي defaultLocale
+        source: '/en',
+        destination: '/en/another',
+        locale: false,
+      },
+      {
+        // من الممكن مطابقة جميع اللغات حتى عند تعيين locale: false
+        source: '/:locale/api-alias/:path*',
+        destination: '/api/:path*',
+        locale: false,
+      },
+      {
+        // هذا يتحول إلى /(en|fr|de)/(.*) لذا لن يطابق
+        // `/` أو `/fr` مثل /:path*
+        source: '/(.*)',
+        destination: '/another',
+      },
+    ]
+  },
+}
+```
+
+## تاريخ الإصدارات
+
+| الإصدار   | التغييرات          |
+| --------- | ---------------- |
+| `v13.3.0` | تمت إضافة `missing`. |
+| `v10.2.0` | تمت إضافة `has`.     |
+| `v9.5.0`  | تمت إضافة الرؤوس.   |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/serverComponentsExternalPackages.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/serverComponentsExternalPackages.mdx
new file mode 100644
index 00000000..9707a51e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/serverComponentsExternalPackages.mdx
@@ -0,0 +1,71 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:59:00.388Z
+title: serverComponentsExternalPackages
+description: استثناء تبعيات محددة من تجميع مكونات الخادم واستخدام `require` الأصلي في Node.js
+---
+
+سيتم تجميع التبعيات المستخدمة داخل [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) و[معالجات المسارات (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) تلقائيًا بواسطة Next.js.
+
+إذا كانت التبعية تستخدم ميزات محددة في Node.js، يمكنك اختيار استثناء تبعيات محددة من تجميع مكونات الخادم واستخدام `require` الأصلي في Node.js.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ['@acme/ui'],
+  },
+}
+
+module.exports = nextConfig
+```
+
+يتضمن Next.js [قائمة قصيرة من الحزم الشائعة](https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/server-external-packages.json) التي تعمل حاليًا على التوافق ويتم استثناؤها تلقائيًا:
+
+- `@aws-sdk/client-s3`
+- `@aws-sdk/s3-presigned-post`
+- `@blockfrost/blockfrost-js`
+- `@libsql/client`
+- `@jpg-store/lucid-cardano`
+- `@mikro-orm/core`
+- `@mikro-orm/knex`
+- `@prisma/client`
+- `@sentry/nextjs`
+- `@sentry/node`
+- `@swc/core`
+- `argon2`
+- `autoprefixer`
+- `aws-crt`
+- `bcrypt`
+- `better-sqlite3`
+- `canvas`
+- `cpu-features`
+- `cypress`
+- `eslint`
+- `express`
+- `firebase-admin`
+- `jest`
+- `jsdom`
+- `libsql`
+- `lodash`
+- `mdx-bundler`
+- `mongodb`
+- `mongoose`
+- `next-mdx-remote`
+- `next-seo`
+- `payload`
+- `pg`
+- `playwright`
+- `postcss`
+- `prettier`
+- `prisma`
+- `puppeteer`
+- `rimraf`
+- `sharp`
+- `shiki`
+- `sqlite3`
+- `tailwindcss`
+- `ts-node`
+- `typescript`
+- `vscode-oniguruma`
+- `webpack`
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx
new file mode 100644
index 00000000..940c0649
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx
@@ -0,0 +1,26 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:48.162Z
+title: trailingSlash
+description: تكوين صفحات Next.js للعمل مع أو بدون شرطة مائلة نهائية.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+بشكل افتراضي، سيقوم Next.js بإعادة توجيه عناوين URL التي تحتوي على شرطة مائلة نهائية إلى نظيراتها بدون الشرطة المائلة. على سبيل المثال، `/about/` سيتم إعادة توجيهها إلى `/about`. يمكنك تكوين هذا السلوك ليعمل بالعكس، حيث يتم إعادة توجيه عناوين URL بدون شرطة مائلة نهائية إلى نظيراتها التي تحتوي على شرطة مائلة نهائية.
+
+افتح ملف `next.config.js` وأضف إعداد `trailingSlash`:
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+}
+```
+
+مع تفعيل هذا الخيار، سيتم إعادة توجيه عناوين URL مثل `/about` إلى `/about/`.
+
+## سجل التغييرات
+
+| الإصدار  | التغييرات                |
+| -------- | ---------------------- |
+| `v9.5.0` | تم إضافة `trailingSlash`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/transpilePackages.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/transpilePackages.mdx
new file mode 100644
index 00000000..3344f1be
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/transpilePackages.mdx
@@ -0,0 +1,25 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:39.910Z
+title: transpilePackages
+description: تحويل تلقائي وحزم التبعيات من الحزم المحلية (مثل مستودعات أحادية) أو من التبعيات الخارجية (`node_modules`).
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه صفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+يمكن لـ Next.js تحويل وحزم التبعيات تلقائيًا من الحزم المحلية (مثل المستودعات الأحادية) أو من التبعيات الخارجية (`node_modules`). هذا يحل محل حزمة `next-transpile-modules`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@acme/ui', 'lodash-es'],
+}
+
+module.exports = nextConfig
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                    |
+| --------- | -------------------------- |
+| `v13.0.0` | تمت إضافة `transpilePackages`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/turbo.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/turbo.mdx
new file mode 100644
index 00000000..9340c0f1
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/turbo.mdx
@@ -0,0 +1,74 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:57.990Z
+title: turbo (تجريبي)
+nav_title: turbo
+description: تكوين Next.js مع خيارات خاصة بـ Turbopack
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+> **تحذير**: هذه الميزات تجريبية وستعمل فقط مع `next --turbo`.
+
+## محملات (loaders) webpack
+
+حاليًا، يدعم Turbopack مجموعة فرعية من واجهة برمجة تطبيقات محملات webpack، مما يسمح لك باستخدام بعض محملات webpack لتحويل الأكواد في Turbopack.
+
+لتكوين المحملات، أضف أسماء المحملات التي قمت بتثبيتها وأي خيارات في ملف `next.config.js`، مع ربط امتدادات الملفات بقائمة من المحملات:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    turbo: {
+      rules: {
+        // تنسيق الخيارات
+        '*.md': [
+          {
+            loader: '@mdx-js/loader',
+            options: {
+              format: 'md',
+            },
+          },
+        ],
+        // تنسيق بدون خيارات
+        '*.mdx': ['@mdx-js/loader'],
+      },
+    },
+  },
+}
+```
+
+بعد ذلك، مع التكوين أعلاه، يمكنك استخدام الأكواد المحولة من تطبيقك:
+
+```js
+import MyDoc from './my-doc.mdx'
+
+export default function Home() {
+  return <MyDoc />
+}
+```
+
+## أسماء مستعارة للحل (Resolve Alias)
+
+من خلال ملف `next.config.js`، يمكن تكوين Turbopack لتعديل حل الوحدات من خلال أسماء مستعارة، مشابه لتكوين [`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias) في webpack.
+
+لتكوين أسماء مستعارة للحل، قم بربط الأنماط المستوردة بوجهتها الجديدة في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    turbo: {
+      resolveAlias: {
+        underscore: 'lodash',
+        mocha: { browser: 'mocha/browser-entry.js' },
+      },
+    },
+  },
+}
+```
+
+هذا يجعل استيرادات حزمة `underscore` تشير إلى حزمة `lodash`. بمعنى آخر، `import underscore from 'underscore'` ستحمّل وحدة `lodash` بدلاً من `underscore`.
+
+يدعم Turbopack أيضًا التسمية الشرطية من خلال هذا الحقل، مشابهة لـ [الصادرات الشرطية](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports) في Node.js. حاليًا، يتم دعم شرط `browser` فقط. في المثال أعلاه، سيتم تحويل استيرادات وحدة `mocha` إلى `mocha/browser-entry.js` عندما يكون Turbopack موجّهًا لبيئات المتصفح.
+
+لمزيد من المعلومات والإرشادات حول كيفية نقل تطبيقك إلى Turbopack من webpack، راجع [توثيق Turbopack حول التوافق مع webpack](https://turbo.build/pack/docs/migrating-from-webpack).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx
new file mode 100644
index 00000000..ba31de5e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx
@@ -0,0 +1,20 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:32.891Z
+title: typedRoutes (تجريبي)
+nav_title: typedRoutes
+description: تمكين الدعم التجريبي للروابط ذات النوع الثابت (statically typed links).
+---
+
+دعم تجريبي لـ[الروابط ذات النوع الثابت (statically typed links)](/docs/app/building-your-application/configuring/typescript#statically-typed-links). تتطلب هذه الميزة استخدام موجه التطبيق (App Router) بالإضافة إلى TypeScript في مشروعك.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    typedRoutes: true,
+  },
+}
+
+module.exports = nextConfig
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/typescript.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/typescript.mdx
new file mode 100644
index 00000000..712dc049
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/typescript.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:26.158Z
+title: TypeScript
+description: يبلغ Next.js عن أخطاء TypeScript بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يفشل Next.js في عملية **بناء الإنتاج** (`next build`) عندما تكون هناك أخطاء TypeScript في مشروعك.
+
+إذا كنت ترغب في أن يقوم Next.js بإنشاء كود إنتاج بشكل خطير حتى عندما يكون هناك أخطاء في تطبيقك، يمكنك تعطيل خطوة التحقق من الأنواع المدمجة.
+
+إذا تم تعطيل هذه الميزة، تأكد من أنك تقوم بإجراء فحوصات الأنواع كجزء من عملية البناء أو النشر، وإلا قد يكون هذا خطيرًا جدًا.
+
+افتح ملف `next.config.js` وقم بتمكين خيار `ignoreBuildErrors` في إعدادات `typescript`:
+
+```js filename="next.config.js"
+module.exports = {
+  typescript: {
+    // !! تحذير !!
+    // السماح بشكل خطير بإكمال عمليات بناء الإنتاج بنجاح حتى إذا
+    // كان مشروعك يحتوي على أخطاء في الأنواع.
+    // !! تحذير !!
+    ignoreBuildErrors: true,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/urlImports.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/urlImports.mdx
new file mode 100644
index 00000000..6dcee282
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/urlImports.mdx
@@ -0,0 +1,93 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:41.827Z
+title: استيراد من عناوين URL
+description: تكوين Next.js للسماح باستيراد وحدات من عناوين URL خارجية (ميزة تجريبية).
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+استيراد من عناوين URL هي ميزة تجريبية تسمح لك باستيراد وحدات مباشرة من خوادم خارجية (بدلاً من القرص المحلي).
+
+> **تحذير**: هذه الميزة تجريبية. استخدم فقط النطاقات التي تثق بها لتنزيل وتنفيذها على جهازك. يرجى توخي الحذر والانتباه حتى يتم تصنيف الميزة على أنها مستقرة.
+
+لتفعيل هذه الميزة، أضف بادئات عناوين URL المسموح بها داخل ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    urlImports: ['https://example.com/assets/', 'https://cdn.skypack.dev'],
+  },
+}
+```
+
+ثم يمكنك استيراد الوحدات مباشرة من عناوين URL:
+
+```js
+import { a, b, c } from 'https://example.com/assets/some/module.js'
+```
+
+يمكن استخدام استيراد من عناوين URL في أي مكان يمكن استخدام استيراد الحزم العادية فيه.
+
+## نموذج الأمان
+
+تم تصميم هذه الميزة مع **الأمان كأولوية قصوى**. للبدء، أضفنا علامة تجريبية تفرض عليك السماح صراحةً بالنطاقات التي تقبل استيراد عناوين URL منها. نحن نعمل على تطوير ذلك أكثر من خلال تقييد استيراد عناوين URL للتنفيذ في بيئة المتصفح الآمنة باستخدام [Edge Runtime](/docs/app/api-reference/edge).
+
+## ملف القفل
+
+عند استخدام استيراد من عناوين URL، سيقوم Next.js بإنشاء دليل `next.lock` يحتوي على ملف قفل والأصول التي تم جلبها.
+يجب **إضافة هذا الدليل إلى Git**، وليس تجاهله بواسطة `.gitignore`.
+
+- عند تشغيل `next dev`، سيقوم Next.js بتنزيل وإضافة جميع استيرادات عناوين URL المكتشفة حديثًا إلى ملف القفل الخاص بك
+- عند تشغيل `next build`، سيقوم Next.js باستخدام ملف القفل فقط لبناء التطبيق للإنتاج
+
+عادةً، لا تكون هناك حاجة لطلبات الشبكة وأي ملف قفل قديم سيؤدي إلى فشل البناء.
+استثناء واحد هو الموارد التي تستجيب بـ `Cache-Control: no-cache`.
+ستحتوي هذه الموارد على إدخال `no-cache` في ملف القفل وسيتم جلبها دائمًا من الشبكة في كل بناء.
+
+## أمثلة
+
+### Skypack
+
+```js
+import confetti from 'https://cdn.skypack.dev/canvas-confetti'
+import { useEffect } from 'react'
+
+export default () => {
+  useEffect(() => {
+    confetti()
+  })
+  return <p>Hello</p>
+}
+```
+
+### استيراد صور ثابتة
+
+```js
+import Image from 'next/image'
+import logo from 'https://example.com/assets/logo.png'
+
+export default () => (
+  <div>
+    <Image src={logo} placeholder="blur" />
+  </div>
+)
+```
+
+### عناوين URL في CSS
+
+```css
+.className {
+  background: url('https://example.com/assets/hero.jpg');
+}
+```
+
+### استيراد أصول
+
+```js
+const logo = new URL('https://example.com/assets/file.txt', import.meta.url)
+
+console.log(logo.pathname)
+
+// يطبع "/_next/static/media/file.a9727b5d.txt"
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/webVitalsAttribution.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/webVitalsAttribution.mdx
new file mode 100644
index 00000000..b0ff2f68
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/webVitalsAttribution.mdx
@@ -0,0 +1,26 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:27.483Z
+title: webVitalsAttribution
+description: تعلم كيفية استخدام خيار webVitalsAttribution لتحديد مصدر مشكلات مؤشرات ويب فيتالز.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+عند تصحيح المشكلات المتعلقة بمؤشرات ويب فيتالز، من المفيد غالبًا أن نتمكن من تحديد مصدر المشكلة بدقة.
+على سبيل المثال، في حالة Cumulative Layout Shift (CLS)، قد نرغب في معرفة أول عنصر حدث له تحول عند أكبر تحول تخطيطي حدث.
+أو في حالة Largest Contentful Paint (LCP)، قد نرغب في تحديد العنصر المقابل لـ LCP للصفحة.
+إذا كان عنصر LCP عبارة عن صورة، فإن معرفة عنوان URL لمورد الصورة يمكن أن يساعدنا في تحديد الأصل الذي نحتاج إلى تحسينه.
+
+يسمح لنا تحديد أكبر مساهم في درجة مؤشرات ويب فيتالز، والمعروف باسم [الإسناد](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution)،
+بالحصول على معلومات أكثر تعمقًا مثل إدخالات [PerformanceEventTiming](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming)، و[PerformanceNavigationTiming](https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming) و[PerformanceResourceTiming](https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming).
+
+الإسناد معطّل افتراضيًا في Next.js ولكن يمكن تفعيله **لكل مقياس** عن طريق تحديد التالي في ملف `next.config.js`.
+
+```js filename="next.config.js"
+experimental: {
+  webVitalsAttribution: ['CLS', 'LCP']
+}
+```
+
+القيم الصالحة للإسناد هي جميع مقاييس `web-vitals` المحددة في نوع [`NextWebVitalsMetric`](https://github.com/vercel/next.js/blob/442378d21dd56d6e769863eb8c2cb521a463a2e0/packages/next/shared/lib/utils.ts#L43).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/webpack.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/webpack.mdx
new file mode 100644
index 00000000..daa1d3d4
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/05-next-config-js/webpack.mdx
@@ -0,0 +1,92 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:58:59.568Z
+title: تهيئة Webpack المخصصة
+nav_title: webpack
+description: تعلم كيفية تخصيص تهيئة webpack المستخدمة من قبل Next.js
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+> **من الجيد معرفة**: التغييرات على تهيئة webpack لا تخضع لـ semver لذا تقدم على مسؤوليتك الخاصة
+
+قبل المتابعة في إضافة تهيئة webpack مخصصة لتطبيقك، تأكد من أن Next.js لا يدعم بالفعل حالة الاستخدام الخاصة بك:
+
+<AppOnly>
+
+- [استيراد CSS](/docs/app/building-your-application/styling)
+- [وحدات CSS](/docs/app/building-your-application/styling/css-modules)
+- [استيراد Sass/SCSS](/docs/app/building-your-application/styling/sass)
+- [وحدات Sass/SCSS](/docs/app/building-your-application/styling/sass)
+- [preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)
+
+</AppOnly>
+
+<PagesOnly>
+
+- [استيراد CSS](/docs/pages/building-your-application/styling)
+- [وحدات CSS](/docs/pages/building-your-application/styling/css-modules)
+- [استيراد Sass/SCSS](/docs/pages/building-your-application/styling/sass)
+- [وحدات Sass/SCSS](/docs/pages/building-your-application/styling/sass)
+- [preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)
+- [تخصيص تهيئة babel](/docs/pages/building-your-application/configuring/babel)
+
+</PagesOnly>
+
+بعض الميزات المطلوبة بشكل شائع متوفرة كإضافات:
+
+- [@next/mdx](https://github.com/vercel/next.js/tree/canary/packages/next-mdx)
+- [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)
+
+لتمديد استخدامنا لـ `webpack`، يمكنك تعريف دالة تمدد تهيئتها داخل `next.config.js`، كما يلي:
+
+```js filename="next.config.js"
+module.exports = {
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+  ) => {
+    // مهم: إرجاع التهيئة المعدلة
+    return config
+  },
+}
+```
+
+> دالة `webpack` تنفذ مرتين، مرة للخادم ومرة للعميل. هذا يسمح لك بالتمييز بين تهيئة العميل والخادم باستخدام خاصية `isServer`.
+
+الوسيط الثاني لدالة `webpack` هو كائن يحتوي على الخصائص التالية:
+
+- `buildId`: `String` - معرف البناء، يستخدم كمعرف فريد بين البناءات
+- `dev`: `Boolean` - يشير إلى ما إذا كان التجميع سيتم في وضع التطوير
+- `isServer`: `Boolean` - تكون `true` لتجميع جانب الخادم، و `false` لتجميع جانب العميل
+- `nextRuntime`: `String | undefined` - وقت التشغيل المستهدف لتجميع جانب الخادم؛ إما `"edge"` أو `"nodejs"`، تكون `undefined` لتجميع جانب العميل.
+- `defaultLoaders`: `Object` - المحملات الافتراضية المستخدمة داخليًا من قبل Next.js:
+  - `babel`: `Object` - تهيئة `babel-loader` الافتراضية
+
+مثال على استخدام `defaultLoaders.babel`:
+
+```js
+// مثال تهيئة لإضافة محمل يعتمد على babel-loader
+// هذا المصدر مأخوذ من مصدر إضافة @next/mdx:
+// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
+module.exports = {
+  webpack: (config, options) => {
+    config.module.rules.push({
+      test: /\.mdx/,
+      use: [
+        options.defaultLoaders.babel,
+        {
+          loader: '@mdx-js/loader',
+          options: pluginOptions.options,
+        },
+      ],
+    })
+
+    return config
+  },
+}
+```
+
+#### `nextRuntime`
+
+لاحظ أن `isServer` تكون `true` عندما يكون `nextRuntime` هو `"edge"` أو `"nodejs"`، nextRuntime "`edge`" حاليًا مخصص للبرمجيات الوسيطة ومكونات الخادم في وقت تشغيل edge فقط.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/06-create-next-app.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/06-create-next-app.mdx
new file mode 100644
index 00000000..eaf35f9d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/06-create-next-app.mdx
@@ -0,0 +1,133 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:03.514Z
+title: create-next-app
+description: إنشاء تطبيقات Next.js بأمر واحد باستخدام create-next-app.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه داخل مكون. */}
+
+أسهل طريقة للبدء مع Next.js هي باستخدام `create-next-app`. هذه الأداة عبر سطر الأوامر تمكنك من البدء بسرعة في بناء تطبيق Next.js جديد، مع كل الإعدادات الجاهزة لك.
+
+يمكنك إنشاء تطبيق جديد باستخدام قالب Next.js الافتراضي، أو باستخدام أحد [الأمثلة الرسمية لـ Next.js](https://github.com/vercel/next.js/tree/canary/examples).
+
+### الوضع التفاعلي
+
+يمكنك إنشاء مشروع جديد بشكل تفاعلي عن طريق تنفيذ:
+
+```bash filename="Terminal"
+npx create-next-app@latest
+```
+
+```bash filename="Terminal"
+yarn create next-app
+```
+
+```bash filename="Terminal"
+pnpm create next-app
+```
+
+```bash filename="Terminal"
+bunx create-next-app
+```
+
+ثم سيتم سؤالك الأسئلة التالية:
+
+```txt filename="Terminal"
+ما اسم مشروعك؟ my-app
+هل ترغب في استخدام TypeScript؟ لا / نعم
+هل ترغب في استخدام ESLint؟ لا / نعم
+هل ترغب في استخدام Tailwind CSS؟ لا / نعم
+هل ترغب في استخدام دليل `src/`؟ لا / نعم
+هل ترغب في استخدام موجه التطبيق؟ (موصى به) لا / نعم
+هل ترغب في تخصيص اسم مستعار للاستيراد الافتراضي (@/*)؟ لا / نعم
+```
+
+بعد الإجابة على الأسئلة، سيتم إنشاء مشروع جديد مع التكوين الصحيح بناءً على إجاباتك.
+
+### الوضع غير التفاعلي
+
+يمكنك أيضًا تمرير وسائط سطر الأوامر لإعداد مشروع جديد بشكل غير تفاعلي.
+
+بالإضافة إلى ذلك، يمكنك إلغاء الخيارات الافتراضية عن طريق إضافة بادئة `--no-` (مثل `--no-eslint`).
+
+انظر `create-next-app --help`:
+
+```bash filename="Terminal"
+الاستخدام: create-next-app <دليل-المشروع> [خيارات]
+
+الخيارات:
+  -V, --version                        عرض رقم الإصدار
+  --ts, --typescript
+
+    تهيئة المشروع كمشروع TypeScript. (افتراضي)
+
+  --js, --javascript
+
+    تهيئة المشروع كمشروع JavaScript.
+
+  --tailwind
+
+    تهيئة مع إعدادات Tailwind CSS. (افتراضي)
+
+  --eslint
+
+    تهيئة مع إعدادات ESLint.
+
+  --app
+
+    تهيئة كمشروع يستخدم موجه التطبيق.
+
+  --src-dir
+
+    تهيئة داخل دليل `src/`.
+
+  --import-alias <اسم-مستعار-للاستيراد>
+
+    تحديد اسم مستعار للاستيراد (افتراضي "@/*").
+
+  --use-npm
+
+    إخبار CLI صراحةً باستخدام npm لتهيئة التطبيق
+
+  --use-pnpm
+
+    إخبار CLI صراحةً باستخدام pnpm لتهيئة التطبيق
+
+  --use-yarn
+
+    إخبار CLI صراحةً باستخدام Yarn لتهيئة التطبيق
+
+  --use-bun
+
+    إخبار CLI صراحةً باستخدام Bun لتهيئة التطبيق
+
+  -e, --example [اسم]|[رابط-github]
+
+    مثال لاستخدامه في تهيئة التطبيق. يمكنك استخدام اسم مثال
+    من مستودع Next.js الرسمي أو رابط GitHub عام. يمكن أن يستخدم الرابط
+    أي فرع و/أو مسار فرعي
+
+  --example-path <مسار-المثال>
+
+    في حالات نادرة، قد يحتوي رابط GitHub على اسم فرع يحتوي
+    على شرطة مائلة (مثل bug/fix-1) ومسار المثال (مثل foo/bar).
+    في هذه الحالة، يجب تحديد مسار المثال بشكل منفصل:
+    --example-path foo/bar
+
+  --reset-preferences
+
+    إخبار CLI صراحةً بإعادة تعيين أي تفضيلات مخزنة
+
+  -h, --help                           عرض معلومات الاستخدام
+```
+
+### لماذا تستخدم Create Next App؟
+
+`create-next-app` يسمح لك بإنشاء تطبيق Next.js جديد خلال ثوانٍ. يتم صيانته رسميًا من قبل مطوري Next.js، ويتضمن عددًا من المزايا:
+
+- **تجربة تفاعلية**: تشغيل `npx create-next-app@latest` (بدون وسائط) يطلق تجربة تفاعلية ترشدك خلال إعداد المشروع.
+- **بدون تبعيات**: تهيئة المشروع سريعة جدًا وتستغرق ثانية واحدة. Create Next App لا يعتمد على أي تبعيات خارجية.
+- **دعم العمل دون اتصال**: سيكتشف Create Next App تلقائيًا إذا كنت غير متصل بالإنترنت وسيقوم بتهيئة مشروعك باستخدام ذاكرة التخزين المؤقت المحلية للحزم.
+- **دعم الأمثلة**: يمكن لـ Create Next App تهيئة تطبيقك باستخدام مثال من مجموعة أمثلة Next.js (مثل `npx create-next-app --example api-routes`) أو أي مستودع GitHub عام.
+- **مختبر**: الحزمة جزء من مستودع Next.js الأحادي ويتم اختبارها باستخدام نفس مجموعة اختبارات التكامل مثل Next.js نفسها، مما يضمن عملها كما هو متوقع مع كل إصدار.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/07-edge.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/07-edge.mdx
new file mode 100644
index 00000000..e21ad51a
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/07-edge.mdx
@@ -0,0 +1,167 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:44.746Z
+title: وقت تشغيل الحافة (Edge Runtime)
+description: مرجع API لوقت تشغيل الحافة (Edge Runtime).
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+وقت تشغيل الحافة (Edge Runtime) في Next.js يعتمد على واجهات برمجة تطبيقات الويب القياسية، وهو يدعم الواجهات البرمجية التالية:
+
+## واجهات برمجة تطبيقات الشبكة
+
+| API                                                                             | الوصف                          |
+| ------------------------------------------------------------------------------- | ------------------------------ |
+| [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob)                       | يمثل كائن Blob                 |
+| [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API)                 | جلب مورد من الشبكة             |
+| [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent)           | يمثل حدث جلب                   |
+| [`File`](https://developer.mozilla.org/docs/Web/API/File)                       | يمثل ملفًا                     |
+| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)               | يمثل بيانات النموذج            |
+| [`Headers`](https://developer.mozilla.org/docs/Web/API/Headers)                 | يمثل رؤوس HTTP                 |
+| [`Request`](https://developer.mozilla.org/docs/Web/API/Request)                 | يمثل طلب HTTP                  |
+| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)               | يمثل استجابة HTTP              |
+| [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | يمثل معلمات بحث URL            |
+| [`WebSocket`](https://developer.mozilla.org/docs/Web/API/WebSocket)             | يمثل اتصال WebSocket           |
+
+## واجهات برمجة تطبيقات التشفير
+
+| API                                                                                 | الوصف                           |
+| ----------------------------------------------------------------------------------- | ------------------------------- |
+| [`atob`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/atob) | فك تشفير سلسلة مشفرة بـ base-64 |
+| [`btoa`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/btoa) | تشفير سلسلة إلى base-64         |
+| [`TextDecoder`](https://developer.mozilla.org/docs/Web/API/TextDecoder)             | فك تشفير Uint8Array إلى سلسلة   |
+| [`TextDecoderStream`](https://developer.mozilla.org/docs/Web/API/TextDecoderStream) | مفكك تشفير متسلسل للتدفقات      |
+| [`TextEncoder`](https://developer.mozilla.org/docs/Web/API/TextEncoder)             | تشفير سلسلة إلى Uint8Array      |
+| [`TextEncoderStream`](https://developer.mozilla.org/docs/Web/API/TextEncoderStream) | مشفر متسلسل للتدفقات            |
+
+## واجهات برمجة تطبيقات التدفق
+
+| API                                                                                                     | الوصف                             |
+| ------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream)                           | يمثل تدفقًا قابلًا للقراءة        |
+| [`ReadableStreamBYOBReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamBYOBReader)       | يمثل قارئًا لتدفق قابل للقراءة    |
+| [`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader) | يمثل قارئًا افتراضيًا للتدفق      |
+| [`TransformStream`](https://developer.mozilla.org/docs/Web/API/TransformStream)                         | يمثل تدفق تحويل                   |
+| [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream)                           | يمثل تدفقًا قابلًا للكتابة        |
+| [`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter) | يمثل كاتبًا افتراضيًا للتدفق      |
+
+## واجهات برمجة تطبيقات التشفير الآمن
+
+| API                                                                       | الوصف                                                                                         |
+| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| [`crypto`](https://developer.mozilla.org/docs/Web/API/Window/crypto)      | يوفر وصولاً إلى الوظائف التشفيرية للنظام                                                   |
+| [`CryptoKey`](https://developer.mozilla.org/docs/Web/API/CryptoKey)       | يمثل مفتاحًا تشفيريًا                                                                       |
+| [`SubtleCrypto`](https://developer.mozilla.org/docs/Web/API/SubtleCrypto) | يوفر وصولاً إلى البدائيات التشفيرية الشائعة مثل التجزئة، التوقيع، التشفير أو فك التشفير     |
+
+## واجهات برمجة تطبيقات الويب القياسية
+
+| الواجهة البرمجية                                                                                                     | الوصف                                                                                                                                                                                                 |
+| --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`AbortController`](https://developer.mozilla.org/docs/Web/API/AbortController)                                       | تسمح بإلغاء واحد أو أكثر من طلبات DOM عند الرغبة                                                                                                                                                    |
+| [`Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)                           | تمثل مصفوفة من القيم                                                                                                                                                                                 |
+| [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)               | تمثل مخزنًا ثابت الطول للبيانات الثنائية الأولية                                                                                                                                                     |
+| [`Atomics`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Atomics)                       | توفر عمليات ذرية كطرق ثابتة                                                                                                                                                                         |
+| [`BigInt`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt)                         | تمثل عددًا صحيحًا بدقة غير محدودة                                                                                                                                                                    |
+| [`BigInt64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array)           | تمثل مصفوفة مكتوبة من الأعداد الصحيحة الموقعة 64-بت                                                                                                                                                 |
+| [`BigUint64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array)         | تمثل مصفوفة مكتوبة من الأعداد الصحيحة غير الموقعة 64-بت                                                                                                                                             |
+| [`Boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)                       | تمثل كيانًا منطقيًا ويمكن أن يكون لها قيمتان: `true` و `false`                                                                                                                                      |
+| [`clearInterval`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)                 | تلغي إجراءً متكررًا مؤقتًا تم إنشاؤه مسبقًا عن طريق استدعاء `setInterval()`                                                                                                                         |
+| [`clearTimeout`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout)                   | تلغي إجراءً متكررًا مؤقتًا تم إنشاؤه مسبقًا عن طريق استدعاء `setTimeout()`                                                                                                                          |
+| [`console`](https://developer.mozilla.org/docs/Web/API/Console)                                                       | توفر وصولاً إلى وحدة تحكم تصحيح الأخطاء في المتصفح                                                                                                                                                  |
+| [`DataView`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView)                     | تمثل عرضًا عامًا لـ `ArrayBuffer`                                                                                                                                                                    |
+| [`Date`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date)                             | تمثل لحظة واحدة في الوقت بتنسيق مستقل عن النظام الأساسي                                                                                                                                             |
+| [`decodeURI`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/decodeURI)                   | تفكك معرف مورد موحد (URI) تم إنشاؤه مسبقًا بواسطة `encodeURI` أو بواسطة روتين مشابه                                                                                                                |
+| [`decodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) | تفكك مكون معرف مورد موحد (URI) تم إنشاؤه مسبقًا بواسطة `encodeURIComponent` أو بواسطة روتين مشابه                                                                                                  |
+| [`DOMException`](https://developer.mozilla.org/docs/Web/API/DOMException)                                             | تمثل خطأ يحدث في DOM                                                                                                                                                                                |
+| [`encodeURI`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)                   | تشفر معرف مورد موحد (URI) عن طريق استبدال كل مثيل لبعض الأحرف بتسلسل هروب واحد أو اثنين أو ثلاثة أو أربعة يمثل ترميز UTF-8 للحرف                                                                  |
+| [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) | تشفر مكون معرف مورد موحد (URI) عن طريق استبدال كل مثيل لبعض الأحرف بتسلسل هروب واحد أو اثنين أو ثلاثة أو أربعة يمثل ترميز UTF-8 للحرف                                                             |
+| [`Error`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error)                           | تمثل خطأ عند محاولة تنفيذ عبارة أو الوصول إلى خاصية                                                                                                                                                |
+| [`EvalError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/EvalError)                   | تمثل خطأ يحدث فيما يتعلق بالدالة العامة `eval()`                                                                                                                                                   |
+| [`Float32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Float32Array)             | تمثل مصفوفة مكتوبة من أرقام الفاصلة العائمة 32-بت                                                                                                                                                  |
+| [`Float64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Float64Array)             | تمثل مصفوفة مكتوبة من أرقام الفاصلة العائمة 64-بت                                                                                                                                                  |
+| [`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function)                     | تمثل دالة                                                                                                                                                                                           |
+| [`Infinity`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Infinity)                     | تمثل قيمة اللانهاية الرياضية                                                                                                                                                                        |
+| [`Int8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int8Array)                   | تمثل مصفوفة مكتوبة من الأعداد الصحيحة الموقعة 8-بت                                                                                                                                                 |
+| [`Int16Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int16Array)                 | تمثل مصفوفة مكتوبة من الأعداد الصحيحة الموقعة 16-بت                                                                                                                                                |
+| [`Int32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int32Array)                 | تمثل مصفوفة مكتوبة من الأعداد الصحيحة الموقعة 32-بت                                                                                                                                                |
+| [`Intl`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl)                             | توفر وصولاً إلى وظائف التدويل والتوطين                                                                                                                                                              |
+| [`isFinite`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/isFinite)                     | تحدد ما إذا كانت القيمة رقمًا محدودًا                                                                                                                                                                |
+| [`isNaN`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/isNaN)                           | تحدد ما إذا كانت القيمة `NaN` أم لا                                                                                                                                                                 |
+| [`JSON`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)                             | توفر وظائف لتحويل قيم JavaScript من وإلى تنسيق JSON                                                                                                                                                 |
+| [`Map`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map)                               | تمثل مجموعة من القيم، حيث يمكن أن يظهر كل قيمة مرة واحدة فقط                                                                                                                                        |
+| [`Math`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math)                             | توفر وصولاً إلى الدوال والثوابت الرياضية                                                                                                                                                            |
+| [`Number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)                         | تمثل قيمة رقمية                                                                                                                                                                                     |
+| [`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)                         | تمثل الكائن الذي هو أساس جميع كائنات JavaScript                                                                                                                                                      |
+| [`parseFloat`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/parseFloat)                 | تحلل وسيط سلسلة وتعيد رقم فاصلة عائمة                                                                                                                                                               |
+| [`parseInt`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/parseInt)                     | تحلل وسيط سلسلة وتعيد عددًا صحيحًا للأساس المحدد                                                                                                                                                    |
+| [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)                       | تمثل الانتهاء النهائي (أو الفشل) لعملية غير متزامنة، وقيمتها الناتجة                                                                                                                               |
+| [`Proxy`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)                           | تمثل كائنًا يُستخدم لتعريف سلوك مخصص للعمليات الأساسية (مثل البحث عن الخاصية، التعيين، التعداد، استدعاء الدالة، إلخ)                                                                               |
+| [`queueMicrotask`](https://developer.mozilla.org/docs/Web/API/queueMicrotask)                                         | تضيف مهمة صغيرة إلى قائمة الانتظار لتنفيذها                                                                                                                                                         |
+| [`RangeError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RangeError)                 | تمثل خطأ عندما تكون القيمة ليست في مجموعة أو نطاق القيم المسموح بها                                                                                                                                 |
+| [`ReferenceError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError)         | تمثل خطأ عند الإشارة إلى متغير غير موجود                                                                                                                                                            |
+| [`Reflect`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Reflect)                       | توفر طرقًا لعمليات JavaScript القابلة للاعتراض                                                                                                                                                      |
+| [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)                         | تمثل تعبيرًا منتظمًا، مما يسمح لك بمطابقة مجموعات من الأحرف                                                                                                                                         |
+| [`Set`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set)                               | تمثل مجموعة من القيم، حيث يمكن أن يظهر كل قيمة مرة واحدة فقط                                                                                                                                        |
+| [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval)                                               | تستدعي دالة بشكل متكرر، مع تأخير زمني ثابت بين كل استدعاء                                                                                                                                           |
+| [`setTimeout`](https://developer.mozilla.org/docs/Web/API/setTimeout)                                                 | تستدعي دالة أو تقيم تعبيرًا بعد عدد محدد من المللي ثانية                                                                                                                                            |
+| [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)   | تمثل مخزنًا ثابت الطول للبيانات الثنائية الأولية                                                                                                                                                     |
+| [`String`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)                         | تمثل سلسلة من الأحرف                                                                                                                                                                                |
+| [`structuredClone`](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)            | تنشئ نسخة عميقة من قيمة                                                                                                                                                                             |
+| [`Symbol`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol)                         | تمثل نوع بيانات فريدًا وغير قابل للتغيير يُستخدم كمفتاح لخاصية كائن                                                                                                                                 |
+| [`SyntaxError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)               | تمثل خطأ عند محاولة تفسير كود غير صالح نحويًا                                                                                                                                                       |
+| [`TypeError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypeError)                   | تمثل خطأ عندما تكون القيمة ليست من النوع المتوقع                                                                                                                                                    |
+| [`Uint8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)                 | تمثل مصفوفة مكتوبة من الأعداد الصحيحة غير الموقعة 8-بت                                                                                                                                             |
+| [`Uint8ClampedArray`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)   | تمثل مصفوفة مكتوبة من الأعداد الصحيحة غير الموقعة 8-بت مقيدة بين 0-255                                                                                                                             |
+| [`Uint32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array)               | تمثل مصفوفة مكتوبة من الأعداد الصحيحة غير الموقعة 32-بت                                                                                                                                            |
+| [`URIError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/URIError)                     | تمثل خطأ عند استخدام دالة معالجة URI العامة بطريقة خاطئة                                                                                                                                            |
+| [`URL`](https://developer.mozilla.org/docs/Web/API/URL)                                                               | تمثل كائنًا يوفر طرقًا ثابتة تُستخدم لإنشاء عناوين URL للكائنات                                                                                                                                    |
+| [`URLPattern`](https://developer.mozilla.org/docs/Web/API/URLPattern)                                                 | تمثل نمط URL                                                                                                                                                                                        |
+| [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams)                                       | تمثل مجموعة من أزواج المفتاح/القيم                                                                                                                                                                  |
+| [`WeakMap`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)                       | تمثل مجموعة من أزواج المفتاح/القيم حيث تكون المفاتيح مرجعًا ضعيفًا                                                                                                                                 |
+| [`WeakSet`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)                       | تمثل مجموعة من الكائنات حيث يمكن أن يظهر كل كائن مرة واحدة فقط                                                                                                                                      |
+| [`WebAssembly`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)               | توفر وصولاً إلى WebAssembly                                                                                                                                                                         |
+
+## حشوات (Polyfills) المخصصة لـ Next.js
+
+- [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage)
+
+## متغيرات البيئة (Environment Variables)
+
+يمكنك استخدام `process.env` للوصول إلى [متغيرات البيئة](/docs/app/building-your-application/configuring/environment-variables) لكل من `next dev` و `next build`.
+
+## واجهات برمجة التطبيقات غير المدعومة
+
+يحتوي وقت تشغيل الحافة (Edge Runtime) على بعض القيود بما في ذلك:
+
+- واجهات برمجة تطبيقات Node.js الأصلية **غير مدعومة**. على سبيل المثال، لا يمكنك القراءة أو الكتابة في نظام الملفات.
+- يمكن استخدام `node_modules` طالما أنها تنفذ وحدات ES ولا تستخدم واجهات برمجة تطبيقات Node.js الأصلية.
+- استدعاء `require` مباشرة **غير مسموح به**. استخدم وحدات ES بدلاً من ذلك.
+
+ميزات لغة JavaScript التالية معطلة، **ولن تعمل:**
+
+| واجهة برمجة التطبيق                                                                                                                             | الوصف                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- |
+| [`eval`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/eval)                                       | تقييم كود JavaScript ممثلًا كسلسلة نصية                               |
+| [`new Function(evalString)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function)               | إنشاء دالة جديدة بالكود المقدم كوسيطة                                 |
+| [`WebAssembly.compile`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compile)         | تجميع وحدة WebAssembly من مصدر مخزن مؤقت                             |
+| [`WebAssembly.instantiate`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) | تجميع وتفعيل وحدة WebAssembly من مصدر مخزن مؤقت                      |
+
+في حالات نادرة، قد يحتوي الكود الخاص بك (أو يستورد) بعض عبارات تقييم الكود الديناميكي التي _لا يمكن الوصول إليها أثناء التشغيل_ ولا يمكن إزالتها عن طريق تقليل الحجم (treeshaking).  
+يمكنك تخفيف الفحص للسماح بملفات محددة مع تكوين التصدير لمسار واجهة برمجة التطبيقات (API Route) أو البرنامج الوسيط (Middleware):
+
+```javascript
+export const config = {
+  runtime: 'edge', // لمسارات واجهة برمجة التطبيقات للحافة فقط
+  unstable_allowDynamic: [
+    // يسمح بملف واحد
+    '/lib/utilities.js',
+    // استخدم النمط العام (glob) للسماح بأي شيء في وحدة function-bind من طرف ثالث
+    '/node_modules/function-bind/**',
+  ],
+}
+```
+
+`unstable_allowDynamic` هو [نمط عام](https://github.com/micromatch/micromatch#matching-features)، أو مصفوفة من الأنماط العامة، تتجاهل تقييم الكود الديناميكي لملفات محددة. الأنماط العامة مرتبطة بمجلد جذر التطبيق الخاص بك.
+
+تحذير: إذا تم تنفيذ هذه العبارات على الحافة، _فسوف تظهر وتتسبب في خطأ أثناء التشغيل_.
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/08-next-cli.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/08-next-cli.mdx
new file mode 100644
index 00000000..273c8b99
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/08-next-cli.mdx
@@ -0,0 +1,178 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:25.406Z
+title: واجهة سطر أوامر Next.js
+description: تتيح واجهة سطر أوامر Next.js بدء وتجميع وتصدير تطبيقك. تعلم المزيد عنها هنا.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+تتيح واجهة سطر أوامر Next.js بدء وتجميع وتصدير تطبيقك.
+
+للحصول على قائمة بأوامر CLI المتاحة، قم بتنفيذ الأمر التالي داخل دليل مشروعك:
+
+```bash filename="Terminal"
+npx next -h
+```
+
+_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) يأتي مع npm 5.2+ والإصدارات الأعلى)_
+
+يجب أن يبدو الناتج كالتالي:
+
+```bash filename="Terminal"
+Usage
+  $ next <command>
+
+Available commands
+  build, start, export, dev, lint, telemetry, info
+
+Options
+  --version, -v   Version number
+  --help, -h      Displays this message
+
+For more information run a command with the --help flag
+  $ next build --help
+```
+
+يمكنك تمرير أي [وسائط node](https://nodejs.org/api/cli.html#cli_node_options_options) إلى أوامر `next`:
+
+```bash filename="Terminal"
+NODE_OPTIONS='--throw-deprecation' next
+NODE_OPTIONS='-r esm' next
+NODE_OPTIONS='--inspect' next
+```
+
+> **معلومة مفيدة**: تنفيذ `next` دون أمر يعادل تنفيذ `next dev`
+
+## التجميع (Build)
+
+`next build` ينشئ نسخة إنتاج مُحسنة من تطبيقك. يعرض الناتج معلومات عن كل مسار.
+
+- **الحجم** – عدد الأصول التي يتم تنزيلها عند التنقل إلى الصفحة من جانب العميل. حجم كل مسار يشمل فقط تبعياته.
+- **أول تحميل لـ JS** – عدد الأصول التي يتم تنزيلها عند زيارة الصفحة من الخادم. يتم عرض كمية JS المشتركة بين جميع الصفحات كمقياس منفصل.
+
+كلا هذين القيمتين **مضغوطتان باستخدام gzip**. يُشار إلى أول تحميل باللون الأخضر أو الأصفر أو الأحمر. استهدف اللون الأخضر لتطبيقات عالية الأداء.
+
+يمكنك تمكين تحليل الأداء للإنتاج لـ React باستخدام وسيط `--profile` في `next build`. هذا يتطلب [Next.js 9.5](https://nextjs.org/blog/next-9-5):
+
+```bash filename="Terminal"
+next build --profile
+```
+
+بعد ذلك، يمكنك استخدام محلل الأداء بنفس الطريقة كما في وضع التطوير.
+
+يمكنك تمكين ناتج تجميع أكثر تفصيلاً باستخدام وسيط `--debug` في `next build`. هذا يتطلب Next.js 9.5.3:
+
+```bash filename="Terminal"
+next build --debug
+```
+
+مع تمكين هذا الوسيط، سيتم عرض ناتج تجميع إضافي مثل إعادة الكتابة، إعادة التوجيه، والعناوين.
+
+## التطوير (Development)
+
+`next dev` يبدأ التطبيق في وضع التطوير مع إعادة تحميل الساخن للكود، الإبلاغ عن الأخطاء، والمزيد:
+
+سيبدأ التطبيق افتراضياً على `http://localhost:3000`. يمكن تغيير المنفذ الافتراضي باستخدام `-p`، كما يلي:
+
+```bash filename="Terminal"
+npx next dev -p 4000
+```
+
+أو باستخدام متغير البيئة `PORT`:
+
+```bash filename="Terminal"
+PORT=4000 npx next dev
+```
+
+> **معلومة مفيدة**: لا يمكن تعيين `PORT` في `.env` لأن تشغيل خادم HTTP يحدث قبل تهيئة أي كود آخر.
+
+يمكنك أيضاً تعيين اسم مضيف مختلف عن الافتراضي `0.0.0.0`، وهذا يمكن أن يكون مفيداً لجعل التطبيق متاحاً للأجهزة الأخرى على الشبكة. يمكن تغيير اسم المضيف الافتراضي باستخدام `-H`، كما يلي:
+
+```bash filename="Terminal"
+npx next dev -H 192.168.1.2
+```
+
+## الإنتاج (Production)
+
+`next start` يبدأ التطبيق في وضع الإنتاج. يجب تجميع التطبيق أولاً باستخدام [`next build`](#build).
+
+سيبدأ التطبيق افتراضياً على `http://localhost:3000`. يمكن تغيير المنفذ الافتراضي باستخدام `-p`، كما يلي:
+
+```bash filename="Terminal"
+npx next start -p 4000
+```
+
+أو باستخدام متغير البيئة `PORT`:
+
+```bash filename="Terminal"
+PORT=4000 npx next start
+```
+
+> **معلومة مفيدة**:
+>
+> - لا يمكن تعيين `PORT` في `.env` لأن تشغيل خادم HTTP يحدث قبل تهيئة أي كود آخر.
+>
+> - لا يمكن استخدام `next start` مع `output: 'standalone'` أو `output: 'export'`.
+
+### مهلة الاتصال المستمر (Keep Alive Timeout)
+
+عند نشر Next.js خلف وكيل وسيط (مثل موازن تحميل مثل AWS ELB/ALB) من المهم تكوين خادم HTTP الأساسي لـ Next مع [مهلات الاتصال المستمر](https://nodejs.org/api/http.html#http_server_keepalivetimeout) تكون _أكبر_ من مهلات الوكيل الوسيط. وإلا، بمجرد الوصول إلى مهلة الاتصال المستمر لاتصال TCP معين، سيقوم Node.js بإنهاء هذا الاتصال فوراً دون إخطار الوكيل الوسيط. هذا يؤدي إلى خطأ في الوكيل كلما حاول إعادة استخدام اتصال قام Node.js بإنهائه بالفعل.
+
+لتكوين قيم المهلة لخادم Next.js للإنتاج، قم بتمرير `--keepAliveTimeout` (بالميلي ثانية) إلى `next start`، كما يلي:
+
+```bash filename="Terminal"
+npx next start --keepAliveTimeout 70000
+```
+
+## الفحص (Lint)
+
+`next lint` يقوم بتشغيل ESLint لجميع الملفات في أدلة `pages/`، `app/`، `components/`، `lib/`، و `src/`. كما يوفر إعداداً موجهًا لتثبيت أي تبعيات مطلوبة إذا لم يكن ESLint مضبوطاً بالفعل في تطبيقك.
+
+إذا كان لديك أدلة أخرى تريد فحصها، يمكنك تحديدها باستخدام وسيط `--dir`:
+
+```bash filename="Terminal"
+next lint --dir utils
+```
+
+## القياس عن بعد (Telemetry)
+
+يجمع Next.js بيانات **مجهولة تماماً** عن الاستخدام العام.
+المشاركة في هذا البرنامج المجهول اختيارية، ويمكنك عدم المشاركة إذا كنت لا ترغب في مشاركة أي معلومات.
+
+للمزيد عن القياس عن بعد، [يرجى قراءة هذا المستند](https://nextjs.org/telemetry/).
+
+## معلومات Next (Next Info)
+
+`next info` يطبع تفاصيل ذات صلة عن النظام الحالي التي يمكن استخدامها للإبلاغ عن أخطاء Next.js.
+تشمل هذه المعلومات نظام التشغيل (المنصة/الهيكل/الإصدار)، الملفات الثنائية (Node.js، npm، Yarn، pnpm) وإصدارات حزم npm (`next`، `react`، `react-dom`).
+
+تنفيذ الأمر التالي في الدليل الجذر لمشروعك:
+
+```bash filename="Terminal"
+next info
+```
+
+سيعطيك معلومات مثل هذا المثال:
+
+```bash filename="Terminal"
+
+Operating System:
+  Platform: linux
+  Arch: x64
+  Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
+Binaries:
+  Node: 16.13.0
+  npm: 8.1.0
+  Yarn: 1.22.17
+  pnpm: 6.24.2
+Relevant packages:
+  next: 12.0.8
+  react: 17.0.2
+  react-dom: 17.0.2
+
+```
+
+يجب لصق هذه المعلومات بعد ذلك في مشكلات GitHub.
+
+لتشخيص مشكلات التثبيت، يمكنك تشغيل `next info --verbose` لطباعة معلومات إضافية عن النظام وتثبيت الحزم المتعلقة بـ next.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/02-api-reference/index.mdx b/apps/docs/content/ar/docs/13/02-app/02-api-reference/index.mdx
new file mode 100644
index 00000000..af89bf5f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/02-api-reference/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:05.715Z
+title: مرجع API
+description: مرجع API لـ Next.js لموجه التطبيق (App Router).
+---
+
+ينقسم مرجع API لـ Next.js إلى الأقسام التالية:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/02-app/index.mdx b/apps/docs/content/ar/docs/13/02-app/index.mdx
new file mode 100644
index 00000000..2f6fc554
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/02-app/index.mdx
@@ -0,0 +1,72 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:18.795Z
+title: موجه التطبيق (App Router)
+description: استخدم موجه التطبيق الجديد مع أحدث ميزات Next.js وReact، بما في ذلك التخطيطات (Layouts)، مكونات الخادم (Server Components)، Suspense، والمزيد.
+---
+
+موجه التطبيق (App Router) في Next.js هو نموذج جديد لبناء التطبيقات باستخدام أحدث ميزات React. إذا كنت معتادًا على Next.js، فستجد أن موجه التطبيق هو تطور طبيعي لموجه نظام الملفات الحالي في [موجه الصفحات (Pages Router)](/docs/pages).
+
+للتطبيقات الجديدة، **نوصي باستخدام موجه التطبيق**. بالنسبة للتطبيقات الحالية، يمكنك [تبني موجه التطبيق تدريجيًا](/docs/app/building-your-application/upgrading/app-router-migration). من الممكن أيضًا استخدام كلا الموجهين في نفس التطبيق.
+
+## الأسئلة الشائعة
+
+### كيف يمكنني الوصول إلى كائن الطلب (request object) في التخطيط؟
+
+لا يمكنك عمدًا الوصول إلى كائن الطلب الخام. ومع ذلك، يمكنك الوصول إلى [`headers`](/docs/app/api-reference/functions/headers) و [`cookies`](/docs/app/api-reference/functions/cookies) من خلال دوال الخادم فقط. يمكنك أيضًا [تعيين ملفات تعريف الارتباط (cookies)](#how-can-i-set-cookies).
+
+[التخطيطات (Layouts)](/docs/app/building-your-application/routing/pages-and-layouts#layouts) لا يتم إعادة عرضها. يمكن تخزينها مؤقتًا وإعادة استخدامها لتجنب الحسابات غير الضرورية عند التنقل بين الصفحات. من خلال منع التخطيطات من الوصول إلى الطلب الخام، يمكن لـ Next.js منع تنفيذ التعليمات البرمجية للمستخدم التي قد تكون بطيئة أو مكلفة داخل التخطيط، مما قد يؤثر سلبًا على الأداء.
+
+هذا التصميم يضمن أيضًا سلوكًا متسقًا ومتوقعًا للتخطيطات عبر الصفحات المختلفة، مما يبسط التطوير والتصحيح حيث يمكن للمطورين الاعتماد على أن التخطيطات تتصرف بنفس الطريقة بغض النظر عن الصفحة المحددة المطبقة عليها.
+
+اعتمادًا على نمط واجهة المستخدم الذي تقوم ببنائه، [المسارات المتوازية (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes) تتيح لك عرض صفحات متعددة في نفس التخطيط، وللصفحات حق الوصول إلى مقاطع المسار (route segments) وكذلك معلمات البحث في URL.
+
+### كيف يمكنني الوصول إلى URL في صفحة؟
+
+بشكل افتراضي، الصفحات هي مكونات خادم (Server Components). يمكنك الوصول إلى مقاطع المسار من خلال خاصية [`params`](/docs/app/api-reference/file-conventions/page#params-optional) ومعلمات البحث في URL من خلال خاصية [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) لصفحة معينة.
+
+إذا كنت تستخدم مكونات العميل (Client Components)، يمكنك استخدام [`usePathname`](/docs/app/api-reference/functions/use-pathname)، [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment)، و [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) للمسارات الأكثر تعقيدًا.
+
+علاوة على ذلك، اعتمادًا على نمط واجهة المستخدم الذي تقوم ببنائه، [المسارات المتوازية (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes) تتيح لك عرض صفحات متعددة في نفس التخطيط، وللصفحات حق الوصول إلى مقاطع المسار وكذلك معلمات البحث في URL.
+
+### كيف يمكنني إعادة التوجيه من مكون خادم؟
+
+يمكنك استخدام [`redirect`](/docs/app/api-reference/functions/redirect) لإعادة التوجيه من صفحة إلى عنوان URL نسبي أو مطلق. [`redirect`](/docs/app/api-reference/functions/redirect) هو إعادة توجيه مؤقتة (307)، بينما [`permanentRedirect`](/docs/app/api-reference/functions/permanentRedirect) هو إعادة توجيه دائمة (308). عند استخدام هذه الدوال أثناء بث واجهة المستخدم، ستقوم بإدراج وسم meta لإصدار إعادة التوجيه على جانب العميل.
+
+### كيف يمكنني التعامل مع المصادقة باستخدام موجه التطبيق؟
+
+فيما يلي بعض حلول المصادقة الشائعة التي تدعم موجه التطبيق:
+
+- [NextAuth.js](https://next-auth.js.org/configuration/nextjs#in-app-router)
+- [Clerk](https://clerk.com/docs/quickstarts/nextjs)
+- [Auth0](https://github.com/auth0/nextjs-auth0#app-router)
+- [Stytch](https://stytch.com/docs/example-apps/frontend/nextjs)
+- أو التعامل اليدوي مع الجلسات أو رموز JWT
+
+### كيف يمكنني تعيين ملفات تعريف الارتباط (cookies)؟
+
+يمكنك تعيين ملفات تعريف الارتباط في [الإجراءات الخادمية (Server Actions)](/docs/app/building-your-application/data-fetching/forms-and-mutations#setting-cookies) أو [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) باستخدام دالة [`cookies`](/docs/app/api-reference/functions/cookies).
+
+نظرًا لأن HTTP لا يسمح بتعيين ملفات تعريف الارتباط بعد بدء البث، لا يمكنك تعيين ملفات تعريف الارتباط مباشرة من صفحة أو تخطيط. يمكنك أيضًا تعيين ملفات تعريف الارتباط من [البرمجيات الوسيطة (Middleware)](/docs/app/building-your-application/routing/middleware#using-cookies).
+
+### كيف يمكنني بناء تطبيقات متعددة المستأجرين (multi-tenant)؟
+
+إذا كنت تبحث عن بناء تطبيق Next.js واحد يخدم عدة مستأجرين، فقد [قمنا ببناء مثال](https://vercel.com/templates/next.js/platforms-starter-kit) يوضح بنيتنا الموصى بها.
+
+### كيف يمكنني إبطال ذاكرة التخزين المؤقت لموجه التطبيق؟
+
+هناك طبقات متعددة من التخزين المؤقت في Next.js، وبالتالي، طرق متعددة لإبطال أجزاء مختلفة من الذاكرة المؤقتة. [تعرف المزيد عن التخزين المؤقت](/docs/app/building-your-application/caching).
+
+### هل هناك أي تطبيقات شاملة مفتوحة المصدر مبنية على موجه التطبيق؟
+
+نعم. يمكنك عرض [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce) أو [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit) للحصول على مثالين أكبر لاستخدام موجه التطبيق مفتوحة المصدر.
+
+## تعلم المزيد
+
+- [أساسيات التوجيه](/docs/app/building-your-application/routing)
+- [جلب البيانات، التخزين المؤقت، وإعادة التحقق](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)
+- [النماذج والتحولات](/docs/app/building-your-application/data-fetching/forms-and-mutations)
+- [التخزين المؤقت](/docs/app/building-your-application/caching)
+- [أساسيات العرض](/docs/app/building-your-application/rendering)
+- [مكونات الخادم](/docs/app/building-your-application/rendering/server-components)
+- [مكونات العميل](/docs/app/building-your-application/rendering/client-components)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/01-pages-and-layouts.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/01-pages-and-layouts.mdx
new file mode 100644
index 00000000..cc65de72
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/01-pages-and-layouts.mdx
@@ -0,0 +1,215 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:13.075Z
+title: الصفحات والتخطيطات
+description: إنشاء أول صفحة وتخطيط مشترك باستخدام موجه الصفحات (Pages Router).
+---
+
+يحتوي موجه الصفحات (Pages Router) على نظام توجيه يعتمد على نظام الملفات مبني على مفهوم الصفحات.
+
+عند إضافة ملف إلى دليل `pages`، يصبح تلقائيًا متاحًا كمسار.
+
+في Next.js، **الصفحة** هي [مكون React](https://react.dev/learn/your-first-component) يتم تصديره من ملف `.js` أو `.jsx` أو `.ts` أو `.tsx` داخل دليل `pages`. كل صفحة مرتبطة بمسار بناءً على اسم الملف.
+
+**مثال**: إذا قمت بإنشاء `pages/about.js` الذي يصدر مكون React كما يلي، سيكون متاحًا على المسار `/about`.
+
+```jsx
+export default function About() {
+  return <div>About</div>
+}
+```
+
+## مسارات الفهرس
+
+سيقوم الموجه تلقائيًا بتوجيه الملفات المسماة `index` إلى جذر الدليل.
+
+- `pages/index.js` → `/`
+- `pages/blog/index.js` → `/blog`
+
+## المسارات المتداخلة
+
+يدعم الموجه الملفات المتداخلة. إذا قمت بإنشاء هيكل مجلدات متداخل، سيتم توجيه الملفات بنفس الطريقة.
+
+- `pages/blog/first-post.js` → `/blog/first-post`
+- `pages/dashboard/settings/username.js` → `/dashboard/settings/username`
+
+## الصفحات ذات المسارات الديناميكية
+
+يدعم Next.js الصفحات ذات المسارات الديناميكية. على سبيل المثال، إذا قمت بإنشاء ملف باسم `pages/posts/[id].js`، فسيكون متاحًا على `posts/1`، `posts/2`، إلخ.
+
+> لمعرفة المزيد عن التوجيه الديناميكي، راجع [وثائق التوجيه الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes).
+
+## نمط التخطيط
+
+يسمح نموذج React بتفكيك [الصفحة](/docs/pages/building-your-application/routing/pages-and-layouts) إلى سلسلة من المكونات. العديد من هذه المكونات غالبًا ما يتم إعادة استخدامها بين الصفحات. على سبيل المثال، قد يكون لديك نفس شريط التنظيم والتذييل في كل صفحة.
+
+```jsx filename="components/layout.js"
+import Navbar from './navbar'
+import Footer from './footer'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Navbar />
+      <main>{children}</main>
+      <Footer />
+    </>
+  )
+}
+```
+
+## أمثلة
+
+### تخطيط مشترك واحد مع تطبيق مخصص
+
+إذا كان لديك تخطيط واحد لتطبيقك بالكامل، يمكنك إنشاء [تطبيق مخصص](/docs/pages/building-your-application/routing/custom-app) ولف تطبيقك بالتخطيط. نظرًا لأن مكون `<Layout />` يتم إعادة استخدامه عند تغيير الصفحات، سيتم الحفاظ على حالة المكون (مثل قيم الإدخال).
+
+```jsx filename="pages/_app.js"
+import Layout from '../components/layout'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
+```
+
+### تخطيطات لكل صفحة
+
+إذا كنت بحاجة إلى تخطيطات متعددة، يمكنك إضافة خاصية `getLayout` إلى صفحتك، مما يسمح لك بإرجاع مكون React للتخطيط. هذا يسمح لك بتعريف التخطيط على أساس كل صفحة. نظرًا لأننا نرجع دالة، يمكننا الحصول على تخطيطات متداخلة معقدة إذا رغبت في ذلك.
+
+```jsx filename="pages/index.js"
+
+import Layout from '../components/layout'
+import NestedLayout from '../components/nested-layout'
+
+export default function Page() {
+  return (
+    /** محتواك */
+  )
+}
+
+Page.getLayout = function getLayout(page) {
+  return (
+    <Layout>
+      <NestedLayout>{page}</NestedLayout>
+    </Layout>
+  )
+}
+```
+
+```jsx filename="pages/_app.js"
+export default function MyApp({ Component, pageProps }) {
+  // استخدم التخطيط المحدد على مستوى الصفحة، إذا كان متاحًا
+  const getLayout = Component.getLayout || ((page) => page)
+
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+عند التنقل بين الصفحات، نريد الحفاظ على حالة الصفحة (قيم الإدخال، موضع التمرير، إلخ.) لتجربة تطبيق صفحة واحدة (SPA).
+
+نمط التخطيط هذا يمكّن من استمرارية الحالة لأن شجرة مكونات React تظل محفوظة بين انتقالات الصفحات. مع شجرة المكونات، يمكن لـ React فهم العناصر التي تغيرت للحفاظ على الحالة.
+
+> **جيد أن تعرف**: هذه العملية تسمى [التوفيق (reconciliation)](https://react.dev/learn/preserving-and-resetting-state)، وهي كيفية فهم React للعناصر التي تغيرت.
+
+### مع TypeScript
+
+عند استخدام TypeScript، يجب أولاً إنشاء نوع جديد لصفحاتك يتضمن دالة `getLayout`. ثم يجب إنشاء نوع جديد لـ `AppProps` يتجاوز خاصية `Component` لاستخدام النوع الذي تم إنشاؤه مسبقًا.
+
+```tsx filename="pages/index.tsx" switcher
+import type { ReactElement } from 'react'
+import Layout from '../components/layout'
+import NestedLayout from '../components/nested-layout'
+import type { NextPageWithLayout } from './_app'
+
+const Page: NextPageWithLayout = () => {
+  return <p>hello world</p>
+}
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <Layout>
+      <NestedLayout>{page}</NestedLayout>
+    </Layout>
+  )
+}
+
+export default Page
+```
+
+```jsx filename="pages/index.js" switcher
+import Layout from '../components/layout'
+import NestedLayout from '../components/nested-layout'
+
+const Page = () => {
+  return <p>hello world</p>
+}
+
+Page.getLayout = function getLayout(page) {
+  return (
+    <Layout>
+      <NestedLayout>{page}</NestedLayout>
+    </Layout>
+  )
+}
+
+export default Page
+```
+
+```tsx filename="pages/_app.tsx" switcher
+import type { ReactElement, ReactNode } from 'react'
+import type { NextPage } from 'next'
+import type { AppProps } from 'next/app'
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode
+}
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout
+}
+
+export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // استخدم التخطيط المحدد على مستوى الصفحة، إذا كان متاحًا
+  const getLayout = Component.getLayout ?? ((page) => page)
+
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+export default function MyApp({ Component, pageProps }) {
+  // استخدم التخطيط المحدد على مستوى الصفحة، إذا كان متاحًا
+  const getLayout = Component.getLayout ?? ((page) => page)
+
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+### جلب البيانات
+
+داخل تخطيطك، يمكنك جلب البيانات على جانب العميل باستخدام `useEffect` أو مكتبة مثل [SWR](https://swr.vercel.app/). لأن هذا الملف ليس [صفحة](/docs/pages/building-your-application/routing/pages-and-layouts)، لا يمكنك استخدام `getStaticProps` أو `getServerSideProps` حاليًا.
+
+```jsx filename="components/layout.js"
+import useSWR from 'swr'
+import Navbar from './navbar'
+import Footer from './footer'
+
+export default function Layout({ children }) {
+  const { data, error } = useSWR('/api/navigation', fetcher)
+
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
+    <>
+      <Navbar links={data.links} />
+      <main>{children}</main>
+      <Footer />
+    </>
+  )
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx
new file mode 100644
index 00000000..e2e6b4f7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx
@@ -0,0 +1,66 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:30.098Z
+title: المسارات الديناميكية
+description: المسارات الديناميكية هي صفحات تتيح لك إضافة معلمات مخصصة إلى عناوين URL الخاصة بك. ابدأ بإنشاء مسارات ديناميكية وتعلم المزيد هنا.
+related:
+  title: الخطوات التالية
+  description: لمزيد من المعلومات حول ما يجب فعله بعد ذلك، نوصي بالأقسام التالية
+  links:
+    - pages/building-your-application/routing/linking-and-navigating
+    - pages/api-reference/functions/use-router
+---
+
+عندما لا تعرف أسماء المقاطع مسبقًا وتريد إنشاء مسارات من بيانات ديناميكية، يمكنك استخدام مقاطع ديناميكية يتم تعبئتها وقت الطلب أو [تجهيزها مسبقًا](/docs/pages/building-your-application/data-fetching/get-static-paths) وقت البناء.
+
+## الاصطلاح
+
+يمكن إنشاء مقطع ديناميكي عن طريق لف اسم ملف أو مجلد بين أقواس مربعة: `[segmentName]`. على سبيل المثال، `[id]` أو `[slug]`.
+
+يمكن الوصول إلى المقاطع الديناميكية من [`useRouter`](/docs/pages/api-reference/functions/use-router).
+
+## مثال
+
+على سبيل المثال، يمكن أن يتضمن المدون المسار التالي `pages/blog/[slug].js` حيث `[slug]` هو المقطع الديناميكي لمقالات المدونة.
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+  return <p>Post: {router.query.slug}</p>
+}
+```
+
+| المسار                  | مثال URL   | `params`        |
+| ---------------------- | ----------- | --------------- |
+| `pages/blog/[slug].js` | `/blog/a`   | `{ slug: 'a' }` |
+| `pages/blog/[slug].js` | `/blog/b`   | `{ slug: 'b' }` |
+| `pages/blog/[slug].js` | `/blog/c`   | `{ slug: 'c' }` |
+
+## مقاطع الالتقاط الشامل
+
+يمكن توسيع المقاطع الديناميكية لـ**التقاط** جميع المقاطع اللاحقة عن طريق إضافة نقاط داخل الأقواس `[...segmentName]`.
+
+على سبيل المثال، `pages/shop/[...slug].js` ستطابق `/shop/clothes`، وكذلك `/shop/clothes/tops`، `/shop/clothes/tops/t-shirts`، وهكذا.
+
+| المسار                     | مثال URL     | `params`                    |
+| ------------------------- | ------------- | --------------------------- |
+| `pages/shop/[...slug].js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `pages/shop/[...slug].js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `pages/shop/[...slug].js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
+
+## مقاطع الالتقاط الشامل الاختيارية
+
+يمكن جعل مقاطع الالتقاط الشامل **اختيارية** عن طريق تضمين المعلمة في أقواس مربعة مزدوجة: `[[...segmentName]]`.
+
+على سبيل المثال، `pages/shop/[[...slug]].js` ستطابق أيضًا `/shop`، بالإضافة إلى `/shop/clothes`، `/shop/clothes/tops`، `/shop/clothes/tops/t-shirts`.
+
+الفرق بين مقاطع **الالتقاط الشامل** و**الالتقاط الشامل الاختيارية** هو أنه مع الاختيارية، يتم أيضًا مطابقة المسار بدون المعلمة (`/shop` في المثال أعلاه).
+
+| المسار                       | مثال URL     | `params`                    |
+| --------------------------- | ------------- | --------------------------- |
+| `pages/shop/[[...slug]].js` | `/shop`       | `{}`                        |
+| `pages/shop/[[...slug]].js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `pages/shop/[[...slug]].js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `pages/shop/[[...slug]].js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/03-linking-and-navigating.mdx
new file mode 100644
index 00000000..f2abb1d1
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -0,0 +1,200 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:35.584Z
+title: الربط والتنقل
+description: تعرف على كيفية عمل التنقل في Next.js، وكيفية استخدام مكون Link وخطاف `useRouter`.
+---
+
+يسمح موجه Next.js بإجراء انتقالات بين الصفحات من جانب العميل، مشابهًا لتطبيق الصفحة الواحدة.
+
+يتم توفير مكون React يسمى `Link` لتنفيذ هذا الانتقال من جانب العميل.
+
+```jsx
+import Link from 'next/link'
+
+function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/">الصفحة الرئيسية</Link>
+      </li>
+      <li>
+        <Link href="/about">من نحن</Link>
+      </li>
+      <li>
+        <Link href="/blog/hello-world">مقال المدونة</Link>
+      </li>
+    </ul>
+  )
+}
+
+export default Home
+```
+
+يستخدم المثال أعلاه روابط متعددة. كل رابط يربط مسارًا (`href`) بصفحة معروفة:
+
+- `/` → `pages/index.js`
+- `/about` → `pages/about.js`
+- `/blog/hello-world` → `pages/blog/[slug].js`
+
+سيتم جلب أي `<Link />` في نطاق الرؤية (مبدئيًا أو عن طريق التمرير) مسبقًا افتراضيًا (بما في ذلك البيانات المقابلة) للصفحات التي تستخدم [التوليد الثابت](/docs/pages/building-your-application/data-fetching/get-static-props). يتم جلب البيانات المقابلة لطرق [العرض من جانب الخادم (SSR)](/docs/pages/building-your-application/data-fetching/get-server-side-props) _فقط عند_ النقر على `<Link />`.
+
+## الربط بمسارات ديناميكية
+
+يمكنك أيضًا استخدام الاستيفاء لإنشاء المسار، وهو مفيد لـ [شرائح المسار الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes). على سبيل المثال، لعرض قائمة بالمشاركات التي تم تمريرها إلى المكون كخاصية:
+
+```jsx
+import Link from 'next/link'
+
+function Posts({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
+            {post.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Posts
+```
+
+> يتم استخدام [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) في المثال للحفاظ على توافق المسار مع utf-8.
+
+بدلاً من ذلك، باستخدام كائن URL:
+
+```jsx
+import Link from 'next/link'
+
+function Posts({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link
+            href={{
+              pathname: '/blog/[slug]',
+              query: { slug: post.slug },
+            }}
+          >
+            {post.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Posts
+```
+
+الآن، بدلاً من استخدام الاستيفاء لإنشاء المسار، نستخدم كائن URL في `href` حيث:
+
+- `pathname` هو اسم الصفحة في دليل `pages`. `/blog/[slug]` في هذه الحالة.
+- `query` هو كائن مع الشريحة الديناميكية. `slug` في هذه الحالة.
+
+## حقن الموجه
+
+<details>
+  <summary>أمثلة</summary>
+
+- [التوجيه الديناميكي](https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing)
+
+</details>
+
+للوصول إلى [كائن الموجه (`router`)](/docs/pages/api-reference/functions/use-router#router-object) في مكون React، يمكنك استخدام [`useRouter`](/docs/pages/api-reference/functions/use-router) أو [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter).
+
+بشكل عام نوصي باستخدام [`useRouter`](/docs/pages/api-reference/functions/use-router).
+
+## التوجيه الأمرية
+
+<details>
+  <summary>أمثلة</summary>
+
+- [استخدام الموجه](https://github.com/vercel/next.js/tree/canary/examples/using-router)
+
+</details>
+
+يجب أن يكون [`next/link`](/docs/pages/api-reference/components/link) قادرًا على تغطية معظم احتياجات التوجيه الخاصة بك، ولكن يمكنك أيضًا إجراء عمليات التنقل من جانب العميل بدونه، راجع [توثيق `next/router`](/docs/pages/api-reference/functions/use-router).
+
+يوضح المثال التالي كيفية إجراء عمليات التنقل الأساسية بين الصفحات باستخدام [`useRouter`](/docs/pages/api-reference/functions/use-router):
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function ReadMore() {
+  const router = useRouter()
+
+  return (
+    <button onClick={() => router.push('/about')}>
+      انقر هنا لقراءة المزيد
+    </button>
+  )
+}
+```
+
+## التوجيه السطحي
+
+<details>
+  <summary>أمثلة</summary>
+
+- [التوجيه السطحي](https://github.com/vercel/next.js/tree/canary/examples/with-shallow-routing)
+
+</details>
+
+يسمح التوجيه السطحي بتغيير عنوان URL دون تشغيل طرق جلب البيانات مرة أخرى، وهذا يشمل [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)، و[`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)، و[`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props).
+
+ستتلقى `pathname` و `query` المحدثين عبر [كائن الموجه (`router`)](/docs/pages/api-reference/functions/use-router#router-object) (المضاف بواسطة [`useRouter`](/docs/pages/api-reference/functions/use-router) أو [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter))، دون فقدان الحالة.
+
+لتمكين التوجيه السطحي، اضبط خيار `shallow` على `true`. ضع في اعتبارك المثال التالي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+// عنوان URL الحالي هو '/'
+function Page() {
+  const router = useRouter()
+
+  useEffect(() => {
+    // دائمًا قم بعمليات التنقل بعد التصيير الأول
+    router.push('/?counter=10', undefined, { shallow: true })
+  }, [])
+
+  useEffect(() => {
+    // تغير العداد!
+  }, [router.query.counter])
+}
+
+export default Page
+```
+
+سيتم تحديث عنوان URL إلى `/?counter=10` ولن يتم استبدال الصفحة، فقط حالة المسار تتغير.
+
+يمكنك أيضًا مراقبة تغييرات عنوان URL عبر [`componentDidUpdate`](https://react.dev/reference/react/Component#componentdidupdate) كما هو موضح أدناه:
+
+```jsx
+componentDidUpdate(prevProps) {
+  const { pathname, query } = this.props.router
+  // تحقق من تغيير الخصائص لتجنب حلقة لا نهائية
+  if (query.counter !== prevProps.router.query.counter) {
+    // جلب البيانات بناءً على الاستعلام الجديد
+  }
+}
+```
+
+### محاذير
+
+يعمل التوجيه السطحي **فقط** لتغييرات عنوان URL في الصفحة الحالية. على سبيل المثال، لنفترض أن لدينا صفحة أخرى تسمى `pages/about.js`، وتقوم بتشغيل هذا:
+
+```js
+router.push('/?counter=10', '/about?counter=10', { shallow: true })
+```
+
+نظرًا لأن هذه صفحة جديدة، سيتم تفريغ الصفحة الحالية، وتحميل الصفحة الجديدة وانتظار جلب البيانات حتى لو طلبنا التوجيه السطحي.
+
+عند استخدام التوجيه السطحي مع البرمجيات الوسيطة، فلن يضمن أن الصفحة الجديدة تطابق الصفحة الحالية كما كان يحدث سابقًا بدون البرمجيات الوسيطة. هذا بسبب قدرة البرمجيات الوسيطة على إعادة الكتابة ديناميكيًا وعدم إمكانية التحقق منها من جانب العميل دون جلب بيانات يتم تخطيها مع التوجيه السطحي، لذا يجب دائمًا معاملة تغيير المسار السطحي على أنه سطحي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/04-custom-app.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/04-custom-app.mdx
new file mode 100644
index 00000000..e0b83ff3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/04-custom-app.mdx
@@ -0,0 +1,91 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:02.640Z
+title: تطبيق مخصص
+description: التحكم في تهيئة الصفحة وإضافة تخطيط ثابت لجميع الصفحات عن طريق تجاوز مكون التطبيق الافتراضي المستخدم من قبل Next.js.
+---
+
+يستخدم Next.js مكون `App` لتهيئة الصفحات. يمكنك تجاوزه والتحكم في تهيئة الصفحة وإضافة:
+
+- إنشاء تخطيط مشترك بين تغييرات الصفحات
+- حقن بيانات إضافية في الصفحات
+- [إضافة CSS عام](/docs/pages/building-your-application/styling)
+
+## الاستخدام
+
+لتجاوز `App` الافتراضي، أنشئ ملف `pages/_app` كما هو موضح أدناه:
+
+```tsx filename="pages/_app.tsx" switcher
+import type { AppProps } from 'next/app'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.jsx" switcher
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+خاصية `Component` هي `page` النشطة، لذلك عند التنقل بين المسارات، سيتغير `Component` إلى `page` الجديدة. وبالتالي، أي خاصيات ترسلها إلى `Component` سيتم استلامها بواسطة `page`.
+
+`pageProps` هو كائن يحتوي على الخصائص الأولية التي تم تحميلها مسبقًا لصفحتك بواسطة إحدى [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching)، وإلا فهو كائن فارغ.
+
+> **معلومة مفيدة**
+>
+> - إذا كان تطبيقك يعمل وقمت بإضافة `App` مخصص، ستحتاج إلى إعادة تشغيل خادم التطوير. مطلوب فقط إذا لم يكن `pages/_app.js` موجودًا من قبل.
+> - لا يدعم `App` [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching) في Next.js مثل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+
+## استخدام `getInitialProps` مع `App`
+
+استخدام [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props) في `App` سيعطل [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization) للصفحات التي لا تحتوي على [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+**لا نوصي باستخدام هذا النمط.** بدلاً من ذلك، ضع في اعتبارك [التبني التدريجي](/docs/app/building-your-application/upgrading/app-router-migration) لموجه التطبيق، والذي يسمح لك بجلب البيانات بسهولة أكبر لـ [الصفحات والتخطيطات](/docs/app/building-your-application/routing/pages-and-layouts).
+
+```tsx filename="pages/_app.tsx" switcher
+import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
+
+type AppOwnProps = { example: string }
+
+export default function MyApp({
+  Component,
+  pageProps,
+  example,
+}: AppProps & AppOwnProps) {
+  return (
+    <>
+      <p>Data: {example}</p>
+      <Component {...pageProps} />
+    </>
+  )
+}
+
+MyApp.getInitialProps = async (
+  context: AppContext
+): Promise<AppOwnProps & AppInitialProps> => {
+  const ctx = await App.getInitialProps(context)
+
+  return { ...ctx, example: 'data' }
+}
+```
+
+```jsx filename="pages/_app.jsx" switcher
+import App from 'next/app'
+
+export default function MyApp({ Component, pageProps, example }) {
+  return (
+    <>
+      <p>Data: {example}</p>
+      <Component {...pageProps} />
+    </>
+  )
+}
+
+MyApp.getInitialProps = async (context) => {
+  const ctx = await App.getInitialProps(context)
+
+  return { ...ctx, example: 'data' }
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/05-custom-document.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/05-custom-document.mdx
new file mode 100644
index 00000000..a1cccc27
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/05-custom-document.mdx
@@ -0,0 +1,149 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:09.040Z
+title: مستند مخصص
+description: توسيع ترميز المستند الافتراضي الذي يضيفه Next.js.
+---
+
+يمكن للمستند المخصص `Document` تحديث وسوم `<html>` و `<body>` المستخدمة في عرض [الصفحة](/docs/pages/building-your-application/routing/pages-and-layouts).
+
+للتجاوز عن المستند الافتراضي `Document`، قم بإنشاء ملف `pages/_document` كما هو موضح أدناه:
+
+```tsx filename="pages/_document.tsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+```jsx filename="pages/_document.jsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+> **معلومة مفيدة**
+>
+> - يتم عرض `_document` فقط على الخادم، لذا لا يمكن استخدام معالجات الأحداث مثل `onClick` في هذا الملف.
+> - مكونات `<Html>` و `<Head />` و `<Main />` و `<NextScript />` مطلوبة لعرض الصفحة بشكل صحيح.
+
+## محاذير
+
+- مكون `<Head />` المستخدم في `_document` ليس هو نفسه [`next/head`](/docs/pages/api-reference/components/head). يجب استخدام مكون `<Head />` هنا فقط لأي كود `<head>` مشترك بين جميع الصفحات. لجميع الحالات الأخرى، مثل وسوم `<title>`، نوصي باستخدام [`next/head`](/docs/pages/api-reference/components/head) في صفحاتك أو مكوناتك.
+- لن يتم تهيئة مكونات React خارج `<Main />` بواسطة المتصفح. لا تضيف منطق التطبيق هنا أو CSS مخصص (مثل `styled-jsx`). إذا كنت بحاجة إلى مكونات مشتركة في جميع صفحاتك (مثل قائمة أو شريط أدوات)، اقرأ [التخطيطات](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern) بدلاً من ذلك.
+- لا يدعم `Document` حاليًا [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching) في Next.js مثل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+
+## تخصيص `renderPage`
+
+يعد تخصيص `renderPage` متقدمًا ومطلوبًا فقط لمكتبات مثل CSS-in-JS لدعم العرض من جانب الخادم (SSR). هذا غير مطلوب لدعم `styled-jsx` المدمج.
+
+**لا نوصي باستخدام هذا النمط.** بدلاً من ذلك، ضع في اعتبارك [التبني التدريجي](/docs/app/building-your-application/upgrading/app-router-migration) لموجه التطبيق (App Router)، والذي يسمح لك بجلب البيانات بسهولة أكبر لـ [الصفحات والتخطيطات](/docs/app/building-your-application/routing/pages-and-layouts).
+
+```tsx filename="pages/_document.tsx" switcher
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+  DocumentInitialProps,
+} from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const originalRenderPage = ctx.renderPage
+
+    // تشغيل منطق عرض React بشكل متزامن
+    ctx.renderPage = () =>
+      originalRenderPage({
+        // مفيد لتفريغ شجرة React بالكامل
+        enhanceApp: (App) => App,
+        // مفيد للتفريغ على أساس كل صفحة
+        enhanceComponent: (Component) => Component,
+      })
+
+    // تشغيل `getInitialProps` الأصلية، وهي الآن تتضمن `renderPage` المخصصة
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
+```
+
+```jsx filename="pages/_document.jsx" switcher
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const originalRenderPage = ctx.renderPage
+
+    // تشغيل منطق عرض React بشكل متزامن
+    ctx.renderPage = () =>
+      originalRenderPage({
+        // مفيد لتفريغ شجرة React بالكامل
+        enhanceApp: (App) => App,
+        // مفيد للتفريغ على أساس كل صفحة
+        enhanceComponent: (Component) => Component,
+      })
+
+    // تشغيل `getInitialProps` الأصلية، وهي الآن تتضمن `renderPage` المخصصة
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
+```
+
+> **معلومة مفيدة**
+>
+> - لا يتم استدعاء `getInitialProps` في `_document` أثناء الانتقالات من جانب العميل.
+> - كائن `ctx` لـ `_document` يعادل الكائن المستلم في [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object)، مع إضافة `renderPage`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/06-custom-error.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/06-custom-error.mdx
new file mode 100644
index 00000000..ddf083a1
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/06-custom-error.mdx
@@ -0,0 +1,100 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:52.846Z
+title: أخطاء مخصصة
+description: تجاوز وتوسيع صفحة الخطأ المضمنة للتعامل مع الأخطاء المخصصة.
+---
+
+## صفحة 404
+
+قد يتم الوصول إلى صفحة 404 بشكل متكرر. عرض صفحة الخطأ من جانب الخادم (SSR) لكل زيارة يزيد من حمل خادم Next.js. هذا يمكن أن يؤدي إلى زيادة التكاليف وتجارب بطيئة.
+
+لتجنب هذه المشاكل، يوفر Next.js صفحة 404 ثابتة افتراضيًا دون الحاجة إلى إضافة أي ملفات إضافية.
+
+### تخصيص صفحة 404
+
+لإنشاء صفحة 404 مخصصة يمكنك إنشاء ملف `pages/404.js`. يتم إنشاء هذا الملف بشكل ثابت (static) أثناء عملية البناء.
+
+```jsx filename="pages/404.js"
+export default function Custom404() {
+  return <h1>404 - الصفحة غير موجودة</h1>
+}
+```
+
+> **معلومة مفيدة**: يمكنك استخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) داخل هذه الصفحة إذا كنت بحاجة إلى جلب البيانات أثناء عملية البناء.
+
+## صفحة 500
+
+عرض صفحة الخطأ من جانب الخادم (SSR) لكل زيارة يزيد من تعقيد الاستجابة للأخطاء. لمساعدة المستخدمين في الحصول على ردود للأخطاء بأسرع وقت ممكن، يوفر Next.js صفحة 500 ثابتة افتراضيًا دون الحاجة إلى إضافة أي ملفات إضافية.
+
+### تخصيص صفحة 500
+
+لتخصيص صفحة 500 يمكنك إنشاء ملف `pages/500.js`. يتم إنشاء هذا الملف بشكل ثابت (static) أثناء عملية البناء.
+
+```jsx filename="pages/500.js"
+export default function Custom500() {
+  return <h1>500 - حدث خطأ من جانب الخادم</h1>
+}
+```
+
+> **معلومة مفيدة**: يمكنك استخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) داخل هذه الصفحة إذا كنت بحاجة إلى جلب البيانات أثناء عملية البناء.
+
+### تخصيص متقدم لصفحات الأخطاء
+
+يتم التعامل مع أخطاء 500 من جانب العميل والخادم بواسطة مكون `Error`. إذا كنت ترغب في تجاوزه، قم بتعريف الملف `pages/_error.js` وأضف الكود التالي:
+
+```jsx
+function Error({ statusCode }) {
+  return (
+    <p>
+      {statusCode
+        ? `حدث خطأ ${statusCode} من جانب الخادم`
+        : 'حدث خطأ من جانب العميل'}
+    </p>
+  )
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode }
+}
+
+export default Error
+```
+
+> `pages/_error.js` يستخدم فقط في بيئة الإنتاج. في بيئة التطوير ستحصل على خطأ مع سلسلة الاستدعاءات (call stack) لمعرفة مصدر الخطأ.
+
+### إعادة استخدام صفحة الخطأ المضمنة
+
+إذا كنت ترغب في عرض صفحة الخطأ المضمنة، يمكنك ذلك عن طريق استيراد مكون `Error`:
+
+```jsx
+import Error from 'next/error'
+
+export async function getServerSideProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const errorCode = res.ok ? false : res.status
+  const json = await res.json()
+
+  return {
+    props: { errorCode, stars: json.stargazers_count },
+  }
+}
+
+export default function Page({ errorCode, stars }) {
+  if (errorCode) {
+    return <Error statusCode={errorCode} />
+  }
+
+  return <div>نجوم Next: {stars}</div>
+}
+```
+
+يقبل مكون `Error` أيضًا خاصية `title` إذا كنت ترغب في تمرير رسالة نصية مع `statusCode`.
+
+إذا كان لديك مكون `Error` مخصص، تأكد من استيراده بدلاً من ذلك. `next/error` يصدر المكون الافتراضي المستخدم من قبل Next.js.
+
+### محاذير
+
+- لا يدعم مكون `Error` حاليًا [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching) في Next.js مثل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+- `_error`، مثل `_app`، هو مسار محجوز. يستخدم `_error` لتحديد التخطيطات والسلوكيات المخصصة لصفحات الأخطاء. `/_error` سيعرض 404 عند الوصول إليه مباشرة عبر [التوجيه](/docs/pages/building-your-application/routing) أو العرض في [خادم مخصص](/docs/pages/building-your-application/configuring/custom-server).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/07-api-routes.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/07-api-routes.mdx
new file mode 100644
index 00000000..640ef7b6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/07-api-routes.mdx
@@ -0,0 +1,425 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:41.040Z
+title: مسارات API
+description: يدعم Next.js مسارات API التي تتيح لك بناء واجهة برمجة التطبيقات (API) دون مغادرة تطبيق Next.js الخاص بك. تعرف على كيفية عملها هنا.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مسارات API الأساسية](https://github.com/vercel/next.js/tree/canary/examples/api-routes)
+- [مساعدات طلبات مسارات API](https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware)
+- [مسارات API مع GraphQL](https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql)
+- [مسارات API مع REST](https://github.com/vercel/next.js/tree/canary/examples/api-routes-rest)
+- [مسارات API مع CORS](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors)
+
+</details>
+
+> **معلومة مفيدة**: إذا كنت تستخدم App Router، يمكنك استخدام [مكونات الخادم (Server Components)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) أو [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) بدلاً من مسارات API.
+
+توفر مسارات API حلاً لبناء **واجهة برمجة تطبيقات عامة (public API)** باستخدام Next.js.
+
+أي ملف داخل مجلد `pages/api` يتم تعيينه إلى `/api/*` وسيتم التعامل معه كنقطة نهاية API بدلاً من `صفحة`. هذه الملفات تعمل فقط على جانب الخادم ولا تزيد من حجم حزمة جانب العميل.
+
+على سبيل المثال، مسار API التالي يعيد استجابة JSON برمز حالة `200`:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - مسارات API [لا تحدد رؤوس CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)، مما يعني أنها تعمل فقط من **نفس المصدر (same-origin)** افتراضيًا. يمكنك تخصيص هذا السلوك عن طريق تغليف معالج الطلب بـ[مساعدات طلب CORS](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors).
+> - لا يمكن استخدام مسارات API مع [التصدير الثابت (static exports)](/docs/pages/building-your-application/deploying/static-exports). ومع ذلك، يمكن لـ[معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) في App Router ذلك.
+> - ستتأثر مسارات API بـ[إعداد `pageExtensions`](/docs/pages/api-reference/next-config-js/pageExtensions) في `next.config.js`.
+
+## المعاملات
+
+```tsx
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  // ...
+}
+```
+
+- `req`: نسخة من [http.IncomingMessage](https://nodejs.org/api/http.html#class-httpincomingmessage)، بالإضافة إلى بعض [الوسائط المدمجة مسبقًا](/docs/pages/api-reference/functions/next-server)
+- `res`: نسخة من [http.ServerResponse](https://nodejs.org/api/http.html#class-httpserverresponse)، بالإضافة إلى بعض [وظائف المساعدة](/docs/pages/api-reference/functions/next-server)
+
+## طرق HTTP
+
+للتعامل مع طرق HTTP المختلفة في مسار API، يمكنك استخدام `req.method` في معالج الطلب الخاص بك، كما يلي:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === 'POST') {
+    // معالجة طلب POST
+  } else {
+    // التعامل مع أي طريقة HTTP أخرى
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  if (req.method === 'POST') {
+    // معالجة طلب POST
+  } else {
+    // التعامل مع أي طريقة HTTP أخرى
+  }
+}
+```
+
+## مساعدات الطلب
+
+توفر مسارات API مساعدات طلب مدمجة تقوم بتحليل الطلب الوارد (`req`):
+
+- `req.cookies` - كائن يحتوي على الكوكيز المرسلة مع الطلب. القيمة الافتراضية `{}`
+- `req.query` - كائن يحتوي على [سلسلة الاستعلام (query string)](https://en.wikipedia.org/wiki/Query_string). القيمة الافتراضية `{}`
+- `req.body` - كائن يحتوي على الجسم الذي تم تحليله حسب `content-type`، أو `null` إذا لم يتم إرسال جسم
+
+### التكوين المخصص
+
+يمكن لكل مسار API تصدير كائن `config` لتغيير التكوين الافتراضي، وهو كما يلي:
+
+```js
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '1mb',
+    },
+  },
+  // يحدد المدة القصوى المسموح بها لتنفيذ هذه الوظيفة (بالثواني)
+  maxDuration: 5,
+}
+```
+
+`bodyParser` مفعل تلقائيًا. إذا كنت تريد استهلاك الجسم كـ `Stream` أو مع [`raw-body`](https://www.npmjs.com/package/raw-body)، يمكنك تعيين هذا إلى `false`.
+
+إحدى حالات الاستخدام لتعطيل `bodyParser` التلقائي هي السماح لك بالتحقق من الجسم الخام لطلب **webhook**، على سبيل المثال [من GitHub](https://docs.github.com/en/developers/webhooks-and-events/webhooks/securing-your-webhooks#validating-payloads-from-github).
+
+```js
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+}
+```
+
+`bodyParser.sizeLimit` هو الحد الأقصى للحجم المسموح به للجسم الذي تم تحليله، بأي تنسيق مدعوم من قبل [bytes](https://github.com/visionmedia/bytes.js)، كما يلي:
+
+```js
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '500kb',
+    },
+  },
+}
+```
+
+`externalResolver` هو علم صريح يخبر الخادم أن هذا المسار يتم معالجته بواسطة محلل خارجي مثل _express_ أو _connect_. تفعيل هذا الخيار يعطل التحذيرات للطلبات غير المحلولة.
+
+```js
+export const config = {
+  api: {
+    externalResolver: true,
+  },
+}
+```
+
+`responseLimit` مفعل تلقائيًا، ويظهر تحذيرًا عندما يتجاوز حجم استجابة مسارات API 4MB.
+
+إذا كنت لا تستخدم Next.js في بيئة بدون خادم (serverless)، وتفهم الآثار المترتبة على الأداء لعدم استخدام CDN أو مضيف وسائط مخصص، يمكنك تعيين هذا الحد إلى `false`.
+
+```js
+export const config = {
+  api: {
+    responseLimit: false,
+  },
+}
+```
+
+يمكن أن يأخذ `responseLimit` أيضًا عدد البايتات أو أي تنسيق سلسلة مدعوم من `bytes`، على سبيل المثال `1000`، `'500kb'` أو `'3mb'`.
+ستكون هذه القيمة هي الحد الأقصى لحجم الاستجابة قبل عرض تحذير. القيمة الافتراضية هي 4MB. (انظر أعلاه)
+
+```js
+export const config = {
+  api: {
+    responseLimit: '8mb',
+  },
+}
+```
+
+## مساعدات الاستجابة
+
+كائن [استجابة الخادم (Server Response)](https://nodejs.org/api/http.html#http_class_http_serverresponse)، (غالبًا ما يختصر بـ `res`) يتضمن مجموعة من طرق المساعدة المشابهة لـ Express.js لتحسين تجربة المطور وزيادة سرعة إنشاء نقاط نهاية API جديدة.
+
+تشمل وظائف المساعدة:
+
+- `res.status(code)` - دالة لتعيين رمز الحالة. يجب أن يكون `code` رمز حالة HTTP صالحًا
+- `res.json(body)` - إرسال استجابة JSON. يجب أن يكون `body` كائنًا قابلًا للتسلسل
+- `res.send(body)` - إرسال استجابة HTTP. يمكن أن يكون `body` `سلسلة`، `كائن` أو `Buffer`
+- `res.redirect([status,] path)` - إعادة التوجيه إلى مسار أو عنوان URL محدد. يجب أن يكون `status` رمز حالة HTTP صالحًا. إذا لم يتم تحديده، فإن `status` يكون افتراضيًا "307" "إعادة توجيه مؤقتة".
+- `res.revalidate(urlPath)` - [إعادة التحقق من صفحة عند الطلب](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) باستخدام `getStaticProps`. يجب أن يكون `urlPath` `سلسلة`.
+
+### تعيين رمز حالة الاستجابة
+
+عند إرسال استجابة إلى العميل، يمكنك تعيين رمز حالة الاستجابة.
+
+يضبط المثال التالي رمز حالة الاستجابة على `200` (`OK`) ويعيد خاصية `message` بقيمة `Hello from Next.js!` كاستجابة JSON:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+### إرسال استجابة JSON
+
+عند إرسال استجابة إلى العميل يمكنك إرسال استجابة JSON، ويجب أن يكون هذا كائنًا قابلًا للتسلسل.
+في تطبيق حقيقي، قد ترغب في إعلام العميل بحالة الطلب بناءً على نتيجة نقطة النهاية المطلوبة.
+
+يرسل المثال التالي استجابة JSON برمز الحالة `200` (`OK`) ونتيجة العملية غير المتزامنة. يتم تضمينها في كتلة try catch للتعامل مع أي أخطاء قد تحدث، مع رمز الحالة المناسب ورسالة الخطأ التي يتم التقاطها وإرسالها مرة أخرى إلى العميل:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).json({ result })
+  } catch (err) {
+    res.status(500).json({ error: 'failed to load data' })
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default async function handler(req, res) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).json({ result })
+  } catch (err) {
+    res.status(500).json({ error: 'failed to load data' })
+  }
+}
+```
+
+### إرسال استجابة HTTP
+
+يعمل إرسال استجابة HTTP بنفس الطريقة عند إرسال استجابة JSON. الفرق الوحيد هو أن جسم الاستجابة يمكن أن يكون `سلسلة`، `كائن` أو `Buffer`.
+
+يرسل المثال التالي استجابة HTTP برمز الحالة `200` (`OK`) ونتيجة العملية غير المتزامنة.
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).send({ result })
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default async function handler(req, res) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).send({ result })
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+### إعادة التوجيه إلى مسار أو عنوان URL محدد
+
+على سبيل المثال نموذج، قد ترغب في إعادة توجيه عميلك إلى مسار أو عنوان URL محدد بمجرد تقديمهم للنموذج.
+
+يعيد المثال التالي توجيه العميل إلى المسار `/` إذا تم تقديم النموذج بنجاح:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { name, message } = req.body
+
+  try {
+    await handleFormInputAsync({ name, message })
+    res.redirect(307, '/')
+  } catch (err) {
+    res.status(500).send({ error: 'Failed to fetch data' })
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default async function handler(req, res) {
+  const { name, message } = req.body
+
+  try {
+    await handleFormInputAsync({ name, message })
+    res.redirect(307, '/')
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+### إضافة أنواع TypeScript
+
+يمكنك جعل مسارات API أكثر أمانًا من الناحية النوعية عن طريق استيراد أنواع `NextApiRequest` و `NextApiResponse` من `next`، بالإضافة إلى ذلك، يمكنك أيضًا كتابة بيانات الاستجابة الخاصة بك:
+
+```ts
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+> **معلومة مفيدة**: جسم `NextApiRequest` هو `any` لأن العميل قد يتضمن أي حمولة. يجب عليك التحقق من نوع/شكل الجسم في وقت التشغيل قبل استخدامه.
+
+## مسارات API الديناميكية
+
+تدعم مسارات API [المسارات الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes)، وتتبع نفس قواعد تسمية الملفات المستخدمة لـ `pages/`.
+
+```ts filename="pages/api/post/[pid].ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { pid } = req.query
+  res.end(`Post: ${pid}`)
+}
+```
+
+```js filename="pages/api/post/[pid].js" switcher
+export default function handler(req, res) {
+  const { pid } = req.query
+  res.end(`Post: ${pid}`)
+}
+```
+
+الآن، سيستجيب الطلب إلى `/api/post/abc` بالنص: `Post: abc`.
+
+### مسارات API الشاملة
+
+يمكن توسيع مسارات API لالتقاط جميع المسارات عن طريق إضافة ثلاث نقاط (`...`) داخل الأقواس. على سبيل المثال:
+
+- `pages/api/post/[...slug].js` تطابق `/api/post/a`، ولكن أيضًا `/api/post/a/b`، `/api/post/a/b/c` وهكذا.
+
+> **معلومة مفيدة**: يمكنك استخدام أسماء أخرى غير `slug`، مثل: `[...param]`
+
+سيتم إرسال المعاملات المطابقة كمعامل استعلام (`slug` في المثال) إلى الصفحة، وسيكون دائمًا مصفوفة، لذا فإن المسار `/api/post/a` سيكون له كائن `query` التالي:
+
+```json
+{ "slug": ["a"] }
+```
+
+وفي حالة `/api/post/a/b`، وأي مسار مطابق آخر، ستتم إضافة معاملات جديدة إلى المصفوفة، كما يلي:
+
+```json
+{ "slug": ["a", "b"] }
+```
+
+على سبيل المثال:
+
+```ts filename="pages/api/post/[...slug].ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { slug } = req.query
+  res.end(`Post: ${slug.join(', ')}`)
+}
+```
+
+```js filename="pages/api/post/[...slug].js" switcher
+export default function handler(req, res) {
+  const { slug } = req.query
+  res.end(`Post: ${slug.join(', ')}`)
+}
+```
+
+الآن، سيستجيب الطلب إلى `/api/post/a/b/c` بالنص: `Post: a, b, c`.
+
+### مسارات API الشاملة الاختيارية
+
+يمكن جعل المسارات الشاملة اختيارية عن طريق تضمين المعامل في أقواس مزدوجة (`[[...slug]]`).
+
+على سبيل المثال، `pages/api/post/[[...slug]].js` ستطابق `/api/post`، `/api/post/a`، `/api/post/a/b`، وهكذا.
+
+الفرق الرئيسي بين المسارات الشاملة والاختيارية هو أن المسارات الاختيارية تطابق أيضًا المسار بدون المعامل (`/api/post` في المثال أعلاه).
+
+كائنات `query` هي كما يلي:
+
+```json
+{ } // GET `/api/post` (كائن فارغ)
+{ "slug": ["a"] } // `GET /api/post/a` (مصفوفة بعنصر واحد)
+{ "slug": ["a", "b"] } // `GET /api/post/a/b` (مصفوفة متعددة العناصر)
+```
+
+### محاذير
+
+- تأخذ مسارات API المحددة مسبقًا الأسبقية على مسارات API الديناميكية، ومسارات API الديناميكية تأخذ الأسبقية على مسارات API الشاملة. انظر إلى الأمثلة التالية:
+  - `pages/api/post/create.js` - ستطابق `/api/post/create`
+  - `pages/api/post/[pid].js` - ستطابق `/api/post/1`، `/api/post/abc`، إلخ. ولكن ليس `/api/post/create`
+  - `pages/api/post/[...slug].js` - ستطابق `/api/post/1/2`، `/api/post/a/b/c`، إلخ. ولكن ليس `/api/post/create`، `/api/post/abc`
+
+## مسارات API على الحافة (Edge)
+
+إذا كنت ترغب في استخدام مسارات API مع Edge Runtime، نوصي بتبني App Router تدريجيًا واستخدام [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) بدلاً من ذلك.
+
+توقيع دالة معالجات المسار متساوي الشكل (isomorphic)، مما يعني أنه يمكنك استخدام نفس الوظيفة لكل من Edge و Node.js runtimes.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/08-internationalization.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/08-internationalization.mdx
new file mode 100644
index 00000000..7c78dcf8
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/08-internationalization.mdx
@@ -0,0 +1,357 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:57:31.207Z
+title: التوجيه الدولي (i18n) 
+nav_title: التدويل
+description: يوفر Next.js دعمًا مدمجًا لتوجيه التدويل والكشف عن اللغة. تعرف على المزيد هنا.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [توجيه i18n](https://github.com/vercel/next.js/tree/canary/examples/i18n-routing)
+
+</details>
+
+يوفر Next.js دعمًا مدمجًا لتوجيه التدويل ([i18n](https://en.wikipedia.org/wiki/Internationalization_and_localization#Naming)) منذ الإصدار `v10.0.0`. يمكنك توفير قائمة باللغات، اللغة الافتراضية، واللغات الخاصة بالنطاقات، وسيتولى Next.js توجيه الطلبات تلقائيًا.
+
+يهدف دعم توجيه i18n حاليًا إلى تكامل مع حلول مكتبات i18n الحالية مثل [`react-intl`](https://formatjs.io/docs/getting-started/installation)، [`react-i18next`](https://react.i18next.com/)، [`lingui`](https://lingui.dev/)، [`rosetta`](https://github.com/lukeed/rosetta)، [`next-intl`](https://github.com/amannn/next-intl)، [`next-translate`](https://github.com/aralroca/next-translate)، [`next-multilingual`](https://github.com/Avansai/next-multilingual)، [`typesafe-i18n`](https://github.com/ivanhofer/typesafe-i18n)، [`tolgee`](https://tolgee.io/integrations/next)، وغيرها من خلال تبسيط المسارات وتحليل اللغة.
+
+## البدء
+
+للبدء، أضف تكوين `i18n` إلى ملف `next.config.js` الخاص بك.
+
+اللغات هي [معرفات لغة UTS](https://www.unicode.org/reports/tr35/tr35-59/tr35.html#Identifiers)، وهي تنسيق معياري لتعريف اللغات.
+
+بشكل عام، يتكون معرف اللغة من لغة، منطقة، ونص مفصولة بشرطة: `language-region-script`. المنطقة والنص اختيارية. مثال:
+
+- `en-US` - الإنجليزية كما تُستخدم في الولايات المتحدة
+- `nl-NL` - الهولندية كما تُستخدم في هولندا
+- `nl` - الهولندية، بدون منطقة محددة
+
+إذا كانت لغة المستخدم هي `nl-BE` ولم تكن مدرجة في التكوين الخاص بك، سيتم توجيههم إلى `nl` إذا كانت متاحة، أو إلى اللغة الافتراضية بخلاف ذلك.
+إذا كنت لا تخطط لدعم جميع مناطق بلد ما، فمن الجيد تضمين لغات البلد التي ستكون بمثابة احتياطي.
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    // هذه هي جميع اللغات التي تريد دعمها في
+    // تطبيقك
+    locales: ['en-US', 'fr', 'nl-NL'],
+    // هذه هي اللغة الافتراضية التي تريد استخدامها عند زيارة
+    // مسار بدون بادئة لغة مثل `/hello`
+    defaultLocale: 'en-US',
+    // هذه قائمة بنطاقات اللغة واللغة الافتراضية التي
+    // يجب أن تتعامل معها (مطلوبة فقط عند إعداد توجيه النطاق)
+    // ملاحظة: يجب تضمين النطاقات الفرعية في قيمة النطاق للمطابقة مثل "fr.example.com".
+    domains: [
+      {
+        domain: 'example.com',
+        defaultLocale: 'en-US',
+      },
+      {
+        domain: 'example.nl',
+        defaultLocale: 'nl-NL',
+      },
+      {
+        domain: 'example.fr',
+        defaultLocale: 'fr',
+        // يمكن أيضًا استخدام حقل http اختياري لاختبار
+        // نطاقات اللغة محليًا باستخدام http بدلاً من https
+        http: true,
+      },
+    ],
+  },
+}
+```
+
+## استراتيجيات اللغة
+
+هناك استراتيجيتان للتعامل مع اللغة: توجيه المسار الفرعي وتوجيه النطاق.
+
+### توجيه المسار الفرعي
+
+يضع توجيه المسار الفرعي اللغة في مسار URL.
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en-US', 'fr', 'nl-NL'],
+    defaultLocale: 'en-US',
+  },
+}
+```
+
+مع التكوين أعلاه، ستكون `en-US` و `fr` و `nl-NL` متاحة للتوجيه إليها، و `en-US` هي اللغة الافتراضية. إذا كان لديك `pages/blog.js`، ستكون عناوين URL التالية متاحة:
+
+- `/blog`
+- `/fr/blog`
+- `/nl-nl/blog`
+
+اللغة الافتراضية لا تحتوي على بادئة.
+
+### توجيه النطاق
+
+باستخدام توجيه النطاق، يمكنك تكوين اللغات ليتم تقديمها من نطاقات مختلفة:
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en-US', 'fr', 'nl-NL', 'nl-BE'],
+    defaultLocale: 'en-US',
+
+    domains: [
+      {
+        // ملاحظة: يجب تضمين النطاقات الفرعية في قيمة النطاق للمطابقة
+        // مثل www.example.com يجب استخدامها إذا كان هذا هو اسم المضيف المتوقع
+        domain: 'example.com',
+        defaultLocale: 'en-US',
+      },
+      {
+        domain: 'example.fr',
+        defaultLocale: 'fr',
+      },
+      {
+        domain: 'example.nl',
+        defaultLocale: 'nl-NL',
+        // تحديد اللغات الأخرى التي يجب إعادة توجيهها
+        // إلى هذا النطاق
+        locales: ['nl-BE'],
+      },
+    ],
+  },
+}
+```
+
+على سبيل المثال، إذا كان لديك `pages/blog.js`، ستكون عناوين URL التالية متاحة:
+
+- `example.com/blog`
+- `www.example.com/blog`
+- `example.fr/blog`
+- `example.nl/blog`
+- `example.nl/nl-BE/blog`
+
+## الكشف التلقائي عن اللغة
+
+عندما يزور المستخدم جذر التطبيق (عادة `/`)، سيحاول Next.js الكشف تلقائيًا عن اللغة المفضلة للمستخدم بناءً على رأس [`Accept-Language`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) والنطاق الحالي.
+
+إذا تم اكتشاف لغة غير اللغة الافتراضية، سيتم إعادة توجيه المستخدم إلى:
+
+- **عند استخدام توجيه المسار الفرعي:** المسار مع بادئة اللغة
+- **عند استخدام توجيه النطاق:** النطاق مع تلك اللغة المحددة كلغة افتراضية
+
+عند استخدام توجيه النطاق، إذا زار مستخدم برأس `Accept-Language` `fr;q=0.9` الموقع `example.com`، سيتم إعادة توجيهه إلى `example.fr` لأن هذا النطاق يتعامل مع اللغة `fr` افتراضيًا.
+
+عند استخدام توجيه المسار الفرعي، سيتم إعادة توجيه المستخدم إلى `/fr`.
+
+### إضافة بادئة للغة الافتراضية
+
+مع Next.js 12 و[الوسيط (Middleware)](/docs/pages/building-your-application/routing/middleware)، يمكننا إضافة بادئة للغة الافتراضية باستخدام [حل بديل](https://github.com/vercel/next.js/discussions/18419).
+
+على سبيل المثال، إليك ملف `next.config.js` مع دعم لعدد من اللغات. لاحظ أنه تمت إضافة اللغة `"default"` عن قصد.
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['default', 'en', 'de', 'fr'],
+    defaultLocale: 'default',
+    localeDetection: false,
+  },
+  trailingSlash: true,
+}
+```
+
+بعد ذلك، يمكننا استخدام [الوسيط (Middleware)](/docs/pages/building-your-application/routing/middleware) لإضافة قواعد توجيه مخصصة:
+
+```ts filename="middleware.ts"
+import { NextRequest, NextResponse } from 'next/server'
+
+const PUBLIC_FILE = /\.(.*)$/
+
+export async function middleware(req: NextRequest) {
+  if (
+    req.nextUrl.pathname.startsWith('/_next') ||
+    req.nextUrl.pathname.includes('/api/') ||
+    PUBLIC_FILE.test(req.nextUrl.pathname)
+  ) {
+    return
+  }
+
+  if (req.nextUrl.locale === 'default') {
+    const locale = req.cookies.get('NEXT_LOCALE')?.value || 'en'
+
+    return NextResponse.redirect(
+      new URL(`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url)
+    )
+  }
+}
+```
+
+يتخطى هذا [الوسيط (Middleware)](/docs/pages/building-your-application/routing/middleware) إضافة البادئة الافتراضية إلى [مسارات API](/docs/pages/building-your-application/routing/api-routes) والملفات [العامة](/docs/pages/building-your-application/optimizing/static-assets) مثل الخطوط أو الصور. إذا تم تقديم طلب للغة الافتراضية، نعيد توجيهه إلى البادئة `/en`.
+
+### تعطيل الكشف التلقائي عن اللغة
+
+يمكن تعطيل الكشف التلقائي عن اللغة باستخدام:
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    localeDetection: false,
+  },
+}
+```
+
+عند تعيين `localeDetection` إلى `false`، لن يقوم Next.js بإعادة التوجيه تلقائيًا بناءً على اللغة المفضلة للمستخدم وسيوفر فقط معلومات اللغة المكتشفة من نطاق اللغة أو مسار اللغة كما هو موضح أعلاه.
+
+## الوصول إلى معلومات اللغة
+
+يمكنك الوصول إلى معلومات اللغة عبر موجه Next.js. على سبيل المثال، باستخدام خطاف [`useRouter()`](/docs/pages/api-reference/functions/use-router)، تكون الخصائص التالية متاحة:
+
+- `locale` تحتوي على اللغة النشطة حاليًا.
+- `locales` تحتوي على جميع اللغات المكونة.
+- `defaultLocale` تحتوي على اللغة الافتراضية المكونة.
+
+عند [التصيير المسبق](/docs/pages/building-your-application/rendering/static-site-generation) للصفحات باستخدام `getStaticProps` أو `getServerSideProps`، يتم توفير معلومات اللغة في [السياق](/docs/pages/building-your-application/data-fetching/get-static-props) المقدم للدالة.
+
+عند الاستفادة من `getStaticPaths`، يتم توفير اللغات المكونة في معلمة السياق للدالة تحت `locales` واللغة الافتراضية المكونة تحت `defaultLocale`.
+
+## الانتقال بين اللغات
+
+يمكنك استخدام `next/link` أو `next/router` للانتقال بين اللغات.
+
+بالنسبة لـ `next/link`، يمكن توفير خاصية `locale` للانتقال إلى لغة مختلفة من اللغة النشطة حاليًا. إذا لم يتم توفير خاصية `locale`، سيتم استخدام اللغة النشطة `locale` أثناء الانتقالات على جانب العميل. على سبيل المثال:
+
+```jsx
+import Link from 'next/link'
+
+export default function IndexPage(props) {
+  return (
+    <Link href="/another" locale="fr">
+      إلى /fr/another
+    </Link>
+  )
+}
+```
+
+عند استخدام طرق `next/router` مباشرة، يمكنك تحديد `locale` التي يجب استخدامها عبر خيارات الانتقال. على سبيل المثال:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function IndexPage(props) {
+  const router = useRouter()
+
+  return (
+    <div
+      onClick={() => {
+        router.push('/another', '/another', { locale: 'fr' })
+      }}
+    >
+      إلى /fr/another
+    </div>
+  )
+}
+```
+
+لاحظ أنه للتعامل مع تبديل اللغة فقط مع الحفاظ على جميع معلومات التوجيه مثل قيم استعلام [المسار الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes) أو قيم استعلام href المخفية، يمكنك توفير معلمة `href` ككائن:
+
+```jsx
+import { useRouter } from 'next/router'
+const router = useRouter()
+const { pathname, asPath, query } = router
+// تغيير اللغة فقط مع الحفاظ على جميع معلومات المسار الأخرى بما في ذلك استعلام href
+router.push({ pathname, query }, asPath, { locale: nextLocale })
+```
+
+راجع [هنا](/docs/pages/api-reference/functions/use-router#with-url-object) لمزيد من المعلومات حول هيكل الكائن لـ `router.push`.
+
+إذا كان لديك `href` يتضمن بالفعل اللغة، يمكنك إلغاء التعامل التلقائي مع بادئة اللغة:
+
+```jsx
+import Link from 'next/link'
+
+export default function IndexPage(props) {
+  return (
+    <Link href="/fr/another" locale={false}>
+      إلى /fr/another
+    </Link>
+  )
+}
+```
+
+## الاستفادة من ملف تعريف الارتباط `NEXT_LOCALE`
+
+يدعم Next.js تجاوز رأس accept-language باستخدام ملف تعريف الارتباط `NEXT_LOCALE=the-locale`. يمكن تعيين هذا الملف باستخدام مبدل اللغة ثم عندما يعود المستخدم إلى الموقع، سيستفيد من اللغة المحددة في الملف عند إعادة التوجيه من `/` إلى موقع اللغة الصحيح.
+
+على سبيل المثال، إذا فضل المستخدم اللغة `fr` في رأس accept-language الخاصة به ولكن تم تعيين ملف تعريف الارتباط `NEXT_LOCALE=en`، عند زيارة `/`، سيتم توجيه المستخدم إلى موقع اللغة `en` حتى يتم إزالة الملف أو انتهاء صلاحيته.
+
+## تحسين محركات البحث
+
+نظرًا لأن Next.js يعرف اللغة التي يزورها المستخدم، سيتم إضافة سمة `lang` تلقائيًا إلى علامة `<html>`.
+
+لا يعرف Next.js عن متغيرات الصفحة، لذا فإن الأمر يعود إليك لإضافة علامات meta `hreflang` باستخدام [`next/head`](/docs/pages/api-reference/components/head). يمكنك معرفة المزيد عن `hreflang` في [توثيق Google Webmasters](https://support.google.com/webmasters/answer/189077).
+
+## كيف يعمل هذا مع التوليد الثابت؟
+
+> لاحظ أن التوجيه الدولي لا يتكامل مع [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports) لأنه لا يستفيد من طبقة توجيه Next.js. يتم دعم تطبيقات Next.js الهجينة التي لا تستخدم `output: 'export'` بالكامل.
+
+### المسارات الديناميكية وصفحات `getStaticProps`
+
+بالنسبة للصفحات التي تستخدم `getStaticProps` مع [المسارات الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes)، يجب إرجاع جميع متغيرات اللغة للصفحة المراد تصييرها مسبقًا من [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths). إلى جانب كائن `params` المرتجع لـ `paths`، يمكنك أيضًا إرجاع حقل `locale` يحدد اللغة التي تريد تصييرها. على سبيل المثال:
+
+```jsx filename="pages/blog/[slug].js"
+export const getStaticPaths = ({ locales }) => {
+  return {
+    paths: [
+      // إذا لم يتم توفير `locale`، سيتم توليد اللغة الافتراضية فقط
+      { params: { slug: 'post-1' }, locale: 'en-US' },
+      { params: { slug: 'post-1' }, locale: 'fr' },
+    ],
+    fallback: true,
+  }
+}
+```
+
+بالنسبة لصفحات [التوليد الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization) وغير الديناميكية `getStaticProps`، **سيتم توليد نسخة من الصفحة لكل لغة**. هذا مهم للنظر فيه لأنه يمكن أن يزيد من أوقات البناء اعتمادًا على عدد اللغات المكونة داخل `getStaticProps`.
+
+على سبيل المثال، إذا كان لديك 50 لغة مكونة مع 10 صفحات غير ديناميكية تستخدم `getStaticProps`، فهذا يعني أن `getStaticProps` سيتم استدعاؤه 500 مرة. سيتم توليد 50 نسخة من الصفحات الـ 10 أثناء كل بناء.
+
+لتقليل وقت بناء الصفحات الديناميكية مع `getStaticProps`، استخدم [وضع `fallback`](/docs/pages/api-reference/functions/get-static-paths#fallback-true). هذا يسمح لك بإرجاع المسارات واللغات الأكثر شيوعًا فقط من `getStaticPaths` للتصيير المسبق أثناء البناء. ثم سيقوم Next.js ببناء الصفحات المتبقية أثناء التشغيل عند طلبها.
+
+### صفحات التوليد الثابت التلقائي
+
+بالنسبة للصفحات التي يتم [توليدها ثابتًا تلقائيًا](/docs/pages/building-your-application/rendering/automatic-static-optimization)، سيتم توليد نسخة من الصفحة لكل لغة.
+
+### صفحات `getStaticProps` غير الديناميكية
+
+بالنسبة لصفحات `getStaticProps` غير الديناميكية، يتم توليد نسخة لكل لغة كما هو مذكور أعلاه. يتم استدعاء `getStaticProps` مع كل `locale` يتم تصييره. إذا كنت ترغب في استبعاد لغة معينة من التصيير المسبق، يمكنك إرجاع `notFound: true` من `getStaticProps` ولن يتم توليد هذا المتغير من الصفحة.
+
+```js
+export async function getStaticProps({ locale }) {
+  // استدعاء نقطة نهاية API خارجية للحصول على المشاركات.
+  // يمكنك استخدام أي مكتبة لجلب البيانات
+  const res = await fetch(`https://.../posts?locale=${locale}`)
+  const posts = await res.json()
+
+  if (posts.length === 0) {
+    return {
+      notFound: true,
+    }
+  }
+
+  // بإرجاع { props: posts }، سيستلم مكون المدونة
+  // `posts` كخاصية أثناء وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+## حدود تكوين i18n
+
+- `locales`: 100 لغة إجمالية
+- `domains`: 100 عنصر نطاق لغة إجمالي
+
+> **ملاحظة جيدة**: تمت إضافة هذه الحدود في البداية لمنع [مشكلات الأداء المحتملة أثناء وقت البناء](#dynamic-routes-and-getstaticprops-pages). يمكنك تجاوز هذه الحدود باستخدام توجيه مخصص باستخدام [الوسيط (Middleware)](/docs/pages/building-your-application/routing/middleware) في Next.js 12.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/09-authenticating.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/09-authenticating.mdx
new file mode 100644
index 00000000..deb5c998
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/09-authenticating.mdx
@@ -0,0 +1,143 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:15.635Z
+title: المصادقة
+description: تعلم عن أنماط المصادقة في تطبيقات Next.js واستكشف بعض الأمثلة.
+---
+
+المصادقة تحقق من هوية المستخدم، بينما التحكم في الصلاحيات يحدد ما يمكن للمستخدم الوصول إليه. يدعم Next.js أنماطًا متعددة للمصادقة، كل منها مصمم لحالات استخدام مختلفة. هذه الصفحة ستغطي كل حالة حتى تتمكن من الاختيار بناءً على متطلباتك.
+
+## أنماط المصادقة
+
+الخطوة الأولى لتحديد نمط المصادقة الذي تحتاجه هي فهم [إستراتيجية جلب البيانات](/docs/pages/building-your-application/data-fetching) التي تريدها. ثم يمكننا تحديد موفري المصادقة الذين يدعمون هذه الإستراتيجية. هناك نمطان رئيسيان:
+
+- استخدام [التوليد الثابت](/docs/pages/building-your-application/rendering/static-site-generation) لعرض حالة تحميل من الخادم، ثم جلب بيانات المستخدم من جانب العميل.
+- جلب بيانات المستخدم [من جانب الخادم](/docs/pages/building-your-application/rendering/server-side-rendering) لتجنب ظهور محتوى غير مصادق عليه.
+
+### مصادقة الصفحات المولدة ثابتًا
+
+يحدد Next.js تلقائيًا أن الصفحة ثابتة إذا لم تكن هناك متطلبات بيانات حظرية. هذا يعني عدم وجود [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) أو `getInitialProps` في الصفحة. بدلاً من ذلك، يمكن لصفحتك عرض حالة تحميل من الخادم، ثم جلب المستخدم من جانب العميل.
+
+إحدى مزايا هذا النمط هي أنه يسمح بعرض الصفحات من شبكة CDN عالمية وتحميلها مسبقًا باستخدام [`next/link`](/docs/pages/api-reference/components/link). عمليًا، هذا يؤدي إلى وقت تفاعل أسرع ([Time to Interactive](https://web.dev/interactive/)).
+
+لننظر إلى مثال لصفحة الملف الشخصي. سيتم عرض هيكل تحميل في البداية. بمجرد انتهاء طلب المستخدم، سيتم عرض اسم المستخدم:
+
+```jsx filename="pages/profile.js"
+import useUser from '../lib/useUser'
+import Layout from '../components/Layout'
+
+const Profile = () => {
+  // جلب المستخدم من جانب العميل
+  const { user } = useUser({ redirectTo: '/login' })
+
+  // عرض حالة التحميل من الخادم
+  if (!user || user.isLoggedIn === false) {
+    return <Layout>جار التحميل...</Layout>
+  }
+
+  // بمجرد انتهاء طلب المستخدم، عرض المستخدم
+  return (
+    <Layout>
+      <h1>ملفك الشخصي</h1>
+      <pre>{JSON.stringify(user, null, 2)}</pre>
+    </Layout>
+  )
+}
+
+export default Profile
+```
+
+يمكنك مشاهدة [هذا المثال في العمل](https://iron-session-example.vercel.app/). تحقق من مثال [`with-iron-session`](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session) لترى كيف يعمل.
+
+### مصادقة الصفحات المعروضة من الخادم
+
+إذا قمت بتصدير دالة `async` تسمى [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) من صفحة، فسوف يقوم Next.js بعرض هذه الصفحة مسبقًا في كل طلب باستخدام البيانات التي تُرجعها `getServerSideProps`.
+
+```jsx
+export async function getServerSideProps(context) {
+  return {
+    props: {}, // سيتم تمريرها إلى مكون الصفحة كخصائص
+  }
+}
+```
+
+لنحول مثال الملف الشخصي لاستخدام [العرض من جانب الخادم](/docs/pages/building-your-application/rendering/server-side-rendering). إذا كانت هناك جلسة، قم بإرجاع `user` كخاصية لمكون `Profile` في الصفحة. لاحظ عدم وجود هيكل تحميل في [هذا المثال](https://iron-session-example.vercel.app/).
+
+```jsx filename="pages/profile.js"
+import withSession from '../lib/session'
+import Layout from '../components/Layout'
+
+export const getServerSideProps = withSession(async function ({ req, res }) {
+  const { user } = req.session
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: { user },
+  }
+})
+
+const Profile = ({ user }) => {
+  // عرض المستخدم. لا حاجة لحالة تحميل
+  return (
+    <Layout>
+      <h1>ملفك الشخصي</h1>
+      <pre>{JSON.stringify(user, null, 2)}</pre>
+    </Layout>
+  )
+}
+
+export default Profile
+```
+
+ميزة هذا النمط هي منع ظهور محتوى غير مصادق عليه قبل التوجيه. من المهم ملاحظة أن جلب بيانات المستخدم في `getServerSideProps` سوف يحجب العرض حتى يتم حل الطلب إلى موفر المصادقة الخاص بك. لمنع إنشاء عنق زجاجة وزيادة وقت أول بايت ([Time to First Byte](https://web.dev/time-to-first-byte/))، يجب أن تتأكد من أن البحث عن المصادقة سريع. وإلا، فكر في [التوليد الثابت](#authenticating-statically-generated-pages).
+
+## موفرو المصادقة
+
+بعد مناقشة أنماط المصادقة، دعونا ننظر إلى موفري مصادقة محددين ونستكشف كيفية استخدامهم مع Next.js.
+
+### استخدم قاعدة بياناتك الخاصة
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [with-iron-session](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session)
+- [next-auth-example](https://github.com/nextauthjs/next-auth-example)
+
+</details>
+
+إذا كان لديك قاعدة بيانات موجودة تحتوي على بيانات المستخدمين، فمن المحتمل أنك ترغب في استخدام حل مفتوح المصدر غير مرتبط بموفر محدد.
+
+- إذا كنت تريد أداة جلسة منخفضة المستوى، مشفرة، وبدون حالة، استخدم [`iron-session`](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session).
+- إذا كنت تريد نظام مصادقة كامل الميزات مع موفرين مدمجين (Google، Facebook، GitHub...)، JWT، JWE، البريد الإلكتروني/كلمة المرور، روابط سحرية وغيرها... استخدم [`next-auth`](https://github.com/nextauthjs/next-auth-example).
+
+كلا هاتين المكتبتين تدعمان أيًا من نمطي المصادقة. إذا كنت مهتمًا بـ [Passport](http://www.passportjs.org/)، فلدينا أيضًا أمثلة له باستخدام ملفات تعريف الارتباط الآمنة والمشفرة:
+
+- [with-passport](https://github.com/vercel/next.js/tree/canary/examples/with-passport)
+- [with-passport-and-next-connect](https://github.com/vercel/next.js/tree/canary/examples/with-passport-and-next-connect)
+
+### موفرو مصادقة آخرون
+
+لمشاهدة أمثلة مع موفري مصادقة آخرين، تحقق من [مجلد الأمثلة](https://github.com/vercel/next.js/tree/canary/examples).
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [Auth0](https://github.com/vercel/next.js/tree/canary/examples/auth0)
+- [Clerk](https://github.com/vercel/next.js/tree/canary/examples/with-clerk)
+- [Firebase](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication)
+- [Magic](https://github.com/vercel/next.js/tree/canary/examples/with-magic)
+- [Nhost](https://github.com/vercel/next.js/tree/canary/examples/with-nhost-auth-realtime-graphql)
+- [Ory](https://github.com/vercel/examples/tree/main/solutions/auth-with-ory)
+- [Supabase](https://github.com/vercel/next.js/tree/canary/examples/with-supabase)
+- [Supertokens](https://github.com/vercel/next.js/tree/canary/examples/with-supertokens)
+- [Userbase](https://github.com/vercel/next.js/tree/canary/examples/with-userbase)
+
+</details>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/10-middleware.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/10-middleware.mdx
new file mode 100644
index 00000000..6b647f14
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/10-middleware.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:09.274Z
+title: البرمجية الوسيطة (Middleware)
+description: تعلم كيفية استخدام البرمجية الوسيطة لتشغيل الكود قبل اكتمال الطلب.
+source: app/building-your-application/routing/middleware
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/index.mdx
new file mode 100644
index 00000000..61326c32
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/01-routing/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:08.410Z
+title: التوجيه (Routing)
+description: تعلم أساسيات التوجيه لتطبيقات الواجهة الأمامية باستخدام جهاز التوجيه الخاص بالصفحات (Pages Router).
+---
+
+يحتوي جهاز التوجيه الخاص بالصفحات (Pages Router) على نظام توجيه يعتمد على نظام الملفات ويقوم على مفاهيم الصفحات. عند إضافة ملف إلى دليل `pages` يصبح تلقائيًا متاحًا كمسار. تعلم المزيد عن التوجيه في جهاز التوجيه الخاص بالصفحات:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/01-server-side-rendering.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/01-server-side-rendering.mdx
new file mode 100644
index 00000000..8786b972
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/01-server-side-rendering.mdx
@@ -0,0 +1,34 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:01.307Z
+title: العرض من جانب الخادم (SSR)
+description: استخدم العرض من جانب الخادم (SSR) لتقديم الصفحات عند كل طلب.
+---
+
+> يُشار إليه أيضًا باسم "SSR" أو "التقديم الديناميكي (Dynamic Rendering)".
+
+إذا كانت الصفحة تستخدم **العرض من جانب الخادم (SSR)**، فإن HTML الخاص بالصفحة يتم إنشاؤه عند **كل طلب**.
+
+لاستخدام العرض من جانب الخادم (SSR) لصفحة ما، تحتاج إلى `تصدير` دالة `غير متزامنة (async)` تسمى `getServerSideProps`. سيتم استدعاء هذه الدالة من قبل الخادم عند كل طلب.
+
+على سبيل المثال، لنفترض أن صفحتك تحتاج إلى تقديم مسبق لبيانات يتم تحديثها بشكل متكرر (يتم جلبها من واجهة برمجة تطبيقات خارجية). يمكنك كتابة `getServerSideProps` التي تجلب هذه البيانات وتمريرها إلى `الصفحة` كما يلي:
+
+```jsx
+export default function Page({ data }) {
+  // عرض البيانات...
+}
+
+// يتم استدعاء هذه الدالة عند كل طلب
+export async function getServerSideProps() {
+  // جلب البيانات من واجهة برمجة تطبيقات خارجية
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  // تمرير البيانات إلى الصفحة عبر الخصائص (props)
+  return { props: { data } }
+}
+```
+
+كما ترى، فإن `getServerSideProps` تشبه `getStaticProps`، ولكن الفرق هو أن `getServerSideProps` تعمل عند كل طلب بدلاً من وقت البناء.
+
+لمعرفة المزيد حول كيفية عمل `getServerSideProps`، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/get-server-side-props).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/02-static-site-generation.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/02-static-site-generation.mdx
new file mode 100644
index 00000000..4fd63ab5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/02-static-site-generation.mdx
@@ -0,0 +1,176 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:15.319Z
+title: توليد المواقع الثابتة (SSG)
+description: استخدام توليد المواقع الثابتة (SSG) لتقديم الصفحات مسبقًا أثناء وقت البناء.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مثال WordPress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress)([عرض تجريبي](https://next-blog-wordpress.vercel.app))
+- [بداية مدونة باستخدام ملفات markdown](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) ([عرض تجريبي](https://next-blog-starter.vercel.app/))
+- [مثال DatoCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([عرض تجريبي](https://next-blog-datocms.vercel.app/))
+- [مثال TakeShape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([عرض تجريبي](https://next-blog-takeshape.vercel.app/))
+- [مثال Sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([عرض تجريبي](https://next-blog-sanity.vercel.app/))
+- [مثال Prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([عرض تجريبي](https://next-blog-prismic.vercel.app/))
+- [مثال Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([عرض تجريبي](https://next-blog-contentful.vercel.app/))
+- [مثال Strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([عرض تجريبي](https://next-blog-strapi.vercel.app/))
+- [مثال Prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([عرض تجريبي](https://next-blog-prepr.vercel.app/))
+- [مثال Agility CMS](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([عرض تجريبي](https://next-blog-agilitycms.vercel.app/))
+- [مثال Cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([عرض تجريبي](https://next-blog-cosmic.vercel.app/))
+- [مثال ButterCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([عرض تجريبي](https://next-blog-buttercms.vercel.app/))
+- [مثال Storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([عرض تجريبي](https://next-blog-storyblok.vercel.app/))
+- [مثال GraphCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([عرض تجريبي](https://next-blog-graphcms.vercel.app/))
+- [مثال Kontent](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([عرض تجريبي](https://next-blog-kontent.vercel.app/))
+- [مثال Builder.io](https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io) ([عرض تجريبي](https://cms-builder-io.vercel.app/))
+- [مثال TinaCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-tina) ([عرض تجريبي](https://cms-tina-example.vercel.app/))
+- [Static Tweet (عرض تجريبي)](https://static-tweet.vercel.app/)
+- [مثال Enterspeed](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([عرض تجريبي](https://next-blog-demo.enterspeed.com/))
+
+</details>
+
+إذا كانت الصفحة تستخدم **التوليد الثابت**، فإن HTML للصفحة يتم توليده أثناء **وقت البناء**. هذا يعني في بيئة الإنتاج، يتم إنشاء HTML للصفحة عند تشغيل `next build`. سيتم بعد ذلك إعادة استخدام هذا HTML في كل طلب. يمكن تخزينه مؤقتًا بواسطة CDN.
+
+في Next.js، يمكنك توليد الصفحات ثابتًا **مع أو بدون بيانات**. دعونا نلقي نظرة على كل حالة.
+
+### التوليد الثابت بدون بيانات
+
+بشكل افتراضي، يقوم Next.js بتقديم الصفحات مسبقًا باستخدام التوليد الثابت دون جلب البيانات. إليك مثال:
+
+```jsx
+function About() {
+  return <div>About</div>
+}
+
+export default About
+```
+
+لاحظ أن هذه الصفحة لا تحتاج إلى جلب أي بيانات خارجية ليتم تقديمها مسبقًا. في مثل هذه الحالات، ينشئ Next.js ملف HTML واحد لكل صفحة أثناء وقت البناء.
+
+### التوليد الثابت مع البيانات
+
+بعض الصفحات تتطلب جلب بيانات خارجية لتقديمها مسبقًا. هناك سيناريوهان، وقد ينطبق أحدهما أو كلاهما. في كل حالة، يمكنك استخدام هذه الوظائف التي يوفرها Next.js:
+
+1. إذا كان **محتوى** صفحتك يعتمد على بيانات خارجية: استخدم `getStaticProps`.
+2. إذا كانت **مسارات** صفحتك تعتمد على بيانات خارجية: استخدم `getStaticPaths` (عادة بالإضافة إلى `getStaticProps`).
+
+#### السيناريو 1: محتوى الصفحة يعتمد على بيانات خارجية
+
+**مثال**: قد تحتاج صفحة المدونة الخاصة بك إلى جلب قائمة منشورات المدونة من نظام إدارة المحتوى (CMS).
+
+```jsx
+// TODO: يجب جلب `posts` (عن طريق استدعاء نقطة نهاية API)
+//       قبل أن يمكن تقديم هذه الصفحة مسبقًا.
+export default function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+لجلب هذه البيانات عند التقديم المسبق، يسمح لك Next.js بتصدير دالة غير متزامنة تسمى `getStaticProps` من نفس الملف. يتم استدعاء هذه الدالة في وقت البناء وتتيح لك تمرير البيانات التي تم جلبها إلى `props` الصفحة عند التقديم المسبق.
+
+```jsx
+export default function Blog({ posts }) {
+  // عرض المنشورات...
+}
+
+// يتم استدعاء هذه الدالة في وقت البناء
+export async function getStaticProps() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // عن طريق إرجاع { props: { posts } }، سيستقبل مكون Blog
+  // `posts` كخاصية في وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+لمعرفة المزيد حول كيفية عمل `getStaticProps`، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+#### السيناريو 2: مسارات الصفحة تعتمد على بيانات خارجية
+
+يسمح لك Next.js بإنشاء صفحات ذات **مسارات ديناميكية**. على سبيل المثال، يمكنك إنشاء ملف يسمى `pages/posts/[id].js` لعرض منشور مدونة واحد بناءً على `id`. هذا سيسمح لك بعرض منشور المدونة بـ `id: 1` عند الوصول إلى `posts/1`.
+
+> لمعرفة المزيد عن التوجيه الديناميكي، راجع [توثيق التوجيه الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes).
+
+ومع ذلك، قد يعتمد `id` الذي تريد تقديمه مسبقًا في وقت البناء على بيانات خارجية.
+
+**مثال**: لنفترض أنك أضفت منشور مدونة واحد فقط (بـ `id: 1`) إلى قاعدة البيانات. في هذه الحالة، سترغب فقط في تقديم `posts/1` مسبقًا في وقت البناء.
+
+لاحقًا، قد تضيف المنشور الثاني بـ `id: 2`. عندها سترغب في تقديم `posts/2` أيضًا.
+
+لذا فإن **مسارات** الصفحة التي يتم تقديمها مسبقًا تعتمد على بيانات خارجية. للتعامل مع هذا، يسمح لك Next.js بتصدير دالة غير متزامنة تسمى `getStaticPaths` من صفحة ديناميكية (`pages/posts/[id].js` في هذه الحالة). يتم استدعاء هذه الدالة في وقت البناء وتتيح لك تحديد المسارات التي تريد تقديمها مسبقًا.
+
+```jsx
+// يتم استدعاء هذه الدالة في وقت البناء
+export async function getStaticPaths() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد تقديمها مسبقًا بناءً على المنشورات
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // سنقوم بتقديم هذه المسارات مسبقًا فقط في وقت البناء.
+  // { fallback: false } يعني أن المسارات الأخرى يجب أن تعرض 404.
+  return { paths, fallback: false }
+}
+```
+
+أيضًا في `pages/posts/[id].js`، تحتاج إلى تصدير `getStaticProps` حتى تتمكن من جلب البيانات حول المنشور بهذا `id` واستخدامها لتقديم الصفحة مسبقًا:
+
+```jsx
+export default function Post({ post }) {
+  // عرض المنشور...
+}
+
+export async function getStaticPaths() {
+  // ...
+}
+
+// يتم استدعاء هذه الدالة أيضًا في وقت البناء
+export async function getStaticProps({ params }) {
+  // params يحتوي على `id` المنشور.
+  // إذا كان المسار مثل /posts/1، فإن params.id هو 1
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  // تمرير بيانات المنشور إلى الصفحة عبر الخاصية props
+  return { props: { post } }
+}
+```
+
+لمعرفة المزيد حول كيفية عمل `getStaticPaths`، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/get-static-paths).
+
+### متى يجب استخدام التوليد الثابت؟
+
+نوصي باستخدام **التوليد الثابت** (مع أو بدون بيانات) كلما أمكن ذلك لأن صفحتك يمكن بناؤها مرة واحدة وتقديمها بواسطة CDN، مما يجعلها أسرع بكثير من جعل الخادم يقوم بعرض الصفحة في كل طلب.
+
+يمكنك استخدام التوليد الثابت للعديد من أنواع الصفحات، بما في ذلك:
+
+- صفحات التسويق
+- منشورات المدونات والمحافظ
+- قوائم منتجات التجارة الإلكترونية
+- المساعدة والوثائق
+
+يجب أن تسأل نفسك: "هل يمكنني تقديم هذه الصفحة مسبقًا **قبل** طلب المستخدم؟" إذا كانت الإجابة نعم، فيجب عليك اختيار التوليد الثابت.
+
+من ناحية أخرى، فإن التوليد الثابت **ليس** فكرة جيدة إذا لم تتمكن من تقديم الصفحة مسبقًا قبل طلب المستخدم. ربما تعرض صفحتك بيانات يتم تحديثها بشكل متكرر، ويتغير محتوى الصفحة في كل طلب.
+
+في مثل هذه الحالات، يمكنك القيام بأحد الإجراءات التالية:
+
+- استخدام التوليد الثابت مع **جلب البيانات من جانب العميل:** يمكنك تخطي التقديم المسبق لبعض أجزاء الصفحة ثم استخدام JavaScript من جانب العميل لملئها. لمعرفة المزيد عن هذا الأسلوب، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/client-side).
+- استخدام **التقديم من جانب الخادم (SSR):** يقوم Next.js بتقديم الصفحة مسبقًا في كل طلب. سيكون أبطأ لأنه لا يمكن تخزين الصفحة مؤقتًا بواسطة CDN، ولكن الصفحة المقدمة مسبقًا ستكون دائمًا محدثة. سنتحدث عن هذا الأسلوب أدناه.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/03-incremental-static-regeneration.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/03-incremental-static-regeneration.mdx
new file mode 100644
index 00000000..8cbf95b6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/03-incremental-static-regeneration.mdx
@@ -0,0 +1,200 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:06.203Z
+title: التحديث التدريجي للصفحات الثابتة (ISR)
+description: تعلم كيفية إنشاء أو تحديث الصفحات الثابتة أثناء التشغيل باستخدام التحديث التدريجي للصفحات الثابتة.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [Next.js Commerce](https://nextjs.org/commerce)
+- [GitHub Reactions Demo](https://reactions-demo.vercel.app/)
+- [Static Tweet Demo](https://static-tweet.vercel.app/)
+
+</details>
+
+يسمح لك Next.js بإنشاء أو تحديث الصفحات الثابتة _بعد_ بناء موقعك. يتيح لك التحديث التدريجي للصفحات الثابتة (ISR) استخدام التوليد الثابت على أساس كل صفحة، **دون الحاجة إلى إعادة بناء الموقع بالكامل**. مع ISR، يمكنك الاحتفاظ بمزايا التوليد الثابت مع التوسع إلى ملايين الصفحات.
+
+> **معلومة مفيدة**: وقت التشغيل [`edge`](/docs/app/api-reference/edge) غير متوافق حاليًا مع ISR، على الرغم من أنه يمكنك الاستفادة من `stale-while-revalidate` عن طريق تعيين رأس `cache-control` يدويًا.
+
+لاستخدام ISR، أضف الخاصية `revalidate` إلى `getStaticProps`:
+
+```jsx
+function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// تم تمكين إعادة التحقق وجاء طلب جديد
+export async function getStaticProps() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  return {
+    props: {
+      posts,
+    },
+    // ستحاول Next.js إعادة توليد الصفحة:
+    // - عندما يأتي طلب
+    // - على الأكثر مرة كل 10 ثوانٍ
+    revalidate: 10, // بالثواني
+  }
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// لم يتم توليد المسار.
+export async function getStaticPaths() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد تقديمها مسبقًا بناءً على المنشورات
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // سنقوم بتقديم هذه المسارات مسبقًا فقط أثناء البناء.
+  // { fallback: 'blocking' } سيقوم بتقديم الصفحات على الخادم
+  // عند الطلب إذا لم يكن المسار موجودًا.
+  return { paths, fallback: 'blocking' }
+}
+
+export default Blog
+```
+
+عندما يتم تقديم طلب لصفحة تم تقديمها مسبقًا أثناء البناء، سيتم عرض الصفحة المخزنة مؤقتًا في البداية.
+
+- أي طلبات للصفحة بعد الطلب الأولي وقبل 10 ثوانٍ يتم تخزينها أيضًا وتكون فورية.
+- بعد نافذة الـ10 ثوانٍ، سيظل الطلب التالي يعرض الصفحة المخزنة (القديمة)
+- تقوم Next.js بتشغيل إعادة توليد الصفحة في الخلفية.
+- بمجرد توليد الصفحة بنجاح، ستقوم Next.js بإبطال التخزين المؤقت وعرض الصفحة المحدثة. إذا فشل التوليد في الخلفية، ستظل الصفحة القديمة دون تغيير.
+
+عند تقديم طلب لمسار لم يتم توليده، ستقوم Next.js بتقديم الصفحة على الخادم عند الطلب الأول. ستخدم الطلبات المستقبلية الملف الثابت من التخزين المؤقت. يحافظ ISR على Vercel على [التخزين المؤقت عالميًا ويتعامل مع التراجعات](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+> **معلومة مفيدة**: تحقق مما إذا كان مزود البيانات العلوي لديك قد مكّن التخزين المؤقت افتراضيًا. قد تحتاج إلى تعطيله (مثل `useCdn: false`)، وإلا لن تتمكن إعادة التحقق من سحب بيانات جديدة لتحديث تخزين ISR المؤقت. يمكن أن يحدث التخزين المؤقت في CDN (لنقطة النهاية المطلوبة) عندما يعيد رأس `Cache-Control`.
+
+## إعادة التحقق عند الطلب
+
+إذا قمت بتعيين وقت `revalidate` بقيمة `60`، فسيرى جميع الزوار نفس النسخة المولدة من موقعك لمدة دقيقة واحدة. الطريقة الوحيدة لإبطال التخزين المؤقت هي من خلال زيارة شخص ما لتلك الصفحة بعد انتهاء الدقيقة.
+
+بدءًا من الإصدار `v12.2.0`، يدعم Next.js التحديث التدريجي للصفحات الثابتة عند الطلب لإبطال تخزين Next.js المؤقت لصفحة معينة يدويًا. هذا يجعل تحديث موقعك أسهل عندما:
+
+- يتم إنشاء محتوى أو تحديثه من نظام إدارة المحتوى الخاص بك
+- تتغير بيانات التجارة الإلكترونية (السعر، الوصف، الفئة، التقييمات، إلخ.)
+
+داخل `getStaticProps`، لا تحتاج إلى تحديد `revalidate` لاستخدام إعادة التحقق عند الطلب. إذا تم حذف `revalidate`، ستستخدم Next.js القيمة الافتراضية `false` (لا إعادة تحقق) وسيتم إعادة التحقق من الصفحة عند الطلب فقط عند استدعاء `revalidate()`.
+
+> **معلومة مفيدة**: لن يتم تنفيذ [البرمجيات الوسيطة](/docs/app/building-your-application/routing/middleware) لطلبات ISR عند الطلب. بدلاً من ذلك، استدعِ `revalidate()` على المسار _الدقيق_ الذي تريد إعادة التحقق منه. على سبيل المثال، إذا كان لديك `pages/blog/[slug].js` وإعادة توجيه من `/post-1` -> `/blog/post-1`، فستحتاج إلى استدعاء `res.revalidate('/blog/post-1')`.
+
+### استخدام إعادة التحقق عند الطلب
+
+أولاً، قم بإنشاء رمز سري يعرفه تطبيق Next.js الخاص بك فقط. سيتم استخدام هذا السر لمنع الوصول غير المصرح به إلى مسار API إعادة التحقق. يمكنك الوصول إلى المسار (إما يدويًا أو باستخدام webhook) باستخدام هيكل URL التالي:
+
+```bash filename="Terminal"
+https://<your-site.com>/api/revalidate?secret=<token>
+```
+
+بعد ذلك، أضف السر كـ [متغير بيئة](/docs/pages/building-your-application/configuring/environment-variables) إلى تطبيقك. أخيرًا، قم بإنشاء مسار API إعادة التحقق:
+
+```js filename="pages/api/revalidate.js"
+export default async function handler(req, res) {
+  // التحقق من السر لتأكيد أن هذا طلب صالح
+  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
+    return res.status(401).json({ message: 'رمز غير صالح' })
+  }
+
+  try {
+    // يجب أن يكون هذا المسار الفعلي وليس مسارًا معاد توجيهه
+    // على سبيل المثال، لـ "/blog/[slug]" يجب أن يكون "/blog/post-1"
+    await res.revalidate('/path-to-revalidate')
+    return res.json({ revalidated: true })
+  } catch (err) {
+    // إذا كان هناك خطأ، ستستمر Next.js
+    // في عرض آخر صفحة تم توليدها بنجاح
+    return res.status(500).send('خطأ في إعادة التحقق')
+  }
+}
+```
+
+[شاهد العرض التوضيحي لدينا](https://on-demand-isr.vercel.app) لرؤية إعادة التحقق عند الطلب في العمل وتقديم الملاحظات.
+
+### اختبار ISR عند الطلب أثناء التطوير
+
+عند التشغيل محليًا باستخدام `next dev`، يتم استدعاء `getStaticProps` عند كل طلب. للتحقق من أن تكوين ISR عند الطلب صحيح، ستحتاج إلى إنشاء [بناء إنتاج](/docs/pages/api-reference/next-cli#build) وتشغيل [خادم الإنتاج](/docs/pages/api-reference/next-cli#production):
+
+```bash filename="Terminal"
+$ next build
+$ next start
+```
+
+ثم يمكنك تأكيد أن الصفحات الثابتة قد تم إعادة التحقق منها بنجاح.
+
+## معالجة الأخطاء وإعادة التحقق
+
+إذا حدث خطأ داخل `getStaticProps` عند معالجة التوليد في الخلفية، أو إذا قمت برمي خطأ يدويًا، فستستمر الصفحة الأخيرة التي تم توليدها بنجاح في الظهور. في الطلب التالي، ستقوم Next.js بإعادة محاولة استدعاء `getStaticProps`.
+
+```jsx
+export async function getStaticProps() {
+  // إذا ألقى هذا الطلب خطأ غير معالج، فلن تقوم Next.js
+  // بإبطال الصفحة المعروضة حاليًا و
+  // إعادة محاولة getStaticProps في الطلب التالي.
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  if (!res.ok) {
+    // إذا كان هناك خطأ في الخادم، قد ترغب في
+    // إلقاء خطأ بدلاً من الإرجاع حتى لا يتم تحديث التخزين المؤقت
+    // حتى الطلب الناجح التالي.
+    throw new Error(`فشل في جلب المنشورات، تم استلام الحالة ${res.status}`)
+  }
+
+  // إذا كان الطلب ناجحًا، قم بإرجاع المنشورات
+  // وإعادة التحقق كل 10 ثوانٍ.
+  return {
+    props: {
+      posts,
+    },
+    revalidate: 10,
+  }
+}
+```
+
+## استضافة ISR ذاتيًا
+
+يعمل التحديث التدريجي للصفحات الثابتة (ISR) على [مواقع Next.js المضافة ذاتيًا](/docs/pages/building-your-application/deploying#self-hosting) مباشرة عند استخدام `next start`.
+
+يمكنك استخدام هذا النهج عند النشر إلى منسقي الحاويات مثل [Kubernetes](https://kubernetes.io/) أو [HashiCorp Nomad](https://www.nomadproject.io/). افتراضيًا، سيتم تخزين الأصول المولدة في الذاكرة على كل pod. هذا يعني أن كل pod سيكون لديه نسخته الخاصة من الملفات الثابتة. قد تظهر بيانات قديمة حتى يتم الوصول إلى ذلك الـ pod المحدد بطلب.
+
+لضمان الاتساق عبر جميع الـ pods، يمكنك تعطيل التخزين المؤقت في الذاكرة. سيخبر هذا خادم Next.js بالاعتماد فقط على الأصول المولدة بواسطة ISR في نظام الملفات.
+
+يمكنك استخدام نقطة تركيب شبكة مشتركة في Kubernetes pods (أو إعداد مشابه) لإعادة استخدام نفس التخزين المؤقت لنظام الملفات بين الحاويات المختلفة. من خلال مشاركة نفس نقطة التركيب، سيتم أيضًا مشاركة مجلد `.next` الذي يحتوي على تخزين `next/image` المؤقت وإعادة استخدامه.
+
+لتعطيل التخزين المؤقت في الذاكرة، عيّن `isrMemoryCacheSize` إلى `0` في ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    // القيمة الافتراضية 50MB
+    isrMemoryCacheSize: 0, // حجم التخزين المؤقت بالبايت
+  },
+}
+```
+
+> **معلومة مفيدة**: قد تحتاج إلى النظر في حالة تنافس بين عدة pods تحاول تحديث التخزين المؤقت في نفس الوقت، اعتمادًا على كيفية تكوين نقطة التركيب المشتركة.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                 |
+| --------- | --------------------------------------------------------------------------------------- |
+| `v12.2.0` | أصبح ISR عند الطلب مستقرًا                                                                 |
+| `v12.1.0` | تمت إضافة ISR عند الطلب (بيتا).                                                             |
+| `v12.0.0` | تمت إضافة [التراجع المعتمد على الروبوتات لـ ISR](https://nextjs.org/blog/next-12#bot-aware-isr-fallback). |
+| `v9.5.0`  | تمت إضافة المسار الأساسي.                                                                        |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/04-automatic-static-optimization.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/04-automatic-static-optimization.mdx
new file mode 100644
index 00000000..a1e80417
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/04-automatic-static-optimization.mdx
@@ -0,0 +1,50 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:02.155Z
+title: التحسين التلقائي للصفحات الثابتة
+description: يقوم Next.js تلقائيًا بتحسين تطبيقك ليكون HTML ثابتًا عندما يكون ذلك ممكنًا. تعرف هنا على كيفية عمل هذه الميزة.
+---
+
+يحدد Next.js تلقائيًا أن الصفحة ثابتة (يمكن تقديمها مسبقًا) إذا لم يكن لديها متطلبات بيانات تعيق التحميل. يتم هذا التحديد من خلال غياب `getServerSideProps` و `getInitialProps` في الصفحة.
+
+تتيح هذه الميزة لـ Next.js إنشاء تطبيقات هجينة تحتوي على **صفحات يتم عرضها من جانب الخادم وصفحات يتم توليدها ثابتًا**.
+
+> الصفحات المولدة ثابتًا تظل تفاعلية: سيقوم Next.js بتهيئة التطبيق من جانب العميل لمنحه التفاعل الكامل.
+
+إحدى الفوائد الرئيسية لهذه الميزة هي أن الصفحات المحسنة لا تتطلب حسابات من جانب الخادم، ويمكن بثها فورًا للمستخدم النهائي من مواقع CDN متعددة. النتيجة هي تجربة تحميل **فائقة السرعة** للمستخدمين.
+
+## كيفية العمل
+
+إذا كان `getServerSideProps` أو `getInitialProps` موجودًا في الصفحة، سيتحول Next.js إلى عرض الصفحة عند الطلب، لكل طلب (أي [عرض من جانب الخادم (Server-Side Rendering)](/docs/pages/building-your-application/rendering/server-side-rendering)).
+
+إذا لم يكن الأمر كذلك، فسيقوم Next.js **بتحسين الصفحة تلقائيًا** عن طريق تقديمها مسبقًا كـ HTML ثابت.
+
+أثناء التقديم المسبق، سيكون كائن `query` الخاص بالموجه فارغًا لأننا لا نملك معلومات `query` لتوفيرها خلال هذه المرحلة. بعد التهيئة، سيؤدي Next.js تحديثًا لتطبيقك لتوفير معلمات المسار في كائن `query`.
+
+الحالات التي سيتم فيها تحديث الاستعلام بعد التهيئة مما يؤدي إلى عرض آخر هي:
+
+- الصفحة تحتوي على [مسار ديناميكي (dynamic route)](/docs/pages/building-your-application/routing/dynamic-routes).
+- الصفحة تحتوي على قيم استعلام في URL.
+- تم تكوين [إعادة التوجيه (Rewrites)](/docs/pages/api-reference/next-config-js/rewrites) في ملف `next.config.js` حيث يمكن أن تحتوي هذه على معلمات قد تحتاج إلى تحليلها وتوفيرها في `query`.
+
+للتمييز ما إذا كان الاستعلام محدثًا بالكامل وجاهزًا للاستخدام، يمكنك الاستفادة من الحقل `isReady` في [`next/router`](/docs/pages/api-reference/functions/use-router#router-object).
+
+> **معلومة مفيدة**: المعلمات المضافة باستخدام [المسارات الديناميكية (dynamic routes)](/docs/pages/building-your-application/routing/dynamic-routes) إلى صفحة تستخدم [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) ستكون دائمًا متاحة داخل كائن `query`.
+
+سيقوم `next build` بإصدار ملفات `.html` للصفحات المحسنة ثابتًا. على سبيل المثال، ستكون نتيجة الصفحة `pages/about.js`:
+
+```bash filename="Terminal"
+.next/server/pages/about.html
+```
+
+وإذا أضفت `getServerSideProps` إلى الصفحة، فستصبح JavaScript، كما يلي:
+
+```bash filename="Terminal"
+.next/server/pages/about.js
+```
+
+## محاذير
+
+- إذا كان لديك [تطبيق مخصص (`App`)](/docs/pages/building-your-application/routing/custom-app) مع `getInitialProps`، فسيتم إيقاف هذا التحسين في الصفحات بدون [توليد ثابت (Static Generation)](/docs/pages/building-your-application/data-fetching/get-static-props).
+- إذا كان لديك [وثيقة مخصصة (`Document`)](/docs/pages/building-your-application/routing/custom-document) مع `getInitialProps`، فتأكد من التحقق مما إذا كان `ctx.req` محددًا قبل افتراض أن الصفحة يتم عرضها من جانب الخادم. سيكون `ctx.req` غير محدد للصفحات التي يتم تقديمها مسبقًا.
+- تجنب استخدام قيمة `asPath` في [`next/router`](/docs/pages/api-reference/functions/use-router#router-object) في شجرة العرض حتى يصبح حقل `isReady` في الموجه `true`. تعرف الصفحات المحسنة ثابتًا على `asPath` فقط من جانب العميل وليس الخادم، لذا فإن استخدامها كخاصية قد يؤدي إلى أخطاء عدم تطابق. يوضح [مثال `active-class-name`](https://github.com/vercel/next.js/tree/canary/examples/active-class-name) طريقة واحدة لاستخدام `asPath` كخاصية.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/05-client-side-rendering.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/05-client-side-rendering.mdx
new file mode 100644
index 00000000..a48827b3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/05-client-side-rendering.mdx
@@ -0,0 +1,74 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:54:59.908Z
+title: التصيير من جانب العميل (CSR)
+description: تعلم كيفية تنفيذ التصيير من جانب العميل في مسار الصفحات (Pages Router).
+related:
+  description: تعرف على طرق التصيير البديلة في Next.js.
+  links:
+    - pages/building-your-application/rendering/server-side-rendering
+    - pages/building-your-application/rendering/static-site-generation
+    - pages/building-your-application/rendering/incremental-static-regeneration
+    - app/building-your-application/routing/loading-ui-and-streaming
+---
+
+في التصيير من جانب العميل (CSR) مع React، يقوم المتصفح بتحميل صفحة HTML أساسية وجافاسكريبت اللازمة للصفحة. ثم يتم استخدام جافاسكريبت لتحديث DOM وعرض الصفحة. عند التحميل الأول للتطبيق، قد يلاحظ المستخدم تأخيرًا بسيطًا قبل رؤية الصفحة كاملة، وذلك لأن الصفحة لا تُصّور بالكامل حتى يتم تنزيل جافاسكريبت وتحليلها وتنفيذها.
+
+بعد تحميل الصفحة لأول مرة، يكون التنقل بين الصفحات الأخرى في نفس الموقع أسرع عادةً، حيث يحتاج فقط إلى جلب البيانات الضرورية، ويمكن لجافاسكريبت إعادة تصيير أجزاء من الصفحة دون الحاجة إلى تحديث كامل للصفحة.
+
+في Next.js، هناك طريقتان لتنفيذ التصيير من جانب العميل:
+
+1. استخدام خطاف `useEffect()` من React داخل صفحاتك بدلاً من طرق التصيير من جانب الخادم ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) و [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)).
+2. استخدام مكتبة لجلب البيانات مثل [SWR](https://swr.vercel.app/) أو [TanStack Query](https://tanstack.com/query/latest/) لجلب البيانات من جانب العميل (موصى به).
+
+إليك مثالاً لاستخدام `useEffect()` داخل صفحة Next.js:
+
+```jsx filename="pages/index.js"
+import React, { useState, useEffect } from 'react'
+
+export function Page() {
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch('https://api.example.com/data')
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const result = await response.json()
+      setData(result)
+    }
+
+    fetchData().catch((e) => {
+      // التعامل مع الخطأ حسب الحاجة
+      console.error('حدث خطأ أثناء جلب البيانات: ', e)
+    })
+  }, [])
+
+  return <p>{data ? `بياناتك: ${data}` : 'جاري التحميل...'}</p>
+}
+```
+
+في المثال أعلاه، يبدأ المكون بعرض `جاري التحميل...`. ثم بمجرد جلب البيانات، يعيد التصيير ويعرض البيانات.
+
+على الرغم من أن جلب البيانات باستخدام `useEffect` هو نمط قد تراه في تطبيقات React القديمة، نوصي باستخدام مكتبة لجلب البيانات لتحسين الأداء، التخزين المؤقت، التحديثات التفاؤلية، والمزيد. إليك مثال بسيط باستخدام [SWR](https://swr.vercel.app/) لجلب البيانات من جانب العميل:
+
+```jsx filename="pages/index.js"
+import useSWR from 'swr'
+
+export function Page() {
+  const { data, error, isLoading } = useSWR(
+    'https://api.example.com/data',
+    fetcher
+  )
+
+  if (error) return <p>فشل التحميل.</p>
+  if (isLoading) return <p>جاري التحميل...</p>
+
+  return <p>بياناتك: {data}</p>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> ضع في اعتبارك أن CSR يمكن أن يؤثر على تحسين محركات البحث (SEO). بعض زواحف محركات البحث قد لا تنفذ جافاسكريبت وبالتالي ترى فقط الحالة الأولية الفارغة أو حالة التحميل لتطبيقك. قد يؤدي أيضًا إلى مشاكل أداء للمستخدمين ذوي اتصالات الإنترنت البطيئة أو الأجهزة الضعيفة، حيث يحتاجون إلى انتظار تحميل وتنفيذ كل جافاسكريبت قبل رؤية الصفحة كاملة. يروج Next.js لنهج هجين يسمح لك باستخدام مزيج من [التصيير من جانب الخادم](/docs/pages/building-your-application/rendering/server-side-rendering)، [التوليد الثابت للموقع](/docs/pages/building-your-application/rendering/static-site-generation)، والتصيير من جانب العميل، **حسب احتياجات كل صفحة** في تطبيقك. في مسار التطبيق (App Router)، يمكنك أيضًا استخدام [واجهة التحميل مع Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming) لعرض مؤشر تحميل أثناء تصيير الصفحة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/06-edge-and-nodejs-runtimes.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/06-edge-and-nodejs-runtimes.mdx
new file mode 100644
index 00000000..85c9b74e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/06-edge-and-nodejs-runtimes.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:54:22.129Z
+title: بيئات التشغيل Edge و Node.js
+description: تعرف على المزيد حول بيئات التشغيل القابلة للتبديل (Edge و Node.js) في Next.js.
+source: app/building-your-application/rendering/edge-and-nodejs-runtimes
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/index.mdx
new file mode 100644
index 00000000..c57dc40c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/02-rendering/index.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:54:16.532Z
+title: التصيير (Rendering)
+description: تعلم أساسيات التصيير في React وNext.js.
+---
+
+بشكل افتراضي، يقوم Next.js **بالتصيير المسبق (pre-rendering)** لكل صفحة. هذا يعني أن Next.js يقوم بإنشاء HTML لكل صفحة مسبقًا، بدلاً من ترك كل شيء لـ JavaScript من جانب العميل. يمكن أن يؤدي التصيير المسبق إلى تحسين الأداء وتحسين محركات البحث (SEO).
+
+يرتبط كل HTML مُنشأ بحد أدنى من كود JavaScript الضروري لتلك الصفحة. عندما يتم تحميل الصفحة بواسطة المتصفح، يعمل كود JavaScript الخاص بها ويجعل الصفحة تفاعلية بالكامل (تسمى هذه العملية [الترطيب (hydration)](https://react.dev/reference/react-dom/client/hydrateRoot) في React).
+
+### التصيير المسبق (Pre-rendering)
+
+يحتوي Next.js على نوعين من التصيير المسبق: **التوليد الثابت (Static Generation)** و**التصيير من جانب الخادم (Server-side Rendering)**. الفرق بينهما هو **متى** يتم إنشاء HTML للصفحة.
+
+- التوليد الثابت: يتم إنشاء HTML في **وقت البناء (build time)** وسيتم إعادة استخدامه في كل طلب.
+- التصيير من جانب الخادم: يتم إنشاء HTML في **كل طلب**.
+
+من المهم ملاحظة أن Next.js يسمح لك باختيار أي شكل من أشكال التصيير المسبق تريد استخدامه لكل صفحة. يمكنك إنشاء تطبيق Next.js "هجين" باستخدام التوليد الثابت لمعظم الصفحات واستخدام التصيير من جانب الخادم للصفحات الأخرى.
+
+نوصي باستخدام التوليد الثابت بدلاً من التصيير من جانب الخادم لأسباب تتعلق بالأداء. يمكن تخزين الصفحات المولدة ثابتًا بواسطة CDN دون الحاجة إلى تكوين إضافي لتعزيز الأداء. ومع ذلك، في بعض الحالات، قد يكون التصيير من جانب الخادم هو الخيار الوحيد.
+
+يمكنك أيضًا استخدام جلب البيانات من جانب العميل (client-side data fetching) جنبًا إلى جنب مع التوليد الثابت أو التصيير من جانب الخادم. هذا يعني أنه يمكن تصيير بعض أجزاء الصفحة بالكامل بواسطة JavaScript من جانب العميل. لمعرفة المزيد، راجع وثائق [جلب البيانات](/docs/pages/building-your-application/data-fetching/client-side).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx
new file mode 100644
index 00000000..c4cde241
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx
@@ -0,0 +1,202 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:19.062Z
+title: getStaticProps
+description: جلب البيانات وإنشاء صفحات ثابتة باستخدام `getStaticProps`. تعرف على المزيد حول واجهة برمجة التطبيقات هذه لجلب البيانات في Next.js.
+---
+
+إذا قمت بتصدير دالة تسمى `getStaticProps` (إنشاء موقع ثابت) من صفحة، فإن Next.js سيقوم بتحضير عرض هذه الصفحة مسبقًا أثناء البناء باستخدام الخصائص التي تُرجعها `getStaticProps`.
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetStaticPropsType, GetStaticProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getStaticProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+> لاحظ أنه بغض النظر عن نوع العرض، سيتم تمرير أي `props` إلى مكون الصفحة ويمكن رؤيتها على جانب العميل في HTML الأولي. هذا للسماح للصفحة بأن يتم [ترطيبها (hydrate)](https://react.dev/reference/react-dom/hydrate) بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في `props`.
+
+## متى يجب استخدام getStaticProps؟
+
+يجب استخدام `getStaticProps` إذا:
+
+- كانت البيانات المطلوبة لعرض الصفحة متوفرة في وقت البناء قبل طلب المستخدم
+- تأتي البيانات من نظام إدارة محتوى (CMS) بدون واجهة أمامية
+- يجب تحضير عرض الصفحة مسبقًا (لتحسين محركات البحث SEO) وأن تكون سريعة جدًا - حيث يولد `getStaticProps` ملفات `HTML` و `JSON`، وكلاهما يمكن تخزينه مؤقتًا بواسطة CDN لتحسين الأداء
+- يمكن تخزين البيانات مؤقتًا بشكل عام (وليست خاصة بالمستخدم). يمكن تجاوز هذا الشرط في حالات محددة باستخدام Middleware لإعادة كتابة المسار.
+
+## متى يتم تشغيل getStaticProps
+
+يعمل `getStaticProps` دائمًا على الخادم ولا يعمل أبدًا على العميل. يمكنك التحقق من إزالة الكود الموجود داخل `getStaticProps` من حزمة جانب العميل [باستخدام هذه الأداة](https://next-code-elimination.vercel.app/).
+
+- يعمل `getStaticProps` دائمًا أثناء `next build`
+- يعمل `getStaticProps` في الخلفية عند استخدام [`fallback: true`](/docs/pages/api-reference/functions/get-static-paths#fallback-true)
+- يتم استدعاء `getStaticProps` قبل العرض الأولي عند استخدام [`fallback: blocking`](/docs/pages/api-reference/functions/get-static-paths#fallback-blocking)
+- يعمل `getStaticProps` في الخلفية عند استخدام `revalidate`
+- يعمل `getStaticProps` عند الطلب في الخلفية عند استخدام [`revalidate()`](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)
+
+عند استخدامه مع [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)، سيعمل `getStaticProps` في الخلفية أثناء إعادة التحقق من الصفحة القديمة، وسيتم تقديم الصفحة الجديدة للمتصفح.
+
+لا يمكن لـ `getStaticProps` الوصول إلى الطلب الوارد (مثل معلمات الاستعلام أو رؤوس HTTP) لأنه يولد HTML ثابت. إذا كنت بحاجة إلى الوصول إلى الطلب لصفحتك، ففكر في استخدام [Middleware](/docs/pages/building-your-application/routing/middleware) بالإضافة إلى `getStaticProps`.
+
+## استخدام getStaticProps لجلب البيانات من نظام إدارة محتوى (CMS)
+
+يوضح المثال التالي كيفية جلب قائمة من منشورات المدونة من نظام إدارة محتوى.
+
+```tsx filename="pages/blog.tsx" switcher
+// سيتم ملء المنشورات في وقت البناء بواسطة getStaticProps()
+export default function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة في وقت البناء على جانب الخادم.
+// لن يتم استدعاؤها على جانب العميل، لذا يمكنك حتى
+// إجراء استعلامات قاعدة بيانات مباشرة.
+export async function getStaticProps() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات.
+  // يمكنك استخدام أي مكتبة لجلب البيانات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // بإرجاع { props: { posts } }، سيستقبل مكون Blog
+  // `posts` كخاصية في وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+```jsx filename="pages/blog.js" switcher
+// سيتم ملء المنشورات في وقت البناء بواسطة getStaticProps()
+export default function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة في وقت البناء على جانب الخادم.
+// لن يتم استدعاؤها على جانب العميل، لذا يمكنك حتى
+// إجراء استعلامات قاعدة بيانات مباشرة.
+export async function getStaticProps() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات.
+  // يمكنك استخدام أي مكتبة لجلب البيانات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // بإرجاع { props: { posts } }، سيستقبل مكون Blog
+  // `posts` كخاصية في وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+يغطي [مرجع واجهة برمجة التطبيقات لـ `getStaticProps`](/docs/pages/api-reference/functions/get-static-props) جميع المعلمات والخصائص التي يمكن استخدامها مع `getStaticProps`.
+
+## كتابة كود جانب الخادم مباشرة
+
+بما أن `getStaticProps` يعمل فقط على جانب الخادم، فلن يعمل أبدًا على جانب العميل. لن يتم تضمينه حتى في حزمة JS للمتصفح، لذا يمكنك كتابة استعلامات قاعدة بيانات مباشرة دون إرسالها إلى المتصفحات.
+
+هذا يعني أنه بدلاً من جلب **مسار API** من `getStaticProps` (الذي بدوره يجلب البيانات من مصدر خارجي)، يمكنك كتابة كود جانب الخادم مباشرة في `getStaticProps`.
+
+خذ المثال التالي. يتم استخدام مسار API لجلب بعض البيانات من نظام إدارة محتوى. ثم يتم استدعاء مسار API هذا مباشرة من `getStaticProps`. هذا ينتج عنه استدعاء إضافي، مما يقلل الأداء. بدلاً من ذلك، يمكن مشاركة منطق جلب البيانات من نظام إدارة المحتوى باستخدام دليل `lib/`. ثم يمكن مشاركته مع `getStaticProps`.
+
+```js filename="lib/load-posts.js"
+// الدالة التالية مشتركة
+// مع getStaticProps ومسارات API
+// من دليل `lib/`
+export async function loadPosts() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts/')
+  const data = await res.json()
+
+  return data
+}
+```
+
+```jsx filename="pages/blog.js"
+// pages/blog.js
+import { loadPosts } from '../lib/load-posts'
+
+// هذه الدالة تعمل فقط على جانب الخادم
+export async function getStaticProps() {
+  // بدلاً من جلب مسار `/api` الخاص بك، يمكنك استدعاء نفس
+  // الدالة مباشرة في `getStaticProps`
+  const posts = await loadPosts()
+
+  // الخصائص التي يتم إرجاعها سيتم تمريرها إلى مكون الصفحة
+  return { props: { posts } }
+}
+```
+
+بدلاً من ذلك، إذا كنت **لا** تستخدم مسارات API لجلب البيانات، فيمكن استخدام واجهة [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API) مباشرة في `getStaticProps` لجلب البيانات.
+
+للتحقق مما يزيله Next.js من حزمة جانب العميل، يمكنك استخدام [أداة next-code-elimination](https://next-code-elimination.vercel.app/).
+
+## إنشاء HTML و JSON بشكل ثابت
+
+عند تحضير عرض صفحة تحتوي على `getStaticProps` مسبقًا في وقت البناء، بالإضافة إلى ملف HTML للصفحة، يقوم Next.js بإنشاء ملف JSON يحتوي على نتيجة تشغيل `getStaticProps`.
+
+سيتم استخدام ملف JSON هذا في التوجيه من جانب العميل عبر [`next/link`](/docs/pages/api-reference/components/link) أو [`next/router`](/docs/pages/api-reference/functions/use-router). عند الانتقال إلى صفحة تم تحضير عرضها مسبقًا باستخدام `getStaticProps`، يقوم Next.js بجلب ملف JSON هذا (المحسوب مسبقًا في وقت البناء) واستخدامه كخصائص لمكون الصفحة. هذا يعني أن انتقالات الصفحة من جانب العميل **لن** تستدعي `getStaticProps` حيث يتم استخدام ملف JSON المصدر فقط.
+
+عند استخدام التجديد الثابت التدريجي، سيتم تنفيذ `getStaticProps` في الخلفية لإنشاء JSON المطلوب للتنقل من جانب العميل. قد ترى هذا في شكل طلبات متعددة لنفس الصفحة، ومع ذلك، هذا مقصود وليس له تأثير على أداء المستخدم النهائي.
+
+## أين يمكن استخدام getStaticProps
+
+يمكن تصدير `getStaticProps` فقط من **صفحة**. لا يمكن تصديره من ملفات غير الصفحات، أو `_app`، أو `_document`، أو `_error`.
+
+أحد أسباب هذا القيد هو أن React يحتاج إلى جميع البيانات المطلوبة قبل عرض الصفحة.
+
+أيضًا، يجب عليك استخدام تصدير `getStaticProps` كدالة مستقلة - **لن** تعمل إذا أضفت `getStaticProps` كخاصية لمكون الصفحة.
+
+> **ملاحظة جيدة**: إذا كنت قد أنشأت [تطبيقًا مخصصًا](/docs/pages/building-your-application/routing/custom-app)، فتأكد من تمرير `pageProps` إلى مكون الصفحة كما هو موضح في المستند المرفق، وإلا ستكون الخصائص فارغة.
+
+## التشغيل في كل طلب في وضع التطوير
+
+في وضع التطوير (`next dev`)، سيتم استدعاء `getStaticProps` في كل طلب.
+
+## وضع المعاينة
+
+يمكنك تجاوز التوليد الثابت مؤقتًا وعرض الصفحة في **وقت الطلب** بدلاً من وقت البناء باستخدام [**وضع المعاينة (Preview Mode)**](/docs/pages/building-your-application/configuring/preview-mode). على سبيل المثال، قد تستخدم نظام إدارة محتوى بدون واجهة أمامية وتريد معاينة المسودات قبل نشرها.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx
new file mode 100644
index 00000000..f9f8f9b8
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx
@@ -0,0 +1,143 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:54:40.704Z
+title: getStaticPaths
+description: جلب البيانات وإنشاء صفحات ثابتة باستخدام `getStaticPaths`. تعرف على المزيد حول واجهة برمجة التطبيقات هذه لجلب البيانات في Next.js.
+---
+
+إذا كانت الصفحة تحتوي على [مسارات ديناميكية](/docs/pages/building-your-application/routing/dynamic-routes) وتستخدم `getStaticProps`، فإنها تحتاج إلى تحديد قائمة بالمسارات التي سيتم إنشاؤها بشكل ثابت.
+
+عند تصدير دالة تسمى `getStaticPaths` (توليد موقع ثابت) من صفحة تستخدم مسارات ديناميكية، سيقوم Next.js بعرض جميع المسارات المحددة بواسطة `getStaticPaths` مسبقًا بشكل ثابت.
+
+```tsx filename="pages/repo/[name].tsx" switcher
+import type {
+  InferGetStaticPropsType,
+  GetStaticProps,
+  GetStaticPaths,
+} from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticPaths = (async () => {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/repo/[name].js" switcher
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}
+
+export async function getStaticProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+[مرجع واجهة برمجة التطبيقات `getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) يغطي جميع المعلمات والخصائص التي يمكن استخدامها مع `getStaticPaths`.
+
+## متى يجب استخدام getStaticPaths؟
+
+يجب استخدام `getStaticPaths` إذا كنت تقوم بعرض صفحات مسبقًا بشكل ثابت تستخدم مسارات ديناميكية و:
+
+- تأتي البيانات من نظام إدارة محتوى (headless CMS)
+- تأتي البيانات من قاعدة بيانات
+- تأتي البيانات من نظام الملفات
+- يمكن تخزين البيانات مؤقتًا بشكل عام (وليست خاصة بالمستخدم)
+- يجب عرض الصفحة مسبقًا (لتحسين محركات البحث SEO) وتكون سريعة جدًا - حيث يقوم `getStaticProps` بإنشاء ملفات `HTML` و`JSON`، وكلاهما يمكن تخزينه مؤقتًا بواسطة CDN لتحسين الأداء
+
+## متى يتم تشغيل getStaticPaths
+
+سيتم تشغيل `getStaticPaths` فقط أثناء البناء في بيئة الإنتاج، ولن يتم استدعاؤه أثناء وقت التشغيل. يمكنك التحقق من إزالة الكود الموجود داخل `getStaticPaths` من حزمة العميل [باستخدام هذه الأداة](https://next-code-elimination.vercel.app/).
+
+### كيف يعمل getStaticProps فيما يتعلق بـ getStaticPaths
+
+- يتم تشغيل `getStaticProps` أثناء `next build` لأي `paths` تم إرجاعها أثناء البناء
+- يتم تشغيل `getStaticProps` في الخلفية عند استخدام `fallback: true`
+- يتم استدعاء `getStaticProps` قبل العرض الأولي عند استخدام `fallback: blocking`
+
+## أين يمكن استخدام getStaticPaths
+
+- **يجب** استخدام `getStaticPaths` مع `getStaticProps`
+- **لا يمكن** استخدام `getStaticPaths` مع [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)
+- يمكن تصدير `getStaticPaths` من [مسار ديناميكي](/docs/pages/building-your-application/routing/dynamic-routes) يستخدم أيضًا `getStaticProps`
+- **لا يمكن** تصدير `getStaticPaths` من ملف غير صفحة (مثل مجلد `components`)
+- يجب تصدير `getStaticPaths` كدالة مستقلة، وليس كخاصية لمكون الصفحة
+
+## التشغيل في كل طلب في بيئة التطوير
+
+في بيئة التطوير (`next dev`)، سيتم استدعاء `getStaticPaths` في كل طلب.
+
+## إنشاء المسارات عند الطلب
+
+يسمح `getStaticPaths` لك بالتحكم في الصفحات التي يتم إنشاؤها أثناء البناء بدلاً من إنشائها عند الطلب باستخدام [`fallback`](/docs/pages/api-reference/functions/get-static-paths#fallback-blocking). إنشاء المزيد من الصفحات أثناء البناء سيؤدي إلى عمليات بناء أبطأ.
+
+يمكنك تأجيل إنشاء جميع الصفحات عند الطلب عن طريق إرجاع مصفوفة فارغة لـ `paths`. يمكن أن يكون هذا مفيدًا بشكل خاص عند نشر تطبيق Next.js في بيئات متعددة. على سبيل المثال، يمكنك الحصول على عمليات بناء أسرع عن طريق إنشاء جميع الصفحات عند الطلب للمعاينات (وليس بناء الإنتاج). هذا مفيد للمواقع التي تحتوي على مئات/آلاف الصفحات الثابتة.
+
+```jsx filename="pages/posts/[id].js"
+export async function getStaticPaths() {
+  // عندما يكون هذا صحيحًا (في بيئات المعاينة) لا تقم
+  // بعرض أي صفحات ثابتة مسبقًا
+  // (عمليات بناء أسرع، ولكن تحميل الصفحة الأولي أبطأ)
+  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
+    return {
+      paths: [],
+      fallback: 'blocking',
+    }
+  }
+
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد عرضها مسبقًا بناءً على المنشورات
+  // في بيئات الإنتاج، قم بعرض جميع الصفحات مسبقًا
+  // (عمليات بناء أبطأ، ولكن تحميل الصفحة الأولي أسرع)
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // { fallback: false } يعني أن المسارات الأخرى يجب أن تعرض خطأ 404
+  return { paths, fallback: false }
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/03-forms-and-mutations.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/03-forms-and-mutations.mdx
new file mode 100644
index 00000000..4d49cea5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/03-forms-and-mutations.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:52.194Z
+title: النماذج والتحولات (Forms and Mutations)
+nav_title: النماذج والتحولات (Forms and Mutations)
+description: تعلم كيفية التعامل مع إرسال النماذج وتحولات البيانات باستخدام Next.js.
+source: app/building-your-application/data-fetching/forms-and-mutations
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx
new file mode 100644
index 00000000..ee53d5b6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx
@@ -0,0 +1,146 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:02.471Z
+title: getServerSideProps
+description: جلب البيانات عند كل طلب باستخدام `getServerSideProps`.
+---
+
+إذا قمت بتصدير دالة تسمى `getServerSideProps` (العرض من جانب الخادم - SSR) من صفحة، فإن Next.js سيقوم بتهيئة عرض هذه الصفحة مسبقًا عند كل طلب باستخدام البيانات التي تُرجعها `getServerSideProps`.
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getServerSideProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetServerSideProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getServerSideProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+> لاحظ أنه بغض النظر عن نوع العرض، أي `props` سيتم تمريرها إلى مكون الصفحة ويمكن رؤيتها على جانب العميل في HTML الأولي. هذا للسماح للصفحة بأن يتم [ترطيبها (hydrate)](https://react.dev/reference/react-dom/hydrate) بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في `props`.
+
+## متى يتم تشغيل getServerSideProps
+
+`getServerSideProps` يعمل فقط على جانب الخادم ولا يعمل أبدًا في المتصفح. إذا كانت الصفحة تستخدم `getServerSideProps`، فإن:
+
+- عند طلب هذه الصفحة مباشرة، يعمل `getServerSideProps` وقت الطلب، وسيتم تهيئة عرض هذه الصفحة مسبقًا مع الـ props المُرجعة
+- عند طلب هذه الصفحة على انتقالات الصفحة من جانب العميل عبر [`next/link`](/docs/pages/api-reference/components/link) أو [`next/router`](/docs/pages/api-reference/functions/use-router)، يرسل Next.js طلب API إلى الخادم، الذي يقوم بتشغيل `getServerSideProps`
+
+`getServerSideProps` يُرجع JSON الذي سيتم استخدامه لعرض الصفحة. كل هذا العمل سيتم التعامل معه تلقائيًا بواسطة Next.js، لذلك لا تحتاج إلى فعل أي شيء إضافي طالما أن لديك `getServerSideProps` مُعرّفًا.
+
+يمكنك استخدام [أداة إزالة الكود في Next.js](https://next-code-elimination.vercel.app/) للتحقق مما يزيله Next.js من حزمة جانب العميل.
+
+`getServerSideProps` يمكن تصديره فقط من **صفحة**. لا يمكنك تصديره من ملفات غير الصفحات.
+
+لاحظ أنه يجب عليك تصدير `getServerSideProps` كدالة مستقلة - لن تعمل إذا أضفت `getServerSideProps` كخاصية لمكون الصفحة.
+
+[مرجع واجهة برمجة التطبيقات لـ `getServerSideProps`](/docs/pages/api-reference/functions/get-server-side-props) يغطي جميع المعلمات والـ props التي يمكن استخدامها مع `getServerSideProps`.
+
+## متى يجب استخدام getServerSideProps
+
+يجب استخدام `getServerSideProps` فقط إذا كنت بحاجة إلى عرض صفحة يجب جلب بياناتها عند وقت الطلب. قد يكون هذا بسبب طبيعة البيانات أو خصائص الطلب (مثل رؤوس `authorization` أو الموقع الجغرافي). الصفحات التي تستخدم `getServerSideProps` سيتم عرضها من جانب الخادم عند وقت الطلب وسيتم تخزينها مؤقتًا فقط إذا [تم تكوين رؤوس cache-control](/docs/pages/building-your-application/deploying/production-checklist#caching).
+
+إذا لم تكن بحاجة إلى عرض البيانات أثناء الطلب، فيجب أن تفكر في جلب البيانات على [جانب العميل](#fetching-data-on-the-client-side) أو استخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+### getServerSideProps أو مسارات API
+
+قد يكون من المغري اللجوء إلى [مسار API](/docs/pages/building-your-application/routing/api-routes) عندما تريد جلب البيانات من الخادم، ثم استدعاء مسار API هذا من `getServerSideProps`. هذا نهج غير ضروري وغير فعال، لأنه سيؤدي إلى طلب إضافي بسبب تشغيل كل من `getServerSideProps` ومسارات API على الخادم.
+
+خذ المثال التالي. يتم استخدام مسار API لجلب بعض البيانات من نظام إدارة المحتوى (CMS). ثم يتم استدعاء مسار API هذا مباشرة من `getServerSideProps`. هذا ينتج عنه استدعاء إضافي، مما يقلل الأداء. بدلاً من ذلك، استورد المنطق المستخدم داخل مسار API مباشرة إلى `getServerSideProps`. قد يعني هذا استدعاء نظام إدارة المحتوى أو قاعدة البيانات أو واجهة برمجة تطبيقات أخرى مباشرة من داخل `getServerSideProps`.
+
+### getServerSideProps مع مسارات Edge API
+
+يمكن استخدام `getServerSideProps` مع كل من [وظائف الخادم بدون خادم (Serverless) و Edge](/docs/pages/building-your-application/rendering/edge-and-nodejs-runtimes)، ويمكنك تعيين الـ props في كليهما. ومع ذلك، حاليًا في بيئة Edge، ليس لديك حق الوصول إلى كائن الاستجابة. هذا يعني أنه لا يمكنك - على سبيل المثال - إضافة ملفات تعريف الارتباط (cookies) في `getServerSideProps`. للحصول على حق الوصول إلى كائن الاستجابة، يجب **الاستمرار في استخدام بيئة Node.js**، وهي البيئة الافتراضية.
+
+يمكنك تعيين البيئة بشكل صريح لكل صفحة عن طريق تعديل `config`، على سبيل المثال:
+
+```jsx filename="pages/index.js"
+export const config = {
+  runtime: 'nodejs', // أو "edge"
+}
+
+export const getServerSideProps = async () => {}
+```
+
+## جلب البيانات على جانب العميل
+
+إذا كانت صفحتك تحتوي على بيانات يتم تحديثها بشكل متكرر، ولا تحتاج إلى عرض البيانات مسبقًا، يمكنك جلب البيانات على [جانب العميل](/docs/pages/building-your-application/data-fetching/client-side). مثال على ذلك هو البيانات الخاصة بالمستخدم:
+
+- أولاً، اعرض الصفحة فورًا بدون بيانات. يمكن عرض أجزاء من الصفحة مسبقًا باستخدام التوليد الثابت. يمكنك عرض حالات التحميل للبيانات المفقودة
+- ثم، جلب البيانات على جانب العميل وعرضها عندما تكون جاهزة
+
+يعمل هذا النهج بشكل جيد لصفحات لوحات التحكم الخاصة بالمستخدم، على سبيل المثال. لأن لوحة التحكم هي صفحة خاصة بالمستخدم، لا علاقة لها بمحركات البحث (SEO) ولا تحتاج الصفحة إلى عرض مسبق. يتم تحديث البيانات بشكل متكرر، مما يتطلب جلب البيانات عند وقت الطلب.
+
+## استخدام getServerSideProps لجلب البيانات عند وقت الطلب
+
+يوضح المثال التالي كيفية جلب البيانات عند وقت الطلب وتهيئة عرض النتيجة مسبقًا.
+
+```jsx
+// يتم استدعاء هذا عند كل طلب
+export async function getServerSideProps() {
+  // جلب البيانات من واجهة برمجة التطبيقات الخارجية
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  // تمرير البيانات إلى الصفحة عبر props
+  return { props: { data } }
+}
+
+export default function Page({ data }) {
+  // عرض البيانات...
+}
+```
+
+## التخزين المؤقت مع العرض من جانب الخادم (SSR)
+
+يمكنك استخدام رؤوس التخزين المؤقت (`Cache-Control`) داخل `getServerSideProps` لتخزين الاستجابات الديناميكية مؤقتًا. على سبيل المثال، باستخدام [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/).
+
+```jsx
+// تعتبر هذه القيمة طازجة لمدة عشر ثوانٍ (s-maxage=10).
+// إذا تم تكرار الطلب خلال الثواني العشر التالية، ستظل القيمة المخزنة مؤقتًا طازجة. إذا تم تكرار الطلب قبل 59 ثانية،
+// ستكون القيمة المخزنة مؤقتًا قديمة ولكن سيتم عرضها (stale-while-revalidate=59).
+//
+// في الخلفية، سيتم إجراء طلب إعادة تحقق لتعبئة التخزين المؤقت
+// بقيمة طازجة. إذا قمت بتحديث الصفحة، سترى القيمة الجديدة.
+export async function getServerSideProps({ req, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=10, stale-while-revalidate=59'
+  )
+
+  return {
+    props: {},
+  }
+}
+```
+
+تعلم المزيد عن [التخزين المؤقت](/docs/pages/building-your-application/deploying/production-checklist#caching).
+
+## هل يعرض getServerSideProps صفحة خطأ
+
+إذا تم طرح خطأ داخل `getServerSideProps`، فسيتم عرض ملف `pages/500.js`. تحقق من الوثائق الخاصة بـ [صفحة 500](/docs/pages/building-your-application/routing/custom-error#500-page) لمعرفة المزيد حول كيفية إنشائها. أثناء التطوير، لن يتم استخدام هذا الملف وسيتم عرض شاشة خطأ التطوير بدلاً من ذلك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx
new file mode 100644
index 00000000..d6f72441
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx
@@ -0,0 +1,200 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:26.902Z
+title: التحديث التدريجي للصفحات الثابتة (ISR)
+description: تعلم كيفية إنشاء أو تحديث الصفحات الثابتة أثناء التشغيل باستخدام التحديث التدريجي للصفحات الثابتة.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [Next.js Commerce](https://nextjs.org/commerce)
+- [GitHub Reactions Demo](https://reactions-demo.vercel.app/)
+- [Static Tweet Demo](https://static-tweet.vercel.app/)
+
+</details>
+
+يسمح لك Next.js بإنشاء أو تحديث الصفحات الثابتة _بعد_ بناء موقعك. يتيح لك التحديث التدريجي للصفحات الثابتة (ISR) استخدام التوليد الثابت على أساس كل صفحة، **دون الحاجة إلى إعادة بناء الموقع بالكامل**. مع ISR، يمكنك الاحتفاظ بمزايا التوليد الثابت مع التوسع إلى ملايين الصفحات.
+
+> **معلومة مفيدة**: وقت التشغيل [`edge`](/docs/pages/api-reference/edge) غير متوافق حاليًا مع ISR، على الرغم من أنه يمكنك الاستفادة من `stale-while-revalidate` عن طريق تعيين رأس `cache-control` يدويًا.
+
+لاستخدام ISR، أضف خاصية `revalidate` إلى `getStaticProps`:
+
+```jsx
+function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// تم تمكين إعادة التحقق وجاء طلب جديد
+export async function getStaticProps() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  return {
+    props: {
+      posts,
+    },
+    // سيحاول Next.js إعادة توليد الصفحة:
+    // - عند وصول طلب جديد
+    // - على الأكثر مرة كل 10 ثوانٍ
+    revalidate: 10, // بالثواني
+  }
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// لم يتم توليد المسار بعد.
+export async function getStaticPaths() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد تقديمها مسبقًا بناءً على المنشورات
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // سنقوم بتقديم هذه المسارات مسبقًا فقط أثناء البناء.
+  // { fallback: 'blocking' } سيقدم الصفحات على الخادم
+  // عند الطلب إذا لم يكن المسار موجودًا.
+  return { paths, fallback: 'blocking' }
+}
+
+export default Blog
+```
+
+عند إجراء طلب إلى صفحة تم تقديمها مسبقًا أثناء البناء، سيتم عرض النسخة المخزنة مسبقًا.
+
+- أي طلبات للصفحة بعد الطلب الأولي وقبل مرور 10 ثوانٍ سيتم تخزينها أيضًا وتكون فورية.
+- بعد نافذة الـ 10 ثوانٍ، سيظل الطلب التالي يعرض الصفحة المخزنة (القديمة)
+- يقوم Next.js بتشغيل إعادة توليد الصفحة في الخلفية.
+- بمجرد اكتمال توليد الصفحة بنجاح، سيقوم Next.js بإبطال التخزين المؤقت وعرض الصفحة المحدثة. إذا فشل التوليد في الخلفية، ستظل الصفحة القديمة دون تغيير.
+
+عند إجراء طلب إلى مسار لم يتم توليده بعد، سيقوم Next.js بتقديم الصفحة على الخادم عند الطلب الأول. ستخدم الطلبات المستقبلية الملف الثابت من التخزين المؤقت. يحافظ ISR على Vercel [على التخزين المؤقت عالميًا ويتعامل مع التراجعات](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+> **معلومة مفيدة**: تحقق مما إذا كان مزود البيانات المنبع لديك قد مكّن التخزين المؤقت افتراضيًا. قد تحتاج إلى تعطيله (مثل `useCdn: false`)، وإلا لن تتمكن إعادة التحقق من سحب بيانات جديدة لتحديث تخزين ISR المؤقت. يمكن أن يحدث التخزين المؤقت على CDN (لنقطة النهاية المطلوبة) عندما يعيد رأس `Cache-Control`.
+
+## إعادة التحقق عند الطلب
+
+إذا قمت بتعيين وقت `revalidate` إلى `60`، سيرى جميع الزوار نفس النسخة المولدة من موقعك لمدة دقيقة واحدة. الطريقة الوحيدة لإبطال التخزين المؤقت هي من خلال زيارة شخص ما لتلك الصفحة بعد مرور الدقيقة.
+
+بدءًا من الإصدار `v12.2.0`، يدعم Next.js التحديث التدريجي للصفحات الثابتة عند الطلب لمسح التخزين المؤقت لـ Next.js يدويًا لصفحة معينة. وهذا يسهل تحديث موقعك عندما:
+
+- يتم إنشاء محتوى جديد أو تحديثه من نظام إدارة المحتوى (CMS)
+- تتغير بيانات التجارة الإلكترونية (السعر، الوصف، الفئة، التقييمات، إلخ.)
+
+داخل `getStaticProps`، لا تحتاج إلى تحديد `revalidate` لاستخدام إعادة التحقق عند الطلب. إذا تم حذف `revalidate`، سيستخدم Next.js القيمة الافتراضية `false` (لا إعادة تحقق) وسيعيد التحقق من الصفحة عند الطلب فقط عند استدعاء `revalidate()`.
+
+> **معلومة مفيدة**: لن يتم تنفيذ [البرمجيات الوسيطة](/docs/pages/building-your-application/routing/middleware) لطلبات ISR عند الطلب. بدلاً من ذلك، استدعِ `revalidate()` على المسار _الدقيق_ الذي تريد إعادة التحقق منه. على سبيل المثال، إذا كان لديك `pages/blog/[slug].js` وإعادة توجيه من `/post-1` -> `/blog/post-1`، فستحتاج إلى استدعاء `res.revalidate('/blog/post-1')`.
+
+### استخدام إعادة التحقق عند الطلب
+
+أولاً، قم بإنشاء رمز سري يعرفه فقط تطبيق Next.js الخاص بك. سيتم استخدام هذا السر لمنع الوصول غير المصرح به إلى مسار API إعادة التحقق. يمكنك الوصول إلى المسار (إما يدويًا أو باستخدام webhook) باستخدام هيكل URL التالي:
+
+```bash filename="Terminal"
+https://<your-site.com>/api/revalidate?secret=<token>
+```
+
+بعد ذلك، أضف السر كـ [متغير بيئة](/docs/pages/building-your-application/configuring/environment-variables) إلى تطبيقك. أخيرًا، قم بإنشاء مسار API إعادة التحقق:
+
+```js filename="pages/api/revalidate.js"
+export default async function handler(req, res) {
+  // التحقق من السر للتأكد من أن هذا طلب صالح
+  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
+    return res.status(401).json({ message: 'Invalid token' })
+  }
+
+  try {
+    // يجب أن يكون هذا المسار الفعلي وليس مسارًا معاد توجيهه
+    // على سبيل المثال، لـ "/blog/[slug]" يجب أن يكون "/blog/post-1"
+    await res.revalidate('/path-to-revalidate')
+    return res.json({ revalidated: true })
+  } catch (err) {
+    // إذا كان هناك خطأ، سيستمر Next.js
+    // في عرض آخر صفحة تم توليدها بنجاح
+    return res.status(500).send('Error revalidating')
+  }
+}
+```
+
+[شاهد العرض التوضيحي لدينا](https://on-demand-isr.vercel.app) لرؤية إعادة التحقق عند الطلب في العمل وتقديم الملاحظات.
+
+### اختبار ISR عند الطلب أثناء التطوير
+
+عند التشغيل محليًا باستخدام `next dev`، يتم استدعاء `getStaticProps` عند كل طلب. للتحقق من أن تكوين ISR عند الطلب صحيح، ستحتاج إلى إنشاء [بناء إنتاج](/docs/pages/api-reference/next-cli#build) وتشغيل [خادم الإنتاج](/docs/pages/api-reference/next-cli#production):
+
+```bash filename="Terminal"
+$ next build
+$ next start
+```
+
+ثم، يمكنك تأكيد أن الصفحات الثابتة قد تم إعادة التحقق منها بنجاح.
+
+## التعامل مع الأخطاء وإعادة التحقق
+
+إذا حدث خطأ داخل `getStaticProps` عند التعامل مع التوليد في الخلفية، أو إذا قمت برمي خطأ يدويًا، ستستمر الصفحة الأخيرة التي تم توليدها بنجاح في الظهور. في الطلب التالي، سيحاول Next.js استدعاء `getStaticProps` مرة أخرى.
+
+```jsx
+export async function getStaticProps() {
+  // إذا ألقى هذا الطلب خطأ غير معالج، فلن يقوم Next.js
+  // بإبطال الصفحة المعروضة حاليًا وسيتم
+  // إعادة محاولة getStaticProps في الطلب التالي.
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  if (!res.ok) {
+    // إذا كان هناك خطأ في الخادم، قد ترغب في
+    // إلقاء خطأ بدلاً من الإرجاع حتى لا يتم تحديث التخزين المؤقت
+    // حتى الطلب الناجح التالي.
+    throw new Error(`Failed to fetch posts, received status ${res.status}`)
+  }
+
+  // إذا كان الطلب ناجحًا، قم بإرجاع المنشورات
+  // وإعادة التحقق كل 10 ثوانٍ.
+  return {
+    props: {
+      posts,
+    },
+    revalidate: 10,
+  }
+}
+```
+
+## الاستضافة الذاتية لـ ISR
+
+يعمل التحديث التدريجي للصفحات الثابتة (ISR) على [مواقع Next.js المستضافة ذاتيًا](/docs/pages/building-your-application/deploying#self-hosting) مباشرة عند استخدام `next start`.
+
+يمكنك استخدام هذا الأسلوب عند النشر على منسقات الحاويات مثل [Kubernetes](https://kubernetes.io/) أو [HashiCorp Nomad](https://www.nomadproject.io/). افتراضيًا، سيتم تخزين الأصول المولدة في الذاكرة على كل pod. وهذا يعني أن كل pod سيكون لديه نسخته الخاصة من الملفات الثابتة. قد يتم عرض بيانات قديمة حتى يتم الوصول إلى ذلك الـ pod المحدد بواسطة طلب.
+
+لضمان الاتساق عبر جميع الـ pods، يمكنك تعطيل التخزين المؤقت في الذاكرة. سيخبر هذا خادم Next.js بالاعتماد فقط على الأصول المولدة بواسطة ISR في نظام الملفات.
+
+يمكنك استخدام نقطة تركيب شبكة مشتركة في Kubernetes pods (أو إعداد مشابه) لإعادة استخدام نفس تخزين نظام الملفات بين الحاويات المختلفة. بمشاركة نفس نقطة التركيب، سيتم أيضًا مشاركة مجلد `.next` الذي يحتوي على تخزين `next/image` المؤقت وإعادة استخدامه.
+
+لتعطيل التخزين المؤقت في الذاكرة، قم بتعيين `isrMemoryCacheSize` إلى `0` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    // القيمة الافتراضية 50MB
+    isrMemoryCacheSize: 0, // حجم التخزين المؤقت بالبايت
+  },
+}
+```
+
+> **معلومة مفيدة**: قد تحتاج إلى النظر في حالة السباق بين عدة pods تحاول تحديث التخزين المؤقت في نفس الوقت، اعتمادًا على كيفية تكوين نقطة التركيب المشتركة.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                 |
+| --------- | --------------------------------------------------------------------------------------- |
+| `v12.2.0` | أصبح ISR عند الطلب مستقرًا                                                                 |
+| `v12.1.0` | تمت إضافة ISR عند الطلب (بيتا).                                                             |
+| `v12.0.0` | تمت إضافة [الاسترجاع باستخدام ISR مع وعي بالروبوتات](https://nextjs.org/blog/next-12#bot-aware-isr-fallback). |
+| `v9.5.0`  | تمت إضافة المسار الأساسي.                                                                        |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/05-client-side.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/05-client-side.mdx
new file mode 100644
index 00000000..e23f3851
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/05-client-side.mdx
@@ -0,0 +1,72 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:54:13.975Z
+title: جلب البيانات من جانب العميل
+description: تعرف على جلب البيانات من جانب العميل، وكيفية استخدام SWR، وهي مكتبة خطافات React لجلب البيانات التي تتعامل مع التخزين المؤقت، وإعادة التحقق، وتتبع التركيز، وإعادة الجلب على فترات والمزيد.
+---
+
+جلب البيانات من جانب العميل مفيد عندما لا تتطلب صفحتك فهرسة محركات البحث (SEO)، أو عندما لا تحتاج إلى تقديم بياناتك مسبقًا، أو عندما يحتاج محتوى صفحاتك إلى التحديث بشكل متكرر. على عكس واجهات برمجة التطبيقات الخاصة بعرض جانب الخادم (server-side rendering)، يمكنك استخدام جلب البيانات من جانب العميل على مستوى المكون.
+
+إذا تم ذلك على مستوى الصفحة، يتم جلب البيانات في وقت التشغيل، ويتم تحديث محتوى الصفحة مع تغير البيانات. عند استخدامه على مستوى المكون، يتم جلب البيانات في وقت تحميل المكون، ويتم تحديث محتوى المكون مع تغير البيانات.
+
+من المهم ملاحظة أن استخدام جلب البيانات من جانب العميل يمكن أن يؤثر على أداء تطبيقك وسرعة تحميل صفحاتك. وذلك لأن جلب البيانات يتم في وقت تحميل المكون أو الصفحات، ولا يتم تخزين البيانات مؤقتًا.
+
+## جلب البيانات من جانب العميل باستخدام useEffect
+
+يوضح المثال التالي كيف يمكنك جلب البيانات من جانب العميل باستخدام خطاف useEffect.
+
+```jsx
+import { useState, useEffect } from 'react'
+
+function Profile() {
+  const [data, setData] = useState(null)
+  const [isLoading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/profile-data')
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+        setLoading(false)
+      })
+  }, [])
+
+  if (isLoading) return <p>Loading...</p>
+  if (!data) return <p>No profile data</p>
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <p>{data.bio}</p>
+    </div>
+  )
+}
+```
+
+## جلب البيانات من جانب العميل باستخدام SWR
+
+قام فريق Next.js بإنشاء مكتبة خطافات React لجلب البيانات تسمى [**SWR**](https://swr.vercel.app/). يوصى بها بشدة إذا كنت تقوم بجلب البيانات من جانب العميل. حيث تتعامل مع التخزين المؤقت، وإعادة التحقق، وتتبع التركيز، وإعادة الجلب على فترات، والمزيد.
+
+باستخدام نفس المثال أعلاه، يمكننا الآن استخدام SWR لجلب بيانات الملف الشخصي. سيقوم SWR تلقائيًا بتخزين البيانات مؤقتًا لنا وسيعيد التحقق من البيانات إذا أصبحت قديمة.
+
+لمزيد من المعلومات حول استخدام SWR، راجع [وثائق SWR](https://swr.vercel.app/docs/getting-started).
+
+```jsx
+import useSWR from 'swr'
+
+const fetcher = (...args) => fetch(...args).then((res) => res.json())
+
+function Profile() {
+  const { data, error } = useSWR('/api/profile-data', fetcher)
+
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <p>{data.bio}</p>
+    </div>
+  )
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/index.mdx
new file mode 100644
index 00000000..650d3791
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/03-data-fetching/index.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:54:19.416Z
+title: جلب البيانات
+description: يسمح لك Next.js بجلب البيانات بطرق متعددة، مع التصيير المسبق، التصيير من جانب الخادم أو إنشاء الموقع الثابت، والتجديد الثابت التدريجي. تعلم كيفية إدارة بيانات تطبيقك في Next.js.
+---
+
+يسمح جلب البيانات في Next.js بعرض محتواك بطرق مختلفة، اعتمادًا على حالة استخدام تطبيقك. يتضمن ذلك التصيير المسبق باستخدام **التصيير من جانب الخادم (Server-side Rendering)** أو **التوليد الثابت (Static Generation)**، وتحديث أو إنشاء المحتوى أثناء التشغيل باستخدام **التجديد الثابت التدريجي (Incremental Static Regeneration)**.
+
+## أمثلة
+
+- [مثال WordPress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress)([عرض تجريبي](https://next-blog-wordpress.vercel.app))
+- [بداية مدونة باستخدام ملفات markdown](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) ([عرض تجريبي](https://next-blog-starter.vercel.app/))
+- [مثال DatoCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([عرض تجريبي](https://next-blog-datocms.vercel.app/))
+- [مثال TakeShape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([عرض تجريبي](https://next-blog-takeshape.vercel.app/))
+- [مثال Sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([عرض تجريبي](https://next-blog-sanity.vercel.app/))
+- [مثال Prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([عرض تجريبي](https://next-blog-prismic.vercel.app/))
+- [مثال Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([عرض تجريبي](https://next-blog-contentful.vercel.app/))
+- [مثال Strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([عرض تجريبي](https://next-blog-strapi.vercel.app/))
+- [مثال Prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([عرض تجريبي](https://next-blog-prepr.vercel.app/))
+- [مثال Agility CMS](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([عرض تجريبي](https://next-blog-agilitycms.vercel.app/))
+- [مثال Cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([عرض تجريبي](https://next-blog-cosmic.vercel.app/))
+- [مثال ButterCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([عرض تجريبي](https://next-blog-buttercms.vercel.app/))
+- [مثال Storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([عرض تجريبي](https://next-blog-storyblok.vercel.app/))
+- [مثال GraphCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([عرض تجريبي](https://next-blog-graphcms.vercel.app/))
+- [مثال Kontent](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([عرض تجريبي](https://next-blog-kontent.vercel.app/))
+- [عرض تجريبي لـ Static Tweet](https://static-tweet.vercel.app/)
+- [مثال Enterspeed](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([عرض تجريبي](https://next-blog-demo.enterspeed.com/))
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/01-css-modules.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/01-css-modules.mdx
new file mode 100644
index 00000000..453f6d69
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/01-css-modules.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:43.402Z
+title: وحدات CSS (CSS Modules)
+description: تنسيق تطبيق Next.js الخاص بك باستخدام وحدات CSS (CSS Modules).
+source: app/building-your-application/styling/css-modules
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/02-tailwind-css.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/02-tailwind-css.mdx
new file mode 100644
index 00000000..47db3148
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/02-tailwind-css.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:43.348Z
+title: Tailwind CSS
+description: تنسيق تطبيق Next.js الخاص بك باستخدام Tailwind CSS.
+source: app/building-your-application/styling/tailwind-css
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
new file mode 100644
index 00000000..1a0db4ab
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:40.424Z
+title: CSS-in-JS
+description: استخدام مكتبات CSS-in-JS مع Next.js
+source: app/building-your-application/styling/css-in-js
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/04-sass.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/04-sass.mdx
new file mode 100644
index 00000000..20c782cc
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/04-sass.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:39.942Z
+title: Sass
+description: تعلم كيفية استخدام Sass في تطبيق Next.js الخاص بك.
+source: app/building-your-application/styling/sass
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/index.mdx
new file mode 100644
index 00000000..3eeca5c6
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/04-styling/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:43.341Z
+title: التنسيقات
+description: تعرف على الطرق المختلفة لتنسيق تطبيق Next.js الخاص بك.
+source: app/building-your-application/styling
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/01-images.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/01-images.mdx
new file mode 100644
index 00000000..ac81340f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/01-images.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:42.346Z
+title: تحسين الصور
+nav_title: الصور
+description: قم بتحسين صورك باستخدام مكون `next/image` المدمج.
+source: app/building-your-application/optimizing/images
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/02-fonts.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/02-fonts.mdx
new file mode 100644
index 00000000..557603e2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/02-fonts.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:42.485Z
+title: تحسين الخطوط
+nav_title: الخطوط
+description: قم بتحسين خطوط الويب لتطبيقك باستخدام أدوات التحميل المدمجة `next/font`.
+source: 'app/building-your-application/optimizing/fonts'
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/03-scripts.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/03-scripts.mdx
new file mode 100644
index 00000000..1abe6873
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/03-scripts.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:35.429Z
+title: تحسين البرامج النصية (Scripts)
+nav_title: البرامج النصية
+description: تحسين برامج الطرف الثالث (3rd party scripts) باستخدام مكون Script المدمج.
+source: app/building-your-application/optimizing/scripts
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/05-static-assets.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/05-static-assets.mdx
new file mode 100644
index 00000000..d07dfd5e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/05-static-assets.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:34.948Z
+title: الموارد الثابتة
+description: يسمح لك Next.js بتقديم ملفات ثابتة مثل الصور في دليل `public`. يمكنك تعلم كيفية عمل ذلك هنا.
+source: app/building-your-application/optimizing/static-assets
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/06-lazy-loading.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/06-lazy-loading.mdx
new file mode 100644
index 00000000..019050be
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/06-lazy-loading.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:31.974Z
+title: التحميل الكسول (Lazy Loading)
+description: تحميل المكتبات المستوردة ومكونات React بشكل كسول لتحسين أداء تحميل التطبيق.
+source: app/building-your-application/optimizing/lazy-loading
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx
new file mode 100644
index 00000000..edb53bee
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:30.537Z
+title: التحليلات
+description: قياس وتتبع أداء الصفحة باستخدام Next.js Speed Insights
+source: app/building-your-application/optimizing/analytics
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/08-open-telemetry.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/08-open-telemetry.mdx
new file mode 100644
index 00000000..d4c046db
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/08-open-telemetry.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:25.934Z
+title: OpenTelemetry
+description: تعلم كيفية أتمتة تطبيق Next.js الخاص بك باستخدام OpenTelemetry.
+source: app/building-your-application/optimizing/open-telemetry
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/09-instrumentation.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/09-instrumentation.mdx
new file mode 100644
index 00000000..a0ef85f3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/09-instrumentation.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:25.999Z
+title: أداة القياس (Instrumentation)
+description: تعلم كيفية استخدام أداة القياس لتشغيل التعليمات البرمجية عند بدء تشغيل الخادم في تطبيق Next.js الخاص بك
+source: app/building-your-application/optimizing/instrumentation
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/10-testing.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/10-testing.mdx
new file mode 100644
index 00000000..1ff1d210
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/10-testing.mdx
@@ -0,0 +1,543 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:56:50.649Z
+title: الاختبار
+description: تعلم كيفية إعداد Next.js مع ثلاث أدوات اختبار شائعة الاستخدام — Cypress وPlaywright وJest ومكتبة React Testing Library.
+---
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [Next.js مع Cypress](https://github.com/vercel/next.js/tree/canary/examples/with-cypress)
+- [Next.js مع Playwright](https://github.com/vercel/next.js/tree/canary/examples/with-playwright)
+- [Next.js مع Jest ومكتبة React Testing Library](https://github.com/vercel/next.js/tree/canary/examples/with-jest)
+- [Next.js مع Vitest](https://github.com/vercel/next.js/tree/canary/examples/with-vitest)
+
+</details>
+
+تعلم كيفية إعداد Next.js مع أدوات الاختبار الشائعة: [Cypress](#cypress)، [Playwright](#playwright)، و[Jest مع مكتبة React Testing Library](#jest-and-react-testing-library).
+
+## Cypress
+
+Cypress هو مشغل اختبار يُستخدم لـ**اختبار النهاية إلى النهاية (E2E)** و**اختبار المكونات**.
+
+### البدء السريع
+
+يمكنك استخدام `create-next-app` مع [مثال with-cypress](https://github.com/vercel/next.js/tree/canary/examples/with-cypress) للبدء بسرعة.
+
+```bash filename="Terminal"
+npx create-next-app@latest --example with-cypress with-cypress-app
+```
+
+### الإعداد اليدوي
+
+للبدء مع Cypress، قم بتثبيت حزمة `cypress`:
+
+```bash filename="Terminal"
+npm install --save-dev cypress
+```
+
+أضف Cypress إلى حقل `scripts` في `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "cypress:open": "cypress open"
+  }
+}
+```
+
+شغّل Cypress لأول مرة لإنشاء أمثلة تستخدم هيكل المجلدات الموصى به:
+
+```bash filename="Terminal"
+npm run cypress:open
+```
+
+يمكنك الاطلاع على الأمثلة المُنشأة وقسم [كتابة أول اختبار لك](https://docs.cypress.io/guides/getting-started/writing-your-first-test) في وثائق Cypress للتعرف على كيفية استخدامه.
+
+### هل يجب استخدام اختبارات E2E أم اختبارات المكونات؟
+
+تحتوي [وثائق Cypress على دليل](https://docs.cypress.io/guides/core-concepts/testing-types) يوضح الفرق بين هذين النوعين من الاختبارات ومتى يكون كل منهما مناسبًا للاستخدام.
+
+### إنشاء أول اختبار E2E باستخدام Cypress
+
+بافتراض وجود صفحتي Next.js التاليتين:
+
+```jsx filename="pages/index.js"
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <nav>
+      <h1>الصفحة الرئيسية</h1>
+      <Link href="/about">حول</Link>
+    </nav>
+  )
+}
+```
+
+```jsx filename="pages/about.js"
+export default function About() {
+  return (
+    <div>
+      <h1>صفحة حول</h1>
+      <Link href="/">الصفحة الرئيسية</Link>
+    </div>
+  )
+}
+```
+
+أضف اختبارًا للتحقق من عمل التنقل بشكل صحيح:
+
+```js filename="cypress/e2e/app.cy.js"
+describe('التنقل', () => {
+  it('يجب الانتقال إلى صفحة حول', () => {
+    // ابدأ من الصفحة الرئيسية
+    cy.visit('http://localhost:3000/')
+
+    // ابحث عن رابط يحتوي على "about" وانقر عليه
+    cy.get('a[href*="about"]').click()
+
+    // يجب أن يتضمن الرابط الجديد "/about"
+    cy.url().should('include', '/about')
+
+    // يجب أن تحتوي الصفحة الجديدة على h1 بعنوان "صفحة حول"
+    cy.get('h1').contains('صفحة حول')
+  })
+})
+```
+
+يمكنك استخدام `cy.visit("/")` بدلاً من `cy.visit("http://localhost:3000/")` إذا أضفت `baseUrl: 'http://localhost:3000'` إلى ملف تكوين `cypress.config.js`.
+
+### إنشاء أول اختبار مكونات باستخدام Cypress
+
+تقوم اختبارات المكونات ببناء وتثبيت مكون معين دون الحاجة إلى تجميع التطبيق بالكامل أو تشغيل خادم. هذا يسمح باختبارات أكثر كفاءة مع توفير نفس واجهة برمجة التطبيقات المستخدمة في اختبارات E2E.
+
+> **معلومة مفيدة**: نظرًا لأن اختبارات المكونات لا تشغل خادم Next.js، فإن ميزات مثل `<Image />` و`getServerSideProps` التي تعتمد على وجود خادم لن تعمل افتراضيًا. راجع [وثائق Cypress لـ Next.js](https://docs.cypress.io/guides/component-testing/react/overview#Nextjs) للحصول على أمثلة حول جعل هذه الميزات تعمل في اختبارات المكونات.
+
+بافتراض نفس المكونات من القسم السابق، أضف اختبارًا للتحقق من عرض المكون للنتائج المتوقعة:
+
+```jsx filename="pages/about.cy.js"
+import AboutPage from './about.js'
+
+describe('<AboutPage />', () => {
+  it('يجب عرض المحتوى المتوقع', () => {
+    // ثبّت مكون React لصفحة حول
+    cy.mount(<AboutPage />)
+
+    // يجب أن تحتوي الصفحة الجديدة على h1 بعنوان "صفحة حول"
+    cy.get('h1').contains('صفحة حول')
+
+    // تحقق من وجود رابط بالمسار المتوقع
+    // *اتباع* الرابط أكثر ملاءمة لاختبار E2E
+    cy.get('a[href="/"]').should('be.visible')
+  })
+})
+```
+
+### تشغيل اختبارات Cypress
+
+#### اختبارات E2E
+
+نظرًا لأن اختبارات E2E في Cypress تختبر تطبيق Next.js حقيقي، فإنها تتطلب تشغيل خادم Next.js قبل بدء Cypress. نوصي بتشغيل الاختبارات ضد كود الإنتاج لمحاكاة سلوك التطبيق الفعلي.
+
+قم بتشغيل `npm run build` ثم `npm run start`، ثم شغّل `npm run cypress -- --e2e` في نافذة طرفية أخرى لبدء Cypress وتشغيل مجموعة اختبارات E2E.
+
+> **معلومة مفيدة**: بدلاً من ذلك، يمكنك تثبيت حزمة `start-server-and-test` وإضافتها إلى حقل `scripts` في `package.json`: `"test": "start-server-and-test start http://localhost:3000 cypress"` لبدء خادم إنتاج Next.js بالتزامن مع Cypress. تذكر إعادة بناء التطبيق بعد أي تغييرات جديدة.
+
+#### اختبارات المكونات
+
+شغّل `npm run cypress -- --component` لبدء Cypress وتنفيذ مجموعة اختبارات المكونات.
+
+### التحضير للتكامل المستمر (CI)
+
+ستلاحظ أن تشغيل Cypress حتى الآن فتح متصفحًا تفاعليًا وهو غير مثالي لبيئات CI. يمكنك أيضًا تشغيل Cypress بدون واجهة مرئية باستخدام أمر `cypress run`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    //...
+    "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
+    "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
+    "component": "cypress open --component",
+    "component:headless": "cypress run --component"
+  }
+}
+```
+
+يمكنك معرفة المزيد عن Cypress والتكامل المستمر من هذه المصادر:
+
+- [وثائق التكامل المستمر لـ Cypress](https://docs.cypress.io/guides/continuous-integration/introduction)
+- [دليل Cypress لـ GitHub Actions](https://on.cypress.io/github-actions)
+- [إجراء Cypress الرسمي لـ GitHub](https://github.com/cypress-io/github-action)
+- [Cypress Discord](https://discord.com/invite/cypress)
+
+## Playwright
+
+Playwright هو إطار اختبار يتيح لك أتمتة Chromium وFirefox وWebKit باستخدام واجهة برمجة تطبيقات واحدة. يمكنك استخدامه لكتابة اختبارات **النهاية إلى النهاية (E2E)** و**التكامل** عبر جميع المنصات.
+
+### البدء السريع
+
+أسرع طريقة للبدء هي استخدام `create-next-app` مع [مثال with-playwright](https://github.com/vercel/next.js/tree/canary/examples/with-playwright). سيؤدي هذا إلى إنشاء مشروع Next.js مكتمل مع إعداد Playwright بالكامل.
+
+```bash filename="Terminal"
+npx create-next-app@latest --example with-playwright with-playwright-app
+```
+
+### الإعداد اليدوي
+
+يمكنك أيضًا استخدام `npm init playwright` لإضافة Playwright إلى مشروع `NPM` موجود.
+
+للبدء يدويًا مع Playwright، قم بتثبيت حزمة `@playwright/test`:
+
+```bash filename="Terminal"
+npm install --save-dev @playwright/test
+```
+
+أضف Playwright إلى حقل `scripts` في `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test:e2e": "playwright test"
+  }
+}
+```
+
+### إنشاء أول اختبار E2E باستخدام Playwright
+
+بافتراض وجود صفحتي Next.js التاليتين:
+
+```jsx filename="pages/index.js"
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <nav>
+      <Link href="/about">حول</Link>
+    </nav>
+  )
+}
+```
+
+```jsx filename="pages/about.js"
+export default function About() {
+  return (
+    <div>
+      <h1>صفحة حول</h1>
+    </div>
+  )
+}
+```
+
+أضف اختبارًا للتحقق من عمل التنقل بشكل صحيح:
+
+```ts filename="e2e/example.spec.ts" switcher
+import { test, expect } from '@playwright/test'
+
+test('يجب الانتقال إلى صفحة حول', async ({ page }) => {
+  // ابدأ من الصفحة الرئيسية (يتم تعيين baseURL عبر webServer في ملف playwright.config.ts)
+  await page.goto('http://localhost:3000/')
+  // ابحث عن عنصر يحتوي على نص 'حول' وانقر عليه
+  await page.click('text=حول')
+  // يجب أن يكون الرابط الجديد "/about" (يتم استخدام baseURL هنا)
+  await expect(page).toHaveURL('http://localhost:3000/about')
+  // يجب أن تحتوي الصفحة الجديدة على h1 بعنوان "صفحة حول"
+  await expect(page.locator('h1')).toContainText('صفحة حول')
+})
+```
+
+```js filename="e2e/example.spec.js" switcher
+import { test, expect } from '@playwright/test'
+
+test('يجب الانتقال إلى صفحة حول', async ({ page }) => {
+  // ابدأ من الصفحة الرئيسية (يتم تعيين baseURL عبر webServer في ملف playwright.config.ts)
+  await page.goto('http://localhost:3000/')
+  // ابحث عن عنصر يحتوي على نص 'حول' وانقر عليه
+  await page.click('text=حول')
+  // يجب أن يكون الرابط الجديد "/about" (يتم استخدام baseURL هنا)
+  await expect(page).toHaveURL('http://localhost:3000/about')
+  // يجب أن تحتوي الصفحة الجديدة على h1 بعنوان "صفحة حول"
+  await expect(page.locator('h1')).toContainText('صفحة حول')
+})
+```
+
+يمكنك استخدام `page.goto("/")` بدلاً من `page.goto("http://localhost:3000/")` إذا أضفت [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) إلى ملف تكوين `playwright.config.ts`.
+
+### تشغيل اختبارات Playwright
+
+نظرًا لأن Playwright يختبر تطبيق Next.js حقيقي، فإنه يتطلب تشغيل خادم Next.js قبل بدء Playwright. يُنصح بتشغيل الاختبارات ضد كود الإنتاج لمحاكاة سلوك التطبيق الفعلي.
+
+قم بتشغيل `npm run build` ثم `npm run start`، ثم شغّل `npm run test:e2e` في نافذة طرفية أخرى لتشغيل اختبارات Playwright.
+
+> **معلومة مفيدة**: بدلاً من ذلك، يمكنك استخدام ميزة [`webServer`](https://playwright.dev/docs/test-webserver/) للسماح لـ Playwright ببدء خادم التطوير والانتظار حتى يصبح جاهزًا بالكامل.
+
+### تشغيل Playwright على التكامل المستمر (CI)
+
+سيقوم Playwright افتراضيًا بتشغيل اختباراتك في [وضع headless](https://playwright.dev/docs/ci#running-headed). لتثبيت جميع تبعيات Playwright، شغّل `npx playwright install-deps`.
+
+يمكنك معرفة المزيد عن Playwright والتكامل المستمر من هذه المصادر:
+
+- [البدء مع Playwright](https://playwright.dev/docs/intro)
+- [استخدام خادم تطوير](https://playwright.dev/docs/test-webserver/)
+- [Playwright على موفر CI الخاص بك](https://playwright.dev/docs/ci)
+- [Playwright Discord](https://discord.com/invite/playwright-807756831384403968)
+
+## Jest ومكتبة React Testing Library
+
+يتم استخدام Jest ومكتبة React Testing Library معًا بشكل متكرر لـ**اختبار الوحدة**. هناك ثلاث طرق يمكنك من خلالها البدء باستخدام Jest داخل تطبيق Next.js الخاص بك:
+
+1. استخدام أحد [أمثلة البدء السريع](#quickstart-2)
+2. مع [مُجمّع Rust لـ Next.js](#setting-up-jest-with-the-rust-compiler)
+3. مع [Babel](#setting-up-jest-with-babel)
+
+ستغطي الأقسام التالية كيفية إعداد Jest مع كل من هذه الخيارات:
+
+### البدء السريع
+
+يمكنك استخدام `create-next-app` مع [مثال with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) للبدء بسرعة مع Jest ومكتبة React Testing Library:
+
+```bash filename="Terminal"
+npx create-next-app@latest --example with-jest with-jest-app
+```
+
+### إعداد Jest (مع مُجمّع Rust)
+
+منذ إصدار [Next.js 12](https://nextjs.org/blog/next-12)، أصبح لدى Next.js الآن تكوين مدمج لـ Jest.
+
+لإعداد Jest، قم بتثبيت `jest`، `jest-environment-jsdom`، `@testing-library/react`، `@testing-library/jest-dom`:
+
+```bash filename="Terminal"
+npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
+```
+
+قم بإنشاء ملف `jest.config.mjs` في الدليل الجذري لمشروعك وأضف ما يلي:
+
+```js filename="jest.config.mjs"
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // حدد مسار تطبيق Next.js لتحميل next.config.js وملفات .env في بيئة الاختبار
+  dir: './',
+})
+
+// أضف أي تكوين مخصص لتمريره إلى Jest
+/** @type {import('jest').Config} */
+const config = {
+  // أضف خيارات إعداد إضافية قبل تشغيل كل اختبار
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// يتم تصدير createJestConfig بهذه الطريقة لضمان أن next/jest يمكنه تحميل تكوين Next.js غير المتزامن
+export default createJestConfig(config)
+```
+
+تحت الغطاء، يقوم `next/jest` بتكوين Jest تلقائيًا لك، بما في ذلك:
+
+- إعداد `transform` باستخدام [SWC](/docs/architecture/nextjs-compiler)
+- المحاكاة التلقائية لملفات الأنماط (`.css`، `.module.css`، ومتغيرات scss الخاصة بها)، واستيراد الصور و[`next/font`](/docs/pages/building-your-application/optimizing/fonts)
+- تحميل `.env` (وجميع المتغيرات) إلى `process.env`
+- تجاهل `node_modules` من تحويلات الاختبار
+- تجاهل `.next` من تحويلات الاختبار
+- تحميل `next.config.js` للعلامات التي تمكّن تحويلات SWC
+
+> **معلومة مفيدة**: لاختبار متغيرات البيئة مباشرة، قم بتحميلها يدويًا في سيناريو إعداد منفصل أو في ملف `jest.config.js`. لمزيد من المعلومات، راجع [متغيرات بيئة الاختبار](/docs/pages/building-your-application/configuring/environment-variables#test-environment-variables).
+
+### إعداد جيست (مع Babel)
+
+إذا اخترت عدم استخدام [مُصرِّف Rust](/docs/architecture/nextjs-compiler)، فستحتاج إلى تكوين جيست يدويًا وتثبيت `babel-jest` و `identity-obj-proxy` بالإضافة إلى الحزم المذكورة أعلاه.
+
+إليك الخيارات الموصى بها لتكوين جيست لـ Next.js:
+
+```js filename="jest.config.js"
+module.exports = {
+  collectCoverage: true,
+  // في node 14.x، موفر التغطية v8 يوفر سرعة جيدة وتقريرًا جيدًا إلى حد ما
+  coverageProvider: 'v8',
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+    '!<rootDir>/out/**',
+    '!<rootDir>/.next/**',
+    '!<rootDir>/*.config.js',
+    '!<rootDir>/coverage/**',
+  ],
+  moduleNameMapper: {
+    // التعامل مع استيراد ملفات CSS (مع وحدات CSS)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // التعامل مع استيراد ملفات CSS (بدون وحدات CSS)
+    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+
+    // التعامل مع استيراد الصور
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
+
+    // التعامل مع أسماء الوحدات المختصرة
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+  },
+  // إضافة المزيد من خيارات الإعداد قبل تشغيل كل اختبار
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  testEnvironment: 'jsdom',
+  transform: {
+    // استخدام babel-jest لتحويل الاختبارات مع الإعداد المسبق next/babel
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+}
+```
+
+يمكنك معرفة المزيد حول كل خيار تكوين في [وثائق جيست](https://jestjs.io/docs/configuration).
+
+**التعامل مع صفحات الأنماط واستيراد الصور**
+
+لا تُستخدم صفحات الأنماط والصور في الاختبارات، ولكن استيرادها قد يتسبب في أخطاء، لذا سيحتاج إلى محاكاتها. أنشئ ملفات المحاكاة المشار إليها في التكوين أعلاه - `fileMock.js` و `styleMock.js` - داخل مجلد `__mocks__`:
+
+```js filename="__mocks__/fileMock.js"
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}
+```
+
+```js filename="__mocks__/styleMock.js"
+module.exports = {}
+```
+
+لمزيد من المعلومات حول التعامل مع الأصول الثابتة، يُرجى الرجوع إلى [وثائق جيست](https://jestjs.io/docs/webpack#handling-static-assets).
+
+**اختياري: توسيع جيست مع مطابقات مخصصة**
+
+يتضمن `@testing-library/jest-dom` مجموعة من [المطابقات المخصصة](https://github.com/testing-library/jest-dom#custom-matchers) الملائمة مثل `.toBeInTheDocument()` مما يجعل كتابة الاختبارات أسهل. يمكنك استيراد المطابقات المخصصة لكل اختبار عن طريق إضافة الخيار التالي إلى ملف تكوين جيست:
+
+```js filename="jest.config.js"
+setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
+```
+
+ثم، داخل `jest.setup.js`، أضف الاستيراد التالي:
+
+```js filename="jest.setup.js"
+import '@testing-library/jest-dom'
+```
+
+> تمت إزالة [`extend-expect` في الإصدار `v6.0`](https://github.com/testing-library/jest-dom/releases/tag/v6.0.0)، لذا إذا كنت تستخدم `@testing-library/jest-dom` قبل الإصدار 6، فستحتاج إلى استيراد `@testing-library/jest-dom/extend-expect` بدلاً من ذلك.
+
+إذا كنت بحاجة إلى إضافة المزيد من خيارات الإعداد قبل كل اختبار، فمن الشائع إضافتها إلى ملف `jest.setup.js` أعلاه.
+
+**اختياري: الاستيراد المطلق وأسماء مسارات الوحدات**
+
+إذا كان مشروعك يستخدم [أسماء مسارات الوحدات](/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases)، فستحتاج إلى تكوين جيست لحل الاستيراد عن طريق مطابقة خيار المسارات في ملف `jsconfig.json` مع خيار `moduleNameMapper` في ملف `jest.config.js`. على سبيل المثال:
+
+```json filename="tsconfig.json or jsconfig.json"
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+```js filename="jest.config.js"
+moduleNameMapper: {
+  '^@/components/(.*)$': '<rootDir>/components/$1',
+}
+```
+
+### إنشاء اختباراتك:
+
+**إضافة سكريبت اختبار إلى package.json**
+
+أضف تنفيذ جيست في وضع المراقبة إلى سكريبتات `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "jest --watch"
+  }
+}
+```
+
+سيقوم `jest --watch` بإعادة تشغيل الاختبارات عند تغيير ملف. لمزيد من خيارات واجهة سطر أوامر جيست، يُرجى الرجوع إلى [وثائق جيست](https://jestjs.io/docs/cli#reference).
+
+**إنشاء أول اختباراتك**
+
+مشروعك جاهز الآن لتشغيل الاختبارات. اتبع اصطلاح جيست بإضافة الاختبارات إلى مجلد `__tests__` في الدليل الجذري لمشروعك.
+
+على سبيل المثال، يمكننا إضافة اختبار للتحقق مما إذا كان مكون `<Home />` يعرض عنوانًا بنجاح:
+
+```jsx filename="__tests__/index.test.js"
+import { render, screen } from '@testing-library/react'
+import Home from '../pages/index'
+import '@testing-library/jest-dom'
+
+describe('Home', () => {
+  it('renders a heading', () => {
+    render(<Home />)
+
+    const heading = screen.getByRole('heading', {
+      name: /welcome to next\.js!/i,
+    })
+
+    expect(heading).toBeInTheDocument()
+  })
+})
+```
+
+اختياريًا، أضف [اختبار لقطة](https://jestjs.io/docs/snapshot-testing) لتتبع أي تغييرات غير متوقعة في مكون `<Home />`:
+
+```jsx filename="__tests__/snapshot.js"
+import { render } from '@testing-library/react'
+import Home from '../pages/index'
+
+it('renders homepage unchanged', () => {
+  const { container } = render(<Home />)
+  expect(container).toMatchSnapshot()
+})
+```
+
+> **معلومة جيدة**: لا يجب تضمين ملفات الاختبار داخل موجه الصفحات لأن أي ملف داخل موجه الصفحات يعتبر مسارًا.
+
+**تشغيل مجموعة الاختبارات الخاصة بك**
+
+شغّل `npm run test` لتشغيل مجموعة الاختبارات الخاصة بك. بعد نجاح أو فشل اختباراتك، ستلاحظ قائمة بأوامر جيست التفاعلية التي ستكون مفيدة عند إضافة المزيد من الاختبارات.
+
+لمزيد من القراءة، قد تجد هذه المصادر مفيدة:
+
+- [وثائق جيست](https://jestjs.io/docs/getting-started)
+- [وثائق مكتبة اختبار React](https://testing-library.com/docs/react-testing-library/intro/)
+- [ساحة الاختبار](https://testing-playground.com/) - استخدم ممارسات اختبار جيدة لمطابقة العناصر.
+
+## حزم وأمثلة المجتمع
+
+قام مجتمع Next.js بإنشاء حزم ومقالات قد تجدها مفيدة:
+
+- [next-router-mock](https://github.com/scottrippey/next-router-mock) لـ Storybook.
+- [اختبار معاينة نشرات Vercel مع Cypress](https://glebbahmutov.com/blog/develop-preview-test/) بواسطة Gleb Bahmutov.
+
+لمزيد من المعلومات حول ما يمكن قراءته بعد ذلك، نوصي بـ:
+
+    - pages/basic-features/environment-variables#test-environment-variables
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/index.mdx
new file mode 100644
index 00000000..d414541d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/05-optimizing/index.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:17.248Z
+title: التحسينات
+nav_title: التحسين
+description: حسّن تطبيق Next.js الخاص بك للحصول على أفضل أداء وتجربة مستخدم.
+source: app/building-your-application/optimizing
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/01-typescript.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/01-typescript.mdx
new file mode 100644
index 00000000..487f1b69
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/01-typescript.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:21.568Z
+title: TypeScript
+description: يوفر Next.js تجربة تطوير معتمدة على TypeScript كخيار أول لبناء تطبيق React الخاص بك.
+source: app/building-your-application/configuring/typescript
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/02-eslint.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/02-eslint.mdx
new file mode 100644
index 00000000..11594ecd
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/02-eslint.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:20.979Z
+title: ESLint
+description: يُبلغ Next.js عن أخطاء وتحذيرات ESLint أثناء عمليات البناء بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+source: app/building-your-application/configuring/eslint
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/03-environment-variables.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/03-environment-variables.mdx
new file mode 100644
index 00000000..98346da8
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/03-environment-variables.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:18.152Z
+title: متغيرات البيئة
+description: تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js الخاص بك.
+source: app/building-your-application/configuring/environment-variables
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/04-absolute-imports-and-module-aliases.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/04-absolute-imports-and-module-aliases.mdx
new file mode 100644
index 00000000..c81fb786
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/04-absolute-imports-and-module-aliases.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:08.413Z
+title: الاستيراد المطلق واختصارات مسار الوحدات (Absolute Imports and Module Path Aliases)
+description: تكوين اختصارات مسار الوحدات التي تتيح لك إعادة تعيين مسارات استيراد معينة.
+source: app/building-your-application/configuring/absolute-imports-and-module-aliases
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/05-src-directory.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/05-src-directory.mdx
new file mode 100644
index 00000000..47fc9fa7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/05-src-directory.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:00.841Z
+title: دليل `src`
+description: حفظ الصفحات ضمن دليل `src` كبديل عن دليل `pages` الأساسي.
+source: app/building-your-application/configuring/src-directory
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/06-mdx.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/06-mdx.mdx
new file mode 100644
index 00000000..64c3add2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/06-mdx.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:52.634Z
+title: MDX
+description: تعلم كيفية تكوين MDX لكتابة JSX في ملفات ماركداون الخاصة بك.
+source: app/building-your-application/configuring/mdx
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/07-amp.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/07-amp.mdx
new file mode 100644
index 00000000..b5c97a94
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/07-amp.mdx
@@ -0,0 +1,158 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:32.965Z
+title: AMP
+description: بإعدادات بسيطة ودون مغادرة React، يمكنك البدء في إضافة AMP وتحسين أداء وسرعة صفحاتك.
+---
+
+<details>
+  <summary>أمثلة</summary>
+  
+- [AMP](https://github.com/vercel/next.js/tree/canary/examples/amp)
+
+</details>
+
+مع Next.js يمكنك تحويل أي صفحة React إلى صفحة AMP، بإعدادات بسيطة ودون مغادرة React.
+
+يمكنك قراءة المزيد عن AMP في الموقع الرسمي [amp.dev](https://amp.dev/).
+
+## تمكين AMP
+
+لتمكين دعم AMP لصفحة ما، ولمعرفة المزيد حول إعدادات AMP المختلفة، اقرأ [وثائق API لـ `next/amp`](/docs/pages/building-your-application/configuring/amp).
+
+## محاذير
+
+- فقط CSS-in-JS مدعوم. [وحدات CSS](/docs/pages/building-your-application/styling) غير مدعومة حاليًا في صفحات AMP. يمكنك [المساهمة في دعم وحدات CSS لـ Next.js](https://github.com/vercel/next.js/issues/10549).
+
+## إضافة مكونات AMP
+
+يقدم مجتمع AMP [العديد من المكونات](https://amp.dev/documentation/components/) لجعل صفحات AMP أكثر تفاعلية. سيقوم Next.js تلقائيًا باستيراد جميع المكونات المستخدمة في الصفحة ولا حاجة لاستيراد نصوص مكونات AMP يدويًا:
+
+```jsx
+export const config = { amp: true }
+
+function MyAmpPage() {
+  const date = new Date()
+
+  return (
+    <div>
+      <p>بعض الوقت: {date.toJSON()}</p>
+      <amp-timeago
+        width="0"
+        height="15"
+        datetime={date.toJSON()}
+        layout="responsive"
+      >
+        .
+      </amp-timeago>
+    </div>
+  )
+}
+
+export default MyAmpPage
+```
+
+يستخدم المثال أعلاه مكون [`amp-timeago`](https://amp.dev/documentation/components/amp-timeago/?format=websites).
+
+بشكل افتراضي، يتم دائمًا استيراد أحدث نسخة من المكون. إذا كنت تريد تخصيص النسخة، يمكنك استخدام `next/head` كما في المثال التالي:
+
+```jsx
+import Head from 'next/head'
+
+export const config = { amp: true }
+
+function MyAmpPage() {
+  const date = new Date()
+
+  return (
+    <div>
+      <Head>
+        <script
+          async
+          key="amp-timeago"
+          custom-element="amp-timeago"
+          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
+        />
+      </Head>
+
+      <p>بعض الوقت: {date.toJSON()}</p>
+      <amp-timeago
+        width="0"
+        height="15"
+        datetime={date.toJSON()}
+        layout="responsive"
+      >
+        .
+      </amp-timeago>
+    </div>
+  )
+}
+
+export default MyAmpPage
+```
+
+## التحقق من صحة AMP
+
+يتم التحقق من صفحات AMP تلقائيًا باستخدام [amphtml-validator](https://www.npmjs.com/package/amphtml-validator) أثناء التطوير. ستظهر الأخطاء والتحذيرات في الطرفية التي بدأت منها Next.js.
+
+يتم أيضًا التحقق من الصفحات أثناء [تصدير HTML الثابت](/docs/pages/building-your-application/deploying/static-exports) وسيتم طباعة أي تحذيرات/أخطاء في الطرفية. أي أخطاء في AMP ستؤدي إلى خروج التصدير برمز حالة `1` لأن التصدير ليس AMP صالحًا.
+
+### مدققات مخصصة
+
+يمكنك إعداد مدقق AMP مخصص في `next.config.js` كما يلي:
+
+```js
+module.exports = {
+  amp: {
+    validator: './custom_validator.js',
+  },
+}
+```
+
+### تخطي التحقق من صحة AMP
+
+لتعطيل التحقق من صحة AMP أضف الكود التالي إلى `next.config.js`
+
+```js
+experimental: {
+  amp: {
+    skipValidation: true
+  }
+}
+```
+
+### AMP في تصدير HTML الثابت
+
+عند استخدام [تصدير HTML الثابت](/docs/pages/building-your-application/deploying/static-exports) لتصيير الصفحات مسبقًا بشكل ثابت، سيكتشف Next.js ما إذا كانت الصفحة تدعم AMP وسيغير سلوك التصدير بناءً على ذلك.
+
+على سبيل المثال، ستخرج صفحة AMP الهجينة `pages/about.js`:
+
+- `out/about.html` - صفحة HTML مع وقت تشغيل React من جانب العميل
+- `out/about.amp.html` - صفحة AMP
+
+وإذا كانت `pages/about.js` صفحة AMP فقط، فستخرج:
+
+- `out/about.html` - صفحة AMP محسنة
+
+سيقوم Next.js تلقائيًا بإدراج رابط للإصدار AMP من صفحتك في الإصدار HTML، لذا لا داعي للقيام بذلك يدويًا، مثل:
+
+```jsx
+<link rel="amphtml" href="/about.amp.html" />
+```
+
+وسيتضمن الإصدار AMP من صفحتك رابطًا للصفحة HTML:
+
+```jsx
+<link rel="canonical" href="/about" />
+```
+
+عند تمكين [`trailingSlash`](/docs/pages/api-reference/next-config-js/trailingSlash) ستكون الصفحات المصدرة لـ `pages/about.js`:
+
+- `out/about/index.html` - صفحة HTML
+- `out/about.amp/index.html` - صفحة AMP
+
+## TypeScript
+
+لا يحتوي AMP حاليًا على أنواع مدمجة لـ TypeScript، لكنها في خارطة طريقهم ([#13791](https://github.com/ampproject/amphtml/issues/13791)).
+
+كحل بديل، يمكنك إنشاء ملف يدويًا باسم `amp.d.ts` داخل مشروعك وإضافة هذه [الأنواع المخصصة](https://stackoverflow.com/a/50601125).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/08-babel.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/08-babel.mdx
new file mode 100644
index 00000000..362de27b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/08-babel.mdx
@@ -0,0 +1,67 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:42.649Z
+title: Babel
+description: توسيع الإعداد المسبق لـ Babel الذي يضيفه Next.js باستخدام التكوينات الخاصة بك.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [تخصيص تكوين Babel](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)
+
+</details>
+
+يضمّن Next.js الإعداد المسبق `next/babel` لتطبيقك، والذي يتضمن كل ما تحتاجه لتجميع تطبيقات React والشيفرة من جانب الخادم. ولكن إذا كنت ترغب في توسيع تكوينات Babel الافتراضية، فهذا ممكن أيضًا.
+
+## إضافة الإعدادات المسبقة والإضافات (Plugins)
+
+للبدء، تحتاج فقط إلى تعريف ملف `.babelrc` (أو `babel.config.js`) في الدليل الجذري لمشروعك. إذا تم العثور على مثل هذا الملف، فسيتم اعتباره **مصدر الحقيقة**، وبالتالي يحتاج إلى تعريف ما يحتاجه Next.js أيضًا، وهو الإعداد المسبق `next/babel`.
+
+إليك مثال لملف `.babelrc`:
+
+```json filename=".babelrc"
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}
+```
+
+يمكنك [إلقاء نظرة على هذا الملف](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/preset.ts) لمعرفة المزيد عن الإعدادات المسبقة المضمنة في `next/babel`.
+
+لإضافة إعدادات مسبقة/إضافات **بدون تكوينها**، يمكنك القيام بذلك بهذه الطريقة:
+
+```json filename=".babelrc"
+{
+  "presets": ["next/babel"],
+  "plugins": ["@babel/plugin-proposal-do-expressions"]
+}
+```
+
+## تخصيص الإعدادات المسبقة والإضافات
+
+لإضافة إعدادات مسبقة/إضافات **مع تكوين مخصص**، قم بذلك على الإعداد المسبق `next/babel` كما يلي:
+
+```json filename=".babelrc"
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-env": {},
+        "transform-runtime": {},
+        "styled-jsx": {},
+        "class-properties": {}
+      }
+    ]
+  ],
+  "plugins": []
+}
+```
+
+لمعرفة المزيد حول الخيارات المتاحة لكل تكوين، قم بزيارة موقع [توثيق Babel](https://babeljs.io/docs/).
+
+> **معلومة مفيدة**:
+>
+> - يستخدم Next.js [إصدار Node.js الحالي](https://github.com/nodejs/release#release-schedule) لعمليات التجميع من جانب الخادم.
+> - يجب الحفاظ على خيار `modules` في `"preset-env"` على `false`، وإلا سيتم إيقاف تقسيم الشيفرة (code splitting) في webpack.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/09-post-css.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/09-post-css.mdx
new file mode 100644
index 00000000..265599bd
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/09-post-css.mdx
@@ -0,0 +1,171 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:14.709Z
+title: PostCSS
+description: قم بتوسيع تكوين PostCSS والإضافات المضافة بواسطة Next.js باستخدام تكوينك الخاص.
+---
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مثال Tailwind CSS](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)
+
+</details>
+
+## السلوك الافتراضي
+
+يستخدم Next.js PostCSS لتحويل CSS لدعم [CSS المدمج](/docs/pages/building-your-application/styling).
+
+بدون أي تكوين، يقوم Next.js بتحويل CSS باستخدام التحويلات التالية:
+
+- [Autoprefixer](https://github.com/postcss/autoprefixer) يضيف بادئات المتصفحات تلقائيًا لقواعد CSS (حتى IE11).
+- يتم تصحيح [أخطاء Flexbox عبر المتصفحات](https://github.com/philipwalton/flexbugs) لتعمل وفقًا [للمواصفات](https://www.w3.org/TR/css-flexbox-1/).
+- يتم تحويل ميزات CSS الجديدة تلقائيًا لتكون متوافقة مع Internet Explorer 11:
+  - [خاصية `all`](https://developer.mozilla.org/docs/Web/CSS/all)
+  - [خصائص Break](https://developer.mozilla.org/docs/Web/CSS/break-after)
+  - [خاصية `font-variant`](https://developer.mozilla.org/docs/Web/CSS/font-variant)
+  - [خصائص Gap](https://developer.mozilla.org/docs/Web/CSS/gap)
+  - [نطاقات استعلامات الوسائط](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4)
+
+بشكل افتراضي، لا يتم تحويل [CSS Grid](https://www.w3.org/TR/css-grid-1/) و [الخصائص المخصصة](https://developer.mozilla.org/docs/Web/CSS/var) (متغيرات CSS) لدعم IE11.
+
+لتحويل [تخطيط CSS Grid](https://developer.mozilla.org/docs/Web/CSS/grid) لـ IE11، يمكنك إضافة التعليق التالي في أعلى ملف CSS الخاص بك:
+
+```css
+/* autoprefixer grid: autoplace */
+```
+
+يمكنك أيضًا تمكين دعم IE11 لـ [تخطيط CSS Grid](https://developer.mozilla.org/docs/Web/CSS/grid)
+في مشروعك بالكامل عن طريق تكوين autoprefixer بالإعدادات الموضحة أدناه (مطوية).
+راجع قسم ["تخصيص الإضافات"](#customizing-plugins) أدناه للمزيد من المعلومات.
+
+<details>
+  <summary>انقر لعرض التكوين لتمكين تخطيط CSS Grid</summary>
+
+```json filename="postcss.config.json"
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009",
+          "grid": "autoplace"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}
+```
+
+</details>
+
+لا يتم تحويل متغيرات CSS لأنه [ليس من الآمن القيام بذلك](https://github.com/MadLittleMods/postcss-css-variables#caveats).
+إذا كنت بحاجة إلى استخدام المتغيرات، ففكر في استخدام شيء مثل [متغيرات Sass](https://sass-lang.com/documentation/variables) التي يتم تحويلها بواسطة [Sass](https://sass-lang.com/).
+
+## تخصيص المتصفحات المستهدفة
+
+يسمح Next.js بتكوين المتصفحات المستهدفة (لـ [Autoprefixer](https://github.com/postcss/autoprefixer) وميزات CSS المحولة) عبر [Browserslist](https://github.com/browserslist/browserslist).
+
+لتخصيص browserslist، قم بإنشاء مفتاح `browserslist` في ملف `package.json` كما يلي:
+
+```json filename="package.json"
+{
+  "browserslist": [">0.3%", "not dead", "not op_mini all"]
+}
+```
+
+يمكنك استخدام أداة [browsersl.ist](https://browsersl.ist/?q=%3E0.3%25%2C+not+ie+11%2C+not+dead%2C+not+op_mini+all) لتصور المتصفحات التي تستهدفها.
+
+## وحدات CSS
+
+لا يلزم أي تكوين لدعم وحدات CSS. لتمكين وحدات CSS لملف، قم بتغيير امتداد الملف إلى `.module.css`.
+
+يمكنك معرفة المزيد حول [دعم Next.js لوحدات CSS هنا](/docs/pages/building-your-application/styling).
+
+## تخصيص الإضافات
+
+> **تحذير**: عند تعريف ملف تكوين PostCSS مخصص، يقوم Next.js **بإلغاء** [السلوك الافتراضي](#default-behavior) بالكامل.
+> تأكد من تكوين جميع الميزات التي تحتاج إلى تحويل يدويًا، بما في ذلك [Autoprefixer](https://github.com/postcss/autoprefixer).
+> تحتاج أيضًا إلى تثبيت أي إضافات مدرجة في تكوينك المخصص يدويًا، مثل `npm install postcss-flexbugs-fixes postcss-preset-env`.
+
+لتخصيص تكوين PostCSS، قم بإنشاء ملف `postcss.config.json` في جذر مشروعك.
+
+هذا هو التكوين الافتراضي المستخدم بواسطة Next.js:
+
+```json filename="postcss.config.json"
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}
+```
+
+> **معلومة مفيدة**: يسمح Next.js أيضًا بتسمية الملف `.postcssrc.json`، أو القراءة من مفتاح `postcss` في `package.json`.
+
+من الممكن أيضًا تكوين PostCSS باستخدام ملف `postcss.config.js`، وهو مفيد عندما تريد تضمين الإضافات بشكل مشروط بناءً على البيئة:
+
+```js filename="postcss.config.js"
+module.exports = {
+  plugins:
+    process.env.NODE_ENV === 'production'
+      ? [
+          'postcss-flexbugs-fixes',
+          [
+            'postcss-preset-env',
+            {
+              autoprefixer: {
+                flexbox: 'no-2009',
+              },
+              stage: 3,
+              features: {
+                'custom-properties': false,
+              },
+            },
+          ],
+        ]
+      : [
+          // لا توجد تحويلات في وضع التطوير
+        ],
+}
+```
+
+> **معلومة مفيدة**: يسمح Next.js أيضًا بتسمية الملف `.postcssrc.js`.
+
+**لا تستخدم `require()`** لاستيراد إضافات PostCSS. يجب توفير الإضافات كسلاسل نصية.
+
+> **معلومة مفيدة**: إذا كان ملف `postcss.config.js` الخاص بك يحتاج إلى دعم أدوات أخرى غير Next.js في نفس المشروع، فيجب عليك استخدام تنسيق الكائن المتوافق بدلاً من ذلك:
+>
+> ```js
+> module.exports = {
+>   plugins: {
+>     'postcss-flexbugs-fixes': {},
+>     'postcss-preset-env': {
+>       autoprefixer: {
+>         flexbox: 'no-2009',
+>       },
+>       stage: 3,
+>       features: {
+>         'custom-properties': false,
+>       },
+>     },
+>   },
+> }
+> ```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/10-custom-server.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/10-custom-server.mdx
new file mode 100644
index 00000000..c8f9241f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/10-custom-server.mdx
@@ -0,0 +1,120 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:03.641Z
+title: خادم مخصص
+description: بدء تطبيق Next.js برمجيًا باستخدام خادم مخصص.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [خادم مخصص](https://github.com/vercel/next.js/tree/canary/examples/custom-server)
+- [التخزين المؤقت للعرض من جانب الخادم (SSR Caching)](https://github.com/vercel/next.js/tree/canary/examples/ssr-caching)
+
+</details>
+
+بشكل افتراضي، يتضمن Next.js خادمه الخاص مع `next start`. إذا كان لديك خادم خلفي موجود، فلا يزال بإمكانك استخدامه مع Next.js (هذا ليس خادمًا مخصصًا). يسمح لك خادم Next.js المخصص ببدء خادم بنسبة 100% برمجيًا لاستخدام أنماط الخوادم المخصصة. في معظم الأحيان، لن تحتاج إلى هذا - ولكنه متاح للتخصيص الكامل.
+
+> **من الجيد معرفة**:
+>
+> - قبل اتخاذ قرار استخدام خادم مخصص، يرجى ملاحظة أنه يجب استخدامه فقط عندما لا يتمكن جهاز التوجيه المدمج في Next.js من تلبية متطلبات تطبيقك. سيؤدي الخادم المخصص إلى إزالة تحسينات الأداء المهمة، مثل **وظائف الخادم (serverless functions)** و**[التحسين الثابت التلقائي (Automatic Static Optimization)](/docs/pages/building-your-application/rendering/automatic-static-optimization).**
+> - لا يمكن نشر خادم مخصص على [Vercel](https://vercel.com/solutions/nextjs).
+
+إليك مثالًا على خادم مخصص:
+
+```js filename="server.js"
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const dev = process.env.NODE_ENV !== 'production'
+const hostname = 'localhost'
+const port = 3000
+// عند استخدام middleware يجب توفير `hostname` و `port` أدناه
+const app = next({ dev, hostname, port })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  createServer(async (req, res) => {
+    try {
+      // تأكد من تمرير `true` كوسيطة ثانية لـ `url.parse`.
+      // هذا يخبرها بتحليل جزء الاستعلام من URL.
+      const parsedUrl = parse(req.url, true)
+      const { pathname, query } = parsedUrl
+
+      if (pathname === '/a') {
+        await app.render(req, res, '/a', query)
+      } else if (pathname === '/b') {
+        await app.render(req, res, '/b', query)
+      } else {
+        await handle(req, res, parsedUrl)
+      }
+    } catch (err) {
+      console.error('حدث خطأ أثناء التعامل مع', req.url, err)
+      res.statusCode = 500
+      res.end('خطأ داخلي في الخادم')
+    }
+  })
+    .once('error', (err) => {
+      console.error(err)
+      process.exit(1)
+    })
+    .listen(port, () => {
+      console.log(`> جاهز على http://${hostname}:${port}`)
+    })
+})
+```
+
+> ملف `server.js` لا يمر عبر babel أو webpack. تأكد من أن الصيغة والمصادر التي يتطلبها هذا الملف متوافقة مع إصدار node الحالي الذي تعمل عليه.
+
+لتشغيل الخادم المخصص، ستحتاج إلى تحديث `scripts` في `package.json` كما يلي:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  }
+}
+```
+
+---
+
+يستخدم الخادم المخصص الاستيراد التالي لربط الخادم بتطبيق Next.js:
+
+```js
+const next = require('next')
+const app = next({})
+```
+
+استيراد `next` أعلاه هو دالة تستقبل كائنًا بالخيارات التالية:
+
+| الخيار         | النوع               | الوصف                                                                                                   |
+| -------------- | ------------------ | ------------------------------------------------------------------------------------------------------------- |
+| `conf`         | `Object`           | نفس الكائن الذي ستستخدمه في [next.config.js](/docs/pages/api-reference/next-config-js). الافتراضي هو `{}` |
+| `customServer` | `Boolean`          | (اختياري) اضبطه على false عندما يتم إنشاء الخادم بواسطة Next.js                                              |
+| `dev`          | `Boolean`          | (اختياري) ما إذا كان سيتم تشغيل Next.js في وضع التطوير أم لا. الافتراضي هو `false`                                |
+| `dir`          | `String`           | (اختياري) موقع مشروع Next.js. الافتراضي هو `'.'`                                               |
+| `quiet`        | `Boolean`          | (اختياري) إخفاء رسائل الخطأ التي تحتوي على معلومات الخادم. الافتراضي هو `false`                           |
+| `hostname`     | `String`           | (اختياري) اسم المضيف الذي يعمل عليه الخادم                                                        |
+| `port`         | `Number`           | (اختياري) المنفذ الذي يعمل عليه الخادم                                                            |
+| `httpServer`   | `node:http#Server` | (اختياري) خادم HTTP الذي يعمل خلفه Next.js                                                   |
+
+يمكن بعد ذلك استخدام `app` المُعاد للسماح لـ Next.js بمعالجة الطلبات حسب الحاجة.
+
+## تعطيل توجيه نظام الملفات
+
+بشكل افتراضي، سيقدم `Next` كل ملف في مجلد `pages` تحت مسار مطابق لاسم الملف. إذا كان مشروعك يستخدم خادمًا مخصصًا، فقد يؤدي هذا السلوك إلى تقديم نفس المحتوى من مسارات متعددة، مما قد يسبب مشاكل في تحسين محركات البحث (SEO) وتجربة المستخدم (UX).
+
+لتعطيل هذا السلوك ومنع التوجيه بناءً على الملفات في `pages`، افتح `next.config.js` وعطل إعداد `useFileSystemPublicRoutes`:
+
+```js filename="next.config.js"
+module.exports = {
+  useFileSystemPublicRoutes: false,
+}
+```
+
+> ملاحظة: `useFileSystemPublicRoutes` يعطل مسارات أسماء الملفات من SSR؛ قد يظل التوجيه من جانب العميل قادرًا على الوصول إلى تلك المسارات. عند استخدام هذا الخيار، يجب أن تحمي ضد التنقل إلى المسارات التي لا تريدها برمجيًا.
+
+> قد ترغب أيضًا في تكوين جهاز التوجيه من جانب العميل لمنع إعادة التوجيه من جانب العميل إلى مسارات أسماء الملفات؛ لذلك راجع [`router.beforePopState`](/docs/pages/api-reference/functions/use-router#routerbeforepopstate).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/11-draft-mode.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/11-draft-mode.mdx
new file mode 100644
index 00000000..5d285013
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/11-draft-mode.mdx
@@ -0,0 +1,183 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:31.184Z
+title: وضع المسودة (Draft Mode)
+description: يوفر Next.js وضع المسودة للتبديل بين الصفحات الثابتة والديناميكية. تعلم كيفية عمله مع موجه الصفحات (Pages Router).
+---
+
+في [توثيق الصفحات](/docs/pages/building-your-application/routing/pages-and-layouts) و[توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching)، تحدثنا عن كيفية تقديم صفحة مسبقًا في وقت البناء (**التوليد الثابت**) باستخدام `getStaticProps` و`getStaticPaths`.
+
+يكون التوليد الثابت مفيدًا عندما تستخدم صفحاتك نظام إدارة محتوى (CMS) بدون واجهة أمامية. لكنه ليس الخيار الأمثل عندما تكتب مسودة في نظام إدارة المحتوى الخاص بك وتريد معاينة المسودة فورًا على صفحتك. سترغب في أن يقوم Next.js بعرض هذه الصفحات في **وقت الطلب** بدلاً من وقت البناء وجلب محتوى المسودة بدلاً من المحتوى المنشور. سترغب في أن يتجاوز Next.js التوليد الثابت لهذه الحالة المحددة فقط.
+
+يوفر Next.js ميزة تسمى **وضع المسودة (Draft Mode)** التي تحل هذه المشكلة. إليك التعليمات حول كيفية استخدامها.
+
+## الخطوة 1: إنشاء مسار API والوصول إليه
+
+> ألق نظرة على [توثيق مسارات API](/docs/pages/building-your-application/routing/api-routes) أولاً إذا لم تكن معتادًا على مسارات API في Next.js.
+
+أولاً، قم بإنشاء **مسار API**. يمكن أن يكون له أي اسم - مثلاً `pages/api/draft.ts`
+
+في هذا المسار API، تحتاج إلى استدعاء `setDraftMode` على كائن الاستجابة.
+
+```js
+export default function handler(req, res) {
+  // ...
+  res.setDraftMode({ enable: true })
+  // ...
+}
+```
+
+سيؤدي هذا إلى تعيين **كوكي** لتمكين وضع المسودة. الطلبات اللاحقة التي تحتوي على هذا الكوكي ستؤدي إلى تفعيل **وضع المسودة** مما يغير سلوك الصفحات المولدة بشكل ثابت (المزيد عن هذا لاحقًا).
+
+يمكنك اختبار هذا يدويًا عن طريق إنشاء مسار API كما يلي والوصول إليه يدويًا من متصفحك:
+
+```ts filename="pages/api/draft.ts"
+// مثال بسيط لاختباره يدويًا من متصفحك.
+export default function handler(req, res) {
+  res.setDraftMode({ enable: true })
+  res.end('تم تفعيل وضع المسودة')
+}
+```
+
+إذا فتحت أدوات المطور في متصفحك وزرت `/api/draft`، ستلاحظ رأس استجابة `Set-Cookie` يحتوي على كوكي باسم `__prerender_bypass`.
+
+### الوصول إليه بأمان من نظام إدارة المحتوى الخاص بك
+
+عمليًا، سترغب في استدعاء مسار API هذا _بأمان_ من نظام إدارة المحتوى الخاص بك. الخطوات المحددة ستختلف حسب نظام إدارة المحتوى الذي تستخدمه، ولكن إليك بعض الخطوات الشائعة التي يمكنك اتخاذها.
+
+تفترض هذه الخطوات أن نظام إدارة المحتوى الذي تستخدمه يدعم تعيين **عنوان URL مخصص للمسودات**. إذا لم يكن كذلك، فلا يزال بإمكانك استخدام هذه الطريقة لتأمين عناوين URL للمسودات، ولكنك ستحتاج إلى إنشاء عنوان URL للمسودة والوصول إليه يدويًا.
+
+**أولاً**، يجب إنشاء **رمز سري** باستخدام أداة توليد الرموز التي تختارها. سيعرف هذا السر فقط تطبيق Next.js الخاص بك ونظام إدارة المحتوى. يمنع هذا السر الأشخاص الذين لا يمكنهم الوصول إلى نظام إدارة المحتوى الخاص بك من الوصول إلى عناوين URL للمسودات.
+
+**ثانيًا**، إذا كان نظام إدارة المحتوى الخاص بك يدعم تعيين عناوين URL مخصصة للمسودات، فحدد ما يلي كعنوان URL للمسودة. يفترض هذا أن مسار API للمسودة موجود في `pages/api/draft.ts`.
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+- `<your-site>` يجب أن يكون نطاق النشر الخاص بك.
+- `<token>` يجب استبداله بالرمز السري الذي أنشأته.
+- `<path>` يجب أن يكون المسار للصفحة التي تريد معاينتها. إذا كنت تريد معاينة `/posts/foo`، فيجب استخدام `&slug=/posts/foo`.
+
+قد يسمح لك نظام إدارة المحتوى الخاص بك بتضمين متغير في عنوان URL للمسودة بحيث يمكن تعيين `<path>` ديناميكيًا بناءً على بيانات نظام إدارة المحتوى مثل: `&slug=/posts/{entry.fields.slug}`
+
+**أخيرًا**، في مسار API للمسودة:
+
+- تحقق من تطابق السر وأن معلمة `slug` موجودة (إذا لم تكن كذلك، يجب أن يفشل الطلب).
+-
+- استدعِ `res.setDraftMode`.
+- ثم أعد توجيه المتصفح إلى المسار المحدد بواسطة `slug`. (يستخدم المثال التالي [إعادة توجيه 307](https://developer.mozilla.org/docs/Web/HTTP/Status/307)).
+
+```js
+export default async (req, res) => {
+  // تحقق من السر ومعلمة slug
+  // يجب أن يعرف هذا السر فقط مسار API هذا ونظام إدارة المحتوى
+  if (req.query.secret !== 'MY_SECRET_TOKEN' || !req.query.slug) {
+    return res.status(401).json({ message: 'رمز غير صالح' })
+  }
+
+  // اتصل بنظام إدارة المحتوى للتحقق من وجود `slug` المقدم
+  // ستنفذ getPostBySlug منطق الجلب المطلوب لنظام إدارة المحتوى
+  const post = await getPostBySlug(req.query.slug)
+
+  // إذا لم يكن slug موجودًا، امنع تفعيل وضع المسودة
+  if (!post) {
+    return res.status(401).json({ message: 'slug غير صالح' })
+  }
+
+  // فعّل وضع المسودة عن طريق تعيين الكوكي
+  res.setDraftMode({ enable: true })
+
+  // أعد التوجيه إلى المسار من المنشور الذي تم جلب بياناته
+  // لا نعيد التوجيه إلى req.query.slug لتجنب ثغرات إعادة التوجيه المفتوحة
+  res.redirect(post.slug)
+}
+```
+
+إذا نجح ذلك، فسيتم إعادة توجيه المتصفح إلى المسار الذي تريد معاينته مع كوكي وضع المسودة.
+
+## الخطوة 2: تحديث `getStaticProps`
+
+الخطوة التالية هي تحديث `getStaticProps` لدعم وضع المسودة.
+
+إذا طلبت صفحة تحتوي على `getStaticProps` مع تعيين الكوكي (عبر `res.setDraftMode`)، فسيتم استدعاء `getStaticProps` في **وقت الطلب** (بدلاً من وقت البناء).
+
+علاوة على ذلك، سيتم استدعاؤها مع كائن `context` حيث `context.draftMode` سيكون `true`.
+
+```js
+export async function getStaticProps(context) {
+  if (context.draftMode) {
+    // بيانات ديناميكية
+  }
+}
+```
+
+استخدمنا `res.setDraftMode` في مسار API للمسودة، لذا `context.draftMode` سيكون `true`.
+
+إذا كنت تستخدم أيضًا `getStaticPaths`، فسيكون `context.params` متاحًا أيضًا.
+
+### جلب بيانات المسودة
+
+يمكنك تحديث `getStaticProps` لجلب بيانات مختلفة بناءً على `context.draftMode`.
+
+على سبيل المثال، قد يكون لنظام إدارة المحتوى الخاص بك نقطة نهاية API مختلفة للمنشورات المسودة. إذا كان الأمر كذلك، يمكنك تعديل عنوان URL لنقطة نهاية API كما يلي:
+
+```js
+export async function getStaticProps(context) {
+  const url = context.draftMode
+    ? 'https://draft.example.com'
+    : 'https://production.example.com'
+  const res = await fetch(url)
+  // ...
+}
+```
+
+هذا كل شيء! إذا قمت بالوصول إلى مسار API للمسودة (مع `secret` و `slug`) من نظام إدارة المحتوى الخاص بك أو يدويًا، يجب أن تكون قادرًا الآن على رؤية محتوى المسودة. وإذا قمت بتحديث مسودتك دون نشر، يجب أن تكون قادرًا على معاينة المسودة.
+
+قم بتعيين هذا كعنوان URL للمسودة في نظام إدارة المحتوى الخاص بك أو قم بالوصول يدويًا، ويجب أن تكون قادرًا على رؤية المسودة.
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+## المزيد من التفاصيل
+
+### مسح كوكي وضع المسودة
+
+افتراضيًا، تنتهي جلسة وضع المسودة عند إغلاق المتصفح.
+
+لمسح كوكي وضع المسودة يدويًا، أنشئ مسار API يستدعي `setDraftMode({ enable: false })`:
+
+```ts filename="pages/api/disable-draft.ts"
+export default function handler(req, res) {
+  res.setDraftMode({ enable: false })
+}
+```
+
+ثم أرسل طلبًا إلى `/api/disable-draft` لاستدعاء مسار API. إذا كنت تستدعي هذا المسار باستخدام [`next/link`](/docs/pages/api-reference/components/link)، فيجب تمرير `prefetch={false}` لمنع حذف الكوكي عن طريق الخطأ أثناء الجلب المسبق.
+
+### يعمل مع `getServerSideProps`
+
+يعمل وضع المسودة مع `getServerSideProps`، وهو متاح كمفتاح `draftMode` في كائن [`context`](/docs/pages/api-reference/functions/get-server-side-props#context-parameter).
+
+> **ملاحظة جيدة**: لا يجب تعيين رأس `Cache-Control` عند استخدام وضع المسودة لأنه لا يمكن تجاوزه. بدلاً من ذلك، نوصي باستخدام [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+
+### يعمل مع مسارات API
+
+سيكون لدى مسارات API إمكانية الوصول إلى `draftMode` على كائن الطلب. على سبيل المثال:
+
+```js
+export default function myApiRoute(req, res) {
+  if (req.draftMode) {
+    // جلب بيانات المسودة
+  }
+}
+```
+
+### فريد لكل `next build`
+
+سيتم إنشاء قيمة جديدة لكوكي التجاوز في كل مرة تقوم فيها بتشغيل `next build`.
+
+هذا يضمن عدم إمكانية تخمين كوكي التجاوز.
+
+> **ملاحظة جيدة**: لاختبار وضع المسودة محليًا عبر HTTP، سيحتاج متصفحك إلى السماح بملفات تعريف الارتباط من أطراف ثالثة والوصول إلى التخزين المحلي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx
new file mode 100644
index 00000000..f726855d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx
@@ -0,0 +1,106 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:44.224Z
+title: معالجة الأخطاء
+description: كيفية معالجة الأخطاء في تطبيق Next.js الخاص بك.
+---
+
+يشرح هذا التوثيق كيفية معالجة الأخطاء أثناء التطوير ومن جانب الخادم ومن جانب العميل.
+
+## معالجة الأخطاء أثناء التطوير
+
+عند حدوث خطأ في وقت التشغيل خلال مرحلة تطوير تطبيق Next.js الخاص بك، ستواجه **شاشة تراكب**. وهي نافذة تغطي صفحة الويب. تكون **فقط** مرئية عند تشغيل خادم التطوير باستخدام `next dev` عبر `pnpm dev` أو `npm run dev` أو `yarn dev` أو `bun dev` ولن تظهر في بيئة الإنتاج. سيؤدي إصلاح الخطأ إلى إغلاق شاشة التراكب تلقائيًا.
+
+إليك مثال على شاشة التراكب:
+
+{/* TODO UPDATE SCREENSHOT */}
+![مثال على شاشة التراكب في وضع التطوير](https://assets.vercel.com/image/upload/v1645118290/docs-assets/static/docs/error-handling/overlay.png)
+
+## معالجة أخطاء الخادم
+
+يوفر Next.js صفحة 500 ثابتة افتراضيًا لمعالجة الأخطاء من جانب الخادم التي تحدث في تطبيقك. يمكنك أيضًا [تخصيص هذه الصفحة](/docs/pages/building-your-application/routing/custom-error#customizing-the-500-page) عن طريق إنشاء ملف `pages/500.js`.
+
+وجود صفحة 500 في تطبيقك لا يعرض أخطاء محددة لمستخدم التطبيق.
+
+يمكنك أيضًا استخدام [صفحة 404](/docs/pages/building-your-application/routing/custom-error#404-page) لمعالجة أخطاء وقت التشغيل المحددة مثل `الملف غير موجود`.
+
+## معالجة أخطاء العميل
+
+توفر [حدود الأخطاء (Error Boundaries)](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) في React طريقة أنيقة لمعالجة أخطاء JavaScript على جانب العميل بحيث تستمر الأجزاء الأخرى من التطبيق في العمل. بالإضافة إلى منع تعطل الصفحة، تتيح لك تقديم مكون احتياطي مخصص وحتى تسجيل معلومات الخطأ.
+
+لاستخدام حدود الأخطاء في تطبيق Next.js الخاص بك، يجب إنشاء مكون صنف `ErrorBoundary` وتغليف خاصية `Component` في ملف `pages/_app.js`. سيكون هذا المكون مسؤولاً عن:
+
+- عرض واجهة احتياطية بعد حدوث خطأ
+- توفير طريقة لإعادة تعيين حالة التطبيق
+- تسجيل معلومات الخطأ
+
+يمكنك إنشاء مكون صنف `ErrorBoundary` عن طريق توسيع `React.Component`. على سبيل المثال:
+
+```jsx
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+
+    // تعريف متغير حالة لتتبع وجود خطأ
+    this.state = { hasError: false }
+  }
+  static getDerivedStateFromError(error) {
+    // تحديث الحالة لعرض الواجهة الاحتياطية في العرض التالي
+
+    return { hasError: true }
+  }
+  componentDidCatch(error, errorInfo) {
+    // يمكنك استخدام خدمة تسجيل الأخطاء الخاصة بك هنا
+    console.log({ error, errorInfo })
+  }
+  render() {
+    // التحقق من وجود خطأ
+    if (this.state.hasError) {
+      // يمكنك عرض أي واجهة احتياطية مخصصة
+      return (
+        <div>
+          <h2>عذرًا، حدث خطأ!</h2>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false })}
+          >
+            المحاولة مرة أخرى؟
+          </button>
+        </div>
+      )
+    }
+
+    // إرجاع المكونات الفرعية في حالة عدم وجود خطأ
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary
+```
+
+يتتبع مكون `ErrorBoundary` حالة `hasError`. قيمة متغير الحالة هذا هي قيمة منطقية. عندما تكون قيمة `hasError` `true`، سيعرض مكون `ErrorBoundary` واجهة احتياطية. وإلا، سيعرض المكونات الفرعية.
+
+بعد إنشاء مكون `ErrorBoundary`، قم باستيراده في ملف `pages/_app.js` لتغليف خاصية `Component` في تطبيق Next.js الخاص بك.
+
+```jsx
+// استيراد مكون ErrorBoundary
+import ErrorBoundary from '../components/ErrorBoundary'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    // تغليف خاصية Component بمكون ErrorBoundary
+    <ErrorBoundary>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  )
+}
+
+export default MyApp
+```
+
+يمكنك معرفة المزيد عن [حدود الأخطاء (Error Boundaries)](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) في توثيق React.
+
+### الإبلاغ عن الأخطاء
+
+لمراقبة أخطاء العميل، استخدم خدمة مثل [Sentry](https://github.com/vercel/next.js/tree/canary/examples/with-sentry) أو Bugsnag أو Datadog.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/13-debugging.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/13-debugging.mdx
new file mode 100644
index 00000000..d2fa8cce
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/13-debugging.mdx
@@ -0,0 +1,116 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:07.033Z
+title: تصحيح الأخطاء
+description: تعلم كيفية تصحيح أخطاء تطبيق Next.js باستخدام VS Code أو Chrome DevTools.
+---
+
+يشرح هذا التوثيق كيفية تصحيح أخطاء كود الواجهة الأمامية والخلفية في Next.js مع دعم كامل لخرائط المصدر باستخدام إما [مصحح أخطاء VS Code](https://code.visualstudio.com/docs/editor/debugging) أو [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools).
+
+يمكن استخدام أي مصحح أخطاء قادر على الاتصال بـ Node.js لتصحيح تطبيق Next.js. يمكنك العثور على مزيد من التفاصيل في [دليل تصحيح الأخطاء](https://nodejs.org/en/docs/guides/debugging-getting-started/) الخاص بـ Node.js.
+
+## التصحيح باستخدام VS Code
+
+أنشئ ملفًا باسم `.vscode/launch.json` في جذر مشروعك بالمحتوى التالي:
+
+```json filename="launch.json"
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}
+```
+
+يمكن استبدال `npm run dev` بـ `yarn dev` إذا كنت تستخدم Yarn. إذا كنت [تغير رقم المنفذ](/docs/pages/api-reference/next-cli#development) الذي يبدأ عليه التطبيق، فاستبدل `3000` في `http://localhost:3000` بالمنفذ الذي تستخدمه.
+
+انتقل الآن إلى لوحة التصحيح (`Ctrl+Shift+D` في Windows/Linux، `⇧+⌘+D` في macOS)، اختر تكوين الإطلاق، ثم اضغط `F5` أو اختر **Debug: Start Debugging** من لوحة الأوامر لبدء جلسة التصحيح.
+
+## استخدام المصحح في Jetbrains WebStorm
+
+انقر على القائمة المنسدلة التي تعرض تكوين التشغيل، ثم انقر على `Edit Configurations...`. أنشئ تكوين تصحيح من نوع `Javascript Debug` مع `http://localhost:3000` كعنوان URL. قم بتخصيصه كما تريد (مثل متصفح التصحيح، حفظه كملف مشروع)، ثم انقر على `OK`. شغل تكوين التصحيح هذا، وسيفتح المتصفح المحدد تلقائيًا. في هذه المرحلة، يجب أن يكون لديك تطبيقان في وضع التصحيح: تطبيق NextJS node وتطبيق العميل/المتصفح.
+
+## التصحيح باستخدام Chrome DevTools
+
+### كود جانب العميل
+
+ابدأ خادم التطوير كالمعتاد عن طريق تشغيل `next dev` أو `npm run dev` أو `yarn dev`. بمجرد بدء الخادم، افتح `http://localhost:3000` (أو عنوان URL البديل) في Chrome. بعد ذلك، افتح أدوات المطور في Chrome (`Ctrl+Shift+J` في Windows/Linux، `⌥+⌘+I` في macOS)، ثم انتقل إلى علامة التبويب **Sources**.
+
+الآن، في أي وقت يصل كود جانب العميل إلى عبارة [`debugger`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/debugger)، سيتم إيقاف تنفيذ الكود وسيظهر هذا الملف في منطقة التصحيح. يمكنك أيضًا الضغط على `Ctrl+P` في Windows/Linux أو `⌘+P` في macOS للبحث عن ملف وتعيين نقاط التوقف يدويًا. لاحظ أنه عند البحث هنا، سيكون لملفات المصدر مسارات تبدأ بـ `webpack://_N_E/./`.
+
+### كود جانب الخادم
+
+لتصحيح كود Next.js في جانب الخادم باستخدام Chrome DevTools، تحتاج إلى تمرير علم [`--inspect`](https://nodejs.org/api/cli.html#cli_inspect_host_port) إلى عملية Node.js الأساسية:
+
+```bash filename="Terminal"
+NODE_OPTIONS='--inspect' next dev
+```
+
+إذا كنت تستخدم `npm run dev` أو `yarn dev` فيجب عليك تحديث سكريبت `dev` في ملف `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "NODE_OPTIONS='--inspect' next dev"
+  }
+}
+```
+
+سيبدو تشغيل خادم تطوير Next.js مع علم `--inspect` كما يلي:
+
+```bash filename="Terminal"
+Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
+For help, see: https://nodejs.org/en/docs/inspector
+ready - started server on 0.0.0.0:3000, url: http://localhost:3000
+```
+
+> كن على علم أن تشغيل `NODE_OPTIONS='--inspect' npm run dev` أو `NODE_OPTIONS='--inspect' yarn dev` لن يعمل. سيحاول هذا بدء عدة مصححات أخطاء على نفس المنفذ: واحد لعملية npm/yarn وواحد لـ Next.js. ستحصل بعد ذلك على خطأ مثل `Starting inspector on 127.0.0.1:9229 failed: address already in use` في وحدة التحكم.
+
+بمجرد بدء الخادم، افتح علامة تبويب جديدة في Chrome وقم بزيارة `chrome://inspect`، حيث يجب أن ترى تطبيق Next.js الخاص بك في قسم **Remote Target**. انقر على **inspect** تحت تطبيقك لفتح نافذة منفصلة من أدوات المطور، ثم انتقل إلى علامة التبويب **Sources**.
+
+يعمل تصحيح كود جانب الخادم هنا بشكل مشابه لتصحيح كود جانب العميل باستخدام Chrome DevTools، إلا أنه عند البحث عن الملفات هنا باستخدام `Ctrl+P` أو `⌘+P`، سيكون لملفات المصدر مسارات تبدأ بـ `webpack://{application-name}/./` (حيث سيتم استبدال `{application-name}` باسم تطبيقك وفقًا لملف `package.json`).
+
+### التصحيح على Windows
+
+قد يواجه مستخدمو Windows مشكلة عند استخدام `NODE_OPTIONS='--inspect'` لأن هذا التركيب غير مدعوم على منصات Windows. للتغلب على هذا، قم بتثبيت حزمة [`cross-env`](https://www.npmjs.com/package/cross-env) كاعتماد تطوير (`-D` مع `npm` و `yarn`) واستبدل سكريبت `dev` بما يلي.
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev"
+  }
+}
+```
+
+سيقوم `cross-env` بتعيين متغير البيئة `NODE_OPTIONS` بغض النظر عن المنصة التي تستخدمها (بما في ذلك Mac وLinux وWindows) وسيسمح لك بالتصحيح بشكل متسق عبر الأجهزة وأنظمة التشغيل.
+
+> **معلومة مفيدة**: تأكد من تعطيل Windows Defender على جهازك. ستقوم هذه الخدمة الخارجية بفحص _كل ملف مقروء_، وقد تم الإبلاغ عن أنها تزيد بشكل كبير من وقت التحديث السريع مع `next dev`. هذه مشكلة معروفة، لا تتعلق بـ Next.js، لكنها تؤثر على تطوير Next.js.
+
+## مزيد من المعلومات
+
+لمعرفة المزيد حول كيفية استخدام مصحح أخطاء JavaScript، راجع التوثيق التالي:
+
+- [تصحيح Node.js في VS Code: نقاط التوقف](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_breakpoints)
+- [Chrome DevTools: تصحيح JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/14-preview-mode.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/14-preview-mode.mdx
new file mode 100644
index 00000000..85fac7bf
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/14-preview-mode.mdx
@@ -0,0 +1,243 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:54:34.494Z
+title: وضع المعاينة
+description: يوفر Next.js وضع المعاينة للصفحات المولدة بشكل ثابت. يمكنك تعلم كيفية عمله هنا.
+---
+
+> **ملاحظة**: تم استبدال هذه الميزة بـ [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode).
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مثال WordPress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress) ([عرض تجريبي](https://next-blog-wordpress.vercel.app))
+- [مثال DatoCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([عرض تجريبي](https://next-blog-datocms.vercel.app/))
+- [مثال TakeShape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([عرض تجريبي](https://next-blog-takeshape.vercel.app/))
+- [مثال Sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([عرض تجريبي](https://next-blog-sanity.vercel.app/))
+- [مثال Prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([عرض تجريبي](https://next-blog-prismic.vercel.app/))
+- [مثال Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([عرض تجريبي](https://next-blog-contentful.vercel.app/))
+- [مثال Strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([عرض تجريبي](https://next-blog-strapi.vercel.app/))
+- [مثال Prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([عرض تجريبي](https://next-blog-prepr.vercel.app/))
+- [مثال Agility CMS](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([عرض تجريبي](https://next-blog-agilitycms.vercel.app/))
+- [مثال Cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([عرض تجريبي](https://next-blog-cosmic.vercel.app/))
+- [مثال ButterCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([عرض تجريبي](https://next-blog-buttercms.vercel.app/))
+- [مثال Storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([عرض تجريبي](https://next-blog-storyblok.vercel.app/))
+- [مثال GraphCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([عرض تجريبي](https://next-blog-graphcms.vercel.app/))
+- [مثال Kontent](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([عرض تجريبي](https://next-blog-kontent.vercel.app//))
+- [مثال Umbraco Heartcore](https://github.com/vercel/next.js/tree/canary/examples/cms-umbraco-heartcore) ([عرض تجريبي](https://next-blog-umbraco-heartcore.vercel.app/))
+- [مثال Plasmic](https://github.com/vercel/next.js/tree/canary/examples/cms-plasmic) ([عرض تجريبي](https://nextjs-plasmic-example.vercel.app/))
+- [مثال Enterspeed](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([عرض تجريبي](https://next-blog-demo.enterspeed.com/))
+- [مثال Makeswift](https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift) ([عرض تجريبي](https://nextjs-makeswift-example.vercel.app/))
+
+</details>
+
+في [توثيق الصفحات](/docs/pages/building-your-application/routing/pages-and-layouts) و[توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching)، تحدثنا عن كيفية تقديم صفحة مسبقًا في وقت البناء (**التوليد الثابت**) باستخدام `getStaticProps` و `getStaticPaths`.
+
+التوليد الثابت مفيد عندما تقوم صفحاتك بجلب البيانات من نظام إدارة المحتوى (CMS). ومع ذلك، ليس مثاليًا عندما تكتب مسودة على نظام إدارة المحتوى الخاص بك وتريد **معاينة** المسودة فورًا على صفحتك. سترغب في أن يقوم Next.js بعرض هذه الصفحات في **وقت الطلب** بدلاً من وقت البناء وجلب محتوى المسودة بدلاً من المحتوى المنشور. سترغب في أن يتجاوز Next.js التوليد الثابت فقط لهذه الحالة المحددة.
+
+يحتوي Next.js على ميزة تسمى **وضع المعاينة** التي تحل هذه المشكلة. إليك التعليمات حول كيفية استخدامها.
+
+## الخطوة 1: إنشاء مسار API للمعاينة والوصول إليه
+
+> ألق نظرة على [توثيق مسارات API](/docs/pages/building-your-application/routing/api-routes) أولاً إذا لم تكن على دراية بمسارات API في Next.js.
+
+أولاً، قم بإنشاء **مسار API للمعاينة**. يمكن أن يكون له أي اسم - على سبيل المثال `pages/api/preview.js` (أو `.ts` إذا كنت تستخدم TypeScript).
+
+في مسار API هذا، تحتاج إلى استدعاء `setPreviewData` على كائن الاستجابة. يجب أن تكون الوسيطة لـ `setPreviewData` كائنًا، ويمكن استخدام هذا بواسطة `getStaticProps` (المزيد عن هذا لاحقًا). في الوقت الحالي، سنستخدم `{}`.
+
+```js
+export default function handler(req, res) {
+  // ...
+  res.setPreviewData({})
+  // ...
+}
+```
+
+يضبط `res.setPreviewData` بعض **ملفات تعريف الارتباط** على المتصفح التي تقوم بتشغيل وضع المعاينة. أي طلبات إلى Next.js تحتوي على ملفات تعريف الارتباط هذه ستعتبر في **وضع المعاينة**، وسيتغير السلوك للصفحات المولدة بشكل ثابت (المزيد عن هذا لاحقًا).
+
+يمكنك اختبار هذا يدويًا عن طريق إنشاء مسار API مثل أدناه والوصول إليه يدويًا من متصفحك:
+
+```js filename="pages/api/preview.js"
+// مثال بسيط لاختباره يدويًا من متصفحك.
+export default function handler(req, res) {
+  res.setPreviewData({})
+  res.end('تم تفعيل وضع المعاينة')
+}
+```
+
+إذا فتحت أدوات المطور في متصفحك وقمت بزيارة `/api/preview`، ستلاحظ أنه سيتم تعيين ملفات تعريف الارتباط `__prerender_bypass` و `__next_preview_data` على هذا الطلب.
+
+### الوصول إليه بأمان من نظام إدارة المحتوى الخاص بك
+
+عمليًا، سترغب في استدعاء مسار API هذا _بأمان_ من نظام إدارة المحتوى الخاص بك. ستختلف الخطوات المحددة اعتمادًا على نظام إدارة المحتوى الذي تستخدمه، ولكن إليك بعض الخطوات الشائعة التي يمكنك اتخاذها.
+
+تفترض هذه الخطوات أن نظام إدارة المحتوى الذي تستخدمه يدعم تعيين **عنوان URL مخصص للمعاينة**. إذا لم يكن كذلك، فلا يزال بإمكانك استخدام هذه الطريقة لتأمين عناوين URL للمعاينة، ولكن ستحتاج إلى إنشاء عنوان URL للمعاينة والوصول إليه يدويًا.
+
+**أولاً**، يجب عليك إنشاء **سلسلة رمز سرية** باستخدام مولد الرموز الذي تختاره. سيعرف هذا السر فقط تطبيق Next.js الخاص بك ونظام إدارة المحتوى الخاص بك. يمنع هذا السر الأشخاص الذين لا يمكنهم الوصول إلى نظام إدارة المحتوى الخاص بك من الوصول إلى عناوين URL للمعاينة.
+
+**ثانيًا**، إذا كان نظام إدارة المحتوى الخاص بك يدعم تعيين عناوين URL مخصصة للمعاينة، فحدد ما يلي كعنوان URL للمعاينة. يفترض هذا أن مسار API للمعاينة موجود في `pages/api/preview.js`.
+
+```bash filename="Terminal"
+https://<your-site>/api/preview?secret=<token>&slug=<path>
+```
+
+- `<your-site>` يجب أن يكون نطاق النشر الخاص بك.
+- `<token>` يجب استبداله بالرمز السري الذي قمت بإنشائه.
+- `<path>` يجب أن يكون المسار للصفحة التي تريد معاينتها. إذا كنت تريد معاينة `/posts/foo`، فيجب عليك استخدام `&slug=/posts/foo`.
+
+قد يسمح لك نظام إدارة المحتوى الخاص بك بتضمين متغير في عنوان URL للمعاينة بحيث يمكن تعيين `<path>` ديناميكيًا بناءً على بيانات نظام إدارة المحتوى مثل: `&slug=/posts/{entry.fields.slug}`
+
+**أخيرًا**، في مسار API للمعاينة:
+
+- تحقق من تطابق السر وأن معلمة `slug` موجودة (إذا لم تكن كذلك، يجب أن يفشل الطلب).
+-
+- استدعِ `res.setPreviewData`.
+- ثم أعد توجيه المتصفح إلى المسار المحدد بواسطة `slug`. (يستخدم المثال التالي [إعادة توجيه 307](https://developer.mozilla.org/docs/Web/HTTP/Status/307)).
+
+```js
+export default async (req, res) => {
+  // تحقق من السر والمعلمات التالية
+  // يجب أن يعرف هذا السر فقط مسار API هذا ونظام إدارة المحتوى
+  if (req.query.secret !== 'MY_SECRET_TOKEN' || !req.query.slug) {
+    return res.status(401).json({ message: 'رمز غير صالح' })
+  }
+
+  // جلب نظام إدارة المحتوى للتحقق مما إذا كان `slug` المقدم موجودًا
+  // ستنفذ getPostBySlug منطق الجلب المطلوب لنظام إدارة المحتوى
+  const post = await getPostBySlug(req.query.slug)
+
+  // إذا لم يكن slug موجودًا، امنع تفعيل وضع المعاينة
+  if (!post) {
+    return res.status(401).json({ message: 'slug غير صالح' })
+  }
+
+  // تفعيل وضع المعاينة عن طريق تعيين ملفات تعريف الارتباط
+  res.setPreviewData({})
+
+  // إعادة التوجيه إلى المسار من المنشور الذي تم جلبه
+  // لا نعيد التوجيه إلى req.query.slug لأن ذلك قد يؤدي إلى ثغرات إعادة توجيه مفتوحة
+  res.redirect(post.slug)
+}
+```
+
+إذا نجح ذلك، فسيتم إعادة توجيه المتصفح إلى المسار الذي تريد معاينته مع تعيين ملفات تعريف الارتباط لوضع المعاينة.
+
+## الخطوة 2: تحديث `getStaticProps`
+
+الخطوة التالية هي تحديث `getStaticProps` لدعم وضع المعاينة.
+
+إذا قمت بطلب صفحة تحتوي على `getStaticProps` مع تعيين ملفات تعريف الارتباط لوضع المعاينة (عبر `res.setPreviewData`)، فسيتم استدعاء `getStaticProps` في **وقت الطلب** (بدلاً من وقت البناء).
+
+علاوة على ذلك، سيتم استدعاؤها بكائن `context` حيث:
+
+- `context.preview` سيكون `true`.
+- `context.previewData` سيكون هو نفسه الوسيطة المستخدمة لـ `setPreviewData`.
+
+```js
+export async function getStaticProps(context) {
+  // إذا طلبت هذه الصفحة مع تعيين ملفات تعريف الارتباط لوضع المعاينة:
+  //
+  // - سيكون context.preview صحيحًا
+  // - سيكون context.previewData هو نفسه
+  //   الوسيطة المستخدمة لـ `setPreviewData`.
+}
+```
+
+استخدمنا `res.setPreviewData({})` في مسار API للمعاينة، لذا سيكون `context.previewData` `{}`. يمكنك استخدام هذا لتمرير معلومات الجلسة من مسار API للمعاينة إلى `getStaticProps` إذا لزم الأمر.
+
+إذا كنت تستخدم أيضًا `getStaticPaths`، فسيكون `context.params` متاحًا أيضًا.
+
+### جلب بيانات المعاينة
+
+يمكنك تحديث `getStaticProps` لجلب بيانات مختلفة بناءً على `context.preview` و/أو `context.previewData`.
+
+على سبيل المثال، قد يحتوي نظام إدارة المحتوى الخاص بك على نقطة نهاية API مختلفة للمنشورات المسودة. إذا كان الأمر كذلك، يمكنك استخدام `context.preview` لتعديل عنوان URL لنقطة نهاية API كما يلي:
+
+```js
+export async function getStaticProps(context) {
+  // إذا كان context.preview صحيحًا، أضف "/preview" إلى نقطة نهاية API
+  // لطلب بيانات المسودة بدلاً من البيانات المنشورة. سيختلف هذا
+  // بناءً على نظام إدارة المحتوى الذي تستخدمه.
+  const res = await fetch(`https://.../${context.preview ? 'preview' : ''}`)
+  // ...
+}
+```
+
+هذا كل شيء! إذا قمت بالوصول إلى مسار API للمعاينة (مع `secret` و `slug`) من نظام إدارة المحتوى الخاص بك أو يدويًا، يجب أن تكون قادرًا الآن على رؤية محتوى المعاينة. وإذا قمت بتحديث مسودتك دون نشرها، يجب أن تكون قادرًا على معاينة المسودة.
+
+قم بتعيين هذا كعنوان URL للمعاينة على نظام إدارة المحتوى الخاص بك أو قم بالوصول يدويًا، ويجب أن تكون قادرًا على رؤية المعاينة.
+
+```bash filename="Terminal"
+https://<your-site>/api/preview?secret=<token>&slug=<path>
+```
+
+## المزيد من التفاصيل
+
+> **جيد أن تعرف**: أثناء العرض، يعرض `next/router` علامة `isPreview`، راجع [توثيق كائن الموجه](/docs/pages/api-reference/functions/use-router#router-object) لمزيد من المعلومات.
+
+### تحديد مدة وضع المعاينة
+
+يأخذ `setPreviewData` معاملًا ثانيًا اختياريًا يجب أن يكون كائن خيارات. يقبل المفاتيح التالية:
+
+- `maxAge`: يحدد الرقم (بالثواني) لمدة جلسة المعاينة.
+- `path`: يحدد المسار الذي يجب تطبيق ملف تعريف الارتباط عليه. الافتراضي هو `/` مما يتيح وضع المعاينة لجميع المسارات.
+
+```js
+setPreviewData(data, {
+  maxAge: 60 * 60, // تنتهي صلاحية ملفات تعريف الارتباط لوضع المعاينة بعد ساعة واحدة
+  path: '/about', // تنطبق ملفات تعريف الارتباط لوضع المعاينة على المسارات مع /about
+})
+```
+
+### مسح ملفات تعريف الارتباط لوضع المعاينة
+
+افتراضيًا، لم يتم تعيين تاريخ انتهاء صلاحية لملفات تعريف الارتباط لوضع المعاينة، لذا تنتهي جلسة المعاينة عند إغلاق المتصفح.
+
+لمسح ملفات تعريف الارتباط لوضع المعاينة يدويًا، قم بإنشاء مسار API يستدعي `clearPreviewData()`:
+
+```js filename="pages/api/clear-preview-mode-cookies.js"
+export default function handler(req, res) {
+  res.clearPreviewData({})
+}
+```
+
+ثم، أرسل طلبًا إلى `/api/clear-preview-mode-cookies` لاستدعاء مسار API. إذا كنت تستدعي هذا المسار باستخدام [`next/link`](/docs/pages/api-reference/components/link)، فيجب عليك تمرير `prefetch={false}` لمنع استدعاء `clearPreviewData` أثناء الجلب المسبق للرابط.
+
+إذا تم تحديد مسار في استدعاء `setPreviewData`، فيجب عليك تمرير نفس المسار إلى `clearPreviewData`:
+
+```js filename="pages/api/clear-preview-mode-cookies.js"
+export default function handler(req, res) {
+  const { path } = req.query
+
+  res.clearPreviewData({ path })
+}
+```
+
+### حدود حجم `previewData`
+
+يمكنك تمرير كائن إلى `setPreviewData` وجعله متاحًا في `getStaticProps`. ومع ذلك، نظرًا لأن البيانات سيتم تخزينها في ملف تعريف الارتباط، فهناك قيود على الحجم. حاليًا، بيانات المعاينة محدودة بـ 2 كيلوبايت.
+
+### يعمل مع `getServerSideProps`
+
+يعمل وضع المعاينة أيضًا مع `getServerSideProps`. سيكون متاحًا أيضًا في كائن `context` الذي يحتوي على `preview` و `previewData`.
+
+> **جيد أن تعرف**: لا يجب عليك تعيين رأس `Cache-Control` عند استخدام وضع المعاينة لأنه لا يمكن تجاوزه. بدلاً من ذلك، نوصي باستخدام [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+
+### يعمل مع مسارات API
+
+سيكون لمسارات API إمكانية الوصول إلى `preview` و `previewData` تحت كائن الطلب. على سبيل المثال:
+
+```js
+export default function myApiRoute(req, res) {
+  const isPreview = req.preview
+  const previewData = req.previewData
+  // ...
+}
+```
+
+### فريد لكل `next build`
+
+تتغير كل من قيمة ملف تعريف الارتباط للتحايل والمفتاح الخاص لتشفير `previewData` عند اكتمال `next build`.
+هذا يضمن أنه لا يمكن تخمين ملف تعريف الارتباط للتحايل.
+
+> **جيد أن تعرف**: لاختبار وضع المعاينة محليًا عبر HTTP، سيحتاج متصفحك إلى السماح بملفات تعريف الارتباط من جهات خارجية والوصول إلى التخزين المحلي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/15-content-security-policy.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/15-content-security-policy.mdx
new file mode 100644
index 00000000..acebf34c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/15-content-security-policy.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:00.994Z
+title: سياسة أمان المحتوى (Content Security Policy)
+description: تعلم كيفية تعيين سياسة أمان المحتوى (CSP) لتطبيق Next.js الخاص بك.
+source: app/building-your-application/configuring/content-security-policy
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/index.mdx
new file mode 100644
index 00000000..657317b5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/06-configuring/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:55.775Z
+title: التهيئة
+description: تعلم كيفية تهيئة تطبيق Next.js الخاص بك.
+source: app/building-your-application/configuring
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/01-production-checklist.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/01-production-checklist.mdx
new file mode 100644
index 00000000..9e622de5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/01-production-checklist.mdx
@@ -0,0 +1,145 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:53:32.309Z
+title: الانتقال إلى مرحلة الإنتاج
+description: قبل نشر تطبيق Next.js الخاص بك في مرحلة الإنتاج، إليك بعض التوصيات لضمان أفضل تجربة للمستخدم.
+---
+
+قبل نشر تطبيق Next.js الخاص بك في مرحلة الإنتاج، إليك بعض التوصيات لضمان أفضل تجربة للمستخدم.
+
+## بشكل عام
+
+- استخدم [التخزين المؤقت](#caching) حيثما أمكن.
+- تأكد من نشر قاعدة البيانات والخلفية في نفس المنطقة الجغرافية.
+- اسعَ لإرسال أقل كمية ممكنة من JavaScript.
+- أخرِج تحميل حزم JavaScript الثقيلة حتى الحاجة إليها.
+- تأكد من إعداد [تسجيل الأحداث (logging)](#logging).
+- تأكد من إعداد [معالجة الأخطاء](#error-handling).
+- اضبط صفحات [404](/docs/pages/building-your-application/routing/custom-error#404-page) (غير موجود) و [500](/docs/pages/building-your-application/routing/custom-error#500-page) (خطأ).
+- تأكد من [قياس الأداء](/docs/pages/building-your-application/optimizing/analytics).
+- شغّل [Lighthouse](https://developers.google.com/web/tools/lighthouse) للتحقق من الأداء، أفضل الممارسات، إمكانية الوصول، وتحسين محركات البحث (SEO). للحصول على أفضل النتائج، استخدم نسخة إنتاج من Next.js واستخدم وضع التصفح المتخفي في متصفحك حتى لا تتأثر النتائج بالملحقات.
+- راجع [المتصفحات والميزات المدعومة](/docs/architecture/supported-browsers).
+- حسّن الأداء باستخدام:
+  - [`next/image` وتحسين الصور التلقائي](/docs/pages/building-your-application/optimizing/images)
+  - [تحسين الخطوط التلقائي](/docs/pages/building-your-application/optimizing/fonts)
+  - [تحسين النصوص البرمجية (Scripts)](/docs/pages/building-your-application/optimizing/scripts)
+- حسّن [أداء التحميل](#loading-performance)
+- فكر في إضافة [سياسة أمان المحتوى (Content Security Policy)](/docs/pages/building-your-application/configuring/content-security-policy)
+
+## التخزين المؤقت (Caching)
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [ssr-caching](https://github.com/vercel/next.js/tree/canary/examples/ssr-caching)
+
+</details>
+
+يحسن التخزين المؤقت أوقات الاستجابة ويقلل عدد الطلبات إلى الخدمات الخارجية. يقوم Next.js تلقائيًا بإضافة رؤوس تخزين مؤقت للأصول الثابتة التي يتم تقديمها من `/_next/static` بما في ذلك JavaScript، CSS، الصور الثابتة، ووسائط أخرى.
+
+```terminal
+Cache-Control: public, max-age=31536000, immutable
+```
+
+سيتم استبدال رؤوس `Cache-Control` المحددة في `next.config.js` في بيئة الإنتاج لضمان إمكانية تخزين الأصول الثابتة بشكل فعال. إذا كنت بحاجة إلى إعادة التحقق من صحة التخزين المؤقت لصفحة تم [إنشاؤها بشكل ثابت](/docs/pages/building-your-application/rendering/static-site-generation)، يمكنك فعل ذلك عن طريق تعيين `revalidate` في دالة [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) الخاصة بالصفحة. إذا كنت تستخدم `next/image`، يمكنك ضبط [`minimumCacheTTL`](/docs/pages/api-reference/components/image#minimumcachettl) لمحمل تحسين الصور الافتراضي.
+
+> **معلومة مفيدة**: عند تشغيل التطبيق محليًا باستخدام `next dev`، يتم استبدال الرؤوس لمنع التخزين المؤقت محليًا.
+
+```terminal
+Cache-Control: no-cache, no-store, max-age=0, must-revalidate
+```
+
+يمكنك أيضًا استخدام رؤوس التخزين المؤقت داخل `getServerSideProps` ومسارات API للاستجابات الديناميكية. على سبيل المثال، باستخدام [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/).
+
+```jsx
+// تعتبر هذه القيمة طازجة لمدة عشر ثوانٍ (s-maxage=10).
+// إذا تم تكرار الطلب خلال الثواني العشر التالية، ستظل القيمة المخزنة مؤقتًا طازجة. إذا تم تكرار الطلب قبل 59 ثانية،
+// ستكون القيمة المخزنة مؤقتًا قديمة ولكنها ستظل تُعرض (stale-while-revalidate=59).
+//
+// في الخلفية، سيتم إرسال طلب إعادة تحقق لتعبئة التخزين المؤقت
+// بقيمة طازجة. إذا قمت بتحديث الصفحة، سترى القيمة الجديدة.
+export async function getServerSideProps({ req, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=10, stale-while-revalidate=59'
+  )
+
+  return {
+    props: {},
+  }
+}
+```
+
+بشكل افتراضي، سيتم تعيين رؤوس `Cache-Control` بشكل مختلف اعتمادًا على كيفية جلب البيانات في صفحتك.
+
+- إذا كانت الصفحة تستخدم `getServerSideProps` أو `getInitialProps`، فستستخدم رأس `Cache-Control` الافتراضي المعين بواسطة `next start` لمنع التخزين المؤقت العرضي للاستجابات التي لا يمكن تخزينها مؤقتًا. إذا كنت تريد سلوك تخزين مؤقت مختلف أثناء استخدام `getServerSideProps`، استخدم `res.setHeader('Cache-Control', 'value_you_prefer')` داخل الدالة كما هو موضح أعلاه.
+- إذا كانت الصفحة تستخدم `getStaticProps`، فسيكون لها رأس `Cache-Control` بقيمة `s-maxage=REVALIDATE_SECONDS, stale-while-revalidate`، أو إذا لم يتم استخدام `revalidate`، `s-maxage=31536000, stale-while-revalidate` للتخزين المؤقت لأقصى مدة ممكنة.
+
+> **معلومة مفيدة**: يجب أن يدعم موفر النشر الخاص بك التخزين المؤقت للاستجابات الديناميكية. إذا كنت تستضيف التطبيق بنفسك، فستحتاج إلى إضافة هذا المنطق بنفسك باستخدام مخزن مفتاح/قيمة مثل Redis. إذا كنت تستخدم Vercel، [يعمل تخزين الحافة (Edge Caching) دون الحاجة إلى تكوين](https://vercel.com/docs/edge-network/caching?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+## تقليل حجم JavaScript
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [with-dynamic-import](https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import)
+
+</details>
+
+لتقليل كمية JavaScript المرسلة إلى المتصفح، يمكنك استخدام الأدوات التالية لفهم ما يتم تضمينه داخل كل حزمة JavaScript:
+
+- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) – عرض حجم الحزمة المستوردة داخل VSCode.
+- [Package Phobia](https://packagephobia.com/) – اكتشف تكلفة إضافة تبعية تطوير جديدة إلى مشروعك.
+- [Bundle Phobia](https://bundlephobia.com/) - حلل كيف يمكن لتبعية ما أن تزيد أحجام الحزم.
+- [Webpack Bundle Analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) – تصور حجم ملفات إخراج webpack مع خريطة شجرية تفاعلية قابلة للتكبير.
+- [bundlejs](https://bundlejs.com/) - أداة عبر الإنترنت لحزم وضغط مشاريعك بسرعة، مع عرض حجم الحزمة المضغوطة gzip/brotli، كل ذلك يعمل محليًا في متصفحك.
+
+سيتم تقسيم كل ملف داخل دليل `pages/` تلقائيًا إلى حزمة JavaScript الخاصة به أثناء `next build`. يمكنك أيضًا استخدام [الاستيراد الديناميكي](/docs/pages/building-your-application/optimizing/lazy-loading) لتحميل المكونات والمكتبات عند الحاجة. على سبيل المثال، قد ترغب في تأخير تحميل كود النافذة المنبثقة حتى ينقر المستخدم على زر الفتح.
+
+## تسجيل الأحداث (Logging)
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [Pino and Logflare Example](https://github.com/Logflare/next-pino-logflare-logging-example)
+
+</details>
+
+بما أن Next.js يعمل على كل من العميل والخادم، فهناك أشكال متعددة من تسجيل الأحداث المدعومة:
+
+- `console.log` في المتصفح
+- `stdout` على الخادم
+
+إذا كنت تريد حزمة تسجيل منظمة، نوصي بـ [Pino](https://www.npmjs.com/package/pino). إذا كنت تستخدم Vercel، فهناك [تكاملات تسجيل جاهزة](https://vercel.com/integrations?utm_source=next-site&utm_medium=docs&utm_campaign=next-website#logging) متوافقة مع Next.js.
+
+## معالجة الأخطاء (Error Handling)
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [with-sentry](https://github.com/vercel/next.js/tree/canary/examples/with-sentry)
+
+</details>
+
+عند حدوث استثناء غير معالج، يمكنك التحكم في تجربة المستخدمين باستخدام [صفحة 500](/docs/pages/building-your-application/routing/custom-error#500-page). نوصي بتخصيص هذه الصفحة لتناسب علامتك التجارية بدلاً من سمة Next.js الافتراضية.
+
+يمكنك أيضًا تسجيل وتتبع الاستثناءات باستخدام أداة مثل Sentry. [يُظهر هذا المثال](https://github.com/vercel/next.js/tree/canary/examples/with-sentry) كيفية التقاط وإبلاغ الأخطاء على كل من جانب العميل والخادم، باستخدام SDK Sentry لـ Next.js. هناك أيضًا [تكامل Sentry لـ Vercel](https://vercel.com/integrations/sentry?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+## أداء التحميل (Loading Performance)
+
+لتحسين أداء التحميل، تحتاج أولاً إلى تحديد ما يجب قياسه وكيفية قياسه. [مؤشرات الويب الأساسية (Core Web Vitals)](https://vercel.com/blog/core-web-vitals?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) هي معيار صناعي جيد يتم قياسه باستخدام متصفح الويب الخاص بك. إذا لم تكن على دراية بمقاييس Core Web Vitals، راجع [هذه المقالة](https://vercel.com/blog/core-web-vitals?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) وحدد المقاييس المحددة التي ستكون محركًا لأداء التحميل لديك. من الناحية المثالية، سترغب في قياس أداء التحميل في البيئات التالية:
+
+- في المختبر، باستخدام جهازك الخاص أو محاكي.
+- في الميدان، باستخدام بيانات من العالم الحقيقي من الزوار الفعليين.
+- محليًا، باستخدام اختبار يعمل على جهازك.
+- عن بُعد، باستخدام اختبار يعمل في السحابة.
+
+بمجرد أن تتمكن من قياس أداء التحميل، استخدم الاستراتيجيات التالية لتحسينه تدريجيًا بحيث تطبق استراتيجية واحدة، تقيس الأداء الجديد وتستمر في الضبط حتى لا ترى تحسنًا كبيرًا. ثم يمكنك الانتقال إلى الاستراتيجية التالية.
+
+- استخدم مناطق التخزين المؤقت القريبة من المناطق التي يتم فيها نشر قاعدة البيانات أو API.
+- كما هو موضح في قسم [التخزين المؤقت](#caching)، استخدم قيمة `stale-while-revalidate` التي لن تثقل كاهل خلفيتك.
+- استخدم [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) لتقليل عدد الطلبات إلى خلفيتك.
+- احذف JavaScript غير المستخدم. راجع [هذه المقالة](https://calibreapp.com/blog/bundle-size-optimization) لفهم مقاييس Core Web Vitals التي يؤثر عليها حجم الحزمة وما هي الاستراتيجيات التي يمكنك استخدامها لتقليلها، مثل:
+  - إعداد محرر الأكواد لعرض تكاليف وأحجام الاستيراد
+  - البحث عن حزم بديلة أصغر حجمًا
+  - تحميل المكونات والتبعيات بشكل ديناميكي
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/02-static-exports.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/02-static-exports.mdx
new file mode 100644
index 00000000..0e0e528a
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/02-static-exports.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:45.451Z
+title: التصدير الثابت (Static Exports)
+description: يتيح لك Next.js البدء كموقع ثابت أو تطبيق أحادي الصفحة (SPA)، مع إمكانية الترقية لاحقًا لاستخدام الميزات التي تتطلب خادمًا.
+source: app/building-your-application/deploying/static-exports
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/03-multi-zones.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/03-multi-zones.mdx
new file mode 100644
index 00000000..bad5cb1d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/03-multi-zones.mdx
@@ -0,0 +1,35 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:57.232Z
+title: المناطق المتعددة
+description: تعلم كيفية استخدام المناطق المتعددة لنشر تطبيقات Next.js متعددة كتطبيق واحد.
+---
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مع المناطق](https://github.com/vercel/next.js/tree/canary/examples/with-zones)
+
+</details>
+
+المنطقة هي نشر واحد لتطبيق Next.js. يمكنك امتلاك مناطق متعددة ودمجها كتطبيق واحد.
+
+على سبيل المثال، لنفترض أن لديك التطبيقات التالية:
+
+- تطبيق لخدمة `/blog/**`
+- تطبيق آخر لخدمة جميع الصفحات الأخرى
+
+بدعم المناطق المتعددة، يمكنك دمج هذين التطبيقين في تطبيق واحد يسمح لعملائك بتصفحه باستخدام عنوان URL واحد، ولكن يمكنك تطوير ونشر كلا التطبيقين بشكل مستقل.
+
+## كيفية تعريف منطقة
+
+لا توجد واجهات برمجة تطبيقات (APIs) خاصة بالمناطق. كل ما تحتاج إلى فعله هو:
+
+- التأكد من الاحتفاظ فقط بالصفحات التي تحتاجها في تطبيقك، مما يعني أن التطبيق لا يمكن أن يحتوي على صفحات من تطبيق آخر، إذا كان التطبيق `A` يحتوي على `/blog` فلا ينبغي أن يحتوي التطبيق `B` عليها أيضًا.
+- التأكد من تكوين [basePath](/docs/app/api-reference/next-config-js/basePath) لتجنب التعارضات مع الصفحات والملفات الثابتة.
+
+## كيفية دمج المناطق
+
+يمكنك دمج المناطق باستخدام [`rewrites`](/docs/pages/api-reference/next-config-js/rewrites) في أحد التطبيقات أو أي خادم وكيل HTTP.
+
+بالنسبة لتطبيقات [Next.js على Vercel](https://vercel.com?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، يمكنك استخدام [monorepo](https://vercel.com/blog/monorepos-are-changing-how-teams-build-software?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لنشر كلا التطبيقين باستخدام أمر `git push` واحد.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/04-ci-build-caching.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/04-ci-build-caching.mdx
new file mode 100644
index 00000000..8afda498
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/04-ci-build-caching.mdx
@@ -0,0 +1,130 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:15.672Z
+title: التخزين المؤقت لعمليات التكامل المستمر (CI) في البناء
+description: تعلم كيفية تكوين التكامل المستمر (CI) لتخزين عمليات بناء Next.js مؤقتًا
+---
+
+لتحسين أداء البناء، يحفظ Next.js ذاكرة تخزين مؤقت في `.next/cache` يتم مشاركتها بين عمليات البناء المختلفة.
+
+للاستفادة من هذه الذاكرة المؤقتة في بيئات التكامل المستمر (CI)، يجب تكوين سير العمل في CI الخاص بك للحفاظ على الذاكرة المؤقتة بشكل صحيح بين عمليات البناء.
+
+> إذا لم يتم تكوين CI الخاص بك للحفاظ على `.next/cache` بين عمليات البناء، قد تظهر لك رسالة خطأ [No Cache Detected](/docs/messages/no-cache).
+
+إليك بعض أمثلة تكوينات الذاكرة المؤقتة لمزودي CI الشائعين:
+
+## Vercel
+
+يتم تكوين ذاكرة التخزين المؤقت لـ Next.js تلقائيًا لك. لا يلزم اتخاذ أي إجراء من جانبك.
+
+## CircleCI
+
+قم بتحرير خطوة `save_cache` في ملف `.circleci/config.yml` لتشمل `.next/cache`:
+
+```yaml
+steps:
+  - save_cache:
+      key: dependency-cache-{{ checksum "yarn.lock" }}
+      paths:
+        - ./node_modules
+        - ./.next/cache
+```
+
+إذا لم يكن لديك مفتاح `save_cache`، يرجى اتباع [توثيق CircleCI حول إعداد ذاكرة التخزين المؤقت للبناء](https://circleci.com/docs/2.0/caching/).
+
+## Travis CI
+
+أضف أو ادمج ما يلي في ملف `.travis.yml`:
+
+```yaml
+cache:
+  directories:
+    - $HOME/.cache/yarn
+    - node_modules
+    - .next/cache
+```
+
+## GitLab CI
+
+أضف أو ادمج ما يلي في ملف `.gitlab-ci.yml`:
+
+```yaml
+cache:
+  key: ${CI_COMMIT_REF_SLUG}
+  paths:
+    - node_modules/
+    - .next/cache/
+```
+
+## Netlify CI
+
+استخدم [Netlify Plugins](https://www.netlify.com/products/build/plugins/) مع [`@netlify/plugin-nextjs`](https://www.npmjs.com/package/@netlify/plugin-nextjs).
+
+## AWS CodeBuild
+
+أضف (أو ادمج) ما يلي إلى ملف `buildspec.yml`:
+
+```yaml
+cache:
+  paths:
+    - 'node_modules/**/*' # تخزين `node_modules` مؤقتًا لـ `yarn` أو `npm i` أسرع
+    - '.next/cache/**/*' # تخزين Next.js مؤقتًا لإعادة بناء التطبيق بشكل أسرع
+```
+
+## GitHub Actions
+
+باستخدام [actions/cache](https://github.com/actions/cache) من GitHub، أضف الخطوة التالية في ملف سير العمل الخاص بك:
+
+```yaml
+uses: actions/cache@v3
+with:
+  # راجع هنا للتخزين المؤقت مع `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn أو يمكنك الاستفادة من التخزين المؤقت مع actions/setup-node https://github.com/actions/setup-node
+  path: |
+    ~/.npm
+    ${{ github.workspace }}/.next/cache
+  # إنشاء ذاكرة تخزين مؤقت جديدة عند تغيير الحزم أو ملفات المصدر.
+  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+  # إذا تغيرت ملفات المصدر ولكن لم تتغير الحزم، أعد البناء من ذاكرة التخزين المؤقت السابقة.
+  restore-keys: |
+    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+```
+
+## Bitbucket Pipelines
+
+أضف أو ادمج ما يلي في ملف `bitbucket-pipelines.yml` في المستوى الأعلى (نفس مستوى `pipelines`):
+
+```yaml
+definitions:
+  caches:
+    nextcache: .next/cache
+```
+
+ثم أشر إليه في قسم `caches` من `step` في خط أنابيبك:
+
+```yaml
+- step:
+    name: your_step_name
+    caches:
+      - node
+      - nextcache
+```
+
+## Heroku
+
+باستخدام [custom cache](https://devcenter.heroku.com/articles/nodejs-support#custom-caching) من Heroku، أضف مصفوفة `cacheDirectories` في ملف package.json الرئيسي:
+
+```javascript
+"cacheDirectories": [".next/cache"]
+```
+
+## Azure Pipelines
+
+باستخدام [Cache task](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/cache) من Azure Pipelines، أضف المهمة التالية إلى ملف pipeline yaml في مكان ما قبل المهمة التي تنفذ `next build`:
+
+```yaml
+- task: Cache@2
+  displayName: 'Cache .next/cache'
+  inputs:
+    key: next | $(Agent.OS) | yarn.lock
+    path: '$(System.DefaultWorkingDirectory)/.next/cache'
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/index.mdx
new file mode 100644
index 00000000..42faeda0
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/07-deploying/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:29.337Z
+title: النشر
+description: تعلم كيفية نشر تطبيق Next.js الخاص بك في بيئة الإنتاج، سواءً كان مُدارًا أو مستضافًا ذاتيًا.
+source: app/building-your-application/deploying
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/01-codemods.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/01-codemods.mdx
new file mode 100644
index 00000000..e2ec2c1b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/01-codemods.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:18.697Z
+title: تحويلات الكود (Codemods)
+description: استخدم تحويلات الكود لترقية قاعدة كود Next.js عند إصدار ميزات جديدة.
+source: app/building-your-application/upgrading/codemods
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/02-app-router-migration.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/02-app-router-migration.mdx
new file mode 100644
index 00000000..245b596e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/02-app-router-migration.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:09.398Z
+title: من الصفحات إلى التطبيق
+description: تعلم كيفية ترقية تطبيق Next.js الحالي من موجه الصفحات (Pages Router) إلى موجه التطبيق (App Router).
+source: app/building-your-application/upgrading/app-router-migration
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/03-version-13.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/03-version-13.mdx
new file mode 100644
index 00000000..2b22aa6f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/03-version-13.mdx
@@ -0,0 +1,81 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:52.790Z
+title: الإصدار 13
+description: ترقية تطبيق Next.js من الإصدار 12 إلى الإصدار 13.
+---
+
+## الترقية من الإصدار 12 إلى 13
+
+للتحديث إلى Next.js الإصدار 13، قم بتنفيذ الأمر التالي باستخدام مدير الحزم المفضل لديك:
+
+```bash filename="Terminal"
+npm i next@latest react@latest react-dom@latest eslint-config-next@latest
+# أو
+yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
+# أو
+pnpm up next react react-dom eslint-config-next --latest
+# أو
+bun add next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
+### ملخص الإصدار 13
+
+- تم تغيير [المتصفحات المدعومة](/docs/architecture/supported-browsers) بحذف Internet Explorer واستهداف المتصفحات الحديثة.
+- تم رفع الحد الأدنى لإصدار Node.js من 12.22.0 إلى 16.14.0، حيث أن الإصدارين 12.x و14.x قد وصلوا إلى نهاية دعمهم.
+- تم رفع الحد الأدنى لإصدار React من 17.0.2 إلى 18.2.0.
+- تم تغيير خاصية التكوين `swcMinify` من `false` إلى `true`. راجع [مترجم Next.js](/docs/architecture/nextjs-compiler) للمزيد من المعلومات.
+- تم تغيير استيراد `next/image` إلى `next/legacy/image`. وتم تغيير استيراد `next/future/image` إلى `next/image`. يتوفر [أداة تحويل تلقائي](/docs/pages/building-your-application/upgrading/codemods#next-image-to-legacy-image) لإعادة تسمية الاستيرادات بشكل آلي وآمن.
+- لم يعد من الممكن أن يكون العنصر الفرعي لـ `next/link` هو `<a>`. أضف الخاصية `legacyBehavior` لاستخدام السلوك القديم أو احذف `<a>` للترقية. يتوفر [أداة تحويل تلقائي](/docs/pages/building-your-application/upgrading/codemods#new-link) لترقية الكود تلقائيًا.
+- تمت إزالة خاصية التكوين `target` واستبدالها بـ [تتبع ملفات الإخراج](/docs/pages/api-reference/next-config-js/output).
+
+## ترقية الميزات المشتركة
+
+يقدم Next.js 13 [دليل `app` جديد](/docs/app/building-your-application/routing) بميزات واتفاقيات جديدة. ومع ذلك، لا يتطلب الترقية إلى Next.js 13 استخدام [دليل `app` الجديد](/docs/app/building-your-application/routing#the-app-router).
+
+يمكنك الاستمرار في استخدام `pages` مع الميزات الجديدة التي تعمل في كلا الدليلين، مثل [مكون الصورة المحدث](#image-component)، [مكون الرابط](#link-component)، [مكون السكريبت](#script-component)، و[تحسين الخطوط](#font-optimization).
+
+### مكون `<Image/>`
+
+قدم Next.js 12 العديد من التحسينات على مكون الصورة باستيراد مؤقت: `next/future/image`. شملت هذه التحسينات تقليل جافاسكريبت من جانب العميل، طرق أسهل لتوسيع وتنسيق الصور، تحسين إمكانية الوصول، وتحميل كسول متوافق مع المتصفحات.
+
+بدءًا من Next.js 13، أصبح هذا السلوك الجديد هو الافتراضي لـ `next/image`.
+
+يتوفر أداتان تحويل تلقائي لمساعدتك في الانتقال إلى مكون الصورة الجديد:
+
+- [next-image-to-legacy-image](/docs/pages/building-your-application/upgrading/codemods#next-image-to-legacy-image): تقوم هذه الأداة بإعادة تسمية استيرادات `next/image` إلى `next/legacy/image` تلقائيًا للحفاظ على نفس سلوك Next.js 12. نوصي بتشغيل هذه الأداة لتحديث Next.js 13 بسرعة.
+- [next-image-experimental](/docs/pages/building-your-application/upgrading/codemods#next-image-experimental): بعد تشغيل الأداة السابقة، يمكنك تشغيل هذه الأداة التجريبية لترقية `next/legacy/image` إلى `next/image` الجديد، مما يزيل الخصائص غير المستخدمة ويضيف أنماط مضمنة. لاحظ أن هذه الأداة تجريبية وتغطي فقط الاستخدام الثابت (مثل `<Image src={img} layout="responsive" />`) وليس الاستخدام الديناميكي (مثل `<Image {...props} />`).
+
+بدلاً من ذلك، يمكنك التحديث يدويًا باتباع [دليل الترحيل](/docs/pages/building-your-application/upgrading/codemods#next-image-experimental) ورؤية [المقارنة مع الإصدار القديم](/docs/pages/api-reference/components/image-legacy#comparison).
+
+### مكون `<Link>`
+
+لم يعد مكون [`<Link>`](/docs/pages/api-reference/components/link) يتطلب إضافة وسم `<a>` يدويًا كعنصر فرعي. تمت إضافة هذا السلوك كخيار تجريبي في [الإصدار 12.2](https://nextjs.org/blog/next-12-2) وهو الآن الافتراضي. في Next.js 13، يقوم `<Link>` دائمًا بعرض `<a>` ويسمح لك بتمرير الخصائص إلى الوسم الأساسي.
+
+على سبيل المثال:
+
+```jsx
+import Link from 'next/link'
+
+// Next.js 12: يجب تضمين `<a>` وإلا سيتم استبعاده
+<Link href="/about">
+  <a>About</a>
+</Link>
+
+// Next.js 13: يقوم `<Link>` دائمًا بعرض `<a>` تلقائيًا
+<Link href="/about">
+  About
+</Link>
+```
+
+لترقية روابطك إلى Next.js 13، يمكنك استخدام [أداة التحويل التلقائي `new-link`](/docs/pages/building-your-application/upgrading/codemods#new-link).
+
+### مكون `<Script>`
+
+تم تحديث سلوك [`next/script`](/docs/pages/api-reference/components/script) لدعم كل من `pages` و `app`. إذا كنت تتبنى `app` تدريجيًا، اقرأ [دليل الترقية](/docs/pages/building-your-application/upgrading).
+
+### تحسين الخطوط
+
+سابقًا، كان Next.js يساعدك في تحسين الخطوط عن طريق تضمين CSS الخطوط. يقدم الإصدار 13 وحدة [`next/font`](/docs/pages/building-your-application/optimizing/fonts) الجديدة التي تمنحك القدرة على تخصيص تجربة تحميل الخطوط مع ضمان أداء ممتاز وخصوصية.
+
+راجع [تحسين الخطوط](/docs/pages/building-your-application/optimizing/fonts) لمعرفة كيفية استخدام `next/font`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/04-version-12.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/04-version-12.mdx
new file mode 100644
index 00000000..f832cdf9
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/04-version-12.mdx
@@ -0,0 +1,146 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:08.093Z
+title: الإصدار 12
+description: ترقية تطبيق Next.js من الإصدار 11 إلى الإصدار 12.
+---
+
+لترقية إلى الإصدار 12، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm install next@12
+
+yarn add next@12
+
+pnpm update next@12
+
+bun add next@12
+```
+
+### الترقية إلى 12.2
+
+[البرمجيات الوسيطة (Middleware)](/docs/messages/middleware-upgrade-guide) - إذا كنت تستخدم البرمجيات الوسيطة قبل `12.2`، يرجى الاطلاع على [دليل الترقية](/docs/messages/middleware-upgrade-guide) لمزيد من المعلومات.
+
+### الترقية إلى 12.0
+
+[الحد الأدنى لإصدار Node.js](https://nodejs.org/en/) - تم رفع الحد الأدنى لإصدار Node.js من `12.0.0` إلى `12.22.0` وهو أول إصدار من Node.js يدعم وحدات ES الأصلية.
+
+[الحد الأدنى لإصدار React](https://reactjs.org/docs/add-react-to-a-website.html) - الحد الأدنى المطلوب لإصدار React هو `17.0.2`. للترقية يمكنك تنفيذ الأمر التالي في الطرفية:
+
+```bash filename="Terminal"
+npm install react@latest react-dom@latest
+
+yarn add react@latest react-dom@latest
+
+pnpm update react@latest react-dom@latest
+
+bun add react@latest react-dom@latest
+```
+
+#### استبدال Babel بـ SWC
+
+يستخدم Next.js الآن المترجم المعتمد على Rust [SWC](https://swc.rs/) لترجمة JavaScript/TypeScript. هذا المترجم الجديد أسرع بـ 17 مرة من Babel عند ترجمة الملفات الفردية وأسرع بـ 5 مرات في التحديث السريع (Fast Refresh).
+
+يوفر Next.js توافقًا كاملاً مع الإصدارات السابقة للتطبيقات التي تحتوي على [تكوين Babel مخصص](/docs/pages/building-your-application/configuring/babel). جميع التحويلات التي يتعامل معها Next.js افتراضيًا مثل styled-jsx وإزالة الأكواد غير المستخدمة (tree-shaking) لـ `getStaticProps` / `getStaticPaths` / `getServerSideProps` تم نقلها إلى Rust.
+
+عندما يحتوي التطبيق على تكوين Babel مخصص، سيتوقف Next.js تلقائيًا عن استخدام SWC لترجمة JavaScript/TypeScript وسيعود إلى استخدام Babel بنفس الطريقة التي كان يستخدمها في Next.js 11.
+
+سيتم نقل العديد من عمليات التكامل مع المكتبات الخارجية التي تتطلب حاليًا تحويلات Babel مخصصة إلى تحويلات SWC المعتمدة على Rust في المستقبل القريب. وتشمل هذه المكتبات على سبيل المثال لا الحصر:
+
+- Styled Components
+- Emotion
+- Relay
+
+من أجل تحديد أولويات التحويلات التي ستساعدك في اعتماد SWC، يرجى تقديم ملف `.babelrc` الخاص بك في [موضوع المناقشة هذا](https://github.com/vercel/next.js/discussions/30174).
+
+#### استبدال Terser بـ SWC للتصغير
+
+يمكنك اختيار استبدال Terser بـ SWC لتصغير JavaScript بسرعة تصل إلى 7 أضعاف باستخدام علم في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  swcMinify: true,
+}
+```
+
+يعد تصغير الأكواد باستخدام SWC علمًا اختياريًا لضمان إمكانية اختباره ضد المزيد من تطبيقات Next.js الواقعية قبل أن يصبح الافتراضي في Next.js 12.1. إذا كان لديك ملاحظات حول التصغير، يرجى تركها في [موضوع المناقشة هذا](https://github.com/vercel/next.js/discussions/30237).
+
+#### تحسينات في تحليل CSS لـ styled-jsx
+
+بالإضافة إلى المترجم المعتمد على Rust، قمنا بتنفيذ محلل CSS جديد يعتمد على المحلل المستخدم في تحويل Babel لـ styled-jsx. هذا المحلل الجديد لديه تحسينات في معالجة CSS ويظهر أخطاء عند استخدام CSS غير صالح كان يتسلل سابقًا ويسبب سلوكًا غير متوقع.
+
+بسبب هذا التغيير، سيتم طرح خطأ عند استخدام CSS غير صالح أثناء التطوير وعند تنفيذ `next build`. يؤثر هذا التغيير فقط على استخدام styled-jsx.
+
+#### تغيير عنصر التغليف لـ `next/image`
+
+يقدم `next/image` الآن عنصر `<img>` داخل `<span>` بدلاً من `<div>`.
+
+إذا كان تطبيقك يحتوي على CSS محدد يستهدف span مثل `.container span`، فإن الترقية إلى Next.js 12 قد تتطابق بشكل غير صحيح مع عنصر التغليف داخل مكون `<Image>`. يمكنك تجنب ذلك عن طريق تقييد المحدد إلى فئة معينة مثل `.container span.item` وتحديث المكون ذي الصلة بهذا className، مثل `<span className="item" />`.
+
+إذا كان تطبيقك يحتوي على CSS محدد يستهدف علامة `<div>` لـ `next/image`، مثل `.container div`، فقد لا يتطابق بعد الآن. يمكنك تحديث المحدد إلى `.container span`، أو preferably، إضافة `<div className="wrapper">` جديد يغلف مكون `<Image>` واستهدافه بدلاً من ذلك مثل `.container .wrapper`.
+
+لم يتغير دعم `className` وسيظل يتم تمريره إلى عنصر `<img>` الأساسي.
+
+راجع [الوثائق](/docs/pages/building-your-application/optimizing/images#styling) لمزيد من المعلومات.
+
+#### اتصال HMR يستخدم الآن WebSocket
+
+سابقًا، استخدم Next.js اتصال [أحداث مرسلة من الخادم (server-sent events)](https://developer.mozilla.org/docs/Web/API/Server-sent_events) لاستقبال أحداث HMR. يستخدم Next.js 12 الآن اتصال WebSocket.
+
+في بعض الحالات عند توجيه الطلبات إلى خادم تطوير Next.js، ستحتاج إلى التأكد من معالجة طلب الترقية بشكل صحيح. على سبيل المثال، في `nginx` ستحتاج إلى إضافة التكوين التالي:
+
+```nginx
+location /_next/webpack-hmr {
+    proxy_pass http://localhost:3000/_next/webpack-hmr;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+}
+```
+
+إذا كنت تستخدم Apache (2.x)، يمكنك إضافة التكوين التالي لتمكين WebSocket للخادم. راجع المنفذ واسم المضيف وأسماء الخوادم.
+
+```
+<VirtualHost *:443>
+ # ServerName yourwebsite.local
+ ServerName "${WEBSITE_SERVER_NAME}"
+ ProxyPass / http://localhost:3000/
+ ProxyPassReverse / http://localhost:3000/
+ # Next.js 12 يستخدم websocket
+ <Location /_next/webpack-hmr>
+    RewriteEngine On
+    RewriteCond %{QUERY_STRING} transport=websocket [NC]
+    RewriteCond %{HTTP:Upgrade} websocket [NC]
+    RewriteCond %{HTTP:Connection} upgrade [NC]
+    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
+    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
+    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
+ </Location>
+</VirtualHost>
+```
+
+بالنسبة للخوادم المخصصة، مثل `express`، قد تحتاج إلى استخدام `app.all` لضمان تمرير الطلب بشكل صحيح، على سبيل المثال:
+
+```js
+app.all('/_next/webpack-hmr', (req, res) => {
+  nextjsRequestHandler(req, res)
+})
+```
+
+#### تمت إزالة دعم Webpack 4
+
+إذا كنت تستخدم بالفعل webpack 5 يمكنك تخطي هذا القسم.
+
+اعتمد Next.js webpack 5 كافتراضي للترجمة في Next.js 11. كما تم الإعلان في [وثائق ترقية webpack 5](/docs/messages/webpack5) فإن Next.js 12 يزيل دعم webpack 4.
+
+إذا كان تطبيقك لا يزال يستخدم webpack 4 باستخدام علم الإلغاء، فسترى الآن خطأً يشير إلى [وثائق ترقية webpack 5](/docs/messages/webpack5).
+
+#### خيار `target` أصبح قديمًا
+
+إذا لم يكن لديك `target` في `next.config.js` يمكنك تخطي هذا القسم.
+
+أصبح خيار الهدف قديمًا لصالح الدعم المدمج لتتبع التبعيات المطلوبة لتشغيل صفحة.
+
+أثناء `next build`، سيتتبع Next.js تلقائيًا كل صفحة وتبعياتها لتحديد جميع الملفات المطلوبة لنشر نسخة إنتاج من تطبيقك.
+
+إذا كنت تستخدم حاليًا خيار `target` مضبوطًا على `serverless`، يرجى قراءة [الوثائق حول كيفية الاستفادة من المخرجات الجديدة](/docs/pages/api-reference/next-config-js/output).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/05-version-11.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/05-version-11.mdx
new file mode 100644
index 00000000..3fe327ae
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/05-version-11.mdx
@@ -0,0 +1,139 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:57.556Z
+title: الإصدار 11
+description: ترقية تطبيق Next.js من الإصدار 10 إلى الإصدار 11.
+---
+
+لترقية إلى الإصدار 11، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm install next@11
+
+yarn add next@11
+```
+
+### Webpack 5
+
+أصبح Webpack 5 الآن الخيار الافتراضي لجميع تطبيقات Next.js. إذا لم يكن لديك تكوين مخصص لـ webpack، فإن تطبيقك يستخدم بالفعل webpack 5. إذا كان لديك تكوين مخصص لـ webpack، يمكنك الرجوع إلى [توثيق Next.js لـ webpack 5](/docs/messages/webpack5) للحصول على إرشادات الترقية.
+
+### تنظيف `distDir` أصبح افتراضيًا الآن
+
+دليل إخراج البناء (الافتراضي هو `.next`) يتم تنظيفه الآن افتراضيًا باستثناء ذاكرة التخزين المؤقت لـ Next.js. يمكنك الرجوع إلى [RFC الخاص بتنظيف `distDir`](https://github.com/vercel/next.js/discussions/6009) لمزيد من المعلومات.
+
+إذا كان تطبيقك يعتمد على هذا السلوك سابقًا، يمكنك تعطيل السلوك الافتراضي الجديد عن طريق إضافة علامة `cleanDistDir: false` في ملف `next.config.js`.
+
+### دعم متغير البيئة `PORT` لـ `next dev` و `next start`
+
+يدعم Next.js 11 متغير البيئة `PORT` لتعيين المنفذ الذي يعمل عليه التطبيق. لا يزال يوصى باستخدام `-p`/`--port` ولكن إذا كنت محظورًا من استخدام `-p` بأي طريقة، يمكنك الآن استخدام `PORT` كبديل:
+
+مثال:
+
+```
+PORT=4000 next start
+```
+
+### تخصيص `next.config.js` لاستيراد الصور
+
+يدعم Next.js 11 استيراد الصور الثابتة مع `next/image`. تعتمد هذه الميزة الجديدة على القدرة على معالجة استيراد الصور. إذا كنت قد أضفت سابقًا حزم `next-images` أو `next-optimized-images`، يمكنك إما الانتقال إلى الدعم المدمج الجديد باستخدام `next/image` أو تعطيل الميزة:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
+### إزالة `super.componentDidCatch()` من `pages/_app.js`
+
+تم إهمال `componentDidCatch` لمكون `next/app` في Next.js 9 لأنه لم يعد هناك حاجة إليه وأصبح منذ ذلك الحين بلا تأثير. في Next.js 11، تمت إزالته.
+
+إذا كان لديك طريقة `componentDidCatch` مخصصة في `pages/_app.js`، يمكنك إزالة `super.componentDidCatch` لأنه لم يعد هناك حاجة إليه.
+
+### إزالة `Container` من `pages/_app.js`
+
+تم إهمال هذا التصدير في Next.js 9 لأنه لم يعد هناك حاجة إليه وأصبح منذ ذلك الحين بلا تأثير مع ظهور تحذير أثناء التطوير. في Next.js 11، تمت إزالته.
+
+إذا كان ملف `pages/_app.js` يستورد `Container` من `next/app`، يمكنك إزالته لأنه تمت إزالته. تعلم المزيد في [التوثيق](/docs/messages/app-container-deprecated).
+
+### إزالة استخدام `props.url` من مكونات الصفحة
+
+تم إهمال هذه الخاصية في Next.js 4 وكانت تظهر تحذيرًا أثناء التطوير منذ ذلك الحين. مع إدخال `getStaticProps` / `getServerSideProps`، كانت هذه الطرق تمنع بالفعل استخدام `props.url`. في Next.js 11، تمت إزالته تمامًا.
+
+يمكنك التعلم أكثر في [التوثيق](/docs/messages/url-deprecated).
+
+### إزالة الخاصية `unsized` من `next/image`
+
+تم إهمال الخاصية `unsized` في `next/image` في Next.js 10.0.1. يمكنك استخدام `layout="fill"` بدلاً من ذلك. في Next.js 11، تمت إزالة `unsized`.
+
+### إزالة الخاصية `modules` من `next/dynamic`
+
+تم إهمال خيارات `modules` و `render` لـ `next/dynamic` في Next.js 9.5. تم ذلك لجعل واجهة برمجة التطبيقات `next/dynamic` أقرب إلى `React.lazy`. في Next.js 11، تمت إزالة خيارات `modules` و `render`.
+
+لم يتم ذكر هذا الخيار في التوثيق منذ Next.js 8 لذا فمن غير المحتمل أن يكون تطبيقك يستخدمه.
+
+إذا كان تطبيقك يستخدم `modules` و `render`، يمكنك الرجوع إلى [التوثيق](/docs/messages/next-dynamic-modules).
+
+### إزالة `Head.rewind`
+
+أصبح `Head.rewind` بلا تأثير منذ Next.js 9.5، في Next.js 11 تمت إزالته. يمكنك إزالة استخدامك لـ `Head.rewind` بأمان.
+
+### استبعاد لغات Moment.js افتراضيًا
+
+تتضمن Moment.js ترجمات للعديد من اللغات افتراضيًا. يقوم Next.js الآن باستبعاد هذه اللغات تلقائيًا افتراضيًا لتحسين حجم الحزمة للتطبيقات التي تستخدم Moment.js.
+
+لتحميل لغة محددة، استخدم هذا المقتطف:
+
+```js
+import moment from 'moment'
+import 'moment/locale/ja'
+
+moment.locale('ja')
+```
+
+يمكنك إلغاء تفعيل هذا الافتراضي الجديد عن طريق إضافة `excludeDefaultMomentLocales: false` إلى `next.config.js` إذا كنت لا تريد السلوك الجديد، لاحظ أنه يوصى بشدة بعدم تعطيل هذا التحسين الجديد لأنه يقلل بشكل كبير من حجم Moment.js.
+
+### تحديث استخدام `router.events`
+
+في حال كنت تصل إلى `router.events` أثناء التصيير، في Next.js 11 لم يعد `router.events` متاحًا أثناء التصيير المسبق. تأكد من الوصول إلى `router.events` في `useEffect`:
+
+```js
+useEffect(() => {
+  const handleRouteChange = (url, { shallow }) => {
+    console.log(
+      `App is changing to ${url} ${
+        shallow ? 'with' : 'without'
+      } shallow routing`
+    )
+  }
+
+  router.events.on('routeChangeStart', handleRouteChange)
+
+  // If the component is unmounted, unsubscribe
+  // from the event with the `off` method:
+  return () => {
+    router.events.off('routeChangeStart', handleRouteChange)
+  }
+}, [router])
+```
+
+إذا كان تطبيقك يستخدم `router.router.events` الذي كان خاصية داخلية ولم تكن عامة، تأكد من استخدام `router.events` أيضًا.
+
+## الترقية من React 16 إلى 17
+
+أدخل React 17 [تحويل JSX جديد](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) الذي يجلب ميزة كانت موجودة منذ فترة طويلة في Next.js إلى مجتمع React الأوسع: عدم الحاجة إلى `import React from 'react'` عند استخدام JSX. عند استخدام React 17، سيقوم Next.js تلقائيًا باستخدام التحويل الجديد. هذا التحويل لا يجعل المتغير `React` عامًا، وهو ما كان تأثيرًا جانبيًا غير مقصود للتنفيذ السابق لـ Next.js. يتوفر [أداة تعديل تلقائي](/docs/pages/building-your-application/upgrading/codemods#add-missing-react-import) لإصلاح الحالات التي استخدمت فيها `React` دون استيراده عن طريق الخطأ.
+
+معظم التطبيقات تستخدم بالفعل أحدث إصدار من React، مع Next.js 11 تم تحديث الحد الأدنى لإصدار React إلى 17.0.2.
+
+لترقية، يمكنك تنفيذ الأمر التالي:
+
+```
+npm install react@latest react-dom@latest
+```
+
+أو باستخدام `yarn`:
+
+```
+yarn add react@latest react-dom@latest
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/06-version-10.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/06-version-10.mdx
new file mode 100644
index 00000000..415acaaa
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/06-version-10.mdx
@@ -0,0 +1,16 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:54.120Z
+title: الإصدار 10
+description: ترقية تطبيق Next.js من الإصدار 9 إلى الإصدار 10.
+---
+
+لم تكن هناك تغييرات غير متوافقة بين الإصدارين 9 و10.
+
+لترقية إلى الإصدار 10، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm install next@10
+
+yarn add next@10
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/07-version-9.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/07-version-9.mdx
new file mode 100644
index 00000000..ef6466fc
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/07-version-9.mdx
@@ -0,0 +1,224 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:46.840Z
+title: الترقية إلى الإصدار 9
+nav_title: الإصدار 9
+description: ترقية تطبيق Next.js الخاص بك من الإصدار 8 إلى الإصدار 9.
+---
+
+لترقية إلى الإصدار 9، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm install next@9
+
+yarn add next@9
+```
+
+## النشر الإنتاجي على Vercel
+
+إذا كنت قد قمت سابقًا بتكوين `routes` في ملف `vercel.json` للطرق الديناميكية، فيمكن إزالة هذه القواعد عند استخدام ميزة [التوجيه الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes) الجديدة في Next.js 9.
+
+طرق Next.js 9 الديناميكية **يتم تكوينها تلقائيًا على [Vercel](https://vercel.com/)** ولا تتطلب أي تخصيص في `vercel.json`.
+
+يمكنك قراءة المزيد حول [التوجيه الديناميكي هنا](/docs/pages/building-your-application/routing/dynamic-routes).
+
+## تحقق من ملف التطبيق المخصص (`pages/_app.js`)
+
+إذا كنت قد قمت سابقًا بنسخ مثال [التطبيق المخصص `<App>`](/docs/pages/building-your-application/routing/custom-app)، فقد تتمكن من إزالة `getInitialProps` الخاص بك.
+
+إزالة `getInitialProps` من `pages/_app.js` (عند الإمكان) أمر مهم للاستفادة من ميزات Next.js الجديدة!
+
+`getInitialProps` التالي لا يفعل شيئًا ويمكن إزالته:
+
+```js
+class MyApp extends App {
+  // قم بإزالتي، أنا لا أفعل شيئًا!
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  render() {
+    // ... إلخ
+  }
+}
+```
+
+## التغييرات غير المتوافقة مع الإصدارات السابقة
+
+### `@zeit/next-typescript` لم يعد ضروريًا
+
+Next.js سيتجاهل الآن استخدام `@zeit/next-typescript` وسيحذرك لإزالته. يرجى إزالة هذه الإضافة من `next.config.js`.
+
+قم بإزالة الإشارات إلى `@zeit/next-typescript/babel` من ملف `.babelrc` المخصص الخاص بك (إذا كان موجودًا).
+
+يجب أيضًا إزالة استخدام [`fork-ts-checker-webpack-plugin`](https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues) من `next.config.js`.
+
+يتم نشر تعريفات TypeScript مع حزمة `next`، لذا تحتاج إلى إلغاء تثبيت `@types/next` لأنها ستتعارض.
+
+الأنواع التالية مختلفة:
+
+> تم إنشاء هذه القائمة من قبل المجتمع لمساعدتك في الترقية، إذا وجدت اختلافات أخرى يرجى إرسال طلب سحب إلى هذه القائمة لمساعدة المستخدمين الآخرين.
+
+من:
+
+```tsx
+import { NextContext } from 'next'
+import { NextAppContext, DefaultAppIProps } from 'next/app'
+import { NextDocumentContext, DefaultDocumentIProps } from 'next/document'
+```
+
+إلى:
+
+```tsx
+import { NextPageContext } from 'next'
+import { AppContext, AppInitialProps } from 'next/app'
+import { DocumentContext, DocumentInitialProps } from 'next/document'
+```
+
+### مفتاح `config` أصبح الآن تصديرًا في الصفحة
+
+لم يعد بإمكانك تصدير متغير مخصص باسم `config` من صفحة (مثل `export { config }` / `export const config ...`).
+يستخدم هذا المتغير المصدر الآن لتحديد تكوين Next.js على مستوى الصفحة مثل ميزات AMP الاختيارية وطرق API.
+
+يجب عليك إعادة تسمية تصدير `config` غير المخصص لـ Next.js إلى شيء مختلف.
+
+### `next/dynamic` لم يعد يعرض "جار التحميل..." افتراضيًا أثناء التحميل
+
+المكونات الديناميكية لن تعرض أي شيء افتراضيًا أثناء التحميل. لا يزال بإمكانك تخصيص هذا السلوك عن طريق تعيين خاصية `loading`:
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const DynamicComponentWithCustomLoading = dynamic(
+  () => import('../components/hello2'),
+  {
+    loading: () => <p>جار التحميل</p>,
+  }
+)
+```
+
+### تمت إزالة `withAmp` لصالح كائن تكوين مصدر
+
+Next.js لديه الآن مفهوم التكوين على مستوى الصفحة، لذا تمت إزالة مكون الترتيب العالي `withAmp` للاتساق.
+
+يمكن **إجراء هذا التغيير تلقائيًا عن طريق تنفيذ الأوامر التالية في جذر مشروع Next.js الخاص بك:**
+
+```bash filename="Terminal"
+curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
+```
+
+لإجراء هذا الترحيل يدويًا، أو لعرض ما سينتجه التعديل البرمجي، انظر أدناه:
+
+**قبل**
+
+```jsx
+import { withAmp } from 'next/amp'
+
+function Home() {
+  return <h1>صفحتي AMP</h1>
+}
+
+export default withAmp(Home)
+// أو
+export default withAmp(Home, { hybrid: true })
+```
+
+**بعد**
+
+```jsx
+export default function Home() {
+  return <h1>صفحتي AMP</h1>
+}
+
+export const config = {
+  amp: true,
+  // أو
+  amp: 'hybrid',
+}
+```
+
+### `next export` لم يعد يصدر الصفحات كـ `index.html`
+
+سابقًا، تصدير `pages/about.js` كان يؤدي إلى `out/about/index.html`. تم تغيير هذا السلوك ليؤدي إلى `out/about.html`.
+
+يمكنك العودة إلى السلوك السابق عن طريق إنشاء `next.config.js` بالمحتوى التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+}
+```
+
+### يتم التعامل مع `pages/api/` بشكل مختلف
+
+الصفحات في `pages/api/` تعتبر الآن [طرق API](https://nextjs.org/blog/next-9#api-routes).
+الصفحات في هذا الدليل لن تحتوي على حزمة جانب العميل بعد الآن.
+
+## الميزات المهملة
+
+### `next/dynamic` قد أهمل تحميل عدة وحدات في وقت واحد
+
+تم إهمال القدرة على تحميل عدة وحدات في وقت واحد في `next/dynamic` لتكون أقرب إلى تنفيذ React (`React.lazy` و `Suspense`).
+
+تحديث الكود الذي يعتمد على هذا السلوك سهل نسبيًا! لقد قدمنا مثالًا قبل/بعد لمساعدتك في ترحيل تطبيقك:
+
+**قبل**
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const HelloBundle = dynamic({
+  modules: () => {
+    const components = {
+      Hello1: () => import('../components/hello1').then((m) => m.default),
+      Hello2: () => import('../components/hello2').then((m) => m.default),
+    }
+
+    return components
+  },
+  render: (props, { Hello1, Hello2 }) => (
+    <div>
+      <h1>{props.title}</h1>
+      <Hello1 />
+      <Hello2 />
+    </div>
+  ),
+})
+
+function DynamicBundle() {
+  return <HelloBundle title="حزمة ديناميكية" />
+}
+
+export default DynamicBundle
+```
+
+**بعد**
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const Hello1 = dynamic(() => import('../components/hello1'))
+const Hello2 = dynamic(() => import('../components/hello2'))
+
+function HelloBundle({ title }) {
+  return (
+    <div>
+      <h1>{title}</h1>
+      <Hello1 />
+      <Hello2 />
+    </div>
+  )
+}
+
+function DynamicBundle() {
+  return <HelloBundle title="حزمة ديناميكية" />
+}
+
+export default DynamicBundle
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/index.mdx
new file mode 100644
index 00000000..9c04c733
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/08-upgrading/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:47.040Z
+title: الترقية
+description: تعلم كيفية الترقية إلى أحدث إصدارات إطار عمل Next.js.
+source: app/building-your-application/upgrading
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/index.mdx b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/index.mdx
new file mode 100644
index 00000000..97f99937
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/01-building-your-application/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:05.987Z
+title: بناء تطبيقك
+description: تعلم كيفية استخدام ميزات Next.js لبناء تطبيقك.
+source: app/building-your-application
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/font.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/font.mdx
new file mode 100644
index 00000000..49fa8401
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/font.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:39.470Z
+title: وحدة الخطوط
+nav_title: الخط
+description: مرجع API لوحدة الخطوط
+source: app/api-reference/components/font
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/head.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/head.mdx
new file mode 100644
index 00000000..0fc2ea64
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/head.mdx
@@ -0,0 +1,65 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:52.995Z
+title: مكون <Head>
+description: أضف عناصر مخصصة إلى قسم `head` لصفحتك باستخدام المكون المدمج Head.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [عناصر Head](https://github.com/vercel/next.js/tree/canary/examples/head-elements)
+- [مكون التخطيط (Layout)](https://github.com/vercel/next.js/tree/canary/examples/layout-component)
+
+</details>
+
+نوفر مكونًا مدمجًا لإلحاق العناصر بقسم `head` للصفحة:
+
+```jsx
+import Head from 'next/head'
+
+function IndexPage() {
+  return (
+    <div>
+      <Head>
+        <title>عنوان صفحتي</title>
+      </Head>
+      <p>مرحبًا بالعالم!</p>
+    </div>
+  )
+}
+
+export default IndexPage
+```
+
+لتجنب تكرار العلامات في قسم `head`، يمكنك استخدام الخاصية `key` التي تضمين عرض العلامة مرة واحدة فقط، كما في المثال التالي:
+
+```jsx
+import Head from 'next/head'
+
+function IndexPage() {
+  return (
+    <div>
+      <Head>
+        <title>عنوان صفحتي</title>
+        <meta property="og:title" content="عنوان صفحتي" key="title" />
+      </Head>
+      <Head>
+        <meta property="og:title" content="عنواني الجديد" key="title" />
+      </Head>
+      <p>مرحبًا بالعالم!</p>
+    </div>
+  )
+}
+
+export default IndexPage
+```
+
+في هذه الحالة، يتم عرض علامة `<meta property="og:title" />` الثانية فقط. يتم التعامل تلقائيًا مع علامات `meta` التي تحتوي على سمات `key` مكررة.
+
+> يتم مسح محتويات `head` عند إلغاء تحميل المكون، لذا تأكد من أن كل صفحة تحدد بالكامل ما تحتاجه في `head` دون افتراضات حول ما أضافته الصفحات الأخرى.
+
+يجب أن تكون العناصر مثل `title` أو `meta` أو أي عناصر أخرى (مثل `script`) موجودة كأبناء **مباشرين** لعنصر `Head`،
+أو ملفوفة في مستوى واحد كحد أقصى من `<React.Fragment>` أو المصفوفات - وإلا لن يتم التعرف على العلامات بشكل صحيح أثناء التنقل على جانب العميل.
+
+> نوصي باستخدام [next/script](/docs/pages/building-your-application/optimizing/scripts) في مكونك بدلاً من إنشاء `<script>` يدويًا في `next/head`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/image-legacy.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/image-legacy.mdx
new file mode 100644
index 00000000..6018c900
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/image-legacy.mdx
@@ -0,0 +1,578 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:55:25.907Z
+title: مكون <Image> (القديم)
+description: تحسين الصور مع التوافق مع الإصدارات السابقة باستخدام مكون الصورة القديم.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مكون الصورة القديم](https://github.com/vercel/next.js/tree/canary/examples/image-legacy-component)
+
+</details>
+
+بدءًا من Next.js 13، تمت إعادة كتابة مكون `next/image` لتحسين الأداء وتجربة المطور. لتوفير حل ترقية متوافق مع الإصدارات السابقة، تم تغيير اسم `next/image` القديم إلى `next/legacy/image`.
+
+عرض **الجديد** [مرجع API لـ `next/image`](/docs/pages/api-reference/components/image)
+
+## المقارنة
+
+بالمقارنة مع `next/legacy/image`، يحتوي مكون `next/image` الجديد على التغييرات التالية:
+
+- إزالة `<span>` المغلف حول `<img>` لصالح [نسبة العرض إلى الارتفاع المحسوبة أصلاً](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes)
+- إضافة دعم لخاصية `style` الأساسية
+  - إزالة خاصية `layout` لصالح `style` أو `className`
+  - إزالة خاصية `objectFit` لصالح `style` أو `className`
+  - إزالة خاصية `objectPosition` لصالح `style` أو `className`
+- إزالة تنفيذ `IntersectionObserver` لصالح [التحميل الكسول الأصلي](https://caniuse.com/loading-lazy-attr)
+  - إزالة خاصية `lazyBoundary` حيث لا يوجد ما يعادلها أصلاً
+  - إزالة خاصية `lazyRoot` حيث لا يوجد ما يعادلها أصلاً
+- إزالة تكوين `loader` لصالح خاصية [`loader`](#loader)
+- تغيير خاصية `alt` من اختيارية إلى مطلوبة
+- تغيير رد الاتصال `onLoadingComplete` لاستقبال مرجع لعنصر `<img>`
+
+## الخصائص المطلوبة
+
+يتطلب مكون `<Image />` الخصائص التالية.
+
+### src
+
+يجب أن يكون أحد الخيارات التالية:
+
+- ملف صورة [مستورد بشكل ثابت](/docs/pages/building-your-application/optimizing/images#local-images)
+- سلسلة مسار. يمكن أن يكون هذا إما عنوان URL خارجي مطلق، أو مسار داخلي اعتمادًا على خاصية [loader](#loader) أو [تكوين المحمل](#loader-configuration).
+
+عند استخدام عنوان URL خارجي، يجب إضافته إلى [remotePatterns](#remote-patterns) في `next.config.js`.
+
+### width
+
+يمكن أن تمثل خاصية `width` إما العرض _المعروض_ أو العرض _الأصلي_ بالبكسل، اعتمادًا على خصائص [`layout`](#layout) و [`sizes`](#sizes).
+
+عند استخدام `layout="intrinsic"` أو `layout="fixed"`، تمثل خاصية `width` العرض _المعروض_ بالبكسل، لذا سيؤثر على حجم الصورة الظاهر.
+
+عند استخدام `layout="responsive"` أو `layout="fill"`، تمثل خاصية `width` العرض _الأصلي_ بالبكسل، لذا سيؤثر فقط على نسبة العرض إلى الارتفاع.
+
+خاصية `width` مطلوبة، باستثناء [الصور المستوردة بشكل ثابت](/docs/pages/building-your-application/optimizing/images#local-images)، أو تلك التي تحتوي على `layout="fill"`.
+
+### height
+
+يمكن أن تمثل خاصية `height` إما الارتفاع _المعروض_ أو الارتفاع _الأصلي_ بالبكسل، اعتمادًا على خصائص [`layout`](#layout) و [`sizes`](#sizes).
+
+عند استخدام `layout="intrinsic"` أو `layout="fixed"`، تمثل خاصية `height` الارتفاع _المعروض_ بالبكسل، لذا سيؤثر على حجم الصورة الظاهر.
+
+عند استخدام `layout="responsive"` أو `layout="fill"`، تمثل خاصية `height` الارتفاع _الأصلي_ بالبكسل، لذا سيؤثر فقط على نسبة العرض إلى الارتفاع.
+
+خاصية `height` مطلوبة، باستثناء [الصور المستوردة بشكل ثابت](/docs/pages/building-your-application/optimizing/images#local-images)، أو تلك التي تحتوي على `layout="fill"`.
+
+## الخصائص الاختيارية
+
+يقبل مكون `<Image />` عددًا من الخصائص الإضافية بخلاف تلك المطلوبة. يصف هذا القسم الخصائص الأكثر استخدامًا لمكون الصورة. يمكن العثور على تفاصيل حول الخصائص الأقل استخدامًا في قسم [الخصائص المتقدمة](#advanced-props).
+
+### layout
+
+سلوك تخطيط الصورة مع تغير حجم نافذة العرض.
+
+| `layout`              | السلوك                                                 | `srcSet`                                                                                                    | `sizes` | يحتوي على غلاف ومحدد حجم |
+| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- | --------------------- |
+| `intrinsic` (افتراضي) | تصغير ليتناسب مع عرض الحاوية، حتى حجم الصورة الأصلي | `1x`, `2x` (بناءً على [imageSizes](#image-sizes))                                                            | N/A     | نعم                   |
+| `fixed`               | مقاس محدد بـ `width` و `height` بالضبط                    | `1x`, `2x` (بناءً على [imageSizes](#image-sizes))                                                            | N/A     | نعم                   |
+| `responsive`          | تغيير الحجم ليتناسب مع عرض الحاوية                          | `640w`, `750w`, ... `2048w`, `3840w` (بناءً على [imageSizes](#image-sizes) و [deviceSizes](#device-sizes)) | `100vw` | نعم                   |
+| `fill`                | النمو في كلا المحورين X و Y لملء الحاوية              | `640w`, `750w`, ... `2048w`, `3840w` (بناءً على [imageSizes](#image-sizes) و [deviceSizes](#device-sizes)) | `100vw` | نعم                   |
+
+- [عرض توضيحي لتخطيط `intrinsic` (افتراضي)](https://image-legacy-component.nextjs.gallery/layout-intrinsic)
+  - عند `intrinsic`، ستقوم الصورة بتصغير الأبعاد لنافذة العرض الأصغر، ولكن تحتفظ بالأبعاد الأصلية لنافذة العرض الأكبر.
+- [عرض توضيحي لتخطيط `fixed`](https://image-legacy-component.nextjs.gallery/layout-fixed)
+  - عند `fixed`، لن تتغير أبعاد الصورة مع تغير نافذة العرض (بدون استجابة) مشابه لعنصر `img` الأصلي.
+- [عرض توضيحي لتخطيط `responsive`](https://image-legacy-component.nextjs.gallery/layout-responsive)
+  - عند `responsive`، ستقوم الصورة بتصغير الأبعاد لنافذة العرض الأصغر وتكبيرها لنافذة العرض الأكبر.
+  - تأكد من استخدام العنصر الأب لـ `display: block` في ورقة الأنماط الخاصة به.
+- [عرض توضيحي لتخطيط `fill`](https://image-legacy-component.nextjs.gallery/layout-fill)
+  - عند `fill`، ستتمدد الصورة في كلا الاتجاهين العرض والارتفاع لملء أبعاد العنصر الأب، بشرط أن يكون العنصر الأب نسبيًا.
+  - عادةً ما يتم إقران هذا مع خاصية [`objectFit`](#objectfit).
+  - تأكد من أن العنصر الأب يحتوي على `position: relative` في ورقة الأنماط الخاصة به.
+- [عرض توضيحي لصورة الخلفية](https://image-legacy-component.nextjs.gallery/background)
+
+### loader
+
+دالة مخصصة تستخدم لحل عناوين URL. تعيين المحمل كخاصية على مكون الصورة يتجاوز المحمل الافتراضي المحدد في [قسم `images` من `next.config.js`](#loader-configuration).
+
+المحمل هو دالة تُرجع سلسلة عنوان URL للصورة، مع الأخذ في الاعتبار المعلمات التالية:
+
+- [`src`](#src)
+- [`width`](#width)
+- [`quality`](#quality)
+
+إليك مثالاً على استخدام محمل مخصص:
+
+```js
+import Image from 'next/legacy/image'
+
+const myLoader = ({ src, width, quality }) => {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+
+const MyImage = (props) => {
+  return (
+    <Image
+      loader={myLoader}
+      src="me.png"
+      alt="Picture of the author"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+### sizes
+
+سلسلة توفر معلومات عن عرض الصورة عند نقاط التوقف المختلفة. ستؤثر قيمة `sizes` بشكل كبير على أداء الصور التي تستخدم `layout="responsive"` أو `layout="fill"`. سيتم تجاهلها للصور التي تستخدم `layout="intrinsic"` أو `layout="fixed"`.
+
+تخدم خاصية `sizes` غرضين مهمين يتعلقان بأداء الصورة:
+
+أولاً، تستخدم المتصفح قيمة `sizes` لتحديد حجم الصورة الذي يجب تنزيله، من مجموعة المصادر التي تم إنشاؤها تلقائيًا بواسطة `next/legacy/image`. عندما يختار المتصفح، لا يعرف بعد حجم الصورة على الصفحة، لذا يختار صورة بنفس حجم نافذة العرض أو أكبر. تتيح لك خاصية `sizes` إخبار المتصفح بأن الصورة ستكون في الواقع أصغر من عرض الشاشة الكامل. إذا لم تحدد قيمة `sizes`، فسيتم استخدام القيمة الافتراضية `100vw` (عرض الشاشة الكامل).
+
+ثانيًا، يتم تحليل قيمة `sizes` واستخدامها لقص القيم في مجموعة المصادر التي تم إنشاؤها تلقائيًا. إذا كانت خاصية `sizes` تتضمن أحجامًا مثل `50vw`، والتي تمثل نسبة مئوية من عرض نافذة العرض، فسيتم قص مجموعة المصادر لاستبعاد أي قيم صغيرة جدًا لدرجة أنها لن تكون ضرورية أبدًا.
+
+على سبيل المثال، إذا كنت تعلم أن التنسيق الخاص بك سيجعل الصورة بعرض كامل على الأجهزة المحمولة، وتخطيط من عمودين على الأجهزة اللوحية، وتخطيط من ثلاثة أعمدة على شاشات سطح المكتب، فيجب عليك تضمين خاصية sizes مثل ما يلي:
+
+```js
+import Image from 'next/legacy/image'
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+    />
+  </div>
+)
+```
+
+يمكن أن يكون لهذا المثال من `sizes` تأثير كبير على مقاييس الأداء. بدون `33vw`، ستكون الصورة المختارة من الخادم أكبر بثلاث مرات مما تحتاج إليه. نظرًا لأن حجم الملف يتناسب مع مربع العرض، فبدون `sizes`، سيقوم المستخدم بتنزيل صورة أكبر بتسع مرات مما هو ضروري.
+
+تعلم المزيد عن `srcset` و `sizes`:
+
+- [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
+- [mdn](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes)
+
+### quality
+
+جودة الصورة المحسنة، عدد صحيح بين `1` و `100` حيث `100` هو أفضل جودة. القيمة الافتراضية هي `75`.
+
+### priority
+
+عندما يكون `true`، ستعتبر الصورة ذات أولوية عالية وسيتم [تحميلها مسبقًا](https://web.dev/preload-responsive-images/). يتم تعطيل التحميل الكسول تلقائيًا للصور التي تستخدم `priority`.
+
+يجب استخدام خاصية `priority` على أي صورة يتم اكتشافها كعنصر [أكبر محتوى مرئي (LCP)](https://nextjs.org/learn/seo/web-performance/lcp). قد يكون من المناسب وجود عدة صور ذات أولوية، حيث قد تكون صور مختلفة هي عنصر LCP لأحجام نافذة عرض مختلفة.
+
+يجب استخدامها فقط عندما تكون الصورة مرئية فوق الطية. القيمة الافتراضية هي `false`.
+
+### placeholder
+
+عنصر نائب يستخدم أثناء تحميل الصورة. القيم الممكنة هي `blur` أو `empty`. القيمة الافتراضية هي `empty`.
+
+عند `blur`، سيتم استخدام خاصية [`blurDataURL`](#blurdataurl) كعنصر نائب. إذا كان `src` كائنًا من [استيراد ثابت](/docs/pages/building-your-application/optimizing/images#local-images) وكانت الصورة المستوردة من نوع `.jpg` أو `.png` أو `.webp` أو `.avif`، فسيتم ملء `blurDataURL` تلقائيًا.
+
+للصور الديناميكية، يجب توفير خاصية [`blurDataURL`](#blurdataurl). يمكن أن تساعد حلول مثل [Plaiceholder](https://github.com/joe-bell/plaiceholder) في إنشاء `base64`.
+
+عند `empty`، لن يكون هناك عنصر نائب أثناء تحميل الصورة، فقط مساحة فارغة.
+
+جربها:
+
+- [عرض توضيحي لعنصر النائب `blur`](https://image-legacy-component.nextjs.gallery/placeholder)
+- [عرض توضيحي لتأثير التموج مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/shimmer)
+- [عرض توضيحي لتأثير اللون مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/color)
+
+## الخصائص المتقدمة
+
+في بعض الحالات، قد تحتاج إلى استخدام أكثر تقدمًا. يقبل مكون `<Image />` بشكل اختياري الخصائص المتقدمة التالية.
+
+### style
+
+يسمح [بتمرير أنماط CSS](https://developer.mozilla.org/docs/Web/HTML/Element/style) إلى عنصر الصورة الأساسي.
+
+لاحظ أن جميع أوضاع `layout` تطبق أنماطها الخاصة على عنصر الصورة، وهذه الأنماط التلقائية لها الأسبقية على خاصية `style`.
+
+ضع في اعتبارك أيضًا أن خصائص `width` و `height` المطلوبة يمكن أن تتفاعل مع التنسيق الخاص بك. إذا استخدمت التنسيق لتعديل `width` للصورة، فيجب عليك أيضًا تعيين النمط `height="auto"`، وإلا سيتم تشويه صورتك.
+
+### objectFit
+
+يحدد كيفية ملاءمة الصورة للحاوية الأب عند استخدام `layout="fill"`.
+
+يتم تمرير هذه القيمة إلى [خاصية CSS object-fit](https://developer.mozilla.org/docs/Web/CSS/object-fit) للصورة `src`.
+
+### objectPosition
+
+يحدد كيفية وضع الصورة داخل العنصر الأب عند استخدام `layout="fill"`.
+
+يتم تمرير هذه القيمة إلى [خاصية CSS object-position](https://developer.mozilla.org/docs/Web/CSS/object-position) المطبقة على الصورة.
+
+### onLoadingComplete
+
+دالة رد اتصال يتم استدعاؤها بمجرد اكتمال تحميل الصورة وإزالة [العنصر النائب](#placeholder).
+
+تقبل دالة `onLoadingComplete` معلمة واحدة، كائن يحتوي على الخصائص التالية:
+
+- [`naturalWidth`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/naturalWidth)
+- [`naturalHeight`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/naturalHeight)
+
+### loading
+
+> **تنبيه**: هذه الخاصية مخصصة فقط للاستخدام المتقدم. تحويل صورة للتحميل باستخدام `eager` عادةً ما **يؤذي الأداء**.
+>
+> نوصي باستخدام خاصية [`priority`](#priority) بدلاً من ذلك، والتي تقوم بتحميل الصورة بفعالية لمعظم حالات الاستخدام.
+
+سلوك تحميل الصورة. القيمة الافتراضية هي `lazy`.
+
+عند `lazy`، يتم تأجيل تحميل الصورة حتى تصل إلى مسافة محسوبة من نافذة العرض.
+
+عند `eager`، يتم تحميل الصورة على الفور.
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-loading)
+
+### blurDataURL
+
+[عنوان URL للبيانات](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) لاستخدامها كصورة نائبة قبل تحميل صورة `src` بنجاح. يكون فعالاً فقط عند دمجه مع [`placeholder="blur"`](#placeholder).
+
+يجب أن تكون صورة مشفرة بـ base64. سيتم تكبيرها وطمسها، لذا يوصى باستخدام صورة صغيرة جدًا (10 بكسل أو أقل). قد يؤدي تضمين صور أكبر كعناصر نائبة إلى الإضرار بأداء تطبيقك.
+
+جربها:
+
+- [عرض توضيحي لخاصية `blurDataURL` الافتراضية](https://image-legacy-component.nextjs.gallery/placeholder)
+- [عرض توضيحي لتأثير التموج مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/shimmer)
+- [عرض توضيحي لتأثير اللون مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/color)
+
+يمكنك أيضًا [إنشاء عنوان URL لبيانات لون ثابت](https://png-pixel.com) لمطابقة الصورة.
+
+### lazyBoundary
+
+سلسلة (بصيغة مشابهة لخاصية margin) تعمل كصندوق محدد يستخدم للكشف عن تقاطع نافذة العرض مع الصورة وتشغيل التحميل [الكسول](#loading). القيمة الافتراضية هي `"200px"`.
+
+إذا كانت الصورة متداخلة داخل عنصر أب قابل للتمرير بخلاف مستند الجذر، فستحتاج أيضًا إلى تعيين خاصية [lazyRoot](#lazyroot).
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)
+
+### lazyRoot
+
+مرجع React [Ref](https://react.dev/learn/referencing-values-with-refs) يشير إلى العنصر الأب القابل للتمرير. القيمة الافتراضية هي `null` (نافذة عرض المستند).
+
+يجب أن يشير المرجع إلى عنصر DOM أو مكون React يقوم [بتمرير المرجع](https://react.dev/reference/react/forwardRef) إلى عنصر DOM الأساسي.
+
+**مثال يشير إلى عنصر DOM**
+
+```jsx
+import Image from 'next/legacy/image'
+import React from 'react'
+
+const Example = () => {
+  const lazyRoot = React.useRef(null)
+
+  return (
+    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
+      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
+      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
+    </div>
+  )
+}
+```
+
+**مثال يشير إلى مكون React**
+
+```jsx
+import Image from 'next/legacy/image'
+import React from 'react'
+
+const Container = React.forwardRef((props, ref) => {
+  return (
+    <div ref={ref} style={{ overflowX: 'scroll', width: '500px' }}>
+      {props.children}
+    </div>
+  )
+})
+
+const Example = () => {
+  const lazyRoot = React.useRef(null)
+
+  return (
+    <Container ref={lazyRoot}>
+      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
+      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
+    </Container>
+  )
+}
+```
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)
+
+### غير مُحسَّن (unoptimized)
+
+عندما تكون القيمة `true`، سيتم تقديم الصورة الأصلية كما هي دون تغيير الجودة أو الحجم أو التنسيق. القيمة الافتراضية هي `false`.
+
+```js
+import Image from 'next/image'
+
+const UnoptimizedImage = (props) => {
+  return <Image {...props} unoptimized />
+}
+```
+
+بدءًا من Next.js 12.3.0، يمكن تعيين هذه الخاصية لجميع الصور عن طريق تحديث ملف `next.config.js` بالإعداد التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    unoptimized: true,
+  },
+}
+```
+
+## خصائص أخرى
+
+سيتم تمرير الخصائص الأخرى في مكون `<Image />` إلى عنصر `img` الأساسي باستثناء ما يلي:
+
+- `srcSet`. استخدم [أحجام الأجهزة (Device Sizes)](#device-sizes) بدلاً من ذلك.
+- `ref`. استخدم [`onLoadingComplete`](#onloadingcomplete) بدلاً من ذلك.
+- `decoding`. تكون دائمًا `"async"`.
+
+## خيارات التكوين
+
+### أنماط بعيدة (Remote Patterns)
+
+لحماية تطبيقك من المستخدمين الضارين، يلزم التكوين لاستخدام الصور الخارجية. هذا يضمن أن الصور الخارجية من حسابك فقط هي التي يمكن تقديمها من واجهة برمجة تطبيقات تحسين الصور في Next.js. يمكن تكوين هذه الصور الخارجية باستخدام خاصية `remotePatterns` في ملف `next.config.js` كما هو موضح أدناه:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'example.com',
+        port: '',
+        pathname: '/account123/**',
+      },
+    ],
+  },
+}
+```
+
+> **معلومة مفيدة**: المثال أعلاه يضمن أن خاصية `src` في `next/legacy/image` يجب أن تبدأ بـ `https://example.com/account123/`. أي بروتوكول آخر أو اسم مضيف أو منفذ أو مسار غير متطابق سيؤدي إلى استجابة 400 Bad Request.
+
+إليك مثال آخر لخاصية `remotePatterns` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.example.com',
+      },
+    ],
+  },
+}
+```
+
+> **معلومة مفيدة**: المثال أعلاه يضمن أن خاصية `src` في `next/legacy/image` يجب أن تبدأ بـ `https://img1.example.com` أو `https://me.avatar.example.com` أو أي عدد من النطاقات الفرعية. أي بروتوكول آخر أو اسم مضيف غير متطابق سيؤدي إلى استجابة 400 Bad Request.
+
+يمكن استخدام أنماط Wildcard لكل من `pathname` و `hostname` ولها الصيغة التالية:
+
+- `*` تطابق مقطع مسار واحد أو نطاق فرعي
+- `**` تطابق أي عدد من مقاطع المسار في النهاية أو النطاقات الفرعية في البداية
+
+لا تعمل صيغة `**` في منتصف النمط.
+
+### النطاقات (Domains)
+
+> **تحذير**: نوصي بتكوين [`remotePatterns`](#remote-patterns) بدقة بدلاً من `domains` لحماية تطبيقك من المستخدمين الضارين. استخدم `domains` فقط إذا كنت تملك كل المحتوى المقدم من النطاق.
+
+على غرار [`remotePatterns`](#remote-patterns)، يمكن استخدام تكوين `domains` لتوفير قائمة بأسماء المضيف المسموح بها للصور الخارجية.
+
+ومع ذلك، لا يدعم تكوين `domains` مطابقة أنماط Wildcard ولا يمكنه تقييد البروتوكول أو المنفذ أو المسار.
+
+إليك مثال لخاصية `domains` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    domains: ['assets.acme.com'],
+  },
+}
+```
+
+### تكوين المحمل (Loader Configuration)
+
+إذا كنت تريد استخدام موفر سحابي لتحسين الصور بدلاً من استخدام واجهة برمجة تطبيقات تحسين الصور المدمجة في Next.js، يمكنك تكوين `loader` و `path` في ملف `next.config.js`. هذا يسمح لك باستخدام عناوين URL نسبية لخاصية [`src`](#src) للصورة وإنشاء عنوان URL المطلق الصحيح لموفرك تلقائيًا.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    loader: 'imgix',
+    path: 'https://example.com/myaccount/',
+  },
+}
+```
+
+### المحملات المدمجة (Built-in Loaders)
+
+يتم تضمين موفري تحسين الصور السحابيين التاليين:
+
+- الافتراضي: يعمل تلقائيًا مع `next dev` أو `next start` أو خادم مخصص
+- [Vercel](https://vercel.com): يعمل تلقائيًا عند النشر على Vercel، لا حاجة للتكوين. [معرفة المزيد](https://vercel.com/docs/concepts/image-optimization?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)
+- [Imgix](https://www.imgix.com): `loader: 'imgix'`
+- [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
+- [Akamai](https://www.akamai.com): `loader: 'akamai'`
+- مخصص: `loader: 'custom'` استخدم موفر سحابي مخصص عن طريق تنفيذ خاصية [`loader`](#loader) في مكون `next/legacy/image`
+
+إذا كنت بحاجة إلى موفر آخر، يمكنك استخدام خاصية [`loader`](#loader) مع `next/legacy/image`.
+
+> لا يمكن تحسين الصور في وقت البناء باستخدام [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports)، فقط عند الطلب. لاستخدام `next/legacy/image` مع `output: 'export'`، ستحتاج إلى استخدام محمل مختلف عن الافتراضي. [اقرأ المزيد في المناقشة.](https://github.com/vercel/next.js/discussions/19065)
+
+> يستخدم المحمل الافتراضي لمكون `next/legacy/image` [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) لأنه سريع التثبيت ومناسب لبيئة التطوير. عند استخدام `next start` في بيئة الإنتاج، يُوصى بشدة بتثبيت [`sharp`](https://www.npmjs.com/package/sharp) عن طريق تشغيل `npm i sharp` في دليل مشروعك. هذا ليس ضروريًا لنشرات Vercel، حيث يتم تثبيت `sharp` تلقائيًا.
+
+## متقدم
+
+التكوين التالي مخصص لحالات الاستخدام المتقدمة وعادةً لا يكون ضروريًا. إذا اخترت تكوين الخصائص أدناه، فستتجاوز أي تغييرات على الإعدادات الافتراضية لـ Next.js في التحديثات المستقبلية.
+
+### أحجام الأجهزة (Device Sizes)
+
+إذا كنت تعرف عرض الأجهزة المتوقع لمستخدميك، يمكنك تحديد قائمة بنقاط التوقف لعرض الجهاز باستخدام خاصية `deviceSizes` في `next.config.js`. تُستخدم هذه الأبعاد عندما يستخدم مكون `next/legacy/image` `layout="responsive"` أو `layout="fill"` لضمان تقديم الصورة الصحيحة لجهاز المستخدم.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  },
+}
+```
+
+### أحجام الصور (Image Sizes)
+
+يمكنك تحديد قائمة بعروض الصور باستخدام خاصية `images.imageSizes` في ملف `next.config.js`. يتم دمج هذه الأبعاد مع مصفوفة [أحجام الأجهزة](#device-sizes) لتشكيل المصفوفة الكاملة للأحجام المستخدمة لإنشاء [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) للصور.
+
+السبب في وجود قائمتين منفصلتين هو أن `imageSizes` تُستخدم فقط للصور التي توفر خاصية [`sizes`](#sizes)، مما يشير إلى أن الصورة أصغر من العرض الكامل للشاشة. **لذلك، يجب أن تكون جميع الأحجام في `imageSizes` أصغر من أصغر حجم في `deviceSizes`.**
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+}
+```
+
+### التنسيقات المقبولة (Acceptable Formats)
+
+ستكتشف واجهة برمجة تطبيقات [تحسين الصور](#loader-configuration) الافتراضية تلقائيًا تنسيقات الصور المدعومة من المتصفح عبر رأس `Accept` للطلب.
+
+إذا تطابق رأس `Accept` مع أكثر من تنسيق واحد من التنسيقات المكونة، يتم استخدام أول تطابق في المصفوفة. لذلك، ترتيب المصفوفة مهم. إذا لم يكن هناك تطابق (أو إذا كانت الصورة الأصلية [متحركة](#animated-images))، فستعود واجهة برمجة تطبيقات تحسين الصور إلى تنسيق الصورة الأصلية.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/webp'],
+  },
+}
+```
+
+يمكنك تمكين دعم AVIF باستخدام التكوين التالي.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+  },
+}
+```
+
+> **معلومة مفيدة**: عادةً ما يستغرق ترميز AVIF وقتًا أطول بنسبة 20٪ ولكنه يضغط بنسبة 20٪ أصغر مقارنة بـ WebP. هذا يعني أن المرة الأولى التي يتم فيها طلب الصورة، ستكون عادةً أبطأ، ثم الطلبات اللاحقة التي يتم تخزينها مؤقتًا ستكون أسرع.
+
+## سلوك التخزين المؤقت (Caching Behavior)
+
+يصف ما يلي خوارزمية التخزين المؤقت للمحمل [الافتراضي](#loader). بالنسبة لجميع المحملات الأخرى، يرجى الرجوع إلى وثائق موفر السحابة الخاص بك.
+
+يتم تحسين الصور ديناميكيًا عند الطلب وتخزينها في دليل `<distDir>/cache/images`. سيتم تقديم ملف الصورة المحسن للطلبات اللاحقة حتى يصل تاريخ الانتهاء. عند إجراء طلب يتطابق مع ملف مخزن مؤقتًا ولكن منتهي الصلاحية، يتم تقديم الصورة المنتهية الصلاحية فورًا. ثم يتم تحسين الصورة مرة أخرى في الخلفية (يُسمى أيضًا إعادة التحقق) وحفظها في ذاكرة التخزين المؤقت مع تاريخ انتهاء جديد.
+
+يمكن تحديد حالة التخزين المؤقت للصورة عن طريق قراءة قيمة رأس الاستجابة `x-nextjs-cache` (`x-vercel-cache` عند النشر على Vercel). القيم الممكنة هي التالية:
+
+- `MISS` - المسار غير موجود في ذاكرة التخزين المؤقت (يحدث مرة واحدة على الأكثر، في الزيارة الأولى)
+- `STALE` - المسار موجود في ذاكرة التخزين المؤقت ولكن تجاوز وقت إعادة التحقق لذلك سيتم تحديثه في الخلفية
+- `HIT` - المسار موجود في ذاكرة التخزين المؤقت ولم يتجاوز وقت إعادة التحقق
+
+يتم تعريف تاريخ الانتهاء (أو بالأحرى الحد الأقصى للعمر) إما عن طريق تكوين [`minimumCacheTTL`](#minimum-cache-ttl) أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر. على وجه التحديد، يتم استخدام قيمة `max-age` لرأس `Cache-Control`. إذا تم العثور على كل من `s-maxage` و `max-age`، فسيتم تفضيل `s-maxage`. يتم أيضًا تمرير `max-age` إلى أي عملاء لاحقين بما في ذلك شبكات CDN والمتصفحات.
+
+- يمكنك تكوين [`minimumCacheTTL`](#minimum-cache-ttl) لزيادة مدة التخزين المؤقت عندما لا يتضمن رأس `Cache-Control` للصورة الأصلية أو كانت القيمة منخفضة جدًا.
+- يمكنك تكوين [`deviceSizes`](#device-sizes) و [`imageSizes`](#image-sizes) لتقليل العدد الإجمالي للصور الممكن إنشاؤها.
+- يمكنك تكوين [التنسيقات](#acceptable-formats) لتعطيل تنسيقات متعددة لصالح تنسيق صورة واحد.
+
+### الحد الأدنى لوقت التخزين المؤقت (Minimum Cache TTL)
+
+يمكنك تكوين وقت البقاء (TTL) بالثواني للصور المحسنة المخزنة مؤقتًا. في كثير من الحالات، من الأفضل استخدام [استيراد صورة ثابتة (Static Image Import)](/docs/pages/building-your-application/optimizing/images#local-images) والذي سيقوم تلقائيًا بتجزئة محتويات الملف وتخزين الصورة مؤقتًا إلى الأبد مع رأس `Cache-Control` بقيمة `immutable`.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    minimumCacheTTL: 60,
+  },
+}
+```
+
+يتم تعريف تاريخ انتهاء الصورة المحسنة (أو بالأحرى الحد الأقصى للعمر) إما عن طريق `minimumCacheTTL` أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر.
+
+إذا كنت بحاجة إلى تغيير سلوك التخزين المؤقت لكل صورة، يمكنك تكوين [`headers`](/docs/pages/api-reference/next-config-js/headers) لتعيين رأس `Cache-Control` على الصورة الأصلية (مثل `/some-asset.jpg`، وليس `/_next/image` نفسها).
+
+لا توجد آلية لإبطال التخزين المؤقت في هذا الوقت، لذا من الأفضل الحفاظ على `minimumCacheTTL` منخفضًا. وإلا فقد تحتاج إلى تغيير خاصية [`src`](#src) يدويًا أو حذف `<distDir>/cache/images`.
+
+### تعطيل الاستيراد الثابت (Disable Static Imports)
+
+يسمح السلوك الافتراضي باستيراد الملفات الثابتة مثل `import icon from './icon.png'` ثم تمريرها إلى خاصية `src`.
+
+في بعض الحالات، قد ترغب في تعطيل هذه الميزة إذا كانت تتعارض مع الإضافات الأخرى التي تتوقع أن يكون الاستيراد مختلفًا.
+
+يمكنك تعطيل استيراد الصور الثابتة داخل ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
+### السماح بـ SVG بشكل خطير (Dangerously Allow SVG)
+
+لا يقوم المحمل [الافتراضي](#loader) بتحسين صور SVG لعدة أسباب. أولاً، SVG هو تنسيق متجه مما يعني أنه يمكن تغيير حجمه دون فقدان الجودة. ثانيًا، يحتوي SVG على العديد من الميزات المشابهة لـ HTML/CSS، مما قد يؤدي إلى ثغرات أمنية بدون رؤوس [سياسة أمان المحتوى (Content Security Policy (CSP))](/docs/app/api-reference/next-config-js/headers) المناسبة.
+
+إذا كنت بحاجة إلى تقديم صور SVG باستخدام واجهة برمجة تطبيقات تحسين الصور الافتراضية، يمكنك تعيين `dangerouslyAllowSVG` داخل ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    dangerouslyAllowSVG: true,
+    contentDispositionType: 'attachment',
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
+}
+```
+
+بالإضافة إلى ذلك، يُوصى بشدة أيضًا بتعيين `contentDispositionType` لإجبار المتصفح على تنزيل الصورة، وكذلك `contentSecurityPolicy` لمنع تنفيذ البرامج النصية المضمنة في الصورة.
+
+### الصور المتحركة (Animated Images)
+
+سيقوم المحمل [الافتراضي](#loader) تلقائيًا بتجاوز تحسين الصور للصور المتحركة وتقديم الصورة كما هي.
+
+الكشف التلقائي عن الملفات المتحركة هو أفضل جهد ويدعم GIF وAPNG وWebP. إذا كنت ترغب في تجاوز تحسين الصور صراحةً لصورة متحركة معينة، استخدم خاصية [unoptimized](#unoptimized).
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                     |
+| --------- | ------------------------------------------- |
+| `v13.0.0` | تم تغيير اسم `next/image` إلى `next/legacy/image` |
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/image.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/image.mdx
new file mode 100644
index 00000000..5c1605cc
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/image.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:32.275Z
+title: مكون <Image>
+description: تحسين الصور في تطبيق Next.js باستخدام مكون `next/image` المدمج.
+source: app/api-reference/components/image
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/index.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/index.mdx
new file mode 100644
index 00000000..f705dcc4
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:25.234Z
+title: المكونات
+description: مرجع API للمكونات المدمجة في Next.js باستخدام جهاز التوجيه الخاص بالصفحات (Pages Router).
+source: app/api-reference/components
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/link.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/link.mdx
new file mode 100644
index 00000000..81a07f91
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/link.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:22.670Z
+title: مكون <Link>
+description: مرجع API لمكون <Link>.
+source: app/api-reference/components/link
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/script.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/script.mdx
new file mode 100644
index 00000000..0012e2ef
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/01-components/script.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:15.680Z
+title: مكون `<Script>`
+description: تحسين البرامج النصية (scripts) لجهات خارجية في تطبيق Next.js باستخدام مكون `next/script` المدمج.
+source: app/api-reference/components/script
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-initial-props.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-initial-props.mdx
new file mode 100644
index 00000000..08ce8170
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-initial-props.mdx
@@ -0,0 +1,60 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:36.134Z
+title: getInitialProps
+description: جلب بيانات ديناميكية من الخادم لمكون React الخاص بك باستخدام getInitialProps.
+---
+
+> **معلومة مفيدة**: `getInitialProps` هو واجهة برمجة تطبيقات قديمة. نوصي باستخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) بدلاً من ذلك.
+
+`getInitialProps` هي دالة `async` يمكن إضافتها إلى مكون React المُصدر بشكل افتراضي للصفحة. ستعمل على جانب الخادم ومرة أخرى على جانب العميل أثناء انتقالات الصفحة. سيتم تمرير نتيجة الدالة إلى مكون React كـ `props`.
+
+```tsx filename="pages/index.tsx" switcher
+import { NextPageContext } from 'next'
+
+Page.getInitialProps = async (ctx: NextPageContext) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const json = await res.json()
+  return { stars: json.stargazers_count }
+}
+
+export default function Page({ stars }: { stars: number }) {
+  return stars
+}
+```
+
+```jsx filename="pages/index.js" switcher
+Page.getInitialProps = async (ctx) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const json = await res.json()
+  return { stars: json.stargazers_count }
+}
+
+export default function Page({ stars }) {
+  return stars
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - يتم تسلسل البيانات المرتجعة من `getInitialProps` عند عرض الخادم. تأكد من أن الكائن المرتجع من `getInitialProps` هو كائن عادي `Object`، وليس باستخدام `Date` أو `Map` أو `Set`.
+> - لتحميل الصفحة الأولي، ستعمل `getInitialProps` على الخادم فقط. ثم ستعمل `getInitialProps` أيضًا على العميل عند الانتقال إلى مسار مختلف باستخدام مكون [`next/link`](/docs/pages/api-reference/components/link) أو باستخدام [`next/router`](/docs/pages/api-reference/functions/use-router).
+> - إذا تم استخدام `getInitialProps` في ملف `_app.js` مخصص، وكانت الصفحة التي يتم الانتقال إليها تستخدم `getServerSideProps`، فإن `getInitialProps` ستعمل أيضًا على الخادم.
+
+## كائن السياق (Context Object)
+
+تستقبل `getInitialProps` وسيطًا واحدًا يسمى `context`، وهو كائن يحتوي على الخصائص التالية:
+
+| الاسم       | الوصف                                                                                           |
+| ---------- | ----------------------------------------------------------------------------------------------------- |
+| `pathname` | المسار الحالي، مسار الصفحة في `/pages`                                                       |
+| `query`    | سلسلة استعلام URL، محللة ككائن                                                          |
+| `asPath`   | `String` للمسار الفعلي (بما في ذلك الاستعلام) المعروض في المتصفح                                |
+| `req`      | [كائن طلب HTTP](https://nodejs.org/api/http.html#http_class_http_incomingmessage) (على الخادم فقط) |
+| `res`      | [كائن استجابة HTTP](https://nodejs.org/api/http.html#http_class_http_serverresponse) (على الخادم فقط) |
+| `err`      | كائن خطأ في حالة حدوث أي خطأ أثناء العرض                                         |
+
+## محاذير
+
+- يمكن استخدام `getInitialProps` فقط في ملفات المستوى الأعلى داخل `pages/`، وليس في المكونات المتداخلة. لجلب بيانات متداخلة على مستوى المكون، فكر في استكشاف [موجه التطبيق (App Router)](/docs/app/building-your-application/data-fetching).
+- بغض النظر عما إذا كان مسارك ثابتًا أو ديناميكيًا، أي بيانات يتم إرجاعها من `getInitialProps` كـ `props` ستكون قابلة للفحص على جانب العميل في HTML الأولي. هذا للسماح للصفحة بأن يتم [ترطيبها (hydrate)](https://react.dev/reference/react-dom/hydrate) بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في `props`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-server-side-props.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-server-side-props.mdx
new file mode 100644
index 00000000..f50b69bf
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-server-side-props.mdx
@@ -0,0 +1,132 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:00.490Z
+title: getServerSideProps
+description: مرجع API لـ `getServerSideProps`. تعلم كيفية جلب البيانات في كل طلب باستخدام Next.js.
+---
+
+عند تصدير دالة تسمى `getServerSideProps` (العرض من جانب الخادم - SSR) من صفحة، سيقوم Next.js بتهيئة عرض هذه الصفحة مسبقًا في كل طلب باستخدام البيانات التي تُرجعها الدالة `getServerSideProps`. هذا مفيد إذا كنت تريد جلب بيانات تتغير بشكل متكرر، وتريد تحديث الصفحة لعرض أحدث البيانات.
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getServerSideProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetServerSideProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getServerSideProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+يمكنك استيراد وحدات في النطاق العلوي لاستخدامها في `getServerSideProps`. الوحدات المستوردة **لن يتم تضمينها لجانب العميل**. هذا يعني أنه يمكنك كتابة **كود خاص بالخادم مباشرة في `getServerSideProps`**، بما في ذلك جلب البيانات من قاعدة البيانات الخاصة بك.
+
+## معامل Context
+
+معامل `context` هو كائن يحتوي على المفاتيح التالية:
+
+| الاسم            | الوصف                                                                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `params`        | إذا كانت هذه الصفحة تستخدم [مسار ديناميكي](/docs/pages/building-your-application/routing/dynamic-routes)، فإن `params` يحتوي على معاملات المسار. إذا كان اسم الصفحة هو `[id].js`، فإن `params` سيبدو مثل `{ id: ... }`. |
+| `req`           | [كائن `HTTP` IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage)، مع خاصية إضافية `cookies`، وهي كائن يحتوي على مفاتيح نصية تُرسم إلى قيم نصية لملفات تعريف الارتباط.    |
+| `res`           | [كائن استجابة `HTTP`](https://nodejs.org/api/http.html#http_class_http_serverresponse).                                                                                                                        |
+| `query`         | كائن يمثل سلسلة الاستعلام، بما في ذلك معاملات المسار الديناميكي.                                                                                                                                          |
+| `preview`       | (مهمل لصالح `draftMode`) `preview` يكون `true` إذا كانت الصفحة في [وضع المعاينة](/docs/pages/building-your-application/configuring/preview-mode) و `false` بخلاف ذلك.                                          |
+| `previewData`   | (مهمل لصالح `draftMode`) بيانات [المعاينة](/docs/pages/building-your-application/configuring/preview-mode) التي تم تعيينها بواسطة `setPreviewData`.                                                                              |
+| `draftMode`     | `draftMode` يكون `true` إذا كانت الصفحة في [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode) و `false` بخلاف ذلك.                                                                         |
+| `resolvedUrl`   | نسخة طبيعية من `URL` الطلب التي تزيل البادئة `_next/data` للانتقالات من جانب العميل وتتضمن قيم الاستعلام الأصلية.                                                                              |
+| `locale`        | يحتوي على اللغة النشطة (إذا تم تمكينها).                                                                                                                                                                              |
+| `locales`       | يحتوي على جميع اللغات المدعومة (إذا تم تمكينها).                                                                                                                                                                          |
+| `defaultLocale` | يحتوي على اللغة الافتراضية المكونة (إذا تم تمكينها).                                                                                                                                                                  |
+
+## قيم الإرجاع لـ getServerSideProps
+
+يجب أن تُرجع دالة `getServerSideProps` كائنًا يحتوي على **أي من الخصائص التالية**:
+
+### `props`
+
+كائن `props` هو زوج مفتاح-قيمة، حيث يتم استقبال كل قيمة بواسطة مكون الصفحة. يجب أن يكون [كائنًا قابلًا للتسلسل](https://developer.mozilla.org/docs/Glossary/Serialization) بحيث يمكن تسلسل أي خاصيات يتم تمريرها باستخدام [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+```jsx
+export async function getServerSideProps(context) {
+  return {
+    props: { message: `Next.js رائع` }, // سيتم تمريرها إلى مكون الصفحة كخاصيات
+  }
+}
+```
+
+### `notFound`
+
+القيمة المنطقية `notFound` تسمح للصفحة بإرجاع حالة `404` و[صفحة 404](/docs/pages/building-your-application/routing/custom-error#404-page). مع `notFound: true`، سترجع الصفحة `404` حتى إذا كانت هناك صفحة تم إنشاؤها بنجاح من قبل. هذا مخصص لدعم حالات الاستخدام مثل المحتوى الذي ينشئه المستخدم ويتم إزالته بواسطة مؤلفه.
+
+```js
+export async function getServerSideProps(context) {
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: { data }, // سيتم تمريرها إلى مكون الصفحة كخاصيات
+  }
+}
+```
+
+### `redirect`
+
+كائن `redirect` يسمح بإعادة التوجيه إلى موارد داخلية وخارجية. يجب أن يتطابق مع الشكل `{ destination: string, permanent: boolean }`. في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء `HTTP` القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية `statusCode` بدلاً من خاصية `permanent`، ولكن ليس الاثنين معًا.
+
+```js
+export async function getServerSideProps(context) {
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: {}, // سيتم تمريرها إلى مكون الصفحة كخاصيات
+  }
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                    |
+| --------- | ---------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | [موجه التطبيق](/docs/app/building-your-application/data-fetching) أصبح الآن مستقرًا مع تبسيط جلب البيانات |
+| `v10.0.0` | تمت إضافة خيارات `locale`، `locales`، `defaultLocale`، و `notFound`.                                        |
+| `v9.3.0`  | تم تقديم `getServerSideProps`.                                                                           |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-static-paths.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-static-paths.mdx
new file mode 100644
index 00000000..5d1e70a2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-static-paths.mdx
@@ -0,0 +1,261 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:07.053Z
+title: getStaticPaths
+description: مرجع API لـ `getStaticPaths`. تعلم كيفية جلب البيانات وإنشاء صفحات ثابتة باستخدام `getStaticPaths`.
+---
+
+عند تصدير دالة تُسمى `getStaticPaths` من صفحة تستخدم [المسارات الديناميكية (Dynamic Routes)](/docs/pages/building-your-application/routing/dynamic-routes)، فإن Next.js سيقوم بتحضير جميع المسارات المحددة بواسطة `getStaticPaths` بشكل ثابت مسبقًا.
+
+```tsx filename="pages/repo/[name].tsx" switcher
+import type {
+  InferGetStaticPropsType,
+  GetStaticProps,
+  GetStaticPaths,
+} from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticPaths = (async () => {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/repo/[name].js" switcher
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}
+
+export async function getStaticProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+## قيم إرجاع getStaticPaths
+
+يجب أن تُرجع الدالة `getStaticPaths` كائنًا يحتوي على الخصائص **المطلوبة** التالية:
+
+### `paths`
+
+يحدد مفتاح `paths` المسارات التي سيتم تحضيرها مسبقًا. على سبيل المثال، لنفترض أن لديك صفحة تستخدم [المسارات الديناميكية (Dynamic Routes)](/docs/pages/building-your-application/routing/dynamic-routes) باسم `pages/posts/[id].js`. إذا قمت بتصدير `getStaticPaths` من هذه الصفحة وأعدت ما يلي لـ `paths`:
+
+```js
+return {
+  paths: [
+    { params: { id: '1' }},
+    {
+      params: { id: '2' },
+      // مع تكوين i18n، يمكن أيضًا إرجاع اللغة للمسار
+      locale: "en",
+    },
+  ],
+  fallback: ...
+}
+```
+
+عندها، سيقوم Next.js بإنشاء `/posts/1` و `/posts/2` بشكل ثابت أثناء `next build` باستخدام مكون الصفحة في `pages/posts/[id].js`.
+
+يجب أن تتطابق قيمة كل كائن `params` مع المعلمات المستخدمة في اسم الصفحة:
+
+- إذا كان اسم الصفحة هو `pages/posts/[postId]/[commentId]`، فيجب أن يحتوي `params` على `postId` و `commentId`.
+- إذا كان اسم الصفحة يستخدم [مسارات التقاط الكل (catch-all routes)](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) مثل `pages/[...slug]`، فيجب أن يحتوي `params` على `slug` (وهو مصفوفة). إذا كانت هذه المصفوفة `['hello', 'world']`، فسوف يقوم Next.js بإنشاء الصفحة بشكل ثابت على `/hello/world`.
+- إذا كانت الصفحة تستخدم [مسار التقاط اختياري (optional catch-all route)](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments)، استخدم `null` أو `[]` أو `undefined` أو `false` لعرض المسار الجذري. على سبيل المثال، إذا قمت بتوفير `slug: false` لـ `pages/[[...slug]]`، فسوف يقوم Next.js بإنشاء الصفحة `/` بشكل ثابت.
+
+إن سلاسل `params` **حساسة لحالة الأحرف** ومن الأفضل توحيدها لضمان إنشاء المسارات بشكل صحيح. على سبيل المثال، إذا تم إرجاع `WoRLD` لمعلمة، فسوف تتطابق فقط إذا كان `WoRLD` هو المسار الذي تمت زيارته، وليس `world` أو `World`.
+
+بشكل منفصل عن كائن `params`، يمكن إرجاع حقل `locale` عند [تكوين i18n](/docs/pages/building-your-application/routing/internationalization)، والذي يحدد اللغة للمسار الذي يتم إنشاؤه.
+
+### `fallback: false`
+
+إذا كانت `fallback` هي `false`، فإن أي مسارات لم يتم إرجاعها بواسطة `getStaticPaths` ستؤدي إلى **صفحة 404**.
+
+عند تشغيل `next build`، سيتحقق Next.js مما إذا كانت `getStaticPaths` قد أرجعت `fallback: false`، ثم سيقوم ببناء **فقط** المسارات التي تم إرجاعها بواسطة `getStaticPaths`. هذا الخيار مفيد إذا كان لديك عدد صغير من المسارات لإنشائها، أو إذا لم تتم إضافة بيانات صفحات جديدة بشكل متكرر. إذا وجدت أنك بحاجة إلى إضافة المزيد من المسارات، وكان لديك `fallback: false`، فسوف تحتاج إلى تشغيل `next build` مرة أخرى حتى يمكن إنشاء المسارات الجديدة.
+
+المثال التالي يحضر مسبقًا مقالة مدونة واحدة لكل صفحة تسمى `pages/posts/[id].js`. سيتم جلب قائمة مقالات المدونة من نظام إدارة المحتوى (CMS) وإرجاعها بواسطة `getStaticPaths`. ثم، لكل صفحة، يقوم بجلب بيانات المقالة من نظام إدارة المحتوى باستخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+```jsx filename="pages/posts/[id].js"
+function Post({ post }) {
+  // عرض المقالة...
+}
+
+// يتم استدعاء هذه الدالة أثناء وقت البناء
+export async function getStaticPaths() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المقالات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد تحضيرها مسبقًا بناءً على المقالات
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // سنقوم بتحضير هذه المسارات مسبقًا فقط أثناء وقت البناء.
+  // { fallback: false } تعني أن المسارات الأخرى يجب أن تعرض 404.
+  return { paths, fallback: false }
+}
+
+// يتم استدعاء هذا أيضًا أثناء وقت البناء
+export async function getStaticProps({ params }) {
+  // params يحتوي على `id` للمقالة.
+  // إذا كان المسار مثل /posts/1، فإن params.id هو 1
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  // تمرير بيانات المقالة إلى الصفحة عبر props
+  return { props: { post } }
+}
+
+export default Post
+```
+
+### `fallback: true`
+
+<details>
+  <summary>أمثلة</summary>
+
+- [إنشاء ثابت لعدد كبير من الصفحات](https://static-tweet.vercel.app)
+
+</details>
+
+إذا كانت `fallback` هي `true`، فإن سلوك `getStaticProps` يتغير بالطرق التالية:
+
+- سيتم تحويل المسارات التي تم إرجاعها من `getStaticPaths` إلى `HTML` أثناء وقت البناء بواسطة `getStaticProps`.
+- المسارات التي لم يتم إنشاؤها أثناء وقت البناء **لن** تؤدي إلى صفحة 404. بدلاً من ذلك، سيقوم Next.js بعرض نسخة ["احتياطية" (fallback)](#fallback-pages) من الصفحة عند الطلب الأول لمثل هذا المسار. لن يتم تقديم نسخة احتياطية لمحركات البحث مثل Google، وبدلاً من ذلك سيتصرف المسار كما في [`fallback: 'blocking'`](#fallback-blocking).
+- عند التنقل إلى صفحة بها `fallback: true` عبر `next/link` أو `next/router` (من جانب العميل)، لن يقدم Next.js نسخة احتياطية وبدلاً من ذلك ستصرف الصفحة كما في [`fallback: 'blocking'`](#fallback-blocking).
+- في الخلفية، سيقوم Next.js بإنشاء `HTML` و `JSON` للمسار المطلوب بشكل ثابت. وهذا يشمل تشغيل `getStaticProps`.
+- عند الانتهاء، يتلقى المتصفح `JSON` للمسار الذي تم إنشاؤه. سيتم استخدام هذا لعرض الصفحة تلقائيًا مع الخصائص المطلوبة. من وجهة نظر المستخدم، ستنتقل الصفحة من الصفحة الاحتياطية إلى الصفحة الكاملة.
+- في نفس الوقت، يضيف Next.js هذا المسار إلى قائمة الصفحات المحضرة مسبقًا. الطلبات اللاحقة لنفس المسار ستقدم الصفحة التي تم إنشاؤها، مثل الصفحات الأخرى المحضرة مسبقًا أثناء وقت البناء.
+
+> **ملاحظة جيدة**: لا يتم دعم `fallback: true` عند استخدام [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports).
+
+#### متى يكون `fallback: true` مفيدًا؟
+
+`fallback: true` مفيد إذا كان تطبيقك يحتوي على عدد كبير جدًا من الصفحات الثابتة التي تعتمد على البيانات (مثل موقع تجارة إلكترونية كبير جدًا). إذا كنت تريد تحضير جميع صفحات المنتجات مسبقًا، فسوف تستغرق عمليات البناء وقتًا طويلاً جدًا.
+
+بدلاً من ذلك، يمكنك إنشاء مجموعة فرعية صغيرة من الصفحات بشكل ثابت واستخدام `fallback: true` للباقي. عندما يطلب شخص ما صفحة لم يتم إنشاؤها بعد، سيرى المستخدم الصفحة مع مؤشر تحميل أو مكون هيكل عظمي.
+
+بعد وقت قصير، ينتهي `getStaticProps` وسيتم عرض الصفحة بالبيانات المطلوبة. من الآن فصاعدًا، سيحصل كل من يطلب نفس الصفحة على الصفحة المحضرة مسبقًا بشكل ثابت.
+
+هذا يضمن أن المستخدمين يحصلون دائمًا على تجربة سريعة مع الحفاظ على عمليات بناء سريعة وفوائد التوليد الثابت.
+
+`fallback: true` لن **يحدث** الصفحات التي تم إنشاؤها، لذلك يمكنك الاطلاع على [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) لذلك.
+
+### `fallback: 'blocking'`
+
+إذا كانت `fallback` هي `'blocking'`، فإن المسارات الجديدة التي لم يتم إرجاعها بواسطة `getStaticPaths` ستنتظر إنشاء `HTML`، مماثل لـ SSR (ولهذا السبب تسمى _blocking_)، ثم يتم تخزينها مؤقتًا للطلبات المستقبلية بحيث تحدث مرة واحدة فقط لكل مسار.
+
+سيتصرف `getStaticProps` كما يلي:
+
+- سيتم تحويل المسارات التي تم إرجاعها من `getStaticPaths` إلى `HTML` أثناء وقت البناء بواسطة `getStaticProps`.
+- المسارات التي لم يتم إنشاؤها أثناء وقت البناء **لن** تؤدي إلى صفحة 404. بدلاً من ذلك، سيقوم Next.js بعرض SSR عند الطلب الأول وإرجاع `HTML` الذي تم إنشاؤه.
+- عند الانتهاء، يتلقى المتصفح `HTML` للمسار الذي تم إنشاؤه. من وجهة نظر المستخدم، سينتقل من "المتصفح يطلب الصفحة" إلى "تم تحميل الصفحة بالكامل". لا يوجد وميض لحالة التحميل/الاحتياطي.
+- في نفس الوقت، يضيف Next.js هذا المسار إلى قائمة الصفحات المحضرة مسبقًا. الطلبات اللاحقة لنفس المسار ستقدم الصفحة التي تم إنشاؤها، مثل الصفحات الأخرى المحضرة مسبقًا أثناء وقت البناء.
+
+`fallback: 'blocking'` لن **يحدث** الصفحات التي تم إنشاؤها افتراضيًا. لتحديث الصفحات التي تم إنشاؤها، استخدم [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) بالتزامن مع `fallback: 'blocking'`.
+
+> **ملاحظة جيدة**: لا يتم دعم `fallback: 'blocking'` عند استخدام [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports).
+
+### الصفحات الاحتياطية (Fallback pages)
+
+في النسخة "الاحتياطية" من الصفحة:
+
+- ستكون خصائص الصفحة فارغة.
+- باستخدام [الموجه (router)](/docs/pages/api-reference/functions/use-router)، يمكنك اكتشاف ما إذا كان يتم عرض النسخة الاحتياطية، `router.isFallback` سيكون `true`.
+
+المثال التالي يوضح استخدام `isFallback`:
+
+```jsx filename="pages/posts/[id].js"
+import { useRouter } from 'next/router'
+
+function Post({ post }) {
+  const router = useRouter()
+
+  // إذا لم يتم إنشاء الصفحة بعد، سيتم عرض هذا
+  // في البداية حتى ينتهي تشغيل getStaticProps()
+  if (router.isFallback) {
+    return <div>جار التحميل...</div>
+  }
+
+  // عرض المقالة...
+}
+
+// يتم استدعاء هذه الدالة أثناء وقت البناء
+export async function getStaticPaths() {
+  return {
+    // فقط `/posts/1` و `/posts/2` تم إنشاؤهما أثناء وقت البناء
+    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
+    // تمكين إنشاء صفحات إضافية بشكل ثابت
+    // على سبيل المثال: `/posts/3`
+    fallback: true,
+  }
+}
+
+// يتم استدعاء هذا أيضًا أثناء وقت البناء
+export async function getStaticProps({ params }) {
+  // params يحتوي على `id` للمقالة.
+  // إذا كان المسار مثل /posts/1، فإن params.id هو 1
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  // تمرير بيانات المقالة إلى الصفحة عبر props
+  return {
+    props: { post },
+    // إعادة إنشاء المقالة مرة واحدة على الأكثر كل ثانية
+    // إذا جاء طلب
+    revalidate: 1,
+  }
+}
+
+export default Post
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                                                                    |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | أصبح [موجه التطبيق (App Router)](/docs/app/building-your-application/data-fetching) مستقرًا مع تبسيط جلب البيانات، بما في ذلك [`generateStaticParams()`](/docs/app/api-reference/functions/generate-static-params) |
+| `v12.2.0` | أصبح [التجديد الثابت التدريجي عند الطلب (On-Demand Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) مستقرًا.                                         |
+| `v12.1.0` | تمت إضافة [التجديد الثابت التدريجي عند الطلب (On-Demand Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) (بيتا).                                      |
+| `v9.5.0`  | أصبح [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) مستقرًا                                                                              |
+| `v9.3.0`  | تم تقديم `getStaticPaths`.                                                                                                                                                                               |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-static-props.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-static-props.mdx
new file mode 100644
index 00000000..26d01544
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/get-static-props.mdx
@@ -0,0 +1,230 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:34.370Z
+title: getStaticProps
+description: مرجع API لـ `getStaticProps`. تعلم كيفية استخدام `getStaticProps` لإنشاء صفحات ثابتة مع Next.js.
+---
+
+تصدير دالة تسمى `getStaticProps` سيقوم بعرض الصفحة مسبقًا أثناء البناء باستخدام الخصائص (props) التي تُرجعها الدالة:
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetStaticPropsType, GetStaticProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getStaticPaths() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+يمكنك استيراد الوحدات (modules) في النطاق العلوي لاستخدامها في `getStaticProps`. الوحدات المستوردة **لن يتم تضمينها لجانب العميل**. هذا يعني أنه يمكنك كتابة **كود خاص بالخادم مباشرة في `getStaticProps`**، بما في ذلك جلب البيانات من قاعدة البيانات الخاصة بك.
+
+## معامل Context
+
+معامل `context` هو كائن يحتوي على المفاتيح التالية:
+
+| الاسم            | الوصف                                                                                                                                                                                                                                                                                          |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `params`        | يحتوي على معلمات المسار للصفحات التي تستخدم [المسارات الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes). على سبيل المثال، إذا كان اسم الصفحة هو `[id].js`، فإن `params` سيبدو مثل `{ id: ... }`. يجب استخدام هذا مع `getStaticPaths`، والذي سنشرحه لاحقًا. |
+| `preview`       | (مهمل لصالح `draftMode`) `preview` يكون `true` إذا كانت الصفحة في [وضع المعاينة](/docs/pages/building-your-application/configuring/preview-mode) و `false` بخلاف ذلك.                                                                                                                         |
+| `previewData`   | (مهمل لصالح `draftMode`) بيانات [المعاينة](/docs/pages/building-your-application/configuring/preview-mode) المعينة بواسطة `setPreviewData`.                                                                                                                                                             |
+| `draftMode`     | `draftMode` يكون `true` إذا كانت الصفحة في [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode) و `false` بخلاف ذلك.                                                                                                                                                        |
+| `locale`        | يحتوي على اللغة النشطة (إذا كانت ممكّنة).                                                                                                                                                                                                                                                             |
+| `locales`       | يحتوي على جميع اللغات المدعومة (إذا كانت ممكّنة).                                                                                                                                                                                                                                                         |
+| `defaultLocale` | يحتوي على اللغة الافتراضية المكونة (إذا كانت ممكّنة).                                                                                                                                                                                                                                                 |
+
+## قيم إرجاع getStaticProps
+
+يجب أن تُرجع دالة `getStaticProps` كائنًا يحتوي إما على `props`، أو `redirect`، أو `notFound` متبوعًا بخاصية اختيارية `revalidate`.
+
+### `props`
+
+كائن `props` هو زوج مفتاح-قيمة، حيث يتم استقبال كل قيمة بواسطة مكون الصفحة. يجب أن يكون [كائنًا قابلاً للتسلسل](https://developer.mozilla.org/docs/Glossary/Serialization) بحيث يمكن تسلسل أي خصائص يتم تمريرها باستخدام [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+```jsx
+export async function getStaticProps(context) {
+  return {
+    props: { message: `Next.js is awesome` }, // سيتم تمريرها إلى مكون الصفحة كخصائص
+  }
+}
+```
+
+### `revalidate`
+
+خاصية `revalidate` هي المقدار بالثواني الذي بعدها يمكن أن يحدث إعادة إنشاء للصفحة (القيمة الافتراضية هي `false` أو بدون إعادة تحقق).
+
+```js
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// تم تمكين إعادة التحقق وجاء طلب جديد
+export async function getStaticProps() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  return {
+    props: {
+      posts,
+    },
+    // ستحاول Next.js إعادة إنشاء الصفحة:
+    // - عند وصول طلب
+    // - على الأكثر مرة كل 10 ثواني
+    revalidate: 10, // بالثواني
+  }
+}
+```
+
+تعلم المزيد عن [التجديد الثابت التدريجي](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+
+يمكن تحديد حالة التخزين المؤقت لصفحة تستخدم ISR عن طريق قراءة قيمة رأس الاستجابة `x-nextjs-cache`. القيم الممكنة هي التالية:
+
+- `MISS` - المسار غير موجود في التخزين المؤقت (يحدث مرة واحدة على الأكثر، في الزيارة الأولى)
+- `STALE` - المسار موجود في التخزين المؤقت ولكنه تجاوز وقت إعادة التحقق لذا سيتم تحديثه في الخلفية
+- `HIT` - المسار موجود في التخزين المؤقت ولم يتجاوز وقت إعادة التحقق
+
+### `notFound`
+
+القيمة المنطقية `notFound` تسمح للصفحة بإرجاع حالة `404` و[صفحة 404](/docs/pages/building-your-application/routing/custom-error#404-page). مع `notFound: true`، سترجع الصفحة `404` حتى لو كانت هناك صفحة تم إنشاؤها بنجاح من قبل. هذا مخصص لدعم حالات الاستخدام مثل المحتوى الذي ينشئه المستخدم ويتم إزالته بواسطة مؤلفه. لاحظ أن `notFound` يتبع نفس سلوك `revalidate` [الموضح هنا](#revalidate).
+
+```js
+export async function getStaticProps(context) {
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: { data }, // سيتم تمريرها إلى مكون الصفحة كخصائص
+  }
+}
+```
+
+> **معلومة جيدة**: `notFound` غير مطلوب لوضع [`fallback: false`](/docs/pages/api-reference/functions/get-static-paths#fallback-false) حيث سيتم فقط عرض المسارات التي تم إرجاعها من `getStaticPaths` مسبقًا.
+
+### `redirect`
+
+كائن `redirect` يسمح بإعادة التوجيه إلى موارد داخلية أو خارجية. يجب أن يتطابق مع الشكل `{ destination: string, permanent: boolean }`.
+
+في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء `HTTP` القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية `statusCode` بدلاً من خاصية `permanent`، **ولكن ليس كلاهما**. يمكنك أيضًا تعيين `basePath: false` مشابهًا لإعادة التوجيه في `next.config.js`.
+
+```js
+export async function getStaticProps(context) {
+  const res = await fetch(`https://...`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+        // statusCode: 301
+      },
+    }
+  }
+
+  return {
+    props: { data }, // سيتم تمريرها إلى مكون الصفحة كخصائص
+  }
+}
+```
+
+إذا كانت عمليات إعادة التوجيه معروفة في وقت البناء، فيجب إضافتها في [`next.config.js`](/docs/pages/api-reference/next-config-js/redirects) بدلاً من ذلك.
+
+## قراءة الملفات: استخدم `process.cwd()`
+
+يمكن قراءة الملفات مباشرة من نظام الملفات في `getStaticProps`.
+
+للقيام بذلك، يجب الحصول على المسار الكامل للملف.
+
+بما أن Next.js يقوم بتجميع الكود الخاص بك في دليل منفصل، لا يمكنك استخدام `__dirname` لأن المسار الذي سيعود به سيكون مختلفًا عن مسار الصفحة.
+
+بدلاً من ذلك، يمكنك استخدام `process.cwd()` الذي يعطيك الدليل الذي يتم فيه تنفيذ Next.js.
+
+```jsx
+import { promises as fs } from 'fs'
+import path from 'path'
+
+// سيتم ملء المنشورات أثناء البناء بواسطة getStaticProps()
+function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>
+          <h3>{post.filename}</h3>
+          <p>{post.content}</p>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// لن يتم استدعاؤها على جانب العميل، لذا يمكنك حتى إجراء
+// استعلامات قاعدة بيانات مباشرة.
+export async function getStaticProps() {
+  const postsDirectory = path.join(process.cwd(), 'posts')
+  const filenames = await fs.readdir(postsDirectory)
+
+  const posts = filenames.map(async (filename) => {
+    const filePath = path.join(postsDirectory, filename)
+    const fileContents = await fs.readFile(filePath, 'utf8')
+
+    // بشكل عام، ستحلل/تحول المحتويات
+    // على سبيل المثال، يمكنك تحويل Markdown إلى HTML هنا
+
+    return {
+      filename,
+      content: fileContents,
+    }
+  })
+  // بإرجاع { props: { posts } }، سيستقبل مكون Blog
+  // `posts` كخاصية أثناء البناء
+  return {
+    props: {
+      posts: await Promise.all(posts),
+    },
+  }
+}
+
+export default Blog
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                               |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | [موجه التطبيق](/docs/app/building-your-application/data-fetching) أصبح الآن مستقرًا مع جلب بيانات مبسط                                                            |
+| `v12.2.0` | [التجديد الثابت التدريجي عند الطلب](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) أصبح مستقرًا.    |
+| `v12.1.0` | تمت إضافة [التجديد الثابت التدريجي عند الطلب](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) (بيتا). |
+| `v10.0.0` | تمت إضافة خيارات `locale`، `locales`، `defaultLocale`، و `notFound`.                                                                                                   |
+| `v10.0.0` | تمت إضافة خيار الإرجاع `fallback: 'blocking'`.                                                                                                                           |
+| `v9.5.0`  | أصبح [التجديد الثابت التدريجي](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) مستقرًا.                                         |
+| `v9.3.0`  | تم تقديم `getStaticProps`.                                                                                                                                          |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/index.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/index.mdx
new file mode 100644
index 00000000..eb07a715
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:57.504Z
+title: الدوال
+description: مرجع API للدوال والخطافات (Hooks) في موجه الصفحات (Pages Router).
+source: app/api-reference/functions
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/next-server.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/next-server.mdx
new file mode 100644
index 00000000..37b13ec2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/next-server.mdx
@@ -0,0 +1,172 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:51:36.550Z
+title: NextRequest و NextResponse
+description: تعرف على أدوات المساعدة الخاصة بالخادم للاستخدام في البرمجيات الوسيطة (Middleware) ومسارات واجهة برمجة التطبيقات الحافة (Edge API Routes).
+---
+
+يوفر `next/server` أدوات مساعدة خاصة بالخادم للاستخدام في [البرمجيات الوسيطة (Middleware)](/docs/pages/building-your-application/routing/middleware) و[مسارات واجهة برمجة التطبيقات الحافة (Edge API Routes)](/docs/pages/building-your-application/routing/api-routes).
+
+## NextRequest
+
+كائن `NextRequest` هو امتداد لواجهة [`Request`](https://developer.mozilla.org/docs/Web/API/Request) الأصلية، مع إضافة الطرق والخصائص التالية:
+
+- `cookies` - نسخة من [RequestCookies](https://edge-runtime.vercel.app/packages/cookies#for-request) تحتوي على ملفات تعريف الارتباط من `Request`. تقرأ/تعدل رأس `Cookie` للطلب. انظر أيضًا [استخدام ملفات تعريف الارتباط في البرمجيات الوسيطة (Middleware)](/docs/app/building-your-application/routing/middleware#using-cookies).
+
+  - `get` - طريقة تأخذ اسم ملف تعريف الارتباط `name` وتُرجع كائنًا يحتوي على `name` و`value`. إذا لم يتم العثور على ملف تعريف الارتباط، تُرجع `undefined`. إذا تطابق أكثر من ملف تعريف، تُرجع أول تطابق فقط.
+  - `getAll` - طريقة مشابهة لـ`get`، ولكنها تُرجع قائمة بجميع ملفات تعريف الارتباط المتطابقة مع `name`. إذا لم يتم تحديد `name`، تُرجع جميع ملفات تعريف الارتباط المتاحة.
+  - `set` - طريقة تأخذ كائنًا بخصائص `CookieListItem` كما هو محدد في مواصفات [W3C CookieStore API](https://wicg.github.io/cookie-store/#dictdef-cookielistitem).
+  - `delete` - طريقة تأخذ اسم ملف تعريف الارتباط `name` أو قائمة أسماء وتزيل ملفات تعريف الارتباط المتطابقة. تُرجع `true` للملفات المحذوفة و`false` للملفات غير المحذوفة.
+  - `has` - طريقة تأخذ اسم ملف تعريف الارتباط `name` وتُرجع قيمة `boolean` بناءً على وجود الملف (`true`) أو عدم وجوده (`false`).
+  - `clear` - طريقة لا تأخذ أي وسيطات وتزيل رأس `Cookie` بشكل فعال.
+
+- `nextUrl`: يتضمن كائن URL ممتدًا ومحللاً يمنحك الوصول إلى خصائص Next.js الخاصة مثل `pathname`، `basePath`، `trailingSlash` و`i18n`. يتضمن الخصائص التالية:
+  - `basePath` (`string`)
+  - `buildId` (`string || undefined`)
+  - `defaultLocale` (`string || undefined`)
+  - `domainLocale`
+    - `defaultLocale`: (`string`)
+    - `domain`: (`string`)
+    - `http`: (`boolean || undefined`)
+    - `locales`: (`string[] || undefined`)
+  - `locale` (`string || undefined`)
+  - `url` (`URL`)
+- `ip`: (`string || undefined`) - يحتوي على عنوان IP لـ `Request`. توفر هذه المعلومات منصة الاستضافة الخاصة بك.
+- `geo` - يحتوي على الموقع الجغرافي من `Request`. توفر هذه المعلومات منصة الاستضافة الخاصة بك. يتضمن الخصائص التالية:
+  - `city` (`string || undefined`)
+  - `country` (`string || undefined`)
+  - `region` (`string || undefined`)
+  - `latitude` (`string || undefined`)
+  - `longitude` (`string || undefined`)
+
+يمكنك استخدام كائن `NextRequest` كبديل مباشر لواجهة `Request` الأصلية، مما يمنحك تحكمًا أكبر في كيفية معالجة الطلب.
+
+يمكن استيراد `NextRequest` من `next/server`:
+
+```typescript
+import type { NextRequest } from 'next/server'
+```
+
+## NextFetchEvent
+
+يمتد كائن `NextFetchEvent` كائن [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent) الأصلي، ويتضمن طريقة [`waitUntil()`](https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil).
+
+يمكن استخدام طريقة `waitUntil()` لإطالة تنفيذ الوظيفة إذا كان لديك أعمال خلفية أخرى للقيام بها.
+
+```typescript
+import { NextResponse } from 'next/server'
+import type { NextFetchEvent, NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest, event: NextFetchEvent) {
+  event.waitUntil(
+    fetch('https://my-analytics-platform.com', {
+      method: 'POST',
+      body: JSON.stringify({ pathname: req.nextUrl.pathname }),
+    })
+  )
+
+  return NextResponse.next()
+}
+```
+
+يمكن استيراد كائن `NextFetchEvent` من `next/server`:
+
+```typescript
+import type { NextFetchEvent } from 'next/server'
+```
+
+## NextResponse
+
+توسع فئة `NextResponse` واجهة [`Response`](https://developer.mozilla.org/docs/Web/API/Response) الأصلية، بما يلي:
+
+### الطرق العامة
+
+الطرق العامة متاحة على نسخة من فئة `NextResponse`. اعتمادًا على حالة الاستخدام، يمكنك إنشاء نسخة وتعيينها لمتغير، ثم الوصول إلى الطرق العامة التالية:
+
+- `cookies` - نسخة من [ResponseCookies](https://edge-runtime.vercel.app/packages/cookies#for-response) تحتوي على ملفات تعريف الارتباط من `Response`. تقرأ/تعدل رأس `Set-Cookie` للاستجابة. انظر أيضًا [استخدام ملفات تعريف الارتباط في البرمجيات الوسيطة (Middleware)](/docs/app/building-your-application/routing/middleware#using-cookies).
+  - `get` - طريقة تأخذ اسم ملف تعريف الارتباط `name` وتُرجع كائنًا يحتوي على `name` و`value`. إذا لم يتم العثور على ملف تعريف الارتباط، تُرجع `undefined`. إذا تطابق أكثر من ملف تعريف، تُرجع أول تطابق فقط.
+  - `getAll` - طريقة مشابهة لـ`get`، ولكنها تُرجع قائمة بجميع ملفات تعريف الارتباط المتطابقة مع `name`. إذا لم يتم تحديد `name`، تُرجع جميع ملفات تعريف الارتباط المتاحة.
+  - `set` - طريقة تأخذ كائنًا بخصائص `CookieListItem` كما هو محدد في مواصفات [W3C CookieStore API](https://wicg.github.io/cookie-store/#dictdef-cookielistitem).
+  - `delete` - طريقة تأخذ اسم ملف تعريف الارتباط `name` أو قائمة أسماء وتزيل ملفات تعريف الارتباط المتطابقة. تُرجع `true` للملفات المحذوفة و`false` للملفات غير المحذوفة.
+
+### الطرق الثابتة
+
+الطرق الثابتة التالية متاحة مباشرة على فئة `NextResponse`:
+
+- `redirect()` - تُرجع `NextResponse` مع إعادة توجيه مضبوطة
+- `rewrite()` - تُرجع `NextResponse` مع إعادة كتابة مضبوطة
+- `next()` - تُرجع `NextResponse` التي ستستمر في سلسلة البرمجيات الوسيطة
+
+لاستخدام الطرق أعلاه، **يجب عليك إرجاع كائن `NextResponse`** المُعاد. يمكن استيراد `NextResponse` من `next/server`:
+
+```typescript
+import { NextResponse } from 'next/server'
+```
+
+## userAgent
+
+يسمح لك مساعد `userAgent` بالتفاعل مع كائن وكيل المستخدم من الطلب. وهو مجرد من كائن `Request` الأصلي، وميزة اختيارية. يحتوي على الخصائص التالية:
+
+- `isBot`: (`boolean`) ما إذا كان الطلب يأتي من بوت معروف
+- `browser`
+  - `name`: (`string || undefined`) اسم المتصفح
+  - `version`: (`string || undefined`) إصدار المتصفح، يتم تحديده ديناميكيًا
+- `device`
+  - `model`: (`string || undefined`) نموذج الجهاز، يتم تحديده ديناميكيًا
+  - `type`: (`string || undefined`) نوع المتصفح، يمكن أن يكون أحد القيم التالية: `console`، `mobile`، `tablet`، `smarttv`، `wearable`، `embedded`، أو `undefined`
+  - `vendor`: (`string || undefined`) بائع الجهاز، يتم تحديده ديناميكيًا
+- `engine`
+  - `name`: (`string || undefined`) اسم محرك المتصفح، يمكن أن يكون أحد القيم التالية: `Amaya`، `Blink`، `EdgeHTML`، `Flow`، `Gecko`، `Goanna`، `iCab`، `KHTML`، `Links`، `Lynx`، `NetFront`، `NetSurf`، `Presto`، `Tasman`، `Trident`، `w3m`، `WebKit` أو `undefined`
+  - `version`: (`string || undefined`) إصدار محرك المتصفح، يتم تحديده ديناميكيًا، أو `undefined`
+- `os`
+  - `name`: (`string || undefined`) اسم نظام التشغيل، يمكن أن يكون `undefined`
+  - `version`: (`string || undefined`) إصدار نظام التشغيل، يتم تحديده ديناميكيًا، أو `undefined`
+- `cpu`
+  - `architecture`: (`string || undefined`) بنية المعالج، يمكن أن تكون أحد القيم التالية: `68k`، `amd64`، `arm`، `arm64`، `armhf`، `avr`، `ia32`، `ia64`، `irix`، `irix64`، `mips`، `mips64`، `pa-risc`، `ppc`، `sparc`، `sparc64` أو `undefined`
+
+يمكن استيراد `userAgent` من `next/server`:
+
+```typescript
+import { userAgent } from 'next/server'
+```
+
+```typescript
+import { NextRequest, NextResponse, userAgent } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const url = request.nextUrl
+  const { device } = userAgent(request)
+  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
+  url.searchParams.set('viewport', viewport)
+  return NextResponse.rewrite(url)
+}
+```
+
+## الأسئلة الشائعة
+
+### لماذا يستخدم `redirect` الرموز 307 و 308؟
+
+عند استخدام `redirect()` قد تلاحظ أن رموز الحالة المستخدمة هي `307` لإعادة التوجيه المؤقتة، و`308` لإعادة التوجيه الدائمة. بينما تقليديًا كان يتم استخدام `302` لإعادة التوجيه المؤقتة، و`301` لإعادة التوجيه الدائمة، قامت العديد من المتصفحات بتغيير طريقة طلب إعادة التوجيه من `POST` إلى `GET` عند استخدام `302`، بغض النظر عن طريقة الطلب الأصلية.
+
+خذ المثال التالي لإعادة التوجيه من `/users` إلى `/people`، إذا قمت بطلب `POST` إلى `/users` لإنشاء مستخدم جديد، وكنت تتبع إعادة توجيه مؤقتة `302`، سيتم تغيير طريقة الطلب من `POST` إلى `GET`. هذا غير منطقي، لأنه لإنشاء مستخدم جديد، يجب عليك تقديم طلب `POST` إلى `/people`، وليس طلب `GET`.
+
+أدخل رمز الحالة `307` يعني الحفاظ على طريقة الطلب كـ `POST`.
+
+- `302` - إعادة توجيه مؤقتة، ستغير طريقة الطلب من `POST` إلى `GET`
+- `307` - إعادة توجيه مؤقتة، ستحافظ على طريقة الطلب كـ `POST`
+
+تستخدم طريقة `redirect()` رمز `307` افتراضيًا، بدلاً من إعادة التوجيه المؤقتة `302`، مما يعني أن طلباتك ستظل دائمًا `POST`.
+
+إذا كنت تريد إحداث استجابة `GET` لطلب `POST`، استخدم `303`.
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/HTTP/Redirections) حول إعادة التوجيه HTTP.
+
+### كيف يمكنني الوصول إلى متغيرات البيئة؟
+
+يمكن استخدام `process.env` للوصول إلى [متغيرات البيئة](/docs/pages/building-your-application/configuring/environment-variables) من البرمجيات الوسيطة الحافة (Edge Middleware). يتم تقييمها أثناء `next build`:
+
+| يعمل                                                        | لا يعمل                          |
+| ------------------------------------------------------------ | ------------------------------------------ |
+| `console.log(process.env.MY_ENV_VARIABLE)`                   | `const getEnv = name => process.env[name]` |
+| `const { MY_ENV_VARIABLE } = process.env`                    |                                            |
+| `const { "MY-ENV-VARIABLE": MY_ENV_VARIABLE } = process.env` |                                            |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-amp.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-amp.mdx
new file mode 100644
index 00000000..33d63b38
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-amp.mdx
@@ -0,0 +1,88 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:17.483Z
+title: useAmp
+description: تمكين AMP في الصفحة والتحكم في طريقة إضافة Next.js لـ AMP إلى الصفحة باستخدام تكوين AMP.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [AMP](https://github.com/vercel/next.js/tree/canary/examples/amp)
+
+</details>
+
+> دعم AMP هو أحد ميزاتنا المتقدمة، يمكنك [قراءة المزيد عن AMP هنا](/docs/pages/building-your-application/configuring/amp).
+
+لتمكين AMP، أضف التكوين التالي إلى صفحتك:
+
+```jsx filename="pages/index.js"
+export const config = { amp: true }
+```
+
+يقبل تكوين `amp` القيم التالية:
+
+- `true` - ستكون الصفحة AMP فقط
+- `'hybrid'` - ستحتوي الصفحة على نسختين، واحدة بـ AMP وأخرى بـ HTML
+
+للمزيد من المعلومات حول تكوين `amp`، اقرأ الأقسام أدناه.
+
+## صفحة AMP فقط
+
+انظر إلى المثال التالي:
+
+```jsx filename="pages/about.js"
+export const config = { amp: true }
+
+function About(props) {
+  return <h3>صفحتي حول AMP!</h3>
+}
+
+export default About
+```
+
+الصفحة أعلاه هي صفحة AMP فقط، مما يعني:
+
+- الصفحة لا تحتوي على وقت تشغيل Next.js أو React من جانب العميل
+- يتم تحسين الصفحة تلقائيًا باستخدام [AMP Optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer)، وهو محسن يطبق نفس التحويلات مثل ذاكرة التخزين المؤقت لـ AMP (يحسن الأداء بنسبة تصل إلى 42٪)
+- الصفحة تحتوي على نسخة يمكن للمستخدم الوصول إليها (مُحسنة) ونسخة يمكن لمحركات البحث فهرستها (غير محسنة)
+
+## صفحة AMP هجينة
+
+انظر إلى المثال التالي:
+
+```jsx filename="pages/about.js"
+import { useAmp } from 'next/amp'
+
+export const config = { amp: 'hybrid' }
+
+function About(props) {
+  const isAmp = useAmp()
+
+  return (
+    <div>
+      <h3>صفحتي حول AMP!</h3>
+      {isAmp ? (
+        <amp-img
+          width="300"
+          height="300"
+          src="/my-img.jpg"
+          alt="صورة رائعة"
+          layout="responsive"
+        />
+      ) : (
+        <img width="300" height="300" src="/my-img.jpg" alt="صورة رائعة" />
+      )}
+    </div>
+  )
+}
+
+export default About
+```
+
+الصفحة أعلاه هي صفحة AMP هجينة، مما يعني:
+
+- يتم عرض الصفحة كـ HTML تقليدي (افتراضي) وAMP HTML (بإضافة `?amp=1` إلى الرابط)
+- تحتوي نسخة AMP من الصفحة فقط على تحسينات صالحة تم تطبيقها باستخدام AMP Optimizer بحيث يمكن فهرستها بواسطة محركات البحث
+
+تستخدم الصفحة `useAmp` للتمييز بين الوضعين، وهو [React Hook](https://react.dev/reference/react) يعيد `true` إذا كانت الصفحة تستخدم AMP، و`false` في الحالات الأخرى.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-report-web-vitals.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-report-web-vitals.mdx
new file mode 100644
index 00000000..aab0ac42
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-report-web-vitals.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:58.346Z
+title: useReportWebVitals
+description: useReportWebVitals
+source: app/api-reference/functions/use-report-web-vitals
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-router.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-router.mdx
new file mode 100644
index 00000000..4d3d4f85
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/02-functions/use-router.mdx
@@ -0,0 +1,532 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:52:56.492Z
+title: useRouter
+description: تعرف على المزيد حول واجهة برمجة التطبيقات (API) لموجه Next.js، وكيفية الوصول إلى نسخة الموجه في صفحتك باستخدام خطاف useRouter.
+---
+
+إذا كنت ترغب في الوصول إلى [كائن الموجه](#router-object) داخل أي مكون وظيفي في تطبيقك، يمكنك استخدام خطاف `useRouter`، انظر إلى المثال التالي:
+
+```jsx
+import { useRouter } from 'next/router'
+
+function ActiveLink({ children, href }) {
+  const router = useRouter()
+  const style = {
+    marginRight: 10,
+    color: router.asPath === href ? 'red' : 'black',
+  }
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    router.push(href)
+  }
+
+  return (
+    <a href={href} onClick={handleClick} style={style}>
+      {children}
+    </a>
+  )
+}
+
+export default ActiveLink
+```
+
+> `useRouter` هو [خطاف React](https://react.dev/learn#using-hooks)، مما يعني أنه لا يمكن استخدامه مع الفئات. يمكنك إما استخدام [withRouter](#withrouter) أو تغليف الفصل الخاص بك في مكون وظيفي.
+
+## كائن `router`
+
+التعريف التالي هو لكائن `router` الذي يتم إرجاعه بواسطة كل من [`useRouter`](#top) و [`withRouter`](#withrouter):
+
+- `pathname`: `String` - المسار لملف المسار الحالي الذي يأتي بعد `/pages`. لذلك، لا يتم تضمين `basePath`، `locale` والشرطة المائلة النهائية (`trailingSlash: true`).
+- `query`: `Object` - سلسلة الاستعلام المحللة إلى كائن، بما في ذلك معلمات [المسار الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes). سيكون كائنًا فارغًا أثناء التصيير المسبق إذا كانت الصفحة لا تستخدم [التصيير من جانب الخادم (SSR)](/docs/pages/building-your-application/data-fetching/get-server-side-props). القيمة الافتراضية هي `{}`
+- `asPath`: `String` - المسار كما يظهر في المتصفح بما في ذلك معلمات البحث واحترام إعداد `trailingSlash`. لا يتم تضمين `basePath` و `locale`.
+- `isFallback`: `boolean` - ما إذا كانت الصفحة الحالية في [وضع الاحتياطي (fallback mode)](/docs/pages/api-reference/functions/get-static-paths#fallback-true).
+- `basePath`: `String` - [basePath](/docs/app/api-reference/next-config-js/basePath) النشط (إذا تم تمكينه).
+- `locale`: `String` - اللغة النشطة (إذا تم تمكينها).
+- `locales`: `String[]` - جميع اللغات المدعومة (إذا تم تمكينها).
+- `defaultLocale`: `String` - اللغة الافتراضية الحالية (إذا تم تمكينها).
+- `domainLocales`: `Array<{domain, defaultLocale, locales}>` - أي لغات مجال مهيأة.
+- `isReady`: `boolean` - ما إذا كانت حقول الموجه محدثة من جانب العم وجاهزة للاستخدام. يجب استخدامها فقط داخل طرق `useEffect` وليس للتصيير الشرطي على الخادم. انظر الوثائق ذات الصلة لحالة الاستخدام مع [الصفحات المحسنة ثابتًا تلقائيًا](/docs/pages/building-your-application/rendering/automatic-static-optimization)
+- `isPreview`: `boolean` - ما إذا كان التطبيق حاليًا في [وضع المعاينة (preview mode)](/docs/pages/building-your-application/configuring/preview-mode).
+
+> استخدام حقل `asPath` قد يؤدي إلى عدم تطابق بين العميل والخادم إذا تم تصيير الصفحة باستخدام التصيير من جانب الخادم أو [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization). تجنب استخدام `asPath` حتى يصبح حقل `isReady` `true`.
+
+الطرق التالية مدرجة داخل `router`:
+
+### router.push
+
+<details>
+  <summary>أمثلة</summary>
+
+- [استخدام الموجه (Using Router)](https://github.com/vercel/next.js/tree/canary/examples/using-router)
+
+</details>
+
+يتحكم في الانتقالات من جانب العميل، هذه الطريقة مفيدة للحالات التي لا يكون فيها [`next/link`](/docs/pages/api-reference/components/link) كافيًا.
+
+```js
+router.push(url, as, options)
+```
+
+- `url`: `UrlObject | String` - عنوان URL للانتقال إليه (انظر [وثائق وحدة URL في Node.JS](https://nodejs.org/api/url.html#legacy-urlobject) لخصائص `UrlObject`).
+- `as`: `UrlObject | String` - مزخرف اختياري للمسار الذي سيظهر في شريط عنوان URL للمتصفح. قبل Next.js 9.5.3 كان هذا يستخدم للمسارات الديناميكية.
+- `options` - كائن اختياري مع خيارات التهيئة التالية:
+  - `scroll` - قيمة منطقية اختيارية، تتحكم في التمرير إلى أعلى الصفحة بعد التنقل. القيمة الافتراضية هي `true`
+  - [`shallow`](/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing): تحديث مسار الصفحة الحالية دون إعادة تشغيل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)، [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) أو [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props). القيمة الافتراضية هي `false`
+  - `locale` - سلسلة اختيارية، تشير إلى لغة الصفحة الجديدة
+
+> لا تحتاج إلى استخدام `router.push` لعناوين URL الخارجية. [window.location](https://developer.mozilla.org/docs/Web/API/Window/location) أكثر ملاءمة لتلك الحالات.
+
+الانتقال إلى `pages/about.js`، وهو مسار محدد مسبقًا:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/about')}>
+      اضغط علي
+    </button>
+  )
+}
+```
+
+الانتقال إلى `pages/post/[pid].js`، وهو مسار ديناميكي:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/post/abc')}>
+      اضغط علي
+    </button>
+  )
+}
+```
+
+إعادة توجيه المستخدم إلى `pages/login.js`، مفيد للصفحات خلف [المصادقة](/docs/pages/building-your-application/routing/authenticating):
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+// هنا يمكنك جلب وإرجاع المستخدم
+const useUser = () => ({ user: null, loading: false })
+
+export default function Page() {
+  const { user, loading } = useUser()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!(user || loading)) {
+      router.push('/login')
+    }
+  }, [user, loading])
+
+  return <p>جاري التوجيه...</p>
+}
+```
+
+#### إعادة تعيين الحالة بعد التنقل
+
+عند الانتقال إلى نفس الصفحة في Next.js، لن يتم **إعادة تعيين** حالة الصفحة افتراضيًا لأن React لا يفصل المكون ما لم يتغير المكون الأب.
+
+```jsx filename="pages/[slug].js"
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+  const [count, setCount] = useState(0)
+  return (
+    <div>
+      <h1>الصفحة: {router.query.slug}</h1>
+      <p>العدد: {count}</p>
+      <button onClick={() => setCount(count + 1)}>زيادة العدد</button>
+      <Link href="/one">واحد</Link> <Link href="/two">اثنان</Link>
+    </div>
+  )
+}
+```
+
+في المثال أعلاه، الانتقال بين `/one` و `/two` **لن** يعيد تعيين العدد. يتم الحفاظ على `useState` بين عمليات التصيير لأن مكون React الرئيسي، `Page`، هو نفسه.
+
+إذا كنت لا تريد هذا السلوك، لديك خياران:
+
+- تحديث كل حالة يدويًا باستخدام `useEffect`. في المثال أعلاه، يمكن أن يبدو كما يلي:
+
+  ```jsx
+  useEffect(() => {
+    setCount(0)
+  }, [router.query.slug])
+  ```
+
+- استخدم مفتاح React `key` [لإخبار React بإعادة تركيب المكون](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). للقيام بذلك لجميع الصفحات، يمكنك استخدام تطبيق مخصص:
+
+  ```jsx filename="pages/_app.js"
+  import { useRouter } from 'next/router'
+
+  export default function MyApp({ Component, pageProps }) {
+    const router = useRouter()
+    return <Component key={router.asPath} {...pageProps} />
+  }
+  ```
+
+#### مع كائن URL
+
+يمكنك استخدام كائن URL بنفس الطريقة التي يمكنك استخدامها لـ [`next/link`](/docs/pages/api-reference/components/link#with-url-object). يعمل لكل من معلمتي `url` و `as`:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function ReadMore({ post }) {
+  const router = useRouter()
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        router.push({
+          pathname: '/post/[pid]',
+          query: { pid: post.id },
+        })
+      }}
+    >
+      اضغط هنا لقراءة المزيد
+    </button>
+  )
+}
+```
+
+### router.replace
+
+مشابه لخاصية `replace` في [`next/link`](/docs/pages/api-reference/components/link)، `router.replace` سيمنع إضافة إدخال URL جديد إلى سجل `history`.
+
+```js
+router.replace(url, as, options)
+```
+
+- واجهة برمجة التطبيقات (API) لـ `router.replace` هي نفسها تمامًا لواجهة برمجة التطبيقات لـ [`router.push`](#routerpush).
+
+انظر إلى المثال التالي:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.replace('/home')}>
+      اضغط علي
+    </button>
+  )
+}
+```
+
+### router.prefetch
+
+جلب الصفحات مسبقًا لتحقيق انتقالات أسرع من جانب العميل. هذه الطريقة مفيدة فقط للتنقلات بدون [`next/link`](/docs/pages/api-reference/components/link)، حيث أن `next/link` يتولى جلب الصفحات مسبقًا تلقائيًا.
+
+> هذه ميزة للإنتاج فقط. لا يقوم Next.js بجلب الصفحات مسبقًا في وضع التطوير.
+
+```js
+router.prefetch(url, as, options)
+```
+
+- `url` - عنوان URL لجلبها مسبقًا، بما في ذلك المسارات الصريحة (مثل `/dashboard`) والمسارات الديناميكية (مثل `/product/[id]`)
+- `as` - مزخرف اختياري لـ `url`. قبل Next.js 9.5.3 كان هذا يستخدم لجلب المسارات الديناميكية مسبقًا.
+- `options` - كائن اختياري مع الحقول المسموح بها التالية:
+  - `locale` - يسمح بتوفير لغة مختلفة عن اللغة النشطة. إذا كانت `false`، يجب أن يتضمن `url` اللغة حيث لن يتم استخدام اللغة النشطة.
+
+لنفترض أن لديك صفحة تسجيل دخول، وبعد تسجيل الدخول، تقوم بتوجيه المستخدم إلى لوحة التحكم. لتلك الحالة، يمكننا جلب لوحة التحكم مسبقًا لتحقيق انتقال أسرع، كما في المثال التالي:
+
+```jsx
+import { useCallback, useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function Login() {
+  const router = useRouter()
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault()
+
+    fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        /* بيانات النموذج */
+      }),
+    }).then((res) => {
+      // قم بالانتقال السريع من جانب العميل إلى صفحة لوحة التحكم التي تم جلبها مسبقًا
+      if (res.ok) router.push('/dashboard')
+    })
+  }, [])
+
+  useEffect(() => {
+    // جلب صفحة لوحة التحكم مسبقًا
+    router.prefetch('/dashboard')
+  }, [router])
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* حقول النموذج */}
+      <button type="submit">تسجيل الدخول</button>
+    </form>
+  )
+}
+```
+
+### router.beforePopState
+
+في بعض الحالات (على سبيل المثال، إذا كنت تستخدم [خادم مخصص](/docs/pages/building-your-application/configuring/custom-server))، قد ترغب في الاستماع إلى [popstate](https://developer.mozilla.org/docs/Web/Events/popstate) والقيام بشيء ما قبل أن يتصرف الموجه بناءً عليه.
+
+```js
+router.beforePopState(cb)
+```
+
+- `cb` - الوظيفة التي تعمل على أحداث `popstate` الواردة. تستقبل الوظيفة حالة الحدث ككائن مع الخصائص التالية:
+  - `url`: `String` - المسار للحالة الجديدة. هذا عادةً اسم `page`
+  - `as`: `String` - عنوان URL الذي سيظهر في المتصفح
+  - `options`: `Object` - خيارات إضافية مرسلة بواسطة [router.push](#routerpush)
+
+إذا أعادت `cb` `false`، فلن يتعامل موجه Next.js مع `popstate`، وستكون مسؤولاً عن التعامل معه في تلك الحالة. انظر [تعطيل توجيه نظام الملفات](/docs/pages/building-your-application/configuring/custom-server#disabling-file-system-routing).
+
+يمكنك استخدام `beforePopState` لمعالجة الطلب، أو فرض تحديث SSR، كما في المثال التالي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.beforePopState(({ url, as, options }) => {
+      // أريد فقط السماح بهذين المسارين!
+      if (as !== '/' && as !== '/other') {
+        // اجعل SSR يصيير المسارات السيئة كـ 404.
+        window.location.href = as
+        return false
+      }
+
+      return true
+    })
+  }, [router])
+
+  return <p>مرحبًا بك في الصفحة</p>
+}
+```
+
+### router.back
+
+الرجوع في السجل. يعادل النقر على زر الرجوع في المتصفح. ينفذ `window.history.back()`.
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.back()}>
+      اضغط هنا للرجوع
+    </button>
+  )
+}
+```
+
+### router.reload
+
+إعادة تحميل عنوان URL الحالي. يعادل النقر على زر التحديث في المتصفح. ينفذ `window.location.reload()`.
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.reload()}>
+      اضغط هنا لإعادة التحميل
+    </button>
+  )
+}
+```
+
+### router.events
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مع مؤشر تحميل الصفحة (With a page loading indicator)](https://github.com/vercel/next.js/tree/canary/examples/with-loading)
+
+</details>
+
+يمكنك الاستماع إلى أحداث مختلفة تحدث داخل موجه Next.js. إليك قائمة بالأحداث المدعومة:
+
+- `routeChangeStart(url, { shallow })` - يتم تشغيله عندما يبدأ المسار في التغيير
+- `routeChangeComplete(url, { shallow })` - يتم تشغيله عندما يتغير المسار تمامًا
+- `routeChangeError(err, url, { shallow })` - يتم تشغيله عندما يكون هناك خطأ عند تغيير المسارات، أو يتم إلغاء تحميل المسار
+  - `err.cancelled` - يشير إلى ما إذا تم إلغاء التنقل
+- `beforeHistoryChange(url, { shallow })` - يتم تشغيله قبل تغيير سجل المتصفح
+- `hashChangeStart(url, { shallow })` - يتم تشغيله عندما يتغير الهاش ولكن ليس الصفحة
+- `hashChangeComplete(url, { shallow })` - يتم تشغيله عندما يتغير الهاش ولكن ليس الصفحة
+
+> **ملاحظة مهمة**: هنا `url` هو عنوان URL الذي يظهر في المتصفح، بما في ذلك [`basePath`](/docs/app/api-reference/next-config-js/basePath).
+
+على سبيل المثال، للاستماع إلى حدث الموجه `routeChangeStart`، افتح أو أنشئ `pages/_app.js` واشترك في الحدث، كما يلي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function MyApp({ Component, pageProps }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleRouteChange = (url, { shallow }) => {
+      console.log(
+        `التطبيق يتغير إلى ${url} ${
+          shallow ? 'مع' : 'بدون'
+        } التوجيه السطحي`
+      )
+    }
+
+    router.events.on('routeChangeStart', handleRouteChange)
+
+    // إذا تم فصل المكون، قم بإلغاء الاشتراك
+    // من الحدث باستخدام طريقة `off`:
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange)
+    }
+  }, [router])
+
+  return <Component {...pageProps} />
+}
+```
+
+> نستخدم [تطبيق مخصص](/docs/pages/building-your-application/routing/custom-app) (`pages/_app.js`) لهذا المثال للاشتراك في الحدث لأنه لا يتم فصله عند تنقلات الصفحة، ولكن يمكنك الاشتراك في أحداث الموجه في أي مكون في تطبيقك.
+
+يجب تسجيل أحداث الموجه عند تركيب مكون ([useEffect](https://react.dev/reference/react/useEffect) أو [componentDidMount](https://react.dev/reference/react/Component#componentdidmount) / [componentWillUnmount](https://react.dev/reference/react/Component#componentwillunmount)) أو بشكل إلزامي عند حدوث حدث.
+
+إذا تم إلغاء تحميل مسار (على سبيل المثال، بالنقر على رابطين بسرعة متتالية)، سيتم تشغيل `routeChangeError`. وسيحتوي `err` المرسل على خاصية `cancelled` مضبوطة على `true`، كما في المثال التالي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function MyApp({ Component, pageProps }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleRouteChangeError = (err, url) => {
+      if (err.cancelled) {
+        console.log(`تم إلغاء المسار إلى ${url}!`)
+      }
+    }
+
+    router.events.on('routeChangeError', handleRouteChangeError)
+
+    // إذا تم فصل المكون، قم بإلغاء الاشتراك
+    // من الحدث باستخدام طريقة `off`:
+    return () => {
+      router.events.off('routeChangeError', handleRouteChangeError)
+    }
+  }, [router])
+
+  return <Component {...pageProps} />
+}
+```
+
+## أخطاء ESLint المحتملة
+
+بعض الطرق المتاحة على كائن `router` تُرجع Promise. إذا كنت تستخدم قاعدة ESLint [no-floating-promises](https://typescript-eslint.io/rules/no-floating-promises)، يمكنك تعطيلها إما بشكل عام أو للأسطر المتأثرة فقط.
+
+إذا كانت تطبيقك يحتاج هذه القاعدة، يجب إما استخدام `void` مع الـ Promise - أو استخدام دالة `async`، انتظار الـ Promise باستخدام `await`، ثم استخدام `void` مع استدعاء الدالة. **هذا لا ينطبق عندما يتم استدعاء الطريقة من داخل معالج حدث `onClick`**.
+
+الطرق المتأثرة هي:
+
+- `router.push`
+- `router.replace`
+- `router.prefetch`
+
+### حلول محتملة
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+// هنا يمكنك جلب وإرجاع بيانات المستخدم
+const useUser = () => ({ user: null, loading: false })
+
+export default function Page() {
+  const { user, loading } = useUser()
+  const router = useRouter()
+
+  useEffect(() => {
+    // تعطيل التحقق من ESLint للسطر التالي - هذا هو الحل الأنظف
+    // eslint-disable-next-line no-floating-promises
+    router.push('/login')
+
+    // استخدام void مع الـ Promise المُعاد من router.push
+    if (!(user || loading)) {
+      void router.push('/login')
+    }
+    // أو استخدام دالة async، انتظار الـ Promise باستخدام await، ثم استخدام void مع استدعاء الدالة
+    async function handleRouteChange() {
+      if (!(user || loading)) {
+        await router.push('/login')
+      }
+    }
+    void handleRouteChange()
+  }, [user, loading])
+
+  return <p>جاري التوجيه...</p>
+}
+```
+
+## withRouter
+
+إذا لم يكن [`useRouter`](#router-object) مناسبًا لك، يمكن لـ `withRouter` أيضًا إضافة نفس [كائن `router`](#router-object) إلى أي مكون.
+
+### طريقة الاستخدام
+
+```jsx
+import { withRouter } from 'next/router'
+
+function Page({ router }) {
+  return <p>{router.pathname}</p>
+}
+
+export default withRouter(Page)
+```
+
+### TypeScript
+
+لاستخدام مكونات الفئة مع `withRouter`، يجب أن يقبل المكون خاصية router:
+
+```tsx
+import React from 'react'
+import { withRouter, NextRouter } from 'next/router'
+
+interface WithRouterProps {
+  router: NextRouter
+}
+
+interface MyComponentProps extends WithRouterProps {}
+
+class MyComponent extends React.Component<MyComponentProps> {
+  render() {
+    return <p>{this.props.router.pathname}</p>
+  }
+}
+
+export default withRouter(MyComponent)
+```
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/assetPrefix.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/assetPrefix.mdx
new file mode 100644
index 00000000..3404f76b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/assetPrefix.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:54.757Z
+title: assetPrefix
+description: تعلم كيفية استخدام خيار التكوين assetPrefix لضبط شبكة توصيل المحتوى (CDN) الخاصة بك.
+source: app/api-reference/next-config-js/assetPrefix
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/basePath.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/basePath.mdx
new file mode 100644
index 00000000..afb2bb1b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/basePath.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:53.597Z
+title: basePath
+description: استخدام `basePath` لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق معين.
+source: app/api-reference/next-config-js/basePath
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/compress.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/compress.mdx
new file mode 100644
index 00000000..779651c7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/compress.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:49.581Z
+title: ضغط
+description: يوفر Next.js ضغط gzip لضغط المحتوى المعروض والملفات الثابتة، وهو يعمل فقط مع هدف الخادم. تعلم المزيد حول هذا الموضوع هنا.
+source: app/api-reference/next-config-js/compress
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/devIndicators.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/devIndicators.mdx
new file mode 100644
index 00000000..be6356b8
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/devIndicators.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:49.960Z
+title: مؤشرات التطوير (devIndicators)
+description: تتضمن الصفحات المُحسّنة مؤشرًا لإعلامك إذا كانت تخضع للتحسين الثابت. يمكنك إلغاء تفعيله هنا.
+source: app/api-reference/next-config-js/devIndicators
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/distDir.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/distDir.mdx
new file mode 100644
index 00000000..8583e225
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/distDir.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:47.620Z
+title: distDir
+description: ضع دليل بناء مخصصًا للاستخدام بدلاً من الدليل الافتراضي .next.
+source: app/api-reference/next-config-js/distDir
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/env.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/env.mdx
new file mode 100644
index 00000000..de5904c5
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/env.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:45.749Z
+title: المتغيرات البيئية (env)
+description: تعلم كيفية إضافة المتغيرات البيئية والوصول إليها في تطبيق Next.js أثناء وقت البناء.
+source: app/api-reference/next-config-js/env
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/eslint.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/eslint.mdx
new file mode 100644
index 00000000..dd7b5ec2
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/eslint.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:47.825Z
+title: eslint
+description: يبلغ Next.js عن أخطاء وتحذيرات ESLint تلقائيًا أثناء عمليات البناء. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+source: app/api-reference/next-config-js/eslint
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/exportPathMap.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/exportPathMap.mdx
new file mode 100644
index 00000000..f41cde29
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/exportPathMap.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:41.002Z
+title: exportPathMap
+description: تخصيص الصفحات التي سيتم تصديرها كملفات HTML عند استخدام `next export`.
+source: app/api-reference/next-config-js/exportPathMap
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/generateBuildId.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/generateBuildId.mdx
new file mode 100644
index 00000000..80dcf516
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/generateBuildId.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:40.255Z
+title: generateBuildId
+description: تكوين معرّف البناء الذي يُستخدم لتحديد البناء الحالي الذي يتم تقديم التطبيق من خلاله.
+source: app/api-reference/next-config-js/generateBuildId
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/generateEtags.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/generateEtags.mdx
new file mode 100644
index 00000000..112b8768
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/generateEtags.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:39.582Z
+title: generateEtags
+description: يقوم Next.js بإنشاء etags افتراضيًا لكل صفحة. تعلم المزيد حول كيفية تعطيل إنشاء etags هنا.
+source: app/api-reference/next-config-js/generateEtags
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/headers.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/headers.mdx
new file mode 100644
index 00000000..7985c3ec
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/headers.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:37.795Z
+title: الرؤوس (headers)
+description: إضافة رؤوس HTTP مخصصة لتطبيق Next.js الخاص بك.
+source: app/api-reference/next-config-js/headers
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/httpAgentOptions.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/httpAgentOptions.mdx
new file mode 100644
index 00000000..c7905bfb
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/httpAgentOptions.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:46.538Z
+title: خيارات وكيل HTTP (httpAgentOptions)
+description: يستخدم Next.js HTTP Keep-Alive بشكل تلقائي افتراضيًا. تعلم المزيد حول كيفية تعطيل HTTP Keep-Alive هنا.
+source: app/api-reference/next-config-js/httpAgentOptions
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/images.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/images.mdx
new file mode 100644
index 00000000..0652cd2d
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/images.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:31.829Z
+title: الصور
+description: التخصيص المتقدم لملف تحميل `next/image`
+source: app/api-reference/next-config-js/images
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/index.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/index.mdx
new file mode 100644
index 00000000..5fc34208
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:32.160Z
+title: خيارات ملف next.config.js
+description: تعرف على الخيارات المتاحة في ملف next.config.js لموجه الصفحات (Pages Router).
+source: app/api-reference/next-config-js
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/onDemandEntries.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/onDemandEntries.mdx
new file mode 100644
index 00000000..ff593680
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/onDemandEntries.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:29.804Z
+title: onDemandEntries
+description: تكوين كيفية تصريف Next.js والحفاظ في الذاكرة للصفحات التي تم إنشاؤها في وضع التطوير.
+source: app/api-reference/next-config-js/onDemandEntries
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/output.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/output.mdx
new file mode 100644
index 00000000..43257c52
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/output.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:29.688Z
+title: الإخراج (output)
+description: يتتبع Next.js تلقائيًا الملفات المطلوبة لكل صفحة لتسهيل نشر تطبيقك. تعرف هنا على كيفية عمله.
+source: app/api-reference/next-config-js/output
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/pageExtensions.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/pageExtensions.mdx
new file mode 100644
index 00000000..835b8dac
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/pageExtensions.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:23.484Z
+title: ملحقات الصفحة (pageExtensions)
+description: توسيع ملحقات الصفحة الافتراضية المستخدمة من قبل Next.js عند تحليل الصفحات في موجه الصفحات (Pages Router).
+source: app/api-reference/next-config-js/pageExtensions
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/poweredByHeader.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/poweredByHeader.mdx
new file mode 100644
index 00000000..30ad7b0b
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/poweredByHeader.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:22.170Z
+title: رأس poweredByHeader
+description: سيضيف Next.js رأس `x-powered-by` افتراضيًا. تعلم كيفية إلغاء تفعيله هنا.
+source: app/api-reference/next-config-js/poweredByHeader
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/productionBrowserSourceMaps.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/productionBrowserSourceMaps.mdx
new file mode 100644
index 00000000..3a82e7d9
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/productionBrowserSourceMaps.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:21.508Z
+title: productionBrowserSourceMaps
+description: تمكين إنشاء خرائط المصدر (source maps) للمتصفح أثناء بناء الإنتاج (production build).
+source: app/api-reference/next-config-js/productionBrowserSourceMaps
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/reactStrictMode.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/reactStrictMode.mdx
new file mode 100644
index 00000000..8ff5ec02
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/reactStrictMode.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:21.476Z
+title: reactStrictMode
+description: أصبح وقت تشغيل Next.js بالكامل متوافقًا مع الوضع الصارم (Strict Mode). تعلم كيفية الاشتراك
+source: app/api-reference/next-config-js/reactStrictMode
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/redirects.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/redirects.mdx
new file mode 100644
index 00000000..d748e6b7
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/redirects.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:14.830Z
+title: إعادة التوجيه (redirects)
+description: إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.
+source: app/api-reference/next-config-js/redirects
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/rewrites.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/rewrites.mdx
new file mode 100644
index 00000000..57c2ac44
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/rewrites.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:13.846Z
+title: إعادة التوجيه (rewrites)
+description: إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.
+source: app/api-reference/next-config-js/rewrites
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/runtime-configuration.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/runtime-configuration.mdx
new file mode 100644
index 00000000..1b972fab
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/runtime-configuration.mdx
@@ -0,0 +1,58 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:33.949Z
+title: تكوين وقت التشغيل (Runtime Config)
+description: إضافة تكوين وقت تشغيل للعميل والخادم إلى تطبيق Next.js الخاص بك.
+---
+
+> **تحذير**: تعتبر هذه الميزة قديمة ولا تعمل مع [التحسين الثابت التلقائي (Automatic Static Optimization)](/docs/pages/building-your-application/rendering/automatic-static-optimization)، أو [تتبع ملفات الإخراج (Output File Tracing)](/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files)، أو [مكونات خادم React (React Server Components)](/docs/app/building-your-application/rendering/server-components). يرجى استخدام [متغيرات البيئة (environment variables)](/docs/pages/building-your-application/configuring/environment-variables) بدلاً من ذلك لتجنب تكاليف التهيئة.
+
+لإضافة تكوين وقت التشغيل إلى تطبيقك، افتح ملف `next.config.js` وأضف تكوينات `publicRuntimeConfig` و `serverRuntimeConfig`:
+
+```js filename="next.config.js"
+module.exports = {
+  serverRuntimeConfig: {
+    // سيكون متاحًا فقط على جانب الخادم
+    mySecret: 'secret',
+    secondSecret: process.env.SECOND_SECRET, // تمرير عبر متغيرات البيئة
+  },
+  publicRuntimeConfig: {
+    // سيكون متاحًا على كل من الخادم والعميل
+    staticFolder: '/static',
+  },
+}
+```
+
+ضع أي تكوين وقت تشغيل خاص بالخادم فقط تحت `serverRuntimeConfig`.
+
+أي شيء يمكن الوصول إليه من كود جانب العميل والخادم يجب وضعه تحت `publicRuntimeConfig`.
+
+> أي صفحة تعتمد على `publicRuntimeConfig` **يجب** أن تستخدم `getInitialProps` أو `getServerSideProps` أو يجب أن يحتوي تطبيقك على [تطبيق مخصص (Custom App)](/docs/pages/building-your-application/routing/custom-app) مع `getInitialProps` للانسحاب من [التحسين الثابت التلقائي (Automatic Static Optimization)](/docs/pages/building-your-application/rendering/automatic-static-optimization). لن يكون تكوين وقت التشغيل متاحًا لأي صفحة (أو مكون في صفحة) بدون تقديم من جانب الخادم.
+
+للوصول إلى تكوينات وقت التشغيل في تطبيقك، استخدم `next/config` كما يلي:
+
+```jsx
+import getConfig from 'next/config'
+import Image from 'next/image'
+
+// يحتوي فقط على serverRuntimeConfig و publicRuntimeConfig
+const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+// سيكون متاحًا فقط على جانب الخادم
+console.log(serverRuntimeConfig.mySecret)
+// سيكون متاحًا على كل من جانب الخادم والعميل
+console.log(publicRuntimeConfig.staticFolder)
+
+function MyImage() {
+  return (
+    <div>
+      <Image
+        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
+        alt="logo"
+        layout="fill"
+      />
+    </div>
+  )
+}
+
+export default MyImage
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/trailingSlash.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/trailingSlash.mdx
new file mode 100644
index 00000000..ac30c131
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/trailingSlash.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:13.134Z
+title: trailingSlash
+description: تكوين صفحات Next.js للتعامل مع أو بدون شرطة مائلة نهائية.
+source: app/api-reference/next-config-js/trailingSlash
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/transpilePackages.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/transpilePackages.mdx
new file mode 100644
index 00000000..6659a58a
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/transpilePackages.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:10.765Z
+title: transpilePackages
+description: تحويل وتجميع التبعيات تلقائيًا من الحزم المحلية (مثل مستودعات أحادية) أو من التبعيات الخارجية (`node_modules`).
+source: app/api-reference/next-config-js/transpilePackages
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/turbo.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/turbo.mdx
new file mode 100644
index 00000000..05e81db1
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/turbo.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:06.074Z
+title: turbo (تجريبي)
+nav_title: turbo
+description: تكوين Next.js مع خيارات خاصة بـ Turbopack
+source: app/api-reference/next-config-js/turbo
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/typescript.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/typescript.mdx
new file mode 100644
index 00000000..c3ae2b6f
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/typescript.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:06.812Z
+title: TypeScript
+description: يبلغ Next.js عن أخطاء TypeScript بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+source: app/api-reference/next-config-js/typescript
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/urlImports.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/urlImports.mdx
new file mode 100644
index 00000000..c45cf1a3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/urlImports.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:05.754Z
+title: استيراد من عنوان URL (urlImports)
+description: تكوين Next.js للسماح باستيراد الوحدات من عناوين URL خارجية (تجريبي).
+source: app/api-reference/next-config-js/urlImports
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/webVitalsAttribution.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/webVitalsAttribution.mdx
new file mode 100644
index 00000000..eb06529c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/webVitalsAttribution.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:48:58.109Z
+title: webVitalsAttribution
+description: تعلم كيفية استخدام خيار webVitalsAttribution لتحديد مصدر مشكلات مؤشرات ويب الأساسية (Web Vitals).
+source: app/api-reference/next-config-js/webVitalsAttribution
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/webpack.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/webpack.mdx
new file mode 100644
index 00000000..18228395
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/03-next-config-js/webpack.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:48:57.848Z
+title: تهيئة Webpack المخصصة
+nav_title: webpack
+description: تعلم كيفية تخصيص تهيئة webpack المستخدمة من قبل Next.js
+source: app/api-reference/next-config-js/webpack
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/04-create-next-app.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/04-create-next-app.mdx
new file mode 100644
index 00000000..c5f5bd28
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/04-create-next-app.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:59.356Z
+title: create-next-app
+description: create-next-app
+source: app/api-reference/create-next-app
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/05-next-cli.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/05-next-cli.mdx
new file mode 100644
index 00000000..68974558
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/05-next-cli.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:57.551Z
+title: واجهة سطر الأوامر (CLI) لـ Next.js
+description: واجهة سطر الأوامر (CLI) لـ Next.js
+source: app/api-reference/next-cli
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/06-edge.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/06-edge.mdx
new file mode 100644
index 00000000..43e79d43
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/06-edge.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:55.071Z
+title: وقت تشغيل الحافة (Edge Runtime)
+description: مرجع API لوقت تشغيل الحافة (Edge Runtime).
+source: app/api-reference/edge
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/02-api-reference/index.mdx b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/index.mdx
new file mode 100644
index 00000000..c4e12e45
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/02-api-reference/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:50.163Z
+title: مرجع API
+description: مرجع API لـ Next.js لموجه الصفحات (Pages Router).
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/03-pages/index.mdx b/apps/docs/content/ar/docs/13/03-pages/index.mdx
new file mode 100644
index 00000000..572a5636
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/03-pages/index.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:16:13.264Z
+title: موجه الصفحات (Pages Router)
+description: قبل الإصدار 13 من Next.js، كان موجه الصفحات (Pages Router) هو الطريقة الرئيسية لإنشاء المسارات في Next.js باستخدام موجه نظام ملفات بديهي.
+---
+
+قبل الإصدار 13 من Next.js، كان موجه الصفحات (Pages Router) هو الطريقة الرئيسية لإنشاء المسارات في Next.js. حيث كان يستخدم موجه نظام ملفات بديهي لربط كل ملف بمسار معين. لا يزال موجه الصفحات مدعومًا في الإصدارات الأحدث من Next.js، لكننا نوصي بالانتقال إلى [موجه التطبيق الجديد (App Router)](/docs/app) للاستفادة من أحدث ميزات React.
+
+استخدم هذا القسم من الوثائق للتطبيقات الحالية التي تستخدم موجه الصفحات (Pages Router).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/04-architecture/accessibility.mdx b/apps/docs/content/ar/docs/13/04-architecture/accessibility.mdx
new file mode 100644
index 00000000..5cbfd92c
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/04-architecture/accessibility.mdx
@@ -0,0 +1,36 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:16:33.231Z
+title: إمكانية الوصول
+description: ميزات إمكانية الوصول المدمجة في Next.js.
+---
+
+فريق Next.js ملتزم بجعل الإطار متاحًا لجميع المطورين (ومستخدميهم النهائيين). من خلال إضافة ميزات إمكانية الوصول إلى Next.js بشكل افتراضي، نهدف إلى جعل الويب أكثر شمولاً للجميع.
+
+## إعلانات المسار
+
+عند الانتقال بين الصفحات المعروضة على الخادم (مثل استخدام وسم `<a href>`)، تقوم قارئات الشاشة وغيرها من تقنيات المساعدة بالإعلان عن عنوان الصفحة عند تحميلها حتى يفهم المستخدمون أن الصفحة قد تغيرت.
+
+بالإضافة إلى التنقل التقليدي بين الصفحات، يدعم Next.js أيضًا الانتقال من جانب العميل لتحسين الأداء (باستخدام `next/link`). لضمان إعلان انتقالات جانب العميل أيضًا لتقنيات المساعدة، يتضمن Next.js مُعلن المسار بشكل افتراضي.
+
+يبحث مُعلن المسار في Next.js عن اسم الصفحة للإعلان عنه عن طريق فحص `document.title` أولاً، ثم عنصر `<h1>`، وأخيرًا مسار URL. لتجربة المستخدم الأكثر سهولة في الوصول، تأكد من أن كل صفحة في تطبيقك لها عنوان فريد ووصفي.
+
+## التدقيق اللغوي
+
+يوفر Next.js [تجربة ESLint متكاملة](/docs/pages/building-your-application/configuring/eslint) جاهزة للاستخدام، بما في ذلك قواعد مخصصة لـ Next.js. بشكل افتراضي، يتضمن Next.js `eslint-plugin-jsx-a11y` للمساعدة في اكتشاف مشكلات إمكانية الوصول مبكرًا، بما في ذلك التحذير من:
+
+- [aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [aria-proptypes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-proptypes.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [aria-unsupported-elements](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-unsupported-elements.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [role-has-required-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-has-required-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [role-supports-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-supports-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+
+على سبيل المثال، تساعد هذه الإضافة في التأكد من إضافة نص بديل لوسوم `img`، واستخدام سمات `aria-*` الصحيحة، واستخدام سمات `role` الصحيحة، والمزيد.
+
+## موارد إمكانية الوصول
+
+- [قائمة التحقق من WCAG من WebAIM](https://webaim.org/standards/wcag/checklist)
+- [إرشادات WCAG 2.1](https://www.w3.org/TR/WCAG21/)
+- [مشروع A11y](https://www.a11yproject.com/)
+- تحقق من [نسب تباين الألوان](https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) بين عناصر المقدمة والخلفية
+- استخدم [`prefers-reduced-motion`](https://web.dev/prefers-reduced-motion/) عند العمل مع الرسوم المتحركة
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/04-architecture/fast-refresh.mdx b/apps/docs/content/ar/docs/13/04-architecture/fast-refresh.mdx
new file mode 100644
index 00000000..9b270205
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/04-architecture/fast-refresh.mdx
@@ -0,0 +1,66 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:16:39.327Z
+title: التحديث السريع (Fast Refresh)
+description: التحديث السريع هو تجربة إعادة تحميل الساخن للوحدات التي تمنحك ملاحظات فورية على التعديلات التي تجريها على مكونات React.
+---
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [عرض توضيحي للتحديث السريع](https://github.com/vercel/next.js/tree/canary/examples/fast-refresh-demo)
+
+</details>
+
+التحديث السريع هو ميزة في Next.js تمنحك ملاحظات فورية على التعديلات التي تجريها على مكونات React. التحديث السريع مفعل افتراضيًا في جميع تطبيقات Next.js على الإصدار **9.4 أو أحدث**. مع تفعيل التحديث السريع في Next.js، يجب أن تكون معظم التعديلات مرئية في غضون ثانية **دون فقدان حالة المكون**.
+
+## كيف يعمل
+
+- إذا قمت بتحرير ملف **يصدّر فقط مكونات React**، فسيقوم التحديث السريع بتحديث الكود لهذا الملف فقط، وإعادة عرض مكونك. يمكنك تحرير أي شيء في هذا الملف، بما في ذلك الأنماط، منطق العرض، معالجات الأحداث، أو التأثيرات.
+- إذا قمت بتحرير ملف يحتوي على تصديرات ليست مكونات React، فسيعيد التحديث السريع تشغيل هذا الملف والملفات الأخرى التي تستورده. لذا إذا كان كل من `Button.js` و `Modal.js` يستوردان `theme.js`، فإن تحرير `theme.js` سيحدث كلا المكونين.
+- أخيرًا، إذا قمت **بتحرير ملف** يتم **استيراده بواسطة ملفات خارج شجرة React**، فسيعود التحديث السريع **إلى إعادة تحميل كاملة**. قد يكون لديك ملف يعرض مكون React ولكنه أيضًا يصدر قيمة يتم استيرادها بواسطة **مكون غير React**. على سبيل المثال، ربما يصدر مكونك أيضًا ثابتًا، ويقوم ملف خدمة غير React باستيراده. في هذه الحالة، فكر في نقل الثابت إلى ملف منفصل واستيراده في كلا الملفين. هذا سيعيد تفعيل عمل التحديث السريع. يمكن حل الحالات الأخرى عادة بطريقة مماثلة.
+
+## مرونة الأخطاء
+
+### أخطاء الصياغة (Syntax Errors)
+
+إذا قمت بخطأ في الصياغة أثناء التطوير، يمكنك إصلاحه وحفظ الملف مرة أخرى. سيختفي الخطأ تلقائيًا، لذا لن تحتاج إلى إعادة تحميل التطبيق. **لن تفقد حالة المكون**.
+
+### أخطاء التنفيذ (Runtime Errors)
+
+إذا قمت بخطأ يؤدي إلى حدوث خطأ أثناء التنفيذ داخل مكونك، فستستقبلك نافذة سياقية. إصلاح الخطأ سيؤدي إلى إغلاق النافذة تلقائيًا، دون إعادة تحميل التطبيق.
+
+سيتم الاحتفاظ بحالة المكون إذا لم يحدث الخطأ أثناء العرض. إذا حدث الخطأ أثناء العرض، سيعيد React تحميل تطبيقك باستخدام الكود المحدث.
+
+إذا كان لديك [حدود أخطاء (error boundaries)](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) في تطبيقك (وهو أمر جيد للفشل بشكل أنيق في الإنتاج)، فسيحاولون إعادة العرض عند التحرير التالي بعد خطأ في العرض. هذا يعني أن وجود حد أخطاء يمكن أن يمنعك من العودة دائمًا إلى حالة التطبيق الجذرية. ومع ذلك، تذكر أن حدود الأخطاء لا يجب أن تكون _دقيقة جدًا_. يتم استخدامها بواسطة React في الإنتاج، ويجب دائمًا تصميمها عمدًا.
+
+## القيود
+
+يحاول التحديث السريع الحفاظ على حالة React المحلية في المكون الذي تقوم بتحريره، ولكن فقط إذا كان ذلك آمنًا. فيما يلي بعض الأسباب التي قد تجعلك ترى أن الحالة المحلية يتم إعادة تعيينها في كل تحرير للملف:
+
+- لا يتم الحفاظ على الحالة المحلية لمكونات الفئة (فقط مكونات الدوال و Hooks تحافظ على الحالة).
+- قد يحتوي الملف الذي تقوم بتحريره على تصديرات _أخرى_ بالإضافة إلى مكون React.
+- في بعض الأحيان، قد يصدر الملف نتيجة استدعاء مكون ذو ترتيب أعلى مثل `HOC(WrappedComponent)`. إذا كان المكون المرجع عبارة عن فئة، فسيتم إعادة تعيين حالته.
+- دوال السهم المجهولة مثل `export default () => <div />;` تسبب عدم الحفاظ على حالة المكون المحلية في التحديث السريع. بالنسبة لقواعد الكود الكبيرة، يمكنك استخدام [تحويل الكود `name-default-component`](/docs/pages/building-your-application/upgrading/codemods#name-default-component).
+
+كلما تحولت قاعدة الكود الخاصة بك إلى مكونات دوال و Hooks، يمكنك توقع الحفاظ على الحالة في المزيد من الحالات.
+
+## نصائح
+
+- يحافظ التحديث السريع على حالة React المحلية في مكونات الدوال (و Hooks) افتراضيًا.
+- في بعض الأحيان قد ترغب في _إجبار_ إعادة تعيين الحالة، وإعادة تحميل المكون. على سبيل المثال، يمكن أن يكون هذا مفيدًا إذا كنت تضبط رسوم متحركة تحدث فقط عند التحميل. للقيام بذلك، يمكنك إضافة `// @refresh reset` في أي مكان في الملف الذي تقوم بتحريره. هذا التوجيه محلي للملف، ويوجه التحديث السريع لإعادة تحميل المكونات المعرفة في هذا الملف في كل تحرير.
+- يمكنك وضع `console.log` أو `debugger;` في المكونات التي تقوم بتحريرها أثناء التطوير.
+- تذكر أن عمليات الاستيراد حساسة لحالة الأحرف. يمكن أن يفشل كل من التحديث السريع والكامل، عندما لا يتطابق استيرادك مع اسم الملف الفعلي.
+  على سبيل المثال، `'./header'` مقابل `'./Header'`.
+
+## التحديث السريع و Hooks
+
+عندما يكون ذلك ممكنًا، يحاول التحديث السريع الحفاظ على حالة مكونك بين التعديلات. على وجه الخصوص، تحافظ `useState` و `useRef` على قيمها السابقة طالما لم تقم بتغيير وسائطها أو ترتيب استدعاءات الـ Hook.
+
+الـ Hooks ذات التبعيات - مثل `useEffect` و `useMemo` و `useCallback` - ستقوم _دائمًا_ بالتحديث أثناء التحديث السريع. سيتم تجاهل قائمة تبعياتها أثناء حدوث التحديث السريع.
+
+على سبيل المثال، عندما تقوم بتحرير `useMemo(() => x * 2, [x])` إلى `useMemo(() => x * 10, [x])`، سيعيد التشغيل حتى لو لم يتغير `x` (التبعية). إذا لم يفعل React ذلك، فلن ينعكس تعديلك على الشاشة!
+
+في بعض الأحيان، يمكن أن يؤدي هذا إلى نتائج غير متوقعة. على سبيل المثال، حتى `useEffect` مع مصفوفة فارغة من التبعيات ستظل تعيد التشغيل مرة واحدة أثناء التحديث السريع.
+
+ومع ذلك، فإن كتابة كود مقاوم لإعادة تشغيل `useEffect` العرضية هو ممارسة جيدة حتى بدون التحديث السريع. سيجعل من الأسهل عليك إدخال تبعيات جديدة إليه لاحقًا وهو مفروض بواسطة [وضع React الصارم (React Strict Mode)](/docs/pages/api-reference/next-config-js/reactStrictMode)، والذي نوصي بشدة بتفعيله.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/04-architecture/index.mdx b/apps/docs/content/ar/docs/13/04-architecture/index.mdx
new file mode 100644
index 00000000..4d2488a3
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/04-architecture/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:15:20.777Z
+title: البنية (Architecture)
+description: كيفية عمل Next.js
+---
+
+تعرف على بنية Next.js وكيفية عملها تحت الغطاء.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/04-architecture/nextjs-compiler.mdx b/apps/docs/content/ar/docs/13/04-architecture/nextjs-compiler.mdx
new file mode 100644
index 00000000..fd745d62
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/04-architecture/nextjs-compiler.mdx
@@ -0,0 +1,313 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:40.247Z
+title: مترجم Next.js
+description: مترجم Next.js، مكتوب بلغة Rust، يقوم بتحويل وتصغير تطبيق Next.js الخاص بك.
+---
+
+مترجم Next.js، المكتوب بلغة Rust باستخدام [SWC](http://swc.rs/)، يسمح لـ Next.js بتحويل وتصغير كود JavaScript الخاص بك للإنتاج. هذا يحل محل Babel للملفات الفردية و Terser لتصغير حزم الإخراج.
+
+التجميع باستخدام مترجم Next.js أسرع بـ 17 مرة من Babel ومفعل افتراضيًا منذ إصدار Next.js 12. إذا كان لديك تكوين Babel موجود أو تستخدم [ميزات غير مدعومة](#unsupported-features)، فسيتم استثناء تطبيقك من مترجم Next.js والاستمرار في استخدام Babel.
+
+## لماذا SWC؟
+
+[SWC](http://swc.rs/) هو منصة قابلة للتوسيع مبنية على Rust لأدوات المطورين السريعة من الجيل التالي.
+
+يمكن استخدام SWC للتجميع والتصغير والتعبئة وغير ذلك - وهو مصمم ليكون قابلاً للتوسيع. إنه شيء يمكنك استدعاؤه لتنفيذ تحويلات الأكواد (سواء كانت مدمجة أو مخصصة). يتم تنفيذ هذه التحويلات من خلال أدوات عالية المستوى مثل Next.js.
+
+اخترنا البناء على SWC لعدة أسباب:
+
+- **القابلية للتوسيع:** يمكن استخدام SWC كـ Crate داخل Next.js، دون الحاجة إلى تفرع المكتبة أو الالتفاف حول قيود التصميم.
+- **الأداء:** تمكنا من تحقيق تحديث أسرع بـ ~3 مرات وبناء أسرع بـ ~5 مرات في Next.js عن طريق التحول إلى SWC، مع وجود مجال لمزيد من التحسينات قيد التقدم.
+- **WebAssembly:** دعم Rust لـ WASM ضروري لدعم جميع المنصات الممكنة وأخذ تطوير Next.js في كل مكان.
+- **المجتمع:** مجتمع Rust والنظام البيئي مذهلان وما زالا ينموان.
+
+## الميزات المدعومة
+
+### المكونات ذات الأنماط (Styled Components)
+
+نعمل على نقل `babel-plugin-styled-components` إلى مترجم Next.js.
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم قم بتحديث ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    // انظر https://styled-components.com/docs/tooling#babel-plugin لمزيد من المعلومات حول الخيارات.
+    styledComponents: boolean | {
+      // مفعل افتراضيًا في وضع التطوير، معطل في الإنتاج لتقليل حجم الملف،
+      // تعيين هذا سيتجاوز الافتراضي لجميع البيئات.
+      displayName?: boolean,
+      // مفعل افتراضيًا.
+      ssr?: boolean,
+      // مفعل افتراضيًا.
+      fileName?: boolean,
+      // فارغ افتراضيًا.
+      topLevelImportPaths?: string[],
+      // الافتراضي هو ["index"].
+      meaninglessFileNames?: string[],
+      // مفعل افتراضيًا.
+      cssProp?: boolean,
+      // فارغ افتراضيًا.
+      namespace?: string,
+      // غير مدعوم بعد.
+      minify?: boolean,
+      // غير مدعوم بعد.
+      transpileTemplateLiterals?: boolean,
+      // غير مدعوم بعد.
+      pure?: boolean,
+    },
+  },
+}
+```
+
+`minify`، `transpileTemplateLiterals` و `pure` لم يتم تنفيذها بعد. يمكنك متابعة التقدم [هنا](https://github.com/vercel/next.js/issues/30802). تحويلات `ssr` و `displayName` هي المتطلبات الرئيسية لاستخدام `styled-components` في Next.js.
+
+### Jest
+
+يقوم مترجم Next.js بتحويل اختباراتك وتبسيط تكوين Jest مع Next.js بما في ذلك:
+
+- المحاكاة التلقائية لاستيرادات `.css`، `.module.css` (والمتغيرات `.scss` الخاصة بها)، واستيرادات الصور
+- إعداد `transform` تلقائيًا باستخدام SWC
+- تحميل `.env` (وجميع المتغيرات) إلى `process.env`
+- تجاهل `node_modules` من تحويل الاختبارات والتحويلات
+- تجاهل `.next` من تحويل الاختبارات
+- تحميل `next.config.js` للعلامات التي تمكن تحويلات SWC التجريبية
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم قم بتحديث ملف `jest.config.js` الخاص بك:
+
+```js filename="jest.config.js"
+const nextJest = require('next/jest')
+
+// توفير المسار إلى تطبيق Next.js الخاص بك مما سيمكن تحميل next.config.js وملفات .env
+const createJestConfig = nextJest({ dir: './' })
+
+// أي تكوين مخصص تريد تمريره إلى Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+}
+
+// يتم تصدير createJestConfig بهذه الطريقة لضمان أن next/jest يمكنه تحميل تكوين Next.js، وهو غير متزامن
+module.exports = createJestConfig(customJestConfig)
+```
+
+### Relay
+
+لتمكين دعم [Relay](https://relay.dev/):
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    relay: {
+      // يجب أن يتطابق هذا مع relay.config.js
+      src: './',
+      artifactDirectory: './__generated__',
+      language: 'typescript',
+      eagerEsModules: false,
+    },
+  },
+}
+```
+
+> **جيد للمعرفة**: في Next.js، جميع ملفات JavaScript في دليل `pages` تعتبر مسارات. لذا، بالنسبة لـ `relay-compiler` ستحتاج إلى تحديد إعدادات تكوين `artifactDirectory` خارج `pages`، وإلا فإن `relay-compiler` سينشئ ملفات بجانب الملف المصدر في دليل `__generated__`، وسيعتبر هذا الملف مسارًا، مما سيكسر بناء الإنتاج.
+
+### إزالة خصائص React
+
+يسمح بإزالة خصائص JSX. يستخدم هذا غالبًا للاختبار. مشابه لـ `babel-plugin-react-remove-properties`.
+
+لإزالة الخصائص التي تطابق التعبير العادي الافتراضي `^data-test`:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    reactRemoveProperties: true,
+  },
+}
+```
+
+لإزالة الخصائص المخصصة:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    // التعبيرات العادية المعرفة هنا تتم معالجتها في Rust لذا فإن التركيب مختلف عن
+    // JavaScript `RegExp`s. انظر https://docs.rs/regex.
+    reactRemoveProperties: { properties: ['^data-custom$'] },
+  },
+}
+```
+
+### إزالة Console
+
+يسمح هذا التحويل بإزالة جميع استدعاءات `console.*` في كود التطبيق (وليس `node_modules`). مشابه لـ `babel-plugin-transform-remove-console`.
+
+إزالة جميع استدعاءات `console.*`:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    removeConsole: true,
+  },
+}
+```
+
+إزالة إخراج `console.*` باستثناء `console.error`:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    removeConsole: {
+      exclude: ['error'],
+    },
+  },
+}
+```
+
+### المُزخرفات القديمة (Legacy Decorators)
+
+سيكتشف Next.js تلقائيًا `experimentalDecorators` في `jsconfig.json` أو `tsconfig.json`. تُستخدم المُزخرفات القديمة عادةً مع إصدارات أقدم من مكتبات مثل `mobx`.
+
+هذه العلامة مدعومة فقط لتوافق مع التطبيقات الموجودة. لا نوصي باستخدام المُزخرفات القديمة في التطبيقات الجديدة.
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم قم بتحديث ملف `jsconfig.json` أو `tsconfig.json` الخاص بك:
+
+```js
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}
+```
+
+### مصدر الاستيراد (importSource)
+
+سيكتشف Next.js تلقائيًا `jsxImportSource` في `jsconfig.json` أو `tsconfig.json` وسيطبق ذلك. يستخدم هذا عادةً مع مكتبات مثل [Theme UI](https://theme-ui.com).
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم قم بتحديث ملف `jsconfig.json` أو `tsconfig.json` الخاص بك:
+
+```js
+{
+  "compilerOptions": {
+    "jsxImportSource": "theme-ui"
+  }
+}
+```
+
+### Emotion
+
+نعمل على نقل `@emotion/babel-plugin` إلى مترجم Next.js.
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم قم بتحديث ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+
+module.exports = {
+  compiler: {
+    emotion: boolean | {
+      // الافتراضي هو true. سيتم تعطيله عندما يكون نوع البناء هو الإنتاج.
+      sourceMap?: boolean,
+      // الافتراضي هو 'dev-only'.
+      autoLabel?: 'never' | 'dev-only' | 'always',
+      // الافتراضي هو '[local]'.
+      // القيم المسموح بها: `[local]` `[filename]` و `[dirname]`
+      // يعمل هذا الخيار فقط عندما يكون autoLabel مضبوطًا على 'dev-only' أو 'always'.
+      // يسمح لك بتحديد تنسيق التسمية الناتجة.
+      // يتم تعريف التنسيق عبر سلسلة حيث يتم إحاطة الأجزاء المتغيرة بأقواس مربعة [].
+      // على سبيل المثال labelFormat: "my-classname--[local]"، حيث سيتم استبدال [local] باسم المتغير الذي يتم تعيين النتيجة له.
+      labelFormat?: string,
+      // الافتراضي هو undefined.
+      // يسمح لك هذا الخيار بإخبار المترجم بالاستيرادات التي يجب
+      // أن ينظر إليها لتحديد ما يجب تحويله حتى إذا كنت تعيد تصدير
+      // صادرات Emotion، فلا يزال بإمكانك استخدام التحويلات.
+      importMap?: {
+        [packageName: string]: {
+          [exportName: string]: {
+            canonicalImport?: [string, string],
+            styledBaseImport?: [string, string],
+          }
+        }
+      },
+    },
+  },
+}
+```
+
+### التصغير (Minification)
+
+يتم استخدام مترجم swc الخاص بـ Next.js للتصغير افتراضيًا منذ الإصدار v13. هذا أسرع بـ 7 مرات من Terser.
+
+إذا كان Terser لا يزال مطلوبًا لأي سبب يمكن تكوين ذلك.
+
+```js filename="next.config.js"
+module.exports = {
+  swcMinify: false,
+}
+```
+
+### تحويل الوحدات (Module Transpilation)
+
+يمكن لـ Next.js تحويل وتعبئة التبعيات تلقائيًا من الحزم المحلية (مثل monorepos) أو من التبعيات الخارجية (`node_modules`). هذا يحل محل حزمة `next-transpile-modules`.
+
+```js filename="next.config.js"
+module.exports = {
+  transpilePackages: ['@acme/ui', 'lodash-es'],
+}
+```
+
+### تنظيم الاستيرادات (Modularize Imports)
+
+تم استبدال هذا الخيار بـ [`optimizePackageImports`](/docs/app/api-reference/next-config-js/optimizePackageImports) في Next.js 13.5. نوصي بالترقية لاستخدام الخيار الجديد الذي لا يتطلب تكوينًا يدويًا لمسارات الاستيراد.
+
+## الميزات التجريبية
+
+### تتبع أداء SWC (SWC Trace profiling)
+
+يمكنك إنشاء تتبع التحويلات الداخلية لـ SWC كتنسيق [trace event](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview?mode=html#%21=) الخاص بـ chromium.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    swcTraceProfiling: true,
+  },
+}
+```
+
+بمجرد التمكين، سينشئ swc تتبعًا باسم `swc-trace-profile-${timestamp}.json` تحت `.next/`. يمكن لمشاهد تتبع chromium (chrome://tracing/، https://ui.perfetto.dev/)، أو مشاهد flamegraph المتوافقة (https://www.speedscope.app/) تحميل وتصور التتبعات المُنشأة.
+
+### إضافات SWC (تجريبي) (SWC Plugins)
+
+يمكنك تكوين تحويل swc لاستخدام دعم الإضافات التجريبي لـ SWC المكتوب بـ wasm لتخصيص سلوك التحويل.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    swcPlugins: [
+      [
+        'plugin',
+        {
+          ...pluginOptions,
+        },
+      ],
+    ],
+  },
+}
+```
+
+يقبل `swcPlugins` مصفوفة من tuples لتكوين الإضافات. يحتوي tuple للإضافة على مسار الإضافة وكائن لتكوين الإضافة. يمكن أن يكون مسار الإضافة اسم حزمة npm أو مسارًا مطلقًا إلى ملف `.wasm` نفسه.
+
+## الميزات غير المدعومة
+
+عندما يحتوي تطبيقك على ملف `.babelrc`، سيعود Next.js تلقائيًا إلى استخدام Babel لتحويل الملفات الفردية. يضمن هذا التوافق مع الإصدارات السابقة للتطبيقات الحالية التي تستخدم إضافات Babel المخصصة.
+
+إذا كنت تستخدم إعداد Babel مخصصًا، [يرجى مشاركة تكوينك](https://github.com/vercel/next.js/discussions/30174). نحن نعمل على نقل أكبر عدد ممكن من تحويلات Babel الشائعة الاستخدام، وكذلك دعم الإضافات في المستقبل.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                                                                  |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.1.0` | [تحويل الوحدات](https://nextjs.org/blog/next-13-1#built-in-module-transpilation-stable) و [تنظيم الاستيرادات](https://nextjs.org/blog/next-13-1#import-resolution-for-smaller-bundles) أصبحا مستقرين. |
+| `v13.0.0` | تمكين مصغر SWC افتراضيًا.                                                                                                                                                                         |
+| `v12.3.0` | أصبح مصغر SWC [مستقرًا](https://nextjs.org/blog/next-12-3#swc-minifier-stable).                                                                                                                            |
+| `v12.2.0` | تمت إضافة دعم تجريبي لـ [إضافات SWC](#swc-plugins-experimental).                                                                                                                                     |
+| `v12.1.0` | تمت إضافة دعم لـ المكونات ذات الأنماط، Jest، Relay، إزالة خصائص React، المُزخرفات القديمة، إزالة Console، و jsxImportSource.                                                                       |
+| `v12.0.0` | تم [إدخال](https://nextjs.org/blog/next-12) مترجم Next.js.                                                                                                                                          |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/04-architecture/supported-browsers.mdx b/apps/docs/content/ar/docs/13/04-architecture/supported-browsers.mdx
new file mode 100644
index 00000000..0396b1ce
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/04-architecture/supported-browsers.mdx
@@ -0,0 +1,72 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:15:59.626Z
+title: المتصفحات المدعومة
+description: دعم المتصفحات وميزات جافا سكريبت المدعومة من قبل Next.js.
+---
+
+يدعم Next.js **المتصفحات الحديثة** بدون أي تكوين إضافي.
+
+- Chrome 64+
+- Edge 79+
+- Firefox 67+
+- Opera 51+
+- Safari 12+
+
+## Browserslist
+
+إذا كنت ترغب في استهداف متصفحات أو ميزات محددة، يدعم Next.js تكوين [Browserslist](https://browsersl.ist) في ملف `package.json`. يستخدم Next.js تكوين Browserslist التالي افتراضيًا:
+
+```json filename="package.json"
+{
+  "browserslist": [
+    "chrome 64",
+    "edge 79",
+    "firefox 67",
+    "opera 51",
+    "safari 12"
+  ]
+}
+```
+
+## Polyfills
+
+نقوم بحقن [polyfills شائعة الاستخدام](https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js)، بما في ذلك:
+
+- [**fetch()**](https://developer.mozilla.org/docs/Web/API/Fetch_API) — بديل عن: `whatwg-fetch` و `unfetch`.
+- [**URL**](https://developer.mozilla.org/docs/Web/API/URL) — بديل عن: [حزمة `url` (واجهة برمجة تطبيقات Node.js)](https://nodejs.org/api/url.html).
+- [**Object.assign()**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) — بديل عن: `object-assign` و `object.assign` و `core-js/object/assign`.
+
+إذا كانت أي من التبعيات الخاصة بك تتضمن هذه الـ polyfills، فسيتم إزالتها تلقائيًا من بناء الإنتاج لتجنب التكرار.
+
+بالإضافة إلى ذلك، لتقليل حجم الحزمة، سيقوم Next.js بتحميل هذه الـ polyfills فقط للمتصفحات التي تتطلبها. غالبية حركة المرور على الويب عالميًا لن تقوم بتنزيل هذه الـ polyfills.
+
+### Polyfills مخصصة
+
+إذا كان الكود الخاص بك أو أي تبعيات خارجية من npm تتطلب ميزات غير مدعومة من قبل المتصفحات المستهدفة (مثل IE 11)، فأنت بحاجة إلى إضافة الـ polyfills بنفسك.
+
+في هذه الحالة، يجب عليك إضافة استيراد على مستوى أعلى لـ **polyfill محدد** تحتاجه في [مكون `<App>` المخصص](/docs/pages/building-your-application/routing/custom-app) أو المكون الفردي.
+
+## ميزات لغة جافا سكريبت
+
+يسمح لك Next.js باستخدام أحدث ميزات جافا سكريبت بدون أي تكوين إضافي. بالإضافة إلى [ميزات ES6](https://github.com/lukehoban/es6features)، يدعم Next.js أيضًا:
+
+- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017)
+- [خاصية Object Rest/Spread](https://github.com/tc39/proposal-object-rest-spread) (ES2018)
+- [Dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) (ES2020)
+- [Optional Chaining](https://github.com/tc39/proposal-optional-chaining) (ES2020)
+- [Nullish Coalescing](https://github.com/tc39/proposal-nullish-coalescing) (ES2020)
+- [Class Fields](https://github.com/tc39/proposal-class-fields) و [Static Properties](https://github.com/tc39/proposal-static-class-features) (جزء من proposal المرحلة الثالثة)
+- والمزيد!
+
+### Polyfills من جانب الخادم
+
+بالإضافة إلى `fetch()` على جانب العميل، يقوم Next.js بحقن `fetch()` في بيئة Node.js حيث لا تكون متوفرة بعد. يستخدم `undici`، نفس التنفيذ الذي تستخدمه Node.js نفسها. يمكنك استخدام `fetch()` في كود الخادم الخاص بك (مثل `getStaticProps`/`getServerSideProps`) بدون استخدام polyfills مثل `isomorphic-unfetch` أو `node-fetch`.
+
+### ميزات TypeScript
+
+يحتوي Next.js على دعم مدمج لـ TypeScript. [تعلم المزيد هنا](/docs/pages/building-your-application/configuring/typescript).
+
+### تخصيص تكوين Babel (متقدم)
+
+يمكنك تخصيص تكوين babel. [تعلم المزيد هنا](/docs/pages/building-your-application/configuring/babel).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/04-architecture/turbopack.mdx b/apps/docs/content/ar/docs/13/04-architecture/turbopack.mdx
new file mode 100644
index 00000000..2176d441
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/04-architecture/turbopack.mdx
@@ -0,0 +1,31 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:15:15.364Z
+title: Turbopack
+description: Turbopack هو حزمة تدريجية مُحسنة لجافاسكريبت وTypeScript، مكتوبة بلغة Rust ومدمجة في Next.js.
+---
+
+[Turbopack](https://turbo.build/pack) (بيتا) هو حزمة تدريجية مُحسنة لجافاسكريبت وTypeScript، مكتوبة بلغة Rust ومدمجة في Next.js.
+
+## الاستخدام
+
+يمكن استخدام Turbopack في Next.js سواء في دليل `pages` أو `app` لتطوير محلي أسرع. لتفعيل Turbopack، استخدم العلم `--turbo` عند تشغيل خادم التطوير الخاص بـ Next.js.
+
+```json filename="package.json" highlight={3}
+{
+  "scripts": {
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
+```
+
+## الميزات المدعومة
+
+لمعرفة المزيد عن الميزات المدعومة حاليًا في Turbopack، راجع [الوثائق](https://turbo.build/pack/docs/features).
+
+## الميزات غير المدعومة
+
+حاليًا، يدعم Turbopack فقط `next dev` ولا يدعم `next build`. نحن نعمل حاليًا على دعم عمليات البناء مع اقترابنا من تحقيق الاستقرار.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/05-community/01-contribution-guide.mdx b/apps/docs/content/ar/docs/13/05-community/01-contribution-guide.mdx
new file mode 100644
index 00000000..7042c27e
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/05-community/01-contribution-guide.mdx
@@ -0,0 +1,410 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:40.276Z
+title: دليل المساهمة في التوثيق
+nav_title: دليل المساهمة
+description: تعلم كيفية المساهمة في توثيق Next.js
+---
+
+مرحبًا بك في دليل المساهمة في توثيق Next.js! نحن متحمسون لوجودك هنا.
+
+توفر هذه الصفحة تعليمات حول كيفية تعديل توثيق Next.js. هدفنا هو تمكين كل فرد في المجتمع للمساهمة وتحسين وثائقنا.
+
+## لماذا تشارك؟
+
+العمل مفتوح المصدر لا ينتهي أبدًا، وكذلك التوثيق. تعد المساهمة في التوثيق طريقة جيدة للمبتدئين للانخراط في المصادر المفتوحة وللمطورين ذوي الخبرة لتوضيح المواضيع الأكثر تعقيدًا أثناء مشاركة معرفتهم مع المجتمع.
+
+بالمساهمة في وثائق Next.js، أنت تساعدنا في بناء مصدر تعليمي أكثر قوة لجميع المطورين. سواء وجدت خطأً مطبعيًا، أو قسمًا غير واضح، أو لاحظت أن موضوعًا معينًا مفقود، فإن مساهماتك مرحب بها ومقدرة.
+
+## كيفية المساهمة
+
+يمكن العثور على محتوى الوثائق في [مستودع Next.js](https://github.com/vercel/next.js/tree/canary/docs). للمساهمة، يمكنك تعديل الملفات مباشرة على GitHub أو استنساخ المستودع وتعديل الملفات محليًا.
+
+### سير العمل على GitHub
+
+إذا كنت جديدًا على GitHub، نوصي بقراءة [دليل المصادر المفتوحة على GitHub](https://opensource.guide/how-to-contribute/#opening-a-pull-request) لتعلم كيفية تفرع مستودع، وإنشاء فرع، وإرسال طلب سحب.
+
+> **معلومة مفيدة**: يعيش كود الوثائق الأساسي في قاعدة كود خاصة تتم مزامنتها مع المستودع العام لـ Next.js. هذا يعني أنه لا يمكنك معاينة الوثائق محليًا. ومع ذلك، سترى تغييراتك على [nextjs.org](https://nextjs.org/docs) بعد دمج طلب السحب.
+
+### كتابة MDX
+
+الوثائق مكتوبة بـ [MDX](https://mdxjs.com/)، وهو تنسيق ماركداون يدعم تركيب JSX. هذا يسمح لنا بتضمين مكونات React في الوثائق. راجع [دليل ماركداون على GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) للحصول على نظرة سريعة على تركيب ماركداون.
+
+### VSCode
+
+#### معاينة التغييرات محليًا
+
+يحتوي VSCode على معاين ماركداون مدمج يمكنك استخدامه لرؤية تعديلاتك محليًا. لتمكين المعاين لملفات MDX، ستحتاج إلى إضافة خيار تكوين إلى إعدادات المستخدم.
+
+افتح لوحة الأوامر (`⌘ + ⇧ + P` على Mac أو `Ctrl + Shift + P` على Windows) وابحث عن `Preferences: Open User Settings (JSON)`.
+
+ثم أضف السطر التالي إلى ملف `settings.json` الخاص بك:
+
+```json filename="settings.json"
+{
+  "files.associations": {
+    "*.mdx": "markdown"
+  }
+}
+```
+
+بعد ذلك، افتح لوحة الأوامر مرة أخرى، وابحث عن `Markdown: Preview File` أو `Markdown: Open Preview to the Side`. سيؤدي هذا إلى فتح نافذة معاينة حيث يمكنك رؤية التغييرات المنسقة.
+
+#### الامتدادات
+
+نوصي أيضًا بالامتدادات التالية لمستخدمي VSCode:
+
+- [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx): Intellisense وتمييز تركيب لـ MDX.
+- [Grammarly](https://marketplace.visualstudio.com/items?itemName=znck.grammarly): مدقق قواعد وإملاء.
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): تنسيق ملفات MDX عند الحفظ.
+
+### عملية المراجعة
+
+بمجرد تقديم مساهمتك، سيقوم فريق Next.js أو فريق تجربة المطورين بمراجعة تغييراتك، وتقديم ملاحظات، ودمج طلب السحب عندما يكون جاهزًا.
+
+يرجى إعلامنا إذا كان لديك أي أسئلة أو تحتاج إلى مزيد من المساعدة في تعليقات طلب السحب الخاص بك. شكرًا لك على المساهمة في وثائق Next.js وعلى كونك جزءًا من مجتمعنا!
+
+> **نصيحة**: قم بتشغيل `pnpm prettier-fix` لتشغيل Prettier قبل إرسال طلب السحب الخاص بك.
+
+## هيكل الملفات
+
+تستخدم الوثائق **توجيه نظام الملفات**. يمثل كل مجلد وملف داخل [`/docs`](https://github.com/vercel/next.js/tree/canary/docs) جزءًا من المسار. تُستخدم هذه الأجزاء لإنشاء مسارات URL، والتنقل، وفتات الخبز.
+
+يعكس هيكل الملفات التنقل الذي تراه على الموقع، وبشكل افتراضي، يتم فرز عناصر التنقل أبجديًا. ومع ذلك، يمكننا تغيير ترتيب العناصر عن طريق إضافة رقم مكون من خانتين (`00-`) إلى اسم المجلد أو الملف.
+
+على سبيل المثال، في [مرجع واجهة برمجة التطبيقات للوظائف](/docs/app/api-reference/functions)، يتم فرز الصفحات أبجديًا لأنه يسهل على المطورين العثور على وظيفة معينة:
+
+```txt
+03-functions
+├── cookies.mdx
+├── draft-mode.mdx
+├── fetch.mdx
+└── ...
+```
+
+ولكن، في [قسم التوجيه](/docs/app/building-your-application/routing)، تكون الملفات مسبوقة برقم مكون من خانتين، مرتبة بالترتيب الذي يجب أن يتعلم فيه المطورون هذه المفاهيم:
+
+```txt
+02-routing
+├── 01-defining-routes.mdx
+├── 02-pages-and-layouts.mdx
+├── 03-linking-and-navigating.mdx
+└── ...
+```
+
+للعثور بسرعة على صفحة، يمكنك استخدام `⌘ + P` (Mac) أو `Ctrl + P` (Windows) لفتح شريط البحث في VSCode. ثم اكتب slug للصفحة التي تبحث عنها. على سبيل المثال `defining-routes`
+
+> **لماذا لا نستخدم ملف تعريف؟**
+>
+> فكرنا في استخدام ملف تعريف (طريقة أخرى شائعة لإنشاء تنقل الوثائق)، لكننا وجدنا أن ملف التعريف سيفقد التزامن بسرعة مع الملفات. يجبرنا توجيه نظام الملفات على التفكير في هيكل الوثائق ويبدو أكثر أصالة لـ Next.js.
+
+## البيانات الوصفية
+
+تحتوي كل صفحة على كتلة بيانات وصفية في أعلى الملف مفصولة بثلاثة شرطات.
+
+### الحقول المطلوبة
+
+الحقول التالية **مطلوبة**:
+
+| الحقل         | الوصف                                                                  |
+| ------------- | ---------------------------------------------------------------------------- |
+| `title`       | عنوان `<h1>` للصفحة، يُستخدم لتحسين محركات البحث (SEO) وصور OG.             |
+| `description` | وصف الصفحة، يُستخدم في وسم `<meta name="description">` لتحسين محركات البحث. |
+
+```yaml filename="required-fields.mdx"
+---
+title: عنوان الصفحة
+description: وصف الصفحة
+---
+```
+
+من الجيد تقييد عنوان الصفحة إلى 2-3 كلمات (مثل تحسين الصور) والوصف إلى 1-2 جملة (مثل تعلم كيفية تحسين الصور في Next.js).
+
+### الحقول الاختيارية
+
+الحقول التالية **اختيارية**:
+
+| الحقل       | الوصف                                                                                                                                        |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `nav_title` | يتجاوز عنوان الصفحة في التنقل. هذا مفيد عندما يكون عنوان الصفحة طويلًا جدًا ليتناسب. إذا لم يتم توفيره، يتم استخدام حقل `title`.               |
+| `source`    | يسحب المحتوى إلى صفحة مشتركة. راجع [الصفحات المشتركة](#الصفحات-المشتركة).                                                                       |
+| `related`   | قائمة بالصفحات ذات الصلة في أسفل المستند. سيتم تحويلها تلقائيًا إلى بطاقات. راجع [الروابط ذات الصلة](#الروابط-ذات-الصلة).                     |
+
+```yaml filename="optional-fields.mdx"
+---
+nav_title: عنوان عنصر التنقل
+source: app/building-your-application/optimizing/images
+related:
+  description: راجع مرجع واجهة برمجة التطبيقات لمكون الصورة.
+  links:
+    - app/api-reference/components/image
+---
+```
+
+## وثائق `App` و `Pages`
+
+نظرًا لأن معظم الميزات في **موجه التطبيق (App Router)** و **موجه الصفحات (Pages Router)** مختلفة تمامًا، يتم الاحتفاظ بوثائق كل منها في أقسام منفصلة (`02-app` و `03-pages`). ومع ذلك، هناك بعض الميزات المشتركة بينهما.
+
+### الصفحات المشتركة
+
+لتجنب تكرار المحتوى وخطر عدم التزامن، نستخدم حقل `source` لسحب المحتوى من صفحة إلى أخرى. على سبيل المثال، يتصرف مكون `<Link>` بشكل متشابه إلى حد كبير في **App** و **Pages**. بدلاً من تكرار المحتوى، يمكننا سحب المحتوى من `app/.../link.mdx` إلى `pages/.../link.mdx`:
+
+```mdx filename="app/.../link.mdx"
+---
+title: <Link>
+description: مرجع واجهة برمجة التطبيقات لمكون <Link>.
+---
+
+سيساعدك مرجع واجهة برمجة التطبيقات هذا على فهم كيفية استخدام الخصائص وخيارات التكوين المتاحة لمكون Link.
+```
+
+```mdx filename="pages/.../link.mdx"
+---
+title: <Link>
+description: مرجع واجهة برمجة التطبيقات لمكون <Link>.
+source: app/api-reference/components/link
+---
+
+{/* لا تقم بتحرير هذه الصفحة. */}
+{/* يتم سحب محتوى هذه الصفحة من المصدر أعلاه. */}
+```
+
+يمكننا بالتالي تحرير المحتوى في مكان واحد وينعكس في كلا القسمين.
+
+### المحتوى المشترك
+
+في الصفحات المشتركة، قد يكون هناك أحيانًا محتوى خاص بـ **موجه التطبيق (App Router)** أو **موجه الصفحات (Pages Router)**. على سبيل المثال، يحتوي مكون `<Link>` على خاصية `shallow` متاحة فقط في **Pages** وليس في **App**.
+
+للتأكد من ظهور المحتوى فقط في الموجه الصحيح، يمكننا لف كتل المحتوى في مكونات `<AppOnly>` أو `<PagesOnly>`:
+
+```mdx filename="app/.../link.mdx"
+هذا المحتوى مشترك بين App و Pages.
+
+<PagesOnly>
+
+هذا المحتوى سيظهر فقط في وثائق Pages.
+
+</PagesOnly>
+
+هذا المحتوى مشترك بين App و Pages.
+```
+
+من المحتمل أن تستخدم هذه المكونات للأمثلة وكتل الكود.
+
+## كتل الكود
+
+يجب أن تحتوي كتل الكود على مثال عمل أدنى يمكن نسخه ولصقه. هذا يعني أن الكود يجب أن يكون قابلاً للتشغيل دون أي تكوين إضافي.
+
+على سبيل المثال، إذا كنت تظهر كيفية استخدام مكون `<Link>`، يجب أن تتضمن عبارة `import` والمكون `<Link>` نفسه.
+
+```tsx filename="app/page.tsx"
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+قم دائمًا بتشغيل الأمثلة محليًا قبل الالتزام بها. سيضمن ذلك أن الكود محدث ويعمل.
+
+### اللغة واسم الملف
+
+يجب أن تحتوي كتل الكود على رأس يتضمن اللغة و `filename`. أضف خاصية `filename` لعرض أيقونة Terminal خاصة تساعد المستخدمين على معرفة مكان إدخال الأمر. على سبيل المثال:
+
+````mdx filename="code-example.mdx"
+```bash filename="Terminal"
+npx create-next-app
+```
+````
+
+معظم الأمثلة في الوثائق مكتوبة بـ `tsx` و `jsx`، وبعضها بـ `bash`. ومع ذلك، يمكنك استخدام أي لغة مدعومة، إليك [القائمة الكاملة](https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages).
+
+عند كتابة كتل كود JavaScript، نستخدم مجموعات اللغة والامتداد التالية.
+
+|                                | اللغة | الامتداد |
+| ------------------------------ | -------- | --------- |
+| ملفات JavaScript مع كود JSX | ```jsx   | .js       |
+| ملفات JavaScript بدون JSX   | ```js    | .js       |
+| ملفات TypeScript مع JSX      | ```tsx   | .tsx      |
+| ملفات TypeScript بدون JSX   | ```ts    | .ts       |
+
+### محول TS و JS
+
+أضف محول لغة للتبديل بين TypeScript و JavaScript. يجب أن تكون كتل الكود TypeScript أولاً مع نسخة JavaScript لاستيعاب المستخدمين.
+
+حاليًا، نكتب أمثلة TS و JS واحدًا تلو الآخر، ونربطها بخاصية `switcher`:
+
+````mdx filename="code-example.mdx"
+```tsx filename="app/page.tsx" switcher
+
+```
+
+```jsx filename="app/page.js" switcher
+
+```
+````
+
+> **معلومة مفيدة**: نخطط لتجميع مقاطع TypeScript تلقائيًا إلى JavaScript في المستقبل. في الوقت الحالي، يمكنك استخدام [transform.tools](https://transform.tools/typescript-to-javascript).
+
+### تمييز الأسطر
+
+يمكن تمييز أسطر الكود. هذا مفيد عندما تريد جذب الانتباه إلى جزء معين من الكود. يمكنك تمييز الأسطر عن طريق تمرير رقم إلى خاصية `highlight`.
+
+**سطر واحد:** `highlight={1}`
+
+```tsx filename="app/page.tsx" {1}
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+**أسطر متعددة:** `highlight={1,3}`
+
+```tsx filename="app/page.tsx" highlight={1,3}
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+**نطاق الأسطر:** `highlight={1-5}`
+
+```tsx filename="app/page.tsx" highlight={1-5}
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+## الأيقونات
+
+الأيقونات التالية متاحة للاستخدام في الوثائق:
+
+```mdx filename="mdx-icon.mdx"
+<Check size={18} />
+<Cross size={18} />
+```
+
+**الإخراج:**
+
+<Check size={18} />
+<Cross size={18} />
+
+لا نستخدم الرموز التعبيرية في الوثائق.
+
+## الملاحظات
+
+للمعلومات المهمة ولكن ليست حرجة، استخدم الملاحظات. الملاحظات طريقة جيدة لإضافة معلومات دون تشتيت المستخدم عن المحتوى الرئيسي.
+
+```mdx filename="notes.mdx"
+> **معلومة مفيدة**: هذه ملاحظة من سطر واحد.
+
+> **معلومة مفيدة**:
+>
+> - نستخدم أيضًا هذا التنسيق للملاحظات متعددة الأسطر.
+> - هناك أحيانًا عناصر متعددة تستحق المعرفة أو تذكرها.
+```
+
+**الإخراج:**
+
+> **معلومة مفيدة**: هذه ملاحظة من سطر واحد.
+
+> **معلومة مفيدة**:
+>
+> - نستخدم أيضًا هذا التنسيق للملاحظات متعددة الأسطر.
+> - هناك أحيانًا عناصر متعددة تستحق المعرفة أو تذكرها.
+
+## الروابط ذات الصلة
+
+توجه الروابط ذات الصلة رحلة تعلم المستخدم عن طريق إضافة روابط للخطوات التالية المنطقية.
+
+- سيتم عرض الروابط في بطاقات تحت المحتوى الرئيسي للصفحة.
+- سيتم إنشاء الروابط تلقائيًا للصفحات التي تحتوي على صفحات فرعية. على سبيل المثال، يحتوي قسم [التحسين](/docs/app/building-your-application/optimizing) على روابط لجميع صفحاته الفرعية.
+
+قم بإنشاء روابط ذات صلة باستخدام حقل `related` في البيانات الوصفية للصفحة.
+
+```yaml filename="example.mdx"
+---
+related:
+  description: تعلم كيفية البدء بسرعة مع تطبيقك الأول.
+  links:
+    - app/building-your-application/routing/defining-routes
+    - app/building-your-application/data-fetching
+    - app/api-reference/file-conventions/page
+---
+```
+
+### الحقول المتداخلة
+
+| الحقل         | مطلوب؟ | الوصف                                                                                                                                               |
+| ------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`       | اختياري  | عنوان قائمة البطاقات. الافتراضي هو **الخطوات التالية**.                                                                                                   |
+| `description` | اختياري  | وصف قائمة البطاقات.                                                                                                                         |
+| `links`       | مطلوب  | قائمة بالروابط لصفحات وثائق أخرى. يجب أن يكون كل عنصر في القائمة مسار URL نسبي (بدون شرطة مائلة في البداية) مثل `app/api-reference/file-conventions/page` |
+
+## المخططات
+
+المخططات طريقة رائعة لشرح المفاهيم المعقدة. نستخدم [Figma](https://www.figma.com/) لإنشاء مخططات، باتباع دليل تصميم Vercel.
+
+تعيش المخططات حاليًا في مجلد `/public` في موقع Next.js الخاص بنا. إذا كنت ترغب في تحديث أو إضافة مخطط، يرجى فتح [مشكلة على GitHub](https://github.com/vercel/next.js/issues/new?assignees=&labels=template%3A+documentation&projects=&template=4.docs_request.yml&title=Docs%3A+) مع أفكارك.
+
+## المكونات المخصصة و HTML
+
+هذه هي مكونات React المتاحة للوثائق: `<Image />` (next/image)، `<PagesOnly />`، `<AppOnly />`، `<Cross />`، و `<Check />`. لا نسمح بـ HTML الخام في الوثائق بخلاف وسم `<details>`.
+
+إذا كانت لديك أفكار لمكونات جديدة، يرجى فتح [مشكلة على GitHub](https://github.com/vercel/next.js/issues/new/choose).
+
+## دليل الأسلوب
+
+يحتوي هذا القسم على إرشادات لكتابة الوثائق لأولئك الجدد في الكتابة التقنية.
+
+### قوالب الصفحات
+
+بينما ليس لدينا قالب صارم للصفحات، هناك أقسام صفحات ستشاهدها متكررة عبر الوثائق:
+
+- **نظرة عامة:** يجب أن تخبر الفقرة الأولى من الصفحة المستخدم بما هي الميزة وما الغرض منها. متبوعة بمثال عمل أدنى أو مرجع واجهة برمجة التطبيقات الخاصة بها.
+- **الاتفاقية:** إذا كانت الميزة لها اتفاقية، فيجب شرحها هنا.
+- **أمثلة**: أظهر كيف يمكن استخدام الميزة مع حالات استخدام مختلفة.
+- **جداول واجهة برمجة التطبيقات**: يجب أن تحتوي صفحات واجهة برمجة التطبيقات على جدول نظرة عامة في أسفل الصفحة مع روابط القفز إلى الأقسام (عند الإمكان).
+- **الخطوات التالية (الروابط ذات الصلة)**: أضف روابط للصفحات ذات الصلة لتوجيه رحلة تعلم المستخدم.
+
+لا تتردد في إضافة هذه الأقسام حسب الحاجة.
+
+### أنواع الصفحات
+
+تنقسم صفحات التوثيق إلى فئتين: المفاهيمية والمرجعية.
+
+- **الصفحات المفاهيمية**: تُستخدم لشرح مفهوم أو ميزة. عادةً ما تكون أطول وتحتوي على معلومات أكثر من الصفحات المرجعية. في توثيق Next.js، توجد الصفحات المفاهيمية في قسم **بناء تطبيقك**.
+- **الصفحات المرجعية**: تُستخدم لشرح واجهة برمجة تطبيقات (API) محددة. عادةً ما تكون أقصر وأكثر تركيزًا. في توثيق Next.js، توجد الصفحات المرجعية في قسم **مرجع API**.
+
+> **معلومة مفيدة**: اعتمادًا على الصفحة التي تساهم فيها، قد تحتاج إلى اتباع أسلوب وصوت مختلف. على سبيل المثال، الصفحات المفاهيمية أكثر إرشادية وتستخدم كلمة _أنت_ لمعالجة المستخدم. بينما الصفحات المرجعية أكثر تقنية، فهي تستخدم كلمات أكثر إلزامية مثل "إنشاء، تحديث، قبول" وتميل إلى حذف كلمة _أنت_.
+
+### الأسلوب الكتابي
+
+إليك بعض الإرشادات للحفاظ على أسلوب وصوت متسق عبر التوثيق:
+
+- اكتب جملًا واضحة وموجزة. تجنب الاستطراد.
+  - إذا وجدت نفسك تستخدم الكثير من الفواصل، فكر في تقسيم الجملة إلى عدة جمل أو استخدام قائمة.
+  - استبدل الكلمات المعقدة بأخرى أبسط. على سبيل المثال، _استخدم_ بدلاً من _استغل_.
+- كن حذرًا مع كلمة _هذا_. يمكن أن تكون غامضة ومربكة، لا تتردد في تكرار موضوع الجملة إذا كان غير واضح.
+  - على سبيل المثال، _"يستخدم Next.js React"_ بدلاً من _"يستخدم Next.js هذا"_.
+- استخدم الصيغة الفعلية بدلاً من الصيغة المجهولة. الجملة الفعلية أسهل في القراءة.
+  - على سبيل المثال، _"يستخدم Next.js React"_ بدلاً من _"React يُستخدم بواسطة Next.js"_. إذا وجدت نفسك تستخدم كلمات مثل _تم_ و_بواسطة_ فقد تكون تستخدم الصيغة المجهولة.
+- تجنب استخدام كلمات مثل _سهل_، _سريع_، _بسيط_، _فقط_، إلخ. فهذه كلمات ذاتية ويمكن أن تكون محبطة للمستخدمين.
+- تجنب الكلمات السلبية مثل _لا_، _لا يمكن_، _لن_، إلخ. يمكن أن تكون محبطة للقراء.
+  - على سبيل المثال، _"يمكنك استخدام مكون `Link` لإنشاء روابط بين الصفحات"_ بدلاً من _"لا تستخدم وسم `<a>` لإنشاء روابط بين الصفحات"_.
+- اكتب بصيغة المخاطب (أنت/لك). هذا أكثر شخصية وجاذبية.
+- استخدم لغة محايدة جندريًا. استخدم _المطورون_، _المستخدمون_، أو _القراء_ عند الإشارة إلى الجمهور.
+- إذا كنت تضيف أمثلة برمجية، تأكد من تنسيقها بشكل صحيح وأنها تعمل.
+
+بينما هذه الإرشادات ليست شاملة، إلا أنها يجب أن تساعدك على البدء. إذا كنت ترغب في التعمق أكثر في الكتابة التقنية، تحقق من [دورة الكتابة التقنية من جوجل](https://developers.google.com/tech-writing/overview).
+
+---
+
+شكرًا لك على المساهمة في التوثيق وأن تكون جزءًا من مجتمع Next.js!
+
+{/* قيد الإنجاز: مكون أحدث المساهمين */}
diff --git a/apps/docs/content/ar/docs/13/05-community/index.mdx b/apps/docs/content/ar/docs/13/05-community/index.mdx
new file mode 100644
index 00000000..6d79f504
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/05-community/index.mdx
@@ -0,0 +1,33 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:15:13.859Z
+title: مجتمع Next.js
+nav_title: المجتمع
+description: انضم إلى مجتمع Next.js وشارك في تطويره.
+---
+
+مع أكثر من 4 ملايين تحميل أسبوعي، يتمتع Next.js بمجتمع كبير ونشط من المطورين حول العالم. إليك كيف يمكنك المشاركة في مجتمعنا:
+
+## المساهمة
+
+هناك عدة طرق يمكنك من خلالها المساهمة في تطوير Next.js:
+
+- [التوثيق](/docs/community/contribution-guide): اقترح تحسينات أو حتى اكتب أقسامًا جديدة لمساعدة المستخدمين على فهم كيفية استخدام Next.js.
+- [الأمثلة](https://github.com/vercel/next.js/tree/canary/contributing/examples): ساعد المطورين على دمج Next.js مع أدوات وخدمات أخرى عن طريق إنشاء مثال جديد أو تحسين مثال موجود.
+- [قاعدة الكود](https://github.com/vercel/next.js/tree/canary/contributing/core): تعرف أكثر على البنية التحتية، وساهم في إصلاح الأخطاء، واقترح ميزات جديدة.
+
+## المناقشات
+
+إذا كان لديك سؤال حول Next.js، أو تريد مساعدة الآخرين، فأنت دائماً مرحب بك في الانضمام إلى النقاش:
+
+- [مناقشات GitHub](https://github.com/vercel/next.js/discussions)
+- [Discord](https://discord.com/invite/bUG2bvbtHy)
+- [Reddit](https://www.reddit.com/r/nextjs)
+
+## وسائل التواصل الاجتماعي
+
+تابع Next.js على [تويتر](https://twitter.com/nextjs) للحصول على آخر التحديثات، واشترك في [قناة Vercel على اليوتيوب](https://www.youtube.com/@VercelHQ) لمشاهدة مقاطع الفيديو حول Next.js.
+
+## مدونة قواعد السلوك
+
+نؤمن بخلق مجتمع شامل ومرحب. لذلك، نطلب من جميع الأعضاء الالتزام بـ[مدونة قواعد السلوك](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md). يوضح هذا الوثيقة توقعاتنا بشأن سلوك المشاركين. ندعوك لقراءتها ومساعدتنا في الحفاظ على بيئة آمنة ومحترمة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/13/index.mdx b/apps/docs/content/ar/docs/13/index.mdx
new file mode 100644
index 00000000..5ba19303
--- /dev/null
+++ b/apps/docs/content/ar/docs/13/index.mdx
@@ -0,0 +1,59 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:47.048Z
+title: مقدمة
+description: مرحبًا بكم في توثيق Next.js.
+---
+
+مرحبًا بكم في توثيق Next.js!
+
+## ما هو Next.js؟
+
+Next.js هو إطار عمل React لبناء تطبيقات ويب كاملة المكدس. تستخدم مكونات React لبناء واجهات المستخدم، وNext.js للميزات والتحسينات الإضافية.
+
+تحت الغطاء، يقوم Next.js أيضًا بتجريد وتكوين الأدوات المطلوبة لـ React تلقائيًا، مثل التجميع والتحويل وغير ذلك. هذا يسمح لك بالتركيز على بناء تطبيقك بدلاً من قضاء الوقت في التكوين.
+
+سواء كنت مطورًا فرديًا أو جزءًا من فريق أكبر، يمكن لـ Next.js مساعدتك في بناء تطبيقات React تفاعلية وديناميكية وسريعة.
+
+## الميزات الرئيسية
+
+بعض الميزات الرئيسية لـ Next.js تشمل:
+
+| الميزة                                                                  | الوصف                                                                                                                                                                                      |
+| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [التوجيه](/docs/app/building-your-application/routing)                   | جهاز توجيه يعتمد على نظام الملفات مبني على مكونات الخادم يدعم التخطيطات والتوجيه المتداخل وحالات التحميل ومعالجة الأخطاء والمزيد.                                                    |
+| [التصيير](/docs/app/building-your-application/rendering)               | تصيير من جانب العميل ومن جانب الخادم باستخدام مكونات العميل والخادم. تم تحسينه أكثر مع التصيير الثابت والديناميكي على الخادم باستخدام Next.js. بث على بيئات تشغيل Edge وNode.js. |
+| [جلب البيانات](/docs/app/building-your-application/data-fetching)       | جلب بيانات مبسط باستخدام async/await في مكونات الخادم، وواجهة برمجة تطبيقات `fetch` موسعة لتخزين الطلبات مؤقتًا وتخزين البيانات وإعادة التحقق من صحتها.                                              |
+| [التنسيق](/docs/app/building-your-application/styling)                   | دعم لطرق التنسيق المفضلة لديك، بما في ذلك وحدات CSS وTailwind CSS وCSS-in-JS                                                                                                   |
+| [التحسينات](/docs/app/building-your-application/optimizing)          | تحسينات الصور والخطوط والنصوص البرمجية لتحسين مؤشرات Core Web Vitals وتجربة المستخدم لتطبيقك.                                                                                        |
+| [TypeScript](/docs/app/building-your-application/configuring/typescript) | دعم محسن لـ TypeScript، مع فحص أنواع أفضل وتجميع أكثر كفاءة، بالإضافة إلى مكون إضافي مخصص لـ TypeScript ومدقق أنواع.                                                 |
+
+## كيفية استخدام هذه الوثائق
+
+على الجانب الأيسر من الشاشة، ستجد شريط التنقل للوثائق. تم تنظيم صفحات الوثائق بالتسلسل، من الأساسي إلى المتقدم، حتى تتمكن من متابعتها خطوة بخطوة عند بناء تطبيقك. ومع ذلك، يمكنك قراءتها بأي ترتيب أو الانتقال إلى الصفحات التي تنطبق على حالتك الاستخدامية.
+
+على الجانب الأيمن من الشاشة، سترى جدول محتويات يسهل التنقل بين أقسام الصفحة. إذا كنت بحاجة إلى العثور على صفحة بسرعة، يمكنك استخدام شريط البحث في الأعلى، أو اختصار البحث (`Ctrl+K` أو `Cmd+K`).
+
+للبدء، تحقق من دليل [التثبيت](/docs/getting-started/installation).
+
+## موجه التطبيق مقابل موجه الصفحات
+
+يحتوي Next.js على جهازي توجيه مختلفين: موجه التطبيق وموجه الصفحات. موجه التطبيق هو جهاز توجيه أحدث يسمح لك باستخدام أحدث ميزات React، مثل مكونات الخادم والبث. موجه الصفحات هو جهاز التوجيه الأصلي لـ Next.js، الذي سمح لك ببناء تطبيقات React مع تصيير من جانب الخادم وما زال مدعومًا لتطبيقات Next.js القديمة.
+
+في أعلى الشريط الجانبي، ستلاحظ قائمة منسدلة تتيح لك التبديل بين ميزات **موجه التطبيق** و**موجه الصفحات**. نظرًا لوجود ميزات فريدة لكل دليل، من المهم تتبع علامة التبويب المحددة.
+
+كما أن مسار التنقل في أعلى الصفحة سيحدد أيضًا ما إذا كنت تشاهد وثائق موجه التطبيق أو موجه الصفحات.
+
+## المعرفة المسبقة
+
+على الرغم من أن وثائقنا مصممة لتكون سهلة للمبتدئين، إلا أننا نحتاج إلى تحديد خط أساسي حتى تتمكن الوثائق من البقاء مركزة على وظائف Next.js. سنحرص على توفير روابط للوثائق ذات الصلة كلما قدمنا مفهومًا جديدًا.
+
+للحصول على أقصى استفادة من وثائقنا، يوصى بأن يكون لديك فهم أساسي لـ HTML وCSS وReact. إذا كنت بحاجة إلى تحديث مهاراتك في React، تحقق من [دورة أساسيات Next.js](/learn/foundations/about-nextjs)، والتي ستقدمك إلى الأساسيات.
+
+## إمكانية الوصول
+
+لتحقيق أفضل إمكانية وصول عند استخدام قارئ شاشة أثناء قراءة الوثائق، نوصي باستخدام Firefox وNVDA، أو Safari وVoiceOver.
+
+## انضم إلى مجتمعنا
+
+إذا كان لديك أي أسئلة حول أي شيء يتعلق بـ Next.js، فأنت دائمًا مرحب بك لطرحها على مجتمعنا في [مناقشات GitHub](https://github.com/vercel/next.js/discussions)، [Discord](https://discord.com/invite/bUG2bvbtHy)، [Twitter](https://twitter.com/nextjs)، و[Reddit](https://www.reddit.com/r/nextjs).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/01-getting-started/01-installation.mdx b/apps/docs/content/ar/docs/14/01-getting-started/01-installation.mdx
new file mode 100644
index 00000000..37d7f113
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/01-getting-started/01-installation.mdx
@@ -0,0 +1,196 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:16:04.251Z
+title: التثبيت
+description: إنشاء تطبيق Next.js جديد باستخدام `create-next-app`. إعداد TypeScript والأنماط وتهيئة ملف `next.config.js`.
+related:
+  title: الخطوات التالية
+  description: تعرف على الملفات والمجلدات في مشروع Next.js الخاص بك.
+  links:
+    - getting-started/project-structure
+---
+
+متطلبات النظام:
+
+- [Node.js 18.17](https://nodejs.org/) أو أحدث.
+- أنظمة التشغيل المدعومة: macOS وWindows (بما في ذلك WSL) وLinux.
+
+## التثبيت التلقائي
+
+نوصي ببدء تطبيق Next.js جديد باستخدام [`create-next-app`](/docs/app/api-reference/cli/create-next-app)، والذي يقوم بإعداد كل شيء تلقائيًا لك. لإنشاء مشروع، قم بتنفيذ:
+
+```bash filename="Terminal"
+npx create-next-app@latest
+```
+
+عند التثبيت، ستظهر لك المطالبات التالية:
+
+```txt filename="Terminal"
+ما هو اسم مشروعك؟ my-app
+هل ترغب في استخدام TypeScript؟ لا / نعم
+هل ترغب في استخدام ESLint؟ لا / نعم
+هل ترغب في استخدام Tailwind CSS؟ لا / نعم
+هل ترغب في استخدام مجلد `src/`؟ لا / نعم
+هل ترغب في استخدام موجه التطبيق (موصى به)؟ لا / نعم
+هل ترغب في تخصيص اسم الاستيراد الافتراضي (@/*)؟ لا / نعم
+ما هو اسم الاستيراد الذي تريد تهيئته؟ @/*
+```
+
+بعد المطالبات، سيقوم [`create-next-app`](/docs/app/api-reference/cli/create-next-app) بإنشاء مجلد باسم مشروعك وتثبيت التبعيات المطلوبة.
+
+إذا كنت جديدًا في Next.js، راجع وثائق [هيكل المشروع](/docs/getting-started/project-structure) للحصول على نظرة عامة على جميع الملفات والمجلدات المحتملة في تطبيقك.
+
+> **معلومة مفيدة**:
+>
+> - يأتي Next.js الآن مع تهيئة افتراضية لـ [TypeScript](/docs/app/building-your-application/configuring/typescript) و[ESLint](/docs/app/building-your-application/configuring/eslint) و[Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css).
+> - يمكنك اختياريًا استخدام [مجلد `src`](/docs/app/building-your-application/configuring/src-directory) في جذر مشروعك لفصل كود التطبيق عن ملفات التهيئة.
+
+## التثبيت اليدوي
+
+لإنشاء تطبيق Next.js جديد يدويًا، قم بتثبيت الحزم المطلوبة:
+
+```bash filename="Terminal"
+npm install next@latest react@latest react-dom@latest
+```
+
+افتح ملف `package.json` وأضف السكربتات التالية:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
+```
+
+تشير هذه السكربتات إلى مراحل مختلفة من تطوير التطبيق:
+
+- `dev`: يشغل [`next dev`](/docs/app/api-reference/cli/next#next-dev-options) لبدء Next.js في وضع التطوير.
+- `build`: يشغل [`next build`](/docs/app/api-reference/cli/next#next-build-options) لبناء التطبيق للاستخدام في الإنتاج.
+- `start`: يشغل [`next start`](/docs/app/api-reference/cli/next#next-start-options) لبدء خادم Next.js للإنتاج.
+- `lint`: يشغل [`next lint`](/docs/app/api-reference/cli/next#next-lint-options) لإعداد تهيئة ESLint المدمجة في Next.js.
+
+### إنشاء المجلدات
+
+يستخدم Next.js توجيه نظام الملفات، مما يعني أن المسارات في تطبيقك يتم تحديدها من خلال كيفية تنظيم ملفاتك.
+
+#### مجلد `app`
+
+لتطبيقات جديدة، نوصي باستخدام [موجه التطبيق](/docs/app). يسمح لك هذا الموجه باستخدام أحدث ميزات React وهو تطور لـ [موجه الصفحات](/docs/pages) بناءً على ملاحظات المجتمع.
+
+قم بإنشاء مجلد `app/`، ثم أضف ملف `layout.tsx` وملف `page.tsx`. سيتم عرض هذه الملفات عندما يزور المستخدم جذر تطبيقك (`/`).
+
+<Image
+  alt="هيكل مجلد التطبيق"
+  srcLight="/docs/light/app-getting-started.png"
+  srcDark="/docs/dark/app-getting-started.png"
+  width="1600"
+  height="363"
+/>
+
+قم بإنشاء [تخطيط جذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) داخل `app/layout.tsx` مع العلامات المطلوبة `<html>` و`<body>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+أخيرًا، قم بإنشاء صفحة رئيسية `app/page.tsx` مع بعض المحتوى الأولي:
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+> **معلومة مفيدة**: إذا نسيت إنشاء `layout.tsx`، فسيقوم Next.js تلقائيًا بإنشاء هذا الملف عند تشغيل خادم التطوير باستخدام `next dev`.
+
+تعلم المزيد حول [استخدام موجه التطبيق](/docs/app/building-your-application/routing/defining-routes).
+
+#### مجلد `pages` (اختياري)
+
+إذا كنت تفضل استخدام موجه الصفحات بدلاً من موجه التطبيق، يمكنك إنشاء مجلد `pages/` في جذر مشروعك.
+
+ثم أضف ملف `index.tsx` داخل مجلد `pages`. سيكون هذا صفحتك الرئيسية (`/`):
+
+```tsx filename="pages/index.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+بعد ذلك، أضف ملف `_app.tsx` داخل `pages/` لتحديد التخطيط العام. تعلم المزيد حول [ملف التطبيق المخصص](/docs/pages/building-your-application/routing/custom-app).
+
+```tsx filename="pages/_app.tsx" switcher
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+أخيرًا، أضف ملف `_document.tsx` داخل `pages/` للتحكم في الاستجابة الأولية من الخادم. تعلم المزيد حول [ملف المستند المخصص](/docs/pages/building-your-application/routing/custom-document).
+
+```tsx filename="pages/_document.tsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+تعلم المزيد حول [استخدام موجه الصفحات](/docs/pages/building-your-application/routing/pages-and-layouts).
+
+> **معلومة مفيدة**: على الرغم من أنه يمكنك استخدام كلا الموجهين في نفس المشروع، إلا أن المسارات في `app` ستكون ذات أولوية على `pages`. نوصي باستخدام موجه واحد فقط في مشروعك الجديد لتجنب الارتباك.
+
+#### مجلد `public` (اختياري)
+
+قم بإنشاء مجلد `public` لتخزين الأصول الثابتة مثل الصور والخطوط وغيرها. يمكن بعد ذلك الإشارة إلى الملفات داخل مجلد `public` من خلال الكود الخاص بك بدءًا من عنوان URL الأساسي (`/`).
+
+## تشغيل خادم التطوير
+
+1. قم بتنفيذ `npm run dev` لبدء خادم التطوير.
+2. قم بزيارة `http://localhost:3000` لعرض تطبيقك.
+3. قم بتعديل ملف `app/page.tsx` (أو `pages/index.tsx`) واحفظه لرؤية النتيجة المحدثة في متصفحك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/01-getting-started/02-project-structure.mdx b/apps/docs/content/ar/docs/14/01-getting-started/02-project-structure.mdx
new file mode 100644
index 00000000..7210baaf
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/01-getting-started/02-project-structure.mdx
@@ -0,0 +1,169 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:16:58.711Z
+title: هيكل مشروع Next.js
+nav_title: هيكل المشروع
+description: قائمة باتفاقيات المجلدات والملفات في مشروع Next.js
+---
+
+توفر هذه الصفحة نظرة عامة على هيكل مشروع تطبيق Next.js. وهي تغطي الملفات والمجلدات الرئيسية، وملفات التكوين، واتفاقيات التوجيه داخل مجلدي `app` و `pages`.
+
+انقر على أسماء الملفات والمجلدات لمعرفة المزيد عن كل اتفاقية.
+
+## المجلدات الرئيسية
+
+تُستخدم المجلدات الرئيسية لتنظيم الكود والأصول الثابتة لتطبيقك.
+
+<Image
+  alt="Route segments to path segments"
+  srcLight="/docs/light/top-level-folders.png"
+  srcDark="/docs/dark/top-level-folders.png"
+  width="1600"
+  height="525"
+/>
+
+|                                                                          |                                    |
+| ------------------------------------------------------------------------ | ---------------------------------- |
+| [`app`](/docs/app/building-your-application/routing)                     | موجه التطبيق (App Router)          |
+| [`pages`](/docs/pages/building-your-application/routing)                 | موجه الصفحات (Pages Router)        |
+| [`public`](/docs/app/building-your-application/optimizing/static-assets) | الأصول الثابتة التي سيتم تقديمها    |
+| [`src`](/docs/app/building-your-application/configuring/src-directory)   | مجلد مصدر التطبيق الاختياري         |
+
+## الملفات الرئيسية
+
+تُستخدم الملفات الرئيسية لتكوين تطبيقك، وإدارة التبعيات، وتشغيل البرمجيات الوسيطة، ودمج أدوات المراقبة، وتحديد متغيرات البيئة.
+
+|                                                                                             |                                         |
+| ------------------------------------------------------------------------------------------- | --------------------------------------- |
+| **Next.js**                                                                                 |                                         |
+| [`next.config.js`](/docs/app/api-reference/next-config-js)                                  | ملف تكوين Next.js                       |
+| [`package.json`](/docs/getting-started/installation#manual-installation)                    | تبعيات المشروع والنصوص البرمجية         |
+| [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation)      | ملف OpenTelemetry والأدوات (Instrumentation) |
+| [`middleware.ts`](/docs/app/building-your-application/routing/middleware)                   | برمجية وسيطة لطلبات Next.js             |
+| [`.env`](/docs/app/building-your-application/configuring/environment-variables)             | متغيرات البيئة                          |
+| [`.env.local`](/docs/app/building-your-application/configuring/environment-variables)       | متغيرات البيئة المحلية                  |
+| [`.env.production`](/docs/app/building-your-application/configuring/environment-variables)  | متغيرات بيئة الإنتاج                    |
+| [`.env.development`](/docs/app/building-your-application/configuring/environment-variables) | متغيرات بيئة التطوير                    |
+| [`.eslintrc.json`](/docs/app/building-your-application/configuring/eslint)                  | ملف تكوين ESLint                        |
+| `.gitignore`                                                                                | ملفات ومجلدات Git لتجاهلها              |
+| `next-env.d.ts`                                                                             | ملف تعريف TypeScript لـ Next.js         |
+| `tsconfig.json`                                                                             | ملف تكوين TypeScript                    |
+| `jsconfig.json`                                                                             | ملف تكوين JavaScript                    |
+
+## اتفاقيات التوجيه في `app`
+
+تستخدم اتفاقيات الملفات التالية لتحديد المسارات وإدارة البيانات الوصفية في [موجه `app`](/docs/app).
+
+### ملفات التوجيه
+
+|                                                                                 |                     |                              |
+| ------------------------------------------------------------------------------- | ------------------- | ---------------------------- |
+| [`layout`](/docs/app/api-reference/file-conventions/layout)                     | `.js` `.jsx` `.tsx` | التخطيط (Layout)             |
+| [`page`](/docs/app/api-reference/file-conventions/page)                         | `.js` `.jsx` `.tsx` | الصفحة (Page)                |
+| [`loading`](/docs/app/api-reference/file-conventions/loading)                   | `.js` `.jsx` `.tsx` | واجهة التحميل (Loading UI)   |
+| [`not-found`](/docs/app/api-reference/file-conventions/not-found)               | `.js` `.jsx` `.tsx` | واجهة غير موجود (Not found UI) |
+| [`error`](/docs/app/api-reference/file-conventions/error)                       | `.js` `.jsx` `.tsx` | واجهة الخطأ (Error UI)       |
+| [`global-error`](/docs/app/api-reference/file-conventions/error#global-errorjs) | `.js` `.jsx` `.tsx` | واجهة الخطأ العامة (Global error UI) |
+| [`route`](/docs/app/api-reference/file-conventions/route)                       | `.js` `.ts`         | نقطة نهاية API               |
+| [`template`](/docs/app/api-reference/file-conventions/template)                 | `.js` `.jsx` `.tsx` | تخطيط معاد تقديمه             |
+| [`default`](/docs/app/api-reference/file-conventions/default)                   | `.js` `.jsx` `.tsx` | صفحة احتياطية للمسار الموازي  |
+
+### المسارات المتداخلة
+
+|                                                                              |                      |
+| ---------------------------------------------------------------------------- | -------------------- |
+| [`folder`](/docs/app/building-your-application/routing#route-segments)       | مقطع المسار (Route segment) |
+| [`folder/folder`](/docs/app/building-your-application/routing#nested-routes) | مقطع مسار متداخل (Nested route segment) |
+
+### المسارات الديناميكية
+
+|                                                                                                           |                                  |
+| --------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| [`[folder]`](/docs/app/building-your-application/routing/dynamic-routes#convention)                       | مقطع مسار ديناميكي (Dynamic route segment) |
+| [`[...folder]`](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)            | مقطع مسار شامل (Catch-all route segment) |
+| [`[[...folder]]`](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | مقطع مسار شامل اختياري (Optional catch-all route segment) |
+
+### مجموعات المسارات والمجلدات الخاصة
+
+|                                                                                     |                                                  |
+| ----------------------------------------------------------------------------------- | ------------------------------------------------ |
+| [`(folder)`](/docs/app/building-your-application/routing/route-groups#convention)   | تجميع المسارات دون التأثير على التوجيه           |
+| [`_folder`](/docs/app/building-your-application/routing/colocation#private-folders) | استبعاد المجلد وجميع المقاطع الفرعية من التوجيه  |
+
+### المسارات المتوازية والمقاطعة
+
+|                                                                                                |                            |
+| ---------------------------------------------------------------------------------------------- | -------------------------- |
+| [`@folder`](/docs/app/building-your-application/routing/parallel-routes#slots)                 | فتحة مسماة (Named slot)    |
+| [`(.)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention)      | مقاطعة نفس المستوى         |
+| [`(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention)     | مقاطعة مستوى واحد أعلى     |
+| [`(..)(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | مقاطعة مستويين أعلى        |
+| [`(...)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention)    | مقاطعة من الجذر (Root)     |
+
+### اتفاقيات ملفات البيانات الوصفية
+
+#### أيقونات التطبيق
+
+|                                                                                                                 |                                     |                          |
+| --------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------ |
+| [`favicon`](/docs/app/api-reference/file-conventions/metadata/app-icons#favicon)                                | `.ico`                              | ملف الأيقونة المفضلة (Favicon) |
+| [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#icon)                                      | `.ico` `.jpg` `.jpeg` `.png` `.svg` | ملف أيقونة التطبيق        |
+| [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx)       | `.js` `.ts` `.tsx`                  | أيقونة التطبيق المولدة   |
+| [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#apple-icon)                          | `.jpg` `.jpeg`, `.png`              | ملف أيقونة Apple         |
+| [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx) | `.js` `.ts` `.tsx`                  | أيقونة Apple المولدة     |
+
+#### صور Open Graph و Twitter
+
+|                                                                                                                             |                              |                            |
+| --------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------- |
+| [`opengraph-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#opengraph-image)                      | `.jpg` `.jpeg` `.png` `.gif` | ملف صورة Open Graph        |
+| [`opengraph-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx) | `.js` `.ts` `.tsx`           | صورة Open Graph المولدة    |
+| [`twitter-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#twitter-image)                          | `.jpg` `.jpeg` `.png` `.gif` | ملف صورة Twitter           |
+| [`twitter-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx)   | `.js` `.ts` `.tsx`           | صورة Twitter المولدة       |
+
+#### تحسين محركات البحث (SEO)
+
+|                                                                                                              |             |                       |
+| ------------------------------------------------------------------------------------------------------------ | ----------- | --------------------- |
+| [`sitemap`](/docs/app/api-reference/file-conventions/metadata/sitemap#sitemap-files-xml)                     | `.xml`      | ملف خريطة الموقع (Sitemap) |
+| [`sitemap`](/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts) | `.js` `.ts` | خريطة الموقع المولدة   |
+| [`robots`](/docs/app/api-reference/file-conventions/metadata/robots#static-robotstxt)                        | `.txt`      | ملف robots.txt        |
+| [`robots`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file)                  | `.js` `.ts` | ملف robots.txt المولد |
+
+## اتفاقيات التوجيه في `pages`
+
+تستخدم اتفاقيات الملفات التالية لتحديد المسارات في [موجه `pages`](/docs/pages).
+
+### ملفات خاصة
+
+|                                                                                                             |                     |                   |
+| ----------------------------------------------------------------------------------------------------------- | ------------------- | ----------------- |
+| [`_app`](/docs/pages/building-your-application/routing/custom-app)                                          | `.js` `.jsx` `.tsx` | تطبيق مخصص (Custom App) |
+| [`_document`](/docs/pages/building-your-application/routing/custom-document)                                | `.js` `.jsx` `.tsx` | مستند مخصص (Custom Document) |
+| [`_error`](/docs/pages/building-your-application/routing/custom-error#more-advanced-error-page-customizing) | `.js` `.jsx` `.tsx` | صفحة خطأ مخصصة    |
+| [`404`](/docs/pages/building-your-application/routing/custom-error#404-page)                                | `.js` `.jsx` `.tsx` | صفحة خطأ 404      |
+| [`500`](/docs/pages/building-your-application/routing/custom-error#500-page)                                | `.js` `.jsx` `.tsx` | صفحة خطأ 500      |
+
+### المسارات
+
+|                                                                                                |                     |             |
+| ---------------------------------------------------------------------------------------------- | ------------------- | ----------- |
+| **اتفاقية المجلد**                                                                          |                     |             |
+| [`index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes)        | `.js` `.jsx` `.tsx` | الصفحة الرئيسية |
+| [`folder/index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) | `.js` `.jsx` `.tsx` | صفحة متداخلة |
+| **اتفاقية الملف**                                                                            |                     |             |
+| [`index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes)        | `.js` `.jsx` `.tsx` | الصفحة الرئيسية |
+| [`file`](/docs/pages/building-your-application/routing/pages-and-layouts)                      | `.js` `.jsx` `.tsx` | صفحة متداخلة |
+
+### المسارات الديناميكية
+
+|                                                                                                                   |                     |                                  |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------- | -------------------------------- |
+| **اتفاقية المجلد**                                                                                             |                     |                                  |
+| [`[folder]/index`](/docs/pages/building-your-application/routing/dynamic-routes)                                  | `.js` `.jsx` `.tsx` | مقطع مسار ديناميكي               |
+| [`[...folder]/index`](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments)            | `.js` `.jsx` `.tsx` | مقطع مسار شامل                   |
+| [`[[...folder]]/index`](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | مقطع مسار شامل اختياري           |
+| **اتفاقية الملف**                                                                                               |                     |                                  |
+| [`[file]`](/docs/pages/building-your-application/routing/dynamic-routes)                                          | `.js` `.jsx` `.tsx` | مقطع مسار ديناميكي               |
+| [`[...file]`](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments)                    | `.js` `.jsx` `.tsx` | مقطع مسار شامل                   |
+| [`[[...file]]`](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments)         | `.js` `.jsx` `.tsx` | مقطع مسار شامل اختياري           |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/01-getting-started/index.mdx b/apps/docs/content/ar/docs/14/01-getting-started/index.mdx
new file mode 100644
index 00000000..a85ce928
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/01-getting-started/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:37.515Z
+title: البدء
+description: تعلم كيفية إنشاء تطبيقات ويب كاملة المكدس باستخدام إطار العمل Next.js.
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/01-defining-routes.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/01-defining-routes.mdx
new file mode 100644
index 00000000..e1fc2241
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/01-defining-routes.mdx
@@ -0,0 +1,60 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:01.658Z
+title: تعريف المسارات (Routes)
+description: تعلم كيفية إنشاء أول مسار (route) في Next.js.
+related:
+  description: تعلم المزيد حول إنشاء الصفحات (pages) والتخطيطات (layouts).
+  links:
+    - app/building-your-application/routing/pages-and-layouts
+---
+
+> نوصي بقراءة صفحة [أساسيات التوجيه (Routing Fundamentals)](/docs/app/building-your-application/routing) قبل المتابعة.
+
+سيرشدك هذه الصفحة حول كيفية تعريف وتنظيم المسارات (routes) في تطبيق Next.js الخاص بك.
+
+## إنشاء المسارات
+
+يستخدم Next.js موجهًا يعتمد على نظام الملفات حيث تُستخدم **المجلدات** لتعريف المسارات.
+
+يمثل كل مجلد [قطعة مسار (route segment)](/docs/app/building-your-application/routing#route-segments) تُرسم إلى **قطعة URL**. لإنشاء [مسار متداخل (nested route)](/docs/app/building-your-application/routing#nested-routes)، يمكنك تداخل المجلدات داخل بعضها البعض.
+
+<Image
+  alt="Route segments to path segments"
+  srcLight="/docs/light/route-segments-to-path-segments.png"
+  srcDark="/docs/dark/route-segments-to-path-segments.png"
+  width="1600"
+  height="594"
+/>
+
+يتم استخدام ملف خاص [`page.js`](/docs/app/building-your-application/routing/pages-and-layouts#pages) لجعل قطع المسار قابلة للوصول علنًا.
+
+<Image
+  alt="Defining Routes"
+  srcLight="/docs/light/defining-routes.png"
+  srcDark="/docs/dark/defining-routes.png"
+  width="1600"
+  height="687"
+/>
+
+في هذا المثال، مسار URL `/dashboard/analytics` _ليس_ متاحًا للجمهور لأنه لا يحتوي على ملف `page.js` مقابِل. يمكن استخدام هذا المجلد لتخزين المكونات (components)، أو ملفات الأنماط (stylesheets)، أو الصور، أو غيرها من الملفات المجمعة.
+
+> **معلومة مفيدة**: يمكن استخدام امتدادات الملفات `.js`، `.jsx`، أو `.tsx` للملفات الخاصة.
+
+## إنشاء واجهة المستخدم
+
+تُستخدم [اصطلاحات الملفات الخاصة](/docs/app/building-your-application/routing#file-conventions) لإنشاء واجهة المستخدم لكل قطعة مسار. الأكثر شيوعًا هي [الصفحات (pages)](/docs/app/building-your-application/routing/pages-and-layouts#pages) لعرض واجهة المستخدم الفريدة للمسار، و[التخطيطات (layouts)](/docs/app/building-your-application/routing/pages-and-layouts#layouts) لعرض واجهة المستخدم المشتركة بين عدة مسارات.
+
+على سبيل المثال، لإنشاء صفحتك الأولى، أضف ملف `page.js` داخل مجلد `app` وقم بتصدير مكون React:
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx
new file mode 100644
index 00000000..d9e75143
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx
@@ -0,0 +1,271 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:05.971Z
+title: الصفحات والتخطيطات
+description: إنشاء أول صفحة لك وتخطيط مشترك باستخدام موجه التطبيق (App Router).
+---
+
+> نوصي بقراءة صفحات [أساسيات التوجيه](/docs/app/building-your-application/routing) و[تحديد المسارات](/docs/app/building-your-application/routing/defining-routes) قبل المتابعة.
+
+تسمح لك الملفات الخاصة [layout.js](#layouts)، [page.js](#pages)، و [template.js](#templates) بإنشاء واجهة مستخدم لـ [مسار](/docs/app/building-your-application/routing/defining-routes#creating-routes). سيرشدك هذا الصفحة حول كيفية ومتى تستخدم هذه الملفات الخاصة.
+
+## الصفحات
+
+الصفحة هي واجهة مستخدم **فريدة** لمسار. يمكنك تعريف صفحة عن طريق تصدير مكون افتراضي من ملف `page.js`.
+
+على سبيل المثال، لإنشاء صفحتك `index`، أضف ملف `page.js` داخل دليل `app`:
+
+<Image
+  alt="ملف page.js الخاص"
+  srcLight="/docs/light/page-special-file.png"
+  srcDark="/docs/dark/page-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+```tsx filename="app/page.tsx" switcher
+// `app/page.tsx` هو واجهة المستخدم لمسار `/`
+export default function Page() {
+  return <h1>مرحبًا، الصفحة الرئيسية!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+// `app/page.js` هو واجهة المستخدم لمسار `/`
+export default function Page() {
+  return <h1>مرحبًا، الصفحة الرئيسية!</h1>
+}
+```
+
+ثم، لإنشاء صفحات إضافية، أنشئ مجلدًا جديدًا وأضف ملف `page.js` بداخله. على سبيل المثال، لإنشاء صفحة لمسار `/dashboard`، أنشئ مجلدًا جديدًا باسم `dashboard`، وأضف ملف `page.js` بداخله:
+
+```tsx filename="app/dashboard/page.tsx" switcher
+// `app/dashboard/page.tsx` هو واجهة المستخدم لمسار `/dashboard`
+export default function Page() {
+  return <h1>مرحبًا، صفحة لوحة التحكم!</h1>
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+// `app/dashboard/page.js` هو واجهة المستخدم لمسار `/dashboard`
+export default function Page() {
+  return <h1>مرحبًا، صفحة لوحة التحكم!</h1>
+}
+```
+
+> **جيد أن تعرف**:
+>
+> - يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للصفحات.
+> - الصفحة هي دائمًا [ورقة](/docs/app/building-your-application/routing#terminology) لـ [شجرة المسار الفرعية](/docs/app/building-your-application/routing#terminology).
+> - ملف `page.js` مطلوب لجعل جزء المسار قابلًا للوصول علنًا.
+> - الصفحات هي [مكونات خادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا، ولكن يمكن تعيينها كـ [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components).
+> - يمكن للصفحات جلب البيانات. راجع قسم [جلب البيانات](/docs/app/building-your-application/data-fetching) لمزيد من المعلومات.
+
+## التخطيطات
+
+التخطيط هو واجهة مستخدم **مشتركة** بين مسارات متعددة. عند التنقل، تحافظ التخطيطات على الحالة، تبقى تفاعلية، ولا تعيد التصيير. يمكن أيضًا [تداخل التخطيطات](#nesting-layouts).
+
+يمكنك تعريف تخطيط عن طريق تصدير مكون React افتراضي من ملف `layout.js`. يجب أن يقبل المكون خاصية `children` التي سيتم ملؤها بتخطيط فرعي (إذا وجد) أو صفحة أثناء التصيير.
+
+على سبيل المثال، سيكون التخطيط مشتركًا مع صفحات `/dashboard` و `/dashboard/settings`:
+
+<Image
+  alt="ملف layout.js الخاص"
+  srcLight="/docs/light/layout-special-file.png"
+  srcDark="/docs/dark/layout-special-file.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+export default function DashboardLayout({
+  children, // سيكون صفحة أو تخطيط متداخل
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <section>
+      {/* ضع واجهة المستخدم المشتركة هنا مثل رأس أو شريط جانبي */}
+      <nav></nav>
+
+      {children}
+    </section>
+  )
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+export default function DashboardLayout({
+  children, // سيكون صفحة أو تخطيط متداخل
+}) {
+  return (
+    <section>
+      {/* ضع واجهة المستخدم المشتركة هنا مثل رأس أو شريط جانبي */}
+      <nav></nav>
+
+      {children}
+    </section>
+  )
+}
+```
+
+### التخطيط الجذري (مطلوب)
+
+يتم تعريف التخطيط الجذري في المستوى الأعلى من دليل `app` وينطبق على جميع المسارات. هذا التخطيط **مطلوب** ويجب أن يحتوي على علامات `html` و `body`، مما يسمح لك بتعديل HTML الأولي المرسل من الخادم.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {/* واجهة مستخدم التخطيط */}
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {/* واجهة مستخدم التخطيط */}
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
+```
+
+### تداخل التخطيطات
+
+افتراضيًا، التخطيطات في تسلسل المجلدات **متداخلة**، مما يعني أنها تغلف التخطيطات الفرعية عبر خاصية `children`. يمكنك تداخل التخطيطات عن طريق إضافة `layout.js` داخل أجزاء مسار محددة (مجلدات).
+
+على سبيل المثال، لإنشاء تخطيط لمسار `/dashboard`، أضف ملف `layout.js` جديد داخل مجلد `dashboard`:
+
+<Image
+  alt="تخطيط متداخل"
+  srcLight="/docs/light/nested-layout.png"
+  srcDark="/docs/dark/nested-layout.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <section>{children}</section>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+export default function DashboardLayout({ children }) {
+  return <section>{children}</section>
+}
+```
+
+إذا كنت ستجمع بين التخطيطين أعلاه، فإن التخطيط الجذري (`app/layout.js`) سيغلف تخطيط لوحة التحكم (`app/dashboard/layout.js`)، والذي بدوره سيغلف أجزاء المسار داخل `app/dashboard/*`.
+
+سيتم تداخل التخطيطين كما يلي:
+
+<Image
+  alt="تخطيطات متداخلة"
+  srcLight="/docs/light/nested-layouts-ui.png"
+  srcDark="/docs/dark/nested-layouts-ui.png"
+  width="1600"
+  height="1026"
+/>
+
+> **جيد أن تعرف**:
+>
+> - يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للتخطيطات.
+> - فقط التخطيط الجذري يمكن أن يحتوي على علامات `<html>` و `<body>`.
+> - عند تعريف ملف `layout.js` و `page.js` في نفس المجلد، سيقوم التخطيط بتغليف الصفحة.
+> - التخطيطات هي [مكونات خادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا ولكن يمكن تعيينها كـ [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components).
+> - يمكن للتخطيطات جلب البيانات. راجع قسم [جلب البيانات](/docs/app/building-your-application/data-fetching) لمزيد من المعلومات.
+> - لا يمكن تمرير البيانات بين تخطيط رئيسي وأطفاله. ومع ذلك، يمكنك جلب نفس البيانات في مسار أكثر من مرة، وسيقوم React [بإزالة التكرارات تلقائيًا](/docs/app/building-your-application/caching#request-memoization) دون التأثير على الأداء.
+> - لا يمكن للتخطيطات الوصول إلى أجزاء المسار أسفلها. للوصول إلى جميع أجزاء المسار، يمكنك استخدام [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment) أو [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) في مكون عميل.
+> - يمكنك استخدام [مجموعات المسار (Route Groups)](/docs/app/building-your-application/routing/route-groups) لاختيار أجزاء مسار محددة داخل أو خارج التخطيطات المشتركة.
+> - يمكنك استخدام [مجموعات المسار (Route Groups)](/docs/app/building-your-application/routing/route-groups) لإنشاء تخطيطات جذرية متعددة. راجع [مثال هنا](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts).
+> - **الترحيل من دليل `pages`:** يحل التخطيط الجذري محل ملفات [`_app.js`](/docs/pages/building-your-application/routing/custom-app) و [`_document.js`](/docs/pages/building-your-application/routing/custom-document). [راجع دليل الترحيل](/docs/app/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs).
+
+## القوالب
+
+القوالب مشابهة للتخطيطات من حيث أنها تغلف كل تخطيط فرعي أو صفحة. على عكس التخطيطات التي تستمر عبر المسارات وتحافظ على الحالة، تنشئ القوالب نسخة جديدة لكل من أطفالها عند التنقل. هذا يعني أنه عندما ينتقل المستخدم بين المسارات التي تشترك في قالب، يتم تحميل نسخة جديدة من المكون، يتم إعادة إنشاء عناصر DOM، **لا** يتم الحفاظ على الحالة، ويعاد مزامنة التأثيرات.
+
+قد تكون هناك حالات تحتاج فيها إلى هذه السلوكيات المحددة، وتكون القوالب خيارًا أكثر ملاءمة من التخطيطات. على سبيل المثال:
+
+- الميزات التي تعتمد على `useEffect` (مثل تسجيل مشاهدات الصفحة) و `useState` (مثل نموذج تعليقات لكل صفحة).
+> - لتغيير سلوك الإطار الافتراضي. على سبيل المثال، حدود Suspense داخل التخطيطات تظهر الحالة الاحتياطية فقط عند تحميل التخطيط لأول مرة وليس عند تبديل الصفحات. بالنسبة للقوالب، تظهر الحالة الاحتياطية في كل تنقل.
+
+يمكن تعريف قالب عن طريق تصدير مكون React افتراضي من ملف `template.js`. يجب أن يقبل المكون خاصية `children`.
+
+<Image
+  alt="ملف template.js الخاص"
+  srcLight="/docs/light/template-special-file.png"
+  srcDark="/docs/dark/template-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+```tsx filename="app/template.tsx" switcher
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>
+}
+```
+
+```jsx filename="app/template.js" switcher
+export default function Template({ children }) {
+  return <div>{children}</div>
+}
+```
+
+من حيث التداخل، يتم تصيير `template.js` بين التخطيط وأطفاله. إليك نتيجة مبسطة:
+
+```jsx filename="Output"
+<Layout>
+  {/* لاحظ أن القالب لديه مفتاح فريد. */}
+  <Template key={routeParam}>{children}</Template>
+</Layout>
+```
+
+## البيانات الوصفية
+
+في دليل `app`، يمكنك تعديل عناصر HTML `<head>` مثل `title` و `meta` باستخدام [واجهات برمجة تطبيقات البيانات الوصفية (Metadata APIs)](/docs/app/building-your-application/optimizing/metadata).
+
+يمكن تعريف البيانات الوصفية عن طريق تصدير [كائن `metadata`](/docs/app/api-reference/functions/generate-metadata#the-metadata-object) أو [دالة `generateMetadata`](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) في ملف [`layout.js`](/docs/app/api-reference/file-conventions/layout) أو [`page.js`](/docs/app/api-reference/file-conventions/page).
+
+```tsx filename="app/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Next.js',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+```jsx filename="app/page.js" switcher
+export const metadata = {
+  title: 'Next.js',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+> **جيد أن تعرف**: يجب **ألا** تضيف يدويًا علامات `<head>` مثل `<title>` و `<meta>` إلى التخطيطات الجذرية. بدلاً من ذلك، يجب استخدام [واجهة برمجة تطبيقات البيانات الوصفية (Metadata API)](/docs/app/api-reference/functions/generate-metadata) التي تتعامل تلقائيًا مع المتطلبات المتقدمة مثل البث وإزالة تكرار عناصر `<head>`.
+
+تعرف على المزيد حول خيارات البيانات الوصفية المتاحة في [مرجع API](/docs/app/api-reference/functions/generate-metadata)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
new file mode 100644
index 00000000..59136eec
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -0,0 +1,417 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:28.137Z
+title: الربط والتنقل
+description: تعرف على كيفية عمل التنقل في Next.js، وكيفية استخدام مكون Link وخطاف `useRouter`.
+related:
+  links:
+    - app/building-your-application/caching
+    - app/building-your-application/configuring/typescript
+---
+
+هناك أربع طرق للتنقل بين المسارات في Next.js:
+
+- استخدام [مكون `<Link>`](#link-component)
+- استخدام [خطاف `useRouter`](#userouter-hook) ([مكونات العميل](/docs/app/building-your-application/rendering/client-components))
+- استخدام [دالة `redirect`](#redirect-function) ([مكونات الخادم](/docs/app/building-your-application/rendering/server-components))
+- استخدام [واجهة History الأصلية](#using-the-native-history-api)
+
+ستغطي هذه الصفحة كيفية استخدام كل من هذه الخيارات، والتعمق في كيفية عمل التنقل.
+
+## مكون `<Link>`
+
+`<Link>` هو مكون مدمج يمتد من وسم HTML `<a>` لتوفير [الجلب المسبق](#2-prefetching) والتنقل بين المسارات من جانب العميل. وهو الطريقة الأساسية والموصى بها للتنقل بين المسارات في Next.js.
+
+يمكنك استخدامه عن طريق استيراده من `next/link`، وتمرير خاصية `href` إلى المكون:
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">لوحة التحكم</Link>
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">لوحة التحكم</Link>
+}
+```
+
+هناك خصائص اختيارية أخرى يمكنك تمريرها إلى `<Link>`. راجع [مرجع API](/docs/app/api-reference/components/link) للمزيد.
+
+### أمثلة
+
+#### الربط إلى الأجزاء الديناميكية
+
+عند الربط إلى [الأجزاء الديناميكية](/docs/app/building-your-application/routing/dynamic-routes)، يمكنك استخدام [القوالب الحرفية والاستيفاء](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) لإنشاء قائمة من الروابط. على سبيل المثال، لإنشاء قائمة من منشورات المدونة:
+
+```jsx filename="app/blog/PostList.js"
+import Link from 'next/link'
+
+export default function PostList({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+#### التحقق من الروابط النشطة
+
+يمكنك استخدام [`usePathname()`](/docs/app/api-reference/functions/use-pathname) لتحديد ما إذا كان الرابط نشطًا. على سبيل المثال، لإضافة فئة إلى الرابط النشط، يمكنك التحقق مما إذا كان `pathname` الحالي يتطابق مع `href` الرابط:
+
+```tsx filename="app/components/links.tsx" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function Links() {
+  const pathname = usePathname()
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
+            الرئيسية
+          </Link>
+        </li>
+        <li>
+          <Link
+            className={`link ${pathname === '/about' ? 'active' : ''}`}
+            href="/about"
+          >
+            حول
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  )
+}
+```
+
+```jsx filename="app/components/links.js" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function Links() {
+  const pathname = usePathname()
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
+            الرئيسية
+          </Link>
+        </li>
+        <li>
+          <Link
+            className={`link ${pathname === '/about' ? 'active' : ''}`}
+            href="/about"
+          >
+            حول
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  )
+}
+```
+
+#### التمرير إلى `id`
+
+السلوك الافتراضي لموجه تطبيق Next.js هو **التمرير إلى أعلى مسار جديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام**.
+
+إذا كنت ترغب في التمرير إلى `id` معين عند التنقل، يمكنك إضافة رابط `#` إلى عنوان URL الخاص بك أو تمرير رابط `#` إلى خاصية `href`. هذا ممكن لأن `<Link>` يتم عرضه كوسم `<a>`.
+
+```jsx
+<Link href="/dashboard#settings">الإعدادات</Link>
+
+// الناتج
+<a href="/dashboard#settings">الإعدادات</a>
+```
+
+> **جيد أن تعرف**:
+>
+> - سيقوم Next.js بالتمرير إلى [الصفحة](/docs/app/building-your-application/routing/pages-and-layouts#pages) إذا لم تكن مرئية في نافذة العرض عند التنقل.
+
+#### تعطيل استعادة التمرير
+
+السلوك الافتراضي لموجه تطبيق Next.js هو **التمرير إلى أعلى مسار جديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام**. إذا كنت ترغب في تعطيل هذا السلوك، يمكنك تمرير `scroll={false}` إلى مكون `<Link>`، أو `scroll: false` إلى `router.push()` أو `router.replace()`.
+
+```jsx
+// next/link
+<Link href="/dashboard" scroll={false}>
+  لوحة التحكم
+</Link>
+```
+
+```jsx
+// useRouter
+import { useRouter } from 'next/navigation'
+
+const router = useRouter()
+
+router.push('/dashboard', { scroll: false })
+```
+
+## خطاف `useRouter()`
+
+يسمح لك خطاف `useRouter` بتغيير المسارات برمجيًا من [مكونات العميل](/docs/app/building-your-application/rendering/client-components).
+
+```jsx filename="app/page.js"
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      لوحة التحكم
+    </button>
+  )
+}
+```
+
+للحصول على قائمة كاملة بطرق `useRouter`، راجع [مرجع API](/docs/app/api-reference/functions/use-router).
+
+> **توصية:** استخدم مكون `<Link>` للتنقل بين المسارات ما لم يكن لديك متطلب محدد لاستخدام `useRouter`.
+
+## دالة `redirect`
+
+بالنسبة لـ [مكونات الخادم](/docs/app/building-your-application/rendering/server-components)، استخدم دالة `redirect` بدلاً من ذلك.
+
+```tsx filename="app/team/[id]/page.tsx" switcher
+import { redirect } from 'next/navigation'
+
+async function fetchTeam(id: string) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }: { params: { id: string } }) {
+  const team = await fetchTeam(params.id)
+  if (!team) {
+    redirect('/login')
+  }
+
+  // ...
+}
+```
+
+```jsx filename="app/team/[id]/page.js" switcher
+import { redirect } from 'next/navigation'
+
+async function fetchTeam(id) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }) {
+  const team = await fetchTeam(params.id)
+  if (!team) {
+    redirect('/login')
+  }
+
+  // ...
+}
+```
+
+> **جيد أن تعرف**:
+>
+> - تُرجع `redirect` رمز حالة 307 (إعادة توجيه مؤقت) افتراضيًا. عند استخدامها في إجراء خادم، تُرجع 303 (انظر الآخر)، والذي يُستخدم عادةً لإعادة التوجيه إلى صفحة نجاح نتيجة لطلب POST.
+> - تطرح `redirect` خطأ داخليًا لذا يجب استدعاؤها خارج كتل `try/catch`.
+> - يمكن استدعاء `redirect` في مكونات العميل أثناء عملية العرض ولكن ليس في معالجات الأحداث. يمكنك استخدام [خطاف `useRouter`](#userouter-hook) بدلاً من ذلك.
+> - تقبل `redirect` أيضًا عناوين URL المطلقة ويمكن استخدامها لإعادة التوجيه إلى روابط خارجية.
+> - إذا كنت ترغب في إعادة التوجيه قبل عملية العرض، استخدم [`next.config.js`](/docs/app/building-your-application/routing/redirecting#redirects-in-nextconfigjs) أو [البرنامج الوسيط](/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware).
+
+راجع [مرجع API لـ `redirect`](/docs/app/api-reference/functions/redirect) للمزيد من المعلومات.
+
+## استخدام واجهة History الأصلية
+
+يسمح لك Next.js باستخدام الطرق الأصلية [`window.history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) و [`window.history.replaceState`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState) لتحديث سجل المتصفح دون إعادة تحميل الصفحة.
+
+تتكامل استدعاءات `pushState` و `replaceState` مع موجه Next.js، مما يسمح لك بالمزامنة مع [`usePathname`](/docs/app/api-reference/functions/use-pathname) و [`useSearchParams`](/docs/app/api-reference/functions/use-search-params).
+
+### `window.history.pushState`
+
+استخدمها لإضافة إدخال جديد إلى سجل المتصفح. يمكن للمستخدم التنقل للخلف إلى الحالة السابقة. على سبيل المثال، لفرز قائمة من المنتجات:
+
+```tsx fileName="app/ui/sort-products.tsx" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SortProducts() {
+  const searchParams = useSearchParams()
+
+  function updateSorting(sortOrder: string) {
+    const params = new URLSearchParams(searchParams.toString())
+    params.set('sort', sortOrder)
+    window.history.pushState(null, '', `?${params.toString()}`)
+  }
+
+  return (
+    <>
+      <button onClick={() => updateSorting('asc')}>فرز تصاعدي</button>
+      <button onClick={() => updateSorting('desc')}>فرز تنازلي</button>
+    </>
+  )
+}
+```
+
+```jsx fileName="app/ui/sort-products.js" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SortProducts() {
+  const searchParams = useSearchParams()
+
+  function updateSorting(sortOrder) {
+    const params = new URLSearchParams(searchParams.toString())
+    params.set('sort', sortOrder)
+    window.history.pushState(null, '', `?${params.toString()}`)
+  }
+
+  return (
+    <>
+      <button onClick={() => updateSorting('asc')}>فرز تصاعدي</button>
+      <button onClick={() => updateSorting('desc')}>فرز تنازلي</button>
+    </>
+  )
+}
+```
+
+### `window.history.replaceState`
+
+استخدمها لاستبدال الإدخال الحالي في سجل المتصفح. لا يمكن للمستخدم التنقل للخلف إلى الحالة السابقة. على سبيل المثال، لتبديل لغة التطبيق:
+
+```tsx fileName="app/ui/locale-switcher.tsx" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export function LocaleSwitcher() {
+  const pathname = usePathname()
+
+  function switchLocale(locale: string) {
+    // مثال: '/en/about' أو '/fr/contact'
+    const newPath = `/${locale}${pathname}`
+    window.history.replaceState(null, '', newPath)
+  }
+
+  return (
+    <>
+      <button onClick={() => switchLocale('en')}>الإنجليزية</button>
+      <button onClick={() => switchLocale('fr')}>الفرنسية</button>
+    </>
+  )
+}
+```
+
+```jsx fileName="app/ui/locale-switcher.js" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export function LocaleSwitcher() {
+  const pathname = usePathname()
+
+  function switchLocale(locale) {
+    // مثال: '/en/about' أو '/fr/contact'
+    const newPath = `/${locale}${pathname}`
+    window.history.replaceState(null, '', newPath)
+  }
+
+  return (
+    <>
+      <button onClick={() => switchLocale('en')}>الإنجليزية</button>
+      <button onClick={() => switchLocale('fr')}>الفرنسية</button>
+    </>
+  )
+}
+```
+
+## كيفية عمل التوجيه والتنقل
+
+يستخدم موجه التطبيق نهجًا هجينًا للتوجيه والتنقل. على الخادم، يتم [تقسيم الكود](#1-code-splitting) تلقائيًا حسب أجزاء المسار. وعلى العميل، يقوم Next.js [بجلب مسبق](#2-prefetching) و[تخزين مؤقت](#3-caching) لأجزاء المسار. هذا يعني أنه عندما ينتقل المستخدم إلى مسار جديد، لا يقوم المتصفح بإعادة تحميل الصفحة، ويعاد عرض أجزاء المسار التي تتغير فقط - مما يحسن تجربة التنقل والأداء.
+
+### 1. تقسيم الكود
+
+يسمح لك تقسيم الكود بتقسيم كود التطبيق إلى حزم أصغر ليتم تنزيلها وتنفيذها بواسطة المتصفح. هذا يقلل من كمية البيانات المنقولة ووقت التنفيذ لكل طلب، مما يؤدي إلى تحسين الأداء.
+
+تسمح لك [مكونات الخادم](/docs/app/building-your-application/rendering/server-components) بتقسيم كود التطبيق تلقائيًا حسب أجزاء المسار. هذا يعني أنه يتم تحميل الكود المطلوب للمسار الحالي فقط عند التنقل.
+
+### 2. الجلب المسبق
+
+الجلب المسبق هو طريقة لتحميل مسار مسبقًا في الخلفية قبل أن يزوره المستخدم.
+
+هناك طريقتان لجلب المسارات مسبقًا في Next.js:
+
+- **مكون `<Link>`**: يتم جلب المسارات مسبقًا تلقائيًا عندما تصبح مرئية في نافذة عرض المستخدم. يحدث الجلب المسبق عند تحميل الصفحة لأول مرة أو عندما تصبح مرئية عن طريق التمرير.
+- **`router.prefetch()`**: يمكن استخدام خطاف `useRouter` لجلب المسارات مسبقًا برمجيًا.
+
+يختلف سلوك الجلب المسبق الافتراضي لـ `<Link>` (أي عندما تكون الخاصية `prefetch` غير محددة أو مضبوطة على `null`) اعتمادًا على استخدامك لـ [`loading.js`](/docs/app/api-reference/file-conventions/loading). يتم جلب التخطيط المشترك فقط، وصولاً إلى "شجرة" المكونات المعروضة حتى ملف `loading.js` الأول، وتخزينه مؤقتًا لمدة `30s`. هذا يقلل من تكلفة جلب مسار ديناميكي كامل، ويعني أنه يمكنك عرض [حالة تحميل فورية](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) لردود فعل مرئية أفضل للمستخدمين.
+
+يمكنك تعطيل الجلب المسبق عن طريق ضبط الخاصية `prefetch` على `false`. بدلاً من ذلك، يمكنك جلب بيانات الصفحة الكاملة بما يتجاوز حدود التحميل عن طريق ضبط الخاصية `prefetch` على `true`.
+
+راجع [مرجع API لـ `<Link>`](/docs/app/api-reference/components/link) للمزيد من المعلومات.
+
+> **جيد أن تعرف**:
+>
+> - لا يتم تمكين الجلب المسبق في وضع التطوير، فقط في الإنتاج.
+
+### 3. التخزين المؤقت
+
+يحتوي Next.js على **تخزين مؤقت من جانب العميل في الذاكرة** يسمى [تخزين الموجه المؤقت](/docs/app/building-your-application/caching#router-cache). أثناء تنقل المستخدمين في التطبيق، يتم تخزين حمولة مكون خادم React لأجزاء المسار المسبقة الجلب والمسارات التي تمت زيارتها في التخزين المؤقت.
+
+هذا يعني عند التنقل، يتم إعادة استخدام التخزين المؤقت قدر الإمكان، بدلاً من إجراء طلب جديد إلى الخادم - مما يحسن الأداء عن طريق تقليل عدد الطلبات والبيانات المنقولة.
+
+تعرف على المزيد حول كيفية عمل [تخزين الموجه المؤقت](/docs/app/building-your-application/caching#router-cache) وكيفية تكوينه.
+
+### 4. العرض الجزئي
+
+يعني العرض الجزئي أنه يتم إعادة عرض أجزاء المسار التي تتغير فقط عند التنقل على العميل، ويتم الحفاظ على أي أجزاء مشتركة.
+
+على سبيل المثال، عند التنقل بين مسارين شقيقين، `/dashboard/settings` و `/dashboard/analytics`، سيتم عرض صفحات `settings` و `analytics`، وسيتم الحفاظ على تخطيط `dashboard` المشترك.
+
+<Image
+  alt="كيف يعمل العرض الجزئي"
+  srcLight="/docs/light/partial-rendering.png"
+  srcDark="/docs/dark/partial-rendering.png"
+  width="1600"
+  height="945"
+/>
+
+بدون العرض الجزئي، سيؤدي كل تنقل إلى إعادة عرض الصفحة بالكامل على العميل. يؤدي عرض الجزء الذي يتغير فقط إلى تقليل كمية البيانات المنقولة ووقت التنفيذ، مما يؤدي إلى تحسين الأداء.
+
+### 5. التنقل الناعم
+
+يقوم المتصفحات بتنفيذ "تنقل صعب" عند التنقل بين الصفحات. يمكّن موجه تطبيق Next.js "التنقل الناعم" بين الصفحات، مما يضمن إعادة عرض أجزاء المسار التي تغيرت فقط (العرض الجزئي). هذا يمكّن من الحفاظ على حالة React للعميل أثناء التنقل.
+
+### 6. التنقل للخلف وللأمام
+
+افتراضيًا، سوف يحافظ Next.js على موضع التمرير للتنقل للخلف وللأمام، ويعيد استخدام أجزاء المسار في [تخزين الموجه المؤقت](/docs/app/building-your-application/caching#router-cache).
+
+### 7. التوجيه بين `pages/` و `app/`
+
+عند الترحيل التدريجي من `pages/` إلى `app/`، سيتعامل موجه Next.js تلقائيًا مع التنقل الصعب بين الاثنين. للكشف عن الانتقالات من `pages/` إلى `app/`، هناك مرشح لموجه العميل يستخدم التحقق الاحتمالي من مسارات التطبيق، مما قد يؤدي أحيانًا إلى نتائج إيجابية خاطئة. افتراضيًا، يجب أن تكون مثل هذه الحالات نادرة جدًا، حيث نقوم بتكوين احتمالية النتيجة الإيجابية الخاطئة لتكون 0.01%. يمكن تخصيص هذه الاحتمالية عبر خيار `experimental.clientRouterFilterAllowedRate` في `next.config.js`. من المهم ملاحظة أن خفض معدل النتائج الإيجابية الخاطئة سيزيد من حجم المرشح المُنشأ في حزمة العميل.
+
+بدلاً من ذلك، إذا كنت تفضل تعطيل هذه المعالجة تمامًا وإدارة التوجيه بين `pages/` و `app/` يدويًا، يمكنك ضبط `experimental.clientRouterFilter` على false في `next.config.js`. عند تعطيل هذه الميزة، لن يتم التنقل إلى أي مسارات ديناميكية في الصفحات التي تتداخل مع مسارات التطبيق بشكل صحيح افتراضيًا.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/04-loading-ui-and-streaming.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/04-loading-ui-and-streaming.mdx
new file mode 100644
index 00000000..bf65519e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/04-loading-ui-and-streaming.mdx
@@ -0,0 +1,186 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:01.409Z
+title: واجهة التحميل والبث (Streaming)
+description: مبنية على Suspense، تتيح لك واجهة التحميل إنشاء واجهة احتياطية لأجزاء مسار محددة، وبث المحتوى تلقائيًا عندما يصبح جاهزًا.
+---
+
+يساعدك الملف الخاص `loading.js` في إنشاء واجهة تحميل ذات معنى باستخدام [React Suspense](https://react.dev/reference/react/Suspense). مع هذه الاتفاقية، يمكنك عرض [حالة تحميل فورية](#instant-loading-states) من الخادم أثناء تحميل محتوى جزء المسار. يتم تبديل المحتوى الجديد تلقائيًا بمجرد اكتمال التصيير.
+
+<Image
+  alt="واجهة التحميل"
+  srcLight="/docs/light/loading-ui.png"
+  srcDark="/docs/dark/loading-ui.png"
+  width="1600"
+  height="691"
+/>
+
+## حالات التحميل الفورية
+
+حالة التحميل الفورية هي واجهة مستخدم احتياطية تُعرض فورًا عند التنقل. يمكنك تصيير مؤشرات تحميل مسبقًا مثل الهياكل العظمية (skeletons) والدوائر الدوارة (spinners)، أو جزء صغير لكن ذو معنى من الشاشات المستقبلية مثل صورة الغلاف، العنوان، إلخ. هذا يساعد المستخدمين على فهم أن التطبيق يستجيب ويوفر تجربة مستخدم أفضل.
+
+قم بإنشاء حالة تحميل عن طريق إضافة ملف `loading.js` داخل مجلد.
+
+<Image
+  alt="ملف loading.js الخاص"
+  srcLight="/docs/light/loading-special-file.png"
+  srcDark="/docs/dark/loading-special-file.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/loading.tsx" switcher
+export default function Loading() {
+  // يمكنك إضافة أي واجهة مستخدم داخل Loading، بما في ذلك الهيكل العظمي.
+  return <LoadingSkeleton />
+}
+```
+
+```jsx filename="app/dashboard/loading.js" switcher
+export default function Loading() {
+  // يمكنك إضافة أي واجهة مستخدم داخل Loading، بما في ذلك الهيكل العظمي.
+  return <LoadingSkeleton />
+}
+```
+
+في نفس المجلد، سيتم تداخل `loading.js` داخل `layout.js`. سيقوم تلقائيًا بتغليف ملف `page.js` وأي أطفال أدناه في حدود `<Suspense>`.
+
+<Image
+  alt="نظرة عامة على loading.js"
+  srcLight="/docs/light/loading-overview.png"
+  srcDark="/docs/dark/loading-overview.png"
+  width="1600"
+  height="768"
+/>
+
+> **جيد أن تعرف**:
+>
+> - التنقل فوري، حتى مع [التوجيه المركزي للخادم](/docs/app/building-your-application/routing/linking-and-navigating#how-routing-and-navigation-works).
+> - التنقل قابل للمقاطعة، مما يعني أن تغيير المسارات لا يحتاج إلى انتظار تحميل محتوى المسار بالكامل قبل التنقل إلى مسار آخر.
+> - تبقى التخطيطات المشتركة قابلة للتشغيل أثناء تحميل أجزاء المسار الجديدة.
+
+> **توصية:** استخدم اتفاقية `loading.js` لأجزاء المسار (التخطيطات والصفحات) حيث يقوم Next.js بتحسين هذه الوظيفة.
+
+## البث مع Suspense
+
+بالإضافة إلى `loading.js`، يمكنك أيضًا إنشاء حدود Suspense يدويًا لمكونات واجهة المستخدم الخاصة بك. يدعم موجه التطبيق البث مع [Suspense](https://react.dev/reference/react/Suspense) لكل من [بيئات تشغيل Node.js و Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+
+> **جيد أن تعرف**:
+>
+> - [بعض المتصفحات](https://bugs.webkit.org/show_bug.cgi?id=252413) تقوم بتخزين استجابة البث مؤقتًا. قد لا ترى الاستجابة المبثوثة حتى يتجاوز حجمها 1024 بايت. هذا يؤثر عادةً فقط على تطبيقات "hello world" البسيطة، وليس التطبيقات الحقيقية.
+
+### ما هو البث (Streaming)؟
+
+لفهم كيفية عمل البث في React وNext.js، من المفيد فهم **التصيير من جانب الخادم (SSR)** وقيودها.
+
+مع SSR، هناك سلسلة من الخطوات التي يجب إكمالها قبل أن يتمكن المستخدم من رؤية الصفحة والتفاعل معها:
+
+1. أولاً، يتم جلب جميع البيانات لصفحة معينة من الخادم.
+2. ثم يقوم الخادم بتصيير HTML للصفحة.
+3. يتم إرسال HTML وCSS وJavaScript للصفحة إلى العميل.
+4. يتم عرض واجهة مستخدم غير تفاعلية باستخدام HTML المُنشأ وCSS.
+5. أخيرًا، يقوم React [بترطيب (hydrate)](https://react.dev/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) واجهة المستخدم لجعلها تفاعلية.
+
+<Image
+  alt="مخطط يوضح تصيير الخادم بدون بث"
+  srcLight="/docs/light/server-rendering-without-streaming-chart.png"
+  srcDark="/docs/dark/server-rendering-without-streaming-chart.png"
+  width="1600"
+  height="612"
+/>
+
+هذه الخطوات متسلسلة وحاصرة، مما يعني أن الخادم يمكنه فقط تصيير HTML للصفحة بمجرد جلب جميع البيانات. وعلى العميل، يمكن لـ React فقط ترطيب الواجهة بمجرد تنزيل كود جميع المكونات في الصفحة.
+
+يساعد SSR مع React وNext.js في تحسين أداء التحميل الملاحظ من خلال عرض صفحة غير تفاعلية للمستخدم في أسرع وقت ممكن.
+
+<Image
+  alt="تصيير الخادم بدون بث"
+  srcLight="/docs/light/server-rendering-without-streaming.png"
+  srcDark="/docs/dark/server-rendering-without-streaming.png"
+  width="1600"
+  height="748"
+/>
+
+ومع ذلك، يمكن أن يظل بطيئًا حيث يجب إكمال جلب جميع البيانات على الخادم قبل عرض الصفحة للمستخدم.
+
+يسمح لك **البث** بتقسيم HTML للصفحة إلى أجزاء أصغر وإرسال تلك الأجزاء تدريجيًا من الخادم إلى العميل.
+
+<Image
+  alt="كيف يعمل تصيير الخادم مع البث"
+  srcLight="/docs/light/server-rendering-with-streaming.png"
+  srcDark="/docs/dark/server-rendering-with-streaming.png"
+  width="1600"
+  height="785"
+/>
+
+هذا يمكّن أجزاء من الصفحة من الظهور عاجلاً، دون انتظار تحميل جميع البيانات قبل تصيير أي واجهة مستخدم.
+
+يعمل البث بشكل جيد مع نموذج مكونات React لأنه يمكن اعتبار كل مكون جزءًا. يمكن إرسال المكونات ذات الأولوية الأعلى (مثل معلومات المنتج) أو التي لا تعتمد على البيانات أولاً (مثل التخطيط)، ويمكن لـ React بدء الترطيب مبكرًا. يمكن إرسال المكونات ذات الأولوية الأقل (مثل المراجعات، المنتجات ذات الصلة) في نفس طلب الخادم بعد جلب بياناتها.
+
+<Image
+  alt="مخطط يوضح تصيير الخادم مع البث"
+  srcLight="/docs/light/server-rendering-with-streaming-chart.png"
+  srcDark="/docs/dark/server-rendering-with-streaming-chart.png"
+  width="1600"
+  height="730"
+/>
+
+البث مفيد بشكل خاص عندما تريد منع طلبات البيانات الطويلة من حظر تصيير الصفحة حيث يمكنه تقليل [وقت أول بايت (TTFB)](https://web.dev/ttfb/) و[أول رسم للمحتوى (FCP)](https://web.dev/first-contentful-paint/). كما أنه يساعد في تحسين [الوقت للتفاعل (TTI)](https://developer.chrome.com/en/docs/lighthouse/performance/interactive/)، خاصة على الأجهزة الأبطأ.
+
+### مثال
+
+يعمل `<Suspense>` عن طريق تغليف مكون يقوم بإجراء غير متزامن (مثل جلب البيانات)، وعرض واجهة احتياطية (مثل هيكل عظمي، دائرة دوارة) أثناء حدوثه، ثم استبدال مكونك بمجرد اكتمال الإجراء.
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import { Suspense } from 'react'
+import { PostFeed, Weather } from './Components'
+
+export default function Posts() {
+  return (
+    <section>
+      <Suspense fallback={<p>جاري تحميل التغذية...</p>}>
+        <PostFeed />
+      </Suspense>
+      <Suspense fallback={<p>جاري تحميل الطقس...</p>}>
+        <Weather />
+      </Suspense>
+    </section>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import { Suspense } from 'react'
+import { PostFeed, Weather } from './Components'
+
+export default function Posts() {
+  return (
+    <section>
+      <Suspense fallback={<p>جاري تحميل التغذية...</p>}>
+        <PostFeed />
+      </Suspense>
+      <Suspense fallback={<p>جاري تحميل الطقس...</p>}>
+        <Weather />
+      </Suspense>
+    </section>
+  )
+}
+>
+
+باستخدام Suspense، تحصل على فوائد:
+
+1. **تصيير الخادم مع البث** - تصيير HTML تدريجيًا من الخادم إلى العميل.
+2. **الترطيب الانتقائي** - يعطي React الأولوية للمكونات التي يجب جعلها تفاعلية أولاً بناءً على تفاعل المستخدم.
+
+لمزيد من أمثلة وحالات استخدام Suspense، يرجى الاطلاع على [توثيق React](https://react.dev/reference/react/Suspense).
+
+### تحسين محركات البحث (SEO)
+
+- سينتظر Next.js اكتمال جلب البيانات داخل [`generateMetadata`](/docs/app/api-reference/functions/generate-metadata) قبل بث الواجهة إلى العميل. هذا يضمن أن الجزء الأول من الاستجابة المبثوثة يتضمن علامات `<head>`.
+- نظرًا لأن البث يتم تصييره من الخادم، فهو لا يؤثر على SEO. يمكنك استخدام أداة [Rich Results Test](https://search.google.com/test/rich-results) من Google لمعرفة كيف تظهر صفحتك لمحركات البحث وعرض HTML المُسلسل ([المصدر](https://web.dev/rendering-on-the-web/#seo-considerations)).
+
+### رموز الحالة
+
+عند البث، سيتم إرجاع رمز حالة `200` للإشارة إلى نجاح الطلب.
+
+يمكن للخادم أن يبلغ عن الأخطاء أو المشكلات للعميل داخل المحتوى المبثوث نفسه، على سبيل المثال عند استخدام [`redirect`](/docs/app/api-reference/functions/redirect) أو [`notFound`](/docs/app/api-reference/functions/not-found). نظرًا لأنه تم إرسال رؤوس الاستجابة بالفعل إلى العميل، لا يمكن تحديث رمز حالة الاستجابة. هذا لا يؤثر على SEO.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/05-error-handling.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/05-error-handling.mdx
new file mode 100644
index 00000000..f8af5809
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/05-error-handling.mdx
@@ -0,0 +1,232 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:48:50.376Z
+title: معالجة الأخطاء
+description: التعامل مع أخطاء وقت التشغيل عن طريق تغليف مقاطع المسارات وأطفالها المتداخلين تلقائيًا في حدود خطأ React.
+related:
+  links:
+    - app/api-reference/file-conventions/error
+---
+
+تسمح لك اتفاقية ملف `error.js` بالتعامل مع أخطاء وقت التشغيل غير المتوقعة بطريقة أنيقة في [المسارات المتداخلة](/docs/app/building-your-application/routing#nested-routes).
+
+- تغليف مقطع المسار وأطفاله المتداخلين تلقائيًا في [حدود خطأ React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary).
+- إنشاء واجهة مستخدم للأخطاء مخصصة لمقاطع محددة باستخدام التسلسل الهرمي لنظام الملفات لضبط الدقة.
+- عزل الأخطاء للمقاطع المتأثرة مع الحفاظ على بقية التطبيق يعمل.
+- إضافة وظيفة لمحاولة الاسترداد من الخطأ دون إعادة تحميل كامل للصفحة.
+
+قم بإنشاء واجهة مستخدم للأخطاء عن طريق إضافة ملف `error.js` داخل مقطع مسار وتصدير مكون React:
+
+<Image
+  alt="ملف error.js الخاص"
+  srcLight="/docs/light/error-special-file.png"
+  srcDark="/docs/dark/error-special-file.png"
+  width="1600"
+  height="606"
+/>
+
+```tsx filename="app/dashboard/error.tsx" switcher
+'use client' // مكونات الخطأ يجب أن تكون مكونات عميل
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة إعداد التقارير عن الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاسترداد عن طريق إعادة عرض المقطع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/dashboard/error.js" switcher
+'use client' // مكونات الخطأ يجب أن تكون مكونات عميل
+
+import { useEffect } from 'react'
+
+export default function Error({ error, reset }) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة إعداد التقارير عن الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاسترداد عن طريق إعادة عرض المقطع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+### كيف يعمل `error.js`
+
+<Image
+  alt="كيف يعمل error.js"
+  srcLight="/docs/light/error-overview.png"
+  srcDark="/docs/dark/error-overview.png"
+  width="1600"
+  height="903"
+/>
+
+- ينشئ `error.js` تلقائيًا [حدود خطأ React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) التي **تغلف** مقطع طفل متداخل أو مكون `page.js`.
+- يتم استخدام مكون React المصدر من ملف `error.js` كمكون **احتياطي**.
+- إذا تم طرح خطأ داخل حدود الخطأ، يتم **احتواء** الخطأ ويتم **عرض** المكون الاحتياطي.
+- عندما يكون مكون الخطأ الاحتياطي نشطًا، تحافظ التخطيطات **فوق** حدود الخطأ على حالتها وتبقى تفاعلية، ويمكن لمكون الخطأ عرض وظيفة للاسترداد من الخطأ.
+
+### الاسترداد من الأخطاء
+
+قد يكون سبب الخطأ مؤقتًا في بعض الأحيان. في هذه الحالات، قد تحل محاولة بسيطة للمحاولة مرة أخرى المشكلة.
+
+يمكن لمكون الخطأ استخدام دالة `reset()` لدفع المستخدم لمحاولة الاسترداد من الخطأ. عند التنفيذ، ستقوم الدالة بمحاولة إعادة عرض محتويات حدود الخطأ. إذا نجحت، يتم استبدال مكون الخطأ الاحتياطي بنتيجة إعادة العرض.
+
+```tsx filename="app/dashboard/error.tsx" switcher
+'use client'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button onClick={() => reset()}>حاول مرة أخرى</button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/dashboard/error.js" switcher
+'use client'
+
+export default function Error({ error, reset }) {
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button onClick={() => reset()}>حاول مرة أخرى</button>
+    </div>
+  )
+}
+```
+
+### المسارات المتداخلة
+
+يتم عرض مكونات React التي تم إنشاؤها من خلال [ملفات خاصة](/docs/app/building-your-application/routing#file-conventions) في [تسلسل هرمي متداخل محدد](/docs/app/building-your-application/routing#component-hierarchy).
+
+على سبيل المثال، يتم عرض مسار متداخل مع مقطعين يحتويان على ملفات `layout.js` و `error.js` في التسلسل الهرمي للمكونات المبسط التالي:
+
+<Image
+  alt="التسلسل الهرمي لمكونات الخطأ المتداخلة"
+  srcLight="/docs/light/nested-error-component-hierarchy.png"
+  srcDark="/docs/dark/nested-error-component-hierarchy.png"
+  width="1600"
+  height="687"
+/>
+
+يحتوي التسلسل الهرمي للمكونات المتداخلة على آثار لسلوك ملفات `error.js` عبر مسار متداخل:
+
+- تنتقل الأخطاء إلى أقرب حدود خطأ أصلية. هذا يعني أن ملف `error.js` سيتعامل مع الأخطاء لجميع مقاطعه الفرعية المتداخلة. يمكن تحقيق واجهة مستخدم للأخطاء أكثر أو أقل دقة عن طريق وضع ملفات `error.js` في مستويات مختلفة في المجلدات المتداخلة للمسار.
+- لن تتعامل حدود `error.js` مع الأخطاء التي يتم طرحها في مكون `layout.js` في **نفس** المقطع لأن حدود الخطأ متداخلة **داخل** مكون ذلك التخطيط.
+
+### التعامل مع الأخطاء في التخطيطات
+
+لا تلتقط حدود `error.js` الأخطاء التي يتم طرحها في مكونات `layout.js` أو `template.js` في **نفس** المقطع. يحافظ هذا [التسلسل الهرمي المقصود](#nested-routes) على واجهة المستخدم المهمة المشتركة بين المسارات الشقيقة (مثل التنقل) مرئية ووظيفية عند حدوث خطأ.
+
+للتعامل مع الأخطاء داخل تخطيط أو قالب معين، ضع ملف `error.js` في المقطع الأصلي للتخطيط.
+
+للتعامل مع الأخطاء داخل التخطيط الجذري أو القالب، استخدم متغيرًا من `error.js` يسمى `global-error.js`.
+
+### التعامل مع الأخطاء في التخطيطات الجذرية
+
+لا تلتقط حدود `app/error.js` الجذرية الأخطاء التي يتم طرحها في مكون `app/layout.js` أو `app/template.js` الجذري.
+
+للتعامل مع الأخطاء في هذه المكونات الجذرية على وجه التحديد، استخدم متغيرًا من `error.js` يسمى `app/global-error.js` الموجود في الدليل الجذري `app`.
+
+على عكس `error.js` الجذري، تغلف حدود خطأ `global-error.js` التطبيق **بالكامل**، ويستبدل مكونها الاحتياطي التخطيط الجذري عند التنشيط. بسبب هذا، من المهم ملاحظة أن `global-error.js` **يجب** أن يحدد علامات `<html>` و `<body>` الخاصة به.
+
+يعتبر `global-error.js` أقل واجهة مستخدم للأخطاء دقة ويمكن اعتباره معالجة أخطاء "شاملة" للتطبيق بأكمله. من غير المحتمل أن يتم تشغيله كثيرًا لأن المكونات الجذرية عادةً ما تكون أقل ديناميكية، وستلتقط حدود `error.js` الأخرى معظم الأخطاء.
+
+حتى إذا تم تعريف `global-error.js`، لا يزال يوصى بتحديد `error.js` جذري سيتم عرض مكونه الاحتياطي **داخل** التخطيط الجذري، والذي يتضمن واجهة مستخدم وعلامة تجارية مشتركة عالميًا.
+
+```tsx filename="app/global-error.tsx" switcher
+'use client'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/global-error.js" switcher
+'use client'
+
+export default function GlobalError({ error, reset }) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+> **معلومة جيدة**:
+>
+> - يتم تمكين `global-error.js` فقط في الإنتاج. في التطوير، سيظهر تراكب الخطأ الخاص بنا بدلاً من ذلك.
+
+### التعامل مع أخطاء الخادم
+
+إذا تم طرح خطأ داخل مكون خادم، سيقوم Next.js بإعادة توجيه كائن `Error` (تمت إزالة معلومات الخطأ الحساسة في الإنتاج) إلى أقرب ملف `error.js` كخاصية `error`.
+
+#### تأمين معلومات الخطأ الحساسة
+
+خلال الإنتاج، يتضمن كائن `Error` المعاد توجيهه إلى العميل خاصية `message` عامة وخاصية `digest` فقط.
+
+هذا إجراء أمان لتجنب تسريب تفاصيل حساسة محتملة متضمنة في الخطأ إلى العميل.
+
+تحتوي خاصية `message` على رسالة عامة حول الخطأ وتحتوي خاصية `digest` على تجزئة تم إنشاؤها تلقائيًا للخطأ يمكن استخدامها لمطابقة الخطأ المقابل في سجلات جانب الخادم.
+
+خلال التطوير، سيكون كائن `Error` المعاد توجيهه إلى العميل متسلسلاً وسيتضمن `message` الخطأ الأصلي لسهولة التصحيح.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/06-redirecting.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/06-redirecting.mdx
new file mode 100644
index 00000000..ba26c694
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/06-redirecting.mdx
@@ -0,0 +1,623 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:50:48.264Z
+title: إعادة التوجيه
+description: تعرف على الطرق المختلفة للتعامل مع عمليات إعادة التوجيه في Next.js.
+related:
+  links:
+    - app/api-reference/functions/redirect
+    - app/api-reference/functions/permanentRedirect
+    - app/building-your-application/routing/middleware
+    - app/api-reference/next-config-js/redirects
+---
+
+هناك عدة طرق يمكنك من خلالها التعامل مع عمليات إعادة التوجيه في Next.js. ستغطي هذه الصفحة كل خيار متاح، حالات الاستخدام، وكيفية إدارة أعداد كبيرة من عمليات إعادة التوجيه.
+
+<AppOnly>
+
+| API                                                            | الغرض                                           | المكان                                             | رمز الحالة                            |
+| -------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------- | ------------------------------------- |
+| [`redirect`](#redirect-function)                               | إعادة توجيه المستخدم بعد حدث أو تحوير           | مكونات الخادم، إجراءات الخادم، معالجات المسار     | 307 (مؤقت) أو 303 (إجراء خادم)       |
+| [`permanentRedirect`](#permanentredirect-function)             | إعادة توجيه المستخدم بعد حدث أو تحوير           | مكونات الخادم، إجراءات الخادم، معالجات المسار     | 308 (دائم)                            |
+| [`useRouter`](#userouter-hook)                                 | تنفيذ تنقل من جانب العميل                       | معالجات الأحداث في مكونات العميل                  | غير متاح                              |
+| [`redirects` في `next.config.js`](#redirects-in-nextconfigjs)  | إعادة توجيه طلب وارد بناءً على مسار             | ملف `next.config.js`                              | 307 (مؤقت) أو 308 (دائم)             |
+| [`NextResponse.redirect`](#nextresponseredirect-in-middleware) | إعادة توجيه طلب وارد بناءً على شرط              | Middleware                                        | أي                                   |
+
+</AppOnly>
+
+<PagesOnly>
+
+| API                                                            | الغرض                                           | المكان                 | رمز الحالة                        |
+| -------------------------------------------------------------- | ----------------------------------------------- | --------------------- | --------------------------------- |
+| [`useRouter`](#userouter-hook)                                 | تنفيذ تنقل من جانب العميل                       | المكونات              | غير متاح                          |
+| [`redirects` في `next.config.js`](#redirects-in-nextconfigjs)  | إعادة توجيه طلب وارد بناءً على مسار             | ملف `next.config.js`  | 307 (مؤقت) أو 308 (دائم)         |
+| [`NextResponse.redirect`](#nextresponseredirect-in-middleware) | إعادة توجيه طلب وارد بناءً على شرط              | Middleware            | أي                               |
+
+</PagesOnly>
+
+<AppOnly>
+
+## دالة `redirect`
+
+تسمح لك دالة `redirect` بإعادة توجيه المستخدم إلى عنوان URL آخر. يمكنك استدعاء `redirect` في [مكونات الخادم](/docs/app/building-your-application/rendering/server-components)، [معالجات المسار](/docs/app/building-your-application/routing/route-handlers)، و[إجراءات الخادم](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+غالبًا ما تُستخدم `redirect` بعد حدث أو تحوير. على سبيل المثال، إنشاء منشور:
+
+```tsx filename="app/actions.tsx" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+import { revalidatePath } from 'next/cache'
+
+export async function createPost(id: string) {
+  try {
+    // استدعاء قاعدة البيانات
+  } catch (error) {
+    // معالجة الأخطاء
+  }
+
+  revalidatePath('/posts') // تحديث المنشورات المخزنة مؤقتًا
+  redirect(`/post/${id}`) // الانتقال إلى صفحة المنشور الجديدة
+}
+```
+
+```jsx filename="app/actions.js" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+import { revalidatePath } from 'next/cache'
+
+export async function createPost(id) {
+  try {
+    // استدعاء قاعدة البيانات
+  } catch (error) {
+    // معالجة الأخطاء
+  }
+
+  revalidatePath('/posts') // تحديث المنشورات المخزنة مؤقتًا
+  redirect(`/post/${id}`) // الانتقال إلى صفحة المنشور الجديدة
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - تُرجع `redirect` رمز حالة 307 (إعادة توجيه مؤقتة) افتراضيًا. عند استخدامها في إجراء خادم، تُرجع 303 (انظر آخر)، والذي يُستخدم عادةً لإعادة التوجيه إلى صفحة نجاح نتيجة لطلب POST.
+> - تطرح `redirect` خطأ داخليًا لذا يجب استدعاؤها خارج كتل `try/catch`.
+> - يمكن استدعاء `redirect` في مكونات العميل أثناء عملية التصيير ولكن ليس في معالجات الأحداث. يمكنك استخدام [خطاف `useRouter`](#userouter-hook) بدلاً من ذلك.
+> - تقبل `redirect` أيضًا عناوين URL المطلقة ويمكن استخدامها لإعادة التوجيه إلى روابط خارجية.
+> - إذا كنت ترغب في إعادة التوجيه قبل عملية التصيير، استخدم [`next.config.js`](#redirects-in-nextconfigjs) أو [Middleware](#nextresponseredirect-in-middleware).
+
+راجع [مرجع API لـ `redirect`](/docs/app/api-reference/functions/redirect) لمزيد من المعلومات.
+
+## دالة `permanentRedirect`
+
+تسمح لك دالة `permanentRedirect` بإعادة توجيه المستخدم **بشكل دائم** إلى عنوان URL آخر. يمكنك استدعاء `permanentRedirect` في [مكونات الخادم](/docs/app/building-your-application/rendering/server-components)، [معالجات المسار](/docs/app/building-your-application/routing/route-handlers)، و[إجراءات الخادم](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+غالبًا ما تُستخدم `permanentRedirect` بعد حدث أو تحوير يغير عنوان URL الأساسي لكيان ما، مثل تحديث عنوان URL لملف تعريف المستخدم بعد تغيير اسم المستخدم:
+
+```tsx filename="app/actions.ts" switcher
+'use server'
+
+import { permanentRedirect } from 'next/navigation'
+import { revalidateTag } from 'next/cache'
+
+export async function updateUsername(username: string, formData: FormData) {
+  try {
+    // استدعاء قاعدة البيانات
+  } catch (error) {
+    // معالجة الأخطاء
+  }
+
+  revalidateTag('username') // تحديث جميع الإشارات إلى اسم المستخدم
+  permanentRedirect(`/profile/${username}`) // الانتقال إلى ملف تعريف المستخدم الجديد
+}
+```
+
+```jsx filename="app/actions.js" switcher
+'use server'
+
+import { permanentRedirect } from 'next/navigation'
+import { revalidateTag } from 'next/cache'
+
+export async function updateUsername(username, formData) {
+  try {
+    // استدعاء قاعدة البيانات
+  } catch (error) {
+    // معالجة الأخطاء
+  }
+
+  revalidateTag('username') // تحديث جميع الإشارات إلى اسم المستخدم
+  permanentRedirect(`/profile/${username}`) // الانتقال إلى ملف تعريف المستخدم الجديد
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - تُرجع `permanentRedirect` رمز حالة 308 (إعادة توجيه دائمة) افتراضيًا.
+> - تقبل `permanentRedirect` أيضًا عناوين URL المطلقة ويمكن استخدامها لإعادة التوجيه إلى روابط خارجية.
+> - إذا كنت ترغب في إعادة التوجيه قبل عملية التصيير، استخدم [`next.config.js`](#redirects-in-nextconfigjs) أو [Middleware](#nextresponseredirect-in-middleware).
+
+راجع [مرجع API لـ `permanentRedirect`](/docs/app/api-reference/functions/permanentRedirect) لمزيد من المعلومات.
+
+</AppOnly>
+
+## خطاف `useRouter()`
+
+<AppOnly>
+
+إذا كنت بحاجة إلى إعادة التوجيه داخل معالج حدث في مكون عميل، يمكنك استخدام طريقة `push` من خطاف `useRouter`. على سبيل المثال:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      لوحة التحكم
+    </button>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      لوحة التحكم
+    </button>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+إذا كنت بحاجة إلى إعادة التوجيه داخل مكون، يمكنك استخدام طريقة `push` من خطاف `useRouter`. على سبيل المثال:
+
+```tsx filename="app/page.tsx" switcher
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      لوحة التحكم
+    </button>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      لوحة التحكم
+    </button>
+  )
+}
+```
+
+</PagesOnly>
+
+> **معلومة مفيدة**:
+>
+> - إذا لم تكن بحاجة إلى تنقل المستخدم برمجيًا، يجب استخدام مكون [`<Link>`](/docs/app/api-reference/components/link).
+
+<AppOnly>
+
+راجع [مرجع API لـ `useRouter`](/docs/app/api-reference/functions/use-router) لمزيد من المعلومات.
+
+</AppOnly>
+
+<PagesOnly>
+
+راجع [مرجع API لـ `useRouter`](/docs/pages/api-reference/functions/use-router) لمزيد من المعلومات.
+
+</PagesOnly>
+
+## `redirects` في `next.config.js`
+
+خيار `redirects` في ملف `next.config.js` يسمح لك بإعادة توجيه مسار طلب وارد إلى مسار وجهة مختلف. هذا مفيد عندما تقوم بتغيير هيكل عناوين URL للصفحات أو لديك قائمة بعمليات إعادة التوجيه معروفة مسبقًا.
+
+يدعم `redirects` [مطابقة المسار](/docs/app/api-reference/next-config-js/redirects#path-matching)، [مطابقة الرأس، الكوكيز، والاستعلام](/docs/app/api-reference/next-config-js/redirects#header-cookie-and-query-matching)، مما يمنحك المرونة لإعادة توجيه المستخدمين بناءً على طلب وارد.
+
+لاستخدام `redirects`، أضف الخيار إلى ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      // إعادة توجيه أساسية
+      {
+        source: '/about',
+        destination: '/',
+        permanent: true,
+      },
+      // مطابقة مسار باستخدام أحرف البدل
+      {
+        source: '/blog/:slug',
+        destination: '/news/:slug',
+        permanent: true,
+      },
+    ]
+  },
+}
+```
+
+راجع [مرجع API لـ `redirects`](/docs/app/api-reference/next-config-js/redirects) لمزيد من المعلومات.
+
+> **معلومة مفيدة**:
+>
+> - يمكن أن تُرجع `redirects` رمز حالة 307 (إعادة توجيه مؤقتة) أو 308 (إعادة توجيه دائمة) مع خيار `permanent`.
+> - قد يكون لـ `redirects` حد على بعض المنصات. على سبيل المثال، في Vercel، هناك حد لـ 1,024 إعادة توجيه. لإدارة عدد كبير من عمليات إعادة التوجيه (1000+)، فكر في إنشاء حل مخصص باستخدام [Middleware](/docs/app/building-your-application/routing/middleware). راجع [إدارة عمليات إعادة التوجيه على نطاق واسع](#managing-redirects-at-scale-advanced) للمزيد.
+> - تعمل `redirects` **قبل** Middleware.
+
+## `NextResponse.redirect` في Middleware
+
+يسمح لك Middleware بتشغيل التعليمات البرمجية قبل اكتمال الطلب. ثم، بناءً على الطلب الوارد، يمكنك إعادة التوجيه إلى عنوان URL مختلف باستخدام `NextResponse.redirect`. هذا مفيد إذا كنت ترغب في إعادة توجيه المستخدمين بناءً على شرط (مثل المصادقة، إدارة الجلسة، إلخ) أو لديك [عدد كبير من عمليات إعادة التوجيه](#managing-redirects-at-scale-advanced).
+
+على سبيل المثال، لإعادة توجيه المستخدم إلى صفحة `/login` إذا لم يكن مصادقًا:
+
+```tsx filename="middleware.ts" switcher
+import { NextResponse, NextRequest } from 'next/server'
+import { authenticate } from 'auth-provider'
+
+export function middleware(request: NextRequest) {
+  const isAuthenticated = authenticate(request)
+
+  // إذا كان المستخدم مصادقًا، تابع كالمعتاد
+  if (isAuthenticated) {
+    return NextResponse.next()
+  }
+
+  // إعادة التوجيه إلى صفحة تسجيل الدخول إذا لم يكن مصادقًا
+  return NextResponse.redirect(new URL('/login', request.url))
+}
+
+export const config = {
+  matcher: '/dashboard/:path*',
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+import { authenticate } from 'auth-provider'
+
+export function middleware(request) {
+  const isAuthenticated = authenticate(request)
+
+  // إذا كان المستخدم مصادقًا، تابع كالمعتاد
+  if (isAuthenticated) {
+    return NextResponse.next()
+  }
+
+  // إعادة التوجيه إلى صفحة تسجيل الدخول إذا لم يكن مصادقًا
+  return NextResponse.redirect(new URL('/login', request.url))
+}
+
+export const config = {
+  matcher: '/dashboard/:path*',
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - يعمل Middleware **بعد** `redirects` في `next.config.js` و**قبل** التصيير.
+
+راجع وثائق [Middleware](/docs/app/building-your-application/routing/middleware) لمزيد من المعلومات.
+
+## إدارة عمليات إعادة التوجيه على نطاق واسع (متقدم)
+
+لإدارة عدد كبير من عمليات إعادة التوجيه (1000+)، قد تفكر في إنشاء حل مخصص باستخدام Middleware. هذا يسمح لك بالتعامل مع عمليات إعادة التوجيه برمجيًا دون الحاجة إلى إعادة نشر تطبيقك.
+
+للقيام بذلك، ستحتاج إلى النظر في:
+
+1. إنشاء وتخزين خريطة إعادة توجيه.
+2. تحسين أداء البحث عن البيانات.
+
+> **مثال Next.js**: راجع مثالنا [Middleware مع مرشح Bloom](https://redirects-bloom-filter.vercel.app/) لتنفيذ التوصيات أدناه.
+
+### 1. إنشاء وتخزين خريطة إعادة توجيه
+
+خريطة إعادة التوجيه هي قائمة بعمليات إعادة التوجيه التي يمكنك تخزينها في قاعدة بيانات (عادةً مخزن مفتاح-قيمة) أو ملف JSON.
+
+ضع في الاعتبار هيكل البيانات التالي:
+
+```json
+{
+  "/old": {
+    "destination": "/new",
+    "permanent": true
+  },
+  "/blog/post-old": {
+    "destination": "/blog/post-new",
+    "permanent": true
+  }
+}
+```
+
+في [Middleware](/docs/app/building-your-application/routing/middleware)، يمكنك القراءة من قاعدة بيانات مثل [Edge Config](https://vercel.com/docs/storage/edge-config/get-started?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) من Vercel أو [Redis](https://vercel.com/docs/storage/vercel-kv?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، وإعادة توجيه المستخدم بناءً على الطلب الوارد:
+
+```tsx filename="middleware.ts" switcher
+import { NextResponse, NextRequest } from 'next/server'
+import { get } from '@vercel/edge-config'
+
+type RedirectEntry = {
+  destination: string
+  permanent: boolean
+}
+
+export async function middleware(request: NextRequest) {
+  const pathname = request.nextUrl.pathname
+  const redirectData = await get(pathname)
+
+  if (redirectData && typeof redirectData === 'string') {
+    const redirectEntry: RedirectEntry = JSON.parse(redirectData)
+    const statusCode = redirectEntry.permanent ? 308 : 307
+    return NextResponse.redirect(redirectEntry.destination, statusCode)
+  }
+
+  // لم يتم العثور على إعادة توجيه، تابع بدون إعادة توجيه
+  return NextResponse.next()
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+import { get } from '@vercel/edge-config'
+
+export async function middleware(request) {
+  const pathname = request.nextUrl.pathname
+  const redirectData = await get(pathname)
+
+  if (redirectData) {
+    const redirectEntry = JSON.parse(redirectData)
+    const statusCode = redirectEntry.permanent ? 308 : 307
+    return NextResponse.redirect(redirectEntry.destination, statusCode)
+  }
+
+  // لم يتم العثور على إعادة توجيه، تابع بدون إعادة توجيه
+  return NextResponse.next()
+}
+```
+
+### 2. تحسين أداء البحث عن البيانات
+
+قراءة مجموعة بيانات كبيرة لكل طلب وارد يمكن أن تكون بطيئة ومكلفة. هناك طريقتان لتحسين أداء البحث عن البيانات:
+
+- استخدام قاعدة بيانات مُحسنة للقراءة السريعة، مثل [Vercel Edge Config](https://vercel.com/docs/storage/edge-config/get-started?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) أو [Redis](https://vercel.com/docs/storage/vercel-kv?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+- استخدام استراتيجية بحث عن البيانات مثل [مرشح بلوم (Bloom filter)](https://en.wikipedia.org/wiki/Bloom_filter) للتحقق بكفاءة مما إذا كان هناك إعادة توجيه **قبل** قراءة ملف أو قاعدة بيانات إعادة التوجيه الأكبر.
+
+بالنظر إلى المثال السابق، يمكنك استيراد ملف مرشح بلوم مُنشأ إلى Middleware، ثم التحقق مما إذا كان مسار الطلب الوارد موجودًا في مرشح بلوم.
+
+إذا كان موجودًا، يتم توجيه الطلب إلى <AppOnly>[معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers)</AppOnly> <PagesOnly>[مسارات API (API Routes)](/docs/pages/building-your-application/routing/api-routes)</PagesOnly> والذي سيتحقق من الملف الفعلي ويقوم بإعادة توجيه المستخدم إلى العنوان المناسب. هذا يتجنب استيراد ملف إعادة توجيه كبير إلى Middleware، مما يمكن أن يبطئ كل طلب وارد.
+
+```tsx filename="middleware.ts" switcher
+import { NextResponse, NextRequest } from 'next/server'
+import { ScalableBloomFilter } from 'bloom-filters'
+import GeneratedBloomFilter from './redirects/bloom-filter.json'
+
+type RedirectEntry = {
+  destination: string
+  permanent: boolean
+}
+
+// تهيئة مرشح بلوم من ملف JSON مُنشأ
+const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)
+
+export async function middleware(request: NextRequest) {
+  // الحصول على مسار الطلب الوارد
+  const pathname = request.nextUrl.pathname
+
+  // التحقق مما إذا كان المسار موجودًا في مرشح بلوم
+  if (bloomFilter.has(pathname)) {
+    // توجيه مسار الطلب إلى معالج المسار
+    const api = new URL(
+      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
+      request.nextUrl.origin
+    )
+
+    try {
+      // جلب بيانات إعادة التوجيه من معالج المسار
+      const redirectData = await fetch(api)
+
+      if (redirectData.ok) {
+        const redirectEntry: RedirectEntry | undefined =
+          await redirectData.json()
+
+        if (redirectEntry) {
+          // تحديد رمز الحالة
+          const statusCode = redirectEntry.permanent ? 308 : 307
+
+          // إعادة التوجيه إلى الوجهة
+          return NextResponse.redirect(redirectEntry.destination, statusCode)
+        }
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // لم يتم العثور على إعادة توجيه، متابعة الطلب دون إعادة توجيه
+  return NextResponse.next()
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+import { ScalableBloomFilter } from 'bloom-filters'
+import GeneratedBloomFilter from './redirects/bloom-filter.json'
+
+// تهيئة مرشح بلوم من ملف JSON مُنشأ
+const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter)
+
+export async function middleware(request) {
+  // الحصول على مسار الطلب الوارد
+  const pathname = request.nextUrl.pathname
+
+  // التحقق مما إذا كان المسار موجودًا في مرشح بلوم
+  if (bloomFilter.has(pathname)) {
+    // توجيه مسار الطلب إلى معالج المسار
+    const api = new URL(
+      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
+      request.nextUrl.origin
+    )
+
+    try {
+      // جلب بيانات إعادة التوجيه من معالج المسار
+      const redirectData = await fetch(api)
+
+      if (redirectData.ok) {
+        const redirectEntry = await redirectData.json()
+
+        if (redirectEntry) {
+          // تحديد رمز الحالة
+          const statusCode = redirectEntry.permanent ? 308 : 307
+
+          // إعادة التوجيه إلى الوجهة
+          return NextResponse.redirect(redirectEntry.destination, statusCode)
+        }
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // لم يتم العثور على إعادة توجيه، متابعة الطلب دون إعادة توجيه
+  return NextResponse.next()
+}
+```
+
+<AppOnly>
+
+ثم، في معالج المسار:
+
+```tsx filename="app/redirects/route.ts" switcher
+import { NextRequest, NextResponse } from 'next/server'
+import redirects from '@/app/redirects/redirects.json'
+
+type RedirectEntry = {
+  destination: string
+  permanent: boolean
+}
+
+export function GET(request: NextRequest) {
+  const pathname = request.nextUrl.searchParams.get('pathname')
+  if (!pathname) {
+    return new Response('Bad Request', { status: 400 })
+  }
+
+  // الحصول على إدخال إعادة التوجيه من ملف redirects.json
+  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]
+
+  // حساب النتائج الإيجابية الخاطئة لمرشح بلوم
+  if (!redirect) {
+    return new Response('No redirect', { status: 400 })
+  }
+
+  // إرجاع إدخال إعادة التوجيه
+  return NextResponse.json(redirect)
+}
+```
+
+```js filename="app/redirects/route.js" switcher
+import { NextResponse } from 'next/server'
+import redirects from '@/app/redirects/redirects.json'
+
+export function GET(request) {
+  const pathname = request.nextUrl.searchParams.get('pathname')
+  if (!pathname) {
+    return new Response('Bad Request', { status: 400 })
+  }
+
+  // الحصول على إدخال إعادة التوجيه من ملف redirects.json
+  const redirect = redirects[pathname]
+
+  // حساب النتائج الإيجابية الخاطئة لمرشح بلوم
+  if (!redirect) {
+    return new Response('No redirect', { status: 400 })
+  }
+
+  // إرجاع إدخال إعادة التوجيه
+  return NextResponse.json(redirect)
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+ثم، في مسار API:
+
+```tsx filename="pages/api/redirects.ts" switcher
+import { NextApiRequest, NextApiResponse } from 'next'
+import redirects from '@/app/redirects/redirects.json'
+
+type RedirectEntry = {
+  destination: string
+  permanent: boolean
+}
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const pathname = req.query.pathname
+  if (!pathname) {
+    return res.status(400).json({ message: 'Bad Request' })
+  }
+
+  // الحصول على إدخال إعادة التوجيه من ملف redirects.json
+  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]
+
+  // حساب النتائج الإيجابية الخاطئة لمرشح بلوم
+  if (!redirect) {
+    return res.status(400).json({ message: 'No redirect' })
+  }
+
+  // إرجاع إدخال إعادة التوجيه
+  return res.json(redirect)
+}
+```
+
+```js filename="pages/api/redirects.js" switcher
+import redirects from '@/app/redirects/redirects.json'
+
+export default function handler(req, res) {
+  const pathname = req.query.pathname
+  if (!pathname) {
+    return res.status(400).json({ message: 'Bad Request' })
+  }
+
+  // الحصول على إدخال إعادة التوجيه من ملف redirects.json
+  const redirect = redirects[pathname]
+
+  // حساب النتائج الإيجابية الخاطئة لمرشح بلوم
+  if (!redirect) {
+    return res.status(400).json({ message: 'No redirect' })
+  }
+
+  // إرجاع إدخال إعادة التوجيه
+  return res.json(redirect)
+}
+```
+
+</PagesOnly>
+
+> **جيد أن تعرف:**
+>
+> - لإنشاء مرشح بلوم، يمكنك استخدام مكتبة مثل [`bloom-filters`](https://www.npmjs.com/package/bloom-filters).
+> - يجب التحقق من صحة الطلبات المرسلة إلى معالج المسار لمنع الطلبات الضارة.
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/07-route-groups.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/07-route-groups.mdx
new file mode 100644
index 00000000..7aeea6f9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/07-route-groups.mdx
@@ -0,0 +1,80 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:47:46.351Z
+title: مجموعات المسارات (Route Groups)
+description: يمكن استخدام مجموعات المسارات لتقسيم تطبيق Next.js الخاص بك إلى أقسام مختلفة.
+---
+
+في دليل `app`، يتم عادةً تعيين المجلدات المتداخلة إلى مسارات URL. ومع ذلك، يمكنك تحديد مجلد كـ **مجموعة مسارات (Route Group)** لمنع تضمين المجلد في مسار URL الخاص بالمسار.
+
+هذا يسمح لك بتنظيم مقاطع المسار وملفات المشروع في مجموعات منطقية دون التأثير على هيكل مسار URL.
+
+تعد مجموعات المسارات مفيدة لـ:
+
+- [تنظيم المسارات في مجموعات](#organize-routes-without-affecting-the-url-path) مثلًا حسب قسم الموقع، الغرض، أو الفريق.
+- تمكين [التخطيطات المتداخلة](/docs/app/building-your-application/routing/pages-and-layouts) في نفس مستوى مقطع المسار:
+  - [إنشاء تخطيطات متداخلة متعددة في نفس المقطع، بما في ذلك تخطيطات جذر متعددة](#creating-multiple-root-layouts)
+  - [إضافة تخطيط إلى مجموعة فرعية من المسارات في مقطع مشترك](#opting-specific-segments-into-a-layout)
+
+## الاصطلاح
+
+يمكن إنشاء مجموعة مسارات عن طريق تضمين اسم المجلد بين قوسين: `(اسم_المجلد)`
+
+## أمثلة
+
+### تنظيم المسارات دون التأثير على مسار URL
+
+لتنظيم المسارات دون التأثير على URL، قم بإنشاء مجموعة لإبقاء المسارات ذات الصلة معًا. سيتم حذف المجلدات الموجودة بين قوسين من URL (مثل `(marketing)` أو `(shop)`).
+
+<Image
+  alt="تنظيم المسارات باستخدام مجموعات المسارات"
+  srcLight="/docs/light/route-group-organisation.png"
+  srcDark="/docs/dark/route-group-organisation.png"
+  width="1600"
+  height="930"
+/>
+
+على الرغم من أن المسارات داخل `(marketing)` و `(shop)` تشترك في نفس التسلسل الهرمي لـ URL، يمكنك إنشاء تخطيط مختلف لكل مجموعة عن طريق إضافة ملف `layout.js` داخل مجلداتها.
+
+<Image
+  alt="مجموعات المسارات مع تخطيطات متعددة"
+  srcLight="/docs/light/route-group-multiple-layouts.png"
+  srcDark="/docs/dark/route-group-multiple-layouts.png"
+  width="1600"
+  height="768"
+/>
+
+### اختيار مقاطع محددة لتطبيق تخطيط عليها
+
+لاختيار مسارات محددة لتطبيق تخطيط عليها، قم بإنشاء مجموعة مسارات جديدة (مثل `(shop)`) وانقل المسارات التي تشترك في نفس التخطيط إلى المجموعة (مثل `account` و `cart`). المسارات خارج المجموعة لن تشترك في التخطيط (مثل `checkout`).
+
+<Image
+  alt="مجموعات المسارات مع تخطيطات اختيارية"
+  srcLight="/docs/light/route-group-opt-in-layouts.png"
+  srcDark="/docs/dark/route-group-opt-in-layouts.png"
+  width="1600"
+  height="930"
+/>
+
+### إنشاء تخطيطات جذر متعددة
+
+لإنشاء عدة [تخطيطات جذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)، قم بإزالة ملف `layout.js` في المستوى الأعلى، وأضف ملف `layout.js` داخل كل مجموعة مسارات. هذا مفيد لتقسيم التطبيق إلى أقسام لها واجهة مستخدم أو تجربة مختلفة تمامًا. يجب إضافة علامات `<html>` و `<body>` إلى كل تخطيط جذر.
+
+<Image
+  alt="مجموعات المسارات مع تخطيطات جذر متعددة"
+  srcLight="/docs/light/route-group-multiple-root-layouts.png"
+  srcDark="/docs/dark/route-group-multiple-root-layouts.png"
+  width="1600"
+  height="687"
+/>
+
+في المثال أعلاه، كل من `(marketing)` و `(shop)` لديهما تخطيط جذر خاص به.
+
+---
+
+> **معلومة مفيدة**:
+>
+> - تسمية مجموعات المسارات ليس لها أهمية خاصة بخلاف التنظيم. لا تؤثر على مسار URL.
+> - المسارات التي تتضمن مجموعة مسارات **يجب ألا** تحل إلى نفس مسار URL مثل المسارات الأخرى. على سبيل المثال، بما أن مجموعات المسارات لا تؤثر على هيكل URL، فإن `(marketing)/about/page.js` و `(shop)/about/page.js` سيحلان إلى `/about` وسيتسببان في خطأ.
+> - إذا كنت تستخدم عدة تخطيطات جذر دون ملف `layout.js` في المستوى الأعلى، يجب تعريف ملف `page.js` الرئيسي في إحدى مجموعات المسارات، على سبيل المثال: `app/(marketing)/page.js`.
+> - التنقل **بين تخطيطات جذر متعددة** سيؤدي إلى **تحميل كامل للصفحة** (بدلاً من التنقل من جانب العميل). على سبيل المثال، التنقل من `/cart` الذي يستخدم `app/(shop)/layout.js` إلى `/blog` الذي يستخدم `app/(marketing)/layout.js` سيؤدي إلى تحميل كامل للصفحة. هذا **ينطبق فقط** على تخطيطات الجذر المتعددة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/08-colocation.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/08-colocation.mdx
new file mode 100644
index 00000000..d2348b2f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/08-colocation.mdx
@@ -0,0 +1,182 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:48:06.095Z
+title: تنظيم المشروع ووضع الملفات معًا
+nav_title: تنظيم المشروع
+description: تعلم كيفية تنظيم مشروع Next.js ووضع الملفات معًا.
+related:
+  links:
+    - app/building-your-application/routing/defining-routes
+    - app/building-your-application/routing/route-groups
+    - app/building-your-application/configuring/src-directory
+    - app/building-your-application/configuring/absolute-imports-and-module-aliases
+---
+
+بخلاف [اتفاقيات مجلدات وملفات التوجيه](/docs/getting-started/project-structure#app-routing-conventions)، فإن Next.js **غير متحيز** بشأن كيفية تنظيم ووضع ملفات مشروعك معًا.
+
+تشارك هذه الصفحة السلوك الافتراضي والميزات التي يمكنك استخدامها لتنظيم مشروعك.
+
+- [وضع الملفات معًا بشكل آمن افتراضيًا](#safe-colocation-by-default)
+- [ميزات تنظيم المشروع](#project-organization-features)
+- [استراتيجيات تنظيم المشروع](#project-organization-strategies)
+
+## وضع الملفات معًا بشكل آمن افتراضيًا
+
+في دليل `app`، تحدد [التسلسل الهرمي للمجلدات المتداخلة](/docs/app/building-your-application/routing#route-segments) بنية المسار.
+
+يمثل كل مجلد جزءًا من المسار يتم تعيينه إلى جزء مقابل في مسار URL.
+
+ومع ذلك، على الرغم من أن بنية المسار تُحدد من خلال المجلدات، إلا أن المسار **غير متاح للجمهور** حتى يتم إضافة ملف `page.js` أو `route.js` إلى جزء المسار.
+
+<Image
+  alt="مخطط يوضح كيف أن المسار غير متاح للجمهور حتى يتم إضافة ملف page.js أو route.js إلى جزء المسار."
+  srcLight="/docs/light/project-organization-not-routable.png"
+  srcDark="/docs/dark/project-organization-not-routable.png"
+  width="1600"
+  height="444"
+/>
+
+وحتى عندما يصبح المسار متاحًا للجمهور، يتم إرسال **المحتوى الذي يتم إرجاعه** فقط بواسطة `page.js` أو `route.js` إلى العميل.
+
+<Image
+  alt="مخطط يوضح كيف أن ملفات page.js و route.js تجعل المسارات متاحة للجمهور."
+  srcLight="/docs/light/project-organization-routable.png"
+  srcDark="/docs/dark/project-organization-routable.png"
+  width="1600"
+  height="687"
+/>
+
+هذا يعني أنه يمكن **وضع ملفات المشروع معًا بشكل آمن** داخل أجزاء المسار في دليل `app` دون أن تصبح قابلة للتوجيه بالخطأ.
+
+<Image
+  alt="مخطط يوضح أن ملفات المشروع الموضوعة معًا ليست قابلة للتوجيه حتى عندما يحتوي الجزء على ملف page.js أو route.js."
+  srcLight="/docs/light/project-organization-colocation.png"
+  srcDark="/docs/dark/project-organization-colocation.png"
+  width="1600"
+  height="1011"
+/>
+
+> **جيد أن تعرف**:
+>
+> - هذا يختلف عن دليل `pages`، حيث يعتبر أي ملف في `pages` مسارًا.
+> - بينما يمكنك وضع ملفات مشروعك معًا في `app`، ليس عليك فعل ذلك. إذا كنت تفضل، يمكنك [إبقاؤها خارج دليل `app`](#store-project-files-outside-of-app).
+
+## ميزات تنظيم المشروع
+
+يوفر Next.js عدة ميزات لمساعدتك في تنظيم مشروعك.
+
+### المجلدات الخاصة
+
+يمكن إنشاء مجلدات خاصة عن طريق إضافة شرطة سفلية كبادئة لاسم المجلد: `_folderName`
+
+يشير هذا إلى أن المجلد هو تفاصيل تنفيذ خاصة ولا يجب اعتباره من قبل نظام التوجيه، مما يؤدي إلى **استثناء المجلد وجميع مجلداته الفرعية** من التوجيه.
+
+<Image
+  alt="مثال على هيكل المجلدات باستخدام المجلدات الخاصة"
+  srcLight="/docs/light/project-organization-private-folders.png"
+  srcDark="/docs/dark/project-organization-private-folders.png"
+  width="1600"
+  height="849"
+/>
+
+نظرًا لأنه يمكن [وضع الملفات معًا بشكل آمن افتراضيًا](#safe-colocation-by-default) في دليل `app`، فإن المجلدات الخاصة ليست مطلوبة لوضع الملفات معًا. ومع ذلك، يمكن أن تكون مفيدة لـ:
+
+- فصل منطق واجهة المستخدم عن منطق التوجيه.
+- تنظيم الملفات الداخلية بشكل متسق عبر المشروع وبيئة Next.js.
+- فرز وتجميع الملفات في محررات الأكواد.
+- تجنب التعارضات المحتملة في التسمية مع اتفاقيات ملفات Next.js المستقبلية.
+
+> **جيد أن تعرف**
+>
+> - على الرغم من أنها ليست اتفاقية إطار عمل، يمكنك أيضًا التفكير في وضع علامة على الملفات خارج المجلدات الخاصة كـ "خاصة" باستخدام نفس نمط الشرطة السفلية.
+> - يمكنك إنشاء أجزاء URL تبدأ بشرطة سفلية عن طريق إضافة `%5F` (الشكل المشفر لـ URL للشرطة السفلية) كبادئة لاسم المجلد: `%5FfolderName`.
+> - إذا لم تستخدم المجلدات الخاصة، سيكون من المفهم معرفة [اتفاقيات الملفات الخاصة](/docs/getting-started/project-structure#routing-files) في Next.js لتجنب التعارضات غير المتوقعة في التسمية.
+
+### مجموعات المسارات
+
+يمكن إنشاء مجموعات المسارات عن طريق وضع مجلد بين قوسين: `(folderName)`
+
+يشير هذا إلى أن المجلد هو لأغراض تنظيمية ولا يجب **إدراجه** في مسار URL للمسار.
+
+<Image
+  alt="مثال على هيكل المجلدات باستخدام مجموعات المسارات"
+  srcLight="/docs/light/project-organization-route-groups.png"
+  srcDark="/docs/dark/project-organization-route-groups.png"
+  width="1600"
+  height="849"
+/>
+
+تكون مجموعات المسارات مفيدة لـ:
+
+- [تنظيم المسارات في مجموعات](/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path) مثل القسم في الموقع، الغرض، أو الفريق.
+- تمكين التخطيطات المتداخلة في نفس مستوى جزء المسار:
+  - [إنشاء تخطيطات متداخلة متعددة في نفس الجزء، بما في ذلك تخطيطات الجذر المتعددة](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
+  - [إضافة تخطيط إلى مجموعة فرعية من المسارات في جزء مشترك](/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout)
+
+### دليل `src`
+
+يدعم Next.js تخزين كود التطبيق (بما في ذلك `app`) داخل دليل [`src` اختياري](/docs/app/building-your-application/configuring/src-directory). هذا يفصل كود التطبيق عن ملفات تكوين المشروع التي تعيش في الغالب في جذر المشروع.
+
+<Image
+  alt="مثال على هيكل المجلدات مع دليل `src`"
+  srcLight="/docs/light/project-organization-src-directory.png"
+  srcDark="/docs/dark/project-organization-src-directory.png"
+  width="1600"
+  height="687"
+/>
+
+### أسماء مسارات الوحدات
+
+يدعم Next.js [أسماء مسارات الوحدات](/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases) التي تجعل قراءة وصيانة الاستيرادات عبر ملفات المشروع المتداخلة بعمق أسهل.
+
+```jsx filename="app/dashboard/settings/analytics/page.js"
+// قبل
+import { Button } from '../../../components/button'
+
+// بعد
+import { Button } from '@/components/button'
+```
+
+## استراتيجيات تنظيم المشروع
+
+لا توجد طريقة "صحيحة" أو "خاطئة" عندما يتعلق الأمر بتنظيم ملفاتك ومجلداتك في مشروع Next.js.
+
+يقدم القسم التالي نظرة عامة عالية المستوى على الاستراتيجيات الشائعة. الخلاصة الأبسط هي اختيار استراتيجية تناسبك وفريقك والالتزام بها عبر المشروع.
+
+> **جيد أن تعرف**: في الأمثلة أدناه، نستخدم مجلدات `components` و `lib` كعناصر نائبة عامة، ولا يوجد أهمية خاصة لأسمائها في الإطار، وقد تستخدم مشاريعك مجلدات أخرى مثل `ui`، `utils`، `hooks`، `styles`، إلخ.
+
+### تخزين ملفات المشروع خارج `app`
+
+تخزن هذه الاستراتيجية جميع أكواد التطبيق في مجلدات مشتركة في **جذر مشروعك** وتحافظ على دليل `app` لأغراض التوجيه فقط.
+
+<Image
+  alt="مثال على هيكل المجلدات مع ملفات المشروع خارج app"
+  srcLight="/docs/light/project-organization-project-root.png"
+  srcDark="/docs/dark/project-organization-project-root.png"
+  width="1600"
+  height="849"
+/>
+
+### تخزين ملفات المشروع في مجلدات المستوى الأعلى داخل `app`
+
+تخزن هذه الاستراتيجية جميع أكواد التطبيق في مجلدات مشتركة في **جذر دليل `app`**.
+
+<Image
+  alt="مثال على هيكل المجلدات مع ملفات المشروع داخل app"
+  srcLight="/docs/light/project-organization-app-root.png"
+  srcDark="/docs/dark/project-organization-app-root.png"
+  width="1600"
+  height="849"
+/>
+
+### تقسيم ملفات المشروع حسب الميزة أو المسار
+
+تخزن هذه الاستراتيجية أكواد التطبيق المشتركة عالميًا في جذر دليل `app` وتقسم أكواد التطبيق الأكثر تحديدًا إلى أجزاء المسار التي تستخدمها.
+
+<Image
+  alt="مثال على هيكل المجلدات مع ملفات المشروع مقسمة حسب الميزة أو المسار"
+  srcLight="/docs/light/project-organization-app-root-split.png"
+  srcDark="/docs/dark/project-organization-app-root-split.png"
+  width="1600"
+  height="1011"
+/>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/09-dynamic-routes.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/09-dynamic-routes.mdx
new file mode 100644
index 00000000..f868c48b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/09-dynamic-routes.mdx
@@ -0,0 +1,128 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:47:27.187Z
+title: المسارات الديناميكية
+description: يمكن استخدام المسارات الديناميكية لإنشاء مقاطع المسارات برمجيًا من البيانات الديناميكية.
+related:
+  title: الخطوات التالية
+  description: لمزيد من المعلومات حول ما يمكن القيام به بعد ذلك، نوصي بالأقسام التالية
+  links:
+    - app/building-your-application/routing/linking-and-navigating
+    - app/api-reference/functions/generate-static-params
+---
+
+عندما لا تعرف أسماء المقاطع مسبقًا وتريد إنشاء مسارات من بيانات ديناميكية، يمكنك استخدام المقاطع الديناميكية التي يتم تعبئتها وقت الطلب أو [تجهيزها مسبقًا](#generating-static-params) وقت البناء.
+
+## الاصطلاح
+
+يمكن إنشاء مقطع ديناميكي عن طريق لف اسم المجلد بين أقواس مربعة: `[folderName]`. على سبيل المثال، `[id]` أو `[slug]`.
+
+يتم تمرير المقاطع الديناميكية كخاصية `params` إلى دوال [`layout`](/docs/app/api-reference/file-conventions/layout)، و[`page`](/docs/app/api-reference/file-conventions/page)، و[`route`](/docs/app/building-your-application/routing/route-handlers)، و[`generateMetadata`](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function).
+
+## مثال
+
+على سبيل المثال، يمكن أن يتضمن المدخل المسار التالي `app/blog/[slug]/page.js` حيث `[slug]` هو المقطع الديناميكي لمقالات المدونة.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function Page({ params }: { params: { slug: string } }) {
+  return <div>My Post: {params.slug}</div>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export default function Page({ params }) {
+  return <div>My Post: {params.slug}</div>
+}
+```
+
+| المسار                     | مثال URL | `params`        |
+| ------------------------- | ----------- | --------------- |
+| `app/blog/[slug]/page.js` | `/blog/a`   | `{ slug: 'a' }` |
+| `app/blog/[slug]/page.js` | `/blog/b`   | `{ slug: 'b' }` |
+| `app/blog/[slug]/page.js` | `/blog/c`   | `{ slug: 'c' }` |
+
+راجع صفحة [generateStaticParams()](#generating-static-params) لمعرفة كيفية إنشاء معلمات المقطع.
+
+> **ملاحظة جيدة**: المقاطع الديناميكية تعادل [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) في دليل `pages`.
+
+## إنشاء معلمات ثابتة
+
+يمكن استخدام دالة `generateStaticParams` بالاشتراك مع [مقاطع المسار الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) ل[إنشاء مسارات **ثابتة**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) وقت البناء بدلاً من الطلب عند الطلب.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export async function generateStaticParams() {
+  const posts = await fetch('https://.../posts').then((res) => res.json())
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export async function generateStaticParams() {
+  const posts = await fetch('https://.../posts').then((res) => res.json())
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+```
+
+الفائدة الأساسية من دالة `generateStaticParams` هي استرجاعها الذكي للبيانات. إذا تم جلب المحتوى داخل دالة `generateStaticParams` باستخدام طلب `fetch`، فإن الطلبات يتم [تخزينها مؤقتًا تلقائيًا](/docs/app/building-your-application/caching#request-memoization). هذا يعني أن طلب `fetch` بنفس الوسائط عبر عدة `generateStaticParams`، وتخطيطات، وصفحات سيتم تنفيذه مرة واحدة فقط، مما يقلل أوقات البناء.
+
+استخدم [دليل الترحيل](/docs/app/building-your-application/upgrading/app-router-migration#dynamic-paths-getstaticpaths) إذا كنت تقوم بالترحيل من دليل `pages`.
+
+راجع [توثيق دالة الخادم `generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) لمزيد من المعلومات وحالات الاستخدام المتقدمة.
+
+## مقاطع التقاط الكل
+
+يمكن توسيع المقاطع الديناميكية ل**التقاط جميع** المقاطع اللاحقة عن طريق إضافة نقاط حذف داخل الأقواس `[...folderName]`.
+
+على سبيل المثال، `app/shop/[...slug]/page.js` ستطابق `/shop/clothes`، وأيضًا `/shop/clothes/tops`، و`/shop/clothes/tops/t-shirts`، وهكذا.
+
+| المسار                        | مثال URL   | `params`                    |
+| ---------------------------- | ------------- | --------------------------- |
+| `app/shop/[...slug]/page.js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `app/shop/[...slug]/page.js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `app/shop/[...slug]/page.js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
+
+## مقاطع التقاط الكل الاختيارية
+
+يمكن جعل مقاطع التقاط الكل **اختيارية** عن طريق تضمين المعلمة في أقواس مربعة مزدوجة: `[[...folderName]]`.
+
+على سبيل المثال، `app/shop/[[...slug]]/page.js` ستطابق أيضًا `/shop`، بالإضافة إلى `/shop/clothes`، و`/shop/clothes/tops`، و`/shop/clothes/tops/t-shirts`.
+
+الفرق بين مقاطع **التقاط الكل** و**التقاط الكل الاختيارية** هو أن الاختيارية تطابق المسار بدون المعلمة أيضًا (`/shop` في المثال أعلاه).
+
+| المسار                          | مثال URL   | `params`                    |
+| ------------------------------ | ------------- | --------------------------- |
+| `app/shop/[[...slug]]/page.js` | `/shop`       | `{}`                        |
+| `app/shop/[[...slug]]/page.js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `app/shop/[[...slug]]/page.js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `app/shop/[[...slug]]/page.js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
+
+## TypeScript
+
+عند استخدام TypeScript، يمكنك إضافة أنواع لـ `params` بناءً على مقطع المسار المُهيأ.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function Page({ params }: { params: { slug: string } }) {
+  return <h1>My Page</h1>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export default function Page({ params }) {
+  return <h1>My Page</h1>
+}
+```
+
+| المسار                               | تعريف نوع `params`                 |
+| ----------------------------------- | ---------------------------------------- |
+| `app/blog/[slug]/page.js`           | `{ slug: string }`                       |
+| `app/shop/[...slug]/page.js`        | `{ slug: string[] }`                     |
+| `app/shop/[[...slug]]/page.js`      | `{ slug?: string[] }`                    |
+| `app/[categoryId]/[itemId]/page.js` | `{ categoryId: string, itemId: string }` |
+
+> **ملاحظة جيدة**: قد يتم ذلك تلقائيًا بواسطة [ملحق TypeScript](/docs/app/building-your-application/configuring/typescript#typescript-plugin) في المستقبل.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/10-parallel-routes.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/10-parallel-routes.mdx
new file mode 100644
index 00000000..db5ff20e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/10-parallel-routes.mdx
@@ -0,0 +1,466 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:48:50.009Z
+title: المسارات المتوازية (Parallel Routes)
+description: عرض صفحة أو أكثر في نفس الواجهة بشكل متزامن مع إمكانية التنقل بينها بشكل مستقل. نمط لتطبيقات الويب الديناميكية للغاية.
+related:
+  links:
+    - app/api-reference/file-conventions/default
+---
+
+تتيح لك المسارات المتوازية (Parallel Routes) عرض صفحة أو أكثر في نفس التخطيط بشكل متزامن أو مشروط. وهي مفيدة للأقسام الديناميكية للغاية في التطبيق، مثل لوحات التحكم وتغذيات المواقع الاجتماعية.
+
+على سبيل المثال، بالنظر إلى لوحة التحكم، يمكنك استخدام المسارات المتوازية لعرض صفحات `team` و `analytics` في نفس الوقت:
+
+<Image
+  alt="رسم توضيحي للمسارات المتوازية"
+  srcLight="/docs/light/parallel-routes.png"
+  srcDark="/docs/dark/parallel-routes.png"
+  width="1600"
+  height="942"
+/>
+
+## الفتحات (Slots)
+
+يتم إنشاء المسارات المتوازية باستخدام **فتحات** مسماة. يتم تعريف الفتحات باستخدام اصطلاح `@folder`. على سبيل المثال، بنية الملفات التالية تحدد فتحتين: `@analytics` و `@team`:
+
+<Image
+  alt="بنية نظام الملفات للمسارات المتوازية"
+  srcLight="/docs/light/parallel-routes-file-system.png"
+  srcDark="/docs/dark/parallel-routes-file-system.png"
+  width="1600"
+  height="687"
+/>
+
+يتم تمرير الفتحات كخصائص (props) إلى تخطيط الأب المشترك. بالنسبة للمثال أعلاه، المكون في `app/layout.js` يقبل الآن خصائص فتحات `@analytics` و `@team`، ويمكنه عرضها بالتوازي مع خاصية `children`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function Layout({
+  children,
+  team,
+  analytics,
+}: {
+  children: React.ReactNode
+  analytics: React.ReactNode
+  team: React.ReactNode
+}) {
+  return (
+    <>
+      {children}
+      {team}
+      {analytics}
+    </>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function Layout({ children, team, analytics }) {
+  return (
+    <>
+      {children}
+      {team}
+      {analytics}
+    </>
+  )
+}
+```
+
+ومع ذلك، الفتحات **ليست** [أجزاء مسار (route segments)](/docs/app/building-your-application/routing#route-segments) ولا تؤثر على بنية URL. على سبيل المثال، بالنسبة لـ `/@analytics/views`، سيكون URL هو `/views` لأن `@analytics` فتحة.
+
+> **معلومة مفيدة**:
+>
+> - خاصية `children` هي فتحة ضمنية لا تحتاج إلى تعيينها لمجلد. هذا يعني أن `app/page.js` تعادل `app/@children/page.js`.
+
+## الحالة النشطة والتنقل
+
+بشكل افتراضي، يتتبع Next.js الحالة _النشطة_ (أو الصفحة الفرعية) لكل فتحة. ومع ذلك، المحتوى المعروض داخل الفتحة سيعتمد على نوع التنقل:
+
+- [**التنقل اللين (Soft Navigation)**](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation): أثناء التنقل من جانب العميل، سيقوم Next.js بعمل [عرض جزئي (partial render)](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering)، تغيير الصفحة الفرعية داخل الفتحة، مع الحفاظ على الصفحات الفرعية النشطة للفتحات الأخرى، حتى لو لم تتطابق مع URL الحالي.
+- **التنقل الصعب (Hard Navigation)**: بعد تحميل الصفحة بالكامل (تحديث المتصفح)، لا يمكن لـ Next.js تحديد الحالة النشطة للفتحات التي لا تتطابق مع URL الحالي. بدلاً من ذلك، سيعرض ملف [`default.js`](#defaultjs) للفتحات غير المتطابقة، أو `404` إذا لم يكن `default.js` موجودًا.
+
+> **معلومة مفيدة**:
+>
+> - تساعد صفحة `404` للمسارات غير المتطابقة على ضمان عدم عرض مسار متوازي على صفحة لم يكن مقصودًا لها.
+
+### `default.js`
+
+يمكنك تحديد ملف `default.js` ليعرض كخيار احتياطي للفتحات غير المتطابقة أثناء التحميل الأولي أو إعادة تحميل الصفحة بالكامل.
+
+ضع في الاعتبار بنية المجلد التالية. فتحة `@team` لديها صفحة `/settings`، ولكن `@analytics` لا تملكها.
+
+<Image
+  alt="المسارات المتوازية للمسارات غير المتطابقة"
+  srcLight="/docs/light/parallel-routes-unmatched-routes.png"
+  srcDark="/docs/dark/parallel-routes-unmatched-routes.png"
+  width="1600"
+  height="930"
+/>
+
+عند التنقل إلى `/settings`، ستعرض فتحة `@team` صفحة `/settings` مع الحفاظ على الصفحة النشطة حاليًا لفتحة `@analytics`.
+
+عند التحديث، سيعرض Next.js ملف `default.js` لـ `@analytics`. إذا لم يكن `default.js` موجودًا، فسيتم عرض `404` بدلاً من ذلك.
+
+بالإضافة إلى ذلك، نظرًا لأن `children` هي فتحة ضمنية، فأنت بحاجة أيضًا إلى إنشاء ملف `default.js` لعرض خيار احتياطي لـ `children` عندما لا يتمكن Next.js من استعادة الحالة النشطة للصفحة الأصلية.
+
+### `useSelectedLayoutSegment(s)`
+
+كل من [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment) و [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) يقبلان معلمة `parallelRoutesKey`، مما يسمح لك بقراءة جزء المسار النشط داخل فتحة.
+
+```tsx filename="app/layout.tsx" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default function Layout({ auth }: { auth: React.ReactNode }) {
+  const loginSegment = useSelectedLayoutSegment('auth')
+  // ...
+}
+```
+
+```jsx filename="app/layout.js" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default function Layout({ auth }) {
+  const loginSegment = useSelectedLayoutSegment('auth')
+  // ...
+}
+```
+
+عندما ينتقل المستخدم إلى `app/@auth/login` (أو `/login` في شريط العناوين)، سيكون `loginSegment` مساويًا للسلسلة `"login"`.
+
+## أمثلة
+
+### مسارات مشروطة
+
+يمكنك استخدام المسارات المتوازية لعرض مسارات مشروطة بناءً على شروط معينة، مثل دور المستخدم. على سبيل المثال، لعرض صفحة لوحة تحكم مختلفة لدور `/admin` أو `/user`:
+
+<Image
+  alt="رسم توضيحي للمسارات المشروطة"
+  srcLight="/docs/light/conditional-routes-ui.png"
+  srcDark="/docs/dark/conditional-routes-ui.png"
+  width="1600"
+  height="898"
+/>
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import { checkUserRole } from '@/lib/auth'
+
+export default function Layout({
+  user,
+  admin,
+}: {
+  user: React.ReactNode
+  admin: React.ReactNode
+}) {
+  const role = checkUserRole()
+  return <>{role === 'admin' ? admin : user}</>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import { checkUserRole } from '@/lib/auth'
+
+export default function Layout({ user, admin }) {
+  const role = checkUserRole()
+  return <>{role === 'admin' ? admin : user}</>
+}
+```
+
+### مجموعات علامات التبويب
+
+يمكنك إضافة `layout` داخل فتحة للسماح للمستخدمين بالتنقل في الفتحة بشكل مستقل. هذا مفيد لإنشاء علامات تبويب.
+
+على سبيل المثال، فتحة `@analytics` لديها صفحتان فرعيتان: `/page-views` و `/visitors`.
+
+<Image
+  alt="فتحة التحليلات مع صفحتين فرعيتين وتخطيط"
+  srcLight="/docs/light/parallel-routes-tab-groups.png"
+  srcDark="/docs/dark/parallel-routes-tab-groups.png"
+  width="1600"
+  height="768"
+/>
+
+داخل `@analytics`، أنشئ ملف [`layout`](/docs/app/building-your-application/routing/pages-and-layouts) لمشاركة علامات التبويب بين الصفحتين:
+
+```tsx filename="app/@analytics/layout.tsx" switcher
+import Link from 'next/link'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <nav>
+        <Link href="/page-views">Page Views</Link>
+        <Link href="/visitors">Visitors</Link>
+      </nav>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+```jsx filename="app/@analytics/layout.js" switcher
+import Link from 'next/link'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <nav>
+        <Link href="/page-views">Page Views</Link>
+        <Link href="/visitors">Visitors</Link>
+      </nav>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+### النوافذ المنبثقة (Modals)
+
+يمكن استخدام المسارات المتوازية مع [مسارات الاعتراض (Intercepting Routes)](/docs/app/building-your-application/routing/intercepting-routes) لإنشاء نوافذ منبثقة. هذا يسمح لك بحل التحديات الشائعة عند بناء النوافذ المنبثقة، مثل:
+
+- جعل محتوى النافذة المنبثقة **قابلاً للمشاركة عبر URL**.
+- **الحفاظ على السياق** عند تحديث الصفحة، بدلاً من إغلاق النافذة المنبثقة.
+- **إغلاق النافذة المنبثقة عند التنقل للخلف** بدلاً من الانتقال إلى المسار السابق.
+- **إعادة فتح النافذة المنبثقة عند التنقل للأمام**.
+
+ضع في الاعتبار نمط واجهة المستخدم التالي، حيث يمكن للمستخدم فتح نافذة منبثقة لتسجيل الدخول من تخطيط باستخدام التنقل من جانب العميل، أو الوصول إلى صفحة `/login` منفصلة:
+
+<Image
+  alt="رسم توضيحي للمسارات المتوازية للنافذة المنبثقة لتسجيل الدخول"
+  srcLight="/docs/light/parallel-routes-auth-modal.png"
+  srcDark="/docs/dark/parallel-routes-auth-modal.png"
+  width="1600"
+  height="687"
+/>
+
+لتنفيذ هذا النمط، ابدأ بإنشاء مسار `/login` الذي يعرض صفحة تسجيل الدخول **الرئيسية**.
+
+<Image
+  alt="رسم توضيحي للمسارات المتوازية لصفحة تسجيل الدخول المنبثقة"
+  srcLight="/docs/light/parallel-routes-modal-login-page.png"
+  srcDark="/docs/dark/parallel-routes-modal-login-page.png"
+  width="1600"
+  height="768"
+/>
+
+```tsx filename="app/login/page.tsx" switcher
+import { Login } from '@/app/ui/login'
+
+export default function Page() {
+  return <Login />
+}
+```
+
+```jsx filename="app/login/page.js" switcher
+import { Login } from '@/app/ui/login'
+
+export default function Page() {
+  return <Login />
+}
+```
+
+ثم، داخل فتحة `@auth`، أضف ملف [`default.js`](/docs/app/api-reference/file-conventions/default) الذي يُرجع `null`. هذا يضمن عدم عرض النافذة المنبثقة عندما لا تكون نشطة.
+
+```tsx filename="app/@auth/default.tsx" switcher
+export default function Default() {
+  return null
+}
+```
+
+```jsx filename="app/@auth/default.js" switcher
+export default function Default() {
+  return null
+}
+```
+
+داخل فتحة `@auth` الخاصة بك، اعترض مسار `/login` عن طريق تحديث مجلد `/(.)login`. استورد مكون `<Modal>` وأطفاله إلى ملف `/(.)login/page.tsx`:
+
+```tsx filename="app/@auth/(.)login/page.tsx" switcher
+import { Modal } from '@/app/ui/modal'
+import { Login } from '@/app/ui/login'
+
+export default function Page() {
+  return (
+    <Modal>
+      <Login />
+    </Modal>
+  )
+}
+```
+
+```jsx filename="app/@auth/(.)login/page.js" switcher
+import { Modal } from '@/app/ui/modal'
+import { Login } from '@/app/ui/login'
+
+export default function Page() {
+  return (
+    <Modal>
+      <Login />
+    </Modal>
+  )
+}
+```
+
+> **معلومة مفيدة:**
+>
+> - الاصطلاح المستخدم لاعتراض المسار، مثل `(.)`، يعتمد على بنية نظام الملفات لديك. راجع [اصطلاح مسارات الاعتراض (Intercepting Routes convention)](/docs/app/building-your-application/routing/intercepting-routes#convention).
+> - من خلال فصل وظيفة `<Modal>` عن محتوى النافذة المنبثقة (`<Login>`)، يمكنك التأكد من أن أي محتوى داخل النافذة المنبثقة، مثل [النماذج (forms)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms)، هي مكونات خادم (Server Components). راجع [دمج مكونات العميل والخادم (Interleaving Client and Server Components)](/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props) لمزيد من المعلومات.
+
+#### فتح النافذة المنبثقة
+
+الآن، يمكنك الاستفادة من موجه Next.js لفتح وإغلاق النافذة المنبثقة. هذا يضمن تحديث URL بشكل صحيح عند فتح النافذة المنبثقة، وعند التنقل للخلف والأمام.
+
+لفتح النافذة المنبثقة، مرر فتحة `@auth` كخاصية إلى تخطيط الأب واعرضها جنبًا إلى جنب مع خاصية `children`.
+
+```tsx filename="app/layout.tsx" switcher
+import Link from 'next/link'
+
+export default function Layout({
+  auth,
+  children,
+}: {
+  auth: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <nav>
+        <Link href="/login">فتح النافذة المنبثقة</Link>
+      </nav>
+      <div>{auth}</div>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import Link from 'next/link'
+
+export default function Layout({ auth, children }) {
+  return (
+    <>
+      <nav>
+        <Link href="/login">فتح النافذة المنبثقة</Link>
+      </nav>
+      <div>{auth}</div>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+عندما ينقر المستخدم على `<Link>`، ستفتح النافذة المنبثقة بدلاً من الانتقال إلى صفحة `/login`. ومع ذلك، عند التحديث أو التحميل الأولي، سيتم نقل المستخدم إلى صفحة تسجيل الدخول الرئيسية عند الانتقال إلى `/login`.
+
+#### إغلاق النافذة المنبثقة
+
+يمكنك إغلاق النافذة المنبثقة عن طريق استدعاء `router.back()` أو باستخدام مكون `Link`.
+
+```tsx filename="app/ui/modal.tsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          router.back()
+        }}
+      >
+        إغلاق النافذة المنبثقة
+      </button>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+```jsx filename="app/ui/modal.js" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export function Modal({ children }) {
+  const router = useRouter()
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          router.back()
+        }}
+      >
+        إغلاق النافذة المنبثقة
+      </button>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+عند استخدام مكون `Link` للتنقل بعيدًا عن صفحة لا يجب أن تعرض فتحة `@auth` بعد الآن، نستخدم مسار catch-all يُرجع `null`.
+
+```tsx filename="app/ui/modal.tsx" switcher
+import Link from 'next/link'
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Link href="/">إغلاق النافذة المنبثقة</Link>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+```jsx filename="app/ui/modal.js" switcher
+import Link from 'next/link'
+
+export function Modal({ children }) {
+  return (
+    <>
+      <Link href="/">إغلاق النافذة المنبثقة</Link>
+      <div>{children}</div>
+    </>
+  )
+}
+```
+
+```tsx filename="app/@auth/[...catchAll]/page.tsx" switcher
+export default function CatchAll() {
+  return null
+}
+```
+
+```jsx filename="app/@auth/[...catchAll]/page.js" switcher
+export default function CatchAll() {
+  return null
+}
+```
+
+> **معلومة مفيدة:**
+>
+> - نستخدم مسار catch-all في فتحة `@auth` لإغلاق النافذة المنبثقة بسبب السلوك الموصوف في [الحالة النشطة والتنقل](#active-state-and-navigation). نظرًا لأن عمليات التنقل من جانب العميل إلى مسار لم يعد يتطابق مع الفتحة ستبقى مرئية، نحتاج إلى مطابقة الفتحة مع مسار يُرجع `null` لإغلاق النافذة المنبثقة.
+> - يمكن أن تشمل الأمثلة الأخرى فتح نافذة منبثقة للصورة في معرض مع وجود صفحة مخصصة `/photo/[id]`، أو فتح عربة التسوق في نافذة منبثقة جانبية.
+> - [عرض مثال](https://github.com/vercel-labs/nextgram) للنوافذ المنبثقة مع مسارات الاعتراض والمتوازية.
+
+### واجهات التحميل والخطأ
+
+يمكن بث المسارات المتوازية بشكل مستقل، مما يسمح لك بتحديد حالات الخطأ والتحميل المستقلة لكل مسار:
+
+<Image
+  alt="تمكن المسارات المتوازية حالات الخطأ والتحميل المخصصة"
+  srcLight="/docs/light/parallel-routes-cinematic-universe.png"
+  srcDark="/docs/dark/parallel-routes-cinematic-universe.png"
+  width="1600"
+  height="1218"
+/>
+
+راجع وثائق [واجهة التحميل (Loading UI)](/docs/app/building-your-application/routing/loading-ui-and-streaming) و [معالجة الأخطاء (Error Handling)](/docs/app/building-your-application/routing/error-handling) لمزيد من المعلومات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/11-intercepting-routes.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/11-intercepting-routes.mdx
new file mode 100644
index 00000000..8459e482
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/11-intercepting-routes.mdx
@@ -0,0 +1,85 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:46:38.339Z
+title: مسارات الاعتراض (Intercepting Routes)
+description: استخدم مسارات الاعتراض لتحميل مسار جديد داخل التخطيط الحالي مع إخفاء عنوان URL للمتصفح، مفيد لأنماط التوجيه المتقدمة مثل النوافذ المنبثقة.
+related:
+  title: الخطوات التالية
+  description: تعلم كيفية استخدام النوافذ المنبثقة مع المسارات المعترضة والموازية.
+  links:
+    - app/building-your-application/routing/parallel-routes
+---
+
+تسمح لك مسارات الاعتراض بتحميل مسار من جزء آخر من تطبيقك داخل التخطيط الحالي. يمكن أن يكون هذا النموذج من التوجيه مفيدًا عندما تريد عرض محتوى مسار دون أن ينتقل المستخدم إلى سياق مختلف.
+
+على سبيل المثال، عند النقر على صورة في موجز، يمكنك عرض الصورة في نافذة منبثقة، تطفو فوق الموجز. في هذه الحالة، يعترض Next.js مسار `/photo/123`، ويخفي عنوان URL، ويعرضه فوق `/feed`.
+
+<Image
+  alt="التنقل اللطيف لمسارات الاعتراض"
+  srcLight="/docs/light/intercepting-routes-soft-navigate.png"
+  srcDark="/docs/dark/intercepting-routes-soft-navigate.png"
+  width="1600"
+  height="617"
+/>
+
+ومع ذلك، عند الانتقال إلى الصورة عن طريق النقر على رابط قابل للمشاركة أو عن طريق تحديث الصفحة، يجب أن يتم عرض صفحة الصورة بالكامل بدلاً من النافذة المنبثقة. لا ينبغي أن يحدث أي اعتراض للمسار.
+
+<Image
+  alt="التنقل الصعب لمسارات الاعتراض"
+  srcLight="/docs/light/intercepting-routes-hard-navigate.png"
+  srcDark="/docs/dark/intercepting-routes-hard-navigate.png"
+  width="1600"
+  height="604"
+/>
+
+## الاصطلاح
+
+يمكن تعريف مسارات الاعتراض باستخدام اصطلاح `(..)`، والذي يشبه اصطلاح المسار النسبي `../` ولكن للأجزاء.
+
+يمكنك استخدام:
+
+- `(.)` لمطابقة الأجزاء على **نفس المستوى**
+- `(..)` لمطابقة الأجزاء **مستوى واحد أعلى**
+- `(..)(..)` لمطابقة الأجزاء **مستويين أعلى**
+- `(...)` لمطابقة الأجزاء من الدليل الجذر `app`
+
+على سبيل المثال، يمكنك اعتراض جزء `photo` من داخل جزء `feed` عن طريق إنشاء دليل `(..)photo`.
+
+<Image
+  alt="هيكل مجلد مسارات الاعتراض"
+  srcLight="/docs/light/intercepted-routes-files.png"
+  srcDark="/docs/dark/intercepted-routes-files.png"
+  width="1600"
+  height="604"
+/>
+
+> لاحظ أن اصطلاح `(..)` يعتمد على _أجزاء المسار_، وليس نظام الملفات.
+
+## أمثلة
+
+### النوافذ المنبثقة
+
+يمكن استخدام مسارات الاعتراض مع [المسارات الموازية](/docs/app/building-your-application/routing/parallel-routes) لإنشاء نوافذ منبثقة. يتيح لك ذلك حل التحديات الشائعة عند بناء النوافذ المنبثقة، مثل:
+
+- جعل محتوى النافذة المنبثقة **قابلاً للمشاركة عبر URL**.
+- **الحفاظ على السياق** عند تحديث الصفحة، بدلاً من إغلاق النافذة المنبثقة.
+- **إغلاق النافذة المنبثقة عند التنقل للخلف** بدلاً من الانتقال إلى المسار السابق.
+- **إعادة فتح النافذة المنبثقة عند التنقل للأمام**.
+
+فكر في نمط واجهة المستخدم التالي، حيث يمكن للمستخدم فتح نافذة منبثقة للصورة من معرض باستخدام التنقل من جانب العميل، أو الانتقال إلى صفحة الصورة مباشرة من عنوان URL قابل للمشاركة:
+
+<Image
+  alt="مثال نافذة منبثقة لمسارات الاعتراض"
+  srcLight="/docs/light/intercepted-routes-modal-example.png"
+  srcDark="/docs/dark/intercepted-routes-modal-example.png"
+  width="1600"
+  height="976"
+/>
+
+في المثال أعلاه، يمكن لمسار جزء `photo` استخدام المطابق `(..)` نظرًا لأن `@modal` هو فتحة و**ليس** جزءًا. هذا يعني أن مسار `photo` أعلى بمستوى جزء واحد فقط، على الرغم من أنه أعلى بمستويين في نظام الملفات.
+
+راجع وثائق [المسارات الموازية](/docs/app/building-your-application/routing/parallel-routes#modals) للحصول على مثال خطوة بخطوة، أو راجع [مثال معرض الصور](https://github.com/vercel-labs/nextgram).
+
+> **جيد أن تعرف:**
+>
+> - يمكن أن تشمل الأمثلة الأخرى فتح نافذة منبثقة لتسجيل الدخول في شريط تنقل علوي مع وجود صفحة مخصصة `/login`، أو فتح عربة تسوق في نافذة منبثقة جانبية.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/12-route-handlers.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
new file mode 100644
index 00000000..a5fc658e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
@@ -0,0 +1,731 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:48:57.600Z
+title: معالجات المسارات (Route Handlers)
+description: إنشاء معالجات طلبات مخصصة لمسار معين باستخدام واجهات Request و Response من الويب.
+related:
+  title: مرجع API
+  description: تعلم المزيد حول ملف route.js.
+  links:
+    - app/api-reference/file-conventions/route
+---
+
+تسمح لك معالجات المسارات (Route Handlers) بإنشاء معالجات طلبات مخصصة لمسار معين باستخدام واجهات الويب [Request](https://developer.mozilla.org/docs/Web/API/Request) و [Response](https://developer.mozilla.org/docs/Web/API/Response).
+
+<Image
+  alt="ملف Route.js الخاص"
+  srcLight="/docs/light/route-special-file.png"
+  srcDark="/docs/dark/route-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+> **معلومة مفيدة**: معالجات المسارات متاحة فقط داخل دليل `app`. وهي تعادل [مسارات API](/docs/pages/building-your-application/routing/api-routes) داخل دليل `pages`، مما يعني أنك **لست بحاجة** لاستخدام مسارات API ومعالجات المسارات معًا.
+
+## الاصطلاح
+
+يتم تعريف معالجات المسارات في ملف [`route.js|ts`](/docs/app/api-reference/file-conventions/route) داخل دليل `app`:
+
+```ts filename="app/api/route.ts" switcher
+export const dynamic = 'force-dynamic' // الافتراضي هو auto
+export async function GET(request: Request) {}
+```
+
+```js filename="app/api/route.js" switcher
+export const dynamic = 'force-dynamic' // الافتراضي هو auto
+export async function GET(request) {}
+```
+
+يمكن تداخل معالجات المسارات داخل دليل `app`، بشكل مشابه لـ `page.js` و `layout.js`. لكن **لا يمكن** وجود ملف `route.js` في نفس مستوى مقطع المسار مثل `page.js`.
+
+### طرق HTTP المدعومة
+
+طرق [HTTP](https://developer.mozilla.org/docs/Web/HTTP/Methods) التالية مدعومة: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, و `OPTIONS`. إذا تم استدعاء طريقة غير مدعومة، سترجع Next.js ردًا بـ `405 Method Not Allowed`.
+
+### واجهات `NextRequest` و `NextResponse` الممتدة
+
+بالإضافة إلى دعم واجهتي [Request](https://developer.mozilla.org/docs/Web/API/Request) و [Response](https://developer.mozilla.org/docs/Web/API/Response) الأصلية، تمتد Next.js مع
+[`NextRequest`](/docs/app/api-reference/functions/next-request) و [`NextResponse`](/docs/app/api-reference/functions/next-response) لتوفير أدوات مساعدة لحالات الاستخدام المتقدمة.
+
+## السلوك
+
+### التخزين المؤقت
+
+يتم تخزين معالجات المسارات مؤقتًا افتراضيًا عند استخدام طريقة `GET` مع كائن `Response`.
+
+```ts filename="app/items/route.ts" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+  })
+  const data = await res.json()
+
+  return Response.json({ data })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+  })
+  const data = await res.json()
+
+  return Response.json({ data })
+}
+```
+
+> **تحذير TypeScript**: `Response.json()` صالح فقط من TypeScript 5.2. إذا كنت تستخدم إصدارًا أقدم من TypeScript، يمكنك استخدام [`NextResponse.json()`](/docs/app/api-reference/functions/next-response#json) للردود المكتوبة بدلاً من ذلك.
+
+### إلغاء التخزين المؤقت
+
+يمكنك إلغاء التخزين المؤقت عن طريق:
+
+- استخدام كائن `Request` مع طريقة `GET`.
+- استخدام أي من طرق HTTP الأخرى.
+- استخدام [الدوال الديناميكية](#dynamic-functions) مثل `cookies` و `headers`.
+- تحديد الوضع الديناميكي يدويًا باستخدام [خيارات تكوين المقطع](#segment-config-options).
+
+مثال:
+
+```ts filename="app/products/api/route.ts" switcher
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const id = searchParams.get('id')
+  const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY!,
+    },
+  })
+  const product = await res.json()
+
+  return Response.json({ product })
+}
+```
+
+```js filename="app/products/api/route.js" switcher
+export async function GET(request) {
+  const { searchParams } = new URL(request.url)
+  const id = searchParams.get('id')
+  const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+  })
+  const product = await res.json()
+
+  return Response.json({ product })
+}
+```
+
+بالمثل، ستؤدي طريقة `POST` إلى تقييم معالج المسار بشكل ديناميكي.
+
+```ts filename="app/items/route.ts" switcher
+export async function POST() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY!,
+    },
+    body: JSON.stringify({ time: new Date().toISOString() }),
+  })
+
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'API-Key': process.env.DATA_API_KEY,
+    },
+    body: JSON.stringify({ time: new Date().toISOString() }),
+  })
+
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+> **معلومة مفيدة**: مثل مسارات API، يمكن استخدام معالجات المسارات لحالات مثل معالجة إرسال النماذج. يتم العمل على تجريد جديد [لتعامل مع النماذج والتحولات](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) يتكامل بعمق مع React.
+
+### تحليل المسار
+
+يمكنك اعتبار `route` كأدنى مستوى من بديهيات التوجيه.
+
+- **لا تشارك** في التخطيطات أو التنقلات من جانب العميل مثل `page`.
+- **لا يمكن** وجود ملف `route.js` في نفس المسار مثل `page.js`.
+
+| الصفحة                 | المسار              | النتيجة                       |
+| -------------------- | ------------------ | ---------------------------- |
+| `app/page.js`        | `app/route.js`     | <Cross size={18} /> تعارض |
+| `app/page.js`        | `app/api/route.js` | <Check size={18} /> صالح    |
+| `app/[user]/page.js` | `app/api/route.js` | <Check size={18} /> صالح    |
+
+كل ملف `route.js` أو `page.js` يأخذ كل أفعال HTTP لذلك المسار.
+
+```jsx filename="app/page.js"
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+
+// ❌ تعارض
+// `app/route.js`
+export async function POST(request) {}
+```
+
+## أمثلة
+
+توضح الأمثلة التالية كيفية دمج معالجات المسارات مع واجهات وميزات Next.js الأخرى.
+
+### إعادة التحقق من البيانات المخزنة مؤقتًا
+
+يمكنك [إعادة التحقق من البيانات المخزنة مؤقتًا](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) باستخدام خيار [`next.revalidate`](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data):
+
+```ts filename="app/items/route.ts" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    next: { revalidate: 60 }, // إعادة التحقق كل 60 ثانية
+  })
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function GET() {
+  const res = await fetch('https://data.mongodb-api.com/...', {
+    next: { revalidate: 60 }, // إعادة التحقق كل 60 ثانية
+  })
+  const data = await res.json()
+
+  return Response.json(data)
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام [خيار تكوين المقطع `revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate):
+
+```ts
+export const revalidate = 60
+```
+
+### الدوال الديناميكية
+
+يمكن استخدام معالجات المسارات مع الدوال الديناميكية من Next.js، مثل [`cookies`](/docs/app/api-reference/functions/cookies) و [`headers`](/docs/app/api-reference/functions/headers).
+
+#### ملفات تعريف الارتباط (Cookies)
+
+يمكنك قراءة أو تعيين ملفات تعريف الارتباط باستخدام [`cookies`](/docs/app/api-reference/functions/cookies) من `next/headers`. يمكن استدعاء هذه الدالة الخادمية مباشرة في معالج المسار، أو تداخلها داخل دالة أخرى.
+
+بدلاً من ذلك، يمكنك إرجاع `Response` جديدة باستخدام رأس [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie).
+
+```ts filename="app/api/route.ts" switcher
+import { cookies } from 'next/headers'
+
+export async function GET(request: Request) {
+  const cookieStore = cookies()
+  const token = cookieStore.get('token')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { 'Set-Cookie': `token=${token.value}` },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { cookies } from 'next/headers'
+
+export async function GET(request) {
+  const cookieStore = cookies()
+  const token = cookieStore.get('token')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { 'Set-Cookie': `token=${token}` },
+  })
+}
+```
+
+يمكنك أيضًا استخدام واجهات الويب الأساسية لقراءة ملفات تعريف الارتباط من الطلب ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
+
+```ts filename="app/api/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const token = request.cookies.get('token')
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  const token = request.cookies.get('token')
+}
+```
+
+#### الرؤوس (Headers)
+
+يمكنك قراءة الرؤوس باستخدام [`headers`](/docs/app/api-reference/functions/headers) من `next/headers`. يمكن استدعاء هذه الدالة الخادمية مباشرة في معالج المسار، أو تداخلها داخل دالة أخرى.
+
+نسخة `headers` هذه للقراءة فقط. لتعيين الرؤوس، تحتاج إلى إرجاع `Response` جديدة مع رؤوس جديدة.
+
+```ts filename="app/api/route.ts" switcher
+import { headers } from 'next/headers'
+
+export async function GET(request: Request) {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { referer: referer },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { headers } from 'next/headers'
+
+export async function GET(request) {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { referer: referer },
+  })
+}
+```
+
+يمكنك أيضًا استخدام واجهات الويب الأساسية لقراءة الرؤوس من الطلب ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
+
+```ts filename="app/api/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const requestHeaders = new Headers(request.headers)
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  const requestHeaders = new Headers(request.headers)
+}
+```
+
+### إعادة التوجيه (Redirects)
+
+```ts filename="app/api/route.ts" switcher
+import { redirect } from 'next/navigation'
+
+export async function GET(request: Request) {
+  redirect('https://nextjs.org/')
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { redirect } from 'next/navigation'
+
+export async function GET(request) {
+  redirect('https://nextjs.org/')
+}
+```
+
+### مقاطع المسار الديناميكية
+
+> نوصي بقراءة صفحة [تحديد المسارات](/docs/app/building-your-application/routing/defining-routes) قبل المتابعة.
+
+يمكن لمعالجات المسارات استخدام [المقاطع الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) لإنشاء معالجات طلبات من بيانات ديناميكية.
+
+```ts filename="app/items/[slug]/route.ts" switcher
+export async function GET(
+  request: Request,
+  { params }: { params: { slug: string } }
+) {
+  const slug = params.slug // 'a', 'b', أو 'c'
+}
+```
+
+```js filename="app/items/[slug]/route.js" switcher
+export async function GET(request, { params }) {
+  const slug = params.slug // 'a', 'b', أو 'c'
+}
+```
+
+| المسار                       | مثال URL | `params`        |
+| --------------------------- | ----------- | --------------- |
+| `app/items/[slug]/route.js` | `/items/a`  | `{ slug: 'a' }` |
+| `app/items/[slug]/route.js` | `/items/b`  | `{ slug: 'b' }` |
+| `app/items/[slug]/route.js` | `/items/c`  | `{ slug: 'c' }` |
+
+### معلمات استعلام URL
+
+كائن الطلب الممرر إلى معالج المسار هو نسخة من `NextRequest`، والتي تحتوي على [بعض الطرق الملائمة الإضافية](/docs/app/api-reference/functions/next-request#nexturl)، بما في ذلك لمعالجة معلمات الاستعلام بسهولة أكبر.
+
+```ts filename="app/api/search/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query هو "hello" لـ /api/search?query=hello
+}
+```
+
+```js filename="app/api/search/route.js" switcher
+export function GET(request) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query هو "hello" لـ /api/search?query=hello
+}
+```
+
+### البث (Streaming)
+
+يستخدم البث عادةً مع نماذج اللغة الكبيرة (LLMs)، مثل OpenAI، للمحتوى المولد بواسطة الذكاء الاصطناعي. تعلم المزيد حول [AI SDK](https://sdk.vercel.ai/docs).
+
+```ts filename="app/api/chat/route.ts" switcher
+import OpenAI from 'openai'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+})
+
+export const runtime = 'edge'
+
+export async function POST(req: Request) {
+  const { messages } = await req.json()
+  const response = await openai.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    stream: true,
+    messages,
+  })
+
+  const stream = OpenAIStream(response)
+
+  return new StreamingTextResponse(stream)
+}
+```
+
+```js filename="app/api/chat/route.js" switcher
+import OpenAI from 'openai'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+})
+
+export const runtime = 'edge'
+
+export async function POST(req) {
+  const { messages } = await req.json()
+  const response = await openai.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    stream: true,
+    messages,
+  })
+
+  const stream = OpenAIStream(response)
+
+  return new StreamingTextResponse(stream)
+}
+```
+
+تستخدم هذه التجريدات واجهات الويب لإنشاء بث. يمكنك أيضًا استخدام واجهات الويب الأساسية مباشرة.
+
+```ts filename="app/api/route.ts" switcher
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+function iteratorToStream(iterator: any) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next()
+
+      if (done) {
+        controller.close()
+      } else {
+        controller.enqueue(value)
+      }
+    },
+  })
+}
+
+function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const encoder = new TextEncoder()
+
+async function* makeIterator() {
+  yield encoder.encode('<p>One</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Two</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Three</p>')
+}
+
+export async function GET() {
+  const iterator = makeIterator()
+  const stream = iteratorToStream(iterator)
+
+  return new Response(stream)
+}
+```
+
+```js filename="app/api/route.js" switcher
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+function iteratorToStream(iterator) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next()
+
+      if (done) {
+        controller.close()
+      } else {
+        controller.enqueue(value)
+      }
+    },
+  })
+}
+
+function sleep(time) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const encoder = new TextEncoder()
+
+async function* makeIterator() {
+  yield encoder.encode('<p>One</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Two</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Three</p>')
+}
+
+export async function GET() {
+  const iterator = makeIterator()
+  const stream = iteratorToStream(iterator)
+
+  return new Response(stream)
+}
+```
+
+### جسم الطلب (Request Body)
+
+يمكنك قراءة جسم `الطلب (Request)` باستخدام طرق واجهة برمجة الويب (Web API) القياسية:
+
+```ts filename="app/items/route.ts" switcher
+export async function POST(request: Request) {
+  const res = await request.json()
+  return Response.json({ res })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST(request) {
+  const res = await request.json()
+  return Response.json({ res })
+}
+```
+
+### بيانات النموذج (FormData) في الطلب
+
+يمكنك قراءة `بيانات النموذج (FormData)` باستخدام الدالة `request.formData()`:
+
+```ts filename="app/items/route.ts" switcher
+export async function POST(request: Request) {
+  const formData = await request.formData()
+  const name = formData.get('name')
+  const email = formData.get('email')
+  return Response.json({ name, email })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST(request) {
+  const formData = await request.formData()
+  const name = formData.get('name')
+  const email = formData.get('email')
+  return Response.json({ name, email })
+}
+```
+
+بما أن جميع بيانات `formData` هي نصوص، يمكنك استخدام [`zod-form-data`](https://www.npmjs.com/zod-form-data) للتحقق من صحة الطلب واسترجاع البيانات بالصيغة التي تفضلها (مثل `number`).
+
+### مشاركة الموارد عبر المصادر (CORS)
+
+يمكنك تعيين رؤوس مشاركة الموارد عبر المصادر (CORS headers) لمعالج مسار (Route Handler) معين باستخدام طرق واجهة برمجة الويب القياسية:
+
+```ts filename="app/api/route.ts" switcher
+export const dynamic = 'force-dynamic' // defaults to auto
+
+export async function GET(request: Request) {
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+export const dynamic = 'force-dynamic' // defaults to auto
+
+export async function GET(request) {
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  })
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - لإضافة رؤوس مشاركة الموارد عبر المصادر (CORS headers) إلى عدة معالجات مسار (Route Handlers)، يمكنك استخدام [البرنامج الوسيط (Middleware)](/docs/app/building-your-application/routing/middleware#cors) أو ملف [`next.config.js`](/docs/app/api-reference/next-config-js/headers#cors).
+> - بدلاً من ذلك، يمكنك الاطلاع على حزمة [مثال مشاركة الموارد عبر المصادر (CORS example)](https://github.com/vercel/examples/blob/main/edge-functions/cors/lib/cors.ts).
+
+### الويب هوكس (Webhooks)
+
+يمكنك استخدام معالج مسار (Route Handler) لاستقبال ويب هوكس (webhooks) من خدمات الطرف الثالث:
+
+```ts filename="app/api/route.ts" switcher
+export async function POST(request: Request) {
+  try {
+    const text = await request.text()
+    // معالجة حمولة الويب هوكس
+  } catch (error) {
+    return new Response(`Webhook error: ${error.message}`, {
+      status: 400,
+    })
+  }
+
+  return new Response('Success!', {
+    status: 200,
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function POST(request) {
+  try {
+    const text = await request.text()
+    // معالجة حمولة الويب هوكس
+  } catch (error) {
+    return new Response(`Webhook error: ${error.message}`, {
+      status: 400,
+    })
+  }
+
+  return new Response('Success!', {
+    status: 200,
+  })
+}
+```
+
+من الجدير بالذكر أنه على عكس مسارات واجهة برمجة التطبيقات (API Routes) مع موجه الصفحات (Pages Router)، لا تحتاج إلى استخدام `bodyParser` أو أي تكوين إضافي.
+
+### بيئات التشغيل Edge و Node.js
+
+تمتلك معالجات المسار (Route Handlers) واجهة برمجة تطبيقات ويب (Web API) متساوية الشكل (isomorphic) لدعم كل من بيئات تشغيل Edge و Node.js بسلاسة، بما في ذلك دعم البث (streaming). بما أن معالجات المسار تستخدم نفس [تكوين قطعة المسار (route segment configuration)](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات، فإنها تدعم ميزات طال انتظارها مثل معالجات المسار [المعاد توليدها بشكل ثابت (statically regenerated)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) للأغراض العامة.
+
+يمكنك استخدام خيار تكوين قطعة `runtime` لتحديد بيئة التشغيل:
+
+```ts
+export const runtime = 'edge' // القيمة الافتراضية هي 'nodejs'
+```
+
+### استجابات غير واجهة المستخدم (Non-UI Responses)
+
+يمكنك استخدام معالجات المسار (Route Handlers) لإرجاع محتوى غير واجهة مستخدم. لاحظ أن [`sitemap.xml`](/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts), [`robots.txt`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file), [`أيقونات التطبيق (app icons)`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx), و [صور Open Graph](/docs/app/api-reference/file-conventions/metadata/opengraph-image) جميعها مدعومة مدمجة.
+
+```ts filename="app/rss.xml/route.ts" switcher
+export const dynamic = 'force-dynamic' // defaults to auto
+
+export async function GET() {
+  return new Response(
+    `<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+  <title>Next.js Documentation</title>
+  <link>https://nextjs.org/docs</link>
+  <description>The React Framework for the Web</description>
+</channel>
+
+</rss>`,
+    {
+      headers: {
+        'Content-Type': 'text/xml',
+      },
+    }
+  )
+}
+```
+
+```js filename="app/rss.xml/route.js" switcher
+export const dynamic = 'force-dynamic' // defaults to auto
+
+export async function GET() {
+  return new Response(`<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+  <title>Next.js Documentation</title>
+  <link>https://nextjs.org/docs</link>
+  <description>The React Framework for the Web</description>
+</channel>
+
+</rss>`)
+}
+```
+
+### خيارات تكوين القطعة (Segment Config Options)
+
+تستخدم معالجات المسار (Route Handlers) نفس [تكوين قطعة المسار (route segment configuration)](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات.
+
+```ts filename="app/items/route.ts" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+```
+
+```js filename="app/items/route.js" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+```
+
+راجع [مرجع واجهة برمجة التطبيقات (API reference)](/docs/app/api-reference/file-conventions/route-segment-config) لمزيد من التفاصيل.
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/13-middleware.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/13-middleware.mdx
new file mode 100644
index 00000000..4b546d68
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/13-middleware.mdx
@@ -0,0 +1,584 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:48:31.864Z
+title: Middleware
+description: تعلم كيفية استخدام Middleware لتشغيل كود قبل اكتمال الطلب.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يسمح لك Middleware بتشغيل كود قبل اكتمال الطلب. ثم بناءً على الطلب الوارد، يمكنك تعديل الاستجابة عن طريق إعادة الكتابة، إعادة التوجيه، تعديل رؤوس الطلب أو الاستجابة، أو الرد مباشرة.
+
+يعمل Middleware قبل مطابقة المحتوى المخزن مؤقتًا والمسارات. راجع [مطابقة المسارات](#matching-paths) لمزيد من التفاصيل.
+
+## حالات الاستخدام
+
+يمكن لدمج Middleware في تطبيقك أن يؤدي إلى تحسينات كبيرة في الأداء والأمان وتجربة المستخدم. بعض السيناريوهات الشائعة حيث يكون Middleware فعالاً بشكل خاص تشمل:
+
+- المصادقة والتفويض: التأكد من هوية المستخدم والتحقق من ملفات تعريف الارتباط للجلسة قبل منح الوصول إلى صفحات أو مسارات API محددة.
+- إعادة التوجيه من جانب الخادم: إعادة توجيه المستخدمين على مستوى الخادم بناءً على شروط معينة (مثل اللغة، دور المستخدم).
+- إعادة كتابة المسار: دعم اختبار A/B، طرح الميزات أو المسارات القديمة عن طريق إعادة كتابة المسارات ديناميكيًا لمسارات API أو الصفحات بناءً على خصائص الطلب.
+- كشف الروبوتات: حماية مواردك عن طريق كشف وحظر حركة مرور الروبوتات.
+- التسجيل والتحليلات: التقاط وتحليل بيانات الطلب للرؤى قبل المعالجة بواسطة الصفحة أو API.
+- إدارة الميزات: تمكين أو تعطيل الميزات ديناميكيًا لطرح الميزات أو الاختبار بسلاسة.
+
+من المهم بنفس القدر التعرف على المواقف التي قد لا يكون فيها Middleware هو الحل الأمثل. إليك بعض السيناريوهات التي يجب الانتباه إليها:
+
+- جلب البيانات المعقدة ومعالجتها: Middleware غير مصمم لجلب البيانات أو معالجتها مباشرة، يجب القيام بذلك ضمن Route Handlers أو أدوات جانب الخادم بدلاً من ذلك.
+- المهام الحسابية الثقيلة: يجب أن يكون Middleware خفيف الوزن ويستجيب بسرعة وإلا يمكن أن يتسبب في تأخير تحميل الصفحة. يجب تنفيذ المهام الحسابية الثقيلة أو العمليات طويلة المدى ضمن Route Handlers مخصصة.
+- إدارة الجلسات المكثفة: بينما يمكن لـ Middleware إدارة مهام الجلسات الأساسية، يجب إدارة إدارة الجلسات المكثفة بواسطة خدمات المصادقة المخصصة أو ضمن Route Handlers.
+- عمليات قاعدة البيانات المباشرة: لا يوصى بإجراء عمليات قاعدة بيانات مباشرة ضمن Middleware. يجب تنفيذ تفاعلات قاعدة البيانات ضمن Route Handlers أو أدوات جانب الخادم.
+
+## الاتفاقية
+
+استخدم ملف `middleware.ts` (أو `.js`) في جذر مشروعك لتعريف Middleware. على سبيل المثال، في نفس مستوى `pages` أو `app`، أو داخل `src` إذا كان ذلك مناسبًا.
+
+> **ملاحظة**: بينما يتم دعم ملف `middleware.ts` واحد فقط لكل مشروع، لا يزال بإمكانك تنظيم منطق Middleware الخاص بك بشكل معياري. قسّم وظائف Middleware إلى ملفات `.ts` أو `.js` منفصلة واستوردها في ملف `middleware.ts` الرئيسي الخاص بك. هذا يسمح بإدارة أنظف لـ Middleware الخاص بالمسار، مجمّع في `middleware.ts` للتحكم المركزي. من خلال فرض ملف Middleware واحد، يبسط التكوين، يمنع النزاعات المحتملة، ويحسن الأداء عن طريق تجنب طبقات متعددة من Middleware.
+
+## مثال
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+// يمكن وضع علامة `async` على هذه الدالة إذا تم استخدام `await` داخلها
+export function middleware(request: NextRequest) {
+  return NextResponse.redirect(new URL('/home', request.url))
+}
+
+// راجع "مطابقة المسارات" أدناه لمعرفة المزيد
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+// يمكن وضع علامة `async` على هذه الدالة إذا تم استخدام `await` داخلها
+export function middleware(request) {
+  return NextResponse.redirect(new URL('/home', request.url))
+}
+
+// راجع "مطابقة المسارات" أدناه لمعرفة المزيد
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+## مطابقة المسارات
+
+سيتم استدعاء Middleware لكل مسار في مشروعك. بالنظر إلى هذا، من الضروري استخدام matchers لاستهداف أو استبعاد مسارات محددة بدقة. فيما يلي ترتيب التنفيذ:
+
+1. `headers` من `next.config.js`
+2. `redirects` من `next.config.js`
+3. Middleware (`rewrites`, `redirects`, إلخ.)
+4. `beforeFiles` (`rewrites`) من `next.config.js`
+5. مسارات نظام الملفات (`public/`, `_next/static/`, `pages/`, `app/`, إلخ.)
+6. `afterFiles` (`rewrites`) من `next.config.js`
+7. المسارات الديناميكية (`/blog/[slug]`)
+8. `fallback` (`rewrites`) من `next.config.js`
+
+هناك طريقتان لتعريف المسارات التي سيعمل عليها Middleware:
+
+1. [تكوين matcher مخصص](#matcher)
+2. [عبارات شرطية](#conditional-statements)
+
+### Matcher
+
+يسمح لك `matcher` بتصفية Middleware ليعمل على مسارات محددة.
+
+```js filename="middleware.js"
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+يمكنك مطابقة مسار واحد أو عدة مسارات باستخدام صيغة المصفوفة:
+
+```js filename="middleware.js"
+export const config = {
+  matcher: ['/about/:path*', '/dashboard/:path*'],
+}
+```
+
+يسمح تكوين `matcher` باستخدام regex كامل لذا فإن المطابقة مثل negative lookaheads أو مطابقة الأحرف مدعومة. يمكن رؤية مثال على negative lookahead لمطابقة كل المسارات باستثناء مسارات محددة هنا:
+
+```js filename="middleware.js"
+export const config = {
+  matcher: [
+    /*
+     * مطابقة جميع مسارات الطلب باستثناء تلك التي تبدأ بـ:
+     * - api (مسارات API)
+     * - _next/static (ملفات ثابتة)
+     * - _next/image (ملفات تحسين الصور)
+     * - favicon.ico (ملف favicon)
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico).*)',
+  ],
+}
+```
+
+يمكنك أيضًا تخطي Middleware لطلبات معينة باستخدام مصفوفات `missing` أو `has`، أو مزيج من الاثنين:
+
+```js filename="middleware.js"
+export const config = {
+  matcher: [
+    /*
+     * مطابقة جميع مسارات الطلب باستثناء تلك التي تبدأ بـ:
+     * - api (مسارات API)
+     * - _next/static (ملفات ثابتة)
+     * - _next/image (ملفات تحسين الصور)
+     * - favicon.ico (ملف favicon)
+     */
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      has: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      has: [{ type: 'header', key: 'x-present' }],
+      missing: [{ type: 'header', key: 'x-missing', value: 'prefetch' }],
+    },
+  ],
+}
+```
+
+> **جيد لمعرفته**: يجب أن تكون قيم `matcher` ثوابت حتى يمكن تحليلها بشكل ثابت في وقت البناء. سيتم تجاهل القيم الديناميكية مثل المتغيرات.
+
+تكوينات matcher:
+
+1. يجب أن تبدأ بـ `/`
+2. يمكن أن تتضمن معلمات مسماة: `/about/:path` تطابق `/about/a` و `/about/b` ولكن ليس `/about/a/c`
+3. يمكن أن تحتوي على معدلات على المعلمات المسماة (تبدأ بـ `:`): `/about/:path*` تطابق `/about/a/b/c` لأن `*` تعني صفر أو أكثر. `?` تعني صفر أو واحد و `+` تعني واحد أو أكثر
+4. يمكن استخدام تعبير عادي محاط بأقواس: `/about/(.*)` هو نفس `/about/:path*`
+
+اقرأ المزيد من التفاصيل في وثائق [path-to-regexp](https://github.com/pillarjs/path-to-regexp#path-to-regexp-1).
+
+> **جيد لمعرفته**: لأغراض التوافق مع الإصدارات السابقة، يعتبر Next.js دائمًا `/public` كـ `/public/index`. لذلك، فإن matcher لـ `/public/:path` سيطابق.
+
+### عبارات شرطية
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname.startsWith('/about')) {
+    return NextResponse.rewrite(new URL('/about-2', request.url))
+  }
+
+  if (request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
+  }
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  if (request.nextUrl.pathname.startsWith('/about')) {
+    return NextResponse.rewrite(new URL('/about-2', request.url))
+  }
+
+  if (request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
+  }
+}
+```
+
+## NextResponse
+
+يسمح لك واجهة برمجة التطبيقات `NextResponse` بما يلي:
+
+- `redirect` الطلب الوارد إلى عنوان URL مختلف
+- `rewrite` الاستجابة عن طريق عرض عنوان URL معين
+- تعيين رؤوس الطلب لمسارات API، `getServerSideProps`، وأوجه إعادة الكتابة
+- تعيين ملفات تعريف الارتباط للاستجابة
+- تعيين رؤوس الاستجابة
+
+<AppOnly>
+
+لإنتاج استجابة من Middleware، يمكنك:
+
+1. `rewrite` إلى مسار ([صفحة](/docs/app/building-your-application/routing/pages-and-layouts) أو [Route Handler](/docs/app/building-your-application/routing/route-handlers)) ينتج استجابة
+2. إرجاع `NextResponse` مباشرة. راجع [إنتاج استجابة](#producing-a-response)
+
+</AppOnly>
+
+<PagesOnly>
+
+لإنتاج استجابة من Middleware، يمكنك:
+
+1. `rewrite` إلى مسار ([صفحة](/docs/pages/building-your-application/routing/pages-and-layouts) أو [Edge API Route](/docs/pages/building-your-application/routing/api-routes)) ينتج استجابة
+2. إرجاع `NextResponse` مباشرة. راجع [إنتاج استجابة](#producing-a-response)
+
+</PagesOnly>
+
+## استخدام ملفات تعريف الارتباط
+
+ملفات تعريف الارتباط هي رؤوس عادية. في `Request`، يتم تخزينها في رأس `Cookie`. في `Response` تكون في رأس `Set-Cookie`. يوفر Next.js طريقة ملائمة للوصول إلى ملفات تعريف الارتباط هذه ومعالجتها من خلال امتداد `cookies` على `NextRequest` و `NextResponse`.
+
+1. للطلبات الواردة، يأتي `cookies` مع الطرق التالية: `get`، `getAll`، `set`، و `delete` لملفات تعريف الارتباط. يمكنك التحقق من وجود ملف تعريف ارتباط باستخدام `has` أو إزالة جميع ملفات تعريف الارتباط باستخدام `clear`.
+2. للاستجابات الصادرة، تحتوي `cookies` على الطرق التالية `get`، `getAll`، `set`، و `delete`.
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // افترض وجود رأس "Cookie:nextjs=fast" في الطلب الوارد
+  // الحصول على ملفات تعريف الارتباط من الطلب باستخدام واجهة برمجة التطبيقات `RequestCookies`
+  let cookie = request.cookies.get('nextjs')
+  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
+  const allCookies = request.cookies.getAll()
+  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
+
+  request.cookies.has('nextjs') // => true
+  request.cookies.delete('nextjs')
+  request.cookies.has('nextjs') // => false
+
+  // تعيين ملفات تعريف الارتباط على الاستجابة باستخدام واجهة برمجة التطبيقات `ResponseCookies`
+  const response = NextResponse.next()
+  response.cookies.set('vercel', 'fast')
+  response.cookies.set({
+    name: 'vercel',
+    value: 'fast',
+    path: '/',
+  })
+  cookie = response.cookies.get('vercel')
+  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
+  // سيكون للاستجابة الصادرة رأس `Set-Cookie:vercel=fast;path=/`.
+
+  return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  // افترض وجود رأس "Cookie:nextjs=fast" في الطلب الوارد
+  // الحصول على ملفات تعريف الارتباط من الطلب باستخدام واجهة برمجة التطبيقات `RequestCookies`
+  let cookie = request.cookies.get('nextjs')
+  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
+  const allCookies = request.cookies.getAll()
+  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
+
+  request.cookies.has('nextjs') // => true
+  request.cookies.delete('nextjs')
+  request.cookies.has('nextjs') // => false
+
+  // تعيين ملفات تعريف الارتباط على الاستجابة باستخدام واجهة برمجة التطبيقات `ResponseCookies`
+  const response = NextResponse.next()
+  response.cookies.set('vercel', 'fast')
+  response.cookies.set({
+    name: 'vercel',
+    value: 'fast',
+    path: '/',
+  })
+  cookie = response.cookies.get('vercel')
+  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
+  // سيكون للاستجابة الصادرة رأس `Set-Cookie:vercel=fast;path=/test`.
+
+  return response
+}
+```
+
+## تعيين الرؤوس
+
+يمكنك تعيين رؤوس الطلب والاستجابة باستخدام واجهة برمجة التطبيقات `NextResponse` (تعيين رؤوس _الطلب_ متاح منذ Next.js v13.0.0).
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // استنساخ رؤوس الطلب وتعيين رأس جديد `x-hello-from-middleware1`
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-hello-from-middleware1', 'hello')
+
+  // يمكنك أيضًا تعيين رؤوس الطلب في NextResponse.rewrite
+  const response = NextResponse.next({
+    request: {
+      // رؤوس طلب جديدة
+      headers: requestHeaders,
+    },
+  })
+
+  // تعيين رأس استجابة جديد `x-hello-from-middleware2`
+  response.headers.set('x-hello-from-middleware2', 'hello')
+  return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  // استنساخ رؤوس الطلب وتعيين رأس جديد `x-hello-from-middleware1`
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-hello-from-middleware1', 'hello')
+
+  // يمكنك أيضًا تعيين رؤوس الطلب في NextResponse.rewrite
+  const response = NextResponse.next({
+    request: {
+      // رؤوس طلب جديدة
+      headers: requestHeaders,
+    },
+  })
+
+  // تعيين رأس استجابة جديد `x-hello-from-middleware2`
+  response.headers.set('x-hello-from-middleware2', 'hello')
+  return response
+}
+```
+
+> **جيد لمعرفته**: تجنب تعيين رؤوس كبيرة لأنها قد تسبب خطأ [431 Request Header Fields Too Large](https://developer.mozilla.org/docs/Web/HTTP/Status/431) اعتمادًا على تكوين خادم الويب الخلفي الخاص بك.
+
+### CORS (مشاركة الموارد عبر المصادر)
+
+يمكنك تعيين رؤوس CORS في Middleware للسماح بطلبات المصادر المتقاطعة، بما في ذلك [الطلبات البسيطة](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests) و[الطلبات المسبقة](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests).
+
+```tsx filename="middleware.ts" switcher
+import { NextRequest, NextResponse } from 'next/server'
+
+const allowedOrigins = ['https://acme.com', 'https://my-app.org']
+
+const corsOptions = {
+  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+}
+
+export function middleware(request: NextRequest) {
+  // Check the origin from the request
+  const origin = request.headers.get('origin') ?? ''
+  const isAllowedOrigin = allowedOrigins.includes(origin)
+
+  // Handle preflighted requests
+  const isPreflight = request.method === 'OPTIONS'
+
+  if (isPreflight) {
+    const preflightHeaders = {
+      ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
+      ...corsOptions,
+    }
+    return NextResponse.json({}, { headers: preflightHeaders })
+  }
+
+  // Handle simple requests
+  const response = NextResponse.next()
+
+  if (isAllowedOrigin) {
+    response.headers.set('Access-Control-Allow-Origin', origin)
+  }
+
+  Object.entries(corsOptions).forEach(([key, value]) => {
+    response.headers.set(key, value)
+  })
+
+  return response
+}
+
+export const config = {
+  matcher: '/api/:path*',
+}
+```
+
+```jsx filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+const allowedOrigins = ['https://acme.com', 'https://my-app.org']
+
+const corsOptions = {
+  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+}
+
+export function middleware(request) {
+  // Check the origin from the request
+  const origin = request.headers.get('origin') ?? ''
+  const isAllowedOrigin = allowedOrigins.includes(origin)
+
+  // Handle preflighted requests
+  const isPreflight = request.method === 'OPTIONS'
+
+  if (isPreflight) {
+    const preflightHeaders = {
+      ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
+      ...corsOptions,
+    }
+    return NextResponse.json({}, { headers: preflightHeaders })
+  }
+
+  // Handle simple requests
+  const response = NextResponse.next()
+
+  if (isAllowedOrigin) {
+    response.headers.set('Access-Control-Allow-Origin', origin)
+  }
+
+  Object.entries(corsOptions).forEach(([key, value]) => {
+    response.headers.set(key, value)
+  })
+
+  return response
+}
+
+export const config = {
+  matcher: '/api/:path*',
+}
+```
+
+<AppOnly>
+
+> **معلومة مفيدة:** يمكنك تكوين رؤوس CORS لمسارات فردية في [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers#cors).
+
+</AppOnly>
+
+## إنتاج استجابة
+
+يمكنك الرد من Middleware مباشرة عن طريق إرجاع نسخة من `Response` أو `NextResponse`. (هذا متاح منذ [Next.js v13.1.0](https://nextjs.org/blog/next-13-1#nextjs-advanced-middleware))
+
+```ts filename="middleware.ts" switcher
+import { NextRequest } from 'next/server'
+import { isAuthenticated } from '@lib/auth'
+
+// Limit the middleware to paths starting with `/api/`
+export const config = {
+  matcher: '/api/:function*',
+}
+
+export function middleware(request: NextRequest) {
+  // Call our authentication function to check the request
+  if (!isAuthenticated(request)) {
+    // Respond with JSON indicating an error message
+    return Response.json(
+      { success: false, message: 'authentication failed' },
+      { status: 401 }
+    )
+  }
+}
+```
+
+```js filename="middleware.js" switcher
+import { isAuthenticated } from '@lib/auth'
+
+// Limit the middleware to paths starting with `/api/`
+export const config = {
+  matcher: '/api/:function*',
+}
+
+export function middleware(request) {
+  // Call our authentication function to check the request
+  if (!isAuthenticated(request)) {
+    // Respond with JSON indicating an error message
+    return Response.json(
+      { success: false, message: 'authentication failed' },
+      { status: 401 }
+    )
+  }
+}
+```
+
+### `waitUntil` و `NextFetchEvent`
+
+كائن `NextFetchEvent` يمتد من الكائن الأصلي [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent)، ويتضمن طريقة [`waitUntil()`](https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil).
+
+تأخذ طريقة `waitUntil()` وعدًا (promise) كوسيطة، وتوسع عمر Middleware حتى يتم تسوية الوعد. هذا مفيد لأداء العمل في الخلفية.
+
+```ts filename="middleware.ts"
+import { NextResponse } from 'next/server'
+import type { NextFetchEvent, NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest, event: NextFetchEvent) {
+  event.waitUntil(
+    fetch('https://my-analytics-platform.com', {
+      method: 'POST',
+      body: JSON.stringify({ pathname: req.nextUrl.pathname }),
+    })
+  )
+
+  return NextResponse.next()
+}
+```
+
+## أعلام Middleware المتقدمة
+
+في الإصدار `v13.1` من Next.js، تم إدخال علامتين إضافيتين لـ Middleware، وهما `skipMiddlewareUrlNormalize` و `skipTrailingSlashRedirect` للتعامل مع حالات الاستخدام المتقدمة.
+
+`skipTrailingSlashRedirect` تعطيل عمليات إعادة التوجيه في Next.js لإضافة أو إزالة الشرطة المائلة في النهاية. هذا يسمح بالتعامل المخصص داخل Middleware للحفاظ على الشرطة المائلة لبعض المسارات وليس غيرها، مما يمكن أن يجعل عمليات الترحيل التدريجي أسهل.
+
+```js filename="next.config.js"
+module.exports = {
+  skipTrailingSlashRedirect: true,
+}
+```
+
+```js filename="middleware.js"
+const legacyPrefixes = ['/docs', '/blog']
+
+export default async function middleware(req) {
+  const { pathname } = req.nextUrl
+
+  if (legacyPrefixes.some((prefix) => pathname.startsWith(prefix))) {
+    return NextResponse.next()
+  }
+
+  // apply trailing slash handling
+  if (
+    !pathname.endsWith('/') &&
+    !pathname.match(/((?!\.well-known(?:\/.*)?)(?:[^/]+\/)*[^/]+\.\w+)/)
+  ) {
+    req.nextUrl.pathname += '/'
+    return NextResponse.redirect(req.nextUrl)
+  }
+}
+```
+
+`skipMiddlewareUrlNormalize` تسمح بتعطيل تطبيع URL في Next.js لجعل التعامل مع الزيارات المباشرة والانتقالات من العميل متشابهة. في بعض الحالات المتقدمة، توفر هذه الخيار تحكمًا كاملاً باستخدام URL الأصلي.
+
+```js filename="next.config.js"
+module.exports = {
+  skipMiddlewareUrlNormalize: true,
+}
+```
+
+```js filename="middleware.js"
+export default async function middleware(req) {
+  const { pathname } = req.nextUrl
+
+  // GET /_next/data/build-id/hello.json
+
+  console.log(pathname)
+  // with the flag this now /_next/data/build-id/hello.json
+  // without the flag this would be normalized to /hello
+}
+```
+
+## وقت التشغيل
+
+يدعم Middleware حاليًا فقط [وقت تشغيل Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes). لا يمكن استخدام وقت تشغيل Node.js.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                       |
+| --------- | --------------------------------------------------------------------------------------------- |
+| `v13.1.0` | تمت إضافة أعلام Middleware المتقدمة                                                               |
+| `v13.0.0` | يمكن لـ Middleware تعديل رؤوس الطلب، ورؤوس الاستجابة، وإرسال الردود                   |
+| `v12.2.0` | أصبح Middleware مستقرًا، يرجى الاطلاع على [دليل الترقية](/docs/messages/middleware-upgrade-guide) |
+| `v12.0.9` | فرض عناوين URL المطلقة في وقت تشغيل Edge ([PR](https://github.com/vercel/next.js/pull/33410))    |
+| `v12.0.0` | تمت إضافة Middleware (بيتا)                                                                       |
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/14-internationalization.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/14-internationalization.mdx
new file mode 100644
index 00000000..888a4cda
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/14-internationalization.mdx
@@ -0,0 +1,155 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:45:51.580Z
+title: التدويل (Internationalization)
+description: إضافة دعم للغات متعددة مع توجيه دولي ومحتوى مترجم.
+---
+
+تمكنك Next.js من تكوين التوجيه وعرض المحتوى لدعم لغات متعددة. جعل موقعك متكيفًا مع المحليات المختلفة يتضمن محتوى مترجم (توطين) ومسارات دولية.
+
+## المصطلحات
+
+- **المحلية (Locale):** معرف لمجموعة من تفضيلات اللغة والتنسيق. يشمل هذا عادة اللغة المفضلة للمستخدم وربما منطقته الجغرافية.
+  - `en-US`: الإنجليزية كما تُستخدم في الولايات المتحدة
+  - `nl-NL`: الهولندية كما تُستخدم في هولندا
+  - `nl`: الهولندية بدون منطقة محددة
+
+## نظرة عامة على التوجيه
+
+يُوصى باستخدام تفضيلات لغة المستخدم في المتصفح لتحديد المحلية المراد استخدامها. تغيير لغتك المفضلة سيعدل رأس `Accept-Language` الوارد إلى تطبيقك.
+
+على سبيل المثال، باستخدام المكتبات التالية، يمكنك النظر إلى `Request` الوارد لتحديد المحلية المطلوب اختيارها، بناءً على `Headers` والمحليات التي تخطط لدعمها والمحلية الافتراضية.
+
+```js filename="middleware.js"
+import { match } from '@formatjs/intl-localematcher'
+import Negotiator from 'negotiator'
+
+let headers = { 'accept-language': 'en-US,en;q=0.5' }
+let languages = new Negotiator({ headers }).languages()
+let locales = ['en-US', 'nl-NL', 'nl']
+let defaultLocale = 'en-US'
+
+match(languages, locales, defaultLocale) // -> 'en-US'
+```
+
+يمكن تدويل التوجيه إما عن طريق المسار الفرعي (`/fr/products`) أو النطاق (`my-site.fr/products`). باستخدام هذه المعلومات، يمكنك الآن إعادة توجيه المستخدم بناءً على المحلية داخل [الوسيط (Middleware)](/docs/app/building-your-application/routing/middleware).
+
+```js filename="middleware.js"
+import { NextResponse } from "next/server";
+
+let locales = ['en-US', 'nl-NL', 'nl']
+
+// الحصول على المحلية المفضلة، مشابه لما سبق أو باستخدام مكتبة
+function getLocale(request) { ... }
+
+export function middleware(request) {
+  // التحقق مما إذا كان هناك أي محلية مدعومة في مسار URL
+  const { pathname } = request.nextUrl
+  const pathnameHasLocale = locales.some(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
+  )
+
+  if (pathnameHasLocale) return
+
+  // إعادة التوجيه إذا لم تكن هناك محلية
+  const locale = getLocale(request)
+  request.nextUrl.pathname = `/${locale}${pathname}`
+  // مثال: الطلب الوارد هو /products
+  // عنوان URL الجديد الآن هو /en-US/products
+  return NextResponse.redirect(request.nextUrl)
+}
+
+export const config = {
+  matcher: [
+    // تخطي جميع المسارات الداخلية (_next)
+    '/((?!_next).*)',
+    // اختياري: التشغيل فقط على عنوان URL الجذر (/)
+    // '/'
+  ],
+}
+```
+
+أخيرًا، تأكد من أن جميع الملفات الخاصة داخل `app/` متداخلة تحت `app/[lang]`. هذا يمكن جهاز توجيه Next.js من التعامل مع المحليات المختلفة ديناميكيًا في المسار، وإعادة معلمة `lang` إلى كل تخطيط وصفحة. على سبيل المثال:
+
+```jsx filename="app/[lang]/page.js"
+// لديك الآن إمكانية الوصول إلى المحلية الحالية
+// مثال: /en-US/products -> `lang` هي "en-US"
+export default async function Page({ params: { lang } }) {
+  return ...
+}
+```
+
+يمكن أيضًا تداخل التخطيط الجذر في المجلد الجديد (مثال: `app/[lang]/layout.js`).
+
+## التوطين (Localization)
+
+تغيير المحتوى المعروض بناءً على المحلية المفضلة للمستخدم، أو التوطين، ليس شيئًا خاصًا بـ Next.js. الأنماط الموضحة أدناه ستعمل بنفس الطريقة مع أي تطبيق ويب.
+
+لنفترض أننا نريد دعم المحتوى بالإنجليزية والهولندية داخل تطبيقنا. قد نحتفظ بـ "قواميس" مختلفة، وهي كائنات تعطينا تعيينًا من مفتاح معين إلى سلسلة مترجمة. على سبيل المثال:
+
+```json filename="dictionaries/en.json"
+{
+  "products": {
+    "cart": "Add to Cart"
+  }
+}
+```
+
+```json filename="dictionaries/nl.json"
+{
+  "products": {
+    "cart": "Toevoegen aan Winkelwagen"
+  }
+}
+```
+
+يمكننا بعد ذلك إنشاء دالة `getDictionary` لتحميل الترجمات للمحلية المطلوبة:
+
+```jsx filename="app/[lang]/dictionaries.js"
+import 'server-only'
+
+const dictionaries = {
+  en: () => import('./dictionaries/en.json').then((module) => module.default),
+  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
+}
+
+export const getDictionary = async (locale) => dictionaries[locale]()
+```
+
+بالنظر إلى اللغة المحددة حاليًا، يمكننا جلب القاموس داخل تخطيط أو صفحة.
+
+```jsx filename="app/[lang]/page.js"
+import { getDictionary } from './dictionaries'
+
+export default async function Page({ params: { lang } }) {
+  const dict = await getDictionary(lang) // en
+  return <button>{dict.products.cart}</button> // Add to Cart
+}
+```
+
+لأن جميع التخطيطات والصفحات في دليل `app/` تعمل افتراضيًا كمكونات خادم [Server Components](/docs/app/building-your-application/rendering/server-components)، لا داعي للقلق بشأن حجم ملفات الترجمة الذي يؤثر على حجم حزمة JavaScript على جانب العميل. هذا الكود **سيعمل فقط على الخادم**، وسيتم إرسال HTML الناتج فقط إلى المتصفح.
+
+## التوليد الثابت (Static Generation)
+
+لتوليد مسارات ثابتة لمجموعة معينة من المحليات، يمكننا استخدام `generateStaticParams` مع أي صفحة أو تخطيط. يمكن أن يكون هذا عالميًا، على سبيل المثال، في التخطيط الجذر:
+
+```jsx filename="app/[lang]/layout.js"
+export async function generateStaticParams() {
+  return [{ lang: 'en-US' }, { lang: 'de' }]
+}
+
+export default function Root({ children, params }) {
+  return (
+    <html lang={params.lang}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+## الموارد
+
+- [توجيه وترجمة دولية بسيطة](https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing)
+- [`next-intl`](https://next-intl-docs.vercel.app/docs/next-13)
+- [`next-international`](https://github.com/QuiiBz/next-international)
+- [`next-i18n-router`](https://github.com/i18nexus/next-i18n-router)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/index.mdx
new file mode 100644
index 00000000..f44c6e91
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/01-routing/index.mdx
@@ -0,0 +1,162 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:46:19.587Z
+title: أساسيات التوجيه (Routing)
+nav_title: التوجيه
+description: تعلم الأساسيات الخاصة بتوجيه الطلبات في تطبيقات الواجهة الأمامية.
+---
+
+الهيكل الأساسي لكل تطبيق هو نظام التوجيه. ستقدم لك هذه الصفحة **المفاهيم الأساسية** لتوجيه الطلبات على الويب وكيفية التعامل مع التوجيه في Next.js.
+
+## المصطلحات
+
+أولاً، ستظهر هذه المصطلحات مستخدمة في جميع أنحاء الوثائق. إليك مرجع سريع:
+
+<Image
+  alt="مصطلحات شجرة المكونات"
+  srcLight="/docs/light/terminology-component-tree.png"
+  srcDark="/docs/dark/terminology-component-tree.png"
+  width="1600"
+  height="832"
+/>
+
+- **الشجرة (Tree):** اصطلاح لتصور هيكل هرمي. على سبيل المثال، شجرة مكونات تحتوي على مكونات أب وطفل، هيكل مجلدات، إلخ.
+- **الشجرة الفرعية (Subtree):** جزء من شجرة، يبدأ من جذر جديد (أول) وينتهي عند الأوراق (آخر).
+- **الجذر (Root):** العقدة الأولى في شجرة أو شجرة فرعية، مثل تخطيط الجذر.
+- **الورقة (Leaf):** عقد في شجرة فرعية ليس لها أطفال، مثل الجزء الأخير في مسار URL.
+
+<Image
+  alt="مصطلحات تشريح URL"
+  srcLight="/docs/light/terminology-url-anatomy.png"
+  srcDark="/docs/dark/terminology-url-anatomy.png"
+  width="1600"
+  height="371"
+/>
+
+- **جزء URL (URL Segment):** جزء من مسار URL محدد بشرطات مائلة.
+- **مسار URL (URL Path):** جزء من URL يأتي بعد النطاق (مكون من أجزاء).
+
+## موجه `app`
+
+في الإصدار 13، قدمت Next.js **موجه تطبيق (App Router)** جديد مبني على [مكونات الخادم في React](/docs/app/building-your-application/rendering/server-components)، والذي يدعم التخطيطات المشتركة، التوجيه المتداخل، حالات التحميل، معالجة الأخطاء، والمزيد.
+
+يعمل موجه التطبيق في مجلد جديد باسم `app`. يعمل مجلد `app` جنبًا إلى جنب مع مجلد `pages` للسماح بالتبني التدريجي. هذا يسمح لك باختيار بعض مسارات تطبيقك للسلوك الجديد مع الاحتفاظ بمسارات أخرى في مجلد `pages` للسلوك السابق. إذا كان تطبيقك يستخدم مجلد `pages`، يرجى أيضًا الاطلاع على وثائق [موجه الصفحات (Pages Router)](/docs/pages/building-your-application/routing).
+
+> **جيد للمعرفة**: موجه التطبيق له أولوية أعلى من موجه الصفحات. لا ينبغي أن تحل المسارات عبر المجلدات إلى نفس مسار URL وسيؤدي ذلك إلى خطأ في وقت البناء لمنع التعارض.
+
+<Image
+  alt="مجلد تطبيق Next.js"
+  srcLight="/docs/light/next-router-directories.png"
+  srcDark="/docs/dark/next-router-directories.png"
+  width="1600"
+  height="444"
+/>
+
+بشكل افتراضي، المكونات داخل `app` هي [مكونات خادم React](/docs/app/building-your-application/rendering/server-components). هذا تحسين للأداء ويسمح لك بتبنيها بسهولة، ويمكنك أيضًا استخدام [مكونات العميل](/docs/app/building-your-application/rendering/client-components).
+
+> **التوصية:** تحقق من صفحة [الخادم](/docs/app/building-your-application/rendering/server-components) إذا كنت جديدًا على مكونات الخادم.
+
+## أدوار المجلدات والملفات
+
+يستخدم Next.js موجهًا يعتمد على نظام الملفات حيث:
+
+- **المجلدات** تُستخدم لتعريف المسارات. المسار هو مسار واحد من المجلدات المتداخلة، يتبع التسلسل الهرمي لنظام الملفات من **مجلد الجذر** وصولاً إلى **مجلد الورقة** النهائي الذي يتضمن ملف `page.js`. انظر [تحديد المسارات](/docs/app/building-your-application/routing/defining-routes).
+- **الملفات** تُستخدم لإنشاء واجهة مستخدم تُعرض لقطاع مسار. انظر [الملفات الخاصة](#file-conventions).
+
+## أجزاء المسار
+
+كل مجلد في مسار يمثل **قطاع مسار (route segment)**. كل قطاع مسار يتم تعيينه إلى **قطاع** مقابِل في **مسار URL**.
+
+<Image
+  alt="كيفية تعيين أجزاء المسار إلى أجزاء URL"
+  srcLight="/docs/light/route-segments-to-path-segments.png"
+  srcDark="/docs/dark/route-segments-to-path-segments.png"
+  width="1600"
+  height="594"
+/>
+
+## المسارات المتداخلة
+
+لإنشاء مسار متداخل، يمكنك تداخل المجلدات داخل بعضها البعض. على سبيل المثال، يمكنك إضافة مسار جديد `/dashboard/settings` عن طريق تداخل مجلدين جديدين في مجلد `app`.
+
+يتكون مسار `/dashboard/settings` من ثلاثة أجزاء:
+
+- `/` (قطاع الجذر)
+- `dashboard` (قطاع)
+- `settings` (قطاع الورقة)
+
+## اصطلاحات الملفات
+
+يوفر Next.js مجموعة من الملفات الخاصة لإنشاء واجهة مستخدم بسلوك محدد في المسارات المتداخلة:
+
+|                                                                                       |                                                                                                |
+| ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| [`layout`](/docs/app/building-your-application/routing/pages-and-layouts#layouts)     | واجهة مستخدم مشتركة لقطاع وأطفاله                                                              |
+| [`page`](/docs/app/building-your-application/routing/pages-and-layouts#pages)         | واجهة مستخدم فريدة لمسار وجعل المسارات قابلة للوصول العام                                       |
+| [`loading`](/docs/app/building-your-application/routing/loading-ui-and-streaming)     | واجهة مستخدم التحميل لقطاع وأطفاله                                                             |
+| [`not-found`](/docs/app/api-reference/file-conventions/not-found)                     | واجهة مستخدم غير موجود لقطاع وأطفاله                                                           |
+| [`error`](/docs/app/building-your-application/routing/error-handling)                 | واجهة مستخدم الخطأ لقطاع وأطفاله                                                               |
+| [`global-error`](/docs/app/building-your-application/routing/error-handling)          | واجهة مستخدم الخطأ العام                                                                       |
+| [`route`](/docs/app/building-your-application/routing/route-handlers)                 | نقطة نهاية API من جانب الخادم                                                                  |
+| [`template`](/docs/app/building-your-application/routing/pages-and-layouts#templates) | واجهة مستخدم تخطيط معاد عرضها بشكل متخصص                                                       |
+| [`default`](/docs/app/api-reference/file-conventions/default)                         | واجهة مستخدم احتياطية لـ [المسارات المتوازية](/docs/app/building-your-application/routing/parallel-routes) |
+
+> **جيد للمعرفة**: يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للملفات الخاصة.
+
+## تسلسل المكونات الهرمي
+
+يتم عرض مكونات React المعرفة في الملفات الخاصة لقطاع مسار في تسلسل هرمي محدد:
+
+- `layout.js`
+- `template.js`
+- `error.js` (حدود خطأ React)
+- `loading.js` (حدود تعليق React)
+- `not-found.js` (حدود خطأ React)
+- `page.js` أو `layout.js` متداخل
+
+<Image
+  alt="التسلسل الهرمي للمكونات لاصطلاحات الملفات"
+  srcLight="/docs/light/file-conventions-component-hierarchy.png"
+  srcDark="/docs/dark/file-conventions-component-hierarchy.png"
+  width="1600"
+  height="643"
+/>
+
+في مسار متداخل، سيتم تداخل مكونات القطاع **داخل** مكونات قطاعها الأب.
+
+<Image
+  alt="التسلسل الهرمي للمكونات لاصطلاحات الملفات المتداخلة"
+  srcLight="/docs/light/nested-file-conventions-component-hierarchy.png"
+  srcDark="/docs/dark/nested-file-conventions-component-hierarchy.png"
+  width="1600"
+  height="863"
+/>
+
+## التواجد المشترك
+
+بالإضافة إلى الملفات الخاصة، لديك خيار وضع ملفاتك الخاصة (مثل المكونات، الأنماط، الاختبارات، إلخ) داخل مجلدات في مجلد `app`.
+
+هذا لأنه بينما تحدد المجلدات المسارات، فقط المحتويات التي تُرجعها `page.js` أو `route.js` قابلة للعنونة العامة.
+
+<Image
+  alt="مثال على هيكل مجلد مع ملفات متواجدة مشتركة"
+  srcLight="/docs/light/project-organization-colocation.png"
+  srcDark="/docs/dark/project-organization-colocation.png"
+  width="1600"
+  height="1011"
+/>
+
+تعلم المزيد حول [تنظيم المشروع والتواجد المشترك](/docs/app/building-your-application/routing/colocation).
+
+## أنماط التوجيه المتقدمة
+
+يوفر موجه التطبيق أيضًا مجموعة من الاصطلاحات لمساعدتك في تنفيذ أنماط توجيه أكثر تقدمًا. وتشمل:
+
+- [المسارات المتوازية](/docs/app/building-your-application/routing/parallel-routes): تسمح لك بعرض صفحتين أو أكثر في نفس العرض يمكن التنقل بينهما بشكل مستقل. يمكنك استخدامها لعروض مقسمة لها تنقل فرعي خاص بها. مثل لوحات التحكم.
+- [مسارات الاعتراض](/docs/app/building-your-application/routing/intercepting-routes): تسمح لك باعتراض مسار وعرضه في سياق مسار آخر. يمكنك استخدام هذه عندما يكون الحفاظ على سياق الصفحة الحالية مهمًا. مثل رؤية جميع المهام أثناء تحرير مهمة واحدة أو توسيع صورة في موجز.
+
+تتيح لك هذه الأنماط بناء واجهات مستخدم أكثر ثراءً وتعقيدًا، مما يجعل الميزات التي كانت معقدة تاريخيًا في متناول الفرق الصغيرة والمطورين الأفراد.
+
+## الخطوات التالية
+
+الآن بعد أن فهمت أساسيات التوجيه في Next.js، اتبع الروابط أدناه لإنشاء مساراتك الأولى:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx
new file mode 100644
index 00000000..4b91c6d1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx
@@ -0,0 +1,310 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:47:17.089Z
+title: جلب البيانات، التخزين المؤقت، وإعادة التحقق
+nav_title: الجلب، التخزين المؤقت، وإعادة التحقق
+description: تعلم كيفية جلب البيانات، تخزينها مؤقتًا، وإعادة التحقق منها في تطبيق Next.js الخاص بك.
+---
+
+يعد جلب البيانات جزءًا أساسيًا من أي تطبيق. توضح هذه الصفحة كيفية جلب البيانات، تخزينها مؤقتًا، وإعادة التحقق منها في React وNext.js.
+
+هناك أربع طرق لجلب البيانات:
+
+1. [على الخادم باستخدام `fetch`](#fetching-data-on-the-server-with-fetch)
+2. [على الخادم باستخدام مكتبات الطرف الثالث](#fetching-data-on-the-server-with-third-party-libraries)
+3. [على العميل عبر معالج المسار (Route Handler)](#fetching-data-on-the-client-with-route-handlers)
+4. [على العميل باستخدام مكتبات الطرف الثالث](#fetching-data-on-the-client-with-route-handlers).
+
+## جلب البيانات على الخادم باستخدام `fetch`
+
+يمتد Next.js [واجهة برمجة تطبيقات `fetch` الأصلية](https://developer.mozilla.org/docs/Web/API/Fetch_API) للسماح لك بتكوين سلوك [التخزين المؤقت](#caching-data) و[إعادة التحقق](#revalidating-data) لكل طلب جلب بيانات على الخادم. يمتد React `fetch` لتلقائيًا [تذكر](/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed) طلبات الجلب أثناء عرض شجرة مكونات React.
+
+يمكنك استخدام `fetch` مع `async`/`await` في مكونات الخادم، [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers)، و[إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+مثال:
+
+```tsx filename="app/page.tsx" switcher
+async function getData() {
+  const res = await fetch('https://api.example.com/...')
+  // القيمة المرجعة *ليست* متسلسلة
+  // يمكنك إرجاع Date, Map, Set, إلخ.
+
+  if (!res.ok) {
+    // سيؤدي هذا إلى تفعيل أقرب حد خطأ `error.js`
+    throw new Error('Failed to fetch data')
+  }
+
+  return res.json()
+}
+
+export default async function Page() {
+  const data = await getData()
+
+  return <main></main>
+}
+```
+
+```jsx filename="app/page.js" switcher
+async function getData() {
+  const res = await fetch('https://api.example.com/...')
+  // القيمة المرجعة *ليست* متسلسلة
+  // يمكنك إرجاع Date, Map, Set, إلخ.
+
+  if (!res.ok) {
+    // سيؤدي هذا إلى تفعيل أقرب حد خطأ `error.js`
+    throw new Error('Failed to fetch data')
+  }
+
+  return res.json()
+}
+
+export default async function Page() {
+  const data = await getData()
+
+  return <main></main>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - يوفر Next.js دوال مساعدة قد تحتاجها عند جلب البيانات في مكونات الخادم مثل [`cookies`](/docs/app/api-reference/functions/cookies) و[`headers`](/docs/app/api-reference/functions/headers). سيؤدي هذا إلى عرض المسار بشكل ديناميكي حيث يعتمد على معلومات وقت الطلب.
+> - في معالجات المسار (Route Handlers)، لا يتم تذكر طلبات `fetch` لأن معالجات المسار ليست جزءًا من شجرة مكونات React.
+> - في [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations)، لا يتم تخزين طلبات `fetch` مؤقتًا (الإعداد الافتراضي `cache: no-store`).
+> - لاستخدام `async`/`await` في مكون خادم مع TypeScript، ستحتاج إلى استخدام TypeScript `5.1.3` أو أعلى و `@types/react` `18.2.8` أو أعلى.
+
+### تخزين البيانات مؤقتًا
+
+يخزن التخزين المؤقت البيانات حتى لا تحتاج إلى إعادة جلبها من مصدر البيانات في كل طلب.
+
+افتراضيًا، يقوم Next.js تلقائيًا بتخزين القيم المرجعة من `fetch` في [ذاكرة التخزين المؤقت للبيانات (Data Cache)](/docs/app/building-your-application/caching#data-cache) على الخادم. هذا يعني أنه يمكن جلب البيانات في وقت البناء أو وقت الطلب، تخزينها مؤقتًا، وإعادة استخدامها في كل طلب بيانات.
+
+```js
+// 'force-cache' هو الإعداد الافتراضي، ويمكن حذفه
+fetch('https://...', { cache: 'force-cache' })
+```
+
+ومع ذلك، هناك استثناءات، لا يتم تخزين طلبات `fetch` مؤقتًا عندما:
+
+- تستخدم داخل [إجراء خادم (Server Action)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+- تستخدم داخل [معالج مسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers) يستخدم طريقة `POST`.
+
+> **ما هي ذاكرة التخزين المؤقت للبيانات (Data Cache)؟**
+>
+> ذاكرة التخزين المؤقت للبيانات هي [ذاكرة تخزين مؤقت HTTP](https://developer.mozilla.org/docs/Web/HTTP/Caching) دائمة. اعتمادًا على منصتك، يمكن أن تتوسع الذاكرة المؤقتة تلقائيًا و[تكون مشتركة عبر مناطق متعددة](https://vercel.com/docs/infrastructure/data-cache).
+>
+> تعلم المزيد عن [ذاكرة التخزين المؤقت للبيانات](/docs/app/building-your-application/caching#data-cache).
+
+### إعادة التحقق من البيانات
+
+إعادة التحقق هي عملية مسح ذاكرة التخزين المؤقت للبيانات وإعادة جلب أحدث البيانات. هذا مفيد عندما تتغير بياناتك وتريد التأكد من عرض أحدث المعلومات.
+
+يمكن إعادة التحقق من البيانات المخزنة مؤقتًا بطريقتين:
+
+- **إعادة التحقق المبنية على الوقت**: إعادة التحقق من البيانات تلقائيًا بعد مرور فترة زمنية معينة. هذا مفيد للبيانات التي تتغير نادرًا ولا تكون الحداثة فيها حرجة.
+- **إعادة التحقق عند الطلب**: إعادة التحقق من البيانات يدويًا بناءً على حدث (مثل تقديم نموذج). يمكن أن تستخدم إعادة التحقق عند الطلب نهجًا قائمًا على العلامات أو المسار لإعادة التحقق من مجموعات البيانات دفعة واحدة. هذا مفيد عندما تريد التأكد من عرض أحدث البيانات في أسرع وقت ممكن (مثل عند تحديث المحتوى من نظام إدارة المحتوى الخاص بك).
+
+#### إعادة التحقق المبنية على الوقت
+
+لإعادة التحقق من البيانات على فترات زمنية، يمكنك استخدام خيار `next.revalidate` في `fetch` لتعيين عمر ذاكرة التخزين المؤقت للمورد (بالثواني).
+
+```js
+fetch('https://...', { next: { revalidate: 3600 } })
+```
+
+بدلاً من ذلك، لإعادة التحقق من جميع طلبات `fetch` في جزء المسار، يمكنك استخدام [خيارات تكوين الجزء (Segment Config Options)](/docs/app/api-reference/file-conventions/route-segment-config).
+
+```jsx filename="layout.js | page.js"
+export const revalidate = 3600 // إعادة التحقق على الأكثر كل ساعة
+```
+
+إذا كان لديك عدة طلبات جلب في مسار معروض بشكل ثابت، ولكل منها تردد إعادة تحقق مختلف. سيتم استخدام أقل وقت لجميع الطلبات. بالنسبة للمسارات المعروضة بشكل ديناميكي، سيتم إعادة التحقق من كل طلب `fetch` بشكل مستقل.
+
+تعلم المزيد عن [إعادة التحقق المبنية على الوقت](/docs/app/building-your-application/caching#time-based-revalidation).
+
+#### إعادة التحقق عند الطلب
+
+يمكن إعادة التحقق من البيانات عند الطلب عن طريق المسار ([`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)) أو عن طريق علامة التخزين المؤقت ([`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)) داخل [إجراء خادم (Server Action)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) أو [معالج مسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+يحتوي Next.js على نظام وضع علامات على الذاكرة المؤقتة لإبطال طلبات `fetch` عبر المسارات.
+
+1. عند استخدام `fetch`، لديك خيار وضع علامة على إدخالات الذاكرة المؤقتة بواحدة أو أكثر من العلامات.
+2. ثم يمكنك استدعاء `revalidateTag` لإعادة التحقق من جميع الإدخالات المرتبطة بهذه العلامة.
+
+على سبيل المثال، يضيف طلب `fetch` التالي علامة التخزين المؤقت `collection`:
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  const res = await fetch('https://...', { next: { tags: ['collection'] } })
+  const data = await res.json()
+  // ...
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default async function Page() {
+  const res = await fetch('https://...', { next: { tags: ['collection'] } })
+  const data = await res.json()
+  // ...
+}
+```
+
+يمكنك بعد ذلك إعادة التحقق من استدعاء `fetch` الموسوم بـ `collection` عن طريق استدعاء `revalidateTag` في إجراء خادم:
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export default async function action() {
+  revalidateTag('collection')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export default async function action() {
+  revalidateTag('collection')
+}
+```
+
+تعلم المزيد عن [إعادة التحقق عند الطلب](/docs/app/building-your-application/caching#on-demand-revalidation).
+
+#### معالجة الأخطاء وإعادة التحقق
+
+إذا حدث خطأ أثناء محاولة إعادة التحقق من البيانات، سيتم الاستمرار في تقديم آخر بيانات تم إنشاؤها بنجاح من الذاكرة المؤقتة. في الطلب التالي، سيقوم Next.js بإعادة محاولة إعادة التحقق من البيانات.
+
+### عدم استخدام تخزين البيانات مؤقتًا
+
+لا يتم تخزين طلبات `fetch` مؤقتًا إذا:
+
+- تمت إضافة `cache: 'no-store'` إلى طلبات `fetch`.
+- تمت إضافة خيار `revalidate: 0` إلى طلبات `fetch` الفردية.
+- كان طلب `fetch` داخل معالج مسار (Route Handler) يستخدم طريقة `POST`.
+- جاء طلب `fetch` بعد استخدام `headers` أو `cookies`.
+- تم استخدام خيار جزء المسار `const dynamic = 'force-dynamic'`.
+- تم تكوين خيار جزء المسار `fetchCache` لتخطي التخزين المؤقت افتراضيًا.
+- استخدم طلب `fetch` رؤوس `Authorization` أو `Cookie` وهناك طلب غير مخزن مؤقتًا فوقه في شجرة المكونات.
+
+#### طلبات `fetch` الفردية
+
+لعدم تخزين طلبات `fetch` الفردية مؤقتًا، يمكنك تعيين خيار `cache` في `fetch` إلى `'no-store'`. سيؤدي هذا إلى جلب البيانات بشكل ديناميكي، في كل طلب.
+
+```js filename="layout.js | page.js"
+fetch('https://...', { cache: 'no-store' })
+```
+
+عرض جميع خيارات `cache` المتاحة في [مرجع واجهة برمجة تطبيقات `fetch`](/docs/app/api-reference/functions/fetch).
+
+#### طلبات `fetch` المتعددة
+
+إذا كان لديك عدة طلبات `fetch` في جزء مسار (مثل تخطيط أو صفحة)، يمكنك تكوين سلوك التخزين المؤقت لجميع طلبات البيانات في الجزء باستخدام [خيارات تكوين الجزء (Segment Config Options)](/docs/app/api-reference/file-conventions/route-segment-config).
+
+ومع ذلك، نوصي بتكوين سلوك التخزين المؤقت لكل طلب `fetch` بشكل فردي. هذا يمنحك تحكمًا أدق في سلوك التخزين المؤقت.
+
+## جلب البيانات على الخادم باستخدام مكتبات الطرف الثالث
+
+في الحالات التي تستخدم فيها مكتبة طرف ثالث لا تدعم أو تعرض `fetch` (مثل قاعدة بيانات، نظام إدارة محتوى، أو عميل ORM)، يمكنك تكوين سلوك التخزين المؤقت وإعادة التحقق من تلك الطلبات باستخدام [خيار تكوين جزء المسار (Route Segment Config Option)](/docs/app/api-reference/file-conventions/route-segment-config) ودالة `cache` في React.
+
+سيعتمد ما إذا كانت البيانات مخزنة مؤقتًا أم لا على ما إذا كان جزء المسار [معروضًا بشكل ثابت أو ديناميكي](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies). إذا كان الجزء ثابتًا (افتراضيًا)، سيتم تخزين مخرجات الطلب مؤقتًا وإعادة التحقق منها كجزء من جزء المسار. إذا كان الجزء ديناميكيًا، لن يتم تخزين مخرجات الطلب مؤقتًا وسيتم إعادة جلبها في كل طلب عند عرض الجزء.
+
+يمكنك أيضًا استخدام واجهة برمجة التطبيقات التجريبية [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache).
+
+### مثال
+
+في المثال أدناه:
+
+- يتم استخدام دالة React `cache` [لتذكر](/docs/app/building-your-application/caching#request-memoization) طلبات البيانات.
+- تم تعيين خيار `revalidate` إلى `3600` في أجزاء التخطيط والصفحة، مما يعني أنه سيتم تخزين البيانات مؤقتًا وإعادة التحقق منها على الأكثر كل ساعة.
+
+```ts filename="app/utils.ts" switcher
+import { cache } from 'react'
+
+export const getItem = cache(async (id: string) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
+
+```js filename="app/utils.js" switcher
+import { cache } from 'react'
+
+export const getItem = cache(async (id) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
+
+على الرغم من استدعاء دالة `getItem` مرتين، سيتم إجراء استعلام واحد فقط إلى قاعدة البيانات.
+
+```tsx filename="app/item/[id]/layout.tsx" switcher
+import { getItem } from '@/utils/get-item'
+
+export const revalidate = 3600 // إعادة التحقق من البيانات على الأكثر كل ساعة
+
+export default async function Layout({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+```jsx filename="app/item/[id]/layout.js" switcher
+import { getItem } from '@/utils/get-item'
+
+export const revalidate = 3600 // إعادة التحقق من البيانات على الأكثر كل ساعة
+
+export default async function Layout({ params: { id } }) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+```tsx filename="app/item/[id]/page.tsx" switcher
+import { getItem } from '@/utils/get-item'
+
+export const revalidate = 3600 // إعادة التحقق من البيانات على الأكثر كل ساعة
+
+export default async function Page({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+```jsx filename="app/item/[id]/page.js" switcher
+import { getItem } from '@/utils/get-item'
+
+export const revalidate = 3600 // إعادة التحقق من البيانات على الأكثر كل ساعة
+
+export default async function Page({ params: { id } }) {
+  const item = await getItem(id)
+  // ...
+}
+```
+
+## جلب البيانات على العميل باستخدام معالجات المسار (Route Handlers)
+
+إذا كنت بحاجة إلى جلب البيانات في مكون عميل، يمكنك استدعاء [معالج مسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers) من العميل. تعمل معالجات المسار على الخادم وتعيد البيانات إلى العميل. هذا مفيد عندما لا تريد الكشف عن معلومات حساسة للعميل، مثل رموز API.
+
+راجع وثائق [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers) للحصول على أمثلة.
+
+> **مكونات الخادم ومعالجات المسار**
+>
+> نظرًا لأن مكونات الخادم تعرض على الخادم، لا تحتاج إلى استدعاء معالج مسار من مكون خادم لجلب البيانات. بدلاً من ذلك، يمكنك جلب البيانات مباشرة داخل مكون الخادم.
+
+## جلب البيانات على العميل باستخدام مكتبات الطرف الثالث
+
+يمكنك أيضًا جلب البيانات على العميل باستخدام مكتبات طرف ثالث مثل [SWR](https://swr.vercel.app/) أو [TanStack Query](https://tanstack.com/query/latest). توفر هذه المكتبات واجهات برمجة تطبيقات خاصة بها لتذكر الطلبات، التخزين المؤقت، إعادة التحقق، وتحوير البيانات.
+
+> **واجهات برمجة التطبيقات المستقبلية**:
+>
+> `use` هي دالة React **تقبل وتتعامل مع وعد (promise) تم إرجاعه بواسطة دالة**. لا يوصى حاليًا **بتغليف `fetch` في `use` في مكونات العميل وقد يؤدي إلى إعادة عرض متعددة. تعلم المزيد عن `use` في [وثائق React](https://react.dev/reference/react/use).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx
new file mode 100644
index 00000000..917a5dbf
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx
@@ -0,0 +1,1000 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:33.007Z
+title: إجراءات الخادم والتحولات (Server Actions and Mutations)
+nav_title: إجراءات الخادم والتحولات (Server Actions and Mutations)
+description: تعلم كيفية التعامل مع إرسال النماذج وتحولات البيانات باستخدام Next.js.
+related:
+  description: تعلم كيفية تكوين إجراءات الخادم في Next.js
+  links:
+    - app/api-reference/next-config-js/serverActions
+---
+
+إجراءات الخادم (Server Actions) هي **وظائف غير متزامنة** يتم تنفيذها على الخادم. يمكن استخدامها في مكونات الخادم والعميل للتعامل مع إرسال النماذج وتحولات البيانات في تطبيقات Next.js.
+
+> **🎥 شاهد:** تعلم المزيد عن النماذج والتحولات باستخدام إجراءات الخادم → [YouTube (10 دقائق)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
+
+## الاصطلاح
+
+يمكن تعريف إجراء الخادم باستخدام توجيه React [`"use server"`](https://react.dev/reference/react/use-server). يمكنك وضع التوجيه في أعلى دالة `async` لتمييزها كإجراء خادم، أو في أعلى ملف منفصل لتمييز جميع الصادرات من هذا الملف كإجراءات خادم.
+
+### مكونات الخادم (Server Components)
+
+يمكن لمكونات الخادم استخدام توجيه `"use server"` على مستوى الدالة أو على مستوى الوحدة. لتضمين إجراء خادم، أضف `"use server"` في أعلى جسم الدالة:
+
+```tsx filename="app/page.tsx" switcher
+// مكون الخادم
+export default function Page() {
+  // إجراء الخادم
+  async function create() {
+    'use server'
+
+    // ...
+  }
+
+  return (
+    // ...
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+// مكون الخادم
+export default function Page() {
+  // إجراء الخادم
+  async function create() {
+    'use server'
+
+    // ...
+  }
+
+  return (
+    // ...
+  )
+}
+```
+
+### مكونات العميل (Client Components)
+
+يمكن لمكونات العميل استيراد الإجراءات التي تستخدم توجيه `"use server"` على مستوى الوحدة فقط.
+
+لاستدعاء إجراء خادم في مكون عميل، أنشئ ملفًا جديدًا وأضف توجيه `"use server"` في أعلى الملف. سيتم تمييز جميع الدوال داخل الملف كإجراءات خادم يمكن إعادة استخدامها في كل من مكونات العميل والخادم:
+
+```tsx filename="app/actions.ts" switcher
+'use server'
+
+export async function create() {
+  // ...
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+export async function create() {
+  // ...
+}
+```
+
+```tsx filename="app/ui/button.tsx" switcher
+import { create } from '@/app/actions'
+
+export function Button() {
+  return (
+    // ...
+  )
+}
+```
+
+```jsx filename="app/ui/button.js" switcher
+import { create } from '@/app/actions'
+
+export function Button() {
+  return (
+    // ...
+  )
+}
+```
+
+يمكنك أيضًا تمرير إجراء خادم إلى مكون عميل كخاصية:
+
+```jsx
+<ClientComponent updateItem={updateItem} />
+```
+
+```jsx filename="app/client-component.jsx"
+'use client'
+
+export default function ClientComponent({ updateItem }) {
+  return <form action={updateItem}>{/* ... */}</form>
+}
+```
+
+## السلوك
+
+- يمكن استدعاء إجراءات الخادم باستخدام سمة `action` في عنصر [`<form>`](#forms):
+  - تدعم مكونات الخادم التحسين التدريجي افتراضيًا، مما يعني أن النموذج سيتم إرساله حتى إذا لم يتم تحميل JavaScript بعد أو تم تعطيله.
+  - في مكونات العميل، ستقوم النماذج التي تستدعي إجراءات الخادم بوضع عمليات الإرسال في قائمة الانتظار إذا لم يتم تحميل JavaScript بعد، مع إعطاء الأولوية لترطيب العميل.
+  - بعد الترطيب، لا يقوم المتصفح بالتحديث عند إرسال النموذج.
+- لا تقتصر إجراءات الخادم على `<form>` ويمكن استدعاؤها من معالجي الأحداث، و`useEffect`، ومكتبات الطرف الثالث، وعناصر النموذج الأخرى مثل `<button>`.
+- تندمج إجراءات الخادم مع بنية التخزين المؤقت وإعادة التحقق من Next.js. عند استدعاء إجراء، يمكن لـ Next.js إرجاع واجهة المستخدم المحدثة والبيانات الجديدة في جولة واحدة من الخادم.
+- خلف الكواليس، تستخدم الإجراءات طريقة `POST`، وهذه الطريقة فقط هي التي يمكنها استدعاؤها.
+- يجب أن تكون وسيطات وقيمة إرجاع إجراءات الخادم قابلة للتسلسل بواسطة React. راجع وثائق React للحصول على قائمة [بالمعاملات وقيم الإرجاع القابلة للتسلسل](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values).
+- إجراءات الخادم هي دوال. هذا يعني أنه يمكن إعادة استخدامها في أي مكان في تطبيقك.
+- ترث إجراءات الخادم [بيئة التشغيل](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes) من الصفحة أو التخطيط الذي تستخدمه.
+- ترث إجراءات الخادم [تكوين مقطع المسار](/docs/app/api-reference/file-conventions/route-segment-config) من الصفحة أو التخطيط الذي تستخدمه، بما في ذلك الحقول مثل `maxDuration`.
+
+## أمثلة
+
+### النماذج
+
+يمتد React عنصر [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) في HTML للسماح باستدعاء إجراءات الخادم باستخدام خاصية `action`.
+
+عند استدعائها في نموذج، يتلقى الإجراء تلقائيًا كائن [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData). لا تحتاج إلى استخدام React `useState` لإدارة الحقول، بدلاً من ذلك، يمكنك استخراج البيانات باستخدام [طرق `FormData` الأصلية](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods):
+
+```tsx filename="app/invoices/page.tsx" switcher
+export default function Page() {
+  async function createInvoice(formData: FormData) {
+    'use server'
+
+    const rawFormData = {
+      customerId: formData.get('customerId'),
+      amount: formData.get('amount'),
+      status: formData.get('status'),
+    }
+
+    // تحويل البيانات
+    // إعادة التحقق من التخزين المؤقت
+  }
+
+  return <form action={createInvoice}>...</form>
+}
+```
+
+```jsx filename="app/invoices/page.jsx" switcher
+export default function Page() {
+  async function createInvoice(formData) {
+    'use server'
+
+    const rawFormData = {
+      customerId: formData.get('customerId'),
+      amount: formData.get('amount'),
+      status: formData.get('status'),
+    }
+
+    // تحويل البيانات
+    // إعادة التحقق من التخزين المؤقت
+  }
+
+  return <form action={createInvoice}>...</form>
+}
+```
+
+> **معلومة مفيدة:**
+>
+> - مثال: [نموذج مع حالات التحميل والأخطاء](https://github.com/vercel/next.js/tree/canary/examples/next-forms)
+> - عند العمل مع نماذج تحتوي على العديد من الحقول، قد ترغب في التفكير في استخدام طريقة [`entries()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries) مع [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) في JavaScript. على سبيل المثال: `const rawFormData = Object.fromEntries(formData)`. شيء واحد يجب ملاحظته هو أن `formData` سيتضمن خصائص `$ACTION_` إضافية.
+> - راجع [وثائق React `<form>`](https://react.dev/reference/react-dom/components/form#handle-form-submission-with-a-server-action) لمعرفة المزيد.
+
+#### تمرير وسيطات إضافية
+
+يمكنك تمرير وسيطات إضافية إلى إجراء خادم باستخدام طريقة `bind` في JavaScript.
+
+```tsx filename="app/client-component.tsx" highlight={6} switcher
+'use client'
+
+import { updateUser } from './actions'
+
+export function UserProfile({ userId }: { userId: string }) {
+  const updateUserWithId = updateUser.bind(null, userId)
+
+  return (
+    <form action={updateUserWithId}>
+      <input type="text" name="name" />
+      <button type="submit">تحديث اسم المستخدم</button>
+    </form>
+  )
+}
+```
+
+```jsx filename="app/client-component.js" highlight={6} switcher
+'use client'
+
+import { updateUser } from './actions'
+
+export function UserProfile({ userId }) {
+  const updateUserWithId = updateUser.bind(null, userId)
+
+  return (
+    <form action={updateUserWithId}>
+      <input type="text" name="name" />
+      <button type="submit">تحديث اسم المستخدم</button>
+    </form>
+  )
+}
+```
+
+سيستقبل إجراء الخادم وسيطة `userId`، بالإضافة إلى بيانات النموذج:
+
+```js filename="app/actions.js"
+'use server'
+
+export async function updateUser(userId, formData) {
+  // ...
+}
+```
+
+> **معلومة مفيدة:**
+>
+> - بديل هو تمرير الوسيطات كحقول إدخال مخفية في النموذج (مثل `<input type="hidden" name="userId" value={userId} />`). ومع ذلك، ستكون القيمة جزءًا من HTML المقدم ولن تكون مشفرة.
+> - يعمل `.bind` في كل من مكونات الخادم والعميل. كما يدعم التحسين التدريجي.
+
+#### حالات الانتظار
+
+يمكنك استخدام خطاف React [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus) لعرض حالة انتظار أثناء إرسال النموذج.
+
+- `useFormStatus` تُرجع الحالة لنموذج معين `<form>`، لذا **يجب تعريفها كعنصر فرعي لعنصر `<form>`**.
+- `useFormStatus` هو خطاف React وبالتالي يجب استخدامه في مكون عميل.
+
+```tsx filename="app/submit-button.tsx" switcher
+'use client'
+
+import { useFormStatus } from 'react-dom'
+
+export function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button type="submit" disabled={pending}>
+      إضافة
+    </button>
+  )
+}
+```
+
+```jsx filename="app/submit-button.jsx" switcher
+'use client'
+
+import { useFormStatus } from 'react-dom'
+
+export function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button type="submit" disabled={pending}>
+      إضافة
+    </button>
+  )
+}
+```
+
+يمكن بعد ذلك تضمين `<SubmitButton />` في أي نموذج:
+
+```tsx filename="app/page.tsx" switcher
+import { SubmitButton } from '@/app/submit-button'
+import { createItem } from '@/app/actions'
+
+// مكون الخادم
+export default async function Home() {
+  return (
+    <form action={createItem}>
+      <input type="text" name="field-name" />
+      <SubmitButton />
+    </form>
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+import { SubmitButton } from '@/app/submit-button'
+import { createItem } from '@/app/actions'
+
+// مكون الخادم
+export default async function Home() {
+  return (
+    <form action={createItem}>
+      <input type="text" name="field-name" />
+      <SubmitButton />
+    </form>
+  )
+}
+```
+
+#### التحقق من صحة الخادم ومعالجة الأخطاء
+
+نوصي باستخدام التحقق من صحة HTML مثل `required` و `type="email"` للتحقق الأساسي من صحة النموذج على جانب العميل.
+
+للتحقق المتقدم من صحة الخادم، يمكنك استخدام مكتبة مثل [zod](https://zod.dev/) للتحقق من حقول النموذج قبل تحويل البيانات:
+
+```tsx filename="app/actions.ts" switcher
+'use server'
+
+import { z } from 'zod'
+
+const schema = z.object({
+  email: z.string({
+    invalid_type_error: 'بريد إلكتروني غير صالح',
+  }),
+})
+
+export default async function createUser(formData: FormData) {
+  const validatedFields = schema.safeParse({
+    email: formData.get('email'),
+  })
+
+  // العودة مبكرًا إذا كانت بيانات النموذج غير صالحة
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    }
+  }
+
+  // تحويل البيانات
+}
+```
+
+```jsx filename="app/actions.js" switcher
+'use server'
+
+import { z } from 'zod'
+
+const schema = z.object({
+  email: z.string({
+    invalid_type_error: 'بريد إلكتروني غير صالح',
+  }),
+})
+
+export default async function createsUser(formData) {
+  const validatedFields = schema.safeParse({
+    email: formData.get('email'),
+  })
+
+  // العودة مبكرًا إذا كانت بيانات النموذج غير صالحة
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    }
+  }
+
+  // تحويل البيانات
+}
+```
+
+بعد التحقق من صحة الحقول على الخادم، يمكنك إرجاع كائن قابل للتسلسل في إجراءك واستخدام خطاف React [`useFormState`](https://react.dev/reference/react-dom/hooks/useFormState) لعرض رسالة للمستخدم.
+
+- عن طريق تمرير الإجراء إلى `useFormState`، يتغير توقيع الدالة للإجراء لتلقي معلمة جديدة `prevState` أو `initialState` كأول وسيطة لها.
+- `useFormState` هو خطاف React وبالتالي يجب استخدامه في مكون عميل.
+
+```tsx filename="app/actions.ts" switcher
+'use server'
+
+export async function createUser(prevState: any, formData: FormData) {
+  // ...
+  return {
+    message: 'الرجاء إدخال بريد إلكتروني صالح',
+  }
+}
+```
+
+```jsx filename="app/actions.js" switcher
+'use server'
+
+export async function createUser(prevState, formData) {
+  // ...
+  return {
+    message: 'الرجاء إدخال بريد إلكتروني صالح',
+  }
+}
+```
+
+ثم، يمكنك تمرير إجراءك إلى خطاف `useFormState` واستخدام `state` المُرجعة لعرض رسالة خطأ.
+
+```tsx filename="app/ui/signup.tsx" switcher
+'use client'
+
+import { useFormState } from 'react-dom'
+import { createUser } from '@/app/actions'
+
+const initialState = {
+  message: '',
+}
+
+export function Signup() {
+  const [state, formAction] = useFormState(createUser, initialState)
+
+  return (
+    <form action={formAction}>
+      <label htmlFor="email">البريد الإلكتروني</label>
+      <input type="text" id="email" name="email" required />
+      {/* ... */}
+      <p aria-live="polite" className="sr-only">
+        {state?.message}
+      </p>
+      <button>اشتراك</button>
+    </form>
+  )
+}
+```
+
+```jsx filename="app/ui/signup.js" switcher
+'use client'
+
+import { useFormState } from 'react-dom'
+import { createUser } from '@/app/actions'
+
+const initialState = {
+  message: '',
+}
+
+export function Signup() {
+  const [state, formAction] = useFormState(createUser, initialState)
+
+  return (
+    <form action={formAction}>
+      <label htmlFor="email">البريد الإلكتروني</label>
+      <input type="text" id="email" name="email" required />
+      {/* ... */}
+      <p aria-live="polite" className="sr-only">
+        {state?.message}
+      </p>
+      <button>اشتراك</button>
+    </form>
+  )
+}
+```
+
+> **معلومة مفيدة:**
+>
+> - قبل تحويل البيانات، يجب عليك دائمًا التأكد من أن المستخدم مخول أيضًا لتنفيذ الإجراء. راجع [المصادقة والتفويض](#authentication-and-authorization).
+
+#### التحديثات المتفائلة
+
+يمكنك استخدام خطاف React [`useOptimistic`](https://react.dev/reference/react/useOptimistic) لتحديث واجهة المستخدم بشكل متفائل قبل انتهاء إجراء الخادم، بدلاً من انتظار الرد:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import { useOptimistic } from 'react'
+import { send } from './actions'
+
+type Message = {
+  message: string
+}
+
+export function Thread({ messages }: { messages: Message[] }) {
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic<
+    Message[],
+    string
+  >(messages, (state, newMessage) => [...state, { message: newMessage }])
+
+  return (
+    <div>
+      {optimisticMessages.map((m, k) => (
+        <div key={k}>{m.message}</div>
+      ))}
+      <form
+        action={async (formData: FormData) => {
+          const message = formData.get('message')
+          addOptimisticMessage(message)
+          await send(message)
+        }}
+      >
+        <input type="text" name="message" />
+        <button type="submit">إرسال</button>
+      </form>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+'use client'
+
+import { useOptimistic } from 'react'
+import { send } from './actions'
+
+export function Thread({ messages }) {
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
+    messages,
+    (state, newMessage) => [...state, { message: newMessage }]
+  )
+
+  return (
+    <div>
+      {optimisticMessages.map((m) => (
+        <div>{m.message}</div>
+      ))}
+      <form
+        action={async (formData) => {
+          const message = formData.get('message')
+          addOptimisticMessage(message)
+          await send(message)
+        }}
+      >
+        <input type="text" name="message" />
+        <button type="submit">إرسال</button>
+      </form>
+    </div>
+  )
+}
+```
+
+#### العناصر المتداخلة
+
+يمكنك استدعاء إجراء خادم في عناصر متداخلة داخل `<form>` مثل `<button>`، و`<input type="submit">`، و`<input type="image">`. تقبل هذه العناصر خاصية `formAction` أو [معالجات الأحداث](#event-handlers).
+
+هذا مفيد في الحالات التي ترغب فيها في استدعاء إجراءات خادم متعددة داخل نموذج. على سبيل المثال، يمكنك إنشاء عنصر `<button>` محدد لحفظ مسودة منشور بالإضافة إلى نشره. راجع [وثائق React `<form>`](https://react.dev/reference/react-dom/components/form#handling-multiple-submission-types) لمزيد من المعلومات.
+
+#### إرسال النموذج برمجيًا
+
+يمكنك تشغيل إرسال النموذج باستخدام طريقة [`requestSubmit()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit). على سبيل المثال، عندما يضغط المستخدم على `⌘` + `Enter`، يمكنك الاستماع لحدث `onKeyDown`:
+
+```tsx filename="app/entry.tsx" switcher
+'use client'
+
+export function Entry() {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (
+      (e.ctrlKey || e.metaKey) &&
+      (e.key === 'Enter' || e.key === 'NumpadEnter')
+    ) {
+      e.preventDefault()
+      e.currentTarget.form?.requestSubmit()
+    }
+  }
+
+  return (
+    <div>
+      <textarea name="entry" rows={20} required onKeyDown={handleKeyDown} />
+    </div>
+  )
+}
+```
+
+```jsx filename="app/entry.jsx" switcher
+'use client'
+
+export function Entry() {
+  const handleKeyDown = (e) => {
+    if (
+      (e.ctrlKey || e.metaKey) &&
+      (e.key === 'Enter' || e.key === 'NumpadEnter')
+    ) {
+      e.preventDefault()
+      e.currentTarget.form?.requestSubmit()
+    }
+  }
+
+  return (
+    <div>
+      <textarea name="entry" rows={20} required onKeyDown={handleKeyDown} />
+    </div>
+  )
+}
+```
+
+سيؤدي هذا إلى تشغيل إرسال أقرب عنصر `<form>` أبوي، مما سيستدعي إجراء الخادم (Server Action).
+
+### عناصر غير النماذج
+
+بينما يُشاع استخدام إجراءات الخادم داخل عناصر `<form>`، إلا أنه يمكن أيضًا استدعاؤها من أجزاء أخرى من الكود مثل معالجات الأحداث و `useEffect`.
+
+#### معالجات الأحداث
+
+يمكنك استدعاء إجراء خادم من معالجات الأحداث مثل `onClick`. على سبيل المثال، لزيادة عدد الإعجابات:
+
+```tsx filename="app/like-button.tsx" switcher
+'use client'
+
+import { incrementLike } from './actions'
+import { useState } from 'react'
+
+export default function LikeButton({ initialLikes }: { initialLikes: number }) {
+  const [likes, setLikes] = useState(initialLikes)
+
+  return (
+    <>
+      <p>Total Likes: {likes}</p>
+      <button
+        onClick={async () => {
+          const updatedLikes = await incrementLike()
+          setLikes(updatedLikes)
+        }}
+      >
+        Like
+      </button>
+    </>
+  )
+}
+```
+
+```jsx filename="app/like-button.js" switcher
+'use client'
+
+import { incrementLike } from './actions'
+import { useState } from 'react'
+
+export default function LikeButton({ initialLikes }) {
+  const [likes, setLikes] = useState(initialLikes)
+
+  return (
+    <>
+      <p>Total Likes: {likes}</p>
+      <button
+        onClick={async () => {
+          const updatedLikes = await incrementLike()
+          setLikes(updatedLikes)
+        }}
+      >
+        Like
+      </button>
+    </>
+  )
+}
+```
+
+لتحسين تجربة المستخدم، نوصي باستخدام واجهات برمجة تطبيقات React الأخرى مثل [`useOptimistic`](https://react.dev/reference/react/useOptimistic) و [`useTransition`](https://react.dev/reference/react/useTransition) لتحديث واجهة المستخدم قبل انتهاء تنفيذ إجراء الخادم على الخادم، أو لإظهار حالة انتظار.
+
+يمكنك أيضًا إضافة معالجات أحداث لعناصر النموذج، على سبيل المثال، لحفظ حقل نموذج عند `onChange`:
+
+```tsx filename="app/ui/edit-post.tsx"
+'use client'
+
+import { publishPost, saveDraft } from './actions'
+
+export default function EditPost() {
+  return (
+    <form action={publishPost}>
+      <textarea
+        name="content"
+        onChange={async (e) => {
+          await saveDraft(e.target.value)
+        }}
+      />
+      <button type="submit">Publish</button>
+    </form>
+  )
+}
+```
+
+في حالات مثل هذه، حيث قد يتم تشغيل أحداث متعددة بسرعة، نوصي باستخدام **تقليل التردد (debouncing)** لمنع استدعاءات إجراءات الخادم غير الضرورية.
+
+#### `useEffect`
+
+يمكنك استخدام خطاف React [`useEffect`](https://react.dev/reference/react/useEffect) لاستدعاء إجراء خادم عند تركيب المكون أو تغيير تبعية. هذا مفيد للتحولات التي تعتمد على أحداث عالمية أو تحتاج إلى تشغيل تلقائي. على سبيل المثال، `onKeyDown` لاختصارات التطبيق، خطاف مراقبة التقاطع (intersection observer) للتمرير اللانهائي، أو عند تركيب المكون لتحديث عدد المشاهدات:
+
+```tsx filename="app/view-count.tsx" switcher
+'use client'
+
+import { incrementViews } from './actions'
+import { useState, useEffect } from 'react'
+
+export default function ViewCount({ initialViews }: { initialViews: number }) {
+  const [views, setViews] = useState(initialViews)
+
+  useEffect(() => {
+    const updateViews = async () => {
+      const updatedViews = await incrementViews()
+      setViews(updatedViews)
+    }
+
+    updateViews()
+  }, [])
+
+  return <p>Total Views: {views}</p>
+}
+```
+
+```jsx filename="app/view-count.js" switcher
+'use client'
+
+import { incrementViews } from './actions'
+import { useState, useEffect } from 'react'
+
+export default function ViewCount({ initialViews }: { initialViews: number }) {
+  const [views, setViews] = useState(initialViews)
+
+  useEffect(() => {
+    const updateViews = async () => {
+      const updatedViews = await incrementViews()
+      setViews(updatedViews)
+    }
+
+    updateViews()
+  }, [])
+
+  return <p>Total Views: {views}</p>
+}
+```
+
+تذكر مراعاة [سلوكيات ومحاذير](https://react.dev/reference/react/useEffect#caveats) `useEffect`.
+
+### معالجة الأخطاء
+
+عند حدوث خطأ، سيتم التقاطه بواسطة [`error.js`](/docs/app/building-your-application/routing/error-handling) الأقرب أو حدود `<Suspense>` على العميل. نوصي باستخدام `try/catch` لإرجاع الأخطاء ليتم معالجتها بواسطة واجهة المستخدم الخاصة بك.
+
+على سبيل المثال، قد يتعامل إجراء الخادم الخاص بك مع الأخطاء من إنشاء عنصر جديد عن طريق إرجاع رسالة:
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+export async function createTodo(prevState: any, formData: FormData) {
+  try {
+    // Mutate data
+  } catch (e) {
+    throw new Error('Failed to create task')
+  }
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+export async function createTodo(prevState, formData) {
+  try {
+    //  Mutate data
+  } catch (e) {
+    throw new Error('Failed to create task')
+  }
+}
+```
+
+> **معلومة جيدة:**
+>
+> - بالإضافة إلى إلقاء الخطأ، يمكنك أيضًا إرجاع كائن ليتم معالجته بواسطة `useFormState`. راجع [التحقق من صحة الخادم ومعالجة الأخطاء](#server-side-validation-and-error-handling).
+
+### إعادة التحقق من البيانات
+
+يمكنك إعادة التحقق من [ذاكرة التخزين المؤقت لـ Next.js](/docs/app/building-your-application/caching) داخل إجراءات الخادم الخاصة بك باستخدام واجهة برمجة التطبيقات [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function createPost() {
+  try {
+    // ...
+  } catch (error) {
+    // ...
+  }
+
+  revalidatePath('/posts')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function createPost() {
+  try {
+    // ...
+  } catch (error) {
+    // ...
+  }
+
+  revalidatePath('/posts')
+}
+```
+
+أو إبطال جلب بيانات محدد بعلامة ذاكرة تخزين مؤقت باستخدام [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export async function createPost() {
+  try {
+    // ...
+  } catch (error) {
+    // ...
+  }
+
+  revalidateTag('posts')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export async function createPost() {
+  try {
+    // ...
+  } catch (error) {
+    // ...
+  }
+
+  revalidateTag('posts')
+}
+```
+
+### إعادة التوجيه
+
+إذا كنت ترغب في توجيه المستخدم إلى مسار مختلف بعد اكتمال إجراء الخادم، يمكنك استخدام واجهة برمجة التطبيقات [`redirect`](/docs/app/api-reference/functions/redirect). يجب استدعاء `redirect` خارج كتلة `try/catch`:
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+import { revalidateTag } from 'next/cache'
+
+export async function createPost(id: string) {
+  try {
+    // ...
+  } catch (error) {
+    // ...
+  }
+
+  revalidateTag('posts') // تحديث المنشورات المخزنة مؤقتًا
+  redirect(`/post/${id}`) // الانتقال إلى صفحة المنشور الجديدة
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+import { revalidateTag } from 'next/cache'
+
+export async function createPost(id) {
+  try {
+    // ...
+  } catch (error) {
+    // ...
+  }
+
+  revalidateTag('posts') // تحديث المنشورات المخزنة مؤقتًا
+  redirect(`/post/${id}`) // الانتقال إلى صفحة المنشور الجديدة
+}
+```
+
+### ملفات تعريف الارتباط (Cookies)
+
+يمكنك `الحصول على`، `تعيين`، و`حذف` ملفات تعريف الارتباط داخل إجراء خادم باستخدام واجهة برمجة التطبيقات [`cookies`](/docs/app/api-reference/functions/cookies):
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function exampleAction() {
+  // الحصول على ملف تعريف الارتباط
+  const value = cookies().get('name')?.value
+
+  // تعيين ملف تعريف الارتباط
+  cookies().set('name', 'Delba')
+
+  // حذف ملف تعريف الارتباط
+  cookies().delete('name')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function exampleAction() {
+  // الحصول على ملف تعريف الارتباط
+  const value = cookies().get('name')?.value
+
+  // تعيين ملف تعريف الارتباط
+  cookies().set('name', 'Delba')
+
+  // حذف ملف تعريف الارتباط
+  cookies().delete('name')
+}
+```
+
+راجع [أمثلة إضافية](/docs/app/api-reference/functions/cookies#deleting-cookies) لحذف ملفات تعريف الارتباط من إجراءات الخادم.
+
+## الأمان
+
+### المصادقة والتفويض
+
+يجب معاملة إجراءات الخادم كما لو كانت نقاط نهاية API عامة، والتأكد من أن المستخدم مخول لتنفيذ الإجراء. على سبيل المثال:
+
+```tsx filename="app/actions.ts"
+'use server'
+
+import { auth } from './lib'
+
+export function addItem() {
+  const { user } = auth()
+  if (!user) {
+    throw new Error('You must be signed in to perform this action')
+  }
+
+  // ...
+}
+```
+
+### الإغلاقات والتشفير
+
+يؤدي تعريف إجراء خادم داخل مكون إلى إنشاء [إغلاق (closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) حيث يكون للإجراء حق الوصول إلى نطاق الوظيفة الخارجية. على سبيل المثال، لدى إجراء `publish` حق الوصول إلى المتغير `publishVersion`:
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  const publishVersion = await getLatestVersion();
+
+  async function publish(formData: FormData) {
+    "use server";
+    if (publishVersion !== await getLatestVersion()) {
+      throw new Error('The version has changed since pressing publish');
+    }
+    ...
+  }
+
+  return <button action={publish}>Publish</button>;
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  const publishVersion = await getLatestVersion();
+
+  async function publish() {
+    "use server";
+    if (publishVersion !== await getLatestVersion()) {
+      throw new Error('The version has changed since pressing publish');
+    }
+    ...
+  }
+
+  return <button action={publish}>Publish</button>;
+}
+```
+
+تكون الإغلاقات مفيدة عندما تحتاج إلى التقاط لقطة للبيانات (مثل `publishVersion`) في وقت العرض بحيث يمكن استخدامها لاحقًا عند استدعاء الإجراء.
+
+ومع ذلك، لحدوث هذا، يتم إرسال المتغيرات الملتقطة إلى العميل والعودة إلى الخادم عند استدعاء الإجراء. لمنع تعرض البيانات الحساسة للعميل، يقوم Next.js تلقائيًا بتشفير المتغيرات المغلقة. يتم إنشاء مفتاح خاص جديد لكل إجراء في كل مرة يتم فيها بناء تطبيق Next.js. هذا يعني أنه يمكن استدعاء الإجراءات فقط لبناء محدد.
+
+> **معلومة جيدة:** لا نوصي بالاعتماد على التشفير وحده لمنع تعرض القيم الحساسة للعميل. بدلاً من ذلك، يجب عليك استخدام [واجهات برمجة تطبيقات React للتدنيس (taint APIs)](/docs/app/building-your-application/data-fetching/patterns#preventing-sensitive-data-from-being-exposed-to-the-client) لمنع بيانات معينة من إرسالها إلى العميل بشكل استباقي.
+
+### تجاوز مفاتيح التشفير (متقدم)
+
+عند استضافة تطبيق Next.js الخاص بك على خوادم متعددة، قد ينتهي كل مثيل خادم بمفتاح تشفير مختلف، مما يؤدي إلى تناقضات محتملة.
+
+لتخفيف هذا، يمكنك تجاوز مفتاح التشفير باستخدام متغير البيئة `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY`. يضمن تحديد هذا المتغير أن مفاتيح التشفير الخاصة بك ثابتة عبر البناءات، وجميع مثيلات الخادم تستخدم نفس المفتاح.
+
+هذه حالة استخدام متقدمة حيث يكون سلوك التشفير المتسق عبر عمليات النشر المتعددة أمرًا بالغ الأهمية لتطبيقك. يجب عليك مراعاة ممارسات الأمان القياسية مثل تدوير المفاتيح والتوقيع.
+
+> **معلومة جيدة:** يتم التعامل مع هذا تلقائيًا في تطبيقات Next.js الموزعة على Vercel.
+
+### الأصول المسموح بها (متقدم)
+
+نظرًا لأنه يمكن استدعاء إجراءات الخادم في عنصر `<form>`، فهذا يعرضها لهجمات [CSRF](https://developer.mozilla.org/en-US/docs/Glossary/CSRF).
+
+خلف الكواليس، تستخدم إجراءات الخادم طريقة `POST`، وهذه الطريقة HTTP الوحيدة المسموح بها لاستدعائها. هذا يمنع معظم نقاط الضعف CSRF في المتصفحات الحديثة، خاصة مع كون [ملفات تعريف الارتباط SameSite](https://web.dev/articles/samesite-cookies-explained) هي الافتراضية.
+
+كحماية إضافية، تقارن إجراءات الخادم في Next.js أيضًا [رأس الأصل (Origin header)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) بـ[رأس المضيف (Host header)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (أو `X-Forwarded-Host`). إذا لم تتطابق هذه، سيتم إحباط الطلب. بمعنى آخر، يمكن استدعاء إجراءات الخادم فقط على نفس المضيف الذي يستضيف الصفحة.
+
+بالنسبة للتطبيقات الكبيرة التي تستخدم وكلاء عكسيين أو بنى خلفية متعددة الطبقات (حيث يختلف خادم API عن نطاق الإنتاج)، يُوصى باستخدام خيار التكوين [`serverActions.allowedOrigins`](/docs/app/api-reference/next-config-js/serverActions) لتحديد قائمة بالأصول الآمنة. يقبل الخيار مصفوفة من السلاسل.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+module.exports = {
+  experimental: {
+    serverActions: {
+      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
+    },
+  },
+}
+```
+
+تعرف على المزيد حول [الأمان وإجراءات الخادم](https://nextjs.org/blog/security-nextjs-server-components-actions).
+
+## موارد إضافية
+
+لمزيد من المعلومات حول إجراءات الخادم، راجع وثائق React التالية:
+
+- [`"use server"`](https://react.dev/reference/react/use-server)
+- [`<form>`](https://react.dev/reference/react-dom/components/form)
+- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
+- [`useFormState`](https://react.dev/reference/react-dom/hooks/useFormState)
+- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/03-patterns.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/03-patterns.mdx
new file mode 100644
index 00000000..12ff5c8d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/03-patterns.mdx
@@ -0,0 +1,405 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:46:59.893Z
+title: أنماط وأفضل الممارسات
+nav_title: أنماط وأفضل ممارسات جلب البيانات
+description: تعرف على أنماط جلب البيانات الشائعة في React وNext.js.
+---
+
+هناك بعض الأنماط وأفضل الممارسات الموصى بها لجلب البيانات في React وNext.js. ستغطي هذه الصفحة بعض الأنماط الأكثر شيوعًا وكيفية استخدامها.
+
+## جلب البيانات على الخادم
+
+كلما أمكن، نوصي بجلب البيانات على الخادم باستخدام مكونات الخادم (Server Components). هذا يسمح لك بـ:
+
+- الوصول المباشر إلى موارد البيانات الخلفية (مثل قواعد البيانات).
+- الحفاظ على تطبيقك أكثر أمانًا عن طريق منع تسرب المعلومات الحساسة مثل رموز الوصول ومفاتيح API إلى العميل.
+- جلب البيانات وتصييرها في نفس البيئة. هذا يقلل من التواصل ذهابًا وإيابًا بين العميل والخادم، وكذلك [العمل على الخيط الرئيسي](https://vercel.com/blog/how-react-18-improves-application-performance) على العميل.
+- تنفيذ عمليات جلب متعددة للبيضاء برحلة ذهاب وإياب واحدة بدلاً من طلبات فردية متعددة على العميل.
+- تقليل [الشلالات](#parallel-and-sequential-data-fetching) بين العميل والخادم.
+- اعتمادًا على منطقتك، يمكن أن يحدث جلب البيانات بالقرب من مصدر البيانات، مما يقلل من زمن الوصول ويحسن الأداء.
+
+ثم يمكنك تعديل أو تحديث البيانات باستخدام [الإجراءات الخادمية (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+## جلب البيانات حيثما تكون مطلوبة
+
+إذا كنت بحاجة إلى استخدام نفس البيانات (مثل المستخدم الحالي) في عدة مكونات في شجرة، ليس عليك جلب البيانات بشكل عام، ولا تمرير الخصائص بين المكونات. بدلاً من ذلك، يمكنك استخدام `fetch` أو `cache` من React في المكون الذي يحتاج إلى البيانات دون القلق بشأن تأثيرات الأداء لإنشاء طلبات متعددة لنفس البيانات.
+
+هذا ممكن لأن طلبات `fetch` يتم تذكرها تلقائيًا. تعلم المزيد عن [تذكر الطلبات (request memoization)](/docs/app/building-your-application/caching#request-memoization)
+
+> **معلومة مفيدة**: هذا ينطبق أيضًا على التخطيطات (layouts)، لأنه لا يمكن تمرير البيانات بين التخطيط الأب وأطفاله.
+
+## البث (Streaming)
+
+البث و [التعليق (Suspense)](https://react.dev/reference/react/Suspense) هما ميزتان في React تسمحان لك بتصيير وحدات واجهة المستخدم تدريجيًا وبثها إلى العميل بشكل تدريجي.
+
+مع مكونات الخادم و [التخطيطات المتداخلة (nested layouts)](/docs/app/building-your-application/routing/pages-and-layouts)، يمكنك تصيير أجزاء الصفحة التي لا تتطلب بيانات على الفور، وعرض [حالة التحميل (loading state)](/docs/app/building-your-application/routing/loading-ui-and-streaming) للأجزاء التي تقوم بجلب البيانات. هذا يعني أن المستخدم لا يضطر إلى انتظار تحميل الصفحة بالكامل قبل أن يتمكن من التفاعل معها.
+
+<Image
+  alt="تصيير الخادم مع البث"
+  srcLight="/docs/light/server-rendering-with-streaming.png"
+  srcDark="/docs/dark/server-rendering-with-streaming.png"
+  width="1600"
+  height="785"
+/>
+
+للمزيد عن البث والتعليق، راجع صفحات [واجهة التحميل (Loading UI)](/docs/app/building-your-application/routing/loading-ui-and-streaming) و [البث مع التعليق (Streaming with Suspense)](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense).
+
+## جلب البيانات المتوازي والتسلسلي
+
+عند جلب البيانات داخل مكونات React، يجب أن تكون على دراية بنمطين لجلب البيانات: المتوازي والتسلسلي.
+
+<Image
+  alt="جلب البيانات التسلسلي والمتوازي"
+  srcLight="/docs/light/sequential-parallel-data-fetching.png"
+  srcDark="/docs/dark/sequential-parallel-data-fetching.png"
+  width="1600"
+  height="525"
+/>
+
+- مع **جلب البيانات التسلسلي (sequential data fetching)**: تكون الطلبات في المسار معتمدة على بعضها البعض وبالتالي تخلق شلالات. قد تكون هناك حالات تريد فيها هذا النمط لأن أحد الطلبات يعتمد على نتيجة الآخر، أو لأنك تريد استيفاء شرط قبل الطلب التالي لتوفير الموارد. ومع ذلك، قد يكون هذا السلوك غير مقصود ويؤدي إلى أوقات تحميل أطول.
+- مع **جلب البيانات المتوازي (parallel data fetching)**: يتم بدء الطلبات في المسار بفارغ الصبر وتحميل البيانات في نفس الوقت. هذا يقلل من شلالات العميل-الخادم والوقت الإجمالي لتحميل البيانات.
+
+### جلب البيانات التسلسلي
+
+إذا كان لديك مكونات متداخلة، وكل مكون يجلب بياناته الخاصة، فسيحدث جلب البيانات بشكل تسلسلي إذا كانت هذه الطلبات مختلفة (هذا لا ينطبق على الطلبات لنفس البيانات لأنها يتم تذكرها تلقائيًا [memoized](/docs/app/building-your-application/caching#request-memoization)).
+
+على سبيل المثال، لن يبدأ مكون `Playlists` في جلب البيانات إلا بعد انتهاء مكون `Artist` من جلب البيانات لأن `Playlists` يعتمد على خاصية `artistID`:
+
+```tsx filename="app/artist/[username]/page.tsx" switcher
+// ...
+
+async function Playlists({ artistID }: { artistID: string }) {
+  // انتظار قوائم التشغيل
+  const playlists = await getArtistPlaylists(artistID)
+
+  return (
+    <ul>
+      {playlists.map((playlist) => (
+        <li key={playlist.id}>{playlist.name}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default async function Page({
+  params: { username },
+}: {
+  params: { username: string }
+}) {
+  // انتظار الفنان
+  const artist = await getArtist(username)
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Playlists artistID={artist.id} />
+      </Suspense>
+    </>
+  )
+}
+```
+
+```jsx filename="app/artist/[username]/page.js" switcher
+// ...
+
+async function Playlists({ artistID }) {
+  // انتظار قوائم التشغيل
+  const playlists = await getArtistPlaylists(artistID)
+
+  return (
+    <ul>
+      {playlists.map((playlist) => (
+        <li key={playlist.id}>{playlist.name}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default async function Page({ params: { username } }) {
+  // انتظار الفنان
+  const artist = await getArtist(username)
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Playlists artistID={artist.id} />
+      </Suspense>
+    </>
+  )
+}
+```
+
+في مثل هذه الحالات، يمكنك استخدام [`loading.js`](/docs/app/building-your-application/routing/loading-ui-and-streaming) (لقطاعات المسار) أو [React `<Suspense>`](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) (للمكونات المتداخلة) لعرض حالة تحميل فورية أثناء قيام React ببث النتيجة.
+
+هذا سيمنع حظر المسار بالكامل بسبب جلب البيانات، وسيتمكن المستخدم من التفاعل مع أجزاء الصفحة غير المحظورة.
+
+> **طلبات البيانات المحظورة:**
+>
+> نهج بديل لمنع الشلالات هو جلب البيانات بشكل عام، في جذر تطبيقك، ولكن هذا سيحظر تصيير جميع قطاعات المسار تحته حتى انتهاء تحميل البيانات. يمكن وصف هذا بأنه جلب بيانات "كل شيء أو لا شيء". إما أن يكون لديك جميع البيانات لصفحتك أو تطبيقك، أو لا شيء.
+>
+> أي طلبات جلب مع `await` ستحظر التصيير وجلب البيانات للشجرة بأكملها تحتها، ما لم يتم تغليفها في حدود `<Suspense>` أو استخدام `loading.js`. نهج آخر هو استخدام [جلب البيانات المتوازي](#parallel-data-fetching) أو [نمط التحميل المسبق (preload pattern)](#preloading-data).
+
+### جلب البيانات المتوازي
+
+لجلب البيانات بشكل متوازي، يمكنك بدء الطلبات بفارغ الصبر عن طريق تعريفها خارج المكونات التي تستخدم البيانات، ثم استدعائها من داخل المكون. هذا يوفر الوقت عن طريق بدء كلا الطلبين في نفس الوقت، ومع ذلك، لن يرى المستخدم النتيجة المصروفة حتى يتم حل كلا الوعدين.
+
+في المثال أدناه، يتم تعريف الدالتين `getArtist` و `getArtistAlbums` خارج مكون `Page`، ثم يتم استدعاؤهما داخل المكون، وننتظر حل كلا الوعدين:
+
+```tsx filename="app/artist/[username]/page.tsx" switcher
+import Albums from './albums'
+
+async function getArtist(username: string) {
+  const res = await fetch(`https://api.example.com/artist/${username}`)
+  return res.json()
+}
+
+async function getArtistAlbums(username: string) {
+  const res = await fetch(`https://api.example.com/artist/${username}/albums`)
+  return res.json()
+}
+
+export default async function Page({
+  params: { username },
+}: {
+  params: { username: string }
+}) {
+  // بدء كلا الطلبين بشكل متوازي
+  const artistData = getArtist(username)
+  const albumsData = getArtistAlbums(username)
+
+  // انتظار حل الوعدين
+  const [artist, albums] = await Promise.all([artistData, albumsData])
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Albums list={albums}></Albums>
+    </>
+  )
+}
+```
+
+```jsx filename="app/artist/[username]/page.js" switcher
+import Albums from './albums'
+
+async function getArtist(username) {
+  const res = await fetch(`https://api.example.com/artist/${username}`)
+  return res.json()
+}
+
+async function getArtistAlbums(username) {
+  const res = await fetch(`https://api.example.com/artist/${username}/albums`)
+  return res.json()
+}
+
+export default async function Page({ params: { username } }) {
+  // بدء كلا الطلبين بشكل متوازي
+  const artistData = getArtist(username)
+  const albumsData = getArtistAlbums(username)
+
+  // انتظار حل الوعدين
+  const [artist, albums] = await Promise.all([artistData, albumsData])
+
+  return (
+    <>
+      <h1>{artist.name}</h1>
+      <Albums list={albums}></Albums>
+    </>
+  )
+}
+```
+
+لتحسين تجربة المستخدم، يمكنك إضافة [حدود التعليق (Suspense Boundary)](/docs/app/building-your-application/routing/loading-ui-and-streaming) لتقسيم عمل التصيير وعرض جزء من النتيجة في أسرع وقت ممكن.
+
+## التحميل المسبق للبيانات
+
+طريقة أخرى لمنع الشلالات هي استخدام نمط التحميل المسبق. يمكنك إنشاء دالة `preload` اختيارية لتحسين جلب البيانات المتوازي بشكل أكبر. مع هذا النهج، ليس عليك تمرير الوعود كخصائص. يمكن أن يكون لدالة `preload` أي اسم لأنها نمط وليس واجهة برمجة تطبيقات (API).
+
+```tsx filename="components/Item.tsx" switcher
+import { getItem } from '@/utils/get-item'
+
+export const preload = (id: string) => {
+  // void تقوم بتقييم التعبير المعطى وإرجاع undefined
+  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
+  void getItem(id)
+}
+export default async function Item({ id }: { id: string }) {
+  const result = await getItem(id)
+  // ...
+}
+```
+
+```jsx filename="components/Item.js" switcher
+import { getItem } from '@/utils/get-item'
+
+export const preload = (id) => {
+  // void تقوم بتقييم التعبير المعطى وإرجاع undefined
+  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
+  void getItem(id)
+}
+export default async function Item({ id }) {
+  const result = await getItem(id)
+  // ...
+}
+```
+
+```tsx filename="app/item/[id]/page.tsx" switcher
+import Item, { preload, checkIsAvailable } from '@/components/Item'
+
+export default async function Page({
+  params: { id },
+}: {
+  params: { id: string }
+}) {
+  // بدء تحميل بيانات العنصر
+  preload(id)
+  // تنفيذ مهمة غير متزامنة أخرى
+  const isAvailable = await checkIsAvailable()
+
+  return isAvailable ? <Item id={id} /> : null
+}
+```
+
+```jsx filename="app/item/[id]/page.js" switcher
+import Item, { preload, checkIsAvailable } from '@/components/Item'
+
+export default async function Page({ params: { id } }) {
+  // بدء تحميل بيانات العنصر
+  preload(id)
+  // تنفيذ مهمة غير متزامنة أخرى
+  const isAvailable = await checkIsAvailable()
+
+  return isAvailable ? <Item id={id} /> : null
+}
+```
+
+### استخدام `cache` من React، `server-only`، ونمط التحميل المسبق
+
+يمكنك الجمع بين دالة `cache`، ونمط `preload`، وحزمة `server-only` لإنشاء أداة جلب بيانات يمكن استخدامها في جميع أنحاء تطبيقك.
+
+```ts filename="utils/get-item.ts" switcher
+import { cache } from 'react'
+import 'server-only'
+
+export const preload = (id: string) => {
+  void getItem(id)
+}
+
+export const getItem = cache(async (id: string) => {
+  // ...
+})
+```
+
+```js filename="utils/get-item.js" switcher
+import { cache } from 'react'
+import 'server-only'
+
+export const preload = (id) => {
+  void getItem(id)
+}
+
+export const getItem = cache(async (id) => {
+  // ...
+})
+```
+
+مع هذا النهج، يمكنك جلب البيانات بفارغ الصبر، وتخزين الردود، وضمان أن جلب البيانات هذا [يحدث فقط على الخادم](/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment).
+
+يمكن استخدام صادرات `utils/get-item` بواسطة التخطيطات أو الصفحات أو المكونات الأخرى لمنحها التحكم في وقت جلب بيانات العنصر.
+
+> **معلومة مفيدة:**
+>
+> - نوصي باستخدام حزمة [`server-only`](/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment) للتأكد من عدم استخدام دوال جلب بيانات الخادم على العميل أبدًا.
+
+## منع تسرب البيانات الحساسة إلى العميل
+
+نوصي باستخدام واجهات تلويث React، [`taintObjectReference`](https://react.dev/reference/react/experimental_taintObjectReference) و [`taintUniqueValue`](https://react.dev/reference/react/experimental_taintUniqueValue)، لمنع تمرير كائنات كاملة أو قيم حساسة إلى العميل.
+
+لتمكين التلويث في تطبيقك، اضبط خيار `experimental.taint` في إعدادات Next.js على `true`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    taint: true,
+  },
+}
+```
+
+ثم مرر الكائن أو القيمة التي تريد تلويثها إلى دوال `experimental_taintObjectReference` أو `experimental_taintUniqueValue`:
+
+```ts filename="app/utils.ts" switcher
+import { queryDataFromDB } from './api'
+import {
+  experimental_taintObjectReference,
+  experimental_taintUniqueValue,
+} from 'react'
+
+export async function getUserData() {
+  const data = await queryDataFromDB()
+  experimental_taintObjectReference(
+    'لا تمرر كائن المستخدم بالكامل إلى العميل',
+    data
+  )
+  experimental_taintUniqueValue(
+    "لا تمرر عنوان المستخدم إلى العميل",
+    data,
+    data.address
+  )
+  return data
+}
+```
+
+```js filename="app/utils.js" switcher
+import { queryDataFromDB } from './api'
+import {
+  experimental_taintObjectReference,
+  experimental_taintUniqueValue,
+} from 'react'
+
+export async function getUserData() {
+  const data = await queryDataFromDB()
+  experimental_taintObjectReference(
+    'لا تمرر كائن المستخدم بالكامل إلى العميل',
+    data
+  )
+  experimental_taintUniqueValue(
+    "لا تمرر عنوان المستخدم إلى العميل",
+    data,
+    data.address
+  )
+  return data
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import { getUserData } from './data'
+
+export async function Page() {
+  const userData = getUserData()
+  return (
+    <ClientComponent
+      user={userData} // سيؤدي هذا إلى خطأ بسبب taintObjectReference
+      address={userData.address} // سيؤدي هذا إلى خطأ بسبب taintUniqueValue
+    />
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { getUserData } from './data'
+
+export async function Page() {
+  const userData = await getUserData()
+  return (
+    <ClientComponent
+      user={userData} // سيؤدي هذا إلى خطأ بسبب taintObjectReference
+      address={userData.address} // سيؤدي هذا إلى خطأ بسبب taintUniqueValue
+    />
+  )
+}
+```
+
+تعلم المزيد عن [الأمان وإجراءات الخادم (Security and Server Actions)](https://nextjs.org/blog/security-nextjs-server-components-actions).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/index.mdx
new file mode 100644
index 00000000..4d2999bd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/02-data-fetching/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:34.348Z
+title: جلب البيانات
+description: تعلم كيفية جلب البيانات، تخزينها مؤقتًا، إعادة التحقق منها، وتعديلها باستخدام Next.js.
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/01-server-components.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/01-server-components.mdx
new file mode 100644
index 00000000..1f235540
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/01-server-components.mdx
@@ -0,0 +1,135 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:46:11.493Z
+title: مكونات الخادم (Server Components)
+description: تعلم كيف يمكنك استخدام مكونات React من جانب الخادم لتصيير أجزاء من تطبيقك على الخادم.
+related:
+  description: تعلم كيف يقوم Next.js بتخزين البيانات ونتائج التصيير الثابت.
+  links:
+    - app/building-your-application/caching
+---
+
+تسمح لك مكونات الخادم (Server Components) في React بكتابة واجهة مستخدم يمكن تصييرها واختياريًا تخزينها مؤقتًا على الخادم. في Next.js، يتم تقسيم عمل التصيير حسب مقاطع المسار لتمكين البث (Streaming) والتصيير الجزئي، وهناك ثلاث استراتيجيات مختلفة لتصيير الخادم:
+
+- [التصيير الثابت (Static Rendering)](#static-rendering-default)
+- [التصيير الديناميكي (Dynamic Rendering)](#dynamic-rendering)
+- [البث (Streaming)](#streaming)
+
+ستستعرض هذه الصفحة كيفية عمل مكونات الخادم، متى يمكنك استخدامها، واستراتيجيات تصيير الخادم المختلفة.
+
+## فوائد التصيير على الخادم
+
+هناك عدة فوائد لتنفيذ عمل التصيير على الخادم، بما في ذلك:
+
+- **جلب البيانات**: تسمح لك مكونات الخادم بنقل جلب البيانات إلى الخادم، أقرب إلى مصدر البيانات. هذا يمكن أن يحسن الأداء عن طريق تقليل الوقت المستغرق لجلب البيانات المطلوبة للتصيير، وعدد الطلبات التي يحتاج العميل إلى إجرائها.
+- **الأمان**: تسمح لك مكونات الخادم بالاحتفاظ بالبيانات الحساسة والمنطق على الخادم، مثل الرموز المميزة (Tokens) ومفاتيح API، دون خطر كشفها للعميل.
+- **التخزين المؤقت**: عن طريق التصيير على الخادم، يمكن تخزين النتيجة مؤقتًا وإعادة استخدامها في الطلبات اللاحقة وعبر المستخدمين. هذا يمكن أن يحسن الأداء ويقلل التكلفة عن طريق تقليل كمية التصيير وجلب البيانات المطلوبة في كل طلب.
+- **الأداء**: تمنحك مكونات الخادم أدوات إضافية لتحسين الأداء من الأساس. على سبيل المثال، إذا بدأت بتطبيق مكون بالكامل من مكونات العميل (Client Components)، فإن نقل الأجزاء غير التفاعلية من واجهة المستخدم إلى مكونات الخادم يمكن أن يقلل من كمية JavaScript المطلوبة على جانب العميل. هذا مفيد للمستخدمين الذين لديهم اتصال إنترنت أبطأ أو أجهزة أقل قوة، حيث يكون هناك كمية أقل من JavaScript للتنزيل والتحليل والتنفيذ في المتصفح.
+- **تحميل الصفحة الأولي و[أول رسم للمحتوى (FCP)](https://web.dev/fcp/)**: على الخادم، يمكننا إنشاء HTML للسماح للمستخدمين بمشاهدة الصفحة على الفور، دون انتظار تنزيل العميل وتحليل وتنفيذ JavaScript المطلوب لتصيير الصفحة.
+- **تحسين محركات البحث (SEO) وإمكانية المشاركة على الشبكات الاجتماعية**: يمكن استخدام HTML المصير بواسطة برامج الزحف لمحركات البحث لفهرسة صفحاتك وبرامج الزحف للشبكات الاجتماعية لإنشاء معاينات بطاقات اجتماعية لصفحاتك.
+- **البث (Streaming)**: تسمح لك مكونات الخادم بتقسيم عمل التصيير إلى أجزاء وبثها إلى العميل عندما تصبح جاهزة. هذا يسمح للمستخدم برؤية أجزاء من الصفحة في وقت مبكر دون الحاجة إلى انتظار اكتمال تصيير الصفحة بالكامل على الخادم.
+
+## استخدام مكونات الخادم في Next.js
+
+بشكل افتراضي، يستخدم Next.js مكونات الخادم. هذا يسمح لك بتنفيذ تصيير الخادم تلقائيًا دون أي تكوين إضافي، ويمكنك اختيار استخدام مكونات العميل عند الحاجة، راجع [مكونات العميل](/docs/app/building-your-application/rendering/client-components).
+
+## كيف يتم تصيير مكونات الخادم؟
+
+على الخادم، يستخدم Next.js واجهات برمجة تطبيقات React لتنسيق التصيير. يتم تقسيم عمل التصيير إلى أجزاء: حسب مقاطع المسار الفردية و[حدود Suspense](https://react.dev/reference/react/Suspense).
+
+يتم تصيير كل جزء في خطوتين:
+
+1. تقوم React بتصيير مكونات الخادم إلى تنسيق بيانات خاص يسمى **حمل مكون خادم React (RSC Payload)**.
+2. يستخدم Next.js حمل RSC وتعليمات JavaScript لمكون العميل لتصيير **HTML** على الخادم.
+
+{/* رسم توضيحي للتصيير */}
+
+ثم، على العميل:
+
+1. يتم استخدام HTML لعرض معاينة سريعة غير تفاعلية للمسار على الفور - هذا فقط لتحميل الصفحة الأولي.
+2. يتم استخدام حمل مكونات خادم React لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
+3. يتم استخدام تعليمات JavaScript ل[ترطيب (Hydrate)](https://react.dev/reference/react-dom/client/hydrateRoot) مكونات العميل وجعل التطبيق تفاعليًا.
+
+> **ما هو حمل مكون خادم React (RSC)؟**
+>
+> حمل RSC هو تمثيل ثنائي مضغوط لشجرة مكونات خادم React المصير. يتم استخدامه بواسطة React على العميل لتحديث DOM للمتصفح. يحتوي حمل RSC على:
+>
+> - نتيجة تصيير مكونات الخادم
+> - عناصر نائبة لمكان تصيير مكونات العميل ومراجع لملفات JavaScript الخاصة بها
+> - أي خصائص (props) تم تمريرها من مكون خادم إلى مكون عميل
+
+## استراتيجيات تصيير الخادم
+
+هناك ثلاثة أنواع فرعية لتصيير الخادم: ثابت وديناميكي وبث.
+
+### التصيير الثابت (الافتراضي)
+
+{/* رسم توضيحي للتصيير الثابت */}
+
+مع التصيير الثابت، يتم تصيير المسارات في **وقت البناء**، أو في الخلفية بعد [إعادة التحقق من البيانات](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data). يتم تخزين النتيجة مؤقتًا ويمكن دفعها إلى [شبكة توصيل المحتوى (CDN)](https://developer.mozilla.org/docs/Glossary/CDN). هذا التحسين يسمح لك بمشاركة نتيجة عمل التصيير بين المستخدمين وطلبات الخادم.
+
+التصيير الثابت مفيد عندما يكون للمسار بيانات غير مخصصة للمستخدم ويمكن معرفتها في وقت البناء، مثل مقالة مدونة ثابتة أو صفحة منتج.
+
+### التصيير الديناميكي
+
+{/* رسم توضيحي للتصيير الديناميكي */}
+
+مع التصيير الديناميكي، يتم تصيير المسارات لكل مستخدم في **وقت الطلب**.
+
+التصيير الديناميكي مفيد عندما يكون للمسار بيانات مخصصة للمستخدم أو معلومات لا يمكن معرفتها إلا في وقت الطلب، مثل ملفات تعريف الارتباط (Cookies) أو معلمات البحث في URL.
+
+> **مسارات ديناميكية مع بيانات مخزنة مؤقتًا**
+>
+> في معظم المواقع، لا تكون المسارات ثابتة بالكامل أو ديناميكية بالكامل - إنها سلسلة متصلة. على سبيل المثال، يمكن أن يكون لديك صفحة تجارة إلكترونية تستخدم بيانات منتج مخزنة مؤقتًا يتم إعادة التحقق منها على فترات، ولكن لديها أيضًا بيانات عملاء غير مخزنة مؤقتًا ومخصصة.
+>
+> في Next.js، يمكن أن يكون لديك مسارات مصير ديناميكيًا تحتوي على بيانات مخزنة وغير مخزنة مؤقتًا. هذا لأن حمل RSC والبيانات يتم تخزينها مؤقتًا بشكل منفصل. هذا يسمح لك باختيار التصيير الديناميكي دون القلق بشأن تأثير الأداء لجلب جميع البيانات في وقت الطلب.
+>
+> تعلم المزيد عن [تخزين المسار الكامل](/docs/app/building-your-application/caching#full-route-cache) و[تخزين البيانات](/docs/app/building-your-application/caching#data-cache).
+
+#### التحول إلى التصيير الديناميكي
+
+أثناء التصيير، إذا تم اكتشاف [وظيفة ديناميكية](#dynamic-functions) أو [طلب بيانات غير مخزن مؤقتًا](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching)، سيتحول Next.js إلى تصيير المسار بالكامل ديناميكيًا. يلخص هذا الجدول كيف تؤثر الوظائف الديناميكية وتخزين البيانات على ما إذا كان المسار مصيرًا ثابتًا أو ديناميكيًا:
+
+| الوظائف الديناميكية | البيانات       | المسار                |
+| ----------------- | ---------- | -------------------- |
+| لا                | مخزنة مؤقتًا     | مصير ثابتًا  |
+| نعم               | مخزنة مؤقتًا     | مصير ديناميكيًا |
+| لا                | غير مخزنة مؤقتًا | مصير ديناميكيًا |
+| نعم               | غير مخزنة مؤقتًا | مصير ديناميكيًا |
+
+في الجدول أعلاه، لكي يكون المسار ثابتًا بالكامل، يجب أن تكون جميع البيانات مخزنة مؤقتًا. ومع ذلك، يمكن أن يكون لديك مسار مصير ديناميكيًا يستخدم كلاً من جلب البيانات المخزنة وغير المخزنة مؤقتًا.
+
+كمطور، لا تحتاج إلى الاختيار بين التصيير الثابت والديناميكي حيث سيختار Next.js تلقائيًا أفضل استراتيجية تصيير لكل مسار بناءً على الميزات وواجهات برمجة التطبيقات المستخدمة. بدلاً من ذلك، تختار متى [تخزن أو تعيد التحقق من بيانات محددة](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)، وقد تختار [بث](#streaming) أجزاء من واجهة المستخدم الخاصة بك.
+
+#### الوظائف الديناميكية
+
+تعتمد الوظائف الديناميكية على معلومات لا يمكن معرفتها إلا في وقت الطلب مثل ملفات تعريف الارتباط للمستخدم أو رؤوس الطلبات الحالية أو معلمات البحث في URL. في Next.js، هذه الوظائف الديناميكية هي:
+
+- **[`cookies()`](/docs/app/api-reference/functions/cookies) و [`headers()`](/docs/app/api-reference/functions/headers)**: استخدام هذه في مكون خادم سيحول المسار بالكامل إلى تصيير ديناميكي في وقت الطلب.
+- **[`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional)**: استخدام خاصية `searchParams` في [صفحة](/docs/app/api-reference/file-conventions/page) سيحول الصفحة إلى تصيير ديناميكي في وقت الطلب.
+
+استخدام أي من هذه الوظائف سيحول المسار بالكامل إلى تصيير ديناميكي في وقت الطلب.
+
+### البث (Streaming)
+
+<Image
+  alt="رسم توضيحي يظهر التوازي في مقاطع المسار أثناء البث، يظهر جلب البيانات والتصيير وترطيب الأجزاء الفردية."
+  srcLight="/docs/light/sequential-parallel-data-fetching.png"
+  srcDark="/docs/dark/sequential-parallel-data-fetching.png"
+  width="1600"
+  height="525"
+/>
+
+يسمح لك البث بتصيير واجهة المستخدم تدريجيًا من الخادم. يتم تقسيم العمل إلى أجزاء وبثها إلى العميل عندما تصبح جاهزة. هذا يسمح للمستخدم برؤية أجزاء من الصفحة على الفور، قبل اكتمال تصيير المحتوى بالكامل.
+
+<Image
+  alt="رسم توضيحي يظهر صفحة مصير جزئيًا على العميل، مع واجهة مستخدم تحميل للأجزاء التي يتم بثها."
+  srcLight="/docs/light/server-rendering-with-streaming.png"
+  srcDark="/docs/dark/server-rendering-with-streaming.png"
+  width="1600"
+  height="785"
+/>
+
+البث مدمج في موجه تطبيق Next.js افتراضيًا. هذا يساعد في تحسين أداء تحميل الصفحة الأولي، وكذلك واجهة المستخدم التي تعتمد على جلب بيانات أبطأ مما قد يعيق تصيير المسار بالكامل. على سبيل المثال، التقييمات على صفحة منتج.
+
+يمكنك بدء بث مقاطع المسار باستخدام `loading.js` ومكونات واجهة المستخدم مع [React Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming). راجع قسم [واجهة مستخدم التحميل والبث](/docs/app/building-your-application/routing/loading-ui-and-streaming) لمزيد من المعلومات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/02-client-components.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/02-client-components.mdx
new file mode 100644
index 00000000..391d8713
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/02-client-components.mdx
@@ -0,0 +1,108 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:45:14.921Z
+title: مكونات العميل (Client Components)
+description: تعلم كيفية استخدام مكونات العميل (Client Components) لتقديم أجزاء من تطبيقك على جانب العميل.
+---
+
+تسمح لك مكونات العميل (Client Components) بكتابة واجهة مستخدم تفاعلية يتم [تقديمها مسبقًا على الخادم](https://github.com/reactwg/server-components/discussions/4) ويمكن استخدام جافاسكريبت على جانب العميل للتشغيل في المتصفح.
+
+ستستعرض هذه الصفحة كيفية عمل مكونات العميل، وكيفية تقديمها، ومتى قد تستخدمها.
+
+## فوائد التقديم على جانب العميل
+
+هناك عدة فوائد لإجراء عمل التقديم على جانب العميل، بما في ذلك:
+
+- **التفاعلية**: يمكن لمكونات العميل استخدام الحالة (state)، والتأثيرات (effects)، ومستمعي الأحداث (event listeners)، مما يعني أنها يمكنها تقديم ردود فعل فورية للمستخدم وتحديث واجهة المستخدم.
+- **واجهات برمجة المتصفح (Browser APIs)**: يمكن لمكونات العميل الوصول إلى واجهات برمجة المتصفح، مثل [تحديد الموقع الجغرافي](https://developer.mozilla.org/docs/Web/API/Geolocation_API) أو [التخزين المحلي](https://developer.mozilla.org/docs/Web/API/Window/localStorage).
+
+## استخدام مكونات العميل في Next.js
+
+لاستخدام مكونات العميل، يمكنك إضافة توجيه React [`"use client"`](https://react.dev/reference/react/use-client) في أعلى الملف، قبل عمليات الاستيراد.
+
+يستخدم `"use client"` لتعريف [حد فاصل](/docs/app/building-your-application/rendering#network-boundary) بين وحدات مكون الخادم ومكون العميل. هذا يعني أنه من خلال تعريف `"use client"` في ملف، فإن جميع الوحدات الأخرى المستوردة إليه، بما في ذلك المكونات الفرعية، تعتبر جزءًا من حزمة العميل.
+
+```tsx filename="app/counter.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/counter.js" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  )
+}
+```
+
+يظهر الرسم البياني أدناه أن استخدام `onClick` و `useState` في مكون متداخل (`toggle.js`) سيؤدي إلى حدوث خطأ إذا لم يتم تعريف توجيه `"use client"`. هذا لأنه افتراضيًا، جميع المكونات في App Router هي مكونات خادم حيث لا تتوفر هذه الواجهات. من خلال تعريف توجيه `"use client"` في `toggle.js`، يمكنك إخبار React بالدخول إلى حد العميل حيث تتوفر هذه الواجهات.
+
+<Image
+  alt="Use Client Directive and Network Boundary"
+  srcLight="/docs/light/use-client-directive.png"
+  srcDark="/docs/dark/use-client-directive.png"
+  width="1600"
+  height="1320"
+/>
+
+> **تعريف نقاط دخول متعددة لـ `use client`**:
+>
+> يمكنك تعريف نقاط دخول متعددة لـ "use client" في شجرة مكونات React. هذا يسمح لك بتقسيم تطبيقك إلى عدة حزم عميل.
+>
+> ومع ذلك، لا يحتاج `"use client"` إلى تعريفه في كل مكون يحتاج إلى تقديمه على العميل. بمجرد تعريف الحد الفاصل، تعتبر جميع المكونات الفرعية والوحدات المستوردة إليه جزءًا من حزمة العميل.
+
+## كيف يتم تقديم مكونات العميل؟
+
+في Next.js، يتم تقديم مكونات العميل بشكل مختلف اعتمادًا على ما إذا كان الطلب جزءًا من تحميل صفحة كامل (زيارة أولية لتطبيقك أو إعادة تحميل الصفحة التي يتم تشغيلها عن طريق تحديث المتصفح) أو تنقل لاحق.
+
+### تحميل صفحة كامل
+
+لتحسين تحميل الصفحة الأولي، سوف يستخدم Next.js واجهات React لتقديم معاينة HTML ثابتة على الخادم لكل من مكونات العميل والخادم. هذا يعني أنه عندما يزور المستخدم تطبيقك لأول مرة، سيرى محتوى الصفحة على الفور، دون الحاجة إلى انتظار قيام العميل بتنزيل وتحليل وتنفيذ حزمة جافاسكريبت لمكون العميل.
+
+على الخادم:
+
+1. يقوم React بتقديم مكونات الخادم إلى تنسيق بيانات خاص يسمى **حمل مكون خادم React (RSC Payload)**، والذي يتضمن إشارات إلى مكونات العميل.
+2. يستخدم Next.js حمل RSC وتعليمات جافاسكريبت لمكون العميل لتقديم **HTML** للمسار على الخادم.
+
+ثم على العميل:
+
+1. يتم استخدام HTML لعرض معاينة أولية سريعة غير تفاعلية للمسار على الفور.
+2. يتم استخدام حمل مكونات خادم React لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
+3. يتم استخدام تعليمات جافاسكريبت [لترطيب (hydrate)](https://react.dev/reference/react-dom/client/hydrateRoot) مكونات العميل وجعل واجهة المستخدم الخاصة بها تفاعلية.
+
+> **ما هو الترطيب (hydration)؟**
+>
+> الترطيب هو عملية إرفاق مستمعي الأحداث بـ DOM، لجعل HTML الثابت تفاعليًا. خلف الكواليس، يتم الترطيب باستخدام واجهة React [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot).
+
+### التنقلات اللاحقة
+
+في التنقلات اللاحقة، يتم تقديم مكونات العميل بالكامل على العميل، دون HTML المقدم من الخادم.
+
+هذا يعني أنه يتم تنزيل وتحليل حزمة جافاسكريبت لمكون العميل. بمجرد أن تصبح الحزمة جاهزة، سيستخدم React حمل RPC لتنسيق أشجار مكونات العميل والخادم، وتحديث DOM.
+
+## العودة إلى بيئة الخادم
+
+في بعض الأحيان، بعد تعريف حد `"use client"`، قد ترغب في العودة إلى بيئة الخادم. على سبيل المثال، قد ترغب في تقليل حجم حزمة العميل، أو جلب البيانات على الخادم، أو استخدام واجهة برمجة تطبيقات متوفرة فقط على الخادم.
+
+يمكنك الاحتفاظ بالشفرة على الخادم حتى لو كانت نظريًا متداخلة داخل مكونات العميل عن طريق دمج مكونات العميل والخادم و[أفعال الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations). راجع صفحة [أنماط التكوين (Composition Patterns)](/docs/app/building-your-application/rendering/composition-patterns) لمزيد من المعلومات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx
new file mode 100644
index 00000000..7ba70583
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx
@@ -0,0 +1,560 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:47:08.106Z
+title: أنماط تكوين المكونات من جانب الخادم والعميل
+nav_title: أنماط التكوين
+description: أنماط موصى بها لاستخدام مكونات الخادم والعميل.
+---
+
+عند بناء تطبيقات React، ستحتاج إلى التفكير في الأجزاء التي يجب أن تُعرض على الخادم أو العميل. هذه الصفحة تغطي بعض أنماط التكوين الموصى بها عند استخدام مكونات الخادم والعميل.
+
+## متى تستخدم مكونات الخادم والعميل؟
+
+إليك ملخص سريع لحالات الاستخدام المختلفة لمكونات الخادم والعميل:
+
+| ما الذي تريد فعله؟                                                                 | مكون الخادم         | مكون العميل         |
+| ---------------------------------------------------------------------------------- | ------------------- | ------------------- |
+| جلب البيانات                                                                       | <Check size={18} /> | <Cross size={18} /> |
+| الوصول إلى موارد الخلفية (مباشرة)                                                  | <Check size={18} /> | <Cross size={18} /> |
+| الاحتفاظ بمعلومات حساسة على الخادم (رموز الوصول، مفاتيح API، إلخ)                  | <Check size={18} /> | <Cross size={18} /> |
+| الاحتفاظ بتبعيات كبيرة على الخادم / تقليل جافاسكريبت من جانب العميل                | <Check size={18} /> | <Cross size={18} /> |
+| إضافة تفاعلات ومستمعي الأحداث (`onClick()`, `onChange()`, إلخ)                      | <Cross size={18} /> | <Check size={18} /> |
+| استخدام الحالة وتأثيرات دورة الحياة (`useState()`, `useReducer()`, `useEffect()`, إلخ) | <Cross size={18} /> | <Check size={18} /> |
+| استخدام واجهات برمجة التطبيقات الخاصة بالمتصفح فقط                                   | <Cross size={18} /> | <Check size={18} /> |
+| استخدام خطافات مخصصة تعتمد على الحالة، التأثيرات، أو واجهات برمجة التطبيقات الخاصة بالمتصفح | <Cross size={18} /> | <Check size={18} /> |
+| استخدام [مكونات React الكلاسيكية](https://react.dev/reference/react/Component)      | <Cross size={18} /> | <Check size={18} /> |
+
+## أنماط مكونات الخادم
+
+قبل اختيار العرض من جانب العميل، قد ترغب في القيام ببعض الأعمال على الخادم مثل جلب البيانات، أو الوصول إلى قاعدة البيانات أو خدمات الخلفية.
+
+إليك بعض الأنماط الشائعة عند العمل مع مكونات الخادم:
+
+### مشاركة البيانات بين المكونات
+
+عند جلب البيانات على الخادم، قد تكون هناك حالات تحتاج فيها إلى مشاركة البيانات بين مكونات مختلفة. على سبيل المثال، قد يكون لديك تخطيط وصفحة يعتمدان على نفس البيانات.
+
+بدلاً من استخدام [سياق React](https://react.dev/learn/passing-data-deeply-with-context) (غير متاح على الخادم) أو تمرير البيانات كخصائص، يمكنك استخدام [`fetch`](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch) أو دالة `cache` في React لجلب نفس البيانات في المكونات التي تحتاجها، دون القلق بشأن تكرار طلبات البيانات نفسها. هذا لأن React يوسع `fetch` لتخزين طلبات البيانات تلقائيًا، ويمكن استخدام دالة `cache` عندما لا يكون `fetch` متاحًا.
+
+تعلم المزيد عن [التخزين المؤقت](/docs/app/building-your-application/caching#request-memoization) في React.
+
+### إبقاء كود الخادم فقط خارج بيئة العميل
+
+نظرًا لأن وحدات جافاسكريبت يمكن مشاركتها بين مكونات الخادم والعميل، فمن الممكن أن يتسلل الكود المخصص للخادم فقط إلى العميل.
+
+على سبيل المثال، خذ دالة جلب البيانات التالية:
+
+```ts filename="lib/data.ts" switcher
+export async function getData() {
+  const res = await fetch('https://external-service.com/data', {
+    headers: {
+      authorization: process.env.API_KEY,
+    },
+  })
+
+  return res.json()
+}
+```
+
+```js filename="lib/data.js" switcher
+export async function getData() {
+  const res = await fetch('https://external-service.com/data', {
+    headers: {
+      authorization: process.env.API_KEY,
+    },
+  })
+
+  return res.json()
+}
+```
+
+للوهلة الأولى، يبدو أن `getData` تعمل على كل من الخادم والعميل. ومع ذلك، تحتوي هذه الدالة على `API_KEY`، المكتوبة بنية أن يتم تنفيذها على الخادم فقط.
+
+نظرًا لأن متغير البيئة `API_KEY` ليس مسبوقًا بـ `NEXT_PUBLIC`، فهو متغير خاص يمكن الوصول إليه فقط على الخادم. لمنع تسرب متغيرات البيئة إلى العميل، يستبدل Next.js متغيرات البيئة الخاصة بسلسلة فارغة.
+
+نتيجة لذلك، على الرغم من أنه يمكن استيراد وتنفيذ `getData()` على العميل، إلا أنها لن تعمل كما هو متوقع. وفي حين أن جعل المتغير عامًا سيجعل الدالة تعمل على العميل، قد لا ترغب في الكشف عن معلومات حساسة للعميل.
+
+لمنع هذا النوع من الاستخدام غير المقصود لكود الخادم على العميل، يمكننا استخدام حزمة `server-only` لإعطاء مطورين آخرين خطأ في وقت البناء إذا قاموا بالصدفة باستيراد إحدى هذه الوحدات إلى مكون عميل.
+
+لاستخدام `server-only`، قم أولاً بتثبيت الحزمة:
+
+```bash filename="Terminal"
+npm install server-only
+```
+
+ثم استورد الحزمة في أي وحدة تحتوي على كود خاص بالخادم فقط:
+
+```js filename="lib/data.js"
+import 'server-only'
+
+export async function getData() {
+  const res = await fetch('https://external-service.com/data', {
+    headers: {
+      authorization: process.env.API_KEY,
+    },
+  })
+
+  return res.json()
+}
+```
+
+الآن، أي مكون عميل يستورد `getData()` سيتلقى خطأ في وقت البناء يوضح أن هذه الوحدة يمكن استخدامها فقط على الخادم.
+
+يمكن استخدام الحزمة المقابلة `client-only` لوضع علامة على الوحدات التي تحتوي على كود خاص بالعميل فقط - على سبيل المثال، الكود الذي يصل إلى كائن `window`.
+
+### استخدام الحزم والموفّرين من طرف ثالث
+
+نظرًا لأن مكونات الخادم هي ميزة جديدة في React، فإن الحزم والموفّرين من طرف ثالث في النظام البيئي بدأوا للتو في إضافة توجيه `"use client"` إلى المكونات التي تستخدم ميزات خاصة بالعميل مثل `useState`، `useEffect`، و `createContext`.
+
+اليوم، العديد من المكونات من حزم `npm` التي تستخدم ميزات خاصة بالعميل لا تحتوي بعد على التوجيه. هذه المكونات من طرف ثالث ستعمل كما هو متوقع داخل مكونات العميل لأن لديها توجيه `"use client"`، لكنها لن تعمل داخل مكونات الخادم.
+
+على سبيل المثال، لنفترض أنك قمت بتثبيت حزمة افتراضية `acme-carousel` التي تحتوي على مكون `<Carousel />`. يستخدم هذا المكون `useState`، لكنه لا يحتوي بعد على توجيه `"use client"`.
+
+إذا استخدمت `<Carousel />` داخل مكون عميل، فسيعمل كما هو متوقع:
+
+```tsx filename="app/gallery.tsx" switcher
+'use client'
+
+import { useState } from 'react'
+import { Carousel } from 'acme-carousel'
+
+export default function Gallery() {
+  let [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)}>عرض الصور</button>
+
+      {/* يعمل، لأن Carousel مستخدم داخل مكون عميل */}
+      {isOpen && <Carousel />}
+    </div>
+  )
+}
+```
+
+```jsx filename="app/gallery.js" switcher
+'use client'
+
+import { useState } from 'react'
+import { Carousel } from 'acme-carousel'
+
+export default function Gallery() {
+  let [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)}>عرض الصور</button>
+
+      {/* يعمل، لأن Carousel مستخدم داخل مكون عميل */}
+      {isOpen && <Carousel />}
+    </div>
+  )
+}
+```
+
+ومع ذلك، إذا حاولت استخدامه مباشرة داخل مكون خادم، فسترى خطأ:
+
+```tsx filename="app/page.tsx" switcher
+import { Carousel } from 'acme-carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>عرض الصور</p>
+
+      {/* خطأ: لا يمكن استخدام `useState` داخل مكونات الخادم */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { Carousel } from 'acme-carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>عرض الصور</p>
+
+      {/* خطأ: لا يمكن استخدام `useState` داخل مكونات الخادم */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+هذا لأن Next.js لا يعرف أن `<Carousel />` يستخدم ميزات خاصة بالعميل.
+
+لإصلاح هذا، يمكنك تغليف المكونات من طرف ثالث التي تعتمد على ميزات خاصة بالعميل داخل مكونات العميل الخاصة بك:
+
+```tsx filename="app/carousel.tsx" switcher
+'use client'
+
+import { Carousel } from 'acme-carousel'
+
+export default Carousel
+```
+
+```jsx filename="app/carousel.js" switcher
+'use client'
+
+import { Carousel } from 'acme-carousel'
+
+export default Carousel
+```
+
+الآن، يمكنك استخدام `<Carousel />` مباشرة داخل مكون خادم:
+
+```tsx filename="app/page.tsx" switcher
+import Carousel from './carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>عرض الصور</p>
+
+      {/* يعمل، لأن Carousel هو مكون عميل */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Carousel from './carousel'
+
+export default function Page() {
+  return (
+    <div>
+      <p>عرض الصور</p>
+
+      {/* يعمل، لأن Carousel هو مكون عميل */}
+      <Carousel />
+    </div>
+  )
+}
+```
+
+لا نتوقع أن تحتاج إلى تغليف معظم المكونات من طرف ثالث لأنك على الأرجح ستستخدمها داخل مكونات العميل. ومع ذلك، أحد الاستثناءات هو الموفّرين، لأنهم يعتمدون على حالة وسياق React، وعادة ما تكون هناك حاجة إليهم في جذر التطبيق. [تعلم المزيد عن موفّري السياق من طرف ثالث أدناه](#using-context-providers).
+
+#### استخدام موفّري السياق
+
+عادةً ما يتم عرض موفّري السياق بالقرب من جذر التطبيق لمشاركة اهتمامات عامة، مثل السمة الحالية. نظرًا لأن [سياق React](https://react.dev/learn/passing-data-deeply-with-context) غير مدعوم في مكونات الخادم، فإن محاولة إنشاء سياق في جذر تطبيقك ستؤدي إلى حدوث خطأ:
+
+```tsx filename="app/layout.tsx" switcher
+import { createContext } from 'react'
+
+// createContext غير مدعوم في مكونات الخادم
+export const ThemeContext = createContext({})
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { createContext } from 'react'
+
+// createContext غير مدعوم في مكونات الخادم
+export const ThemeContext = createContext({})
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+      </body>
+    </html>
+  )
+}
+```
+
+لإصلاح هذا، قم بإنشاء سياقك وعرض موفّره داخل مكون عميل:
+
+```tsx filename="app/theme-provider.tsx" switcher
+'use client'
+
+import { createContext } from 'react'
+
+export const ThemeContext = createContext({})
+
+export default function ThemeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+}
+```
+
+```jsx filename="app/theme-provider.js" switcher
+'use client'
+
+import { createContext } from 'react'
+
+export const ThemeContext = createContext({})
+
+export default function ThemeProvider({ children }) {
+  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
+}
+```
+
+سيتمكن مكون الخادم الخاص بك الآن من عرض موفّرك مباشرة لأنه تم وضع علامة عليه كمكون عميل:
+
+```tsx filename="app/layout.tsx" switcher
+import ThemeProvider from './theme-provider'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import ThemeProvider from './theme-provider'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+مع عرض الموفّر في الجذر، ستتمكن جميع مكونات العميل الأخرى في تطبيقك من استهلاك هذا السياق.
+
+> **ملاحظة جيدة**: يجب عليك عرض الموفّرين في أعمق نقطة ممكنة في الشجرة - لاحظ كيف أن `ThemeProvider` يلف فقط `{children}` بدلاً من مستند `<html>` بأكمله. هذا يجعل من الأسهل لـ Next.js تحسين الأجزاء الثابتة من مكونات الخادم الخاصة بك.
+
+#### نصائح لمؤلفي المكتبات
+
+بطريقة مماثلة، يمكن لمؤلفي المكتبات الذين ينشئون حزمًا ليستخدمها مطورون آخرون استخدام توجيه `"use client"` لوضع علامة على نقاط دخول العميل في حزمتهم. هذا يسمح لمستخدمي الحزمة باستيراد مكونات الحزمة مباشرة إلى مكونات الخادم الخاصة بهم دون الحاجة إلى إنشاء حد تغليف.
+
+يمكنك تحسين حزمتك باستخدام ['use client' أعمق في الشجرة](#moving-client-components-down-the-tree)، مما يسمح للوحدات المستوردة بأن تكون جزءًا من الرسم البياني لوحدة مكون الخادم.
+
+من الجدير بالذكر أن بعض أدوات الحزم قد تزيل توجيهات `"use client"`. يمكنك العثور على مثال لكيفية تكوين esbuild لتضمين توجيه `"use client"` في مستودعات [React Wrap Balancer](https://github.com/shuding/react-wrap-balancer/blob/main/tsup.config.ts#L10-L13) و [Vercel Analytics](https://github.com/vercel/analytics/blob/main/packages/web/tsup.config.js#L26-L30).
+
+## مكونات العميل
+
+### نقل مكونات العميل لأسفل الشجرة
+
+لتقليل حجم حزمة جافاسكريبت للعميل، نوصي بنقل مكونات العميل لأسفل شجرة المكونات الخاصة بك.
+
+على سبيل المثال، قد يكون لديك تخطيط يحتوي على عناصر ثابتة (مثل الشعار، الروابط، إلخ) وشريط بحث تفاعلي يستخدم الحالة.
+
+بدلاً من جعل التخطيط بأكمله مكون عميل، انقل المنطق التفاعلي إلى مكون عميل (مثل `<SearchBar />`) واحتفظ بتخطيطك كمكون خادم. هذا يعني أنك لست مضطرًا لإرسال جميع جافاسكريبت المكون للتخطيط إلى العميل.
+
+```tsx filename="app/layout.tsx" switcher
+// SearchBar هو مكون عميل
+import SearchBar from './searchbar'
+// Logo هو مكون خادم
+import Logo from './logo'
+
+// التخطيط هو مكون خادم افتراضيًا
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <nav>
+        <Logo />
+        <SearchBar />
+      </nav>
+      <main>{children}</main>
+    </>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+// SearchBar هو مكون عميل
+import SearchBar from './searchbar'
+// Logo هو مكون خادم
+import Logo from './logo'
+
+// التخطيط هو مكون خادم افتراضيًا
+export default function Layout({ children }) {
+  return (
+    <>
+      <nav>
+        <Logo />
+        <SearchBar />
+      </nav>
+      <main>{children}</main>
+    </>
+  )
+}
+```
+
+### تمرير الخصائص من الخادم إلى مكونات العميل (التسلسل)
+
+إذا قمت بجلب البيانات في مكون خادم، فقد ترغب في تمرير البيانات كخصائص إلى مكونات العميل. يجب أن تكون الخصائص الممررة من الخادم إلى مكونات العميل [قابلة للتسلسل](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values) بواسطة React.
+
+إذا كانت مكونات العميل الخاصة بك تعتمد على بيانات غير قابلة للتسلسل، يمكنك [جلب البيانات على العميل باستخدام مكتبة طرف ثالث](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-third-party-libraries) أو على الخادم عبر [معالج المسار](/docs/app/building-your-application/routing/route-handlers).
+
+## تداخل مكونات الخادم والعميل
+
+عند تداخل مكونات الخادم (Server Components) ومكونات العميل (Client Components)، قد يكون من المفيد تصوير واجهة المستخدم الخاصة بك كشجرة من المكونات. بدءًا من [تخطيط الجذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) (root layout) والذي هو مكون خادم، يمكنك بعد ذلك عرض بعض الأشجار الفرعية للمكونات على جانب العميل عن طريق إضافة التوجيه `"use client"`.
+
+{/* رسم بياني - تداخل */}
+
+داخل أشجار العميل الفرعية هذه، لا يزال بإمكانك تضمين مكونات الخادم أو استدعاء إجراءات الخادم (Server Actions)، ولكن هناك بعض الأشياء التي يجب وضعها في الاعتبار:
+
+- خلال دورة حياة الطلب والاستجابة، ينتقل الكود الخاص بك من الخادم إلى العميل. إذا كنت بحاجة إلى الوصول إلى بيانات أو موارد على الخادم أثناء وجودك على العميل، فستقوم بعمل طلب **جديد** إلى الخادم - وليس التبديل ذهابًا وإيابًا.
+- عند إجراء طلب جديد إلى الخادم، يتم عرض جميع مكونات الخادم أولاً، بما في ذلك تلك المتداخلة داخل مكونات العميل. ستشكل نتيجة العرض (RSC Payload) مراجعًا لمواقع مكونات العميل. بعد ذلك، على العميل، يستخدم React حمولة RSC لتنسيق مكونات الخادم والعميل في شجرة واحدة.
+
+{/* رسم بياني */}
+
+- نظرًا لأن مكونات العميل يتم عرضها بعد مكونات الخادم، لا يمكنك استيراد مكون خادم إلى وحدة مكون عميل (لأن ذلك سيتطلب طلبًا جديدًا إلى الخادم). بدلاً من ذلك، يمكنك تمرير مكون خادم كـ `props` إلى مكون عميل. راجع الأقسام [النمط غير المدعوم](#unsupported-pattern-importing-server-components-into-client-components) و[النمط المدعوم](#supported-pattern-passing-server-components-to-client-components-as-props) أدناه.
+
+### النمط غير المدعوم: استيراد مكونات الخادم إلى مكونات العميل
+
+النمط التالي غير مدعوم. لا يمكنك استيراد مكون خادم إلى مكون عميل:
+
+```tsx filename="app/client-component.tsx" switcher highlight={4,17}
+'use client'
+
+// لا يمكنك استيراد مكون خادم إلى مكون عميل.
+import ServerComponent from './Server-Component'
+
+export default function ClientComponent({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+
+      <ServerComponent />
+    </>
+  )
+}
+```
+
+```jsx filename="app/client-component.js" switcher highlight={3,13}
+'use client'
+
+// لا يمكنك استيراد مكون خادم إلى مكون عميل.
+import ServerComponent from './Server-Component'
+
+export default function ClientComponent({ children }) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+
+      <ServerComponent />
+    </>
+  )
+}
+```
+
+### النمط المدعوم: تمرير مكونات الخادم إلى مكونات العميل كـ Props
+
+النمط التالي مدعوم. يمكنك تمرير مكونات الخادم كـ prop إلى مكون عميل.
+
+النمط الشائع هو استخدام خاصية React `children` لإنشاء "فتحة" (slot) في مكون العميل الخاص بك.
+
+في المثال أدناه، `<ClientComponent>` يقبل خاصية `children`:
+
+```tsx filename="app/client-component.tsx" switcher highlight={6,15}
+'use client'
+
+import { useState } from 'react'
+
+export default function ClientComponent({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+      {children}
+    </>
+  )
+}
+```
+
+```jsx filename="app/client-component.js" switcher highlight={5,12}
+'use client'
+
+import { useState } from 'react'
+
+export default function ClientComponent({ children }) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+
+      {children}
+    </>
+  )
+}
+```
+
+`<ClientComponent>` لا يعرف أن `children` سيتم ملؤها لاحقًا بنتيجة مكون خادم. المسؤولية الوحيدة لـ `<ClientComponent>` هي تحديد **مكان** وضع `children` في النهاية.
+
+في مكون خادم أب، يمكنك استيراد كل من `<ClientComponent>` و `<ServerComponent>` وتمرير `<ServerComponent>` كـ child لـ `<ClientComponent>`:
+
+```tsx filename="app/page.tsx"  highlight={11} switcher
+// هذا النمط يعمل:
+// يمكنك تمرير مكون خادم كـ child أو prop لمكون عميل.
+import ClientComponent from './client-component'
+import ServerComponent from './server-component'
+
+// الصفحات في Next.js هي مكونات خادم افتراضيًا
+export default function Page() {
+  return (
+    <ClientComponent>
+      <ServerComponent />
+    </ClientComponent>
+  )
+}
+```
+
+```jsx filename="app/page.js" highlight={11} switcher
+// هذا النمط يعمل:
+// يمكنك تمرير مكون خادم كـ child أو prop لمكون عميل.
+import ClientComponent from './client-component'
+import ServerComponent from './server-component'
+
+// الصفحات في Next.js هي مكونات خادم افتراضيًا
+export default function Page() {
+  return (
+    <ClientComponent>
+      <ServerComponent />
+    </ClientComponent>
+  )
+}
+```
+
+بهذه الطريقة، يتم فصل `<ClientComponent>` و `<ServerComponent>` ويمكن عرضهما بشكل مستقل. في هذه الحالة، يمكن عرض child `<ServerComponent>` على الخادم، قبل وقت طويل من عرض `<ClientComponent>` على العميل.
+
+> **جيد أن تعرف:**
+>
+> - تم استخدام نمط "رفع المحتوى لأعلى" (lifting content up) لتجنب إعادة عرض مكون child متداخل عند إعادة عرض مكون parent.
+> - لا تقتصر على خاصية `children`. يمكنك استخدام أي prop لتمرير JSX.
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/04-edge-and-nodejs-runtimes.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/04-edge-and-nodejs-runtimes.mdx
new file mode 100644
index 00000000..6c7cc9db
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/04-edge-and-nodejs-runtimes.mdx
@@ -0,0 +1,86 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:49.652Z
+title: أنظمة التشغيل Edge و Node.js
+description: تعرف على أنظمة التشغيل القابلة للتبديل (Edge و Node.js) في Next.js.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+في سياق Next.js، يشير نظام التشغيل (Runtime) إلى مجموعة المكتبات وواجهات البرمجة والوظائف العامة المتاحة لشفرة التطبيق أثناء التنفيذ.
+
+على الخادم، هناك نظامان لتشغيل الأجزاء المختلفة من كود التطبيق:
+
+- **نظام تشغيل Node.js** (الافتراضي) لديه إمكانية الوصول إلى جميع واجهات برمجة Node.js والحزم المتوافقة من النظام البيئي.
+- **نظام تشغيل Edge** مبني على [واجهات برمجة الويب (Web APIs)](/docs/app/api-reference/edge).
+
+## الفروق بين أنظمة التشغيل
+
+هناك العديد من الاعتبارات عند اختيار نظام التشغيل. يوضح هذا الجدول الفروق الرئيسية بلمحة سريعة. إذا كنت تريد تحليلًا أكثر تعمقًا للفروق، راجع الأقسام أدناه.
+
+|                                                                                                                                       | Node   | Serverless | Edge             |
+| ------------------------------------------------------------------------------------------------------------------------------------- | ------ | ---------- | ---------------- |
+| الإقلاع البارد (Cold Boot)                                                                                                            | /      | عادي       | منخفض            |
+| [بث HTTP](/docs/app/building-your-application/routing/loading-ui-and-streaming)                                                       | نعم    | نعم        | نعم              |
+| الإدخال/الإخراج (IO)                                                                                                                  | الكل   | الكل       | `fetch`          |
+| قابلية التوسع (Scalability)                                                                                                           | /      | عالية      | الأعلى           |
+| الأمان                                                                                                                                | عادي   | عالي       | عالي             |
+| زمن الاستجابة (Latency)                                                                                                               | عادي   | منخفض      | الأقل            |
+| حزم npm                                                                                                                               | الكل   | الكل       | مجموعة أصغر      |
+| [التصيير الثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default)                            | نعم    | نعم        | لا               |
+| [التصيير الديناميكي](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)                               | نعم    | نعم        | نعم              |
+| [إعادة التحقق من البيانات مع `fetch`](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) | نعم    | نعم        | نعم              |
+
+### نظام تشغيل Edge
+
+في Next.js، نظام تشغيل Edge الخفيف الوزن هو مجموعة فرعية من واجهات برمجة Node.js المتاحة.
+
+نظام تشغيل Edge مثالي إذا كنت بحاجة إلى تقديم محتوى ديناميكي مخصص بزمن استجابة منخفض باستخدام دوال صغيرة وبسيطة. تأتي سرعة نظام تشغيل Edge من استخدامه الحد الأدنى من الموارد، ولكن هذا قد يكون مقيدًا في العديد من السيناريوهات.
+
+على سبيل المثال، لا يمكن أن يتجاوز الكود المنفذ في نظام تشغيل Edge [على Vercel بين 1 ميجابايت و4 ميجابايت](https://vercel.com/docs/concepts/limits/overview#edge-middleware-and-edge-functions-size)، هذا الحد يشمل الحزم المستوردة والخطوط والملفات، وسيختلف اعتمادًا على بنية النشر الخاصة بك. بالإضافة إلى ذلك، لا يدعم نظام تشغيل Edge جميع واجهات برمجة Node.js مما يعني أن بعض حزم `npm` قد لا تعمل. على سبيل المثال، "Module not found: Can't resolve 'fs'" أو أخطاء مماثلة. نوصي باستخدام نظام تشغيل Node.js إذا كنت بحاجة إلى استخدام هذه الواجهات أو الحزم.
+
+### نظام تشغيل Node.js
+
+يوفر لك استخدام نظام تشغيل Node.js إمكانية الوصول إلى جميع واجهات برمجة Node.js، وجميع حزم npm التي تعتمد عليها. ومع ذلك، فإنه ليس سريعًا في البدء مثل المسارات التي تستخدم نظام تشغيل Edge.
+
+سيحتاج نشر تطبيق Next.js على خادم Node.js إلى إدارة وتوسيع وتهيئة البنية التحتية الخاصة بك. بدلاً من ذلك، يمكنك التفكير في نشر تطبيق Next.js على منصة بدون خادم مثل Vercel، والتي ستعالج هذا نيابة عنك.
+
+### Node.js بدون خادم (Serverless)
+
+الحل بدون خادم مثالي إذا كنت بحاجة إلى حل قابل للتوسع يمكنه التعامل مع أحمال حسابية أكثر تعقيدًا من نظام تشغيل Edge. مع دوال Serverless على Vercel، على سبيل المثال، يكون الحجم الإجمالي للشفرة [50 ميجابايت](https://vercel.com/docs/concepts/limits/overview#serverless-function-size) بما في ذلك الحزم المستوردة والخطوط والملفات.
+
+الجانب السلبي مقارنة بالمسارات التي تستخدم [Edge](https://vercel.com/docs/concepts/functions/edge-functions) هو أن دوال Serverless قد تستغرق مئات الميلي ثانية للبدء قبل أن تبدأ في معالجة الطلبات. اعتمادًا على مقدار حركة المرور التي يتلقاها موقعك، قد يحدث هذا بشكل متكرر حيث أن الدوال ليست "دافئة" بشكل متكرر.
+
+<AppOnly>
+
+## أمثلة
+
+### خيار نظام التشغيل للقطعة (Segment Runtime Option)
+
+يمكنك تحديد نظام تشغيل لقطعات المسار الفردية في تطبيق Next.js الخاص بك. للقيام بذلك، [قم بتعريف متغير يسمى `runtime` وقم بتصديره](/docs/app/api-reference/file-conventions/route-segment-config). يجب أن يكون المتغير سلسلة نصية، ويجب أن تكون قيمته إما `'nodejs'` أو `'edge'`.
+
+يوضح المثال التالي قطعة مسار صفحة تقوم بتصدير `runtime` بقيمة `'edge'`:
+
+```tsx filename="app/page.tsx" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+```jsx filename="app/page.js" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+يمكنك أيضًا تعريف `runtime` على مستوى التخطيط (layout)، مما سيجعل جميع المسارات تحت التخطيط تعمل على نظام تشغيل Edge:
+
+```tsx filename="app/layout.tsx" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+```jsx filename="app/layout.js" switcher
+export const runtime = 'edge' // 'nodejs' (الافتراضي) | 'edge'
+```
+
+إذا لم يتم تعيين نظام تشغيل القطعة، فسيتم استخدام نظام تشغيل `nodejs` الافتراضي. لا تحتاج إلى استخدام خيار `runtime` إذا كنت لا تخطط للتبديل من نظام تشغيل Node.js.
+
+</AppOnly>
+
+> يرجى الرجوع إلى [وثائق Node.js](https://nodejs.org/docs/latest/api/) و[وثائق Edge](/docs/app/api-reference/edge) للحصول على القائمة الكاملة لواجهات البرمجة المتاحة. يمكن لكلا نظامي التشغيل أيضًا دعم [البث (streaming)](/docs/app/building-your-application/routing/loading-ui-and-streaming) اعتمادًا على بنية النشر الخاصة بك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/index.mdx
new file mode 100644
index 00000000..5cdd2869
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/03-rendering/index.mdx
@@ -0,0 +1,80 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:13.454Z
+title: التصيير (Rendering)
+description: تعرف على الفروق بين بيئات التصيير في Next.js، الاستراتيجيات، وبيئات التشغيل.
+---
+
+التحويل الذي تقوم به من الكود الذي تكتبه إلى واجهات المستخدم يُعرف بالتصيير. تسمح لك React وNext.js بإنشاء تطبيقات ويب هجينة حيث يمكن تصيير أجزاء من كودك على الخادم أو العميل. سيساعدك هذا القسم على فهم الفروق بين بيئات التصيير هذه، الاستراتيجيات، وبيئات التشغيل.
+
+## الأساسيات
+
+للبدء، من المفيد أن تكون على دراية بثلاثة مفاهيم أساسية في الويب:
+
+- [بيئات التصيير](#rendering-environments) التي يمكن تنفيذ كود التطبيق فيها: الخادم والعميل.
+- [دورة الطلب-الاستجابة](#request-response-lifecycle) التي تبدأ عندما يزور المستخدم أو يتفاعل مع تطبيقك.
+- [حدود الشبكة](#network-boundary) التي تفصل بين كود الخادم والعميل.
+
+### بيئات التصيير
+
+هناك بيئتان يمكن فيهما تصيير تطبيقات الويب: العميل والخادم.
+
+<Image
+  alt="بيئات العميل والخادم"
+  srcLight="/docs/light/client-and-server-environments.png"
+  srcDark="/docs/dark/client-and-server-environments.png"
+  width="1600"
+  height="672"
+/>
+
+- **العميل** يشير إلى المتصفح على جهاز المستخدم الذي يرسل طلبًا إلى خادم للحصول على كود التطبيق. ثم يحول الاستجابة من الخادم إلى واجهة مستخدم.
+- **الخادم** يشير إلى الكمبيوتر في مركز البيانات الذي يخزن كود التطبيق الخاص بك، ويتلقى الطلبات من العميل، ويرسل استجابة مناسبة.
+
+تاريخيًا، كان على المطورين استخدام لغات مختلفة (مثل JavaScript، PHP) وأطر عمل عند كتابة الكود للخادم والعميل. مع React، يمكن للمطورين استخدام **نفس اللغة** (JavaScript)، و**نفس إطار العمل** (مثل Next.js أو أي إطار عمل تختاره). هذه المرونة تتيح لك كتابة الكود بسلاسة لكلا البيئتين دون الحاجة إلى التبديل بين السياقات.
+
+ومع ذلك، لكل بيئة مجموعة خاصة من الإمكانيات والقيود. لذلك، فإن الكود الذي تكتبه للخادم والعميل ليس دائمًا متطابقًا. هناك عمليات معينة (مثل جلب البيانات أو إدارة حالة المستخدم) تكون أكثر ملاءمة لبيئة عن الأخرى.
+
+فهم هذه الفروق هو مفتاح الاستخدام الفعال لـ React وNext.js. سنغطي الفروق وحالات الاستخدام بمزيد من التفصيل في صفحات [مكونات الخادم](/docs/app/building-your-application/rendering/server-components) و[مكونات العميل](/docs/app/building-your-application/rendering/client-components)، لكن الآن دعونا نواصل بناء أساسنا.
+
+### دورة الطلب-الاستجابة
+
+بشكل عام، تتبع جميع مواقع الويب نفس **دورة الطلب-الاستجابة**:
+
+1. **إجراء المستخدم:** يتفاعل المستخدم مع تطبيق الويب. يمكن أن يكون هذا النقر على رابط، إرسال نموذج، أو كتابة عنوان URL مباشرة في شريط عنوان المتصفح.
+2. **طلب HTTP:** يرسل العميل [طلب HTTP](https://developer.mozilla.org/docs/Web/HTTP) إلى الخادم يحتوي على المعلومات الضرورية حول الموارد المطلوبة، الطريقة المستخدمة (مثل `GET`، `POST`)، وبيانات إضافية إذا لزم الأمر.
+3. **الخادم:** يعالج الخادم الطلب ويستجيب بالموارد المناسبة. قد تتضمن هذه العملية عدة خطوات مثل التوجيه، جلب البيانات، إلخ.
+4. **استجابة HTTP:** بعد معالجة الطلب، يرسل الخادم استجابة HTTP إلى العميل. تحتوي هذه الاستجابة على رمز الحالة (الذي يخبر العميل ما إذا كان الطلب ناجحًا أم لا) والموارد المطلوبة (مثل HTML، CSS، JavaScript، موارد ثابتة، إلخ).
+5. **العميل:** يحلل العميل الموارد لعرض واجهة المستخدم.
+6. **إجراء المستخدم:** بمجرد عرض واجهة المستخدم، يمكن للمستخدم التفاعل معها، وتبدأ الدورة مرة أخرى.
+
+جزء كبير من بناء تطبيق ويب هجين هو تحديد كيفية تقسيم العمل في الدورة، وأين يتم وضع حدود الشبكة.
+
+### حدود الشبكة
+
+في تطوير الويب، **حدود الشبكة** هي خط مفاهيمي يفصل بين البيئات المختلفة. على سبيل المثال، العميل والخادم، أو الخادم ومخزن البيانات.
+
+{/* رسم توضيحي: حدود الشبكة */}
+
+في React، تختار أين تضع حدود الشبكة بين العميل والخادم حيثما كان ذلك أكثر منطقية.
+
+خلف الكواليس، يتم تقسيم العمل إلى جزأين: **رسم بياني لوحدة العميل** و**رسم بياني لوحدة الخادم**. يحتوي رسم وحدة الخادم على جميع المكونات التي يتم تصييرها على الخادم، ويحتوي رسم وحدة العميل على جميع المكونات التي يتم تصييرها على العميل.
+
+{/* رسم توضيحي: رسومات وحدات العميل والخادم */}
+
+قد يكون من المفيد التفكير في رسومات الوحدات كتمثيل مرئي لكيفية اعتماد الملفات في تطبيقك على بعضها البعض.
+
+{/* على سبيل المثال، إذا كان لديك ملف يسمى `Page.jsx` يستورد ملفًا يسمى `Button.jsx` على الخادم، فسيبدو رسم الوحدة كما يلي: - رسم توضيحي - */}
+
+يمكنك استخدام اصطلاح React `"use client"` لتحديد الحدود. هناك أيضًا اصطلاح `"use server"`، الذي يخبر React بتنفيذ بعض الأعمال الحسابية على الخادم.
+
+## بناء تطبيقات هجينة
+
+عند العمل في هذه البيئات، من المفيد التفكير في تدفق الكود في تطبيقك على أنه **أحادي الاتجاه**. بمعنى آخر، أثناء الاستجابة، يتدفق كود التطبيق في اتجاه واحد: من الخادم إلى العميل.
+
+{/* رسم توضيحي: تدفق الاستجابة */}
+
+إذا كنت بحاجة إلى الوصول إلى الخادم من العميل، فإنك ترسل طلبًا **جديدًا** إلى الخادم بدلاً من إعادة استخدام نفس الطلب. هذا يجعل من الأسهل فهم مكان تصيير المكونات وأين يتم وضع حدود الشبكة.
+
+عمليًا، يشجع هذا النموذج المطورين على التفكير فيما يريدون تنفيذه على الخادم أولاً، قبل إرسال النتيجة إلى العميل وجعل التطبيق تفاعليًا.
+
+سيصبح هذا المفهوم أوضح عندما ننظر إلى كيفية [دمج مكونات العميل والخادم](/docs/app/building-your-application/rendering/composition-patterns) في نفس شجرة المكونات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/04-caching/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/04-caching/index.mdx
new file mode 100644
index 00000000..88c9bf4f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/04-caching/index.mdx
@@ -0,0 +1,585 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:49:46.520Z
+title: التخزين المؤقت في Next.js
+nav_title: التخزين المؤقت
+description: نظرة عامة على آليات التخزين المؤقت في Next.js.
+---
+
+يحسن Next.js أداء تطبيقك ويقلل التكاليف عن طريق تخزين أعمال التصيير وطلبات البيانات مؤقتًا. توفر هذه الصفحة نظرة متعمقة على آليات التخزين المؤقت في Next.js، وواجهات برمجة التطبيقات (APIs) التي يمكنك استخدامها لتكوينها، وكيفية تفاعلها مع بعضها البعض.
+
+> **معلومة مفيدة**: هذه الصفحة تساعدك على فهم كيفية عمل Next.js تحت الغطاء ولكنها **ليست** معرفة أساسية لتكون منتجًا باستخدام Next.js. يتم تحديد معظم استدلالات التخزين المؤقت في Next.js من خلال استخدامك لواجهة برمجة التطبيقات ولها إعدادات افتراضية لأفضل أداء مع تكوين صفري أو ضئيل.
+
+## نظرة عامة
+
+إليك نظرة عامة عالية المستوى على آليات التخزين المؤقت المختلفة والغرض منها:
+
+| الآلية                                   | ماذا                     | أين    | الغرض                                         | المدة                        |
+| ------------------------------------------- | -------------------------- | ------ | ----------------------------------------------- | ------------------------------- |
+| [تخزين الطلبات مؤقتًا](#request-memoization) | قيم الإرجاع للوظائف | الخادم | إعادة استخدام البيانات في شجرة مكونات React           | دورة حياة الطلب           |
+| [ذاكرة التخزين المؤقت للبيانات](#data-cache)                   | البيانات                       | الخادم | تخزين البيانات عبر طلبات المستخدم والنشرات | دائمة (يمكن إعادة التحقق منها) |
+| [ذاكرة التخزين المؤقت الكاملة للطريق](#full-route-cache)       | HTML وحمولة RSC       | الخادم | تقليل تكلفة التصيير وتحسين الأداء   | دائمة (يمكن إعادة التحقق منها) |
+| [ذاكرة التخزين المؤقت للموجه](#router-cache)               | حمولة RSC                | العميل | تقليل طلبات الخادم أثناء التنقل            | جلسة المستخدم أو زمنية      |
+
+بشكل افتراضي، سيخزن Next.js أكبر قدر ممكن لتحسين الأداء وتقليل التكلفة. هذا يعني أن الطرق يتم **تصييرها بشكل ثابت** وطلبات البيانات **مخزنة مؤقتًا** إلا إذا اخترت عدم ذلك. يوضح الرسم البياني أدناه سلوك التخزين المؤقت الافتراضي: عندما يتم تصيير طريق بشكل ثابت في وقت البناء وعند زيارة طريق ثابت لأول مرة.
+
+<Image
+  alt="رسم بياني يوضح سلوك التخزين المؤقت الافتراضي في Next.js للآليات الأربع، مع HIT و MISS و SET في وقت البناء وعند زيارة الطريق لأول مرة."
+  srcLight="/docs/light/caching-overview.png"
+  srcDark="/docs/dark/caching-overview.png"
+  width="1600"
+  height="1179"
+/>
+
+يتغير سلوك التخزين المؤقت اعتمادًا على ما إذا كان الطريق يتم تصييره بشكل ثابت أو ديناميكي، وما إذا كانت البيانات مخزنة مؤقتًا أو غير مخزنة، وما إذا كان الطلب جزءًا من زيارة أولية أو تنقل لاحق. اعتمادًا على حالة الاستخدام الخاصة بك، يمكنك تكوين سلوك التخزين المؤقت لطرق وطلبات بيانات فردية.
+
+## تخزين الطلبات مؤقتًا (Request Memoization)
+
+يمتد React واجهة برمجة التطبيقات [`fetch`](#fetch) لتخزين الطلبات التي لها نفس URL والخيارات تلقائيًا **مؤقتًا**. هذا يعني أنه يمكنك استدعاء دالة fetch لنفس البيانات في أماكن متعددة في شجرة مكونات React مع تنفيذها مرة واحدة فقط.
+
+<Image
+  alt="طلبات Fetch المكررة"
+  srcLight="/docs/light/deduplicated-fetch-requests.png"
+  srcDark="/docs/dark/deduplicated-fetch-requests.png"
+  width="1600"
+  height="857"
+/>
+
+على سبيل المثال، إذا كنت بحاجة إلى استخدام نفس البيانات عبر طريق (مثل في Layout و Page ومكونات متعددة)، لا يتعين عليك جلب البيانات في أعلى الشجرة، وإعادة توجيه الخصائص بين المكونات. بدلاً من ذلك، يمكنك جلب البيانات في المكونات التي تحتاجها دون القلق بشأن الآثار المترتبة على الأداء لإنشاء طلبات متعددة عبر الشبكة لنفس البيانات.
+
+```tsx filename="app/example.tsx" switcher
+async function getItem() {
+  // يتم تخزين دالة `fetch` تلقائيًا مؤقتًا والنتيجة
+  // مخزنة مؤقتًا
+  const res = await fetch('https://.../item/1')
+  return res.json()
+}
+
+// يتم استدعاء هذه الدالة مرتين، ولكن يتم تنفيذها فقط في المرة الأولى
+const item = await getItem() // cache MISS
+
+// يمكن أن يكون الاستدعاء الثاني في أي مكان في طريقك
+const item = await getItem() // cache HIT
+```
+
+```jsx filename="app/example.js" switcher
+async function getItem() {
+  // يتم تخزين دالة `fetch` تلقائيًا مؤقتًا والنتيجة
+  // مخزنة مؤقتًا
+  const res = await fetch('https://.../item/1')
+  return res.json()
+}
+
+// يتم استدعاء هذه الدالة مرتين، ولكن يتم تنفيذها فقط في المرة الأولى
+const item = await getItem() // cache MISS
+
+// يمكن أن يكون الاستدعاء الثاني في أي مكان في طريقك
+const item = await getItem() // cache HIT
+```
+
+**كيف يعمل تخزين الطلبات مؤقتًا**
+
+<Image
+  alt="رسم بياني يوضح كيفية عمل تخزين fetch مؤقتًا أثناء تصيير React."
+  srcLight="/docs/light/request-memoization.png"
+  srcDark="/docs/dark/request-memoization.png"
+  width="1600"
+  height="742"
+/>
+
+- أثناء تصيير طريق، عند استدعاء طلب معين لأول مرة، لن تكون نتيجته في الذاكرة وسيكون cache `MISS`.
+- لذلك، سيتم تنفيذ الدالة، وسيتم جلب البيانات من المصدر الخارجي، وسيتم تخزين النتيجة في الذاكرة.
+- استدعاءات الدالة اللاحقة للطلب في نفس تمرير التصيير ستكون cache `HIT`، وسيتم إرجاع البيانات من الذاكرة دون تنفيذ الدالة.
+- بمجرد اكتمال تصيير الطريق وتمرير التصيير، يتم "إعادة تعيين" الذاكرة ومسح جميع إدخالات تخزين الطلبات مؤقتًا.
+
+> **معلومة مفيدة**:
+>
+> - تخزين الطلبات مؤقتًا هو ميزة React وليست ميزة Next.js. تم تضمينها هنا لإظهار كيفية تفاعلها مع آليات التخزين المؤقت الأخرى.
+> - التخزين المؤقت ينطبق فقط على طريقة `GET` في طلبات `fetch`.
+> - التخزين المؤقت ينطبق فقط على شجرة مكونات React، وهذا يعني:
+>   - ينطبق على طلبات `fetch` في `generateMetadata` و `generateStaticParams` و Layouts و Pages ومكونات الخادم الأخرى.
+>   - لا ينطبق على طلبات `fetch` في Route Handlers لأنها ليست جزءًا من شجرة مكونات React.
+> - للحالات التي لا تكون فيها `fetch` مناسبة (مثل بعض عملاء قواعد البيانات أو عملاء CMS أو عملاء GraphQL)، يمكنك استخدام [دالة `cache` في React](#react-cache-function) لتخزين الدوال مؤقتًا.
+
+### المدة
+
+يستمر التخزين المؤقت طوال مدة طلب الخادم حتى تنتهي شجرة مكونات React من التصيير.
+
+### إعادة التحقق
+
+نظرًا لأن التخزين المؤقت لا يتم مشاركته عبر طلبات الخادم وينطبق فقط أثناء التصيير، فلا حاجة لإعادة التحقق منه.
+
+### عدم المشاركة
+
+ينطبق التخزين المؤقت فقط على طريقة `GET` في طلبات `fetch`، ولا يتم تخزين الطرق الأخرى مثل `POST` و `DELETE` مؤقتًا. هذا السلوك الافتراضي هو تحسين من React ولا نوصي بعدم المشاركة فيه.
+
+لإدارة الطلبات الفردية، يمكنك استخدام خاصية [`signal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal) من [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController). ومع ذلك، هذا لن يؤدي إلى عدم تخزين الطلبات مؤقتًا، بل سيؤدي إلى إلغاء الطلبات الجارية.
+
+```js filename="app/example.js"
+const { signal } = new AbortController()
+fetch(url, { signal })
+```
+
+## ذاكرة التخزين المؤقت للبيانات (Data Cache)
+
+يحتوي Next.js على ذاكرة تخزين مؤقت مدمجة للبيانات تحافظ على نتيجة جلب البيانات عبر **طلبات الخادم** الواردة و**النشرات**. هذا ممكن لأن Next.js يمتد واجهة برمجة التطبيقات `fetch` الأصلية للسماح لكل طلب على الخادم بتعيين دلالات التخزين المؤقت الخاصة به.
+
+> **معلومة مفيدة**: في المتصفح، يشير خيار `cache` لـ `fetch` إلى كيفية تفاعل الطلب مع ذاكرة التخزين المؤقت HTTP للمتصفح، في Next.js، يشير خيار `cache` إلى كيفية تفاعل طلب الخادم مع ذاكرة التخزين المؤقت للبيانات على الخادم.
+
+بشكل افتراضي، يتم **تخزين** طلبات البيانات التي تستخدم `fetch` مؤقتًا. يمكنك استخدام خيارات [`cache`](#fetch-optionscache) و [`next.revalidate`](#fetch-optionsnextrevalidate) لـ `fetch` لتكوين سلوك التخزين المؤقت.
+
+**كيف تعمل ذاكرة التخزين المؤقت للبيانات**
+
+<Image
+  alt="رسم بياني يوضح كيفية تفاعل طلبات fetch المخزنة وغير المخزنة مع ذاكرة التخزين المؤقت للبيانات. يتم تخزين الطلبات المخزنة في ذاكرة التخزين المؤقت للبيانات، وتخزين الطلبات غير المخزنة من مصدر البيانات، وعدم تخزينها في ذاكرة التخزين المؤقت للبيانات، وتخزينها مؤقتًا."
+  srcLight="/docs/light/data-cache.png"
+  srcDark="/docs/dark/data-cache.png"
+  width="1600"
+  height="661"
+/>
+
+- عند استدعاء طلب `fetch` لأول مرة أثناء التصيير، يتحقق Next.js من ذاكرة التخزين المؤقت للبيانات بحثًا عن استجابة مخزنة.
+- إذا تم العثور على استجابة مخزنة، يتم إرجاعها على الفور و[تخزينها مؤقتًا](#request-memoization).
+- إذا لم يتم العثور على استجابة مخزنة، يتم إجراء الطلب إلى مصدر البيانات، وتخزين النتيجة في ذاكرة التخزين المؤقت للبيانات، وتخزينها مؤقتًا.
+- بالنسبة للبيانات غير المخزنة (مثل `{ cache: 'no-store' }`)، يتم دائمًا جلب النتيجة من مصدر البيانات، وتخزينها مؤقتًا.
+- سواء كانت البيانات مخزنة أو غير مخزنة، يتم دائمًا تخزين الطلبات مؤقتًا لتجنب إنشاء طلبات مكررة لنفس البيانات أثناء تمرير تصيير React.
+
+> **الاختلافات بين ذاكرة التخزين المؤقت للبيانات وتخزين الطلبات مؤقتًا**
+>
+> بينما تساعد آليتا التخزين المؤقت في تحسين الأداء عن طريق إعادة استخدام البيانات المخزنة مؤقتًا، فإن ذاكرة التخزين المؤقت للبيانات تدوم عبر الطلبات الواردة والنشرات، بينما يدوم التخزين المؤقت فقط طوال مدة الطلب.
+>
+> مع التخزين المؤقت، نقلل عدد الطلبات **المكررة** في نفس تمرير التصيير التي يجب أن تعبر حدود الشبكة من خادم التصيير إلى خادم ذاكرة التخزين المؤقت للبيانات (مثل CDN أو Edge Network) أو مصدر البيانات (مثل قاعدة بيانات أو CMS). مع ذاكرة التخزين المؤقت للبيانات، نقلل عدد الطلبات الموجهة إلى مصدر البيانات الأصلي.
+
+### المدة
+
+ذاكرة التخزين المؤقت للبيانات تدوم عبر الطلبات الواردة والنشرات ما لم تقم بإعادة التحقق أو عدم المشاركة.
+
+### إعادة التحقق
+
+يمكن إعادة التحقق من البيانات المخزنة مؤقتًا بطريقتين، باستخدام:
+
+- **إعادة التحقق الزمنية**: إعادة التحقق من البيانات بعد مرور فترة زمنية معينة وإجراء طلب جديد. هذا مفيد للبيانات التي تتغير نادرًا وليست الحداثة فيها حرجة.
+- **إعادة التحقق عند الطلب:** إعادة التحقق من البيانات بناءً على حدث (مثل تقديم نموذج). يمكن أن تستخدم إعادة التحقق عند الطلب نهجًا يعتمد على العلامات أو المسار لإعادة التحقق من مجموعات البيانات دفعة واحدة. هذا مفيد عندما تريد التأكد من عرض أحدث البيانات في أسرع وقت ممكن (مثل عند تحديث المحتوى من نظام إدارة المحتوى الخاص بك).
+
+#### إعادة التحقق الزمنية
+
+لإعادة التحقق من البيانات على فترات زمنية، يمكنك استخدام خيار `next.revalidate` لـ `fetch` لتعيين عمر ذاكرة التخزين المؤقت للمورد (بالثواني).
+
+```js
+// إعادة التحقق على الأكثر كل ساعة
+fetch('https://...', { next: { revalidate: 3600 } })
+```
+
+بدلاً من ذلك، يمكنك استخدام [خيارات تكوين قطاع الطريق](#segment-config-options) لتكوين جميع طلبات `fetch` في قطاع أو للحالات التي لا يمكنك فيها استخدام `fetch`.
+
+**كيف تعمل إعادة التحقق الزمنية**
+
+<Image
+  alt="رسم بياني يوضح كيفية عمل إعادة التحقق الزمنية، بعد فترة إعادة التحقق، يتم إرجاع البيانات القديمة للطلب الأول، ثم يتم إعادة التحقق من البيانات."
+  srcLight="/docs/light/time-based-revalidation.png"
+  srcDark="/docs/dark/time-based-revalidation.png"
+  width="1600"
+  height="1252"
+/>
+
+- عند استدعاء طلب fetch مع `revalidate` لأول مرة، سيتم جلب البيانات من مصدر البيانات الخارجي وتخزينها في ذاكرة التخزين المؤقت للبيانات.
+- أي طلبات يتم استدعاؤها خلال الإطار الزمني المحدد (مثل 60 ثانية) سترجع البيانات المخزنة.
+- بعد الإطار الزمني، سيظل الطلب التالي يرجع البيانات المخزنة (القديمة الآن).
+  - سيؤدي Next.js إلى إعادة التحقق من البيانات في الخلفية.
+  - بمجرد جلب البيانات بنجاح، سيحدث Next.js ذاكرة التخزين المؤقت للبيانات بالبيانات الجديدة.
+  - إذا فشلت إعادة التحقق في الخلفية، سيتم الاحتفاظ بالبيانات السابقة دون تغيير.
+
+هذا مشابه لسلوك [**stale-while-revalidate**](https://web.dev/stale-while-revalidate/).
+
+#### إعادة التحقق عند الطلب
+
+يمكن إعادة التحقق من البيانات عند الطلب عن طريق المسار ([`revalidatePath`](#revalidatepath)) أو عن طريق علامة ذاكرة التخزين المؤقت ([`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)).
+
+**كيف تعمل إعادة التحقق عند الطلب**
+
+<Image
+  alt="رسم بياني يوضح كيفية عمل إعادة التحقق عند الطلب، يتم تحديث ذاكرة التخزين المؤقت للبيانات بالبيانات الجديدة بعد طلب إعادة التحقق."
+  srcLight="/docs/light/on-demand-revalidation.png"
+  srcDark="/docs/dark/on-demand-revalidation.png"
+  width="1600"
+  height="1082"
+/>
+
+- عند استدعاء طلب `fetch` لأول مرة، سيتم جلب البيانات من مصدر البيانات الخارجي وتخزينها في ذاكرة التخزين المؤقت للبيانات.
+- عند تشغيل إعادة التحقق عند الطلب، سيتم مسح إدخالات ذاكرة التخزين المؤقت المناسبة من الذاكرة المؤقتة.
+  - يختلف هذا عن إعادة التحقق الزمنية، التي تحتفظ بالبيانات القديمة في الذاكرة المؤقتة حتى يتم جلب البيانات الجديدة.
+- في المرة التالية التي يتم فيها إجراء طلب، سيكون cache `MISS` مرة أخرى، وسيتم جلب البيانات من مصدر البيانات الخارجي وتخزينها في ذاكرة التخزين المؤقت للبيانات.
+
+### عدم المشاركة
+
+لطلبات جلب البيانات الفردية، يمكنك عدم المشاركة في التخزين المؤقت عن طريق تعيين خيار [`cache`](#fetch-optionscache) إلى `no-store`. هذا يعني أنه سيتم جلب البيانات كلما تم استدعاء `fetch`.
+
+```jsx
+// عدم المشاركة في التخزين المؤقت لطلب `fetch` فردي
+fetch(`https://...`, { cache: 'no-store' })
+```
+
+بدلاً من ذلك، يمكنك أيضًا استخدام [خيارات تكوين قطاع الطريق](#segment-config-options) لعدم المشاركة في التخزين المؤقت لقطاع طريق معين. سيؤثر هذا على جميع طلبات البيانات في قطاع الطريق، بما في ذلك مكتبات الطرف الثالث.
+
+```jsx
+// عدم المشاركة في التخزين المؤقت لجميع طلبات البيانات في قطاع الطريق
+export const dynamic = 'force-dynamic'
+```
+
+> **ملاحظة**: ذاكرة التخزين المؤقت للبيانات متاحة حاليًا فقط في الصفحات/الطرق، وليس في middleware. أي عمليات جلب تتم داخل middleware الخاص بك ستكون غير مخزنة افتراضيًا.
+
+> **ذاكرة التخزين المؤقت للبيانات في Vercel**
+>
+> إذا تم نشر تطبيق Next.js الخاص بك على Vercel، نوصي بقراءة وثائق [ذاكرة التخزين المؤقت للبيانات في Vercel](https://vercel.com/docs/infrastructure/data-cache) لفهم أفضل للميزات الخاصة بـ Vercel.
+
+## ذاكرة التخزين المؤقت الكاملة للطريق (Full Route Cache)
+
+> **المصطلحات ذات الصلة**:
+>
+> قد ترى مصطلحات **التحسين الثابت التلقائي** أو **توليد الموقع الثابت** أو **التصيير الثابت** تُستخدم بالتبادل للإشارة إلى عملية تصيير وتخزين طرق تطبيقك مؤقتًا في وقت البناء.
+
+يُصيِّر Next.js ويخزن الطرق مؤقتًا تلقائيًا في وقت البناء. هذا تحسين يسمح لك بتقديم الطريق المخزن مؤقتًا بدلاً من التصيير على الخادم لكل طلب، مما يؤدي إلى تحميل أسرع للصفحات.
+
+لفهم كيفية عمل ذاكرة التخزين المؤقت الكاملة للطريق، من المفيد النظر في كيفية تعامل React مع التصيير، وكيف يخزن Next.js النتيجة:
+
+### 1. تصيير React على الخادم
+
+على الخادم، يستخدم Next.js واجهات برمجة تطبيقات React لتنظيم التصيير. يتم تقسيم عمل التصيير إلى أجزاء: حسب أجزاء الطريق الفردية وحدود Suspense.
+
+يتم تصيير كل جزء في خطوتين:
+
+1. يُصيِّر React مكونات الخادم إلى تنسيق بيانات خاص مُحسَّن للبث، يُسمى **React Server Component Payload**.
+2. يستخدم Next.js React Server Component Payload وتعليمات JavaScript لمكونات العميل لتصيير **HTML** على الخادم.
+
+هذا يعني أننا لا نحتاج إلى الانتظار حتى يتم تصيير كل شيء قبل تخزين العمل مؤقتًا أو إرسال استجابة. بدلاً من ذلك، يمكننا بث استجابة أثناء اكتمال العمل.
+
+> **ما هو React Server Component Payload؟**
+>
+> React Server Component Payload هو تمثيل ثنائي مضغوط لشجرة مكونات خادم React المصيَّرة. يتم استخدامه بواسطة React على العميل لتحديث DOM للمتصفح. يحتوي React Server Component Payload على:
+>
+> - نتيجة تصيير مكونات الخادم
+> - عناصر نائبة لمكان تصيير مكونات العميل ومراجع لملفات JavaScript الخاصة بها
+> - أي خصائص تم تمريرها من مكون خادم إلى مكون عميل
+>
+> لمعرفة المزيد، راجع وثائق [مكونات الخادم](/docs/app/building-your-application/rendering/server-components).
+
+### 2. تخزين Next.js مؤقتًا على الخادم (ذاكرة التخزين المؤقت الكاملة للطريق)
+
+<Image
+  alt="السلوك الافتراضي لذاكرة التخزين المؤقت الكاملة للطريق، يوضح كيفية تخزين React Server Component Payload و HTML على الخادم للطرق المصيَّرة بشكل ثابت."
+  srcLight="/docs/light/full-route-cache.png"
+  srcDark="/docs/dark/full-route-cache.png"
+  width="1600"
+  height="888"
+/>
+
+السلوك الافتراضي لـ Next.js هو تخزين نتيجة التصيير (React Server Component Payload و HTML) لطريق على الخادم مؤقتًا. ينطبق هذا على الطرق المصيَّرة بشكل ثابت في وقت البناء، أو أثناء إعادة التحقق.
+
+### 3. التهيئة (Hydration) والمصالحة (Reconciliation) لـ React على العميل
+
+في وقت الطلب، على جانب العميل:
+
+1. يتم استخدام HTML لعرض معاينة أولية سريعة غير تفاعلية لمكونات العميل والخادم.
+2. يتم استخدام حمولة مكونات خادم React (React Server Components Payload) لمصالحة أشجار مكونات العميل ومكونات الخادم المُعَرضة، وتحديث DOM.
+3. يتم استخدام تعليمات JavaScript لـ[تهيئة](https://react.dev/reference/react-dom/client/hydrateRoot) مكونات العميل وجعل التطبيق تفاعليًا.
+
+### 4. التخزين المؤقت في Next.js على العميل (ذاكرة التوجيه Router Cache)
+
+يتم تخزين حمولة مكونات خادم React في [ذاكرة التوجيه](#router-cache) على جانب العميل - وهي ذاكرة تخزين مؤقت منفصلة في الذاكرة، مقسمة حسب أجزاء المسار الفردية. تُستخدم ذاكرة التوجيه هذه لتحسين تجربة التنقل عن طريق تخزين المسارات التي تمت زيارتها مسبقًا وجلب المسارات المستقبلية مسبقًا.
+
+### 5. عمليات التنقل اللاحقة
+
+في عمليات التنقل اللاحقة أو أثناء الجلب المسبق، سيتحقق Next.js مما إذا كانت حمولة مكونات خادم React مخزنة في ذاكرة التوجيه. إذا كانت موجودة، فسيتم تخطي إرسال طلب جديد إلى الخادم.
+
+إذا لم تكن أجزاء المسار موجودة في الذاكرة المؤقتة، فسوف يقوم Next.js بجلب حمولة مكونات خادم React من الخادم، وملء ذاكرة التوجيه على العميل.
+
+### العرض الثابت والديناميكي
+
+يعتمد ما إذا كان المسار مخزنًا مؤقتًا في وقت البناء أم لا على ما إذا كان معروضًا بشكل ثابت أو ديناميكي. يتم تخزين المسارات الثابتة مؤقتًا افتراضيًا، بينما يتم عرض المسارات الديناميكية في وقت الطلب ولا يتم تخزينها مؤقتًا.
+
+يوضح هذا الرسم البياني الفرق بين المسارات المعروضة بشكل ثابت وديناميكي، مع البيانات المخزنة مؤقتًا وغير المخزنة:
+
+<Image
+  alt="كيف يؤثر العرض الثابت والديناميكي على ذاكرة المسار الكاملة. يتم تخزين المسارات الثابتة مؤقتًا في وقت البناء أو بعد إعادة التحقق من البيانات، بينما لا يتم تخزين المسارات الديناميكية مؤقتًا أبدًا"
+  srcLight="/docs/light/static-and-dynamic-routes.png"
+  srcDark="/docs/dark/static-and-dynamic-routes.png"
+  width="1600"
+  height="1314"
+/>
+
+تعرف على المزيد حول [العرض الثابت والديناميكي](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies).
+
+### المدة
+
+افتراضيًا، تكون ذاكرة المسار الكاملة دائمة. وهذا يعني أن ناتج العرض يتم تخزينه مؤقتًا عبر طلبات المستخدم.
+
+### الإبطال
+
+هناك طريقتان يمكنك من خلالهما إبطال ذاكرة المسار الكاملة:
+
+- **[إعادة التحقق من البيانات](/docs/app/building-your-application/caching#revalidating)**: إعادة التحقق من [ذاكرة البيانات](#data-cache) سوف يؤدي بدوره إلى إبطال ذاكرة التوجيه عن طريق إعادة عرض المكونات على الخادم وتخزين ناتج العرض الجديد.
+- **إعادة النشر**: على عكس ذاكرة البيانات، التي تظل موجودة عبر عمليات النشر، يتم مسح ذاكرة المسار الكاملة عند عمليات النشر الجديدة.
+
+### الانسحاب
+
+يمكنك الانسحاب من ذاكرة المسار الكاملة، أو بعبارة أخرى، عرض المكونات ديناميكيًا لكل طلب وارد، عن طريق:
+
+- **استخدام [وظيفة ديناميكية](#dynamic-functions)**: سيؤدي هذا إلى إخراج المسار من ذاكرة المسار الكاملة وعرضه ديناميكيًا في وقت الطلب. لا يزال يمكن استخدام ذاكرة البيانات.
+- **استخدام خيارات تكوين جزء المسار `dynamic = 'force-dynamic'` أو `revalidate = 0`**: سيؤدي هذا إلى تخطي ذاكرة المسار الكاملة وذاكرة البيانات. مما يعني أنه سيتم عرض المكونات وجلب البيانات في كل طلب وارد إلى الخادم. ستظل ذاكرة التوجيه سارية لأنها ذاكرة على جانب العميل.
+- **الانسحاب من [ذاكرة البيانات](#data-cache)**: إذا كان للمسار طلب `fetch` غير مخزن مؤقتًا، فسيؤدي هذا إلى إخراج المسار من ذاكرة المسار الكاملة. سيتم جلب البيانات لطلب `fetch` المحدد لكل طلب وارد. سيتم تخزين طلبات `fetch` الأخرى التي لا تنسحب من التخزين المؤقت في ذاكرة البيانات. وهذا يسمح بمزيج من البيانات المخزنة وغير المخزنة.
+
+## ذاكرة التوجيه (Router Cache)
+
+> **المصطلحات ذات الصلة:**
+>
+> قد تشاهد الإشارة إلى ذاكرة التوجيه باسم **ذاكرة العميل** أو **ذاكرة الجلب المسبق**. بينما تشير **ذاكرة الجلب المسبق** إلى أجزاء المسار التي تم جلبها مسبقًا، تشير **ذاكرة العميل** إلى ذاكرة التوجيه بأكملها، والتي تشمل كل من الأجزاء التي تمت زيارتها والتي تم جلبها مسبقًا.
+> هذه الذاكرة المؤقتة تنطبق تحديدًا على Next.js ومكونات الخادم، وهي تختلف عن [bfcache](https://web.dev/bfcache/) في المتصفح، على الرغم من أن لها نتيجة مماثلة.
+
+يحتوي Next.js على ذاكرة تخزين مؤقت على جانب العميل في الذاكرة تقوم بتخزين حمولة مكونات خادم React، مقسمة حسب أجزاء المسار الفردية، طوال مدة جلسة المستخدم. وهذا ما يسمى بذاكرة التوجيه.
+
+**كيف تعمل ذاكرة التوجيه**
+
+<Image
+  alt="كيف تعمل ذاكرة التوجيه للمسارات الثابتة والديناميكية، مع عرض MISS و HIT للتنقلات الأولية واللاحقة."
+  srcLight="/docs/light/router-cache.png"
+  srcDark="/docs/dark/router-cache.png"
+  width="1600"
+  height="1375"
+/>
+
+عندما يتنقل المستخدم بين المسارات، يقوم Next.js بتخزين أجزاء المسار التي تمت زيارتها و[جلب المسارات التي من المحتمل أن ينتقل إليها المستخدم مسبقًا](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) (بناءً على مكونات `<Link>` في نطاق الرؤية).
+
+هذا يؤدي إلى تحسين تجربة التنقل للمستخدم:
+
+- تنقل فوري للخلف/الأمام لأن المسارات التي تمت زيارتها مخزنة مؤقتًا وتنقل سريع إلى المسارات الجديدة بسبب الجلب المسبق و[العرض الجزئي](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering).
+- لا يوجد إعادة تحميل كاملة للصفحة بين عمليات التنقل، ويتم الحفاظ على حالة React وحالة المتصفح.
+
+> **الفرق بين ذاكرة التوجيه وذاكرة المسار الكاملة**:
+>
+> تقوم ذاكرة التوجيه بتخزين حمولة مكونات خادم React مؤقتًا في المتصفح طوال مدة جلسة المستخدم، بينما تقوم ذاكرة المسار الكاملة بتخزين حمولة مكونات خادم React و HTML بشكل دائم على الخادم عبر طلبات متعددة للمستخدم.
+>
+> بينما تقوم ذاكرة المسار الكاملة بتخزين المسارات المعروضة بشكل ثابت فقط، تنطبق ذاكرة التوجيه على كل من المسارات المعروضة بشكل ثابت وديناميكي.
+
+### المدة
+
+يتم تخزين الذاكرة المؤقتة في الذاكرة المؤقتة للمتصفح. هناك عاملان يحددان المدة التي تستمر فيها ذاكرة التوجيه:
+
+- **الجلسة**: تستمر الذاكرة المؤقتة عبر التنقل. ومع ذلك، يتم مسحها عند تحديث الصفحة.
+- **فترة الإبطال التلقائي**: يتم إبطال الذاكرة المؤقتة للتخطيطات وحالات التحميل تلقائيًا بعد وقت محدد. تعتمد المدة على كيفية [الجلب المسبق](/docs/app/api-reference/components/link#prefetch) للمورد، وما إذا كان المورد [تم إنشاؤه بشكل ثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default):
+  - **الجلب المسبق الافتراضي** (`prefetch={null}` أو غير محدد): غير مخزن للمسارات الديناميكية، 5 دقائق للمسارات الثابتة.
+  - **الجلب المسبق الكامل** (`prefetch={true}` أو `router.prefetch`): 5 دقائق لكل من المسارات الثابتة والديناميكية.
+
+بينما يؤدي تحديث الصفحة إلى مسح **جميع** الأجزاء المخزنة مؤقتًا، فإن فترة الإبطال التلقائي تؤثر فقط على الجزء الفردي من وقت جلبها مسبقًا.
+
+> **من الجيد معرفة**: يمكن استخدام خيار التكوين التجريبي [`staleTimes`](/docs/app/api-reference/next-config-js/staleTimes) لضبط أوقات الإبطال التلقائي المذكورة أعلاه.
+
+### الإبطال
+
+هناك طريقتان يمكنك من خلالهما إبطال ذاكرة التوجيه:
+
+- في **إجراء خادم (Server Action)**:
+  - إعادة التحقق من البيانات حسب الطلب عن طريق المسار باستخدام ([`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)) أو عن طريق علامة التخزين المؤقت باستخدام ([`revalidateTag`](/docs/app/api-reference/functions/revalidateTag))
+  - استخدام [`cookies.set`](/docs/app/api-reference/functions/cookies#cookiessetname-value-options) أو [`cookies.delete`](/docs/app/api-reference/functions/cookies#deleting-cookies) يبطل ذاكرة التوجيه لمنع المسارات التي تستخدم ملفات تعريف الارتباط من أن تصبح قديمة (مثل المصادقة).
+- استدعاء [`router.refresh`](/docs/app/api-reference/functions/use-router) سوف يبطل ذاكرة التوجيه ويجعل طلبًا جديدًا إلى الخادم للمسار الحالي.
+
+### الانسحاب
+
+ليس من الممكن الانسحاب من ذاكرة التوجيه. ومع ذلك، يمكنك إبطالها عن طريق استدعاء [`router.refresh`](/docs/app/api-reference/functions/use-router)، أو [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)، أو [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) (انظر أعلاه). سيؤدي هذا إلى مسح الذاكرة المؤقتة وإجراء طلب جديد إلى الخادم، مما يضمن عرض أحدث البيانات.
+
+يمكنك أيضًا الانسحاب من **الجلب المسبق** عن طريق تعيين خاصية `prefetch` لمكون `<Link>` إلى `false`. ومع ذلك، سيظل هذا يقوم بتخزين أجزاء المسار مؤقتًا لمدة 30 ثانية للسماح بالتنقل الفوري بين الأجزاء المتداخلة، مثل أشرطة التبويب، أو التنقل للخلف والأمام. سيتم تخزين المسارات التي تمت زيارتها مؤقتًا.
+
+## تفاعلات الذاكرة المؤقتة
+
+عند تكوين آليات التخزين المؤقت المختلفة، من المهم فهم كيفية تفاعلها مع بعضها البعض:
+
+### ذاكرة البيانات وذاكرة المسار الكاملة
+
+- إعادة التحقق أو الانسحاب من ذاكرة البيانات **سوف** يبطل ذاكرة المسار الكاملة، حيث يعتمد ناتج العرض على البيانات.
+- إبطال أو الانسحاب من ذاكرة المسار الكاملة **لا يؤثر** على ذاكرة البيانات. يمكنك عرض مسار ديناميكي يحتوي على بيانات مخزنة وغير مخزنة. هذا مفيد عندما تستخدم معظم صفحتك بيانات مخزنة، ولكن لديك بعض المكونات التي تعتمد على البيانات التي تحتاج إلى جلبها في وقت الطلب. يمكنك العرض ديناميكيًا دون القلق بشأن تأثير الأداء لإعادة جلب جميع البيانات.
+
+### ذاكرة البيانات وذاكرة التوجيه على العميل
+
+- إعادة التحقق من ذاكرة البيانات في [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers) **لن** يبطل ذاكرة التوجيه على الفور لأن معالج المسار غير مرتب بمسار محدد. وهذا يعني أن ذاكرة التوجيه ستستمر في تقديم الحمولة السابقة حتى تحديث قوي، أو انتهاء فترة الإبطال التلقائي.
+- لإبطال ذاكرة البيانات وذاكرة التوجيه على الفور، يمكنك استخدام [`revalidatePath`](#revalidatepath) أو [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag) في [إجراء خادم (Server Action)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+## واجهات برمجة التطبيقات (APIs)
+
+يوضح الجدول التالي نظرة عامة على كيفية تأثير واجهات برمجة التطبيقات المختلفة لـ Next.js على التخزين المؤقت:
+
+| الواجهة البرمجية                                                                     | ذاكرة التوجيه               | ذاكرة المسار الكاملة      | ذاكرة البيانات            | ذاكرة React |
+| ----------------------------------------------------------------------- | -------------------------- | --------------------- | --------------------- | ----------- |
+| [`<Link prefetch>`](#link)                                              | تخزين مؤقت                      |                       |                       |             |
+| [`router.prefetch`](#routerprefetch)                                    | تخزين مؤقت                      |                       |                       |             |
+| [`router.refresh`](#routerrefresh)                                      | إعادة التحقق                 |                       |                       |             |
+| [`fetch`](#fetch)                                                       |                            |                       | تخزين مؤقت                 | تخزين مؤقت       |
+| [`fetch` `options.cache`](#fetch-optionscache)                          |                            |                       | تخزين مؤقت أو انسحاب      |             |
+| [`fetch` `options.next.revalidate`](#fetch-optionsnextrevalidate)       |                            | إعادة التحقق            | إعادة التحقق            |             |
+| [`fetch` `options.next.tags`](#fetch-optionsnexttags-and-revalidatetag) |                            | تخزين مؤقت                 | تخزين مؤقت                 |             |
+| [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)             | إعادة التحقق (إجراء خادم) | إعادة التحقق            | إعادة التحقق            |             |
+| [`revalidatePath`](#revalidatepath)                                     | إعادة التحقق (إجراء خادم) | إعادة التحقق            | إعادة التحقق            |             |
+| [`const revalidate`](#segment-config-options)                           |                            | إعادة التحقق أو انسحاب | إعادة التحقق أو انسحاب |             |
+| [`const dynamic`](#segment-config-options)                              |                            | تخزين مؤقت أو انسحاب      | تخزين مؤقت أو انسحاب      |             |
+| [`cookies`](#cookies)                                                   | إعادة التحقق (إجراء خادم) | انسحاب               |                       |             |
+| [`headers`, `searchParams`](#dynamic-functions)                         |                            | انسحاب               |                       |             |
+| [`generateStaticParams`](#generatestaticparams)                         |                            | تخزين مؤقت                 |                       |             |
+| [`React.cache`](#react-cache-function)                                  |                            |                       |                       | تخزين مؤقت       |
+| [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache)    |                            |                       |                       |             |
+
+### `<Link>`
+
+افتراضيًا، يقوم مكون `<Link>` تلقائيًا بجلب المسارات مسبقًا من ذاكرة المسار الكاملة وإضافة حمولة مكونات خادم React إلى ذاكرة التوجيه.
+
+لتعطيل الجلب المسبق، يمكنك تعيين خاصية `prefetch` إلى `false`. ولكن هذا لن يتخطى التخزين المؤقت بشكل دائم، سيتم تخزين جزء المسار على جانب العميل عندما يزور المستخدم المسار.
+
+تعرف على المزيد حول [مكون `<Link>`](/docs/app/api-reference/components/link).
+
+### `router.prefetch`
+
+يمكن استخدام خيار `prefetch` في خطاف `useRouter` لجلب مسار مسبقًا يدويًا. هذا يضيف حمولة مكونات خادم React إلى ذاكرة التوجيه.
+
+راجع مرجع [خطاف `useRouter`](/docs/app/api-reference/functions/use-router).
+
+### `router.refresh`
+
+يمكن استخدام خيار `refresh` في خطاف `useRouter` لتحديث مسار يدويًا. هذا يمسح ذاكرة التوجيه بالكامل، ويجعل طلبًا جديدًا إلى الخادم للمسار الحالي. لا يؤثر `refresh` على ذاكرة البيانات أو ذاكرة المسار الكاملة.
+
+سيتم مصالحة النتيجة المعروضة على العميل مع الحفاظ على حالة React وحالة المتصفح.
+
+راجع مرجع [خطاف `useRouter`](/docs/app/api-reference/functions/use-router).
+
+### `fetch`
+
+يتم تخزين البيانات المرتجعة من `fetch` تلقائيًا في ذاكرة البيانات.
+
+```jsx
+// مخزن مؤقتًا افتراضيًا. `force-cache` هو الخيار الافتراضي ويمكن حذفه.
+fetch(`https://...`, { cache: 'force-cache' })
+```
+
+راجع [مرجع واجهة `fetch`](/docs/app/api-reference/functions/fetch) لمزيد من الخيارات.
+
+### `fetch options.cache`
+
+يمكنك الانسحاب من تخزين طلبات `fetch` الفردية للبيانات عن طريق تعيين خيار `cache` إلى `no-store`:
+
+```jsx
+// الانسحاب من التخزين المؤقت
+fetch(`https://...`, { cache: 'no-store' })
+```
+
+نظرًا لأن ناتج العرض يعتمد على البيانات، فإن استخدام `cache: 'no-store'` سيتخطى أيضًا ذاكرة المسار الكاملة للمسار الذي يتم فيه استخدام طلب `fetch`. أي أنه سيتم عرض المسار ديناميكيًا في كل طلب، ولكن لا يزال بإمكانك الحصول على طلبات بيانات مخزنة أخرى في نفس المسار.
+
+راجع [مرجع واجهة `fetch`](/docs/app/api-reference/functions/fetch) لمزيد من الخيارات.
+
+### `fetch options.next.revalidate`
+
+يمكنك استخدام خيار `next.revalidate` في `fetch` لتعيين فترة إعادة التحقق (بالثواني) لطلب `fetch` فردي. سيعيد هذا التحقق من ذاكرة البيانات، مما سيعيد بدوره التحقق من ذاكرة المسار الكاملة. سيتم جلب بيانات جديدة، وسيتم إعادة عرض المكونات على الخادم.
+
+```jsx
+// إعادة التحقق على الأكثر بعد ساعة واحدة
+fetch(`https://...`, { next: { revalidate: 3600 } })
+```
+
+راجع [مرجع واجهة `fetch`](/docs/app/api-reference/functions/fetch) لمزيد من الخيارات.
+
+### `fetch options.next.tags` و `revalidateTag`
+
+يقدم Next.js نظامًا لوضع علامات على ذاكرة التخزين المؤقت للتحكم الدقيق في تخزين البيانات وإعادة التحقق منها.
+
+1. عند استخدام `fetch` أو [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache)، يمكنك وضع علامة واحدة أو أكثر على مدخلات ذاكرة التخزين المؤقت.
+2. ثم يمكنك استدعاء `revalidateTag` لمسح مدخلات ذاكرة التخزين المؤقت المرتبطة بتلك العلامة.
+
+على سبيل المثال، يمكنك تعيين علامة عند جلب البيانات:
+
+```jsx
+// تخزين البيانات مع علامة
+fetch(`https://...`, { next: { tags: ['a', 'b', 'c'] } })
+```
+
+ثم استدعاء `revalidateTag` مع علامة لمسح مدخل ذاكرة التخزين المؤقت:
+
+```jsx
+// إعادة التحقق من المدخلات ذات العلامة المحددة
+revalidateTag('a')
+```
+
+هناك مكانان يمكنك استخدام `revalidateTag` فيهما، حسب ما تحاول تحقيقه:
+
+1. [معالجات المسارات (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) - لإعادة التحقق من البيانات استجابةً لحدث طرف ثالث (مثل webhook). لن يؤدي هذا إلى إبطال ذاكرة تخزين المسار (Router Cache) فورًا لأن معالج المسار غير مرتبط بمسار محدد.
+2. [الإجراءات الخادمية (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) - لإعادة التحقق من البيانات بعد إجراء المستخدم (مثل إرسال نموذج). سيؤدي هذا إلى إبطال ذاكرة تخزين المسار للمسار المرتبط.
+
+### `revalidatePath`
+
+يسمح لك `revalidatePath` بإعادة التحقق من البيانات يدويًا **و** إعادة عرض مقاطع المسار أسفل مسار محدد في عملية واحدة. يؤدي استدعاء دالة `revalidatePath` إلى إعادة التحقق من ذاكرة تخزين البيانات (Data Cache)، مما يؤدي بدوره إلى إبطال ذاكرة تخزين المسار الكاملة (Full Route Cache).
+
+```jsx
+revalidatePath('/')
+```
+
+هناك مكانان يمكنك استخدام `revalidatePath` فيهما، حسب ما تحاول تحقيقه:
+
+1. [معالجات المسارات (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) - لإعادة التحقق من البيانات استجابةً لحدث طرف ثالث (مثل webhook).
+2. [الإجراءات الخادمية (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) - لإعادة التحقق من البيانات بعد تفاعل المستخدم (مثل إرسال نموذج، النقر على زر).
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `revalidatePath`](/docs/app/api-reference/functions/revalidatePath) لمزيد من المعلومات.
+
+> **مقارنة بين `revalidatePath` و `router.refresh`**:
+>
+> يؤدي استدعاء `router.refresh` إلى مسح ذاكرة تخزين المسار (Router Cache)، وإعادة عرض مقاطع المسار على الخادم دون إبطال ذاكرة تخزين البيانات (Data Cache) أو ذاكرة تخزين المسار الكاملة (Full Route Cache).
+>
+> الفرق هو أن `revalidatePath` يمسح ذاكرة تخزين البيانات وذاكرة تخزين المسار الكاملة، بينما `router.refresh()` لا يغير ذاكرة تخزين البيانات وذاكرة تخزين المسار الكاملة، لأنه واجهة برمجة تطبيقات من جانب العميل.
+
+### الدوال الديناميكية
+
+تعتمد الدوال الديناميكية مثل `cookies` و `headers`، وخاصية `searchParams` في الصفحات على معلومات الطلب الواردة أثناء التشغيل. يؤدي استخدامها إلى استبعاد المسار من ذاكرة تخزين المسار الكاملة، بمعنى آخر، سيتم عرض المسار ديناميكيًا.
+
+#### `cookies`
+
+يؤدي استخدام `cookies.set` أو `cookies.delete` في إجراء خادمي (Server Action) إلى إبطال ذاكرة تخزين المسار (Router Cache) لمنع المسارات التي تستخدم ملفات تعريف الارتباط من أن تصبح قديمة (على سبيل المثال، لتعكس تغييرات المصادقة).
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `cookies`](/docs/app/api-reference/functions/cookies).
+
+### خيارات تكوين المقاطع
+
+يمكن استخدام خيارات تكوين مقطع المسار (Route Segment Config) لتجاوز الإعدادات الافتراضية لمقطع المسار أو عندما لا يمكنك استخدام واجهة برمجة التطبيقات `fetch` (على سبيل المثال، عميل قاعدة بيانات أو مكتبات طرف ثالث).
+
+ستؤدي خيارات تكوين مقطع المسار التالية إلى استبعاد المسار من ذاكرة تخزين البيانات وذاكرة تخزين المسار الكاملة:
+
+- `const dynamic = 'force-dynamic'`
+- `const revalidate = 0`
+
+راجع [توثيق تكوين مقاطع المسار (Route Segment Config)](/docs/app/api-reference/file-conventions/route-segment-config) لمزيد من الخيارات.
+
+### `generateStaticParams`
+
+بالنسبة [للمقاطع الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) (على سبيل المثال، `app/blog/[slug]/page.js`)، يتم تخزين المسارات المقدمة من `generateStaticParams` في ذاكرة تخزين المسار الكاملة (Full Route Cache) وقت البناء. عند وقت الطلب، سيخزن Next.js أيضًا المسارات التي لم تكن معروفة وقت البناء عند زيارتها لأول مرة.
+
+يمكنك تعطيل التخزين المؤقت عند وقت الطلب باستخدام خيار `export const dynamicParams = false` في مقطع المسار. عند استخدام خيار التكوين هذا، سيتم تقديم المسارات المقدمة من `generateStaticParams` فقط، وستؤدي المسارات الأخرى إلى ظهور خطأ 404 أو تطابق (في حالة [المقاطع الشاملة (catch-all routes)](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)).
+
+راجع [مرجع واجهة برمجة التطبيقات لـ `generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
+
+### دالة React `cache`
+
+تسمح لك دالة React `cache` بحفظ قيمة الإرجاع للدالة، مما يتيح لك استدعاء نفس الدالة عدة مرات مع تنفيذها مرة واحدة فقط.
+
+نظرًا لأن طلبات `fetch` يتم حفظها تلقائيًا، فلا تحتاج إلى تغليفها في React `cache`. ومع ذلك، يمكنك استخدام `cache` لحفظ طلبات البيانات يدويًا للحالات التي لا تكون فيها واجهة برمجة التطبيقات `fetch` مناسبة. على سبيل المثال، بعض عملاء قواعد البيانات، أو عملاء أنظمة إدارة المحتوى (CMS)، أو عملاء GraphQL.
+
+```tsx filename="utils/get-item.ts" switcher
+import { cache } from 'react'
+import db from '@/lib/db'
+
+export const getItem = cache(async (id: string) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
+
+```jsx filename="utils/get-item.js" switcher
+import { cache } from 'react'
+import db from '@/lib/db'
+
+export const getItem = cache(async (id) => {
+  const item = await db.item.findUnique({ id })
+  return item
+})
+```
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/01-css-modules.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/01-css-modules.mdx
new file mode 100644
index 00000000..1ea58a5a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/01-css-modules.mdx
@@ -0,0 +1,361 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:56.787Z
+title: وحدات CSS والأنماط العامة
+nav_title: وحدات CSS
+description: قم بتنسيق تطبيق Next.js الخاص بك باستخدام وحدات CSS، والأنماط العامة، وملفات الأنماط الخارجية.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<PagesOnly>
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مثال CSS أساسي](https://github.com/vercel/next.js/tree/canary/examples/basic-css)
+
+</details>
+
+</PagesOnly>
+
+يدعم Next.js أنواعًا مختلفة من ملفات الأنماط، بما في ذلك:
+
+- [وحدات CSS](#وحدات-css)
+- [الأنماط العامة](#الأنماط-العامة)
+- [ملفات الأنماط الخارجية](#ملفات-الأنماط-الخارجية)
+
+## وحدات CSS
+
+يحتوي Next.js على دعم مدمج لوحدات CSS باستخدام امتداد `.module.css`.
+
+تقوم وحدات CSS بتحديد نطاق CSS محليًا عن طريق إنشاء اسم فئة فريد تلقائيًا. هذا يسمح لك باستخدام نفس اسم الفئة في ملفات مختلفة دون القلق عن التصادمات. هذا السلوك يجعل وحدات CSS الطريقة المثالية لتضمين CSS على مستوى المكون.
+
+## مثال
+
+<AppOnly>
+يمكن استيراد وحدات CSS إلى أي ملف داخل دليل `app`:
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import styles from './styles.module.css'
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <section className={styles.dashboard}>{children}</section>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import styles from './styles.module.css'
+
+export default function DashboardLayout({ children }) {
+  return <section className={styles.dashboard}>{children}</section>
+}
+```
+
+```css filename="app/dashboard/styles.module.css"
+.dashboard {
+  padding: 24px;
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+على سبيل المثال، ضع في الاعتبار مكون `Button` قابل لإعادة الاستخدام في مجلد `components/`:
+
+أولاً، أنشئ `components/Button.module.css` بالمحتوى التالي:
+
+```css filename="Button.module.css"
+/*
+لا داعي للقلق بشأن تصادم .error {} مع أي ملفات `.css` أو
+`.module.css` أخرى!
+*/
+.error {
+  color: white;
+  background-color: red;
+}
+```
+
+ثم، أنشئ `components/Button.js`، وقم باستيراد واستخدام ملف CSS أعلاه:
+
+```jsx filename="components/Button.js"
+import styles from './Button.module.css'
+
+export function Button() {
+  return (
+    <button
+      type="button"
+      // لاحظ كيف يتم الوصول إلى فئة "error" كخاصية على كائن
+      // `styles` المستورد.
+      className={styles.error}
+    >
+      Destroy
+    </button>
+  )
+}
+```
+
+</PagesOnly>
+
+وحدات CSS **مفعلة فقط للملفات ذات الامتداد `.module.css` و `.module.sass`**.
+
+في بيئة الإنتاج، سيتم دمج جميع ملفات وحدات CSS تلقائيًا في **عدة ملفات `.css` مضغوطة ومقسمة بالكود**.
+تمثل هذه الملفات `.css` مسارات تنفيذ ساخنة في تطبيقك، مما يضمن تحميل الحد الأدنى من CSS لتطبيقك للرسم.
+
+## الأنماط العامة
+
+<AppOnly>
+يمكن استيراد الأنماط العامة إلى أي تخطيط أو صفحة أو مكون داخل دليل `app`.
+
+> **معلومة مفيدة**: هذا يختلف عن دليل `pages`، حيث يمكنك فقط استيراد الأنماط العامة داخل ملف `_app.js`.
+
+على سبيل المثال، ضع في الاعتبار ملف أنماط باسم `app/global.css`:
+
+```css
+body {
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+```
+
+داخل التخطيط الجذري (`app/layout.js`)، قم باستيراد ملف الأنماط `global.css` لتطبيق الأنماط على كل مسار في تطبيقك:
+
+```tsx filename="app/layout.tsx" switcher
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import './global.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+// هذه الأنماط تنطبق على كل مسار في التطبيق
+import './global.css'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لإضافة ملف أنماط إلى تطبيقك، قم باستيراد ملف CSS داخل `pages/_app.js`.
+
+على سبيل المثال، ضع في الاعتبار ملف الأنماط التالي باسم `styles.css`:
+
+```css filename="styles.css"
+body {
+  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
+    'Arial', sans-serif;
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+```
+
+قم بإنشاء ملف [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) إذا لم يكن موجودًا بالفعل.
+ثم، قم باستيراد ملف `styles.css` باستخدام [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import).
+
+```jsx filename="pages/_app.js"
+import '../styles.css'
+
+// هذا التصدير الافتراضي مطلوب في ملف `pages/_app.js` جديد.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+هذه الأنماط (`styles.css`) ستنطبق على جميع الصفحات والمكونات في تطبيقك.
+بسبب الطبيعة العامة لملفات الأنماط، ولتجنب التصادمات، يمكنك **فقط استيرادها داخل [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)**.
+
+في وضع التطوير، يسمح التعبير عن ملفات الأنماط بهذه الطريقة بإعادة تحميل الأنماط ساخنًا أثناء تعديلها - مما يعني أنه يمكنك الحفاظ على حالة التطبيق.
+
+في بيئة الإنتاج، سيتم دمج جميع ملفات CSS تلقائيًا في ملف `.css` واحد مضغوط. سيتم تحديد ترتيب دمج CSS وفقًا لترتيب استيراد CSS في ملف `_app.js`. انتبه بشكل خاص إلى وحدات JS المستوردة التي تتضمن CSS الخاص بها؛ سيتم دمج CSS لوحدة JS وفقًا لنفس قواعد الترتيب مثل ملفات CSS المستوردة. على سبيل المثال:
+
+```jsx
+import '../styles.css'
+// يعتمد CSS في ErrorBoundary على CSS العام في styles.css،
+// لذلك نقوم باستيراده بعد styles.css.
+import ErrorBoundary from '../components/ErrorBoundary'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <ErrorBoundary>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  )
+}
+```
+
+</PagesOnly>
+
+## ملفات الأنماط الخارجية
+
+<AppOnly>
+
+يمكن استيراد ملفات الأنماط المنشورة بواسطة حزم خارجية في أي مكان داخل دليل `app`، بما في ذلك المكونات المجاورة:
+
+```tsx filename="app/layout.tsx" switcher
+import 'bootstrap/dist/css/bootstrap.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className="container">{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import 'bootstrap/dist/css/bootstrap.css'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className="container">{children}</body>
+    </html>
+  )
+}
+```
+
+> **معلومة مفيدة**: يجب استيراد ملفات الأنماط الخارجية مباشرة من حزمة npm أو تنزيلها ووضعها بجوار الكود الخاص بك. لا يمكنك استخدام `<link rel="stylesheet" />`.
+
+</AppOnly>
+
+<PagesOnly>
+
+يسمح Next.js باستيراد ملفات CSS من ملف JavaScript.
+هذا ممكن لأن Next.js يوسع مفهوم [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) ليتجاوز JavaScript.
+
+### استيراد الأنماط من `node_modules`
+
+منذ Next.js **9.5.4**، يُسمح باستيراد ملف CSS من `node_modules` في أي مكان في تطبيقك.
+
+بالنسبة لملفات الأنماط العامة، مثل `bootstrap` أو `nprogress`، يجب استيراد الملف داخل `pages/_app.js`. على سبيل المثال:
+
+```jsx filename="pages/_app.js"
+import 'bootstrap/dist/css/bootstrap.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+لاستيراد CSS المطلوب بواسطة مكون طرف ثالث، يمكنك القيام بذلك في مكونك. على سبيل المثال:
+
+```jsx filename="components/example-dialog.js"
+import { useState } from 'react'
+import { Dialog } from '@reach/dialog'
+import VisuallyHidden from '@reach/visually-hidden'
+import '@reach/dialog/styles.css'
+
+function ExampleDialog(props) {
+  const [showDialog, setShowDialog] = useState(false)
+  const open = () => setShowDialog(true)
+  const close = () => setShowDialog(false)
+
+  return (
+    <div>
+      <button onClick={open}>Open Dialog</button>
+      <Dialog isOpen={showDialog} onDismiss={close}>
+        <button className="close-button" onClick={close}>
+          <VisuallyHidden>Close</VisuallyHidden>
+          <span aria-hidden>×</span>
+        </button>
+        <p>Hello there. I am a dialog</p>
+      </Dialog>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+## الترتيب والدمج
+
+يقوم Next.js بتحسين CSS أثناء بناء الإنتاج عن طريق تقسيم (دمج) ملفات الأنماط تلقائيًا. يتم تحديد ترتيب CSS وفقًا لترتيب استيراد ملفات الأنماط في كود التطبيق الخاص بك.
+
+على سبيل المثال، سيتم ترتيب `base-button.module.css` قبل `page.module.css` نظرًا لاستيراد `<BaseButton>` أولاً في `<Page>`:
+
+```tsx filename="base-button.tsx" switcher
+import styles from './base-button.module.css'
+
+export function BaseButton() {
+  return <button className={styles.primary} />
+}
+```
+
+```jsx filename="base-button.js" switcher
+import styles from './base-button.module.css'
+
+export function BaseButton() {
+  return <button className={styles.primary} />
+}
+```
+
+```tsx filename="page.ts" switcher
+import { BaseButton } from './base-button'
+import styles from './page.module.css'
+
+export function Page() {
+  return <BaseButton className={styles.primary} />
+}
+```
+
+```jsx filename="page.js" switcher
+import { BaseButton } from './base-button'
+import styles from './page.module.css'
+
+export function Page() {
+  return <BaseButton className={styles.primary} />
+}
+```
+
+للحفاظ على ترتيب يمكن التنبؤ به، نوصي بما يلي:
+
+- استيراد ملف CSS فقط في ملف JS/TS واحد.
+  - إذا كنت تستخدم أسماء فئات عامة، قم باستيراد الأنماط العامة في نفس الملف بالترتيب الذي تريد تطبيقه به.
+- افضل وحدات CSS على الأنماط العامة.
+  - استخدم اصطلاح تسمية متسق لوحدات CSS الخاصة بك. على سبيل المثال، استخدم `<name>.module.css` بدلاً من `<name>.tsx`.
+- استخرج الأنماط المشتركة في مكون منفصل.
+- إذا كنت تستخدم [Tailwind](/docs/app/building-your-application/styling/tailwind-css)، قم باستيراد ملف الأنماط في أعلى الملف، ويفضل في [التخطيط الجذري](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
+
+> **معلومة مفيدة:** يختلف سلوك ترتيب CSS في وضع التطوير، تأكد دائمًا من التحقق من نشرات المعاينة للتحقق من ترتيب CSS النهائي في بناء الإنتاج الخاص بك.
+
+</AppOnly>
+
+## ميزات إضافية
+
+يتضمن Next.js ميزات إضافية لتحسين تجربة كتابة الأنماط:
+
+- عند التشغيل محليًا باستخدام `next dev`، ستستفيد ملفات الأنماط المحلية (سواء كانت عامة أو وحدات CSS) من [التحديث السريع (Fast Refresh)](/docs/architecture/fast-refresh) لتعكس التغييرات على الفور عند حفظ التعديلات.
+- عند بناء الإنتاج باستخدام `next build`، سيتم تجميع ملفات CSS في عدد أقل من ملفات `.css` مضغوطة لتقليل عدد طلبات الشبكة المطلوبة لاسترداد الأنماط.
+- إذا قمت بتعطيل JavaScript، سيتم تحميل الأنماط في بناء الإنتاج (`next start`). ومع ذلك، لا يزال JavaScript مطلوبًا لـ `next dev` لتمكين [التحديث السريع (Fast Refresh)](/docs/architecture/fast-refresh).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/02-tailwind-css.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/02-tailwind-css.mdx
new file mode 100644
index 00000000..a44cc314
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/02-tailwind-css.mdx
@@ -0,0 +1,183 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:43:46.171Z
+title: Tailwind CSS
+description: تنسيق تطبيق Next.js باستخدام Tailwind CSS.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+<PagesOnly>
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مع Tailwind CSS](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)
+
+</details>
+
+</PagesOnly>
+
+[Tailwind CSS](https://tailwindcss.com/) هو إطار عمل CSS يعتمد على الأدوات (utility-first) ويعمل بشكل استثنائي مع Next.js.
+
+## تثبيت Tailwind
+
+قم بتثبيت حزم Tailwind CSS وشغل الأمر `init` لإنشاء ملفات `tailwind.config.js` و `postcss.config.js`:
+
+```bash filename="Terminal"
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+## تكوين Tailwind
+
+بداخل ملف `tailwind.config.js`، أضف مسارات الملفات التي ستستخدم أسماء فئات Tailwind CSS:
+
+```js filename="tailwind.config.js"
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}', // ملاحظة: تمت إضافة دليل `app`.
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+
+    // أو إذا كنت تستخدم دليل `src`:
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+لا تحتاج لتعديل ملف `postcss.config.js`.
+
+<AppOnly>
+
+## استيراد الأنماط
+
+أضف [توجيهات Tailwind CSS](https://tailwindcss.com/docs/functions-and-directives#directives) التي سيستخدمها Tailwind لحقن الأنماط المُنشأة إلى [صفحة الأنماط العامة](/docs/app/building-your-application/styling/css-modules#global-styles) في تطبيقك، على سبيل المثال:
+
+```css filename="app/globals.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+بداخل [تخطيط الجذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) (`app/layout.tsx`)، قم باستيراد صفحة الأنماط `globals.css` لتطبيق الأنماط على كل مسار في تطبيقك.
+
+```tsx filename="app/layout.tsx" switcher
+import type { Metadata } from 'next'
+
+// هذه الأنماط تطبق على كل مسار في التطبيق
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+// هذه الأنماط تطبق على كل مسار في التطبيق
+import './globals.css'
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+## استخدام الفئات
+
+بعد تثبيت Tailwind CSS وإضافة الأنماط العامة، يمكنك استخدام فئات Tailwind المساعدة في تطبيقك.
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## استيراد الأنماط
+
+أضف [توجيهات Tailwind CSS](https://tailwindcss.com/docs/functions-and-directives#directives) التي سيستخدمها Tailwind لحقن الأنماط المُنشأة إلى [صفحة الأنماط العامة](/docs/pages/building-your-application/styling/css-modules#global-styles) في تطبيقك، على سبيل المثال:
+
+```css filename="styles/globals.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+بداخل [ملف التطبيق المخصص](/docs/pages/building-your-application/routing/custom-app) (`pages/_app.js`)، قم باستيراد صفحة الأنماط `globals.css` لتطبيق الأنماط على كل مسار في تطبيقك.
+
+```tsx filename="pages/_app.tsx" switcher
+// هذه الأنماط تطبق على كل مسار في التطبيق
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+// هذه الأنماط تطبق على كل مسار في التطبيق
+import '@/styles/globals.css'
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+## استخدام الفئات
+
+بعد تثبيت Tailwind CSS وإضافة الأنماط العامة، يمكنك استخدام فئات Tailwind المساعدة في تطبيقك.
+
+```tsx filename="pages/index.tsx" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export default function Page() {
+  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
+}
+```
+
+</PagesOnly>
+
+## الاستخدام مع Turbopack
+
+بدءًا من Next.js 13.1، أصبح Tailwind CSS و PostCSS مدعومين مع [Turbopack](https://turbo.build/pack/docs/features/css#tailwind-css).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/03-css-in-js.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/03-css-in-js.mdx
new file mode 100644
index 00000000..04273f0b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/03-css-in-js.mdx
@@ -0,0 +1,324 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:38.798Z
+title: CSS-in-JS
+description: استخدام مكتبات CSS-in-JS مع Next.js
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+<AppOnly>
+
+> **تحذير:** مكتبات CSS-in-JS التي تتطلب تشغيل جافاسكريبت غير مدعومة حاليًا في مكونات الخادم (Server Components). استخدام CSS-in-JS مع ميزات React الجديدة مثل مكونات الخادم والبث يتطلب من مطوري المكتبات دعم أحدث إصدار من React، بما في ذلك [التصيير المتزامن (concurrent rendering)](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react).
+>
+> نحن نعمل مع فريق React على واجهات برمجة التطبيقات (APIs) الأساسية للتعامل مع أصول CSS وجافاسكريبت مع دعم مكونات خادم React وهندسة البث.
+
+المكتبات التالية مدعومة في مكونات العميل (Client Components) في دليل `app` (مرتبة أبجديًا):
+
+- [`chakra-ui`](https://chakra-ui.com/getting-started/nextjs-app-guide)
+- [`kuma-ui`](https://kuma-ui.com)
+- [`@mui/material`](https://mui.com/material-ui/guides/next-js-app-router/)
+- [`@mui/joy`](https://mui.com/joy-ui/integrations/next-js-app-router/)
+- [`pandacss`](https://panda-css.com)
+- [`styled-jsx`](#styled-jsx)
+- [`styled-components`](#styled-components)
+- [`stylex`](https://stylexjs.com)
+- [`tamagui`](https://tamagui.dev/docs/guides/next-js#server-components)
+- [`tss-react`](https://tss-react.dev/)
+- [`vanilla-extract`](https://vanilla-extract.style)
+
+المكتبات التالية تعمل حاليًا على إضافة الدعم:
+
+- [`emotion`](https://github.com/emotion-js/emotion/issues/2928)
+
+> **معلومة جيدة**: نحن نختبر مكتبات CSS-in-JS مختلفة وسنضيف المزيد من الأمثلة للمكتبات التي تدعم ميزات React 18 و/أو دليل `app`.
+
+إذا كنت تريد تنسيق مكونات الخادم، نوصي باستخدام [وحدات CSS](/docs/app/building-your-application/styling/css-modules) أو حلول أخرى تنتج ملفات CSS، مثل PostCSS أو [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css).
+
+## تكوين CSS-in-JS في `app`
+
+يتكون تكوين CSS-in-JS من ثلاث خطوات اختيارية تشمل:
+
+1. **سجل الأنماط (style registry)** لجمع جميع قواعد CSS في عملية التصيير.
+2. خطاف `useServerInsertedHTML` الجديد لحقن القواعد قبل أي محتوى قد يستخدمها.
+3. مكون عميل يلف تطبيقك مع سجل الأنماط أثناء التصيير الأولي من جانب الخادم.
+
+### `styled-jsx`
+
+استخدام `styled-jsx` في مكونات العميل يتطلب استخدام الإصدار `v5.1.0`. أولاً، أنشئ سجلًا جديدًا:
+
+```tsx filename="app/registry.tsx" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
+
+export default function StyledJsxRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
+
+  useServerInsertedHTML(() => {
+    const styles = jsxStyleRegistry.styles()
+    jsxStyleRegistry.flush()
+    return <>{styles}</>
+  })
+
+  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
+}
+```
+
+```jsx filename="app/registry.js" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
+
+export default function StyledJsxRegistry({ children }) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
+
+  useServerInsertedHTML(() => {
+    const styles = jsxStyleRegistry.styles()
+    jsxStyleRegistry.flush()
+    return <>{styles}</>
+  })
+
+  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
+}
+```
+
+ثم، لف [تخطيط الجذر (root layout)](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) مع السجل:
+
+```tsx filename="app/layout.tsx" switcher
+import StyledJsxRegistry from './registry'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <StyledJsxRegistry>{children}</StyledJsxRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import StyledJsxRegistry from './registry'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <StyledJsxRegistry>{children}</StyledJsxRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+[عرض مثال هنا](https://github.com/vercel/app-playground/tree/main/app/styling/styled-jsx).
+
+### Styled Components
+
+فيما يلي مثال لكيفية تكوين `styled-components@6` أو أحدث:
+
+أولاً، تمكين styled-components في `next.config.js`.
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    styledComponents: true,
+  },
+}
+```
+
+ثم، استخدم واجهة برمجة تطبيقات `styled-components` لإنشاء مكون سجل عام لجمع جميع قواعد أنماط CSS التي تم إنشاؤها أثناء التصيير، ووظيفة لإرجاع تلك القواعد. ثم استخدم خطاف `useServerInsertedHTML` لحقن الأنماط المجمعة في السجل في وسم `<head>` HTML في تخطيط الجذر.
+
+```tsx filename="lib/registry.tsx" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
+```
+
+```jsx filename="lib/registry.js" switcher
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({ children }) {
+  // إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
+```
+
+لف `children` لتخطيط الجذر مع مكون سجل الأنماط:
+
+```tsx filename="app/layout.tsx" switcher
+import StyledComponentsRegistry from './lib/registry'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import StyledComponentsRegistry from './lib/registry'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+      </body>
+    </html>
+  )
+}
+```
+
+[عرض مثال هنا](https://github.com/vercel/app-playground/tree/main/app/styling/styled-components).
+
+> **معلومة جيدة**:
+>
+> - أثناء تصيير الخادم، سيتم استخراج الأنماط إلى سجل عام وحقنها في `<head>` من HTML الخاص بك. هذا يضمن وضع قواعد الأنماط قبل أي محتوى قد يستخدمها. في المستقبل، قد نستخدم ميزة React القادمة لتحديد مكان حقن الأنماط.
+> - أثناء البث، سيتم جمع الأنماط من كل جزء وإضافتها إلى الأنماط الموجودة. بعد اكتمال الترطيب (hydration) من جانب العميل، ستتولى `styled-components` المهمة كالمعتاد وتحقن أي أنماط ديناميكية إضافية.
+> - نستخدم على وجه التحديد مكون عميل في أعلى مستوى من الشجرة لسجل الأنماط لأنه أكثر كفاءة لاستخراج قواعد CSS بهذه الطريقة. يتجنب إعادة إنشاء الأنماط في عمليات تصيير الخادم اللاحقة، ويمنع إرسالها في حمولة مكون الخادم.
+> - لحالات الاستخدام المتقدمة حيث تحتاج إلى تكوين خصائص فردية لتجميع styled-components، يمكنك قراءة [مرجع واجهة برمجة تطبيقات Next.js لـ styled-components](/docs/architecture/nextjs-compiler#styled-components) لمعرفة المزيد.
+
+</AppOnly>
+
+<PagesOnly>
+
+<details>
+  <summary>أمثلة</summary>
+
+- [Styled JSX](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx)
+- [Styled Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)
+- [Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)
+- [Linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria)
+- [Styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)
+- [Cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs)
+- [Fela](https://github.com/vercel/next.js/tree/canary/examples/with-fela)
+- [Stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches)
+
+</details>
+
+من الممكن استخدام أي حل موجود لـ CSS-in-JS. أبسطها هو الأنماط المضمنة:
+
+```jsx
+function HiThere() {
+  return <p style={{ color: 'red' }}>مرحبًا</p>
+}
+
+export default HiThere
+```
+
+نحن نضمّن [styled-jsx](https://github.com/vercel/styled-jsx) لتوفير دعم لـ CSS معزول محدد. الهدف هو دعم "ظل CSS" مشابه لمكونات الويب، والتي للأسف [لا تدعم التصيير من جانب الخادم وتعمل فقط بجافاسكريبت](https://github.com/w3c/webcomponents/issues/71).
+
+راجع الأمثلة أعلاه للحلول الشائعة الأخرى لـ CSS-in-JS (مثل Styled Components).
+
+يبدو المكون الذي يستخدم `styled-jsx` كالتالي:
+
+```jsx
+function HelloWorld() {
+  return (
+    <div>
+      مرحبًا بالعالم
+      <p>محدد النطاق!</p>
+      <style jsx>{`
+        p {
+          color: blue;
+        }
+        div {
+          background: red;
+        }
+        @media (max-width: 600px) {
+          div {
+            background: blue;
+          }
+        }
+      `}</style>
+      <style global jsx>{`
+        body {
+          background: black;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default HelloWorld
+```
+
+يرجى الاطلاع على [توثيق styled-jsx](https://github.com/vercel/styled-jsx) لمزيد من الأمثلة.
+
+### تعطيل جافاسكريبت
+
+نعم، إذا قمت بتعطيل جافاسكريبت، سيتم تحميل CSS في بناء الإنتاج (`next start`). أثناء التطوير، نطلب تمكين جافاسكريبت لتوفير أفضل تجربة مطور مع [التحديث السريع (Fast Refresh)](https://nextjs.org/blog/next-9-4#fast-refresh).
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/04-sass.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/04-sass.mdx
new file mode 100644
index 00000000..01610b3f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/04-sass.mdx
@@ -0,0 +1,83 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:43:04.573Z
+title: Sass
+description: تنسيق تطبيق Next.js باستخدام Sass.
+---
+
+{/* المحتوى في هذا المستند مشترك بين جهاز التوجيه للتطبيق والصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بجهاز توجيه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+يدعم Next.js مدمجًا التكامل مع Sass بعد تثبيت الحزمة باستخدام كل من امتدادات `.scss` و `.sass`. يمكنك استخدام Sass على مستوى المكون عبر وحدات CSS وامتداد `.module.scss` أو `.module.sass`.
+
+أولاً، قم بتثبيت [`sass`](https://github.com/sass/sass):
+
+```bash filename="Terminal"
+npm install --save-dev sass
+```
+
+> **معلومة مفيدة**:
+>
+> يدعم Sass [تركيبتين مختلفتين](https://sass-lang.com/documentation/syntax)، لكل منهما امتداده الخاص.
+> يتطلب امتداد `.scss` استخدام [تركيبة SCSS](https://sass-lang.com/documentation/syntax#scss)،
+> بينما يتطلب امتداد `.sass` استخدام [التركيبة ذات المسافات البادئة ("Sass")](https://sass-lang.com/documentation/syntax#the-indented-syntax).
+>
+> إذا لم تكن متأكدًا مما تختار، ابدأ بامتداد `.scss` الذي هو مجموعة شاملة لـ CSS، ولا يتطلب منك تعلم
+> التركيبة ذات المسافات البادئة ("Sass").
+
+### تخصيص خيارات Sass
+
+إذا كنت ترغب في تكوين مترجم Sass، استخدم `sassOptions` في `next.config.js`.
+
+```js filename="next.config.js"
+const path = require('path')
+
+module.exports = {
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+}
+```
+
+### متغيرات Sass
+
+يدعم Next.js متغيرات Sass المصدرة من ملفات وحدة CSS.
+
+على سبيل المثال، باستخدام متغير Sass المصدر `primaryColor`:
+
+```scss filename="app/variables.module.scss"
+$primary-color: #64ff00;
+
+:export {
+  primaryColor: $primary-color;
+}
+```
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+// يشير إلى مسار الجذر `/`
+
+import variables from './variables.module.scss'
+
+export default function Page() {
+  return <h1 style={{ color: variables.primaryColor }}>مرحبًا، Next.js!</h1>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import variables from '../styles/variables.module.scss'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Layout color={variables.primaryColor}>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/index.mdx
new file mode 100644
index 00000000..c1eb013d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/05-styling/index.mdx
@@ -0,0 +1,18 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:46.023Z
+title: التنسيقات (Styling)
+description: تعرف على الطرق المختلفة لتنسيق تطبيق Next.js الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يدعم Next.js طرقًا مختلفة لتنسيق تطبيقك، بما في ذلك:
+
+- **CSS العام**: سهل الاستخدام ومألوف لمن لديهم خبرة في CSS التقليدي، ولكن قد يؤدي إلى حزم CSS كبيرة وصعوبة في إدارة التنسيقات مع نمو التطبيق.
+- **وحدات CSS (CSS Modules)**: إنشاء فئات CSS محلية لتجنب تعارض الأسماء وتحسين قابلية الصيانة.
+- **Tailwind CSS**: إطار عمل CSS يعتمد على الأدوات (utility-first) يسمح بتصميمات مخصصة سريعة من خلال تجميع فئات الأدوات.
+- **Sass**: معالج CSS شهير يمتد بخصائص مثل المتغيرات والقواعد المتداخلة والمزج (mixins).
+- **CSS-in-JS**: تضمين CSS مباشرة في مكونات JavaScript، مما يتيح تنسيقات ديناميكية ومحددة النطاق.
+
+تعرف على المزيد حول كل طريقة من خلال استكشاف الوثائق الخاصة بها:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/01-images.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/01-images.mdx
new file mode 100644
index 00000000..7a0297fe
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/01-images.mdx
@@ -0,0 +1,375 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:47.932Z
+title: تحسين الصور
+nav_title: الصور
+description: قم بتحسين صورك باستخدام مكون `next/image` المدمج.
+related:
+  title: مرجع API
+  description: تعلم المزيد حول واجهة برمجة التطبيقات (API) الخاصة بـ next/image.
+  links:
+    - app/api-reference/components/image
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مكون الصورة](https://github.com/vercel/next.js/tree/canary/examples/image-component)
+
+</details>
+
+وفقًا لـ [Web Almanac](https://almanac.httparchive.org)، تشكل الصور جزءًا كبيرًا من [وزن الصفحة](https://almanac.httparchive.org/en/2022/page-weight#content-type-and-file-formats) النموذجية لموقع الويب ويمكن أن يكون لها تأثير كبير على [أداء LCP](https://almanac.httparchive.org/en/2022/performance#lcp-image-optimization) لموقعك.
+
+يمتد مكون الصورة في Next.js عنصر `<img>` HTML بميزات لتحسين الصور تلقائيًا:
+
+- **تحسين الحجم:** تقديم صور بحجم مناسب لكل جهاز تلقائيًا، باستخدام صيغ صور حديثة مثل WebP وAVIF.
+- **الاستقرار المرئي:** منع [انزياح التخطيط](/learn/seo/web-performance/cls) تلقائيًا عند تحميل الصور.
+- **تحميل أسرع للصفحات:** يتم تحميل الصور فقط عند دخولها نطاق الرؤية باستخدام التحميل البطيء (lazy loading) الأصلي للمتصفح، مع وجود عناصر نائبة ضبابية اختيارية.
+- **مرونة الأصول:** تغيير حجم الصور حسب الطلب، حتى للصور المخزنة على خوادم بعيدة.
+
+> **🎥 شاهد:** تعلم المزيد حول كيفية استخدام `next/image` → [يوتيوب (9 دقائق)](https://youtu.be/IU_qq_c_lKA).
+
+## الاستخدام
+
+```js
+import Image from 'next/image'
+```
+
+ثم يمكنك تحديد `src` لصورتك (محلية أو بعيدة).
+
+### الصور المحلية
+
+لاستخدام صورة محلية، قم باستيراد ملفات الصور الخاصة بك `.jpg` أو `.png` أو `.webp`.
+
+سيقوم Next.js [بتحديد تلقائيًا](#image-sizing) `العرض` و`الارتفاع` لصورتك بناءً على الملف المستورد. تُستخدم هذه القيم لمنع [انزياح التخطيط التراكمي](https://nextjs.org/learn/seo/web-performance/cls) أثناء تحميل صورتك.
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+import profilePic from './me.png'
+
+export default function Page() {
+  return (
+    <Image
+      src={profilePic}
+      alt="صورة المؤلف"
+      // width={500} يتم توفيرها تلقائيًا
+      // height={500} يتم توفيرها تلقائيًا
+      // blurDataURL="data:..." يتم توفيرها تلقائيًا
+      // placeholder="blur" // تأثير ضبابي اختياري أثناء التحميل
+    />
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import Image from 'next/image'
+import profilePic from '../public/me.png'
+
+export default function Page() {
+  return (
+    <Image
+      src={profilePic}
+      alt="صورة المؤلف"
+      // width={500} يتم توفيرها تلقائيًا
+      // height={500} يتم توفيرها تلقائيًا
+      // blurDataURL="data:..." يتم توفيرها تلقائيًا
+      // placeholder="blur" // تأثير ضبابي اختياري أثناء التحميل
+    />
+  )
+}
+```
+
+</PagesOnly>
+
+> **تحذير:** لا يتم دعم `await import()` الديناميكي أو `require()`. يجب أن يكون الاستيراد ثابتًا حتى يمكن تحليله في وقت البناء.
+
+يمكنك تكوين `localPatterns` اختياريًا في ملف `next.config.js` الخاص بك للسماح بصور محددة وحظر جميع الصور الأخرى.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    localPatterns: [
+      {
+        pathname: '/assets/images/**',
+        search: '',
+      },
+    ],
+  },
+}
+```
+
+### الصور البعيدة
+
+لاستخدام صورة بعيدة، يجب أن تكون خاصية `src` عبارة عن سلسلة URL.
+
+نظرًا لأن Next.js لا يمكنه الوصول إلى الملفات البعيدة أثناء عملية البناء، ستحتاج إلى توفير خصائص [`العرض`](/docs/app/api-reference/components/image#width)، [`الارتفاع`](/docs/app/api-reference/components/image#height) و [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) الاختيارية يدويًا.
+
+تُستخدم سمات `العرض` و`الارتفاع` لاستنتاج نسبة العرض إلى الارتفاع الصحيحة للصورة وتجنب انزياح التخطيط عند تحميل الصورة. لا تحدد `العرض` و`الارتفاع` حجم ملف الصورة المعروض. تعلم المزيد حول [تحديد حجم الصورة](#image-sizing).
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <Image
+      src="https://s3.amazonaws.com/my-bucket/profile.png"
+      alt="صورة المؤلف"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+للسماح بتحسين الصور بشكل آمن، حدد قائمة بأنماط URL المدعومة في `next.config.js`. كن محددًا قدر الإمكان لمنع الاستخدام الضار. على سبيل المثال، سوف يسمح التكوين التالي فقط بالصور من دلو AWS S3 محدد:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 's3.amazonaws.com',
+        port: '',
+        pathname: '/my-bucket/**',
+        search: '',
+      },
+    ],
+  },
+}
+```
+
+تعلم المزيد حول تكوين [`remotePatterns`](/docs/app/api-reference/components/image#remotepatterns). إذا كنت تريد استخدام عناوين URL نسبية لـ `src` الصورة، استخدم [`loader`](/docs/app/api-reference/components/image#loader).
+
+### النطاقات
+
+في بعض الأحيان قد ترغب في تحسين صورة بعيدة، ولكن مع الاستمرار في استخدام واجهة برمجة تطبيقات تحسين الصور المدمجة في Next.js. للقيام بذلك، اترك `loader` على إعداداته الافتراضية وأدخل عنوان URL مطلق لخاصية `src` للصورة.
+
+لحماية تطبيقك من المستخدمين الضارين، يجب عليك تحديد قائمة بأسماء المضيفين البعيدة التي تنوي استخدامها مع مكون `next/image`.
+
+> تعلم المزيد حول تكوين [`remotePatterns`](/docs/app/api-reference/components/image#remotepatterns).
+
+### المحملات (Loaders)
+
+لاحظ أنه في [المثال السابق](#local-images)، تم توفير عنوان URL جزئي (`"/me.png"`) لصورة محلية. هذا ممكن بسبب بنية المحمل (loader).
+
+المحمل هو دالة تقوم بإنشاء عناوين URL لصورتك. يقوم بتعديل `src` المقدم، وإنشاء عناوين URL متعددة لطلب الصورة بأحجام مختلفة. تُستخدم عناوين URL المتعددة هذه في إنشاء [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) تلقائيًا، بحيث يتم تقديم زوار موقعك صورة بحجم مناسب لمنطقة العرض الخاصة بهم.
+
+المحمل الافتراضي لتطبيقات Next.js يستخدم واجهة برمجة تطبيقات تحسين الصور المدمجة، والتي تقوم بتحسين الصور من أي مكان على الويب، ثم تقديمها مباشرة من خادم الويب Next.js. إذا كنت ترغب في تقديم صورك مباشرة من شبكة توصيل المحتوى (CDN) أو خادم صور، يمكنك كتابة دالة محمل خاصة بك ببضعة أسطر من JavaScript.
+
+يمكنك تحديد محمل لكل صورة باستخدام خاصية [`loader`](/docs/app/api-reference/components/image#loader)، أو على مستوى التطبيق باستخدام تكوين [`loaderFile`](/docs/app/api-reference/components/image#loaderfile).
+
+## الأولوية
+
+يجب عليك إضافة خاصية `priority` إلى الصورة التي ستكون [أكبر عنصر محتوى مرئي (LCP)](https://web.dev/lcp/#what-elements-are-considered) لكل صفحة. يتيح ذلك لـ Next.js إعطاء أولوية خاصة للصورة للتحميل (على سبيل المثال من خلال علامات التحميل المسبق أو تلميحات الأولوية)، مما يؤدي إلى تحسن ملحوظ في LCP.
+
+عادة ما يكون عنصر LCP هو أكبر صورة أو كتلة نصية مرئية ضمن نطاق الرؤية للصفحة. عند تشغيل `next dev`، سترى تحذيرًا في وحدة التحكم إذا كان عنصر LCP عبارة عن `<Image>` بدون خاصية `priority`.
+
+بمجرد تحديد صورة LCP، يمكنك إضافة الخاصية كما يلي:
+
+<PagesOnly>
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <>
+      <h1>الصفحة الرئيسية</h1>
+      <Image
+        src="/me.png"
+        alt="صورة المؤلف"
+        width={500}
+        height={500}
+        priority
+      />
+      <p>مرحبًا بكم في صفحتي الرئيسية!</p>
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+import profilePic from '../public/me.png'
+
+export default function Page() {
+  return <Image src={profilePic} alt="صورة المؤلف" priority />
+}
+```
+
+</AppOnly>
+
+راجع المزيد حول الأولوية في [توثيق مكون `next/image`](/docs/app/api-reference/components/image#priority).
+
+## تحديد حجم الصورة
+
+إحدى الطرق الأكثر شيوعًا التي تؤثر بها الصور سلبًا على الأداء هي من خلال [انزياح التخطيط](/learn/seo/web-performance/cls)، حيث تدفع الصورة العناصر الأخرى على الصفحة أثناء تحميلها. هذه المشكلة مزعجة جدًا للمستخدمين لدرجة أن لها مقياس ويب أساسي خاص بها يسمى [انزياح التخطيط التراكمي (CLS)](https://web.dev/cls/). طريقة تجنب انزياح التخطيط الناتج عن الصور هي [تحديد حجم صورك دائمًا](https://web.dev/optimize-cls/#images-without-dimensions). هذا يسمح للمتصفح بحجز مساحة كافية للصورة قبل تحميلها.
+
+نظرًا لأن `next/image` مصمم لضمان نتائج أداء جيدة، لا يمكن استخدامه بطريقة تساهم في انزياح التخطيط، ويجب تحديد حجمه بإحدى الطرق الثلاث التالية:
+
+1. تلقائيًا، باستخدام [استيراد ثابت](#local-images)
+2. صراحةً، من خلال تضمين خاصية [`العرض`](/docs/app/api-reference/components/image#width) و [`الارتفاع`](/docs/app/api-reference/components/image#height)
+3. ضمنيًا، باستخدام [fill](/docs/app/api-reference/components/image#fill) مما يتسبب في توسيع الصورة لملء العنصر الأب.
+
+> **ماذا لو كنت لا أعرف حجم صوري؟**
+>
+> إذا كنت تصل إلى الصور من مصدر لا تعرف أحجامها، فهناك عدة أشياء يمكنك القيام بها:
+>
+> **استخدم `fill`**
+>
+> تسمح خاصية [`fill`](/docs/app/api-reference/components/image#fill) بتحديد حجم صورتك بواسطة العنصر الأب. فكر في استخدام CSS لإعطاء العنصر الأب للصورة مساحة على الصفحة مع خاصية [`sizes`](/docs/app/api-reference/components/image#sizes) لتتناسب مع أي نقاط توقف لاستعلامات الوسائط. يمكنك أيضًا استخدام [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit) مع `fill`، `contain`، أو `cover`، و [`object-position`](https://developer.mozilla.org/docs/Web/CSS/object-position) لتحديد كيفية احتلال الصورة لتلك المساحة.
+>
+> **توحيد صورك**
+>
+> إذا كنت تقدم الصور من مصدر تتحكم فيه، فكر في تعديل خط أنابيب الصور لتوحيد الصور إلى حجم معين.
+>
+> **تعديل استدعاءات API الخاصة بك**
+>
+> إذا كان تطبيقك يسترد عناوين URL للصور باستخدام استدعاء API (مثل نظام إدارة المحتوى CMS)، فقد تتمكن من تعديل استدعاء API لإرجاع أبعاد الصورة مع عنوان URL.
+
+إذا لم تنجح أي من الطرق المقترحة لتحديد حجم صورك، فإن مكون `next/image` مصمم للعمل جيدًا في الصفحة إلى جانب عناصر `<img>` القياسية.
+
+## التنسيق
+
+تنسيق مكون الصورة مشابه لتنسيق عنصر `<img>` عادي، ولكن هناك بعض الإرشادات التي يجب مراعاتها:
+
+- استخدم `className` أو `style`، وليس `styled-jsx`.
+  - في معظم الحالات، نوصي باستخدام خاصية `className`. يمكن أن يكون هذا وحدة [CSS Module](/docs/app/building-your-application/styling/css-modules) مستوردة، أو [صفحة أنماط عامة](/docs/app/building-your-application/styling/css-modules#global-styles)، إلخ.
+  - يمكنك أيضًا استخدام خاصية `style` لتعيين أنماط مضمنة.
+  - لا يمكنك استخدام [styled-jsx](/docs/app/building-your-application/styling/css-in-js) لأنه محدد للمكون الحالي (ما لم تحدد النمط كـ `global`).
+- عند استخدام `fill`، يجب أن يحتوي العنصر الأب على `position: relative`
+  - هذا ضروري لعرض عنصر الصورة بشكل صحيح في هذا الوضع.
+- عند استخدام `fill`، يجب أن يحتوي العنصر الأب على `display: block`
+  - هذا هو الإعداد الافتراضي لعناصر `<div>` ولكن يجب تحديده بخلاف ذلك.
+
+## أمثلة
+
+### متجاوب
+
+<Image
+  alt="صورة متجاوبة تملأ عرض وارتفاع الحاوية الأب"
+  srcLight="/docs/light/responsive-image.png"
+  srcDark="/docs/dark/responsive-image.png"
+  width="1600"
+  height="629"
+/>
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Responsive() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <Image
+        alt="جبال"
+        // استيراد صورة سوف
+        // يحدد العرض والارتفاع تلقائيًا
+        src={mountains}
+        sizes="100vw"
+        // اجعل الصورة تعرض بعرض كامل
+        style={{
+          width: '100%',
+          height: 'auto',
+        }}
+      />
+    </div>
+  )
+}
+```
+
+### ملء الحاوية
+
+<Image
+  alt="شبكة من الصور تملأ عرض الحاوية الأب"
+  srcLight="/docs/light/fill-container.png"
+  srcDark="/docs/dark/fill-container.png"
+  width="1600"
+  height="529"
+/>
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Fill() {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridGap: '8px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
+      }}
+    >
+      <div style={{ position: 'relative', height: '400px' }}>
+        <Image
+          alt="جبال"
+          src={mountains}
+          fill
+          sizes="(min-width: 808px) 50vw, 100vw"
+          style={{
+            objectFit: 'cover', // cover, contain, none
+          }}
+        />
+      </div>
+      {/* والمزيد من الصور في الشبكة... */}
+    </div>
+  )
+}
+```
+
+### صورة الخلفية
+
+<Image
+  alt="صورة خلفية تأخذ عرض وارتفاع الصفحة بالكامل"
+  srcLight="/docs/light/background-image.png"
+  srcDark="/docs/dark/background-image.png"
+  width="1600"
+  height="427"
+/>
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Background() {
+  return (
+    <Image
+      alt="جبال"
+      src={mountains}
+      placeholder="blur"
+      quality={100}
+      fill
+      sizes="100vw"
+      style={{
+        objectFit: 'cover',
+      }}
+    />
+  )
+}
+```
+
+للحصول على أمثلة لمكون الصورة المستخدم مع الأنماط المختلفة، راجع [معرض مكون الصورة](https://image-component.nextjs.gallery).
+
+## خصائص أخرى
+
+[**عرض جميع الخصائص المتاحة لمكون `next/image`.**](/docs/app/api-reference/components/image)
+
+## التكوين
+
+يمكن تكوين مكون `next/image` وواجهة برمجة تطبيقات تحسين الصور في Next.js في ملف [`next.config.js`](/docs/app/api-reference/next-config-js). تتيح لك هذه التكوينات [تمكين الصور البعيدة](/docs/app/api-reference/components/image#remotepatterns)، [تحديد نقاط توقف مخصصة للصور](/docs/app/api-reference/components/image#devicesizes)، [تغيير سلوك التخزين المؤقت](/docs/app/api-reference/components/image#caching-behavior) والمزيد.
+
+[**اقرأ توثيق تكوين الصور الكامل لمزيد من المعلومات.**](/docs/app/api-reference/components/image#configuration-options)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/02-videos.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/02-videos.mdx
new file mode 100644
index 00000000..7a1fa71d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/02-videos.mdx
@@ -0,0 +1,252 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:29.035Z
+title: تحسين الفيديو
+nav_title: مقاطع الفيديو
+description: توصيات وأفضل الممارسات لتحسين مقاطع الفيديو في تطبيق Next.js الخاص بك.
+---
+
+توضح هذه الصفحة كيفية استخدام مقاطع الفيديو مع تطبيقات Next.js، مع عرض كيفية تخزين وعرض ملفات الفيديو دون التأثير على الأداء.
+
+## استخدام `<video>` و `<iframe>`
+
+يمكن تضمين مقاطع الفيديو في الصفحة باستخدام وسم HTML **`<video>`** لمقاطع الفيديو المباشرة و **`<iframe>`** لمقاطع الفيديو المستضافة على منصات خارجية.
+
+### `<video>`
+
+يمكن لوسم HTML [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) تضمين محتوى الفيديو المستضاف ذاتيًا أو المقدم مباشرة، مما يسمح بالتحكم الكامل في التشغيل والمظهر.
+
+```jsx filename="app/ui/video.jsx"
+export function Video() {
+  return (
+    <video width="320" height="240" controls preload="none">
+      <source src="/path/to/video.mp4" type="video/mp4" />
+      <track
+        src="/path/to/captions.vtt"
+        kind="subtitles"
+        srcLang="en"
+        label="English"
+      />
+      Your browser does not support the video tag.
+    </video>
+  )
+}
+```
+
+### سمات شائعة لوسم `<video>`
+
+| السمة         | الوصف                                                                                               | مثال القيمة                        |
+| ------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `src`         | يحدد مصدر ملف الفيديو.                                                                             | `<video src="/path/to/video.mp4" />` |
+| `width`       | يحدد عرض مشغل الفيديو.                                                                             | `<video width="320" />`              |
+| `height`      | يحدد ارتفاع مشغل الفيديو.                                                                          | `<video height="240" />`             |
+| `controls`    | إذا كان موجودًا، يعرض مجموعة التحكم الافتراضية للتشغيل.                                             | `<video controls />`                 |
+| `autoPlay`    | يبدأ تشغيل الفيديو تلقائيًا عند تحميل الصفحة. ملاحظة: تختلف سياسات التشغيل التلقائي بين المتصفحات. | `<video autoPlay />`                 |
+| `loop`        | يعيد تشغيل الفيديو تلقائيًا.                                                                       | `<video loop />`                     |
+| `muted`       | يكتم الصوت افتراضيًا. غالبًا ما يستخدم مع `autoPlay`.                                              | `<video muted />`                    |
+| `preload`     | يحدد كيفية تحميل الفيديو مسبقًا. القيم: `none`, `metadata`, `auto`.                                | `<video preload="none" />`           |
+| `playsInline` | يمكن التشغيل المضمن على أجهزة iOS، وغالبًا ما يكون ضروريًا لعمل التشغيل التلقائي على iOS Safari.   | `<video playsInline />`              |
+
+> **معلومة مفيدة**: عند استخدام سمة `autoPlay`، من المهم تضمين سمة `muted` لضمان تشغيل الفيديو تلقائيًا في معظم المتصفحات وسمة `playsInline` لتوافق أجهزة iOS.
+
+للحصول على قائمة كاملة بسمات الفيديو، راجع [توثيق MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes).
+
+### أفضل ممارسات الفيديو
+
+- **محتوى احتياطي:** عند استخدام وسم `<video>`، قم بتضمين محتوى احتياطي داخل الوسم للمتصفحات التي لا تدعم تشغيل الفيديو.
+- **ترجمات أو تعليقات:** قم بتضمين ترجمات أو تعليقات للمستخدمين الصم أو ضعاف السمع. استخدم وسم [`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) مع عناصر `<video>` لتحديد مصادر ملفات الترجمة.
+- **عناصر تحكم قابلة للوصول:** يوصى باستخدام عناصر تحكم HTML5 القياسية للتنقل بلوحة المفاتيح وتوافق قارئات الشاشة. للاحتياجات المتقدمة، فكر في استخدام مشغلات خارجية مثل [react-player](https://github.com/cookpete/react-player) أو [video.js](https://videojs.com/)، والتي توفر عناصر تحكم قابلة للوصول وتجربة متسقة عبر المتصفحات.
+
+### `<iframe>`
+
+يسمح وسم HTML `<iframe>` بتضمين مقاطع الفيديو من منصات خارجية مثل YouTube أو Vimeo.
+
+```jsx filename="app/page.jsx"
+export default function Page() {
+  return (
+    <iframe
+      src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
+      frameborder="0"
+      allowfullscreen
+    />
+  )
+}
+```
+
+### سمات شائعة لوسم `<iframe>`
+
+| السمة             | الوصف                                                                 | مثال القيمة                          |
+| ----------------- | --------------------------------------------------------------------- | ------------------------------------ |
+| `src`             | عنوان URL للصفحة المضمنة.                                             | `<iframe src="https://example.com" />` |
+| `width`           | يحدد عرض الإطار المضمن.                                               | `<iframe width="500" />`               |
+| `height`          | يحدد ارتفاع الإطار المضمن.                                            | `<iframe height="300" />`              |
+| `frameborder`     | يحدد ما إذا كان سيتم عرض حدود حول الإطار المضمن أم لا.                | `<iframe frameborder="0" />`           |
+| `allowfullscreen` | يسمح بعرض محتوى الإطار المضمن في وضع ملء الشاشة.                      | `<iframe allowfullscreen />`           |
+| `sandbox`         | يسمح بمجموعة إضافية من القيود على المحتوى داخل الإطار المضمن.         | `<iframe sandbox />`                   |
+| `loading`         | تحسين سلوك التحميل (مثل التحميل البطيء).                              | `<iframe loading="lazy" />`            |
+| `title`           | يوفر عنوانًا للإطار المضمن لدعم إمكانية الوصول.                        | `<iframe title="Description" />`       |
+
+للحصول على قائمة كاملة بسمات iframe، راجع [توثيق MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes).
+
+### اختيار طريقة تضمين الفيديو
+
+هناك طريقتان يمكنك من خلالهما تضمين مقاطع الفيديو في تطبيق Next.js الخاص بك:
+
+- **مقاطع الفيديو المستضافة ذاتيًا أو الملفات المباشرة:** استخدم وسم `<video>` لتضمين مقاطع الفيديو المستضافة ذاتيًا للحالات التي تتطلب تحكمًا تفصيليًا في وظائف ومظهر المشغل. تتيح طريقة التكامل هذه في Next.js تخصيصًا وتحكمًا في محتوى الفيديو الخاص بك.
+- **استخدام خدمات استضافة الفيديو (YouTube، Vimeo، إلخ):** لخدمات استضافة الفيديو مثل YouTube أو Vimeo، ستقوم بتضمين مشغلاتهم المستندة إلى iframe باستخدام وسم `<iframe>`. بينما تحد هذه الطريقة من بعض التحكم في المشغل، فإنها توفر سهولة في الاستخدام والميزات التي توفرها هذه المنصات.
+
+اختر طريقة التضمين التي تتماشى مع متطلبات تطبيقك وتجربة المستخدم التي تهدف إلى تقديمها.
+
+### تضمين مقاطع الفيديو المستضافة خارجيًا
+
+لتضمين مقاطع الفيديو من المنصات الخارجية، يمكنك استخدام Next.js لجلب معلومات الفيديو و React Suspense للتعامل مع حالة الاحتياط أثناء التحميل.
+
+**1. إنشاء مكون خادم لتضمين الفيديو**
+
+الخطوة الأولى هي إنشاء [مكون خادم](https://nextjs.org/docs/app/building-your-application/rendering/server-components) يقوم بإنشاء iframe المناسب لتضمين الفيديو. سيقوم هذا المكون بجلب عنوان URL المصدر للفيديو وعرض iframe.
+
+```jsx filename="app/ui/video-component.jsx"
+export default async function VideoComponent() {
+  const src = await getVideoSrc()
+
+  return <iframe src={src} frameborder="0" allowfullscreen />
+}
+```
+
+**2. بث مكون الفيديو باستخدام React Suspense**
+
+بعد إنشاء مكون الخادم لتضمين الفيديو، تكون الخطوة التالية هي [بث](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming) المكون باستخدام [React Suspense](https://react.dev/reference/react/Suspense).
+
+```jsx filename="app/page.jsx"
+import { Suspense } from 'react'
+import VideoComponent from '../ui/VideoComponent.jsx'
+
+export default function Page() {
+  return (
+    <section>
+      <Suspense fallback={<p>جاري تحميل الفيديو...</p>}>
+        <VideoComponent />
+      </Suspense>
+      {/* محتوى آخر للصفحة */}
+    </section>
+  )
+}
+```
+
+> **معلومة مفيدة**: عند تضمين مقاطع الفيديو من المنصات الخارجية، ضع في الاعتبار أفضل الممارسات التالية:
+>
+> - تأكد من أن تضمينات الفيديو متجاوبة. استخدم CSS لجعل iframe أو مشغل الفيديو يتكيف مع أحجام الشاشات المختلفة.
+> - نفذ [استراتيجيات لتحميل مقاطع الفيديو](https://yoast.com/site-speed-tips-for-faster-video/) بناءً على ظروف الشبكة، خاصة للمستخدمين الذين لديهم خطط بيانات محدودة.
+
+يؤدي هذا النهج إلى تجربة مستخدم أفضل حيث يمنع انسداد الصفحة، مما يعني أن المستخدم يمكنه التفاعل مع الصفحة أثناء بث مكون الفيديو.
+
+لحمل أكثر تفاعلاً وغنيًا بالمعلومات، فكر في استخدام هيكل تحميل كواجهة احتياطية. بدلاً من عرض رسالة تحميل بسيطة، يمكنك عرض هيكل يشبه مشغل الفيديو مثل هذا:
+
+```jsx filename="app/page.jsx"
+import { Suspense } from 'react'
+import VideoComponent from '../ui/VideoComponent.jsx'
+import VideoSkeleton from '../ui/VideoSkeleton.jsx'
+
+export default function Page() {
+  return (
+    <section>
+      <Suspense fallback={<VideoSkeleton />}>
+        <VideoComponent />
+      </Suspense>
+      {/* محتوى آخر للصفحة */}
+    </section>
+  )
+}
+```
+
+## مقاطع الفيديو المستضافة ذاتيًا
+
+قد يكون استضافة مقاطع الفيديو ذاتيًا مفضلاً لعدة أسباب:
+
+- **تحكم كامل واستقلالية:** يمنحك الاستضافة الذاتية إدارة مباشرة لمحتوى الفيديو الخاص بك، من التشغيل إلى المظهر، مما يضمن الملكية الكاملة والتحكم، بعيدًا عن قيود المنصات الخارجية.
+- **تخصيص للاحتياجات المحددة:** مثالي للاحتياجات الفريدة، مثل مقاطع الفيديو الخلفية الديناميكية، حيث يسمح بالتخصيص المصمم ليناسب احتياجات التصميم والوظائف.
+- **اعتبارات الأداء وقابلية التوسع:** اختر حلول التخزين عالية الأداء وقابلة للتوسع لدعم الزيادة في حركة المرور وحجم المحتوى بشكل فعال.
+- **التكلفة والتكامل:** وازن بين تكاليف التخزين وعرض النطاق الترددي مع الحاجة إلى تكامل سهل في إطار عمل Next.js والنظام البيئي التكنولوجي الأوسع.
+
+### استخدام Vercel Blob لاستضافة الفيديو
+
+يوفر [Vercel Blob](https://vercel.com/docs/storage/vercel-blob?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) طريقة فعالة لاستضافة مقاطع الفيديو، حيث يوفر حل تخزين سحابي قابل للتوسع يعمل بشكل جيد مع Next.js. إليك كيفية استضافة فيديو باستخدام Vercel Blob:
+
+**1. تحميل فيديو إلى Vercel Blob**
+
+في لوحة تحكم Vercel، انتقل إلى علامة التبويب "التخزين" وحدد متجر [Vercel Blob](https://vercel.com/docs/storage/vercel-blob?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) الخاص بك. في الزاوية العلوية اليمنى من جدول Blob، ابحث وانقر على زر "تحميل". ثم اختر ملف الفيديو الذي ترغب في تحميله. بعد اكتمال التحميل، سيظهر ملف الفيديو في جدول Blob.
+
+بدلاً من ذلك، يمكنك تحميل الفيديو الخاص بك باستخدام إجراء خادم. للحصول على تعليمات مفصلة، راجع توثيق Vercel حول [التحميل من جانب الخادم](https://vercel.com/docs/storage/vercel-blob/server-upload). كما يدعم Vercel أيضًا [التحميل من جانب العميل](https://vercel.com/docs/storage/vercel-blob/client-upload). قد تكون هذه الطريقة مفضلة لبعض حالات الاستخدام.
+
+**2. عرض الفيديو في Next.js**
+
+بمجرد تحميل الفيديو وتخزينه، يمكنك عرضه في تطبيق Next.js الخاص بك. إليك مثال لكيفية القيام بذلك باستخدام وسم `<video>` و React Suspense:
+
+```jsx filename="app/page.jsx"
+import { Suspense } from 'react'
+import { list } from '@vercel/blob'
+
+export default function Page() {
+  return (
+    <Suspense fallback={<p>جاري تحميل الفيديو...</p>}>
+      <VideoComponent fileName="my-video.mp4" />
+    </Suspense>
+  )
+}
+
+async function VideoComponent({ fileName }) {
+  const { blobs } = await list({
+    prefix: fileName,
+    limit: 1,
+  })
+  const { url } = blobs[0]
+
+  return (
+    <video controls preload="none" aria-label="مشغل فيديو">
+      <source src={url} type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  )
+}
+```
+
+في هذا النهج، تستخدم الصفحة عنوان URL لـ `@vercel/blob` لعرض الفيديو باستخدام `VideoComponent`. يتم استخدام React Suspense لعرض واجهة احتياطية حتى يتم جلب عنوان URL للفيديو ويكون الفيديو جاهزًا للعرض.
+
+### إضافة ترجمات إلى الفيديو الخاص بك
+
+إذا كان لديك ترجمات للفيديو الخاص بك، فيمكنك إضافتها بسهولة باستخدام عنصر `<track>` داخل وسم `<video>` الخاص بك. يمكنك جلب ملف الترجمة من [Vercel Blob](https://vercel.com/docs/storage/vercel-blob?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) بنفس طريقة ملف الفيديو. إليك كيفية تحديث `<VideoComponent>` لتضمين الترجمات.
+
+```jsx filename="app/page.jsx"
+async function VideoComponent({ fileName }) {
+  const {blobs} = await list({
+    prefix: fileName,
+    limit: 2
+  });
+  const { url } = blobs[0];
+  const { url: captionsUrl } = blobs[1];
+
+  return (
+    <video controls preload="none" aria-label="مشغل فيديو">
+      <source src={url} type="video/mp4" />
+      <track
+        src={captionsUrl}
+        kind="subtitles"
+        srcLang="en"
+        label="English">
+      Your browser does not support the video tag.
+    </video>
+  );
+};
+```
+
+باتباع هذا النهج، يمكنك استضافة وتكامل مقاطع الفيديو في تطبيقات Next.js الخاصة بك بشكل فعال.
+
+## الموارد
+
+لمواصلة التعرف على تحسين الفيديو وأفضل الممارسات، يرجى الرجوع إلى الموارد التالية:
+
+- **فهم تنسيقات الفيديو وبرامج الترميز:** اختر التنسيق وبرنامج الترميز المناسبين، مثل MP4 للت
+
+### فاستلي (Fastly)
+
+- تعرّف على المزيد حول دمج حلول فاستلي (Fastly) لـ[الفيديو حسب الطلب (VOD)](https://www.fastly.com/products/streaming-media/video-on-demand) ووسائط البث في إطار عمل نكست.جيه إس (Next.js).
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/03-fonts.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/03-fonts.mdx
new file mode 100644
index 00000000..1a1db002
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/03-fonts.mdx
@@ -0,0 +1,644 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:48.430Z
+title: تحسين الخطوط
+nav_title: الخطوط
+description: قم بتحسين خطوط الويب لتطبيقك باستخدام محملي `next/font` المدمجين.
+related:
+  title: مرجع API
+  description: تعلم المزيد عن واجهة برمجة تطبيقات next/font.
+  links:
+    - app/api-reference/components/font
+---
+
+{/* المحتوى مشترك بين موجهي التطبيق والصفحات. استخدم مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+[**`next/font`**](/docs/app/api-reference/components/font) سيقوم تلقائيًا بتحسين خطوطك (بما في ذلك الخطوط المخصصة) وإزالة طلبات الشبكة الخارجية لتحسين الخصوصية والأداء.
+
+> **🎥 شاهد:** تعلم المزيد عن استخدام `next/font` → [YouTube (6 دقائق)](https://www.youtube.com/watch?v=L8_98i_bMMA).
+
+يتضمن `next/font` **استضافة ذاتية تلقائية مدمجة** لأي ملف خط. هذا يعني أنه يمكنك تحميل خطوط الويب بشكل مثالي دون أي تغيير في التخطيط، بفضل خاصية CSS `size-adjust` المستخدمة.
+
+كما يسمح لك نظام الخطوط الجديد هذا باستخدام جميع خطوط جوجل بسهولة مع مراعاة الأداء والخصوصية. يتم تنزيل ملفات CSS والخطوط في وقت البناء واستضافتها ذاتيًا مع بقية مواردك الثابتة. **لا يتم إرسال أي طلبات إلى جوجل من المتصفح.**
+
+## خطوط جوجل
+
+استضف أي خط من خطوط جوجل ذاتيًا تلقائيًا. يتم تضمين الخطوط في النشر وتقديمها من نفس النطاق كنشرك. **لا يتم إرسال أي طلبات إلى جوجل من المتصفح.**
+
+ابدأ باستيراد الخط الذي ترغب في استخدامه من `next/font/google` كدالة. نوصي باستخدام [الخطوط المتغيرة](https://fonts.google.com/variablefonts) للحصول على أفضل أداء ومرونة.
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter } from 'next/font/google'
+
+// إذا كنت تحمل خطًا متغيرًا، لا تحتاج إلى تحديد وزن الخط
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter } from 'next/font/google'
+
+// إذا كنت تحمل خطًا متغيرًا، لا تحتاج إلى تحديد وزن الخط
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+إذا لم تتمكن من استخدام خط متغير، **ستحتاج إلى تحديد وزن**:
+
+```tsx filename="app/layout.tsx" switcher
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={roboto.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={roboto.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لاستخدام الخط في جميع صفحاتك، أضفه إلى ملف [`_app.js`](/docs/pages/building-your-application/routing/custom-app) تحت `/pages` كما يلي:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+// إذا كنت تحمل خطًا متغيرًا، لا تحتاج إلى تحديد وزن الخط
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={inter.className}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+إذا لم تتمكن من استخدام خط متغير، **ستحتاج إلى تحديد وزن**:
+
+```jsx filename="pages/_app.js"
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+  weight: '400',
+  subsets: ['latin'],
+})
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={roboto.className}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+</PagesOnly>
+
+يمكنك تحديد أوزان و/أو أنماط متعددة باستخدام مصفوفة:
+
+```jsx filename="app/layout.js"
+const roboto = Roboto({
+  weight: ['400', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+> **معلومة مفيدة:** استخدم شرطة سفلية (_) لأسماء الخطوط التي تحتوي على كلمات متعددة. مثلاً `Roboto Mono` يجب استيرادها كـ `Roboto_Mono`.
+
+<PagesOnly>
+
+### تطبيق الخط في `<head>`
+
+يمكنك أيضًا استخدام الخط بدون غلاف و `className` عن طريق حقنه داخل `<head>` كما يلي:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <style jsx global>{`
+        html {
+          font-family: ${inter.style.fontFamily};
+        }
+      `}</style>
+      <Component {...pageProps} />
+    </>
+  )
+}
+```
+
+### استخدام في صفحة واحدة
+
+لاستخدام الخط في صفحة واحدة، أضفه إلى الصفحة المحددة كما يلي:
+
+```jsx filename="pages/index.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function Home() {
+  return (
+    <div className={inter.className}>
+      <p>مرحبًا بالعالم</p>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+### تحديد مجموعة فرعية
+
+يتم [تقسيم](https://fonts.google.com/knowledge/glossary/subsetting) خطوط جوجل تلقائيًا. هذا يقلل حجم ملف الخط ويحسن الأداء. ستحتاج إلى تعريف أي من هذه المجموعات الفرعية تريد تحميلها مسبقًا. إذا فشلت في تحديد أي مجموعات فرعية بينما [`preload`](/docs/app/api-reference/components/font#preload) مضبوط على `true`، سيؤدي ذلك إلى تحذير.
+
+يمكن القيام بذلك عن طريق إضافته إلى استدعاء الدالة:
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+const inter = Inter({ subsets: ['latin'] })
+```
+
+```jsx filename="app/layout.js" switcher
+const inter = Inter({ subsets: ['latin'] })
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+const inter = Inter({ subsets: ['latin'] })
+```
+
+</PagesOnly>
+
+راجع [مرجع واجهة برمجة تطبيقات الخط](/docs/app/api-reference/components/font) لمزيد من المعلومات.
+
+### استخدام خطوط متعددة
+
+يمكنك استيراد واستخدام خطوط متعددة في تطبيقك. هناك نهجان يمكنك اتباعهما.
+
+النهج الأول هو إنشاء دالة مساعدة تصدر خطًا، تستورده، وتطبق `className` الخاص به حيثما يحتاج. هذا يضمن تحميل الخط مسبقًا فقط عند عرضه:
+
+```ts filename="app/fonts.ts" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+export const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+```js filename="app/fonts.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+export const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { inter } from './fonts'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { inter } from './fonts'
+
+export default function Layout({ children }) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import { roboto_mono } from './fonts'
+
+export default function Page() {
+  return (
+    <>
+      <h1 className={roboto_mono.className}>صفحتي</h1>
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { roboto_mono } from './fonts'
+
+export default function Page() {
+  return (
+    <>
+      <h1 className={roboto_mono.className}>صفحتي</h1>
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+في المثال أعلاه، سيتم تطبيق `Inter` عالميًا، ويمكن استيراد `Roboto Mono` وتطبيقه حسب الحاجة.
+
+بدلاً من ذلك، يمكنك إنشاء [متغير CSS](/docs/app/api-reference/components/font#variable) واستخدامه مع حل CSS المفضل لديك:
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+import styles from './global.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  variable: '--font-roboto-mono',
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>
+        <h1>تطبيقي</h1>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  variable: '--font-roboto-mono',
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>
+        <h1>تطبيقي</h1>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+```css filename="app/global.css"
+html {
+  font-family: var(--font-inter);
+}
+
+h1 {
+  font-family: var(--font-roboto-mono);
+}
+```
+
+في المثال أعلاه، سيتم تطبيق `Inter` عالميًا، وسيتم تنسيق أي علامات `<h1>` باستخدام `Roboto Mono`.
+
+> **توصية:** استخدم خطوط متعددة بحذر لأن كل خط جديد هو مورد إضافي يجب على العميل تنزيله.
+
+## الخطوط المحلية
+
+استورد `next/font/local` وحدد `src` لملف الخط المحلي الخاص بك. نوصي باستخدام [الخطوط المتغيرة](https://fonts.google.com/variablefonts) للحصول على أفضل أداء ومرونة.
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import localFont from 'next/font/local'
+
+// يمكن وضع ملفات الخطوط داخل `app`
+const myFont = localFont({
+  src: './my-font.woff2',
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={myFont.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import localFont from 'next/font/local'
+
+// يمكن وضع ملفات الخطوط داخل `app`
+const myFont = localFont({
+  src: './my-font.woff2',
+  display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={myFont.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import localFont from 'next/font/local'
+
+// يمكن وضع ملفات الخطوط داخل `pages`
+const myFont = localFont({ src: './my-font.woff2' })
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={myFont.className}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+</PagesOnly>
+
+إذا كنت تريد استخدام ملفات متعددة لعائلة خط واحدة، يمكن أن يكون `src` مصفوفة:
+
+```js
+const roboto = localFont({
+  src: [
+    {
+      path: './Roboto-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './Roboto-Italic.woff2',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './Roboto-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './Roboto-BoldItalic.woff2',
+      weight: '700',
+      style: 'italic',
+    },
+  ],
+})
+```
+
+راجع [مرجع واجهة برمجة تطبيقات الخط](/docs/app/api-reference/components/font) لمزيد من المعلومات.
+
+## مع Tailwind CSS
+
+يمكن استخدام `next/font` مع [Tailwind CSS](https://tailwindcss.com/) من خلال [متغير CSS](/docs/app/api-reference/components/font#css-variables).
+
+في المثال أدناه، نستخدم الخط `Inter` من `next/font/google` (يمكنك استخدام أي خط من جوجل أو الخطوط المحلية). قم بتحميل خطك باستخدام خيار `variable` لتعريف اسم متغير CSS الخاص بك وتعيينه إلى `inter`. ثم استخدم `inter.variable` لإضافة متغير CSS إلى مستند HTML الخاص بك.
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto-mono',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto-mono',
+})
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+})
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={`${inter.variable} font-sans`}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+
+</PagesOnly>
+
+أخيرًا، أضف متغير CSS إلى [إعدادات Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css#configuring-tailwind):
+
+```js filename="tailwind.config.js"
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+        mono: ['var(--font-roboto-mono)'],
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+يمكنك الآن استخدام فئات الأداة `font-sans` و `font-mono` لتطبيق الخط على عناصرك.
+
+## التحميل المسبق
+
+<AppOnly>
+عند استدعاء دالة خط في صفحة من موقعك، لا يكون الخط متاحًا عالميًا ولا يتم تحميله مسبقًا على جميع المسارات. بدلاً من ذلك، يتم تحميل الخط مسبقًا فقط على المسارات ذات الصلة بناءً على نوع الملف الذي يتم استخدامه فيه:
+
+- إذا كانت [صفحة فريدة](/docs/app/building-your-application/routing/pages-and-layouts#pages)، يتم تحميلها مسبقًا على المسار الفريد لتلك الصفحة.
+- إذا كانت [تخطيط](/docs/app/building-your-application/routing/pages-and-layouts#layouts)، يتم تحميلها مسبقًا على جميع المسارات المضمنة في التخطيط.
+- إذا كانت [تخطيط الجذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)، يتم تحميلها مسبقًا على جميع المسارات.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استدعاء دالة خط في صفحة من موقعك، لا يكون الخط متاحًا عالميًا ولا يتم تحميله مسبقًا على جميع المسارات. بدلاً من ذلك، يتم تحميل الخط مسبقًا فقط على المسار/المسارات ذات الصلة بناءً على نوع الملف الذي يتم استخدامه فيه:
+
+- إذا كانت [صفحة فريدة](/docs/pages/building-your-application/routing/pages-and-layouts)، يتم تحميلها مسبقًا على المسار الفريد لتلك الصفحة
+- إذا كانت في [التطبيق المخصص](/docs/pages/building-your-application/routing/custom-app)، يتم تحميلها مسبقًا على جميع مسارات الموقع تحت `/pages`
+
+</PagesOnly>
+
+## إعادة استخدام الخطوط
+
+في كل مرة تستدعي فيها دالة `localFont` أو خط جوجل، يتم استضافة هذا الخط كنسخة واحدة في تطبيقك. لذلك، إذا قمت بتحميل نفس دالة الخط في ملفات متعددة، يتم استضافة عدة نسخ من نفس الخط. في هذه الحالة، يوصى بما يلي:
+
+- استدعاء دالة محمل الخط في ملف مشترك واحد
+- تصديره كمتغير ثابت
+- استيراد المتغير في كل ملف ترغب في استخدام هذا الخط فيه
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/04-metadata.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
new file mode 100644
index 00000000..57ccad95
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
@@ -0,0 +1,370 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:44:23.531Z
+title: البيانات الوصفية (Metadata)
+description: استخدم Metadata API لتعريف البيانات الوصفية في أي تخطيط أو صفحة.
+related:
+  description: عرض جميع خيارات Metadata API.
+  links:
+    - app/api-reference/functions/generate-metadata
+    - app/api-reference/file-conventions/metadata
+    - app/api-reference/functions/generate-viewport
+---
+
+يحتوي Next.js على Metadata API يمكن استخدامه لتعريف البيانات الوصفية لتطبيقك (مثل علامات `meta` و `link` داخل عنصر `head` في HTML) لتحسين تحسين محركات البحث (SEO) وإمكانية المشاركة على الويب.
+
+هناك طريقتان لإضافة بيانات وصفية لتطبيقك:
+
+- **البيانات الوصفية المعتمدة على التكوين**: قم بتصدير [كائن `metadata` ثابت](/docs/app/api-reference/functions/generate-metadata#metadata-object) أو دالة [`generateMetadata` ديناميكية](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) في ملف `layout.js` أو `page.js`.
+- **البيانات الوصفية المعتمدة على الملفات**: أضف ملفات خاصة ثابتة أو مُنشأة ديناميكيًا إلى مقاطع المسار.
+
+مع هذين الخيارين، سيقوم Next.js تلقائيًا بإنشاء عناصر `<head>` ذات الصلة لصفحاتك. يمكنك أيضًا إنشاء صور OG ديناميكية باستخدام منشئ [`ImageResponse`](/docs/app/api-reference/functions/image-response).
+
+## البيانات الوصفية الثابتة
+
+لتعريف البيانات الوصفية الثابتة، قم بتصدير [كائن `Metadata`](/docs/app/api-reference/functions/generate-metadata#metadata-object) من ملف `layout.js` أو ملف `page.js` ثابت.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+```jsx filename="layout.js | page.js" switcher
+export const metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+لجميع الخيارات المتاحة، راجع [مرجع API](/docs/app/api-reference/functions/generate-metadata).
+
+## البيانات الوصفية الديناميكية
+
+يمكنك استخدام دالة `generateMetadata` لجلب البيانات الوصفية التي تتطلب قيمًا ديناميكية.
+
+```tsx filename="app/products/[id]/page.tsx" switcher
+import type { Metadata, ResolvingMetadata } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية الأصلية وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }: Props) {}
+```
+
+```jsx filename="app/products/[id]/page.js" switcher
+export async function generateMetadata({ params, searchParams }, parent) {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية الأصلية وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }) {}
+```
+
+لجميع المعلمات المتاحة، راجع [مرجع API](/docs/app/api-reference/functions/generate-metadata).
+
+> **معلومة مفيدة**:
+>
+> - كل من البيانات الوصفية الثابتة والديناميكية عبر `generateMetadata` **مدعومة فقط في مكونات الخادم (Server Components)**.
+> - طلبات `fetch` يتم [تخزينها مؤقتًا تلقائيًا](/docs/app/building-your-application/caching#request-memoization) لنفس البيانات عبر `generateMetadata`، `generateStaticParams`، التخطيطات، الصفحات، ومكونات الخادم. يمكن استخدام [`cache` من React](/docs/app/building-your-application/caching#request-memoization) إذا كان `fetch` غير متاح.
+> - سينتظر Next.js اكتمال جلب البيانات داخل `generateMetadata` قبل بث واجهة المستخدم إلى العميل. هذا يضمن أن الجزء الأول من [الاستجابة المبثوثة](/docs/app/building-your-application/routing/loading-ui-and-streaming) يتضمن علامات `<head>`.
+
+## البيانات الوصفية المعتمدة على الملفات
+
+هذه الملفات الخاصة متاحة للبيانات الوصفية:
+
+- [favicon.ico, apple-icon.jpg, and icon.jpg](/docs/app/api-reference/file-conventions/metadata/app-icons)
+- [opengraph-image.jpg and twitter-image.jpg](/docs/app/api-reference/file-conventions/metadata/opengraph-image)
+- [robots.txt](/docs/app/api-reference/file-conventions/metadata/robots)
+- [sitemap.xml](/docs/app/api-reference/file-conventions/metadata/sitemap)
+
+يمكنك استخدام هذه الملفات للبيانات الوصفية الثابتة، أو يمكنك إنشاء هذه الملفات برمجيًا باستخدام الكود.
+
+للتنفيذ والأمثلة، راجع [مرجع Metadata Files API](/docs/app/api-reference/file-conventions/metadata) و [إنشاء الصور الديناميكية](#dynamic-image-generation).
+
+## السلوك
+
+البيانات الوصفية المعتمدة على الملفات لها أولوية أعلى وستتجاوز أي بيانات وصفية معتمدة على التكوين.
+
+### الحقول الافتراضية
+
+هناك علامتي `meta` افتراضيتين تتم إضافتهما دائمًا حتى إذا لم يحدد المسار بيانات وصفية:
+
+- [علامة meta charset](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-charset) تحدد ترميز الأحرف للموقع.
+- [علامة meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) تحدد عرض viewport ومقياسه ليتناسب مع الأجهزة المختلفة.
+
+```html
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+```
+
+> **معلومة مفيدة**: يمكنك تجاوز علامة [`viewport`](/docs/app/api-reference/functions/generate-metadata#viewport) الافتراضية.
+
+### الترتيب
+
+يتم تقييم البيانات الوصفية بالترتيب، بدءًا من مقطع الجذر وصولاً إلى المقطع الأقرب إلى مقطع `page.js` النهائي. على سبيل المثال:
+
+1. `app/layout.tsx` (تخطيط الجذر)
+2. `app/blog/layout.tsx` (تخطيط المدونة المتداخل)
+3. `app/blog/[slug]/page.tsx` (صفحة المدونة)
+
+### الدمج
+
+باتباع [ترتيب التقييم](#ordering)، يتم دمج كائنات البيانات الوصفية المصدرة من مقاطع متعددة في نفس المسار **بشكل سطحي** لتشكيل ناتج البيانات الوصفية النهائي للمسار. يتم **استبدال** المفاتيح المكررة بناءً على ترتيبها.
+
+هذا يعني أن البيانات الوصفية ذات الحقول المتداخلة مثل [`openGraph`](/docs/app/api-reference/functions/generate-metadata#opengraph) و [`robots`](/docs/app/api-reference/functions/generate-metadata#robots) التي تم تعريفها في مقطع سابق يتم **تجاوزها** بواسطة آخر مقطع يقوم بتعريفها.
+
+#### تجاوز الحقول
+
+```jsx filename="app/layout.js"
+export const metadata = {
+  title: 'Acme',
+  openGraph: {
+    title: 'Acme',
+    description: 'Acme is a...',
+  },
+}
+```
+
+```jsx filename="app/blog/page.js"
+export const metadata = {
+  title: 'Blog',
+  openGraph: {
+    title: 'Blog',
+  },
+}
+
+// الناتج:
+// <title>Blog</title>
+// <meta property="og:title" content="Blog" />
+```
+
+في المثال أعلاه:
+
+- `title` من `app/layout.js` يتم **استبداله** بـ `title` في `app/blog/page.js`.
+- جميع حقول `openGraph` من `app/layout.js` يتم **استبدالها** في `app/blog/page.js` لأن `app/blog/page.js` يحدد بيانات `openGraph`. لاحظ غياب `openGraph.description`.
+
+إذا كنت ترغب في مشاركة بعض الحقول المتداخلة بين المقاطع أثناء تجاوز البعض الآخر، يمكنك استخراجها إلى متغير منفصل:
+
+```jsx filename="app/shared-metadata.js"
+export const openGraphImage = { images: ['http://...'] }
+```
+
+```jsx filename="app/page.js"
+import { openGraphImage } from './shared-metadata'
+
+export const metadata = {
+  openGraph: {
+    ...openGraphImage,
+    title: 'Home',
+  },
+}
+```
+
+```jsx filename="app/about/page.js"
+import { openGraphImage } from '../shared-metadata'
+
+export const metadata = {
+  openGraph: {
+    ...openGraphImage,
+    title: 'About',
+  },
+}
+```
+
+في المثال أعلاه، يتم مشاركة صورة OG بين `app/layout.js` و `app/about/page.js` بينما العناوين مختلفة.
+
+#### وراثة الحقول
+
+```jsx filename="app/layout.js"
+export const metadata = {
+  title: 'Acme',
+  openGraph: {
+    title: 'Acme',
+    description: 'Acme is a...',
+  },
+}
+```
+
+```jsx filename="app/about/page.js"
+export const metadata = {
+  title: 'About',
+}
+
+// الناتج:
+// <title>About</title>
+// <meta property="og:title" content="Acme" />
+// <meta property="og:description" content="Acme is a..." />
+```
+
+**ملاحظات**
+
+- `title` من `app/layout.js` يتم **استبداله** بـ `title` في `app/about/page.js`.
+- جميع حقول `openGraph` من `app/layout.js` يتم **وراثتها** في `app/about/page.js` لأن `app/about/page.js` لا يحدد بيانات `openGraph`.
+
+## إنشاء الصور الديناميكية
+
+يسمح منشئ `ImageResponse` بإنشاء صور ديناميكية باستخدام JSX و CSS. هذا مفيد لإنشاء صور وسائل التواصل الاجتماعي مثل صور Open Graph وبطاقات Twitter وغيرها.
+
+يستخدم `ImageResponse` [Edge Runtime](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#edge-runtime)، ويقوم Next.js تلقائيًا بإضافة العناوين الصحيحة للصور المخزنة مؤقتًا عند الحافة، مما يساعد في تحسين الأداء وتقليل إعادة الحساب.
+
+لاستخدامه، يمكنك استيراد `ImageResponse` من `next/og`:
+
+```jsx filename="app/about/route.js"
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+
+export async function GET() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 128,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          textAlign: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        Hello world!
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 600,
+    }
+  )
+}
+```
+
+يتكامل `ImageResponse` جيدًا مع واجهات Next.js الأخرى، بما في ذلك [Route Handlers](/docs/app/building-your-application/routing/route-handlers) والبيانات الوصفية المعتمدة على الملفات. على سبيل المثال، يمكنك استخدام `ImageResponse` في ملف `opengraph-image.tsx` لإنشاء صور Open Graph أثناء وقت البناء أو ديناميكيًا عند وقت الطلب.
+
+يدعم `ImageResponse` خصائص CSS الشائعة بما في ذلك flexbox والتحديد المطلق، الخطوط المخصصة، التفاف النص، المركزة، والصور المتداخلة. [راجع القائمة الكاملة لخصائص CSS المدعومة](/docs/app/api-reference/functions/image-response).
+
+> **معلومة مفيدة**:
+>
+> - تتوفر أمثلة في [Vercel OG Playground](https://og-playground.vercel.app/).
+> - يستخدم `ImageResponse` [@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)، [Satori](https://github.com/vercel/satori)، و Resvg لتحويل HTML و CSS إلى PNG.
+> - فقط Edge Runtime مدعوم. لن يعمل Node.js الافتراضي.
+> - فقط flexbox ومجموعة فرعية من خصائص CSS مدعومة. التخطيطات المتقدمة (مثل `display: grid`) لن تعمل.
+> - الحد الأقصى لحجم الحزمة هو `500KB`. يشمل حجم الحزمة JSX، CSS، الخطوط، الصور، وأي أصول أخرى. إذا تجاوزت الحد، فكر في تقليل حجم أي أصول أو جلبها أثناء التشغيل.
+> - فقط تنسيقات الخطوط `ttf`، `otf`، و `woff` مدعومة. لتعظيم سرعة تحليل الخط، يُفضل استخدام `ttf` أو `otf` بدلاً من `woff`.
+
+## JSON-LD
+
+[JSON-LD](https://json-ld.org/) هو تنسيق للبيانات المنظمة التي يمكن استخدامها من قبل محركات البحث لفهم محتواك. على سبيل المثال، يمكنك استخدامه لوصف شخص، حدث، منظمة، فيلم، كتاب، وصفة، والعديد من أنواع الكيانات الأخرى.
+
+توصيتنا الحالية لـ JSON-LD هي عرض البيانات المنظمة كعلامة `<script>` في مكونات `layout.js` أو `page.js`. على سبيل المثال:
+
+```tsx filename="app/products/[id]/page.tsx" switcher
+export default async function Page({ params }) {
+  const product = await getProduct(params.id)
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    image: product.image,
+    description: product.description,
+  }
+
+  return (
+    <section>
+      {/* إضافة JSON-LD إلى صفحتك */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      {/* ... */}
+    </section>
+  )
+}
+```
+
+```jsx filename="app/products/[id]/page.js" switcher
+export default async function Page({ params }) {
+  const product = await getProduct(params.id)
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    image: product.image,
+    description: product.description,
+  }
+
+  return (
+    <section>
+      {/* إضافة JSON-LD إلى صفحتك */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      {/* ... */}
+    </section>
+  )
+}
+```
+
+يمكنك التحقق من صحة بياناتك المنظمة واختبارها باستخدام [Rich Results Test](https://search.google.com/test/rich-results) من Google أو [Schema Markup Validator](https://validator.schema.org/) العام.
+
+يمكنك كتابة JSON-LD باستخدام TypeScript باستخدام حزم المجتمع مثل [`schema-dts`](https://www.npmjs.com/package/schema-dts):
+
+```tsx
+import { Product, WithContext } from 'schema-dts'
+
+const jsonLd: WithContext<Product> = {
+  '@context': 'https://schema.org',
+  '@type': 'Product',
+  name: 'Next.js Sticker',
+  image: 'https://nextjs.org/imgs/sticker.png',
+  description: 'Dynamic at the speed of static.',
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/05-scripts.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/05-scripts.mdx
new file mode 100644
index 00000000..ee1b3be1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/05-scripts.mdx
@@ -0,0 +1,377 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:43:48.231Z
+title: تحسين النصوص البرمجية
+nav_title: النصوص البرمجية
+description: تحسين النصوص البرمجية لجهات خارجية باستخدام مكون Script المدمج.
+related:
+  title: مرجع API
+  description: تعلم المزيد حول واجهة next/script API.
+  links:
+    - app/api-reference/components/script
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه تطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<AppOnly>
+
+### نصوص برمجية للتخطيط
+
+لتحميل نص برمجي لجهة خارجية لعدة مسارات، استورد `next/script` وقم بتضمين النص البرمجي مباشرة في مكون التخطيط الخاص بك:
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <section>{children}</section>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import Script from 'next/script'
+
+export default function DashboardLayout({ children }) {
+  return (
+    <>
+      <section>{children}</section>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+يتم جلب النص البرمجي لجهة خارجية عند الوصول إلى مسار المجلد (مثل `dashboard/page.js`) أو أي مسار متداخل (مثل `dashboard/settings/page.js`) من قبل المستخدم. سيتأكد Next.js من تحميل النص البرمجي **مرة واحدة فقط**، حتى إذا انتقل المستخدم بين عدة مسارات في نفس التخطيط.
+
+</AppOnly>
+
+### نصوص برمجية للتطبيق
+
+<AppOnly>
+
+لتحميل نص برمجي لجهة خارجية لجميع المسارات، استورد `next/script` وقم بتضمين النص البرمجي مباشرة في تخطيط الجذر الخاص بك:
+
+```tsx filename="app/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <Script src="https://example.com/script.js" />
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import Script from 'next/script'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <Script src="https://example.com/script.js" />
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لتحميل نص برمجي لجهة خارجية لجميع المسارات، استورد `next/script` وقم بتضمين النص البرمجي مباشرة في `_app` المخصص الخاص بك:
+
+```jsx filename="pages/_app.js"
+import Script from 'next/script'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+سيتم تحميل وتنفيذ هذا النص البرمجي عند الوصول إلى **أي** مسار في تطبيقك. سيتأكد Next.js من تحميل النص البرمجي **مرة واحدة فقط**، حتى إذا انتقل المستخدم بين عدة صفحات.
+
+> **توصية**: نوصي بتضمين النصوص البرمجية لجهات خارجية في صفحات أو تخطيطات محددة فقط لتقليل أي تأثير غير ضروري على الأداء.
+
+### الاستراتيجية
+
+على الرغم من أن السلوك الافتراضي لـ `next/script` يسمح لك بتحميل النصوص البرمجية لجهات خارجية في أي صفحة أو تخطيط، يمكنك ضبط سلوك التحميل باستخدام خاصية `strategy`:
+
+- `beforeInteractive`: تحميل النص البرمجي قبل أي كود Next.js وقبل حدوث أي ترطيب للصفحة.
+- `afterInteractive`: (**الافتراضي**) تحميل النص البرمجي مبكرًا ولكن بعد حدوث بعض الترطيب على الصفحة.
+- `lazyOnload`: تحميل النص البرمجي لاحقًا خلال وقت الفراغ في المتصفح.
+- `worker`: (تجريبي) تحميل النص البرمجي في عامل ويب.
+
+راجع وثائق مرجع [`next/script`](/docs/app/api-reference/components/script#strategy) API لمعرفة المزيد حول كل استراتيجية وحالات استخدامها.
+
+### تفريغ النصوص البرمجية إلى عامل ويب (تجريبي)
+
+> **تحذير:** استراتيجية `worker` ليست مستقرة بعد ولا تعمل مع دليل [`app`](/docs/app/building-your-application/routing/defining-routes). استخدم بحذر.
+
+يتم تفريغ النصوص البرمجية التي تستخدم استراتيجية `worker` وتنفيذها في عامل ويب باستخدام [Partytown](https://partytown.builder.io/). يمكن أن يحسن هذا أداء موقعك من خلال تخصيص الخيط الرئيسي لبقية كود التطبيق الخاص بك.
+
+لا تزال هذه الاستراتيجية تجريبية ويمكن استخدامها فقط إذا تم تمكين علامة `nextScriptWorkers` في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    nextScriptWorkers: true,
+  },
+}
+```
+
+ثم، قم بتشغيل `next` (عادة `npm run dev` أو `yarn dev`) وسيرشدك Next.js خلال تثبيت الحزم المطلوبة لإكمال الإعداد:
+
+```bash filename="Terminal"
+npm run dev
+```
+
+سترى تعليمات مثل هذه: يرجى تثبيت Partytown عن طريق تشغيل `npm install @builder.io/partytown`
+
+بمجرد اكتمال الإعداد، سيؤدي تعريف `strategy="worker"` إلى إنشاء Partytown تلقائيًا في تطبيقك وتفريغ النص البرمجي إلى عامل ويب.
+
+```tsx filename="pages/home.tsx" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/home.js" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+هناك عدد من المقايضات التي يجب مراعاتها عند تحميل نص برمجي لجهة خارجية في عامل ويب. يرجى الاطلاع على وثائق [المقايضات](https://partytown.builder.io/trade-offs) الخاصة بـ Partytown لمزيد من المعلومات.
+
+### نصوص برمجية مضمنة
+
+النصوص البرمجية المضمنة، أو النصوص البرمجية غير المحملة من ملف خارجي، مدعومة أيضًا بواسطة مكون Script. يمكن كتابتها بوضع JavaScript داخل الأقواس المعقوفة:
+
+```jsx
+<Script id="show-banner">
+  {`document.getElementById('banner').classList.remove('hidden')`}
+</Script>
+```
+
+أو باستخدام خاصية `dangerouslySetInnerHTML`:
+
+```jsx
+<Script
+  id="show-banner"
+  dangerouslySetInnerHTML={{
+    __html: `document.getElementById('banner').classList.remove('hidden')`,
+  }}
+/>
+```
+
+> **تحذير**: يجب تعيين خاصية `id` للنصوص البرمجية المضمنة حتى يتمكن Next.js من تتبع وتحسين النص البرمجي.
+
+### تنفيذ كود إضافي
+
+يمكن استخدام معالجي الأحداث مع مكون Script لتنفيذ كود إضافي بعد حدوث حدث معين:
+
+- `onLoad`: تنفيذ الكود بعد انتهاء تحميل النص البرمجي.
+- `onReady`: تنفيذ الكود بعد انتهاء تحميل النص البرمجي وفي كل مرة يتم فيها تحميل المكون.
+- `onError`: تنفيذ الكود إذا فشل تحميل النص البرمجي.
+
+<AppOnly>
+
+ستعمل هذه المعالجات فقط عند استيراد `next/script` واستخدامها داخل [مكون عميل](/docs/app/building-your-application/rendering/client-components) حيث يتم تعريف `"use client"` كأول سطر من الكود:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+راجع مرجع [`next/script`](/docs/app/api-reference/components/script#onload) API لمعرفة المزيد حول كل معالج حدث وعرض الأمثلة.
+
+</AppOnly>
+
+<PagesOnly>
+
+ستعمل هذه المعالجات فقط عند استيراد `next/script` واستخدامها داخل [مكون عميل](/docs/app/building-your-application/rendering/client-components) حيث يتم تعريف `"use client"` كأول سطر من الكود:
+
+```tsx filename="pages/index.tsx" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onLoad={() => {
+          console.log('Script has loaded')
+        }}
+      />
+    </>
+  )
+}
+```
+
+راجع مرجع [`next/script`](/docs/pages/api-reference/components/script#onload) API لمعرفة المزيد حول كل معالج حدث وعرض الأمثلة.
+
+</PagesOnly>
+
+### سمات إضافية
+
+هناك العديد من سمات DOM التي يمكن تعيينها لعنصر `<script>` والتي لا تستخدمها مكون Script، مثل [`nonce`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) أو [سمات بيانات مخصصة](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/data-*). سيؤدي تضمين أي سمات إضافية إلى إعادة توجيهها تلقائيًا إلى عنصر `<script>` النهائي والمحسن المضمن في HTML.
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```tsx filename="pages/index.tsx" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        id="example-script"
+        nonce="XUENAJFW"
+        data-test="script"
+      />
+    </>
+  )
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/06-bundle-analyzer.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/06-bundle-analyzer.mdx
new file mode 100644
index 00000000..5d6ade15
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/06-bundle-analyzer.mdx
@@ -0,0 +1,51 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:06.218Z
+title: أداة تحليل الحزم (Bundle Analyzer)
+description: تحليل حجم حزم JavaScript الخاصة بك باستخدام إضافة @next/bundle-analyzer.
+related:
+  description: تعرف على المزيد حول تحسين تطبيقك للإنتاج.
+  links:
+    - app/building-your-application/deploying/production-checklist
+---
+
+[`@next/bundle-analyzer`](https://www.npmjs.com/package/@next/bundle-analyzer) هي إضافة لـ Next.js تساعدك في إدارة حجم وحدات JavaScript الخاصة بك. تقوم بإنشاء تقرير مرئي لحجم كل وحدة والتبعيات الخاصة بها. يمكنك استخدام هذه المعلومات لإزالة التبعيات الكبيرة، أو تقسيم الكود الخاص بك، أو تحميل بعض الأجزاء فقط عند الحاجة، مما يقلل من كمية البيانات المنقولة إلى العميل.
+
+## التثبيت
+
+قم بتثبيت الإضافة عن طريق تنفيذ الأمر التالي:
+
+```bash
+npm i @next/bundle-analyzer
+# أو
+yarn add @next/bundle-analyzer
+# أو
+pnpm add @next/bundle-analyzer
+```
+
+ثم، أضف إعدادات أداة تحليل الحزم إلى ملف `next.config.js` الخاص بك.
+
+```js filename="next.config.js"
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = withBundleAnalyzer(nextConfig)
+```
+
+## تحليل حزمك
+
+قم بتنفيذ الأمر التالي لتحليل حزمك:
+
+```bash
+ANALYZE=true npm run build
+# أو
+ANALYZE=true yarn build
+# أو
+ANALYZE=true pnpm build
+```
+
+سيقوم التقرير بفتح ثلاث علامات تبويب جديدة في متصفحك، والتي يمكنك فحصها. القيام بذلك بانتظام أثناء التطوير وقبل نشر موقعك يمكن أن يساعدك في تحديد الحزم الكبيرة مبكرًا، وتصميم تطبيقك ليكون أكثر كفاءة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/07-lazy-loading.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/07-lazy-loading.mdx
new file mode 100644
index 00000000..8f33bb57
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/07-lazy-loading.mdx
@@ -0,0 +1,246 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:51.899Z
+title: التحميل المتأخر (Lazy Loading)
+description: تأجيل تحميل المكتبات المستوردة ومكونات React لتحسين أداء تحميل التطبيق.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+يساعد [التحميل المتأخر](https://developer.mozilla.org/docs/Web/Performance/Lazy_loading) في Next.js على تحسين أداء التحميل الأولي للتطبيق عن طريق تقليل كمية JavaScript المطلوبة لعرض مسار.
+
+يسمح لك بتأجيل تحميل **مكونات العميل (Client Components)** والمكتبات المستوردة، وإدراجها في حزمة العميل فقط عند الحاجة إليها. على سبيل المثال، قد ترغب في تأجيل تحميل نافذة مشروطة حتى ينقر المستخدم لفتحها.
+
+هناك طريقتان لتنفيذ التحميل المتأخر في Next.js:
+
+1. استخدام [الاستيراد الديناميكي](#nextdynamic) مع `next/dynamic`
+2. استخدام [`React.lazy()`](https://react.dev/reference/react/lazy) مع [Suspense](https://react.dev/reference/react/Suspense)
+
+بشكل افتراضي، يتم [تقسيم الشفرة (Code Splitting)](https://developer.mozilla.org/docs/Glossary/Code_splitting) تلقائيًا لمكونات الخادم (Server Components)، ويمكنك استخدام [البث (Streaming)](/docs/app/building-your-application/routing/loading-ui-and-streaming) لإرسال أجزاء واجهة المستخدم تدريجيًا من الخادم إلى العميل. ينطبق التحميل المتأخر على مكونات العميل.
+
+## `next/dynamic`
+
+`next/dynamic` هو مزيج من [`React.lazy()`](https://react.dev/reference/react/lazy) و [Suspense](https://react.dev/reference/react/Suspense). يعمل بنفس الطريقة في كل من دليل `app` و `pages` للسماح بالهجرة التدريجية.
+
+## أمثلة
+
+<AppOnly>
+### استيراد مكونات العميل
+
+```jsx filename="app/page.js"
+'use client'
+
+import { useState } from 'react'
+import dynamic from 'next/dynamic'
+
+// مكونات العميل:
+const ComponentA = dynamic(() => import('../components/A'))
+const ComponentB = dynamic(() => import('../components/B'))
+const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
+
+export default function ClientComponentExample() {
+  const [showMore, setShowMore] = useState(false)
+
+  return (
+    <div>
+      {/* يتم التحميل فورًا، ولكن في حزمة عميل منفصلة */}
+      <ComponentA />
+
+      {/* يتم التحميل عند الطلب، فقط عند تحقيق الشرط */}
+      {showMore && <ComponentB />}
+      <button onClick={() => setShowMore(!showMore)}>تبديل</button>
+
+      {/* يتم التحميل فقط على جانب العميل */}
+      <ComponentC />
+    </div>
+  )
+}
+```
+
+### تخطي العرض من جانب الخادم (SSR)
+
+عند استخدام `React.lazy()` و Suspense، سيتم عرض مكونات العميل مسبقًا (SSR) بشكل افتراضي.
+
+إذا كنت تريد تعطيل العرض المسبق لمكون عميل، يمكنك استخدام خيار `ssr` بقيمة `false`:
+
+```jsx
+const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
+```
+
+### استيراد مكونات الخادم
+
+إذا قمت باستيراد مكون خادم (Server Component) بشكل ديناميكي، فسيتم تأجيل تحميل مكونات العميل الفرعية فقط - وليس مكون الخادم نفسه.
+
+```jsx filename="app/page.js"
+import dynamic from 'next/dynamic'
+
+// مكون الخادم:
+const ServerComponent = dynamic(() => import('../components/ServerComponent'))
+
+export default function ServerComponentExample() {
+  return (
+    <div>
+      <ServerComponent />
+    </div>
+  )
+}
+```
+
+### تحميل المكتبات الخارجية
+
+يمكن تحميل المكتبات الخارجية عند الطلب باستخدام دالة [`import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import). هذا المثال يستخدم المكتبة الخارجية `fuse.js` للبحث الضبابي. يتم تحميل الوحدة فقط على العميل بعد إدخال المستخدم في حقل البحث.
+
+```jsx filename="app/page.js"
+'use client'
+
+import { useState } from 'react'
+
+const names = ['Tim', 'Joe', 'Bel', 'Lee']
+
+export default function Page() {
+  const [results, setResults] = useState()
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // تحميل fuse.js ديناميكيًا
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+### إضافة مكون تحميل مخصص
+
+```jsx filename="app/page.js"
+import dynamic from 'next/dynamic'
+
+const WithCustomLoading = dynamic(
+  () => import('../components/WithCustomLoading'),
+  {
+    loading: () => <p>جار التحميل...</p>,
+  }
+)
+
+export default function Page() {
+  return (
+    <div>
+      {/* سيتم عرض مكون التحميل أثناء تحميل <WithCustomLoading/> */}
+      <WithCustomLoading />
+    </div>
+  )
+}
+```
+
+### استيراد التصديرات المسماة
+
+لاستيراد تصدير مسماة ديناميكيًا، يمكنك إعادته من الـ Promise الذي تُرجعه دالة [`import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import):
+
+```jsx filename="components/hello.js"
+'use client'
+
+export function Hello() {
+  return <p>مرحبًا!</p>
+}
+```
+
+```jsx filename="app/page.js"
+import dynamic from 'next/dynamic'
+
+const ClientComponent = dynamic(() =>
+  import('../components/hello').then((mod) => mod.Hello)
+)
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+باستخدام `next/dynamic`، لن يتم تضمين مكون الرأس في حزمة JavaScript الأولية للصفحة. ستقوم الصفحة بعرض `fallback` الخاص بـ Suspense أولاً، ثم مكون `Header` عند حل حدود `Suspense`.
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const DynamicHeader = dynamic(() => import('../components/header'), {
+  loading: () => <p>جار التحميل...</p>,
+})
+
+export default function Home() {
+  return <DynamicHeader />
+}
+```
+
+> **ملاحظة مهمة**: في `import('مسار/إلى/المكون')`، يجب كتابة المسار بشكل صريح. لا يمكن أن يكون سلسلة قالب ولا متغيرًا. بالإضافة إلى ذلك، يجب أن تكون `import()` داخل استدعاء `dynamic()` لكي يتمكن Next.js من مطابقة حزم webpack / معرّفات الوحدات مع استدعاء `dynamic()` المحدد وتحميلها مسبقًا قبل العرض. لا يمكن استخدام `dynamic()` داخل عرض React لأنه يجب وضع علامة عليها في المستوى الأعلى للوحدة لكي يعمل التحميل المسبق، مشابهًا لـ `React.lazy`.
+
+## مع التصديرات المسماة
+
+لاستيراد تصدير مسماة ديناميكيًا، يمكنك إعادته من [الـ Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) الذي تُرجعه [`import()`](https://github.com/tc39/proposal-dynamic-import#example):
+
+```jsx filename="components/hello.js"
+export function Hello() {
+  return <p>مرحبًا!</p>
+}
+
+// pages/index.js
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(() =>
+  import('../components/hello').then((mod) => mod.Hello)
+)
+```
+
+## بدون عرض من جانب الخادم (SSR)
+
+لتحميل مكون ديناميكيًا على جانب العميل فقط، يمكنك استخدام خيار `ssr` لتعطيل العرض من جانب الخادم. هذا مفيد إذا كانت تبعية خارجية أو مكون يعتمد على واجهات برمجة المتصفح مثل `window`.
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const DynamicHeader = dynamic(() => import('../components/header'), {
+  ssr: false,
+})
+```
+
+## مع المكتبات الخارجية
+
+هذا المثال يستخدم المكتبة الخارجية `fuse.js` للبحث الضبابي. يتم تحميل الوحدة فقط في المتصفح بعد إدخال المستخدم في حقل البحث.
+
+```jsx
+import { useState } from 'react'
+
+const names = ['Tim', 'Joe', 'Bel', 'Lee']
+
+export default function Page() {
+  const [results, setResults] = useState()
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // تحميل fuse.js ديناميكيًا
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/08-analytics.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/08-analytics.mdx
new file mode 100644
index 00000000..79fd0b4f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/08-analytics.mdx
@@ -0,0 +1,216 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:35.377Z
+title: التحليلات
+description: قياس وتتبع أداء الصفحة باستخدام Next.js Speed Insights
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يحتوي Next.js على دعم مدمج لقياس وإعداد تقارير لمقاييس الأداء. يمكنك استخدام خطاف `useReportWebVitals` لإدارة التقارير بنفسك، أو بدلاً من ذلك، تقدم Vercel [خدمة مدارة](https://vercel.com/analytics?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لجمع وعرض المقاييس تلقائيًا لك.
+
+## بناء نظامك الخاص
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { useReportWebVitals } from 'next/web-vitals'
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals((metric) => {
+    console.log(metric)
+  })
+
+  return <Component {...pageProps} />
+}
+```
+
+اطلع على [مرجع API](/docs/pages/api-reference/functions/use-report-web-vitals) لمزيد من المعلومات.
+
+</PagesOnly>
+
+<AppOnly>
+
+```jsx filename="app/_components/web-vitals.js"
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    console.log(metric)
+  })
+}
+```
+
+```jsx filename="app/layout.js"
+import { WebVitals } from './_components/web-vitals'
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>
+        <WebVitals />
+        {children}
+      </body>
+    </html>
+  )
+}
+```
+
+> نظرًا لأن خطاف `useReportWebVitals` يتطلب توجيه `"use client"`، فإن النهج الأكثر كفاءة هو إنشاء مكون منفصل يستورده التخطيط الجذري. هذا يحصر حدود العميل حصريًا في مكون `WebVitals`.
+
+اطلع على [مرجع API](/docs/app/api-reference/functions/use-report-web-vitals) لمزيد من المعلومات.
+
+</AppOnly>
+
+## مؤشرات الويب الحيوية (Web Vitals)
+
+[مؤشرات الويب الحيوية](https://web.dev/vitals/) هي مجموعة من المقاييس المفيدة التي تهدف إلى التقاط تجربة المستخدم لصفحة الويب. تتضمن المؤشرات الحيوية التالية:
+
+- [الوقت حتى أول بايت](https://developer.mozilla.org/docs/Glossary/Time_to_first_byte) (TTFB)
+- [الرسم الأول للمحتوى](https://developer.mozilla.org/docs/Glossary/First_contentful_paint) (FCP)
+- [أكبر رسم للمحتوى](https://web.dev/lcp/) (LCP)
+- [تأخر أول إدخال](https://web.dev/fid/) (FID)
+- [تراكم تحول التخطيط](https://web.dev/cls/) (CLS)
+- [التفاعل حتى الرسم التالي](https://web.dev/inp/) (INP)
+
+يمكنك التعامل مع جميع نتائج هذه المقاييس باستخدام خاصية `name`.
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { useReportWebVitals } from 'next/web-vitals'
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // handle FCP results
+      }
+      case 'LCP': {
+        // handle LCP results
+      }
+      // ...
+    }
+  })
+
+  return <Component {...pageProps} />
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```tsx filename="app/_components/web-vitals.tsx" switcher
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // handle FCP results
+      }
+      case 'LCP': {
+        // handle LCP results
+      }
+      // ...
+    }
+  })
+}
+```
+
+```jsx filename="app/_components/web-vitals.js" switcher
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // handle FCP results
+      }
+      case 'LCP': {
+        // handle LCP results
+      }
+      // ...
+    }
+  })
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## مقاييس مخصصة
+
+بالإضافة إلى المقاييس الأساسية المذكورة أعلاه، هناك بعض المقاييس المخصصة الإضافية التي تقيس الوقت الذي تستغرقه الصفحة للترطيب (hydration) والعرض:
+
+- `Next.js-hydration`: الوقت الذي تستغرقه الصفحة لبدء وإنهاء الترطيب (بالميلي ثانية)
+- `Next.js-route-change-to-render`: الوقت الذي تستغرقه الصفحة لبدء العرض بعد تغيير المسار (بالميلي ثانية)
+- `Next.js-render`: الوقت الذي تستغرقه الصفحة لإنهاء العرض بعد تغيير المسار (بالميلي ثانية)
+
+يمكنك التعامل مع جميع نتائج هذه المقاييس بشكل منفصل:
+
+```js
+export function reportWebVitals(metric) {
+  switch (metric.name) {
+    case 'Next.js-hydration':
+      // handle hydration results
+      break
+    case 'Next.js-route-change-to-render':
+      // handle route-change to render results
+      break
+    case 'Next.js-render':
+      // handle render results
+      break
+    default:
+      break
+  }
+}
+```
+
+تعمل هذه المقاييس في جميع المتصفحات التي تدعم [واجهة برمجة تطبيقات توقيت المستخدم (User Timing API)](https://caniuse.com/#feat=user-timing).
+
+</PagesOnly>
+
+## إرسال النتائج إلى أنظمة خارجية
+
+يمكنك إرسال النتائج إلى أي نقطة نهاية لقياس وتتبع أداء المستخدم الحقيقي على موقعك. على سبيل المثال:
+
+```js
+useReportWebVitals((metric) => {
+  const body = JSON.stringify(metric)
+  const url = 'https://example.com/analytics'
+
+  // استخدم `navigator.sendBeacon()` إذا كان متاحًا، مع التراجع إلى `fetch()`.
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(url, body)
+  } else {
+    fetch(url, { body, method: 'POST', keepalive: true })
+  }
+})
+```
+
+> **ملاحظة جيدة**: إذا كنت تستخدم [Google Analytics](https://analytics.google.com/analytics/web/)، فإن استخدام قيمة `id` يمكن أن يسمح لك ببناء توزيعات المقاييس يدويًا (لحساب النسب المئوية، إلخ.)
+
+> ```js
+> useReportWebVitals((metric) => {
+>   // استخدم `window.gtag` إذا قمت بتهيئة Google Analytics كما في هذا المثال:
+>   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
+>   window.gtag('event', metric.name, {
+>     value: Math.round(
+>       metric.name === 'CLS' ? metric.value * 1000 : metric.value
+>     ), // يجب أن تكون القيم أعدادًا صحيحة
+>     event_label: metric.id, // معرف فريد لتحميل الصفحة الحالي
+>     non_interaction: true, // يتجنب التأثير على معدل الارتداد.
+>   })
+> })
+> ```
+>
+> اقرأ المزيد عن [إرسال النتائج إلى Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx
new file mode 100644
index 00000000..55f1b390
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx
@@ -0,0 +1,99 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:08.817Z
+title: التجهيز الآلي (Instrumentation)
+description: تعلم كيفية استخدام التجهيز الآلي لتشغيل التعليمات البرمجية عند بدء تشغيل الخادم في تطبيق Next.js الخاص بك
+related:
+  title: تعرف على المزيد حول التجهيز الآلي
+  links:
+    - app/api-reference/file-conventions/instrumentation
+    - app/api-reference/next-config-js/instrumentationHook
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+التجهيز الآلي (Instrumentation) هو عملية استخدام التعليمات البرمجية لدمج أدوات المراقبة والتسجيل في تطبيقك. هذا يسمح لك بتتبع أداء وسلوك التطبيق، وتصحيح المشكلات في بيئة الإنتاج.
+
+## الاصطلاح
+
+لإعداد التجهيز الآلي، قم بإنشاء ملف `instrumentation.ts|js` في **الدليل الجذري** لمشروعك (أو داخل مجلد [`src`](/docs/app/building-your-application/configuring/src-directory) إذا كنت تستخدم واحدًا).
+
+ثم قم بتصدير دالة `register` في الملف. سيتم استدعاء هذه الدالة **مرة واحدة** عند بدء تشغيل نسخة جديدة من خادم Next.js.
+
+على سبيل المثال، لاستخدام Next.js مع [OpenTelemetry](https://opentelemetry.io/) و [@vercel/otel](https://vercel.com/docs/observability/otel-overview):
+
+```ts filename="instrumentation.ts" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel('next-app')
+}
+```
+
+```js filename="instrumentation.js" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel('next-app')
+}
+```
+
+راجع [مثال Next.js مع OpenTelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) للحصول على تنفيذ كامل.
+
+> **معلومة مفيدة**
+>
+> - هذه الميزة **تجريبية**. لاستخدامها، يجب عليك الموافقة صراحةً عن طريق تعريف [`experimental.instrumentationHook = true;`](/docs/app/api-reference/next-config-js/instrumentationHook) في ملف `next.config.js`.
+> - يجب أن يكون ملف `instrumentation` في جذر مشروعك وليس داخل مجلد `app` أو `pages`. إذا كنت تستخدم مجلد `src`، فضع الملف داخل `src` بجانب `pages` و `app`.
+> - إذا كنت تستخدم خيار [`pageExtensions`](/docs/app/api-reference/next-config-js/pageExtensions) لإضافة لاحقة، فستحتاج أيضًا إلى تحديث اسم ملف `instrumentation` ليتطابق.
+
+## أمثلة
+
+### استيراد ملفات ذات تأثيرات جانبية
+
+في بعض الأحيان، قد يكون من المفيد استيراد ملف في التعليمات البرمجية الخاصة بك بسبب التأثيرات الجانبية التي سيسببها. على سبيل المثال، قد تستورد ملفًا يعرف مجموعة من المتغيرات العامة، ولكنك لا تستخدم الملف المستورد صراحةً في التعليمات البرمجية الخاصة بك. ستظل لديك إمكانية الوصول إلى المتغيرات العامة التي أعلن عنها الحزمة.
+
+نوصي باستيراد الملفات باستخدام صيغة `import` في JavaScript داخل دالة `register`. يوضح المثال التالي استخدامًا أساسيًا لـ `import` في دالة `register`:
+
+```ts filename="instrumentation.ts" switcher
+export async function register() {
+  await import('package-with-side-effect')
+}
+```
+
+```js filename="instrumentation.js" switcher
+export async function register() {
+  await import('package-with-side-effect')
+}
+```
+
+> **معلومة مفيدة:**
+>
+> نوصي باستيراد الملف من داخل دالة `register`، بدلاً من أعلى الملف. من خلال القيام بذلك، يمكنك تجميع جميع التأثيرات الجانبية في مكان واحد في التعليمات البرمجية الخاصة بك، وتجنب أي عواقب غير مقصودة من الاستيراد العام في أعلى الملف.
+
+### استيراد تعليمات برمجية خاصة بوقت التشغيل
+
+يستدعي Next.js دالة `register` في جميع البيئات، لذلك من المهم استيراد أي تعليمات برمجية لا تدعم بيئات تشغيل محددة (مثل [Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#edge-runtime) أو [Node.js](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#nodejs-runtime)) بشكل مشروط. يمكنك استخدام متغير البيئة `NEXT_RUNTIME` للحصول على البيئة الحالية:
+
+```ts filename="instrumentation.ts" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation-node')
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./instrumentation-edge')
+  }
+}
+```
+
+```js filename="instrumentation.js" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation-node')
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./instrumentation-edge')
+  }
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
new file mode 100644
index 00000000..5fc5a229
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
@@ -0,0 +1,368 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:43:14.132Z
+title: OpenTelemetry
+description: تعلم كيفية تتبع أداء تطبيق Next.js باستخدام OpenTelemetry.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+> **معلومة مفيدة**: هذه الميزة **تجريبية**، ويجب عليك تفعيلها يدويًا عن طريق إضافة `experimental.instrumentationHook = true;` في ملف `next.config.js`.
+
+يعد المراقبة والرصد (Observability) أمرًا بالغ الأهمية لفهم وتحسين سلوك وأداء تطبيق Next.js الخاص بك.
+
+مع زيادة تعقيد التطبيقات، يصبح تحديد وتشخيص المشكلات أكثر صعوبة. من خلال استخدام أدوات المراقبة مثل التسجيل والمقاييس، يمكن للمطورين الحصول على رؤى حول سلوك التطبيق وتحديد مجالات التحسين. تمكنك المراقبة من معالجة المشكلات بشكل استباقي قبل أن تصبح كبيرة، وتقديم تجربة مستخدم أفضل. لذلك، يوصى بشدة باستخدام أدوات المراقبة في تطبيقات Next.js لتحسين الأداء وترشيد الموارد وتعزيز تجربة المستخدم.
+
+نوصي باستخدام OpenTelemetry لتتبع أداء تطبيقاتك.
+إنها طريقة محايدة للمنصة لتتبع التطبيقات تتيح لك تغيير مزود المراقبة دون تغيير الكود الخاص بك.
+اقرأ [وثائق OpenTelemetry الرسمية](https://opentelemetry.io/docs/) لمزيد من المعلومات حول OpenTelemetry وكيفية عمله.
+
+تستخدم هذه الوثائق مصطلحات مثل _Span_، _Trace_ أو _Exporter_ في جميع أنحاء المستند، ويمكن العثور على جميعها في [دليل OpenTelemetry للمراقبة](https://opentelemetry.io/docs/concepts/observability-primer/).
+
+يدعم Next.js تتبع OpenTelemetry مباشرةً، مما يعني أننا قمنا بالفعل بتتبع Next.js نفسه.
+عند تفعيل OpenTelemetry، سنقوم تلقائيًا بتغليف كل الكود الخاص بك مثل `getStaticProps` في _spans_ مع سمات مفيدة.
+
+## البدء
+
+OpenTelemetry قابل للتوسيع ولكن إعداده بشكل صحيح يمكن أن يكون مطولًا.
+لهذا السبب أعددنا حزمة `@vercel/otel` لمساعدتك في البدء بسرعة.
+
+### استخدام `@vercel/otel`
+
+للبدء، يجب تثبيت `@vercel/otel`:
+
+```bash filename="Terminal"
+npm install @vercel/otel
+```
+
+<AppOnly>
+
+بعد ذلك، قم بإنشاء ملف [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation) (أو `.js`) مخصص في **الدليل الجذري** للمشروع (أو داخل مجلد `src` إذا كنت تستخدم واحدًا):
+
+</AppOnly>
+
+<PagesOnly>
+
+بعد ذلك، قم بإنشاء ملف [`instrumentation.ts`](/docs/pages/building-your-application/optimizing/instrumentation) (أو `.js`) مخصص في **الدليل الجذري** للمشروع (أو داخل مجلد `src` إذا كنت تستخدم واحدًا):
+
+</PagesOnly>
+
+```ts filename="your-project/instrumentation.ts" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel({ serviceName: 'next-app' })
+}
+```
+
+```js filename="your-project/instrumentation.js" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel({ serviceName: 'next-app' })
+}
+```
+
+راجع [وثائق `@vercel/otel`](https://www.npmjs.com/package/@vercel/otel) لخيارات التكوين الإضافية.
+
+<AppOnly>
+
+> **معلومة مفيدة**
+>
+> - يجب أن يكون ملف `instrumentation` في جذر مشروعك وليس داخل مجلد `app` أو `pages`. إذا كنت تستخدم مجلد `src`، فضع الملف داخل `src` بجانب `pages` و `app`.
+> - إذا كنت تستخدم خيار التكوين [`pageExtensions`](/docs/app/api-reference/next-config-js/pageExtensions) لإضافة لاحقة، فستحتاج أيضًا إلى تحديث اسم ملف `instrumentation` ليتطابق.
+> - لقد أنشأنا مثالًا أساسيًا [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) يمكنك استخدامه.
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**
+>
+> - يجب أن يكون ملف `instrumentation` في جذر مشروعك وليس داخل مجلد `app` أو `pages`. إذا كنت تستخدم مجلد `src`، فضع الملف داخل `src` بجانب `pages` و `app`.
+> - إذا كنت تستخدم خيار التكوين [`pageExtensions`](/docs/pages/api-reference/next-config-js/pageExtensions) لإضافة لاحقة، فستحتاج أيضًا إلى تحديث اسم ملف `instrumentation` ليتطابق.
+> - لقد أنشأنا مثالًا أساسيًا [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) يمكنك استخدامه.
+
+</PagesOnly>
+
+### تكوين OpenTelemetry يدويًا
+
+توفر حزمة `@vercel/otel` العديد من خيارات التكوين وتلبي معظم حالات الاستخدام الشائعة. ولكن إذا لم تكن مناسبة لاحتياجاتك، يمكنك تكوين OpenTelemetry يدويًا.
+
+أولاً، تحتاج إلى تثبيت حزم OpenTelemetry:
+
+```bash filename="Terminal"
+npm install @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http
+```
+
+الآن يمكنك تهيئة `NodeSDK` في ملف `instrumentation.ts`.
+على عكس `@vercel/otel`، فإن `NodeSDK` غير متوافق مع وقت تشغيل الحافة (edge runtime)، لذا تحتاج إلى التأكد من أنك تستوردها فقط عندما يكون `process.env.NEXT_RUNTIME === 'nodejs'`. نوصي بإنشاء ملف جديد `instrumentation.node.ts` تستورده بشكل مشروط فقط عند استخدام node:
+
+```ts filename="instrumentation.ts" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation.node.ts')
+  }
+}
+```
+
+```js filename="instrumentation.js" switcher
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./instrumentation.node.js')
+  }
+}
+```
+
+```ts filename="instrumentation.node.ts" switcher
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { Resource } from '@opentelemetry/resources'
+import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions'
+import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node'
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'next-app',
+  }),
+  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
+})
+sdk.start()
+```
+
+```js filename="instrumentation.node.js" switcher
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { Resource } from '@opentelemetry/resources'
+import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions'
+import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node'
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'next-app',
+  }),
+  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
+})
+sdk.start()
+```
+
+هذا يعادل استخدام `@vercel/otel`، ولكن من الممكن تعديل وتوسيع بعض الميزات التي لا يتم كشفها بواسطة `@vercel/otel`. إذا كنت بحاجة إلى دعم وقت تشغيل الحافة، فسيتعين عليك استخدام `@vercel/otel`.
+
+## اختبار التتبع الخاص بك
+
+تحتاج إلى جامع OpenTelemetry مع خلفية متوافقة لاختبار تتبع OpenTelemetry محليًا.
+نوصي باستخدام [بيئة تطوير OpenTelemetry](https://github.com/vercel/opentelemetry-collector-dev-setup) الخاصة بنا.
+
+إذا كان كل شيء يعمل بشكل جيد، يجب أن تكون قادرًا على رؤية نطاق الخادم الجذري المسمى كـ `GET /requested/pathname`.
+جميع النطاقات الأخرى من هذا التتبع المحدد ستكون متداخلة تحته.
+
+يتتبع Next.js نطاقات أكثر من تلك المنبعثة افتراضيًا.
+لمشاهدة المزيد من النطاقات، يجب عليك تعيين `NEXT_OTEL_VERBOSE=1`.
+
+## النشر
+
+### استخدام جامع OpenTelemetry
+
+عند النشر مع جامع OpenTelemetry، يمكنك استخدام `@vercel/otel`.
+سيعمل هذا على كل من Vercel وعند الاستضافة الذاتية.
+
+#### النشر على Vercel
+
+لقد تأكدنا من أن OpenTelemetry يعمل مباشرةً على Vercel.
+
+اتبع [وثائق Vercel](https://vercel.com/docs/concepts/observability/otel-overview/quickstart) لربط مشروعك بمزود المراقبة.
+
+#### الاستضافة الذاتية
+
+النشر على منصات أخرى هو أيضًا مباشر. ستحتاج إلى تشغيل جامع OpenTelemetry الخاص بك لاستقبال ومعالجة بيانات المراقبة من تطبيق Next.js الخاص بك.
+
+للقيام بذلك، اتبع [دليل البدء بجامع OpenTelemetry](https://opentelemetry.io/docs/collector/getting-started/)، والذي سيرشدك خلال إعداد الجامع وتكوينه لاستقبال البيانات من تطبيق Next.js الخاص بك.
+
+بمجرد تشغيل الجامع الخاص بك، يمكنك نشر تطبيق Next.js الخاص بك على المنصة التي تختارها باتباع أدلة النشر الخاصة بهم.
+
+### مصدرات مخصصة
+
+جامع OpenTelemetry ليس ضروريًا. يمكنك استخدام مصدر OpenTelemetry مخصص مع [`@vercel/otel`](#استخدام-vercelotel) أو [تكوين OpenTelemetry يدويًا](/docs/pages/building-your-application/optimizing/open-telemetry#تكوين-opentelemetry-يدويًا).
+
+## نطاقات مخصصة
+
+يمكنك إضافة نطاق مخصص باستخدام [واجهات برمجة تطبيقات OpenTelemetry](https://opentelemetry.io/docs/instrumentation/js/instrumentation).
+
+```bash filename="Terminal"
+npm install @opentelemetry/api
+```
+
+يوضح المثال التالي دالة تجلب نجوم GitHub وتضيف نطاقًا مخصصًا `fetchGithubStars` لتتبع نتيجة طلب الجلب:
+
+```ts
+import { trace } from '@opentelemetry/api'
+
+export async function fetchGithubStars() {
+  return await trace
+    .getTracer('nextjs-example')
+    .startActiveSpan('fetchGithubStars', async (span) => {
+      try {
+        return await getValue()
+      } finally {
+        span.end()
+      }
+    })
+}
+```
+
+سيتم تنفيذ دالة `register` قبل تشغيل الكود الخاص بك في بيئة جديدة.
+يمكنك البدء في إنشاء نطاقات جديدة، ويجب أن تتم إضافتها بشكل صحيح إلى التتبع المصدر.
+
+## النطاقات الافتراضية في Next.js
+
+يقوم Next.js تلقائيًا بتتبع عدة نطاقات لتوفير رؤى مفيدة حول أداء التطبيق الخاص بك.
+
+تتبع السمات على النطاقات [اتفاقيات OpenTelemetry الدلالية](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/). نضيف أيضًا بعض السمات المخصصة تحت مساحة الاسم `next`:
+
+- `next.span_name` - يكرر اسم النطاق
+- `next.span_type` - كل نوع نطاق له معرف فريد
+- `next.route` - نمط المسار للطلب (مثل `/[param]/user`).
+- `next.rsc` (صواب/خطأ) - ما إذا كان الطلب هو طلب RSC، مثل الجلب المسبق.
+- `next.page`
+  - هذه قيمة داخلية تستخدمها موجه التطبيق.
+  - يمكنك التفكير فيها كمسار لملف خاص (مثل `page.ts`، `layout.ts`، `loading.ts` وغيرها)
+  - يمكن استخدامها كمعرف فريد فقط عند اقترانها بـ `next.route` لأن `/layout` يمكن استخدامها لتحديد كل من `/(groupA)/layout.ts` و `/(groupB)/layout.ts`
+
+### `[http.method] [next.route]`
+
+- `next.span_type`: `BaseServer.handleRequest`
+
+يمثل هذا النطاق النطاق الجذري لكل طلب وارد إلى تطبيق Next.js الخاص بك. يتتبع طريقة HTTP، المسار، الهدف، ورمز حالة الطلب.
+
+السمات:
+
+- [سمات HTTP المشتركة](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#common-attributes)
+  - `http.method`
+  - `http.status_code`
+- [سمات خادم HTTP](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#http-server-semantic-conventions)
+  - `http.route`
+  - `http.target`
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `render route (app) [next.route]`
+
+- `next.span_type`: `AppRender.getBodyResult`.
+
+يمثل هذا النطاق عملية عرض مسار في موجه التطبيق.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `fetch [http.method] [http.url]`
+
+- `next.span_type`: `AppRender.fetch`.
+
+يمثل هذا النطاق طلب الجلب المنفذ في الكود الخاص بك.
+
+السمات:
+
+- [سمات HTTP المشتركة](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#common-attributes)
+  - `http.method`
+- [سمات عميل HTTP](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/http/#http-client)
+  - `http.url`
+  - `net.peer.name`
+  - `net.peer.port` (فقط إذا تم تحديده)
+- `next.span_name`
+- `next.span_type`
+
+يمكن إيقاف هذا النطاق عن طريق تعيين `NEXT_OTEL_FETCH_DISABLED=1` في بيئتك. هذا مفيد عندما تريد استخدام مكتبة تتبع جلب مخصصة.
+
+### `executing api route (app) [next.route]`
+
+- `next.span_type`: `AppRouteRouteHandlers.runHandler`.
+
+يمثل هذا النطاق تنفيذ معالج مسار API في موجه التطبيق.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `getServerSideProps [next.route]`
+
+- `next.span_type`: `Render.getServerSideProps`.
+
+يمثل هذا النطاق تنفيذ `getServerSideProps` لمسار معين.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `getStaticProps [next.route]`
+
+- `next.span_type`: `Render.getStaticProps`.
+
+يمثل هذا النطاق تنفيذ `getStaticProps` لمسار معين.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `render route (pages) [next.route]`
+
+- `next.span_type`: `Render.renderDocument`.
+
+يمثل هذا النطاق عملية عرض المستند لمسار معين.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `generateMetadata [next.page]`
+
+- `next.span_type`: `ResolveMetadata.generateMetadata`.
+
+يمثل هذا النطاق عملية إنشاء بيانات وصفية لصفحة معينة (يمكن أن يحتوي مسار واحد على عدة نطاقات من هذه).
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.page`
+
+### `resolve page components`
+
+- `next.span_type`: `NextNodeServer.findPageComponents`.
+
+يمثل هذا النطاق عملية حل مكونات الصفحة لصفحة معينة.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.route`
+
+### `resolve segment modules`
+
+- `next.span_type`: `NextNodeServer.getLayoutOrPageModule`.
+
+يمثل هذا النطاق تحميل وحدات الكود لتخطيط أو صفحة.
+
+السمات:
+
+- `next.span_name`
+- `next.span_type`
+- `next.segment`
+
+### `start response`
+
+- `next.span_type`: `NextNodeServer.startResponse`.
+
+يمثل هذا النطاق ذو الطول الصفر الوقت الذي تم فيه إرسال البايت الأول في الاستجابة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/11-static-assets.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/11-static-assets.mdx
new file mode 100644
index 00000000..1b3fe27c
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/11-static-assets.mdx
@@ -0,0 +1,52 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:41:16.575Z
+title: الأصول الثابتة في مجلد `public`
+nav_title: الأصول الثابتة
+description: يسمح لك Next.js بتقديم ملفات ثابتة مثل الصور في مجلد public. يمكنك تعلم كيفية عمله هنا.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+يمكن لـ Next.js تقديم ملفات ثابتة مثل الصور تحت مجلد يسمى `public` في الدليل الجذري. يمكن بعد ذلك الإشارة إلى الملفات داخل `public` بواسطة الكود الخاص بك بدءًا من عنوان URL الأساسي (`/`).
+
+على سبيل المثال، يمكن عرض الملف `public/avatars/me.png` عن طريق زيارة المسار `/avatars/me.png`. قد يبدو الكود لعرض تلك الصورة كما يلي:
+
+```jsx filename="avatar.js"
+import Image from 'next/image'
+
+export function Avatar({ id, alt }) {
+  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
+}
+
+export function AvatarOfMe() {
+  return <Avatar id="me" alt="A portrait of me" />
+}
+```
+
+## التخزين المؤقت
+
+لا يمكن لـ Next.js تخزين الأصول في مجلد `public` بشكل آمن لأنها قد تتغير. رؤوس التخزين المؤقت الافتراضية المطبقة هي:
+
+```jsx
+Cache-Control: public, max-age=0
+```
+
+## ملفات الروبوتات، الأيقونات المفضلة وغيرها
+
+<PagesOnly>
+
+المجلد مفيد أيضًا لملفات مثل `robots.txt`، `favicon.ico`، التحقق من موقع Google وأي ملفات ثابتة أخرى (بما في ذلك `.html`). ولكن تأكد من عدم وجود ملف ثابت بنفس اسم ملف في مجلد `pages/` لأن هذا سيؤدي إلى حدوث خطأ. [اقرأ المزيد](/docs/messages/conflicting-public-file-page).
+
+</PagesOnly>
+
+<AppOnly>
+
+بالنسبة لملفات البيانات الوصفية الثابتة مثل `robots.txt`، `favicon.ico` وغيرها، يجب عليك استخدام [ملفات بيانات وصفية خاصة](/docs/app/api-reference/file-conventions/metadata) داخل مجلد `app`.
+
+</AppOnly>
+
+> معلومة مفيدة:
+>
+> - يجب أن يسمى المجلد `public`. لا يمكن تغيير الاسم وهو المجلد الوحيد المستخدم لتقديم الأصول الثابتة.
+> - فقط الأصول الموجودة في مجلد `public` أثناء [وقت البناء](/docs/app/api-reference/cli/next#next-build-options) سيتم تقديمها بواسطة Next.js. الملفات المضافة أثناء وقت الطلب لن تكون متاحة. نوصي باستخدام خدمة طرف ثالث مثل [Vercel Blob](https://vercel.com/docs/storage/vercel-blob?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لتخزين الملفات بشكل دائم.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
new file mode 100644
index 00000000..0fcb3975
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
@@ -0,0 +1,428 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:43:06.300Z
+title: مكتبات الطرف الثالث
+description: تحسين أداء مكتبات الطرف الثالث في تطبيقك باستخدام حزمة `@next/third-parties`.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+**`@next/third-parties`** هي مكتبة توفر مجموعة من المكونات والأدوات التي تحسن الأداء وتجربة المطور لتحميل مكتبات الطرف الثالث الشهيرة في تطبيق Next.js الخاص بك.
+
+جميع تكاملات الطرف الثالث المقدمة من `@next/third-parties` تم تحسينها للأداء وسهولة الاستخدام.
+
+## البدء
+
+للبدء، قم بتثبيت مكتبة `@next/third-parties`:
+
+```bash filename="Terminal"
+npm install @next/third-parties@latest next@latest
+```
+
+{/* للإزالة لاحقًا: هذه الفقرة مؤقتة حتى تصبح الحزمة مستقرة */}
+
+`@next/third-parties` حاليًا مكتبة **تجريبية** قيد التطوير النشط. نوصي بتثبيتها باستخدام علامات **latest** أو **canary** بينما نعمل على إضافة المزيد من تكاملات الطرف الثالث.
+
+## مكتبات جوجل للطرف الثالث
+
+جميع مكتبات الطرف الثالث المدعومة من جوجل يمكن استيرادها من `@next/third-parties/google`.
+
+### مدير علامات جوجل (Google Tag Manager)
+
+يمكن استخدام مكون `GoogleTagManager` لإنشاء حاوية [مدير علامات جوجل](https://developers.google.com/tag-platform/tag-manager) في صفحتك. افتراضيًا، يقوم بجلب النص البرمجي المضمن الأصلي بعد حدوث التمهيد (hydration) في الصفحة.
+
+<AppOnly>
+
+لتحميل مدير علامات جوجل لجميع المسارات، قم بتضمين المكون مباشرة في تخطيط الجذر الخاص بك ومرر معرف حاوية GTM:
+
+```tsx filename="app/layout.tsx" switcher
+import { GoogleTagManager } from '@next/third-parties/google'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <GoogleTagManager gtmId="GTM-XYZ" />
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { GoogleTagManager } from '@next/third-parties/google'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <GoogleTagManager gtmId="GTM-XYZ" />
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لتحميل مدير علامات جوجل لجميع المسارات، قم بتضمين المكون مباشرة في ملف `_app` المخصص الخاص بك ومرر معرف حاوية GTM:
+
+```jsx filename="pages/_app.js"
+import { GoogleTagManager } from '@next/third-parties/google'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <GoogleTagManager gtmId="GTM-XYZ" />
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+لتحميل مدير علامات جوجل لمسار واحد، قم بتضمين المكون في ملف الصفحة الخاص بك:
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import { GoogleTagManager } from '@next/third-parties/google'
+
+export default function Page() {
+  return <GoogleTagManager gtmId="GTM-XYZ" />
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import { GoogleTagManager } from '@next/third-parties/google'
+
+export default function Page() {
+  return <GoogleTagManager gtmId="GTM-XYZ" />
+}
+```
+
+</PagesOnly>
+
+#### إرسال الأحداث
+
+يمكن استخدام دالة `sendGTMEvent` لتتبع تفاعلات المستخدم في صفحتك عن طريق إرسال أحداث باستخدام كائن `dataLayer`. لكي تعمل هذه الدالة، يجب تضمين مكون `<GoogleTagManager />` إما في تخطيط أصل، أو صفحة، أو مكون، أو مباشرة في نفس الملف.
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+'use client'
+
+import { sendGTMEvent } from '@next/third-parties/google'
+
+export function EventButton() {
+  return (
+    <div>
+      <button
+        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
+      >
+        إرسال حدث
+      </button>
+    </div>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import { sendGTMEvent } from '@next/third-parties/google'
+
+export function EventButton() {
+  return (
+    <div>
+      <button
+        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
+      >
+        إرسال حدث
+      </button>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+راجع [وثائق المطور](https://developers.google.com/tag-platform/tag-manager/datalayer) لمدير العلامات لمعرفة المتغيرات والأحداث المختلفة التي يمكن تمريرها إلى الدالة.
+
+#### الخيارات
+
+خيارات لتمريرها إلى مدير علامات جوجل. للحصول على قائمة كاملة بالخيارات، اقرأ [وثائق مدير علامات جوجل](https://developers.google.com/tag-platform/tag-manager/datalayer).
+
+| الاسم            | النوع     | الوصف                                                                     |
+| --------------- | -------- | ------------------------------------------------------------------------------- |
+| `gtmId`         | مطلوب   | معرف حاوية GTM الخاص بك. عادةً ما يبدأ بـ `GTM-`.                              |
+| `dataLayer`     | اختياري | مصفوفة طبقة البيانات لإنشاء الحاوية بها. الافتراضي هو مصفوفة فارغة. |
+| `dataLayerName` | اختياري | اسم طبقة البيانات. الافتراضي هو `dataLayer`.                                |
+| `auth`          | اختياري | قيمة معلمة المصادقة (`gtm_auth`) لمقتطفات البيئة.        |
+| `preview`       | اختياري | قيمة معلمة المعاينة (`gtm_preview`) لمقتطفات البيئة.            |
+
+### تحليلات جوجل (Google Analytics)
+
+يمكن استخدام مكون `GoogleAnalytics` لتضمين [تحليلات جوجل 4](https://developers.google.com/analytics/devguides/collection/ga4) في صفحتك عبر علامة جوجل (`gtag.js`). افتراضيًا، يقوم بجلب النصوص البرمجية الأصلية بعد حدوث التمهيد (hydration) في الصفحة.
+
+> **توصية**: إذا كان مدير علامات جوجل مضمنًا بالفعل في تطبيقك، يمكنك تكوين تحليلات جوجل مباشرة باستخدامه، بدلاً من تضمين تحليلات جوجل كمكون منفصل. راجع [الوثائق](https://developers.google.com/analytics/devguides/collection/ga4/tag-options#what-is-gtm) لمعرفة المزيد عن الاختلافات بين مدير العلامات و`gtag.js`.
+
+<AppOnly>
+
+لتحميل تحليلات جوجل لجميع المسارات، قم بتضمين المكون مباشرة في تخطيط الجذر الخاص بك ومرر معرف القياس الخاص بك:
+
+```tsx filename="app/layout.tsx" switcher
+import { GoogleAnalytics } from '@next/third-parties/google'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <GoogleAnalytics gaId="G-XYZ" />
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { GoogleAnalytics } from '@next/third-parties/google'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <GoogleAnalytics gaId="G-XYZ" />
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لتحميل تحليلات جوجل لجميع المسارات، قم بتضمين المكون مباشرة في ملف `_app` المخصص الخاص بك ومرر معرف القياس الخاص بك:
+
+```jsx filename="pages/_app.js"
+import { GoogleAnalytics } from '@next/third-parties/google'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <GoogleAnalytics gaId="G-XYZ" />
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+لتحميل تحليلات جوجل لمسار واحد، قم بتضمين المكون في ملف الصفحة الخاص بك:
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import { GoogleAnalytics } from '@next/third-parties/google'
+
+export default function Page() {
+  return <GoogleAnalytics gaId="G-XYZ" />
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import { GoogleAnalytics } from '@next/third-parties/google'
+
+export default function Page() {
+  return <GoogleAnalytics gaId="G-XYZ" />
+}
+```
+
+</PagesOnly>
+
+#### إرسال الأحداث
+
+يمكن استخدام دالة `sendGAEvent` لقياس تفاعلات المستخدم في صفحتك عن طريق إرسال أحداث باستخدام كائن `dataLayer`. لكي تعمل هذه الدالة، يجب تضمين مكون `<GoogleAnalytics />` إما في تخطيط أصل، أو صفحة، أو مكون، أو مباشرة في نفس الملف.
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+'use client'
+
+import { sendGAEvent } from '@next/third-parties/google'
+
+export function EventButton() {
+  return (
+    <div>
+      <button
+        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
+      >
+        إرسال حدث
+      </button>
+    </div>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import { sendGAEvent } from '@next/third-parties/google'
+
+export function EventButton() {
+  return (
+    <div>
+      <button
+        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
+      >
+        إرسال حدث
+      </button>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+راجع [وثائق المطور](https://developers.google.com/analytics/devguides/collection/ga4/event-parameters) لتحليلات جوجل لمعرفة المزيد عن معلمات الأحداث.
+
+#### تتبع مشاهدات الصفحات
+
+تقوم تحليلات جوجل تلقائيًا بتتبع مشاهدات الصفحات عند تغيير حالة سجل المتصفح. هذا يعني أن التنقلات بين مسارات Next.js من جانب العميل سترسل بيانات مشاهدات الصفحات دون أي تكوين.
+
+للتأكد من قياس التنقلات من جانب العميل بشكل صحيح، تحقق من تمكين خاصية [_"القياس المعزز"_](https://support.google.com/analytics/answer/9216061#enable_disable) في لوحة التحكم الخاصة بك وتحديد خانة الاختيار _"تغييرات الصفحة بناءً على أحداث سجل المتصفح"_.
+
+> **ملاحظة**: إذا قررت إرسال أحداث مشاهدات الصفحات يدويًا، تأكد من تعطيل قياس مشاهدات الصفحات الافتراضي لتجنب وجود بيانات مكررة. راجع [وثائق المطور](https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag#manual_pageviews) لتحليلات جوجل لمعرفة المزيد.
+
+#### الخيارات
+
+خيارات لتمريرها إلى مكون `<GoogleAnalytics>`.
+
+| الاسم            | النوع     | الوصف                                                                                            |
+| --------------- | -------- | ------------------------------------------------------------------------------------------------------ |
+| `gaId`          | مطلوب   | [معرف القياس](https://support.google.com/analytics/answer/12270356) الخاص بك. عادةً ما يبدأ بـ `G-`. |
+| `dataLayerName` | اختياري | اسم طبقة البيانات. الافتراضي هو `dataLayer`.                                                       |
+
+### تضمين خرائط جوجل (Google Maps Embed)
+
+يمكن استخدام مكون `GoogleMapsEmbed` لإضافة [تضمين خرائط جوجل](https://developers.google.com/maps/documentation/embed/embedding-map) إلى صفحتك. افتراضيًا، يستخدم سمة `loading` للتحميل البطيء (lazy-load) للتضمين أسفل الطية (below the fold).
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import { GoogleMapsEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+  return (
+    <GoogleMapsEmbed
+      apiKey="XYZ"
+      height={200}
+      width="100%"
+      mode="place"
+      q="Brooklyn+Bridge,New+York,NY"
+    />
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import { GoogleMapsEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+  return (
+    <GoogleMapsEmbed
+      apiKey="XYZ"
+      height={200}
+      width="100%"
+      mode="place"
+      q="Brooklyn+Bridge,New+York,NY"
+    />
+  )
+}
+```
+
+</PagesOnly>
+
+#### الخيارات
+
+خيارات لتمريرها إلى تضمين خرائط جوجل. للحصول على قائمة كاملة بالخيارات، اقرأ [وثائق تضمين خرائط جوجل](https://developers.google.com/maps/documentation/embed/embedding-map).
+
+| الاسم              | النوع     | الوصف                                                                                         |
+| ----------------- | -------- | --------------------------------------------------------------------------------------------------- |
+| `apiKey`          | مطلوب   | مفتاح API الخاص بك.                                                                                       |
+| `mode`            | مطلوب   | [وضع الخريطة](https://developers.google.com/maps/documentation/embed/embedding-map#choosing_map_modes) |
+| `height`          | اختياري | ارتفاع التضمين. الافتراضي هو `auto`.                                                            |
+| `width`           | اختياري | عرض التضمين. الافتراضي هو `auto`.                                                             |
+| `style`           | اختياري | تطبيق أنماط على iframe.                                                                          |
+| `allowfullscreen` | اختياري | خاصية للسماح لأجزاء معينة من الخريطة بالذهاب إلى وضع ملء الشاشة.                                              |
+| `loading`         | اختياري | الافتراضي هو lazy. فكر في تغييره إذا كنت تعلم أن التضمين الخاص بك سيكون فوق الطية.                  |
+| `q`               | اختياري | يحدد موقع علامة الخريطة. _قد يكون هذا مطلوبًا اعتمادًا على وضع الخريطة_.                      |
+| `center`          | اختياري | يحدد مركز عرض الخريطة.                                                                 |
+| `zoom`            | اختياري | يحدد مستوى التكبير الأولي للخريطة.                                                                 |
+| `maptype`         | اختياري | يحدد نوع بلاط الخريطة للتحميل.                                                                  |
+| `language`        | اختياري | يحدد اللغة المستخدمة لعناصر واجهة المستخدم وعرض التسميات على بلاط الخريطة.             |
+| `region`          | اختياري | يحدد الحدود والتسميات المناسبة للعرض، بناءً على الحساسيات الجيوسياسية.        |
+
+### تضمين يوتيوب (YouTube Embed)
+
+يمكن استخدام مكون `YouTubeEmbed` لتحميل وعرض تضمين يوتيوب. يقوم هذا المكون بالتحميل بشكل أسرع باستخدام [`lite-youtube-embed`](https://github.com/paulirish/lite-youtube-embed) في الخلفية.
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import { YouTubeEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import { YouTubeEmbed } from '@next/third-parties/google'
+
+export default function Page() {
+  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
+}
+```
+
+</PagesOnly>
+
+#### الخيارات
+
+| الاسم        | النوع     | الوصف                                                                                                                                                                                                  |
+| ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `videoid`   | مطلوب   | معرف فيديو يوتيوب.                                                                                                                                                                                            |
+| `width`     | اختياري | عرض حاوية الفيديو. الافتراضي هو `auto`                                                                                                                                                             |
+| `height`    | اختياري | ارتفاع حاوية الفيديو. الافتراضي هو `auto`                                                                                                                                                            |
+| `playlabel` | اختياري | تسمية مخفية بصريًا لزر التشغيل لإمكانية الوصول.                                                                                                                                               |
+| `params`    | اختياري | معلمات مشغل الفيديو المحددة [هنا](https://developers.google.com/youtube/player_parameters#Parameters). <br/> يتم تمرير المعلمات كسلسلة استعلام. <br/> مثال: `params="controls=0&start=10&end=30"` |
+| `style`     | اختياري | يستخدم لتطبيق الأنماط على حاوية الفيديو.                                                                                                                                                                 |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/13-memory-usage.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/13-memory-usage.mdx
new file mode 100644
index 00000000..f837e249
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/13-memory-usage.mdx
@@ -0,0 +1,99 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:41:24.926Z
+title: استخدام الذاكرة
+description: تحسين استخدام الذاكرة في تطبيقك أثناء التطوير والإنتاج.
+---
+
+مع نمو التطبيقات وزيادة ميزاتها، قد تطلب موارد أكبر عند التطوير محليًا أو إنشاء إصدارات للإنتاج.
+
+دعونا نستكشف بعض الاستراتيجيات والتقنيات لتحسين الذاكرة ومعالجة مشاكل الذاكرة الشائعة في Next.js.
+
+## تقليل عدد التبعيات
+
+التطبيقات التي تحتوي على عدد كبير من التبعيات ستستخدم ذاكرة أكثر.
+
+يمكن لـ [محلل الحزم (Bundle Analyzer)](/docs/app/building-your-application/optimizing/package-bundling#analyzing-javascript-bundles) مساعدتك في اكتشاف التبعيات الكبيرة في تطبيقك والتي يمكن إزالتها لتحسين الأداء واستخدام الذاكرة.
+
+## تشغيل `next build` مع `--experimental-debug-memory-usage`
+
+بدءًا من الإصدار `14.2.0`، يمكنك تشغيل `next build --experimental-debug-memory-usage` لتشغيل عملية البناء في وضع يقوم Next.js بطباعة معلومات عن استخدام الذاكرة بشكل مستمر أثناء البناء، مثل استخدام الذاكرة الكومية وإحصائيات جمع القمامة. كما سيتم أخذ لقطات للذاكرة الكومية تلقائيًا عندما يقترب استخدام الذاكرة من الحد المحدد.
+
+> **معلومة مفيدة**: هذه الميزة غير متوافقة مع خيار عامل بناء Webpack الذي يتم تمكينه تلقائيًا إلا إذا كان لديك تكوين مخصص لـ Webpack.
+
+## تسجيل ملف تعريف للذاكرة الكومية
+
+للبحث عن مشاكل الذاكرة، يمكنك تسجيل ملف تعريف للذاكرة الكومية من Node.js وتحميله في Chrome DevTools لتحديد مصادر تسرب الذاكرة المحتملة.
+
+في طرفيتك، مرر علم `--heap-prof` إلى Node.js عند بدء بناء Next.js:
+
+```sh
+node --heap-prof node_modules/next/dist/bin/next build
+```
+
+في نهاية عملية البناء، سيتم إنشاء ملف `.heapprofile` بواسطة Node.js.
+
+في Chrome DevTools، يمكنك فتح علامة تبويب الذاكرة والنقر على زر "تحميل الملف الشخصي" لتصور الملف.
+
+## تحليل لقطة للذاكرة الكومية
+
+يمكنك استخدام أداة مفتش لتحليل استخدام الذاكرة في التطبيق.
+
+عند تشغيل أمر `next build` أو `next dev`، أضف `NODE_OPTIONS=--inspect` في بداية الأمر. سيعرض هذا وكيل المفتش على المنفذ الافتراضي.
+إذا كنت ترغب في التوقف قبل بدء أي كود مستخدم، يمكنك تمرير `--inspect-brk` بدلاً من ذلك. أثناء تشغيل العملية، يمكنك استخدام أداة مثل Chrome DevTools للاتصال بمنفذ التصحيح لتسجيل وتحليل لقطة للذاكرة الكومية لمعرفة ما يتم الاحتفاظ به في الذاكرة.
+
+بدءًا من الإصدار `14.2.0`، يمكنك أيضًا تشغيل `next build` مع علم `--experimental-debug-memory-usage` لتسهيل أخذ لقطات الذاكرة الكومية.
+
+أثناء التشغيل في هذا الوضع، يمكنك إرسال إشارة `SIGUSR2` إلى العملية في أي وقت، وسوف تأخذ العملية لقطة للذاكرة الكومية.
+
+سيتم حفظ لقطة الذاكرة الكومية في جذر مشروع تطبيق Next.js ويمكن تحميلها في أي محلل للذاكرة الكومية، مثل Chrome DevTools، لمعرفة ما يتم الاحتفاظ به في الذاكرة. هذا الوضع غير متوافق بعد مع عمال بناء Webpack.
+
+راجع [كيفية تسجيل وتحليل لقطات الذاكرة الكومية](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots) لمزيد من المعلومات.
+
+## عامل بناء Webpack
+
+يسمح عامل بناء Webpack بتشغيل عمليات تجميع Webpack داخل عامل Node.js منفصل مما يقلل استخدام الذاكرة في تطبيقك أثناء عمليات البناء.
+
+يتم تمكين هذا الخيار افتراضيًا إذا لم يكن لتطبيقك تكوين مخصص لـ Webpack بدءًا من الإصدار `v14.1.0`.
+
+إذا كنت تستخدم إصدارًا أقدم من Next.js أو لديك تكوين مخصص لـ Webpack، يمكنك تمكين هذا الخيار عن طريق تعيين `experimental.webpackBuildWorker: true` داخل ملف `next.config.js`.
+
+> **معلومة مفيدة**: قد لا تكون هذه الميزة متوافقة مع جميع إضافات Webpack المخصصة.
+
+## تعطيل ذاكرة التخزين المؤقت لـ Webpack
+
+[ذاكرة التخزين المؤقت لـ Webpack](https://webpack.js.org/configuration/cache/) تحفظ وحدات Webpack المُنشأة في الذاكرة و/أو على القرص لتحسين سرعة عمليات البناء. هذا يمكن أن يساعد في الأداء، ولكنه أيضًا يزيد من استخدام الذاكرة في تطبيقك لتخزين البيانات المؤقتة.
+
+يمكنك تعطيل هذا السلوك عن طريق إضافة [تكوين مخصص لـ Webpack](/docs/app/api-reference/next-config-js/webpack) إلى تطبيقك:
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+  ) => {
+    if (config.cache && !dev) {
+      config.cache = Object.freeze({
+        type: 'memory',
+      })
+    }
+    // مهم: إرجاع التكوين المعدل
+    return config
+  },
+}
+
+export default nextConfig
+```
+
+## تعطيل خرائط المصدر (Source Maps)
+
+إنشاء خرائط المصدر يستهلك ذاكرة إضافية أثناء عملية البناء.
+
+يمكنك تعطيل إنشاء خرائط المصدر عن طريق إضافة `productionBrowserSourceMaps: false` و `experimental.serverSourceMaps: false` إلى تكوين Next.js الخاص بك.
+
+> **معلومة مفيدة**: بعض الإضافات قد تقوم بتمكين خرائط المصدر وقد تتطلب تكوينًا مخصصًا لتعطيلها.
+
+## مشاكل الذاكرة في Edge
+
+قام Next.js `v14.1.3` بإصلاح مشكلة في الذاكرة عند استخدام وقت تشغيل Edge. يرجى التحديث إلى هذا الإصدار (أو أحدث) لمعرفة ما إذا كان يحل مشكلتك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/index.mdx
new file mode 100644
index 00000000..cffa5a27
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/06-optimizing/index.mdx
@@ -0,0 +1,48 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:40:47.803Z
+title: التحسينات
+nav_title: التحسين
+description: قم بتحسين تطبيق Next.js الخاص بك للحصول على أفضل أداء وتجربة مستخدم.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+يأتي Next.js مع مجموعة متنوعة من تحسينات الأداء المدمجة المصممة لتحسين سرعة تطبيقك و[مقاييس الويب الأساسية (Core Web Vitals)](https://web.dev/vitals/). سيغطي هذا الدليل التحسينات التي يمكنك الاستفادة منها لتحسين تجربة المستخدم.
+
+## المكونات المدمجة
+
+توفر المكونات المدمجة تجريدًا لتعقيد تنفيذ تحسينات واجهة المستخدم الشائعة. هذه المكونات هي:
+
+- **الصور**: مبنية على عنصر `<img>` الأصلي. يقوم مكون الصورة بتحسين الصور للأداء عن طريق التحميل المتأخر وتغيير حجم الصور تلقائيًا بناءً على حجم الجهاز.
+- **الرابط**: مبنية على علامات `<a>` الأصلية. يقوم مكون الرابط بجلب الصفحات مسبقًا في الخلفية، لتحقيق انتقالات أسرع وأكثر سلاسة بين الصفحات.
+- **النصوص البرمجية**: مبنية على علامات `<script>` الأصلية. يمنحك مكون النص البرمجي تحكمًا في تحميل وتنفيذ النصوص البرمجية لجهات خارجية.
+
+## البيانات الوصفية
+
+تساعد البيانات الوصفية محركات البحث على فهم محتوىك بشكل أفضل (مما قد يؤدي إلى تحسين تحسين محركات البحث)، وتتيح لك تخصيص طريقة عرض المحتوى الخاص بك على وسائل التواصل الاجتماعي، مما يساعدك على إنشاء تجربة مستخدم أكثر جاذبية واتساقًا عبر منصات مختلفة.
+
+<AppOnly>
+
+تتيح لك واجهة برمجة التطبيقات للبيانات الوصفية في Next.js تعديل عنصر `<head>` للصفحة. يمكنك تكوين البيانات الوصفية بطريقتين:
+
+- **البيانات الوصفية المعتمدة على التكوين**: قم بتصدير [كائن `metadata` ثابت](/docs/app/api-reference/functions/generate-metadata#metadata-object) أو [دالة `generateMetadata` ديناميكية](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) في ملف `layout.js` أو `page.js`.
+- **البيانات الوصفية المعتمدة على الملفات**: أضف ملفات خاصة ثابتة أو تم إنشاؤها ديناميكيًا إلى مقاطع المسار.
+
+بالإضافة إلى ذلك، يمكنك إنشاء صور Open Graph ديناميكية باستخدام JSX وCSS مع مُنشئ [imageResponse](/docs/app/api-reference/functions/image-response).
+
+</AppOnly>
+
+<PagesOnly>
+
+يسمح لك مكون Head في Next.js بتعديل `<head>` للصفحة. تعلم المزيد في وثائق [مكون Head](/docs/pages/api-reference/components/head).
+
+</PagesOnly>
+
+## الأصول الثابتة
+
+يمكن استخدام مجلد `/public` في Next.js لخدمة الأصول الثابتة مثل الصور والخطوط والملفات الأخرى. يمكن أيضًا تخزين الملفات داخل `/public` مؤقتًا بواسطة موفري CDN حتى يتم تسليمها بكفاءة.
+
+## التحليلات والمراقبة
+
+بالنسبة للتطبيقات الكبيرة، يتكامل Next.js مع أدوات التحليلات والمراقبة الشائعة لمساعدتك في فهم أداء تطبيقك. تعلم المزيد في أدلة [التحليلات](/docs/app/building-your-application/optimizing/analytics)<PagesOnly>,</PagesOnly> [OpenTelemetry](/docs/pages/building-your-application/optimizing/open-telemetry)<PagesOnly>,</PagesOnly> و[أدوات القياس (Instrumentation)](/docs/pages/building-your-application/optimizing/instrumentation).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/01-typescript.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/01-typescript.mdx
new file mode 100644
index 00000000..e2ba2f62
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/01-typescript.mdx
@@ -0,0 +1,325 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:08.827Z
+title: TypeScript
+description: يوفر Next.js تجربة تطوير معتمدة على TypeScript كخيار أول لبناء تطبيقات React.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+يوفر Next.js تجربة تطوير معتمدة على TypeScript كخيار أول لبناء تطبيقات React.
+
+يأتي مع دعم مدمج لـ TypeScript لتثبيت الحزم الضرورية تلقائيًا وتهيئة الإعدادات المناسبة.
+
+<AppOnly>
+
+بالإضافة إلى [إضافة TypeScript](#typescript-plugin) لمحرر الأكواد الخاص بك.
+
+> **🎥 شاهد:** تعرف على إضافة TypeScript المدمجة → [YouTube (3 دقائق)](https://www.youtube.com/watch?v=pqMqn9fKEf8)
+
+</AppOnly>
+
+## المشاريع الجديدة
+
+`create-next-app` الآن يأتي مع TypeScript بشكل افتراضي.
+
+```bash filename="Terminal"
+npx create-next-app@latest
+```
+
+## المشاريع الحالية
+
+أضف TypeScript إلى مشروعك عن طريق تغيير اسم ملف إلى `.ts` / `.tsx`. قم بتشغيل `next dev` و `next build` لتثبيت التبعيات الضرورية تلقائيًا وإضافة ملف `tsconfig.json` مع خيارات التهيئة الموصى بها.
+
+إذا كان لديك بالفعل ملف `jsconfig.json`، انسخ خيار `paths` من الملف القديم إلى ملف `tsconfig.json` الجديد، واحذف الملف القديم.
+
+<AppOnly>
+
+## إضافة TypeScript
+
+يتضمن Next.js إضافة TypeScript مخصصة ومدقق أنواع، والتي يمكن لـ VSCode ومحررات الأكواد الأخرى استخدامها للتدقيق المتقدم للأكواد والإكمال التلقائي.
+
+يمكنك تمكين الإضافة في VS Code عن طريق:
+
+1. فتح لوحة الأوامر (`Ctrl/⌘` + `Shift` + `P`)
+2. البحث عن "TypeScript: Select TypeScript Version"
+3. اختيار "Use Workspace Version"
+
+<Image
+  alt="لوحة أوامر TypeScript"
+  srcLight="/docs/light/typescript-command-palette.png"
+  srcDark="/docs/dark/typescript-command-palette.png"
+  width="1600"
+  height="637"
+/>
+
+الآن، عند تحرير الملفات، سيتم تفعيل الإضافة المخصصة. عند تشغيل `next build`، سيتم استخدام مدقق الأنواع المخصص.
+
+### ميزات الإضافة
+
+يمكن لإضافة TypeScript المساعدة في:
+
+- التحذير عند تمرير قيم غير صالحة لـ [خيارات تكوين المقاطع](/docs/app/api-reference/file-conventions/route-segment-config).
+- عرض الخيارات المتاحة والوثائق في السياق.
+- التأكد من استخدام توجيه `use client` بشكل صحيح.
+- التأكد من أن خطافات العميل (مثل `useState`) تستخدم فقط في مكونات العميل.
+
+> **معلومة مفيدة**: سيتم إضافة المزيد من الميزات في المستقبل.
+
+</AppOnly>
+
+## الحد الأدنى لإصدار TypeScript
+
+يوصى بشدة أن تكون على الأقل على الإصدار `v4.5.2` من TypeScript للحصول على ميزات مثل [معدلات النوع على أسماء الاستيراد](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names) و[تحسينات الأداء](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#real-path-sync-native).
+
+<AppOnly>
+
+## الروابط المحددة نوعيًا
+
+يمكن لـ Next.js تحديد أنواع الروابط بشكل ثابت لمنع الأخطاء المطبعية وغيرها عند استخدام `next/link`، مما يحسن سلامة الأنواع عند التنقل بين الصفحات.
+
+لتفعيل هذه الميزة، يجب تمكين `experimental.typedRoutes` ويجب أن يستخدم المشروع TypeScript.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    typedRoutes: true,
+  },
+}
+
+module.exports = nextConfig
+```
+
+سيقوم Next.js بإنشاء تعريف للروابط في `.next/types` يحتوي على معلومات عن جميع المسارات الموجودة في تطبيقك، والتي يمكن لـ TypeScript استخدامها لتقديم ملاحظات في محرر الأكواد حول الروابط غير الصالحة.
+
+حاليًا، يتضمن الدعم التجريبي أي حرفية نصية، بما في ذلك المقاطع الديناميكية. بالنسبة للسلاسل غير الحرفية، تحتاج حاليًا إلى تحويل `href` يدويًا باستخدام `as Route`:
+
+```tsx
+import type { Route } from 'next';
+import Link from 'next/link'
+
+// لا تظهر أخطاء TypeScript إذا كان href مسارًا صالحًا
+<Link href="/about" />
+<Link href="/blog/nextjs" />
+<Link href={`/blog/${slug}`} />
+<Link href={('/blog' + slug) as Route} />
+
+// تظهر أخطاء TypeScript إذا كان href مسارًا غير صالح
+<Link href="/aboot" />
+```
+
+لقبول `href` في مكون مخصص يغلف `next/link`، استخدم Generic:
+
+```tsx
+import type { Route } from 'next'
+import Link from 'next/link'
+
+function Card<T extends string>({ href }: { href: Route<T> | URL }) {
+  return (
+    <Link href={href}>
+      <div>My Card</div>
+    </Link>
+  )
+}
+```
+
+> **كيف يعمل هذا؟**
+>
+> عند تشغيل `next dev` أو `next build`، ينشئ Next.js ملف `.d.ts` مخفيًا داخل `.next` يحتوي على معلومات عن جميع المسارات الموجودة في تطبيقك (جميع المسارات الصالحة كنوع `href` لـ `Link`). يتم تضمين هذا الملف في `tsconfig.json` وسيتحقق مترجم TypeScript من هذا الملف ويقدم ملاحظات في محرر الأكواد حول الروابط غير الصالحة.
+
+## سلامة الأنواع من البداية إلى النهاية
+
+يتمتع موجه التطبيق في Next.js بـ **سلامة أنواع محسنة**. وهذا يشمل:
+
+1. **عدم تسلسل البيانات بين وظيفة الجلب والصفحة**: يمكنك استخدام `fetch` مباشرة في المكونات والتخطيطات والصفحات على الخادم. هذه البيانات _لا تحتاج_ إلى تسلسل (تحويل إلى سلسلة) لتمريرها إلى جانب العميل للاستهلاك في React. بدلاً من ذلك، نظرًا لأن `app` يستخدم مكونات الخادم افتراضيًا، يمكننا استخدام قيم مثل `Date` و `Map` و `Set` والمزيد دون أي خطوات إضافية. سابقًا، كنت بحاجة إلى تحديد نوع الحدود بين الخادم والعميل يدويًا باستخدام أنواع خاصة بـ Next.js.
+2. **تدفق بيانات مبسط بين المكونات**: مع إزالة `_app` لصالح التخطيطات الجذرية، أصبح من الأسهل تصور تدفق البيانات بين المكونات والصفحات. سابقًا، كان تدفق البيانات بين `pages` الفردية و `_app` صعب التحديد ويمكن أن يتسبب في أخطاء مربكة. مع [جلب البيانات في نفس المكان](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) في موجه التطبيق، لم يعد هذا مشكلة.
+
+[جلب البيانات في Next.js](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) يوفر الآن سلامة أنواع قريبة من البداية إلى النهاية قدر الإمكان دون أن يكون تقييديًا بشأن اختيار قاعدة البيانات أو مزود المحتوى.
+
+يمكننا تحديد نوع بيانات الاستجابة كما تتوقع مع TypeScript العادي. على سبيل المثال:
+
+```tsx filename="app/page.tsx"
+async function getData() {
+  const res = await fetch('https://api.example.com/...')
+  // قيمة الإرجاع *ليست* مسلسلة
+  // يمكنك إرجاع Date، Map، Set، إلخ.
+  return res.json()
+}
+
+export default async function Page() {
+  const name = await getData()
+
+  return '...'
+}
+```
+
+لـ سلامة أنواع كاملة من البداية إلى النهاية، يتطلب هذا أيضًا أن تدعم قاعدة البيانات أو مزود المحتوى الخاص بك TypeScript. يمكن أن يكون هذا من خلال استخدام [ORM](https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D9%82%D8%A7%D8%B9%D8%AF%D8%A9_%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA_%D9%83%D9%83%D8%A3%D8%B4%D9%8A%D8%A7%D8%A1) أو أداة استعلام محددة الأنواع.
+
+## خطأ TypeScript في مكون الخادم غير المتزامن
+
+لاستخدام مكون خادم `async` مع TypeScript، تأكد من أنك تستخدم TypeScript `5.1.3` أو أعلى و `@types/react` `18.2.8` أو أعلى.
+
+إذا كنت تستخدم إصدارًا أقدم من TypeScript، قد ترى خطأ نوع `'Promise<Element>' is not a valid JSX element`. تحديث إلى أحدث إصدار من TypeScript و `@types/react` يجب أن يحل هذه المشكلة.
+
+## تمرير البيانات بين مكونات الخادم والعميل
+
+عند تمرير البيانات بين مكون خادم ومكون عميل عبر الخصائص، لا تزال البيانات مسلسلة (محولة إلى سلسلة) للاستخدام في المتصفح. ومع ذلك، لا تحتاج إلى نوع خاص. يتم تحديد نوعها بنفس طريقة تمرير أي خصائص أخرى بين المكونات.
+
+علاوة على ذلك، هناك كود أقل يحتاج إلى تسلسل، حيث أن البيانات غير المعروضة لا تعبر بين الخادم والعميل (تبقى على الخادم). هذا أصبح ممكنًا الآن فقط من خلال دعم مكونات الخادم.
+
+</AppOnly>
+
+<PagesOnly>
+
+## التوليد الثابت وعرض جانب الخادم
+
+لـ [`getStaticProps`](/docs/pages/api-reference/functions/get-static-props) و [`getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) و [`getServerSideProps`](/docs/pages/api-reference/functions/get-server-side-props)، يمكنك استخدام الأنواع `GetStaticProps` و `GetStaticPaths` و `GetServerSideProps` على التوالي:
+
+```tsx filename="pages/blog/[slug].tsx"
+import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
+
+export const getStaticProps = (async (context) => {
+  // ...
+}) satisfies GetStaticProps
+
+export const getStaticPaths = (async () => {
+  // ...
+}) satisfies GetStaticPaths
+
+export const getServerSideProps = (async (context) => {
+  // ...
+}) satisfies GetServerSideProps
+```
+
+> **معلومة مفيدة:** تمت إضافة `satisfies` إلى TypeScript في [الإصدار 4.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html). نوصي بالترقية إلى أحدث إصدار من TypeScript.
+
+## مسارات API
+
+إليك مثال لكيفية استخدام الأنواع المدمجة لمسارات API:
+
+```ts
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({ name: 'John Doe' })
+}
+```
+
+يمكنك أيضًا تحديد نوع بيانات الاستجابة:
+
+```ts
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
+```
+
+## `App` مخصص
+
+إذا كان لديك [تطبيق `App` مخصص](/docs/pages/building-your-application/routing/custom-app)، يمكنك استخدام النوع المدمج `AppProps` وتغيير اسم الملف إلى `./pages/_app.tsx` كما يلي:
+
+```ts
+import type { AppProps } from 'next/app'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+</PagesOnly>
+
+## أسماء مسارات واستيراد قاعدة
+
+يدعم Next.js تلقائيًا خيارات `"paths"` و `"baseUrl"` في `tsconfig.json`.
+
+<AppOnly>
+
+يمكنك معرفة المزيد عن هذه الميزة في [وثائق أسماء مسارات الوحدات](/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases).
+
+</AppOnly>
+
+<PagesOnly>
+
+يمكنك معرفة المزيد عن هذه الميزة في [وثائق أسماء مسارات الوحدات](/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases).
+
+</PagesOnly>
+
+## التحقق من أنواع next.config.js
+
+يجب أن يكون ملف `next.config.js` ملف JavaScript لأنه لا يتم تحليله بواسطة Babel أو TypeScript، ولكن يمكنك إضافة بعض التحقق من الأنواع في بيئة التطوير الخاصة بك باستخدام JSDoc كما يلي:
+
+```js
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+  /* خيارات التهيئة هنا */
+}
+
+module.exports = nextConfig
+```
+
+## التحقق التدريجي من الأنواع
+
+منذ `v10.2.1` يدعم Next.js [التحقق التدريجي من الأنواع](https://www.typescriptlang.org/tsconfig#incremental) عند تمكينه في `tsconfig.json` الخاص بك، وهذا يمكن أن يساعد في تسريع التحقق من الأنواع في التطبيقات الكبيرة.
+
+## تجاهل أخطاء TypeScript
+
+يفشل Next.js في **بناء الإنتاج** (`next build`) عند وجود أخطاء TypeScript في مشروعك.
+
+إذا كنت تريد أن يقوم Next.js بإنتاج كود الإنتاج بشكل خطير حتى عند وجود أخطاء في التطبيق، يمكنك تعطيل خطوة التحقق من الأنواع المدمجة.
+
+إذا تم تعطيله، تأكد من أنك تقوم بإجراء عمليات التحقق من الأنواع كجزء من عملية البناء أو النشر، وإلا فقد يكون هذا خطيرًا جدًا.
+
+افتح `next.config.js` وقم بتمكين خيار `ignoreBuildErrors` في تهيئة `typescript`:
+
+```js filename="next.config.js"
+module.exports = {
+  typescript: {
+    // !! تحذير !!
+    // السماح ببناء الإنتاج بنجاح حتى لو كان مشروعك يحتوي على أخطاء نوع.
+    // !! تحذير !!
+    ignoreBuildErrors: true,
+  },
+}
+```
+
+## تعريفات الأنواع المخصصة
+
+عندما تحتاج إلى تعريف أنواع مخصصة، قد تميل إلى تعديل `next-env.d.ts`. ومع ذلك، يتم إنشاء هذا الملف تلقائيًا، لذا فإن أي تغييرات تقوم بها سيتم استبدالها. بدلاً من ذلك، يجب عليك إنشاء ملف جديد، لنسميه `new-types.d.ts`، والإشارة إليه في `tsconfig.json`:
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "skipLibCheck": true
+    //...مختصر...
+  },
+  "include": [
+    "new-types.d.ts",
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": ["node_modules"]
+}
+```
+
+## تغييرات الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                              |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `v13.2.0` | أصبحت الروابط المحددة نوعيًا متاحة في النسخة التجريبية.                                                                                        |
+| `v12.0.0` | [SWC](/docs/architecture/nextjs-compiler) يستخدم الآن افتراضيًا لتحويل TypeScript و TSX لعمليات بناء أسرع.                    |
+| `v10.2.1` | تمت إضافة دعم [التحقق التدريجي من الأنواع](https://www.typescriptlang.org/tsconfig#incremental) عند تمكينه في `tsconfig.json`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/02-eslint.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/02-eslint.mdx
new file mode 100644
index 00000000..832213f4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/02-eslint.mdx
@@ -0,0 +1,314 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:16.000Z
+title: ESLint
+description: يوفر Next.js تجربة متكاملة مع ESLint بشكل افتراضي. هذه القواعد تساعدك على استخدام Next.js بأفضل طريقة ممكنة.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بأي مكون. */}
+
+يوفر Next.js تجربة متكاملة مع [ESLint](https://eslint.org/) جاهزة للاستخدام مباشرة. أضف `next lint` كسكريبت في ملف `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "lint": "next lint"
+  }
+}
+```
+
+ثم قم بتشغيل `npm run lint` أو `yarn lint`:
+
+```bash filename="Terminal"
+yarn lint
+```
+
+إذا لم يكن ESLint مضبوطًا مسبقًا في تطبيقك، سيتم توجيهك خلال عملية التثبيت والضبط.
+
+```bash filename="Terminal"
+yarn lint
+```
+
+> سترى رسالة مثل:
+>
+> ? كيف تريد ضبط ESLint؟
+>
+> ❯ صارم (موصى به)  
+> أساسي  
+> إلغاء
+
+يمكن اختيار أحد الخيارات الثلاثة التالية:
+
+- **صارم**: يتضمن إعداد ESLint الأساسي لـ Next.js مع مجموعة قواعد أكثر صرامة [لـ Core Web Vitals](#core-web-vitals). هذا هو الإعداد الموصى به للمطورين الذين يضبطون ESLint لأول مرة.
+
+  ```json filename=".eslintrc.json"
+  {
+    "extends": "next/core-web-vitals"
+  }
+  ```
+
+- **أساسي**: يتضمن إعداد ESLint الأساسي لـ Next.js.
+
+  ```json filename=".eslintrc.json"
+  {
+    "extends": "next"
+  }
+  ```
+
+- **إلغاء**: لا يتضمن أي إعداد لـ ESLint. اختر هذا الخيار فقط إذا كنت تخطط لضبط إعداد ESLint مخصص خاص بك.
+
+إذا تم اختيار أي من خياري الضبط، سيقوم Next.js تلقائيًا بتثبيت `eslint` و `eslint-config-next` كتبعيات في تطبيقك وإنشاء ملف `.eslintrc.json` في جذر مشروعك يتضمن الإعداد الذي اخترته.
+
+يمكنك الآن تشغيل `next lint` في أي وقت لتفعيل ESLint واكتشاف الأخطاء. بمجرد ضبط ESLint، سيعمل تلقائيًا أثناء كل عملية بناء (`next build`). الأخطاء ستفشل عملية البناء، بينما التحذيرات لن تفعل ذلك.
+
+<AppOnly>
+
+> إذا كنت لا تريد أن يعمل ESLint أثناء `next build`، راجع وثائق [تجاهل ESLint](/docs/app/api-reference/next-config-js/eslint).
+
+</AppOnly>
+
+<PagesOnly>
+
+> إذا كنت لا تريد أن يعمل ESLint أثناء `next build`، راجع وثائق [تجاهل ESLint](/docs/pages/api-reference/next-config-js/eslint).
+
+</PagesOnly>
+
+نوصي باستخدام [تكامل](https://eslint.org/docs/user-guide/integrations#editors) مناسب لعرض التحذيرات والأخطاء مباشرة في محرر الأكواد أثناء التطوير.
+
+## إعداد ESLint
+
+الإعداد الافتراضي (`eslint-config-next`) يتضمن كل ما تحتاجه لتجربة فحص مثالية جاهزة للاستخدام في Next.js. إذا لم يكن ESLint مضبوطًا مسبقًا في تطبيقك، نوصي باستخدام `next lint` لضبط ESLint مع هذا الإعداد.
+
+> إذا كنت ترغب في استخدام `eslint-config-next` مع إعدادات ESLint أخرى، راجع قسم [الإعدادات الإضافية](#additional-configurations) لمعرفة كيفية القيام بذلك دون حدوث تعارضات.
+
+مجموعات القواعد الموصى بها من الإضافات التالية لـ ESLint مستخدمة جميعها في `eslint-config-next`:
+
+- [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react)
+- [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)
+- [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)
+
+هذا سيتجاوز الإعداد من `next.config.js`.
+
+## إضافة ESLint
+
+يوفر Next.js إضافة ESLint، [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)، مضمنة مسبقًا في الإعداد الأساسي التي تجعل من الممكن اكتشاف المشكلات الشائعة في تطبيق Next.js. مجموعة القواعد الكاملة هي كما يلي:
+
+<Check size={18} /> مفعلة في الإعداد الموصى به
+
+|                     | القاعدة                                                                                                                     | الوصف                                                                                                      |
+| :-----------------: | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| <Check size={18} /> | [@next/next/google-font-display](/docs/messages/google-font-display)                                                     | فرض سلوك font-display مع خطوط جوجل.                                                                 |
+| <Check size={18} /> | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect)                                               | التأكد من استخدام `preconnect` مع خطوط جوجل.                                                                   |
+| <Check size={18} /> | [@next/next/inline-script-id](/docs/messages/inline-script-id)                                                           | فرض سمة `id` على مكونات `next/script` مع محتوى مدمج.                                          |
+| <Check size={18} /> | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga)                                                       | تفضيل مكون `next/script` عند استخدام السكريبت المدمج لتحليلات جوجل.                                |
+| <Check size={18} /> | [@next/next/no-assign-module-variable](/docs/messages/no-assign-module-variable)                                         | منع التعيين لمتغير `module`.                                                                     |
+| <Check size={18} /> | [@next/next/no-async-client-component](/docs/messages/no-async-client-component)                                         | منع مكونات العميل من أن تكون دوال غير متزامنة.                                                            |
+| <Check size={18} /> | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document) | منع استخدام استراتيجية `beforeInteractive` لـ `next/script` خارج `pages/_document.js`.                   |
+| <Check size={18} /> | [@next/next/no-css-tags](/docs/messages/no-css-tags)                                                                     | منع علامات أنماط CSS اليدوية.                                                                                  |
+| <Check size={18} /> | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page)                                       | منع استيراد `next/document` خارج `pages/_document.js`.                                               |
+| <Check size={18} /> | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head)                                                         | منع الاستخدام المكرر لـ `<Head>` في `pages/_document.js`.                                                     |
+| <Check size={18} /> | [@next/next/no-head-element](/docs/messages/no-head-element)                                                             | منع استخدام عنصر `<head>`.                                                                               |
+| <Check size={18} /> | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document)                                       | منع استخدام `next/head` في `pages/_document.js`.                                                            |
+| <Check size={18} /> | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages)                                               | منع استخدام عناصر `<a>` للتنقل بين صفحات Next.js الداخلية.                                           |
+| <Check size={18} /> | [@next/next/no-img-element](/docs/messages/no-img-element)                                                               | منع استخدام عنصر `<img>` بسبب بطء LCP وزيادة استهلاك النطاق الترددي.                                         |
+| <Check size={18} /> | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font)                                                     | منع الخطوط المخصصة للصفحات فقط.                                                                                  |
+| <Check size={18} /> | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head)                                     | منع استخدام `next/script` في مكون `next/head`.                                                         |
+| <Check size={18} /> | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document)                                         | منع استخدام `styled-jsx` في `pages/_document.js`.                                                           |
+| <Check size={18} /> | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts)                                                             | منع السكربتات المتزامنة.                                                                                     |
+| <Check size={18} /> | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head)                                         | منع استخدام `<title>` مع مكون `Head` من `next/document`.                                           |
+| <Check size={18} /> | @next/next/no-typos                                                                                                      | منع الأخطاء الإملائية الشائعة في [دوال جلب البيانات في Next.js](/docs/pages/building-your-application/data-fetching) |
+| <Check size={18} /> | [@next/next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio)                                               | منع تكرار polyfills من Polyfill.io.                                                                    |
+
+إذا كان ESLint مضبوطًا مسبقًا في تطبيقك، نوصي بالتمديد من هذه الإضافة مباشرة بدلاً من تضمين `eslint-config-next` إلا إذا توفرت بعض الشروط. راجع [مجموعة قواعد الإضافة الموصى بها](#recommended-plugin-ruleset) لمعرفة المزيد.
+
+### إعدادات مخصصة
+
+#### `rootDir`
+
+إذا كنت تستخدم `eslint-plugin-next` في مشروع حيث Next.js غير مثبت في المجلد الجذر (مثل monorepo)، يمكنك إخبار `eslint-plugin-next` عن مكان تطبيق Next.js باستخدام خاصية `settings` في ملف `.eslintrc`:
+
+```json filename=".eslintrc.json"
+{
+  "extends": "next",
+  "settings": {
+    "next": {
+      "rootDir": "packages/my-app/"
+    }
+  }
+}
+```
+
+`rootDir` يمكن أن يكون مسارًا (نسبي أو مطلق)، نمطًا (مثل `"packages/*/"`)، أو مصفوفة من المسارات و/أو الأنماط.
+
+## فحص المجلدات والملفات المخصصة
+
+بشكل افتراضي، سيقوم Next.js بتشغيل ESLint لجميع الملفات في مجلدات `pages/`، `app/`، `components/`، `lib/`، و `src/`. ومع ذلك، يمكنك تحديد المجلدات باستخدام خيار `dirs` في إعداد `eslint` في `next.config.js` لعمليات البناء الإنتاجية:
+
+```js filename="next.config.js"
+module.exports = {
+  eslint: {
+    dirs: ['pages', 'utils'], // تشغيل ESLint فقط على مجلدات 'pages' و 'utils' أثناء عمليات البناء الإنتاجية (next build)
+  },
+}
+```
+
+بالمثل، يمكن استخدام وسيطات `--dir` و `--file` مع `next lint` لفحص مجلدات وملفات محددة:
+
+```bash filename="Terminal"
+next lint --dir pages --dir utils --file bar.js
+```
+
+## التخزين المؤقت
+
+<AppOnly>
+
+لتحسين الأداء، يتم تخزين معلومات الملفات التي تمت معالجتها بواسطة ESLint بشكل افتراضي. يتم تخزين هذا في `.next/cache` أو في [مجلد البناء](/docs/app/api-reference/next-config-js/distDir) الذي تحدده. إذا كنت تستخدم أي قواعد ESLint تعتمد على أكثر من محتوى ملف مصدر واحد وتحتاج إلى تعطيل التخزين المؤقت، استخدم وسيطة `--no-cache` مع `next lint`.
+
+</AppOnly>
+
+<PagesOnly>
+
+لتحسين الأداء، يتم تخزين معلومات الملفات التي تمت معالجتها بواسطة ESLint بشكل افتراضي. يتم تخزين هذا في `.next/cache` أو في [مجلد البناء](/docs/pages/api-reference/next-config-js/distDir) الذي تحدده. إذا كنت تستخدم أي قواعد ESLint تعتمد على أكثر من محتوى ملف مصدر واحد وتحتاج إلى تعطيل التخزين المؤقت، استخدم وسيطة `--no-cache` مع `next lint`.
+
+</PagesOnly>
+
+```bash filename="Terminal"
+next lint --no-cache
+```
+
+## تعطيل القواعد
+
+إذا كنت ترغب في تعديل أو تعطيل أي قواعد مقدمة من الإضافات المدعومة (`react`، `react-hooks`، `next`)، يمكنك تغييرها مباشرة باستخدام خاصية `rules` في ملف `.eslintrc`:
+
+```json filename=".eslintrc.json"
+{
+  "extends": "next",
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-page-custom-font": "off"
+  }
+}
+```
+
+### Core Web Vitals
+
+مجموعة قواعد `next/core-web-vitals` تكون مفعلة عند تشغيل `next lint` لأول مرة واختيار الخيار **صارم**.
+
+```json filename=".eslintrc.json"
+{
+  "extends": "next/core-web-vitals"
+}
+```
+
+`next/core-web-vitals` يقوم بتحديث `eslint-plugin-next` ليعتبر بعض القواعد التي تكون تحذيرات بشكل افتراضي كأخطاء إذا كانت تؤثر على [Core Web Vitals](https://web.dev/vitals/).
+
+> نقطة الدخول `next/core-web-vitals` مضمنة تلقائيًا للتطبيقات الجديدة المنشأة باستخدام [Create Next App](/docs/app/api-reference/cli/create-next-app).
+
+### TypeScript
+
+بالإضافة إلى قواعد ESLint الخاصة بـ Next.js، فإن `create-next-app --typescript` سيضيف أيضًا قواعد فحص خاصة بـ TypeScript باستخدام `next/typescript` إلى إعدادك:
+
+```json filename=".eslintrc.json"
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
+```
+
+هذه القواعد مبنية على [`plugin:@typescript-eslint/recommended`](https://typescript-eslint.io/linting/configs#recommended).
+راجع [typescript-eslint > Configs](https://typescript-eslint.io/linting/configs) لمزيد من التفاصيل.
+
+## الاستخدام مع أدوات أخرى
+
+### Prettier
+
+يحتوي ESLint أيضًا على قواعد تنسيق الأكواد، والتي قد تتعارض مع إعداد [Prettier](https://prettier.io/) الحالي لديك. نوصي بتضمين [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) في إعداد ESLint لجعل ESLint و Prettier يعملان معًا.
+
+أولاً، قم بتثبيت التبعية:
+
+```bash filename="Terminal"
+npm install --save-dev eslint-config-prettier
+
+yarn add --dev eslint-config-prettier
+
+pnpm add --save-dev eslint-config-prettier
+
+bun add --dev eslint-config-prettier
+```
+
+ثم أضف `prettier` إلى إعداد ESLint الحالي:
+
+```json filename=".eslintrc.json"
+{
+  "extends": ["next", "prettier"]
+}
+```
+
+### lint-staged
+
+إذا كنت ترغب في استخدام `next lint` مع [lint-staged](https://github.com/okonet/lint-staged) لتشغيل الفحص على ملفات git المؤقتة، ستحتاج إلى إضافة ما يلي إلى ملف `.lintstagedrc.js` في جذر مشروعك لتحديد استخدام وسيطة `--file`.
+
+```js filename=".lintstagedrc.js"
+const path = require('path')
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+}
+```
+
+## ترحيل الإعداد الحالي
+
+### مجموعة قواعد الملحق الموصى بها
+
+إذا كان لديك بالفعل ESLint مُهيأ في تطبيقك وأي من الشروط التالية تنطبق:
+
+- لديك واحد أو أكثر من الملحقات التالية مثبتة بالفعل (إما بشكل منفصل أو من خلال تكوين مختلف مثل `airbnb` أو `react-app`):
+  - `react`
+  - `react-hooks`
+  - `jsx-a11y`
+  - `import`
+- قمت بتعيين `parserOptions` محددة تختلف عن كيفية تكوين Babel داخل Next.js (هذا غير موصى به إلا إذا كنت قد [خصصت تكوين Babel الخاص بك](/docs/pages/building-your-application/configuring/babel))
+- لديك `eslint-plugin-import` مثبت مع Node.js و/أو TypeScript [resolvers](https://github.com/benmosher/eslint-plugin-import#resolvers) معرّفة للتعامل مع عمليات الاستيراد
+
+في هذه الحالة نوصي إما بإزالة هذه الإعدادات إذا كنت تفضل كيفية تكوين هذه الخصائص داخل [`eslint-config-next`](https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/index.js) أو التمديد مباشرة من ملحق ESLint الخاص بـ Next.js بدلاً من ذلك:
+
+```js
+module.exports = {
+  extends: [
+    //...
+    'plugin:@next/next/recommended',
+  ],
+}
+```
+
+يمكن تثبيت الملحق بشكل طبيعي في مشروعك دون الحاجة إلى تشغيل `next lint`:
+
+```bash filename="Terminal"
+npm install --save-dev @next/eslint-plugin-next
+
+yarn add --dev @next/eslint-plugin-next
+
+pnpm add --save-dev @next/eslint-plugin-next
+
+bun add --dev @next/eslint-plugin-next
+```
+
+هذا يزيل خطر التصادمات أو الأخطاء التي قد تحدث بسبب استيراد نفس الملحق أو المحلل عبر تكوينات متعددة.
+
+### تكوينات إضافية
+
+إذا كنت تستخدم بالفعل تكوين ESLint منفصل وتريد تضمين `eslint-config-next`، تأكد من تمديده أخيرًا بعد التكوينات الأخرى. على سبيل المثال:
+
+```json filename=".eslintrc.json"
+{
+  "extends": ["eslint:recommended", "next"]
+}
+```
+
+تكوين `next` يتعامل بالفعل مع تعيين القيم الافتراضية لخصائص `parser` و `plugins` و `settings`. ليست هناك حاجة لإعادة تعريف أي من هذه الخصائص يدويًا إلا إذا كنت بحاجة إلى تكوين مختلف لحالتك الاستخدامية.
+
+إذا قمت بتضمين أي تكوينات قابلة للمشاركة أخرى، **سوف تحتاج إلى التأكد من عدم استبدال أو تعديل هذه الخصائص**. وإلا، نوصي بإزالة أي تكوينات تشارك السلوك مع تكوين `next` أو التمديد مباشرة من ملحق ESLint الخاص بـ Next.js كما ذكر أعلاه.
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
new file mode 100644
index 00000000..9b878e3e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
@@ -0,0 +1,235 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:41:35.865Z
+title: متغيرات البيئة
+description: تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [متغيرات البيئة](https://github.com/vercel/next.js/tree/canary/examples/environment-variables)
+
+</details>
+
+يأتي Next.js مع دعم مدمج لمتغيرات البيئة، مما يسمح لك بما يلي:
+
+- [استخدام `.env.local` لتحميل متغيرات البيئة](#تحميل-متغيرات-البيئة)
+- [حزم متغيرات البيئة للمتصفح عن طريق البادئة `NEXT_PUBLIC_`](#حزم-متغيرات-البيئة-للمتصفح)
+
+## تحميل متغيرات البيئة
+
+يحتوي Next.js على دعم مدمج لتحميل متغيرات البيئة من `.env.local` إلى `process.env`.
+
+```txt filename=".env.local"
+DB_HOST=localhost
+DB_USER=myuser
+DB_PASS=mypassword
+```
+
+<PagesOnly>
+
+هذا يحمل `process.env.DB_HOST`، `process.env.DB_USER`، و `process.env.DB_PASS` إلى بيئة Node.js تلقائيًا مما يسمح لك باستخدامها في [طرق جلب البيانات في Next.js](/docs/pages/building-your-application/data-fetching) و [مسارات API](/docs/pages/building-your-application/routing/api-routes).
+
+على سبيل المثال، باستخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props):
+
+```js filename="pages/index.js"
+export async function getStaticProps() {
+  const db = await myDB.connect({
+    host: process.env.DB_HOST,
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+  })
+  // ...
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+> **ملاحظة**: يدعم Next.js أيضًا متغيرات متعددة الأسطر داخل ملفات `.env*`:
+>
+> ```bash
+> # .env.local
+>
+> # يمكنك الكتابة مع فواصل الأسطر
+> PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----
+> ...
+> Kh9NV...
+> ...
+> -----END DSA PRIVATE KEY-----"
+>
+> # أو مع `\n` داخل علامات الاقتباس المزدوجة
+> PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nKh9NV...\n-----END DSA PRIVATE KEY-----\n"
+> ```
+
+> **ملاحظة**: إذا كنت تستخدم مجلد `/src`، يرجى ملاحظة أن Next.js سيحمل ملفات .env **فقط** من المجلد الرئيسي و**ليس** من مجلد `/src`.
+> هذا يحمل `process.env.DB_HOST`، `process.env.DB_USER`، و `process.env.DB_PASS` إلى بيئة Node.js تلقائيًا مما يسمح لك باستخدامها في [معالجات المسار](/docs/app/building-your-application/routing/route-handlers).
+
+على سبيل المثال:
+
+```js filename="app/api/route.js"
+export async function GET() {
+  const db = await myDB.connect({
+    host: process.env.DB_HOST,
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+  })
+  // ...
+}
+```
+
+</AppOnly>
+
+### الإشارة إلى متغيرات أخرى
+
+سيقوم Next.js تلقائيًا بتوسيع المتغيرات التي تستخدم `$` للإشارة إلى متغيرات أخرى مثل `$VARIABLE` داخل ملفات `.env*`. هذا يسمح لك بالإشارة إلى أسرار أخرى. على سبيل المثال:
+
+```txt filename=".env"
+TWITTER_USER=nextjs
+TWITTER_URL=https://twitter.com/$TWITTER_USER
+```
+
+في المثال أعلاه، سيتم تعيين `process.env.TWITTER_URL` إلى `https://twitter.com/nextjs`.
+
+> **معلومة مفيدة**: إذا كنت بحاجة إلى استخدام متغير يحتوي على `$` في القيمة الفعلية، يجب تهريبه مثل `\$`.
+
+## حزم متغيرات البيئة للمتصفح
+
+متغيرات البيئة غير المبدوءة بـ `NEXT_PUBLIC_` متاحة فقط في بيئة Node.js، مما يعني أنها غير متاحة للمتصفح (يعمل العميل في بيئة مختلفة).
+
+لجعل قيمة متغير البيئة متاحة في المتصفح، يمكن لـ Next.js "تضمين" القيمة، في وقت البناء، في حزمة js التي يتم تسليمها إلى العميل، واستبدال جميع الإشارات إلى `process.env.[variable]` بقيمة ثابتة. لإخباره بفعل ذلك، ما عليك سوى إضافة البادئة `NEXT_PUBLIC_` إلى المتغير. على سبيل المثال:
+
+```txt filename="Terminal"
+NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
+```
+
+سيخبر هذا Next.js باستبدال جميع الإشارات إلى `process.env.NEXT_PUBLIC_ANALYTICS_ID` في بيئة Node.js بالقيمة من البيئة التي تقوم فيها بتشغيل `next build`، مما يسمح لك باستخدامها في أي مكان في الكود الخاص بك. سيتم تضمينها في أي JavaScript يتم إرساله إلى المتصفح.
+
+> **ملاحظة**: بعد البناء، لن يستجيب تطبيقك للتغييرات في متغيرات البيئة هذه. على سبيل المثال، إذا كنت تستخدم خط أنابيب Heroku لترقية slugs المبنية في بيئة واحدة إلى بيئة أخرى، أو إذا قمت ببناء ونشر صورة Docker واحدة في بيئات متعددة، فسيتم تجميد جميع متغيرات `NEXT_PUBLIC_` بالقيمة التي تم تقييمها في وقت البناء، لذا يجب تعيين هذه القيم بشكل مناسب عند بناء المشروع. إذا كنت بحاجة إلى الوصول إلى قيم بيئة التشغيل، فسيتعين عليك إعداد API خاص بك لتوفيرها للعميل (إما عند الطلب أو أثناء التهيئة).
+
+```js filename="pages/index.js"
+import setupAnalyticsService from '../lib/my-analytics-service'
+
+// يمكن استخدام 'NEXT_PUBLIC_ANALYTICS_ID' هنا لأنها مبدوءة بـ 'NEXT_PUBLIC_'.
+// سيتم تحويلها في وقت البناء إلى `setupAnalyticsService('abcdefghijk')`.
+setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
+
+function HomePage() {
+  return <h1>Hello World</h1>
+}
+
+export default HomePage
+```
+
+لاحظ أن عمليات البحث الديناميكية لن يتم تضمينها، مثل:
+
+```js
+// هذا لن يتم تضمينه، لأنه يستخدم متغيرًا
+const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
+setupAnalyticsService(process.env[varName])
+
+// هذا لن يتم تضمينه، لأنه يستخدم متغيرًا
+const env = process.env
+setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)
+```
+
+### متغيرات بيئة التشغيل
+
+يمكن لـ Next.js دعم كل من متغيرات بيئة البناء وبيئة التشغيل.
+
+**بشكل افتراضي، متغيرات البيئة متاحة فقط على الخادم**. لكشف متغير بيئة للمتصفح، يجب أن يبدأ بـ `NEXT_PUBLIC_`. ومع ذلك، سيتم تضمين متغيرات البيئة العامة هذه في حزمة JavaScript أثناء `next build`.
+
+لقراءة متغيرات بيئة التشغيل، نوصي باستخدام `getServerSideProps` أو [اعتماد موجه التطبيق تدريجيًا](/docs/app/building-your-application/upgrading/app-router-migration). مع موجه التطبيق، يمكننا قراءة متغيرات البيئة بأمان على الخادم أثناء التصيير الديناميكي. هذا يسمح لك باستخدام صورة Docker واحدة يمكن ترقيتها عبر بيئات متعددة بقيم مختلفة.
+
+```jsx
+import { unstable_noStore as noStore } from 'next/cache'
+
+export default function Component() {
+  noStore()
+  // cookies()، headers()، وغيرها من الدوال الديناميكية
+  // ستختار أيضًا التصيير الديناميكي، مما يعني
+  // أن متغير البيئة هذا يتم تقييمه في وقت التشغيل
+  const value = process.env.MY_VALUE
+  // ...
+}
+```
+
+**معلومة مفيدة:**
+
+- يمكنك تشغيل الكود عند بدء تشغيل الخادم باستخدام [دالة `register`](/docs/app/building-your-application/optimizing/instrumentation).
+- لا نوصي باستخدام خيار [runtimeConfig](/docs/pages/api-reference/next-config-js/runtime-configuration)، لأنه لا يعمل مع وضع الإخراج المستقل. بدلاً من ذلك، نوصي [باعتماد موجه التطبيق تدريجيًا](/docs/app/building-your-application/upgrading/app-router-migration).
+
+## متغيرات البيئة الافتراضية
+
+بشكل عام، هناك حاجة إلى ملف `.env.local` واحد فقط. ومع ذلك، قد ترغب أحيانًا في إضافة بعض الإعدادات الافتراضية لبيئة `التطوير` (`next dev`) أو `الإنتاج` (`next start`).
+
+يسمح لك Next.js بتعيين الإعدادات الافتراضية في `.env` (جميع البيئات)، `.env.development` (بيئة التطوير)، و `.env.production` (بيئة الإنتاج).
+
+`.env.local` دائمًا ما يتجاوز الإعدادات الافتراضية.
+
+> **معلومة مفيدة**: يجب تضمين ملفات `.env`، `.env.development`، و `.env.production` في مستودعك لأنها تحدد الإعدادات الافتراضية. **يجب إضافة `.env*.local` إلى `.gitignore`**، لأن هذه الملفات مخصصة لتجاهلها. `.env.local` هو المكان الذي يمكن تخزين الأسرار فيه.
+
+## متغيرات البيئة على Vercel
+
+عند نشر تطبيق Next.js الخاص بك على [Vercel](https://vercel.com)، يمكن تكوين متغيرات البيئة [في إعدادات المشروع](https://vercel.com/docs/projects/environment-variables?utm_medium=docs&utm_source=next-site&utm_campaign=next-website).
+
+يجب تكوين جميع أنواع متغيرات البيئة هناك. حتى متغيرات البيئة المستخدمة في التطوير - والتي يمكن [تنزيلها على جهازك المحلي](https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لاحقًا.
+
+إذا قمت بتكوين [متغيرات بيئة التطوير](https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، يمكنك سحبها إلى `.env.local` للاستخدام على جهازك المحلي باستخدام الأمر التالي:
+
+```bash filename="Terminal"
+vercel env pull .env.local
+```
+
+> **معلومة مفيدة**: عند نشر تطبيق Next.js الخاص بك على [Vercel](https://vercel.com)، لن تكون متغيرات البيئة في ملفات `.env*` متاحة لـ Edge Runtime، إلا إذا كانت أسمائها مبدوءة بـ `NEXT_PUBLIC_`. نوصي بشدة بإدارة متغيرات البيئة في [إعدادات المشروع](https://vercel.com/docs/projects/environment-variables?utm_medium=docs&utm_source=next-site&utm_campaign=next-website) بدلاً من ذلك، حيث تكون جميع متغيرات البيئة متاحة.
+
+## متغيرات بيئة الاختبار
+
+بالإضافة إلى بيئتي `التطوير` و`الإنتاج`، هناك خيار ثالث متاح: `الاختبار`. بنفس الطريقة التي يمكنك بها تعيين إعدادات افتراضية لبيئات التطوير أو الإنتاج، يمكنك فعل ذلك مع ملف `.env.test` لبيئة `الاختبار` (على الرغم من أن هذا ليس شائعًا مثل الخيارين السابقين). لن يقوم Next.js بتحميل متغيرات البيئة من `.env.development` أو `.env.production` في بيئة `الاختبار`.
+
+هذا مفيد عند تشغيل الاختبارات باستخدام أدوات مثل `jest` أو `cypress` حيث تحتاج إلى تعيين متغيرات بيئة محددة لأغراض الاختبار فقط. سيتم تحميل القيم الافتراضية للاختبار إذا تم تعيين `NODE_ENV` إلى `test`، على الرغم من أنك عادةً لا تحتاج إلى القيام بذلك يدويًا حيث ستقوم أدوات الاختبار بمعالجته نيابة عنك.
+
+هناك فرق صغير بين بيئة `الاختبار`، وكل من `التطوير` و`الإنتاج` يجب أن تضع في اعتبارك: لن يتم تحميل `.env.local`، حيث تتوقع أن تنتج الاختبارات نفس النتائج للجميع. بهذه الطريقة، كل تنفيذ للاختبار سيستخدم نفس إعدادات البيئة الافتراضية عبر عمليات تنفيذ مختلفة عن طريق تجاهل `.env.local` الخاص بك (والذي يهدف إلى تجاوز الإعدادات الافتراضية).
+
+> **معلومة مفيدة**: على غرار متغيرات البيئة الافتراضية، يجب تضمين ملف `.env.test` في مستودعك، ولكن لا يجب تضمين `.env.test.local`، حيث أن `.env*.local` مخصصة لتجاهلها عبر `.gitignore`.
+
+أثناء تشغيل اختبارات الوحدة، يمكنك التأكد من تحميل متغيرات البيئة بنفس الطريقة التي يفعلها Next.js عن طريق الاستفادة من دالة `loadEnvConfig` من حزمة `@next/env`.
+
+```js
+// يمكن استخدام ما يلي في ملف إعداد عام لـ Jest أو ما شابه لإعداد الاختبار الخاص بك
+import { loadEnvConfig } from '@next/env'
+
+export default async () => {
+  const projectDir = process.cwd()
+  loadEnvConfig(projectDir)
+}
+```
+
+## ترتيب تحميل متغيرات البيئة
+
+يتم البحث عن متغيرات البيئة في الأماكن التالية، بالترتيب، والتوقف بمجرد العثور على المتغير.
+
+1. `process.env`
+1. `.env.$(NODE_ENV).local`
+1. `.env.local` (لا يتم التحقق منه عندما يكون `NODE_ENV` هو `test`.)
+1. `.env.$(NODE_ENV)`
+1. `.env`
+
+على سبيل المثال، إذا كان `NODE_ENV` هو `development` وقمت بتعريف متغير في كل من `.env.development.local` و `.env`، فسيتم استخدام القيمة في `.env.development.local`.
+
+> **معلومة مفيدة**: القيم المسموح بها لـ `NODE_ENV` هي `production`، `development` و `test`.
+
+## معلومة مفيدة
+
+- إذا كنت تستخدم [مجلد `/src`](/docs/app/building-your-application/configuring/src-directory)، يجب أن تبقى ملفات `.env.*` في جذر مشروعك.
+- إذا كان متغير البيئة `NODE_ENV` غير معين، فإن Next.js يعين تلقائيًا `development` عند تشغيل أمر `next dev`، أو `production` لجميع الأوامر الأخرى.
+
+## سجل الإصدارات
+
+| الإصدار  | التغييرات                                       |
+| -------- | --------------------------------------------- |
+| `v9.4.0` | تم تقديم دعم `.env` و `NEXT_PUBLIC_`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/04-absolute-imports-and-module-aliases.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/04-absolute-imports-and-module-aliases.mdx
new file mode 100644
index 00000000..6d2a65ad
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/04-absolute-imports-and-module-aliases.mdx
@@ -0,0 +1,167 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:39:50.070Z
+title: الاستيراد المطلق وعناوين مسارات الوحدات (Module Path Aliases)
+description: تكوين عناوين مسارات الوحدات التي تتيح لك إعادة تعيين مسارات استيراد معينة.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [الاستيراد المطلق والعناوين](https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports)
+
+</details>
+
+يحتوي Next.js على دعم مدمج لخيارات `"paths"` و `"baseUrl"` في ملفات `tsconfig.json` و `jsconfig.json`.
+
+تتيح لك هذه الخيارات تعيين أدلة المشروع إلى مسارات مطلقة، مما يجعل استيراد الوحدات أسهل. على سبيل المثال:
+
+```tsx
+// قبل
+import { Button } from '../../../components/button'
+
+// بعد
+import { Button } from '@/components/button'
+```
+
+> **معلومة مفيدة**: سيقوم `create-next-app` بطلب تكوين هذه الخيارات لك.
+
+## الاستيراد المطلق
+
+يتيح لك خيار التكوين `baseUrl` الاستيراد مباشرة من جذر المشروع.
+
+مثال على هذا التكوين:
+
+```json filename="tsconfig.json أو jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}
+```
+
+```tsx filename="components/button.tsx" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```jsx filename="components/button.js" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import Button from 'components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Button from 'components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+## عناوين الوحدات (Module Aliases)
+
+بالإضافة إلى تكوين مسار `baseUrl`، يمكنك استخدام خيار `"paths"` لـ"تعيين" مسارات الوحدات.
+
+على سبيل المثال، يقوم التكوين التالي بتعيين `@/components/*` إلى `components/*`:
+
+```json filename="tsconfig.json أو jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+```tsx filename="components/button.tsx" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```jsx filename="components/button.js" switcher
+export default function Button() {
+  return <button>Click me</button>
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import Button from '@/components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Button from '@/components/button'
+
+export default function HomePage() {
+  return (
+    <>
+      <h1>Hello World</h1>
+      <Button />
+    </>
+  )
+}
+```
+
+كل من `"paths"` مرتبط بموقع `baseUrl`. على سبيل المثال:
+
+```json
+// tsconfig.json أو jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": "src/",
+    "paths": {
+      "@/styles/*": ["styles/*"],
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+```jsx
+// pages/index.js
+import Button from '@/components/button'
+import '@/styles/styles.css'
+import Helper from 'utils/helper'
+
+export default function HomePage() {
+  return (
+    <Helper>
+      <h1>Hello World</h1>
+      <Button />
+    </Helper>
+  )
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/05-mdx.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/05-mdx.mdx
new file mode 100644
index 00000000..8adb1f3a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/05-mdx.mdx
@@ -0,0 +1,451 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:41:29.228Z
+title: ماركداون و MDX
+nav_title: MDX
+description: تعلم كيفية تكوين MDX واستخدامه في تطبيقات Next.js.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+[ماركداون (Markdown)](https://daringfireball.net/projects/markdown/syntax) هي لغة ترميز خفيفة الوزن تستخدم لتنسيق النصوص. تتيح لك الكتابة باستخدام صيغة نصية عادية وتحويلها إلى HTML صالح هيكليًا. تُستخدم عادةً لكتابة المحتوى على المواقع والمدونات.
+
+عند الكتابة...
+
+```md
+I **love** using [Next.js](https://nextjs.org/)
+```
+
+المخرجات:
+
+```html
+<p>I <strong>love</strong> using <a href="https://nextjs.org/">Next.js</a></p>
+```
+
+[MDX](https://mdxjs.com/) هي مجموعة شاملة من ماركداون تتيح لك كتابة [JSX](https://react.dev/learn/writing-markup-with-jsx) مباشرة في ملفات ماركداون. إنها طريقة قوية لإضافة تفاعل ديناميكي وتضمين مكونات React داخل محتواك.
+
+يدعم Next.js محتوى MDX المحلي داخل تطبيقك، وكذلك ملفات MDX البعيدة التي يتم جلبها ديناميكيًا من الخادم. يقوم ملحق Next.js بتحويل ماركداون ومكونات React إلى HTML، بما في ذلك دعم الاستخدام في مكونات الخادم (الافتراضي في موجه التطبيق).
+
+## `@next/mdx`
+
+يُستخدم حزمة `@next/mdx` لتكوين Next.js حتى يتمكن من معالجة ماركداون وMDX. **تقوم بجلب البيانات من الملفات المحلية**، مما يسمح لك بإنشاء صفحات بامتداد `.mdx`، مباشرة في مجلد `/pages` أو `/app`.
+
+لنستعرض كيفية تكوين واستخدام MDX مع Next.js.
+
+## البدء
+
+قم بتثبيت الحزم اللازمة لعرض MDX:
+
+```bash filename="Terminal"
+npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
+```
+
+<AppOnly>
+
+قم بإنشاء ملف `mdx-components.tsx` في جذر تطبيقك (`src/` أو المجلد الأصلي لـ `app/`):
+
+> **معلومة مفيدة**: `mdx-components.tsx` مطلوب لاستخدام MDX مع موجه التطبيق ولن يعمل بدونه.
+
+```tsx filename="mdx-components.tsx" switcher
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}
+```
+
+```js filename="mdx-components.js" switcher
+export function useMDXComponents(components) {
+  return {
+    ...components,
+  }
+}
+```
+
+</AppOnly>
+
+قم بتحديث ملف `next.config.js` في جذر مشروعك لتكوينه لاستخدام MDX:
+
+```js filename="next.config.js"
+const withMDX = require('@next/mdx')()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // تكوين `pageExtensions` لتشمل ملفات MDX
+  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  // اختياريًا، أضف أي تكوين آخر لـ Next.js أدناه
+}
+
+module.exports = withMDX(nextConfig)
+```
+
+<AppOnly>
+
+ثم، قم بإنشاء صفحة MDX جديدة داخل مجلد `/app`:
+
+```txt
+  your-project
+  ├── app
+  │   └── my-mdx-page
+  │       └── page.mdx
+  └── package.json
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+ثم، قم بإنشاء صفحة MDX جديدة داخل مجلد `/pages`:
+
+```txt
+  your-project
+  ├── pages
+  │   └── my-mdx-page.mdx
+  └── package.json
+```
+
+</PagesOnly>
+
+الآن يمكنك استخدام ماركداون واستيراد مكونات React مباشرة داخل صفحة MDX الخاصة بك:
+
+```mdx
+import { MyComponent } from 'my-components'
+
+# مرحبًا بكم في صفحة MDX الخاصة بي!
+
+هذا بعض النصوص **عريضة** و _مائلة_.
+
+هذه قائمة في ماركداون:
+
+- واحد
+- اثنان
+- ثلاثة
+
+تحقق من مكون React الخاص بي:
+
+<MyComponent />
+```
+
+التصفح إلى مسار `/my-mdx-page` يجب أن يعرض MDX المقدم الخاص بك.
+
+## MDX البعيد
+
+إذا كانت ملفات أو محتوى ماركداون أو MDX موجودة في مكان آخر، يمكنك جلبها ديناميكيًا من الخادم. هذا مفيد للمحتوى المخزن في مجلد محلي منفصل، نظام إدارة المحتوى (CMS)، قاعدة بيانات، أو أي مكان آخر. حزمة مجتمعية شائعة لهذا الاستخدام هي [`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support).
+
+> **معلومة مفيدة**: يرجى المتابعة بحذر. يترجم MDX إلى JavaScript ويتم تنفيذه على الخادم. يجب عليك فقط جلب محتوى MDX من مصدر موثوق، وإلا يمكن أن يؤدي هذا إلى تنفيذ كود بعيد (RCE).
+
+المثال التالي يستخدم `next-mdx-remote`:
+
+<AppOnly>
+
+```tsx filename="app/my-mdx-page-remote/page.tsx" switcher
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+export default async function RemoteMdxPage() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، نظام إدارة محتوى، جلب، أي مكان...
+  const res = await fetch('https://...')
+  const markdown = await res.text()
+  return <MDXRemote source={markdown} />
+}
+```
+
+```jsx filename="app/my-mdx-page-remote/page.js" switcher
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+export default async function RemoteMdxPage() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، نظام إدارة محتوى، جلب، أي مكان...
+  const res = await fetch('https://...')
+  const markdown = await res.text()
+  return <MDXRemote source={markdown} />
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```tsx filename="pages/my-mdx-page-remote.tsx" switcher
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+
+interface Props {
+  mdxSource: MDXRemoteSerializeResult
+}
+
+export default function RemoteMdxPage({ mdxSource }: Props) {
+  return <MDXRemote {...mdxSource} />
+}
+
+export async function getStaticProps() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، نظام إدارة محتوى، جلب، أي مكان...
+  const res = await fetch('https:...')
+  const mdxText = await res.text()
+  const mdxSource = await serialize(mdxText)
+  return { props: { mdxSource } }
+}
+```
+
+```jsx filename="pages/my-mdx-page-remote.js" switcher
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemote } from 'next-mdx-remote'
+
+export default function RemoteMdxPage({ mdxSource }) {
+  return <MDXRemote {...mdxSource} />
+}
+
+export async function getStaticProps() {
+  // نص MDX - يمكن أن يكون من ملف محلي، قاعدة بيانات، نظام إدارة محتوى، جلب، أي مكان...
+  const res = await fetch('https:...')
+  const mdxText = await res.text()
+  const mdxSource = await serialize(mdxText)
+  return { props: { mdxSource } }
+}
+```
+
+</PagesOnly>
+
+التصفح إلى مسار `/my-mdx-page-remote` يجب أن يعرض MDX المقدم الخاص بك.
+
+## التخطيطات
+
+<AppOnly>
+
+لمشاركة تخطيط عبر صفحات MDX، يمكنك استخدام [دعم التخطيط المدمج](/docs/app/building-your-application/routing/pages-and-layouts#layouts) مع موجه التطبيق.
+
+```tsx filename="app/my-mdx-page/layout.tsx" switcher
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  // إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+```jsx filename="app/my-mdx-page/layout.js" switcher
+export default function MdxLayout({ children }) {
+  // إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+لمشاركة تخطيط حول صفحات MDX، قم بإنشاء مكون تخطيط:
+
+```tsx filename="components/mdx-layout.tsx" switcher
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  // إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+```jsx filename="components/mdx-layout.js" switcher
+export default function MdxLayout({ children }) {
+  // إنشاء أي تخطيط أو أنماط مشتركة هنا
+  return <div style={{ color: 'blue' }}>{children}</div>
+}
+```
+
+ثم، قم باستيراد مكون التخطيط إلى صفحة MDX، وقم بتغليف محتوى MDX في التخطيط، وقم بتصديره:
+
+```mdx
+import MdxLayout from '../components/mdx-layout'
+
+# مرحبًا بكم في صفحة MDX الخاصة بي!
+
+export default function MDXPage({ children }) {
+  return <MdxLayout>{children}</MdxLayout>
+
+}
+```
+
+</PagesOnly>
+
+## ملحقات Remark و Rehype
+
+يمكنك اختياريًا توفير ملحقات `remark` و `rehype` لتحويل محتوى MDX.
+
+على سبيل المثال، يمكنك استخدام `remark-gfm` لدعم ماركداون بنكهة GitHub.
+
+نظرًا لأن نظام `remark` و `rehype` يعمل فقط مع ESM، ستحتاج إلى استخدام `next.config.mjs` كملف تكوين.
+
+```js filename="next.config.mjs"
+import remarkGfm from 'remark-gfm'
+import createMDX from '@next/mdx'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // تكوين `pageExtensions` لتشمل ملفات MDX
+  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  // اختياريًا، أضف أي تكوين آخر لـ Next.js أدناه
+}
+
+const withMDX = createMDX({
+  // أضف ملحقات ماركداون هنا، كما تريد
+  options: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [],
+  },
+})
+
+// قم بتغليف تكوين MDX وNext.js مع بعضهما البعض
+export default withMDX(nextConfig)
+```
+
+## Frontmatter
+
+Frontmatter هو زوج مفتاح/قيمة يشبه YAML يمكن استخدامه لتخزين بيانات حول الصفحة. لا يدعم `@next/mdx` Frontmatter بشكل افتراضي، على الرغم من وجود العديد من الحلول لإضافته إلى محتوى MDX الخاص بك، مثل:
+
+- [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter)
+- [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter)
+- [gray-matter](https://github.com/jonschlinkert/gray-matter).
+
+للوصول إلى بيانات وصفية للصفحة مع `@next/mdx`، يمكنك تصدير كائن بيانات وصفية من داخل ملف `.mdx`:
+
+```mdx
+export const metadata = {
+  author: 'John Doe',
+}
+
+# صفحة MDX الخاصة بي
+```
+
+## العناصر المخصصة
+
+أحد الجوانب الممتعة لاستخدام ماركداون، هو أنها تعين إلى عناصر `HTML` الأصلية، مما يجعل الكتابة سريعة وبديهية:
+
+```md
+هذه قائمة في ماركداون:
+
+- واحد
+- اثنان
+- ثلاثة
+```
+
+يولد ما سبق `HTML` التالي:
+
+```html
+<p>هذه قائمة في ماركداون:</p>
+
+<ul>
+  <li>واحد</li>
+  <li>اثنان</li>
+  <li>ثلاثة</li>
+</ul>
+```
+
+عندما تريد تصميم عناصرك الخاصة لمظهر مخصص لموقعك أو تطبيقك، يمكنك تمرير رموز قصيرة. هذه هي مكوناتك المخصصة التي تعين إلى عناصر `HTML`.
+
+<AppOnly>
+
+للقيام بذلك، افتح ملف `mdx-components.tsx` في جذر تطبيقك وأضف عناصر مخصصة:
+
+</AppOnly>
+
+<PagesOnly>
+
+للقيام بذلك، قم بإنشاء ملف `mdx-components.tsx` في جذر تطبيقك (المجلد الأصلي لـ `pages/` أو `src/`) وأضف عناصر مخصصة:
+
+</PagesOnly>
+
+```tsx filename="mdx-components.tsx" switcher
+import type { MDXComponents } from 'mdx/types'
+import Image, { ImageProps } from 'next/image'
+
+// يسمح لك هذا الملف بتوفير مكونات React مخصصة
+// لاستخدامها في ملفات MDX. يمكنك استيراد واستخدام أي
+// مكون React تريده، بما في ذلك الأنماط المضمنة،
+// مكونات من مكتبات أخرى، والمزيد.
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // يسمح بتخصيص المكونات المدمجة، مثل إضافة أنماط.
+    h1: ({ children }) => <h1 style={{ fontSize: '100px' }}>{children}</h1>,
+    img: (props) => (
+      <Image
+        sizes="100vw"
+        style={{ width: '100%', height: 'auto' }}
+        {...(props as ImageProps)}
+      />
+    ),
+    ...components,
+  }
+}
+```
+
+```js filename="mdx-components.js" switcher
+import Image from 'next/image'
+
+// يسمح لك هذا الملف بتوفير مكونات React مخصصة
+// لاستخدامها في ملفات MDX. يمكنك استيراد واستخدام أي
+// مكون React تريده، بما في ذلك الأنماط المضمنة،
+// مكونات من مكتبات أخرى، والمزيد.
+
+export function useMDXComponents(components) {
+  return {
+    // يسمح بتخصيص المكونات المدمجة، مثل إضافة أنماط.
+    h1: ({ children }) => <h1 style={{ fontSize: '100px' }}>{children}</h1>,
+    img: (props) => (
+      <Image
+        sizes="100vw"
+        style={{ width: '100%', height: 'auto' }}
+        {...props}
+      />
+    ),
+    ...components,
+  }
+}
+```
+
+## الغوص العميق: كيف تحول ماركداون إلى HTML؟
+
+لا يفهم React ماركداون بشكل أصلي. يجب تحويل النص العادي لـ ماركداون أولاً إلى HTML. يمكن تحقيق ذلك باستخدام `remark` و `rehype`.
+
+`remark` هو نظام أدوات حول ماركداون. `rehype` هو نفسه، ولكن لـ HTML. على سبيل المثال، تحول مقتطف الكود التالي ماركداون إلى HTML:
+
+```js
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeStringify from 'rehype-stringify'
+
+main()
+
+async function main() {
+  const file = await unified()
+    .use(remarkParse) // التحويل إلى شجرة ماركداون المجردة (AST)
+    .use(remarkRehype) // التحويل إلى شجرة HTML المجردة (AST)
+    .use(rehypeSanitize) // تعقيم مدخلات HTML
+    .use(rehypeStringify) // تحويل AST إلى HTML متسلسل
+    .process('Hello, Next.js!')
+
+  console.log(String(file)) // <p>Hello, Next.js!</p>
+}
+```
+
+يحتوي نظام `remark` و `rehype` على ملحقات لـ [تلوين الصيغة (syntax highlighting)](https://github.com/atomiks/rehype-pretty-code)، [ربط العناوين](https://github.com/rehypejs/rehype-autolink-headings)، [إنشاء جدول محتويات](https://github.com/remarkjs/remark-toc)، والمزيد.
+
+عند استخدام `@next/mdx` كما هو موضح أعلاه، **لا تحتاج** إلى استخدام `remark` أو `rehype` مباشرة، حيث يتم التعامل معها لك. نحن نصفها هنا لفهم أعمق لما تقوم به حزمة `@next/mdx` تحت الغطاء.
+
+## استخدام مترجم MDX المبني على Rust (تجريبي)
+
+يدعم Next.js مترجم MDX جديد مكتوب بلغة Rust. هذا المترجم لا يزال تجريبيًا ولا يُنصح باستخدامه للإنتاج. لاستخدام المترجم الجديد، تحتاج إلى تكوين `next.config.js` عند تمريره إلى `withMDX`:
+
+```js filename="next.config.js"
+module.exports = withMDX({
+  experimental: {
+    mdxRs: true,
+  },
+})
+```
+
+## روابط مفيدة
+
+- [MDX](https://mdxjs.com)
+- [`@next/mdx`](https://www.npmjs.com/package/@next/mdx)
+- [remark](https://github.com/remarkjs/remark)
+- [rehype](https://github.com/rehypejs/rehype)
+- [Markdoc](https://markdoc.dev/docs/nextjs)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/06-src-directory.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/06-src-directory.mdx
new file mode 100644
index 00000000..461f9aeb
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/06-src-directory.mdx
@@ -0,0 +1,36 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:39:11.218Z
+title: دليل `src`
+description: حفظ الصفحات ضمن دليل `src` كبديل عن دليل `pages` الجذري.
+related:
+  links:
+    - app/building-your-application/routing/colocation
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+كبديل عن وجود دليل `app` أو `pages` الخاص بـ Next.js في جذر مشروعك، يدعم Next.js أيضًا النمط الشائع لوضع كود التطبيق تحت دليل `src`.
+
+هذا يفصل كود التطبيق عن ملفات تكوين المشروع التي توجد غالبًا في جذر المشروع، وهو ما يفضله بعض الأفراد والفرق.
+
+لاستخدام دليل `src`، انقل مجلد موجه `app` أو موجه `pages` إلى `src/app` أو `src/pages` على التوالي.
+
+<Image
+  alt="مثال على هيكل مجلدات مع دليل `src`"
+  srcLight="/docs/light/project-organization-src-directory.png"
+  srcDark="/docs/dark/project-organization-src-directory.png"
+  width="1600"
+  height="687"
+/>
+
+> **معلومة مفيدة**
+>
+> - يجب أن يبقى دليل `/public` في جذر مشروعك.
+> - يجب أن تبقى ملفات التكوين مثل `package.json` و`next.config.js` و`tsconfig.json` في جذر المشروع.
+> - يجب أن تبقى ملفات `.env.*` في جذر المشروع.
+> - سيتم تجاهل `src/app` أو `src/pages` إذا كان `app` أو `pages` موجودًا في الدليل الجذري.
+> - إذا كنت تستخدم `src`، فمن المحتمل أن تنقل أيضًا مجلدات التطبيق الأخرى مثل `/components` أو `/lib`.
+> - إذا كنت تستخدم Middleware، تأكد من وضعه داخل دليل `src`.
+> - إذا كنت تستخدم Tailwind CSS، ستحتاج إلى إضافة البادئة `/src` إلى ملف `tailwind.config.js` في [قسم المحتوى](https://tailwindcss.com/docs/content-configuration).
+> - إذا كنت تستخدم مسارات TypeScript للواردات مثل `@/*`، يجب تحديث كائن `paths` في `tsconfig.json` ليشمل `src/`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx
new file mode 100644
index 00000000..166c01f0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx
@@ -0,0 +1,246 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:40:25.926Z
+title: وضع المسودة (Draft Mode)
+description: يوفر Next.js وضع المسودة للتبديل بين الصفحات الثابتة والديناميكية. يمكنك تعلم كيفية عمله مع App Router هنا.
+---
+
+يكون التصيير الثابت مفيدًا عندما تستخدم صفحاتك بيانات من نظام إدارة المحتوى (CMS). ومع ذلك، ليس مثاليًا عندما تكتب مسودة على نظام إدارة المحتوى الخاص بك وتريد معاينة المسودة فورًا على صفحتك. سترغب في أن يقوم Next.js بتصيير هذه الصفحات في **وقت الطلب** بدلاً من وقت البناء وجلب محتوى المسودة بدلاً من المحتوى المنشور. سترغب في أن يتحول Next.js إلى [التصيير الديناميكي](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) فقط لهذه الحالة الخاصة.
+
+يحتوي Next.js على ميزة تسمى **وضع المسودة (Draft Mode)** التي تحل هذه المشكلة. فيما يلي إرشادات حول كيفية استخدامها.
+
+## الخطوة 1: إنشاء معالج المسار والوصول إليه
+
+أولاً، قم بإنشاء [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers). يمكن أن يكون له أي اسم - مثلاً `app/api/draft/route.ts`
+
+ثم، استورد `draftMode` من `next/headers` واستدعِ طريقة `enable()`.
+
+```ts filename="app/api/draft/route.ts" switcher
+// معالج المسار لتفعيل وضع المسودة
+import { draftMode } from 'next/headers'
+
+export async function GET(request: Request) {
+  draftMode().enable()
+  return new Response('تم تفعيل وضع المسودة')
+}
+```
+
+```js filename="app/api/draft/route.js" switcher
+// معالج المسار لتفعيل وضع المسودة
+import { draftMode } from 'next/headers'
+
+export async function GET(request) {
+  draftMode().enable()
+  return new Response('تم تفعيل وضع المسودة')
+}
+```
+
+سيؤدي هذا إلى تعيين **كوكي** لتفعيل وضع المسودة. الطلبات اللاحقة التي تحتوي على هذا الكوكي ستؤدي إلى تشغيل **وضع المسودة** مما يغير سلوك الصفحات المولدة بشكل ثابت (المزيد عن هذا لاحقًا).
+
+يمكنك اختبار هذا يدويًا بزيارة `/api/draft` والنظر في أدوات المطور في متصفحك. لاحظ رأس الاستجابة `Set-Cookie` مع كوكي باسم `__prerender_bypass`.
+
+### الوصول الآمن من نظام إدارة المحتوى الخاص بك
+
+عمليًا، سترغب في استدعاء معالج المسار هذا بشكل آمن من نظام إدارة المحتوى الخاص بك. الخطوات المحددة ستختلف اعتمادًا على نظام إدارة المحتوى الذي تستخدمه، ولكن إليك بعض الخطوات الشائعة التي يمكنك اتخاذها.
+
+تفترض هذه الخطوات أن نظام إدارة المحتوى الذي تستخدمه يدعم تعيين **عنوان URL مخصص للمسودات**. إذا لم يكن كذلك، فلا يزال بإمكانك استخدام هذه الطريقة لتأمين عناوين URL للمسودات، ولكنك ستحتاج إلى إنشاء عنوان URL للمسودة والوصول إليه يدويًا.
+
+**أولاً**، يجب إنشاء **رمز سري** باستخدام أداة توليد الرموز التي تختارها. سيعرف هذا السر فقط تطبيق Next.js الخاص بك ونظام إدارة المحتوى الخاص بك. يمنع هذا السر الأشخاص الذين لا يمكنهم الوصول إلى نظام إدارة المحتوى الخاص بك من الوصول إلى عناوين URL للمسودات.
+
+**ثانيًا**، إذا كان نظام إدارة المحتوى الخاص بك يدعم تعيين عناوين URL مخصصة للمسودات، فحدد ما يلي كعنوان URL للمسودة. يفترض هذا أن معالج المسار موجود في `app/api/draft/route.ts`
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+- `<your-site>` يجب أن يكون نطاق النشر الخاص بك.
+- `<token>` يجب استبداله بالرمز السري الذي قمت بتوليده.
+- `<path>` يجب أن يكون المسار للصفحة التي تريد معاينتها. إذا كنت تريد معاينة `/posts/foo`، فيجب استخدام `&slug=/posts/foo`.
+
+قد يسمح لك نظام إدارة المحتوى الخاص بتضمين متغير في عنوان URL للمسودة بحيث يمكن تعيين `<path>` ديناميكيًا بناءً على بيانات نظام إدارة المحتوى مثل: `&slug=/posts/{entry.fields.slug}`
+
+**أخيرًا**، في معالج المسار:
+
+- تحقق من تطابق السر وأن معلمة `slug` موجودة (إذا لم تكن كذلك، يجب أن يفشل الطلب).
+- استدعِ `draftMode.enable()` لتعيين الكوكي.
+- ثم أعد توجيه المتصفح إلى المسار المحدد بواسطة `slug`.
+
+```ts filename="app/api/draft/route.ts" switcher
+// معالج المسار مع السر والمسار
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export async function GET(request: Request) {
+  // تحليل معلمات سلسلة الاستعلام
+  const { searchParams } = new URL(request.url)
+  const secret = searchParams.get('secret')
+  const slug = searchParams.get('slug')
+
+  // التحقق من السر والمعلمات التالية
+  // يجب أن يعرف هذا السر فقط معالج المسار هذا ونظام إدارة المحتوى
+  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
+    return new Response('رمز غير صالح', { status: 401 })
+  }
+
+  // جلب نظام إدارة المحتوى للتحقق مما إذا كان المسار المقدم موجودًا
+  // ستنفذ getPostBySlug المنطق المطلوب لجلب البيانات من نظام إدارة المحتوى
+  const post = await getPostBySlug(slug)
+
+  // إذا لم يكن المسار موجودًا، امنع تفعيل وضع المسودة
+  if (!post) {
+    return new Response('مسار غير صالح', { status: 401 })
+  }
+
+  // تفعيل وضع المسودة عن طريق تعيين الكوكي
+  draftMode().enable()
+
+  // إعادة التوجيه إلى المسار من المنشور الذي تم جلب بياناته
+  // لا نعيد التوجيه إلى searchParams.slug لأن ذلك قد يؤدي إلى ثغرات إعادة توجيه مفتوحة
+  redirect(post.slug)
+}
+```
+
+```js filename="app/api/draft/route.js" switcher
+// معالج المسار مع السر والمسار
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export async function GET(request) {
+  // تحليل معلمات سلسلة الاستعلام
+  const { searchParams } = new URL(request.url)
+  const secret = searchParams.get('secret')
+  const slug = searchParams.get('slug')
+
+  // التحقق من السر والمعلمات التالية
+  // يجب أن يعرف هذا السر فقط معالج المسار هذا ونظام إدارة المحتوى
+  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
+    return new Response('رمز غير صالح', { status: 401 })
+  }
+
+  // جلب نظام إدارة المحتوى للتحقق مما إذا كان المسار المقدم موجودًا
+  // ستنفذ getPostBySlug المنطق المطلوب لجلب البيانات من نظام إدارة المحتوى
+  const post = await getPostBySlug(slug)
+
+  // إذا لم يكن المسار موجودًا، امنع تفعيل وضع المسودة
+  if (!post) {
+    return new Response('مسار غير صالح', { status: 401 })
+  }
+
+  // تفعيل وضع المسودة عن طريق تعيين الكوكي
+  draftMode().enable()
+
+  // إعادة التوجيه إلى المسار من المنشور الذي تم جلب بياناته
+  // لا نعيد التوجيه إلى searchParams.slug لأن ذلك قد يؤدي إلى ثغرات إعادة توجيه مفتوحة
+  redirect(post.slug)
+}
+```
+
+إذا نجح ذلك، فسيتم إعادة توجيه المتصفح إلى المسار الذي تريد معاينته مع كوكي وضع المسودة.
+
+## الخطوة 2: تحديث الصفحة
+
+الخطوة التالية هي تحديث صفحتك للتحقق من قيمة `draftMode().isEnabled`.
+
+إذا طلبت صفحة تحتوي على الكوكي المعين، فسيتم جلب البيانات في **وقت الطلب** (بدلاً من وقت البناء).
+
+علاوة على ذلك، ستكون قيمة `isEnabled` `true`.
+
+```tsx filename="app/page.tsx" switcher
+// صفحة تجلب البيانات
+import { draftMode } from 'next/headers'
+
+async function getData() {
+  const { isEnabled } = draftMode()
+
+  const url = isEnabled
+    ? 'https://draft.example.com'
+    : 'https://production.example.com'
+
+  const res = await fetch(url)
+
+  return res.json()
+}
+
+export default async function Page() {
+  const { title, desc } = await getData()
+
+  return (
+    <main>
+      <h1>{title}</h1>
+      <p>{desc}</p>
+    </main>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+// صفحة تجلب البيانات
+import { draftMode } from 'next/headers'
+
+async function getData() {
+  const { isEnabled } = draftMode()
+
+  const url = isEnabled
+    ? 'https://draft.example.com'
+    : 'https://production.example.com'
+
+  const res = await fetch(url)
+
+  return res.json()
+}
+
+export default async function Page() {
+  const { title, desc } = await getData()
+
+  return (
+    <main>
+      <h1>{title}</h1>
+      <p>{desc}</p>
+    </main>
+  )
+}
+```
+
+هذا كل شيء! إذا قمت بالوصول إلى معالج مسار المسودة (مع `secret` و `slug`) من نظام إدارة المحتوى الخاص بك أو يدويًا، فيجب أن تكون قادرًا الآن على رؤية محتوى المسودة. وإذا قمت بتحديث مسودتك دون نشر، فيجب أن تتمكن من معاينة المسودة.
+
+قم بتعيين هذا كعنوان URL للمسودة على نظام إدارة المحتوى الخاص بك أو قم بالوصول يدويًا، ويجب أن تتمكن من رؤية المسودة.
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+## المزيد من التفاصيل
+
+### مسح كوكي وضع المسودة
+
+افتراضيًا، تنتهي جلسة وضع المسودة عند إغلاق المتصفح.
+
+لمسح كوكي وضع المسودة يدويًا، قم بإنشاء معالج مسار يستدعي `draftMode().disable()`:
+
+```ts filename="app/api/disable-draft/route.ts" switcher
+import { draftMode } from 'next/headers'
+
+export async function GET(request: Request) {
+  draftMode().disable()
+  return new Response('تم تعطيل وضع المسودة')
+}
+```
+
+```js filename="app/api/disable-draft/route.js" switcher
+import { draftMode } from 'next/headers'
+
+export async function GET(request) {
+  draftMode().disable()
+  return new Response('تم تعطيل وضع المسودة')
+}
+```
+
+ثم، أرسل طلبًا إلى `/api/disable-draft` لاستدعاء معالج المسار. إذا كنت تستدعي هذا المسار باستخدام [`next/link`](/docs/app/api-reference/components/link)، فيجب عليك تمرير `prefetch={false}` لمنع حذف الكوكي عن طريق الخطأ أثناء الجلب المسبق.
+
+### فريد لكل `next build`
+
+سيتم إنشاء قيمة جديدة لكوكي الالتفاف في كل مرة تقوم فيها بتشغيل `next build`.
+
+هذا يضمن أنه لا يمكن تخمين كوكي الالتفاف.
+
+> **معلومة مفيدة**: لاختبار وضع المسودة محليًا عبر HTTP، سيحتاج متصفحك إلى السماح بملفات تعريف الارتباط من طرف ثالث والوصول إلى التخزين المحلي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
new file mode 100644
index 00000000..2f9924e2
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
@@ -0,0 +1,249 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:40:05.527Z
+title: سياسة أمان المحتوى (Content Security Policy)
+description: تعلم كيفية تعيين سياسة أمان المحتوى (CSP) لتطبيق Next.js الخاص بك.
+related:
+  links:
+    - app/building-your-application/routing/middleware
+    - app/api-reference/functions/headers
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+[سياسة أمان المحتوى (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) مهمة لحماية تطبيق Next.js الخاص بك من تهديدات أمنية مختلفة مثل التنصت عبر المواقع (XSS)، واحتيال النقر (clickjacking)، وهجمات حقن التعليمات البرمجية الأخرى.
+
+باستخدام CSP، يمكن للمطورين تحديد المصادر المسموح بها للمحتوى، والنصوص البرمجية، وملفات الأنماط، والصور، والخطوط، والكائنات، والوسائط (الصوت، الفيديو)، والإطارات المضمنة (iframes)، والمزيد.
+
+<details>
+  <summary>أمثلة</summary>
+
+- [CSP صارمة](https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp)
+
+</details>
+
+## القيم العشوائية لمرة واحدة (Nonces)
+
+[القيمة العشوائية لمرة واحدة (nonce)](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) هي سلسلة فريدة وعشوائية من الأحرف يتم إنشاؤها لاستخدام لمرة واحدة. تستخدم مع CSP للسماح بشكل انتقائي بتنفيذ نصوص برمجية أو أنماط مضمنة معينة، متجاوزة توجيهات CSP الصارمة.
+
+### لماذا تستخدم القيمة العشوائية لمرة واحدة؟
+
+على الرغم من أن سياسات CSP مصممة لحجب النصوص البرمجية الضارة، إلا أن هناك سيناريوهات مشروعة حيث تكون النصوص البرمجية المضمنة ضرورية. في مثل هذه الحالات، توفر القيم العشوائية لمرة واحدة طريقة للسماح بتنفيذ هذه النصوص البرمجية إذا كانت تحتوي على القيمة العشوائية الصحيحة.
+
+### إضافة قيمة عشوائية لمرة واحدة باستخدام Middleware
+
+[البرمجية الوسيطة (Middleware)](/docs/app/building-your-application/routing/middleware) تمكنك من إضافة رؤوس وتوليد قيم عشوائية لمرة واحدة قبل عرض الصفحة.
+
+في كل مرة يتم فيها عرض صفحة، يجب إنشاء قيمة عشوائية جديدة لمرة واحدة. هذا يعني أنه **يجب عليك استخدام العرض الديناميكي لإضافة القيم العشوائية لمرة واحدة**.
+
+على سبيل المثال:
+
+```ts filename="middleware.ts" switcher
+import { NextRequest, NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+  const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+    style-src 'self' 'nonce-${nonce}';
+    img-src 'self' blob: data:;
+    font-src 'self';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    upgrade-insecure-requests;
+`
+  // استبدال أحرف المسافات والفواصل
+  const contentSecurityPolicyHeaderValue = cspHeader
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-nonce', nonce)
+
+  requestHeaders.set(
+    'Content-Security-Policy',
+    contentSecurityPolicyHeaderValue
+  )
+
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  })
+  response.headers.set(
+    'Content-Security-Policy',
+    contentSecurityPolicyHeaderValue
+  )
+
+  return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+  const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+    style-src 'self' 'nonce-${nonce}';
+    img-src 'self' blob: data:;
+    font-src 'self';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    upgrade-insecure-requests;
+`
+  // استبدال أحرف المسافات والفواصل
+  const contentSecurityPolicyHeaderValue = cspHeader
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-nonce', nonce)
+  requestHeaders.set(
+    'Content-Security-Policy',
+    contentSecurityPolicyHeaderValue
+  )
+
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  })
+  response.headers.set(
+    'Content-Security-Policy',
+    contentSecurityPolicyHeaderValue
+  )
+
+  return response
+}
+```
+
+بشكل افتراضي، تعمل البرمجية الوسيطة على جميع الطلبات. يمكنك تصفية البرمجية الوسيطة لتشغيلها على مسارات محددة باستخدام [`matcher`](/docs/app/building-your-application/routing/middleware#matcher).
+
+نوصي بتجاهل مطابقة الجلب المسبق (من `next/link`) والأصول الثابتة التي لا تحتاج إلى رأس CSP.
+
+```ts filename="middleware.ts" switcher
+export const config = {
+  matcher: [
+    /*
+     * مطابقة جميع مسارات الطلبات باستثناء تلك التي تبدأ بـ:
+     * - api (مسارات API)
+     * - _next/static (ملفات ثابتة)
+     * - _next/image (ملفات تحسين الصور)
+     * - favicon.ico (ملف الأيقونة)
+     */
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+  ],
+}
+```
+
+```js filename="middleware.js" switcher
+export const config = {
+  matcher: [
+    /*
+     * مطابقة جميع مسارات الطلبات باستثناء تلك التي تبدأ بـ:
+     * - api (مسارات API)
+     * - _next/static (ملفات ثابتة)
+     * - _next/image (ملفات تحسين الصور)
+     * - favicon.ico (ملف الأيقونة)
+     */
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+  ],
+}
+```
+
+### قراءة القيمة العشوائية لمرة واحدة
+
+يمكنك الآن قراءة القيمة العشوائية لمرة واحدة من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components) باستخدام [`headers`](/docs/app/api-reference/functions/headers):
+
+```tsx filename="app/page.tsx" switcher
+import { headers } from 'next/headers'
+import Script from 'next/script'
+
+export default function Page() {
+  const nonce = headers().get('x-nonce')
+
+  return (
+    <Script
+      src="https://www.googletagmanager.com/gtag/js"
+      strategy="afterInteractive"
+      nonce={nonce}
+    />
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+import { headers } from 'next/headers'
+import Script from 'next/script'
+
+export default function Page() {
+  const nonce = headers().get('x-nonce')
+
+  return (
+    <Script
+      src="https://www.googletagmanager.com/gtag/js"
+      strategy="afterInteractive"
+      nonce={nonce}
+    />
+  )
+}
+```
+
+## بدون قيم عشوائية لمرة واحدة
+
+للتطبيقات التي لا تتطلب قيم عشوائية لمرة واحدة، يمكنك تعيين رأس CSP مباشرة في ملف [`next.config.js`](/docs/app/api-reference/next-config-js):
+
+```js filename="next.config.js"
+const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'unsafe-eval' 'unsafe-inline';
+    style-src 'self' 'unsafe-inline';
+    img-src 'self' blob: data:;
+    font-src 'self';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    upgrade-insecure-requests;
+`
+
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: cspHeader.replace(/\n/g, ''),
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## سجل الإصدارات
+
+نوصي باستخدام إصدار `v13.4.20+` من Next.js للتعامل مع القيم العشوائية لمرة واحدة وتطبيقها بشكل صحيح.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/index.mdx
new file mode 100644
index 00000000..fd8bfa2c
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/07-configuring/index.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:38:45.533Z
+title: التكوين
+description: تعلم كيفية تكوين تطبيق Next.js الخاص بك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يسمح لك Next.js بتخصيص مشروعك لتلبية متطلبات محددة. يتضمن ذلك تكاملات مع TypeScript وESlint وغيرها، بالإضافة إلى خيارات التكوين الداخلية مثل الاستيرادات المطلقة (Absolute Imports) ومتغيرات البيئة (Environment Variables).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/01-vitest.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/01-vitest.mdx
new file mode 100644
index 00000000..90fb557c
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/01-vitest.mdx
@@ -0,0 +1,208 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:39:23.307Z
+title: إعداد Vitest مع Next.js
+nav_title: Vitest
+description: تعلم كيفية إعداد Vitest مع Next.js لاختبار الوحدات (Unit Testing).
+---
+
+يتم استخدام Vite و React Testing Library معًا بشكل متكرر لـ **اختبار الوحدات (Unit Testing)**. سيُظهر لك هذا الدليل كيفية إعداد Vitest مع Next.js وكتابة أول اختباراتك.
+
+> **معلومة مفيدة:** نظرًا لأن مكونات الخادم (Server Components) غير المتزامنة (`async`) جديدة في نظام React البيئي، فإن Vitest لا يدعمها حاليًا. بينما يمكنك仍然 تشغيل **اختبارات الوحدات** لمكونات الخادم والعميل المتزامنة، نوصي باستخدام **اختبارات E2E** للمكونات غير المتزامنة (`async`).
+
+## البدء السريع
+
+يمكنك استخدام `create-next-app` مع مثال Next.js [with-vitest](https://github.com/vercel/next.js/tree/canary/examples/with-vitest) للبدء بسرعة:
+
+```bash filename="Terminal"
+npx create-next-app@latest --example with-vitest with-vitest-app
+```
+
+## الإعداد اليدوي
+
+لإعداد Vitest يدويًا، قم بتثبيت `vitest` والحزم التالية كتبعيات تطوير:
+
+```bash filename="Terminal"
+npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
+# أو
+yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react
+# أو
+pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
+# أو
+bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react
+```
+
+قم بإنشاء ملف `vitest.config.ts|js` في جذر مشروعك، وأضف الخيارات التالية:
+
+```ts filename="vitest.config.ts" switcher
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+  },
+})
+```
+
+```js filename="vitest.config.js" switcher
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+  },
+})
+```
+
+لمزيد من المعلومات حول تكوين Vitest، يرجى الرجوع إلى وثائق [تكوين Vitest](https://vitest.dev/config/#configuration).
+
+ثم، أضف سكريبت `test` إلى ملف `package.json` الخاص بك:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "vitest"
+  }
+}
+```
+
+عند تشغيل `npm run test`، سيقوم Vitest **بمراقبة** التغييرات في مشروعك افتراضيًا.
+
+## إنشاء أول اختبار وحدة باستخدام Vitest
+
+تحقق من أن كل شيء يعمل بشكل صحيح عن طريق إنشاء اختبار للتحقق مما إذا كان مكون `<Page />` يعرض عنوانًا بنجاح:
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+```
+
+```tsx filename="__tests__/page.test.tsx" switcher
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Page from '../app/page'
+
+test('Page', () => {
+  render(<Page />)
+  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
+})
+```
+
+```jsx filename="__tests__/page.test.jsx" switcher
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Page from '../app/page'
+
+test('Page', () => {
+  render(<Page />)
+  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
+})
+```
+
+> **معلومة مفيدة**: يستخدم المثال أعلاه اصطلاح `__tests__` الشائع، ولكن يمكن أيضًا وضع ملفات الاختبار داخل مسار `app`.
+
+</AppOnly>
+
+<PagesOnly>
+
+```tsx filename="pages/index.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="pages/index.jsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+```
+
+```tsx filename="__tests__/index.test.tsx" switcher
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Page from '../pages/index'
+
+test('Page', () => {
+  render(<Page />)
+  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
+})
+```
+
+```jsx filename="__tests__/index.test.jsx" switcher
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Page from '../pages/index'
+
+test('Page', () => {
+  render(<Page />)
+  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
+})
+```
+
+</PagesOnly>
+
+## تشغيل الاختبارات
+
+ثم، قم بتشغيل الأمر التالي لتشغيل اختباراتك:
+
+```bash filename="Terminal"
+npm run test
+# أو
+yarn test
+# أو
+pnpm test
+# أو
+bun test
+```
+
+## موارد إضافية
+
+قد تجد هذه الموارد مفيدة:
+
+- [مثال Next.js مع Vitest](https://github.com/vercel/next.js/tree/canary/examples/with-vitest)
+- [وثائق Vitest](https://vitest.dev/guide/)
+- [وثائق React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/02-jest.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/02-jest.mdx
new file mode 100644
index 00000000..798f0eda
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/02-jest.mdx
@@ -0,0 +1,387 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:40:39.671Z
+title: إعداد Jest مع Next.js
+nav_title: Jest
+description: تعلم كيفية إعداد Jest مع Next.js لاختبار الوحدات واختبار اللقطات (Snapshot Testing).
+---
+
+يتم استخدام Jest ومكتبة اختبار React (React Testing Library) معًا بشكل متكرر لـ **اختبار الوحدات (Unit Testing)** و**اختبار اللقطات (Snapshot Testing)**. سيوضح لك هذا الدليل كيفية إعداد Jest مع Next.js وكتابة أول اختباراتك.
+
+> **معلومة مفيدة:** نظرًا لأن مكونات الخادم غير المتزامنة (`async` Server Components) جديدة في نظام React البيئي، فإن Jest لا يدعمها حاليًا. بينما يمكنك仍然 تشغيل **اختبارات الوحدات** لمكونات الخادم والعميل المتزامنة، نوصي باستخدام **اختبارات من النهاية إلى النهاية (E2E tests)** للمكونات غير المتزامنة (`async`).
+
+## البدء السريع
+
+يمكنك استخدام `create-next-app` مع مثال Next.js [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) للبدء بسرعة:
+
+```bash filename="Terminal"
+npx create-next-app@latest --example with-jest with-jest-app
+```
+
+## الإعداد اليدوي
+
+منذ إصدار [Next.js 12](https://nextjs.org/blog/next-12)، أصبح لدى Next.js الآن تكوين مدمج لـ Jest.
+
+لإعداد Jest، قم بتثبيت `jest` والحزم التالية كتبعيات تطوير:
+
+```bash filename="Terminal"
+npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
+# أو
+yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
+# أو
+pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
+```
+
+قم بإنشاء ملف تكوين أساسي لـ Jest عن طريق تشغيل الأمر التالي:
+
+```bash filename="Terminal"
+npm init jest@latest
+# أو
+yarn create jest@latest
+# أو
+pnpm create jest@latest
+```
+
+سيأخذك هذا عبر سلسلة من التعليمات لإعداد Jest لمشروعك، بما في ذلك إنشاء ملف `jest.config.ts|js` تلقائيًا.
+
+قم بتحديث ملف التكوين الخاص بك لاستخدام `next/jest`. يحتوي هذا المحول على جميع خيارات التكوين اللازمة ليعمل Jest مع Next.js:
+
+```ts filename="jest.config.ts" switcher
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // قم بتوفير المسار إلى تطبيق Next.js الخاص بك لتحميل next.config.js وملفات .env في بيئة الاختبار
+  dir: './',
+})
+
+// أضف أي تكوين مخصص لتمريره إلى Jest
+const config: Config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  // أضف المزيد من خيارات الإعداد قبل تشغيل كل اختبار
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+// يتم تصدير createJestConfig بهذه الطريقة لضمان أن next/jest يمكنه تحميل تكوين Next.js وهو غير متزامن
+export default createJestConfig(config)
+```
+
+```js filename="jest.config.js" switcher
+const nextJest = require('next/jest')
+
+/** @type {import('jest').Config} */
+const createJestConfig = nextJest({
+  // قم بتوفير المسار إلى تطبيق Next.js الخاص بك لتحميل next.config.js وملفات .env في بيئة الاختبار
+  dir: './',
+})
+
+// أضف أي تكوين مخصص لتمريره إلى Jest
+const config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  // أضف المزيد من خيارات الإعداد قبل تشغيل كل اختبار
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+// يتم تصدير createJestConfig بهذه الطريقة لضمان أن next/jest يمكنه تحميل تكوين Next.js وهو غير متزامن
+module.exports = createJestConfig(config)
+```
+
+تحت الغطاء، يقوم `next/jest` بتكوين Jest تلقائيًا لك، بما في ذلك:
+
+- إعداد `transform` باستخدام [مترجم Next.js](/docs/architecture/nextjs-compiler)
+- المحاكاة التلقائية لملفات الأنماط (`.css`, `.module.css`، ومتغيرات scss الخاصة بها)، واستيراد الصور و[`next/font`](/docs/pages/building-your-application/optimizing/fonts)
+- تحميل `.env` (وجميع المتغيرات) إلى `process.env`
+- تجاهل `node_modules` من تحويلات الاختبار والحل
+- تجاهل `.next` من حل الاختبار
+- تحميل `next.config.js` للأعلام التي تمكّن تحويلات SWC
+
+> **معلومة مفيدة:** لاختبار متغيرات البيئة مباشرة، قم بتحميلها يدويًا في سيناريو إعداد منفصل أو في ملف `jest.config.ts`. لمزيد من المعلومات، يرجى الاطلاع على [متغيرات بيئة الاختبار](/docs/pages/building-your-application/configuring/environment-variables#test-environment-variables).
+
+<PagesOnly>
+
+## إعداد Jest (مع Babel)
+
+إذا اخترت عدم استخدام [مترجم Next.js](/docs/architecture/nextjs-compiler) واستخدمت Babel بدلاً من ذلك، فستحتاج إلى تكوين Jest يدويًا وتثبيت `babel-jest` و`identity-obj-proxy` بالإضافة إلى الحزم المذكورة أعلاه.
+
+فيما يلي الخيارات الموصى بها لتكوين Jest لـ Next.js:
+
+```js filename="jest.config.js"
+module.exports = {
+  collectCoverage: true,
+  // في node 14.x يوفر coverage provider v8 سرعة جيدة وتقرير جيد إلى حد ما
+  coverageProvider: 'v8',
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+    '!<rootDir>/out/**',
+    '!<rootDir>/.next/**',
+    '!<rootDir>/*.config.js',
+    '!<rootDir>/coverage/**',
+  ],
+  moduleNameMapper: {
+    // التعامل مع استيراد CSS (مع وحدات CSS)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // التعامل مع استيراد CSS (بدون وحدات CSS)
+    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+
+    // التعامل مع استيراد الصور
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
+
+    // التعامل مع أسماء الوحدات المستعارة
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+
+    // التعامل مع @next/font
+    '@next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
+    // التعامل مع next/font
+    'next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
+    // تعطيل server-only
+    'server-only': `<rootDir>/__mocks__/empty.js`,
+  },
+  // أضف المزيد من خيارات الإعداد قبل تشغيل كل اختبار
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  testEnvironment: 'jsdom',
+  transform: {
+    // استخدم babel-jest لتحويل الاختبارات مع الإعداد المسبق next/babel
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+}
+```
+
+يمكنك معرفة المزيد حول كل خيار تكوين في [وثائق Jest](https://jestjs.io/docs/configuration). نوصي أيضًا بمراجعة [تكوين `next/jest`](https://github.com/vercel/next.js/blob/e02fe314dcd0ae614c65b505c6daafbdeebb920e/packages/next/src/build/jest/jest.ts) لمعرفة كيفية تكوين Next.js لـ Jest.
+
+### التعامل مع ملفات الأنماط واستيراد الصور
+
+لا يتم استخدام ملفات الأنماط والصور في الاختبارات ولكن استيرادها قد يتسبب في أخطاء، لذا يجب محاكاتها.
+
+قم بإنشاء ملفات المحاكاة المشار إليها في التكوين أعلاه - `fileMock.js` و`styleMock.js` - داخل دليل `__mocks__`:
+
+```js filename="__mocks__/fileMock.js"
+module.exports = 'test-file-stub'
+```
+
+```js filename="__mocks__/styleMock.js"
+module.exports = {}
+```
+
+لمزيد من المعلومات حول التعامل مع الأصول الثابتة، يرجى الرجوع إلى [وثائق Jest](https://jestjs.io/docs/webpack#handling-static-assets).
+
+## التعامل مع الخطوط
+
+للتعامل مع الخطوط، قم بإنشاء ملف `nextFontMock.js` داخل دليل `__mocks__`، وأضف التكوين التالي:
+
+```js filename="__mocks__/nextFontMock.js"
+module.exports = new Proxy(
+  {},
+  {
+    get: function getter() {
+      return () => ({
+        className: 'className',
+        variable: 'variable',
+        style: { fontFamily: 'fontFamily' },
+      })
+    },
+  }
+)
+```
+
+</PagesOnly>
+
+## اختياري: التعامل مع الاستيراد المطلق وأسماء مسار الوحدات
+
+إذا كان مشروعك يستخدم [أسماء مسار الوحدات (Module Path Aliases)](/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases)، فستحتاج إلى تكوين Jest لحل عمليات الاستيراد عن طريق مطابقة خيار paths في ملف `jsconfig.json` مع خيار `moduleNameMapper` في ملف `jest.config.js`. على سبيل المثال:
+
+```json filename="tsconfig.json أو jsconfig.json"
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "baseUrl": "./",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+```js filename="jest.config.js"
+moduleNameMapper: {
+  // ...
+  '^@/components/(.*)$': '<rootDir>/components/$1',
+}
+```
+
+## اختياري: توسيع Jest مع مطابقات مخصصة
+
+يتضمن `@testing-library/jest-dom` مجموعة من [المطابقات المخصصة](https://github.com/testing-library/jest-dom#custom-matchers) الملائمة مثل `.toBeInTheDocument()` مما يجعل كتابة الاختبارات أسهل. يمكنك استيراد المطابقات المخصصة لكل اختبار عن طريق إضافة الخيار التالي إلى ملف تكوين Jest:
+
+```ts filename="jest.config.ts" switcher
+setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']
+```
+
+```js filename="jest.config.js" switcher
+setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
+```
+
+ثم، داخل `jest.setup.ts`، أضف الاستيراد التالي:
+
+```ts filename="jest.setup.ts" switcher
+import '@testing-library/jest-dom'
+```
+
+```js filename="jest.setup.js" switcher
+import '@testing-library/jest-dom'
+```
+
+> **معلومة مفيدة:** تمت إزالة [`extend-expect` في الإصدار `v6.0`](https://github.com/testing-library/jest-dom/releases/tag/v6.0.0)، لذا إذا كنت تستخدم `@testing-library/jest-dom` قبل الإصدار 6، فستحتاج إلى استيراد `@testing-library/jest-dom/extend-expect` بدلاً من ذلك.
+
+إذا كنت بحاجة إلى إضافة المزيد من خيارات الإعداد قبل كل اختبار، يمكنك إضافتها إلى ملف `jest.setup.js` أعلاه.
+
+## أضف سكريبت اختبار إلى `package.json`:
+
+أخيرًا، أضف سكريبت اختبار Jest إلى ملف `package.json` الخاص بك:
+
+```json filename="package.json" highlight={6-7}
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  }
+}
+```
+
+سيقوم `jest --watch` بإعادة تشغيل الاختبارات عند تغيير ملف. لمزيد من خيارات سطر أوامر Jest، يرجى الرجوع إلى [وثائق Jest](https://jestjs.io/docs/cli#reference).
+
+### إنشاء أول اختبار لك:
+
+مشروعك جاهز الآن لتشغيل الاختبارات. قم بإنشاء مجلد يسمى `__tests__` في دليل الجذر لمشروعك.
+
+<PagesOnly>
+
+على سبيل المثال، يمكننا إضافة اختبار للتحقق مما إذا كان المكون `<Home />` يقوم بعرض عنوان بنجاح:
+
+```jsx filename="pages/index.js
+export default function Home() {
+  return <h1>Home</h1>
+}
+```
+
+```jsx filename="__tests__/index.test.js"
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import Home from '../pages/index'
+
+describe('Home', () => {
+  it('renders a heading', () => {
+    render(<Home />)
+
+    const heading = screen.getByRole('heading', { level: 1 })
+
+    expect(heading).toBeInTheDocument()
+  })
+})
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+على سبيل المثال، يمكننا إضافة اختبار للتحقق مما إذا كان المكون `<Page />` يقوم بعرض عنوان بنجاح:
+
+```jsx filename="app/page.js
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="__tests__/page.test.jsx"
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import Page from '../app/page'
+
+describe('Page', () => {
+  it('renders a heading', () => {
+    render(<Page />)
+
+    const heading = screen.getByRole('heading', { level: 1 })
+
+    expect(heading).toBeInTheDocument()
+  })
+})
+```
+
+</AppOnly>
+
+اختياريًا، أضف [اختبار لقطة (snapshot test)](https://jestjs.io/docs/snapshot-testing) لتتبع أي تغييرات غير متوقعة في المكون الخاص بك:
+
+<PagesOnly>
+
+```jsx filename="__tests__/snapshot.js"
+import { render } from '@testing-library/react'
+import Home from '../pages/index'
+
+it('renders homepage unchanged', () => {
+  const { container } = render(<Home />)
+  expect(container).toMatchSnapshot()
+})
+```
+
+> **معلومة مفيدة:** لا يجب تضمين ملفات الاختبار داخل مسار الصفحات (Pages Router) لأن أي ملفات داخل مسار الصفحات تعتبر مسارات.
+
+</PagesOnly>
+
+<AppOnly>
+
+```jsx filename="__tests__/snapshot.js"
+import { render } from '@testing-library/react'
+import Page from '../app/page'
+
+it('renders homepage unchanged', () => {
+  const { container } = render(<Page />)
+  expect(container).toMatchSnapshot()
+})
+```
+
+</AppOnly>
+
+## تشغيل الاختبارات الخاصة بك
+
+ثم، قم بتشغيل الأمر التالي لتشغيل اختباراتك:
+
+```bash filename="Terminal"
+npm run test
+# أو
+yarn test
+# أو
+pnpm test
+```
+
+## موارد إضافية
+
+لمزيد من القراءة، قد تجد هذه الموارد مفيدة:
+
+- [مثال Next.js مع Jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest)
+- [وثائق Jest](https://jestjs.io/docs/getting-started)
+- [وثائق مكتبة اختبار React](https://testing-library.com/docs/react-testing-library/intro/)
+- [Testing Playground](https://testing-playground.com/) - استخدم ممارسات اختبار جيدة لمطابقة العناصر.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/03-playwright.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/03-playwright.mdx
new file mode 100644
index 00000000..30f4d2c4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/03-playwright.mdx
@@ -0,0 +1,134 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:38:41.540Z
+title: إعداد Playwright مع Next.js
+nav_title: Playwright
+description: تعلم كيفية إعداد Playwright مع Next.js لإجراء اختبارات من البداية إلى النهاية (E2E).
+---
+
+Playwright هو إطار عمل للاختبار يتيح لك أتمتة متصفحات Chromium وFirefox وWebKit باستخدام واجهة برمجة تطبيقات واحدة. يمكنك استخدامه لكتابة اختبارات **من البداية إلى النهاية (E2E)**. سيوضح لك هذا الدليل كيفية إعداد Playwright مع Next.js وكتابة أول اختباراتك.
+
+## البدء السريع
+
+أسرع طريقة للبدء هي استخدام `create-next-app` مع [مثال with-playwright](https://github.com/vercel/next.js/tree/canary/examples/with-playwright). سينشئ هذا مشروع Next.js مكتملًا مع تكوين Playwright.
+
+```bash filename="Terminal"
+npx create-next-app@latest --example with-playwright with-playwright-app
+```
+
+## الإعداد اليدوي
+
+لتثبيت Playwright، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm init playwright
+# أو
+yarn create playwright
+# أو
+pnpm create playwright
+```
+
+سيأخذك هذا عبر سلسلة من المطالبات لإعداد وتكوين Playwright لمشروعك، بما في ذلك إضافة ملف `playwright.config.ts`. يرجى الرجوع إلى [دليل تثبيت Playwright](https://playwright.dev/docs/intro#installation) للحصول على الدليل خطوة بخطوة.
+
+## إنشاء أول اختبار E2E باستخدام Playwright
+
+أنشئ صفحتين جديدتين في Next.js:
+
+<AppOnly>
+
+```tsx filename="app/page.tsx"
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>الصفحة الرئيسية</h1>
+      <Link href="/about">حول</Link>
+    </div>
+  )
+}
+```
+
+```tsx filename="app/about/page.tsx"
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>حول</h1>
+      <Link href="/">الصفحة الرئيسية</Link>
+    </div>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```tsx filename="pages/index.ts"
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div>
+      <h1>الصفحة الرئيسية</h1>
+      <Link href="/about">حول</Link>
+    </div>
+  )
+}
+```
+
+```tsx filename="pages/about.ts"
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <div>
+      <h1>حول</h1>
+      <Link href="/">الصفحة الرئيسية</Link>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+ثم أضف اختبارًا للتحقق من أن التنقل يعمل بشكل صحيح:
+
+```ts filename="tests/example.spec.ts"
+import { test, expect } from '@playwright/test'
+
+test('يجب الانتقال إلى صفحة حول', async ({ page }) => {
+  // ابدأ من صفحة الفهرس (يتم تعيين baseURL عبر webServer في ملف playwright.config.ts)
+  await page.goto('http://localhost:3000/')
+  // ابحث عن عنصر يحتوي على نص 'حول' وانقر عليه
+  await page.click('text=حول')
+  // يجب أن يكون عنوان URL الجديد "/about" (يتم استخدام baseURL هناك)
+  await expect(page).toHaveURL('http://localhost:3000/about')
+  // يجب أن تحتوي الصفحة الجديدة على عنصر h1 يحتوي على "حول"
+  await expect(page.locator('h1')).toContainText('حول')
+})
+```
+
+> **معلومة مفيدة**:
+>
+> يمكنك استخدام `page.goto("/")` بدلاً من `page.goto("http://localhost:3000/")`، إذا أضفت [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) إلى ملف التكوين `playwright.config.ts` [ملف التكوين](https://playwright.dev/docs/test-configuration).
+
+### تشغيل اختبارات Playwright
+
+سيقوم Playwright بمحاكاة مستخدم يتنقل في تطبيقك باستخدام ثلاثة متصفحات: Chromium وFirefox وWebkit، وهذا يتطلب تشغيل خادم Next.js الخاص بك. نوصي بتشغيل اختباراتك ضد كود الإنتاج لمحاكاة سلوك تطبيقك بشكل أقرب.
+
+قم بتشغيل `npm run build` ثم `npm run start`، ثم قم بتشغيل `npx playwright test` في نافذة طرفية أخرى لتشغيل اختبارات Playwright.
+
+> **معلومة مفيدة**: بدلاً من ذلك، يمكنك استخدام ميزة [`webServer`](https://playwright.dev/docs/test-webserver/) للسماح لـ Playwright ببدء خادم التطوير والانتظار حتى يصبح متاحًا بالكامل.
+
+### تشغيل Playwright على التكامل المستمر (CI)
+
+سيقوم Playwright افتراضيًا بتشغيل اختباراتك في [وضع headless](https://playwright.dev/docs/ci#running-headed). لتثبيت جميع تبعيات Playwright، قم بتشغيل `npx playwright install-deps`.
+
+يمكنك معرفة المزيد عن Playwright والتكامل المستمر من هذه المصادر:
+
+- [مثال Next.js مع Playwright](https://github.com/vercel/next.js/tree/canary/examples/with-playwright)
+- [Playwright على موفر CI الخاص بك](https://playwright.dev/docs/ci)
+- [Playwright Discord](https://discord.com/invite/playwright-807756831384403968)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/04-cypress.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/04-cypress.mdx
new file mode 100644
index 00000000..c5e19b58
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/04-cypress.mdx
@@ -0,0 +1,290 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:38:57.893Z
+title: إعداد Cypress مع Next.js
+nav_title: Cypress
+description: تعلم كيفية إعداد Cypress مع Next.js لاختبارات End-to-End (E2E) واختبارات المكونات.
+---
+
+[Cypress](https://www.cypress.io/) هو أداة تشغيل اختبارات تُستخدم لاختبارات **End-to-End (E2E)** و**اختبارات المكونات**. ستوضح لك هذه الصفحة كيفية إعداد Cypress مع Next.js وكتابة أول اختباراتك.
+
+> **تحذير:**
+>
+> - بالنسبة لـ **اختبارات المكونات**، لا يدعم Cypress حاليًا [Next.js الإصدار 14](https://github.com/cypress-io/cypress/issues/28185) ومكونات الخادم `async`. يتم تتبع هذه المشكلات حاليًا. في الوقت الحالي، يعمل اختبار المكونات مع Next.js الإصدار 13، ونوصي باستخدام اختبار E2E لمكونات الخادم `async`.
+> - لا يدعم Cypress حاليًا [TypeScript الإصدار 5](https://github.com/cypress-io/cypress/issues/27731) مع `moduleResolution:"bundler"`. يتم تتبع هذه المشكلة حاليًا.
+
+<AppOnly>
+
+## البدء السريع
+
+يمكنك استخدام `create-next-app` مع [مثال with-cypress](https://github.com/vercel/next.js/tree/canary/examples/with-cypress) للبدء بسرعة.
+
+```bash filename="Terminal"
+npx create-next-app@latest --example with-cypress with-cypress-app
+```
+
+</AppOnly>
+
+## الإعداد اليدوي
+
+لإعداد Cypress يدويًا، قم بتثبيت `cypress` كتبعية تطوير:
+
+```bash filename="Terminal"
+npm install -D cypress
+# أو
+yarn add -D cypress
+# أو
+pnpm install -D cypress
+```
+
+أضف أمر `open` الخاص بـ Cypress إلى حقل `scripts` في ملف `package.json`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "cypress:open": "cypress open"
+  }
+}
+```
+
+قم بتشغيل Cypress لأول مرة لفتح مجموعة اختبارات Cypress:
+
+```bash filename="Terminal"
+npm run cypress:open
+```
+
+يمكنك اختيار تكوين **اختبار E2E** و/أو **اختبار المكونات**. سيؤدي اختيار أي من هذه الخيارات إلى إنشاء ملف `cypress.config.js` ومجلد `cypress` في مشروعك تلقائيًا.
+
+## إنشاء أول اختبار E2E باستخدام Cypress
+
+تأكد من أن ملف `cypress.config.js` يحتوي على التكوين التالي:
+
+```ts filename="cypress.config.ts"
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+  },
+})
+```
+
+```js filename="cypress.config.js"
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+  },
+})
+```
+
+بعد ذلك، قم بإنشاء ملفين جديدين في Next.js:
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/about/page.js"
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>About</h1>
+      <Link href="/">Home</Link>
+    </div>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="pages/about.js"
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <div>
+      <h1>About</h1>
+      <Link href="/">Home</Link>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+أضف اختبارًا للتحقق من أن التنقل يعمل بشكل صحيح:
+
+```js filename="cypress/e2e/app.cy.js"
+describe('Navigation', () => {
+  it('should navigate to the about page', () => {
+    // ابدأ من الصفحة الرئيسية
+    cy.visit('http://localhost:3000/')
+
+    // ابحث عن رابط يحتوي على سمة href تشمل "about" وانقر عليه
+    cy.get('a[href*="about"]').click()
+
+    // يجب أن يتضمن الرابط الجديد "/about"
+    cy.url().should('include', '/about')
+
+    // يجب أن تحتوي الصفحة الجديدة على h1 مع نص "About"
+    cy.get('h1').contains('About')
+  })
+})
+```
+
+### تشغيل اختبارات E2E
+
+سيقوم Cypress بمحاكاة مستخدم يتنقل في تطبيقك، وهذا يتطلب تشغيل خادم Next.js. نوصي بتشغيل اختباراتك ضد كود الإنتاج لمحاكاة سلوك التطبيق الفعلي بشكل أقرب.
+
+قم بتشغيل `npm run build && npm run start` لبناء تطبيق Next.js الخاص بك، ثم قم بتشغيل `npm run cypress:open` في نافذة طرفية أخرى لبدء Cypress وتشغيل مجموعة اختبارات E2E.
+
+> **معلومة مفيدة:**
+>
+> - يمكنك استخدام `cy.visit("/")` بدلاً من `cy.visit("http://localhost:3000/")` عن طريق إضافة `baseUrl: 'http://localhost:3000'` إلى ملف تكوين `cypress.config.js`.
+> - بدلاً من ذلك، يمكنك تثبيت حزمة `start-server-and-test` لتشغيل خادم إنتاج Next.js بالتزامن مع Cypress. بعد التثبيت، أضف `"test": "start-server-and-test start http://localhost:3000 cypress"` إلى حقل `scripts` في ملف `package.json`. تذكر إعادة بناء تطبيقك بعد إجراء تغييرات جديدة.
+
+## إنشاء أول اختبار مكون باستخدام Cypress
+
+تقوم اختبارات المكونات ببناء وتثبيت مكون معين دون الحاجة إلى تجميع التطبيق بالكامل أو تشغيل خادم.
+
+حدد **اختبار المكونات** في تطبيق Cypress، ثم حدد **Next.js** كإطار العمل الأمامي. سيتم إنشاء مجلد `cypress/component` في مشروعك، وسيتم تحديث ملف `cypress.config.js` لتمكين اختبار المكونات.
+
+تأكد من أن ملف `cypress.config.js` يحتوي على التكوين التالي:
+
+```ts filename="cypress.config.ts"
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+})
+```
+
+```js filename="cypress.config.js"
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+})
+```
+
+بافتراض نفس المكونات من القسم السابق، أضف اختبارًا للتحقق من أن المكون يعرض النتائج المتوقعة:
+
+<AppOnly>
+
+```tsx filename="cypress/component/about.cy.tsx"
+import Page from '../../app/page'
+
+describe('<Page />', () => {
+  it('should render and display expected content', () => {
+    // قم بتثبيت مكون React لصفحة Home
+    cy.mount(<Page />)
+
+    // يجب أن تحتوي الصفحة الجديدة على h1 مع نص "Home"
+    cy.get('h1').contains('Home')
+
+    // تحقق من وجود رابط مع الرابط المتوقع
+    // يفضل استخدام اختبار E2E لمتابعة الروابط
+    cy.get('a[href="/about"]').should('be.visible')
+  })
+})
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="cypress/component/about.cy.js"
+import AboutPage from '../../pages/about'
+
+describe('<AboutPage />', () => {
+  it('should render and display expected content', () => {
+    // قم بتثبيت مكون React لصفحة About
+    cy.mount(<AboutPage />)
+
+    // يجب أن تحتوي الصفحة الجديدة على h1 مع نص "About"
+    cy.get('h1').contains('About')
+
+    // تحقق من وجود رابط مع الرابط المتوقع
+    // يفضل استخدام اختبار E2E لمتابعة الروابط
+    cy.get('a[href="/"]').should('be.visible')
+  })
+})
+```
+
+</PagesOnly>
+
+> **معلومة مفيدة:**
+>
+> - لا يدعم Cypress حاليًا اختبار المكونات لمكونات الخادم `async`. نوصي باستخدام اختبار E2E.
+> - نظرًا لأن اختبارات المكونات لا تتطلب خادم Next.js، فقد لا تعمل ميزات مثل `<Image />` التي تعتمد على توفر خادم بشكل افتراضي.
+
+### تشغيل اختبارات المكونات
+
+قم بتشغيل `npm run cypress:open` في طرفيتك لبدء Cypress وتشغيل مجموعة اختبارات المكونات.
+
+## التكامل المستمر (CI)
+
+بالإضافة إلى الاختبارات التفاعلية، يمكنك أيضًا تشغيل Cypress بدون واجهة مستخدم باستخدام أمر `cypress run`، وهو أكثر ملاءمة لبيئات التكامل المستمر:
+
+```json filename="package.json"
+{
+  "scripts": {
+    //...
+    "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
+    "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
+    "component": "cypress open --component",
+    "component:headless": "cypress run --component"
+  }
+}
+```
+
+يمكنك معرفة المزيد عن Cypress والتكامل المستمر من هذه المصادر:
+
+- [مثال Next.js مع Cypress](https://github.com/vercel/next.js/tree/canary/examples/with-cypress)
+- [وثائق التكامل المستمر لـ Cypress](https://docs.cypress.io/guides/continuous-integration/introduction)
+- [دليل إجراءات GitHub لـ Cypress](https://on.cypress.io/github-actions)
+- [إجراء GitHub الرسمي لـ Cypress](https://github.com/cypress-io/github-action)
+- [Discord الخاص بـ Cypress](https://discord.com/invite/cypress)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/index.mdx
new file mode 100644
index 00000000..376cc6dd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/08-testing/index.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:37:17.820Z
+title: الاختبار
+description: تعلم كيفية إعداد Next.js مع أربعة أدوات اختبار شائعة الاستخدام — Cypress و Playwright و Vitest و Jest.
+---
+
+في React و Next.js، هناك أنواع مختلفة من الاختبارات التي يمكنك كتابتها، لكل منها غرضه وحالات استخدامه الخاصة. توفر هذه الصفحة نظرة عامة على الأنواع والأدوات الشائعة التي يمكنك استخدامها لاختبار تطبيقك.
+
+## أنواع الاختبارات
+
+- **اختبار الوحدة (Unit testing)** يتضمن اختبار وحدات فردية (أو كتل من التعليمات البرمجية) بمعزل عن غيرها. في React، يمكن أن تكون الوحدة دالة واحدة، خطاف (hook)، أو مكون.
+  - **اختبار المكونات (Component testing)** هو نسخة أكثر تركيزًا من اختبار الوحدة حيث يكون الموضوع الرئيسي للاختبارات هو مكونات React. قد يتضمن ذلك اختبار كيفية عرض المكونات، تفاعلها مع الخصائص (props)، وسلوكها استجابةً لأحداث المستخدم.
+  - **اختبار التكامل (Integration testing)** يتضمن اختبار كيفية عمل وحدات متعددة معًا. يمكن أن يكون هذا مزيجًا من المكونات، الخطافات، والدوال.
+- **اختبار النهاية إلى النهاية (End-to-End Testing)** يتضمن اختبار تدفقات المستخدم في بيئة تحاكي سيناريوهات المستخدم الحقيقية، مثل المتصفح. وهذا يعني اختبار مهام محددة (مثل تدفق التسجيل) في بيئة تشبه البيئة الإنتاجية.
+- **اختبار اللقطات (Snapshot testing)** يتضمن التقاط الناتج المعروض للمكون وحفظه في ملف لقطة. عند تشغيل الاختبارات، يتم مقارنة الناتج المعروض الحالي للمكون مع اللقطة المحفوظة. تُستخدم التغييرات في اللقطة للإشارة إلى تغييرات غير متوقعة في السلوك.
+
+<AppOnly>
+
+## مكونات الخادم غير المتزامنة (Async Server Components)
+
+نظرًا لأن مكونات الخادم غير المتزامنة (`async`) جديدة في نظام React البيئي، فإن بعض الأدوات لا تدعمها بالكامل. في الوقت الحالي، نوصي باستخدام **اختبار النهاية إلى النهاية (End-to-End Testing)** بدلاً من **اختبار الوحدة (Unit Testing)** للمكونات غير المتزامنة (`async`).
+
+</AppOnly>
+
+## أدلة
+
+راجع الأدلة أدناه لتعلم كيفية إعداد Next.js مع أدوات الاختبار الشائعة هذه:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/09-authentication/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/09-authentication/index.mdx
new file mode 100644
index 00000000..e62fcaa6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/09-authentication/index.mdx
@@ -0,0 +1,892 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:29.388Z
+title: المصادقة
+description: تعلم كيفية تنفيذ المصادقة في Next.js، بما في ذلك أفضل الممارسات، تأمين المسارات، تقنيات التفويض، وإدارة الجلسات.
+---
+
+لتنفيذ المصادقة في Next.js، يجب أن تتعرف على ثلاثة مفاهيم أساسية:
+
+- **[المصادقة](#authentication)** تتحقق مما إذا كان المستخدم هو من يدعي أنه هو. تتطلب من المستخدم إثبات هويته بشيء يمتلكه، مثل اسم المستخدم وكلمة المرور.
+- **[إدارة الجلسة](#session-management)** تتابع حالة المستخدم (مثل تسجيل الدخول) عبر طلبات متعددة.
+- **[التفويض](#authorization)** يحدد أجزاء التطبيق المسموح للمستخدم بالوصول إليها.
+
+توضح هذه الصفحة كيفية استخدام ميزات Next.js لتنفيذ أنماط شائعة للمصادقة والتفويض وإدارة الجلسات، بحيث يمكنك اختيار أفضل الحلول بناءً على احتياجات تطبيقك.
+
+## المصادقة
+
+المصادقة تتحقق من هوية المستخدم. تحدث عندما يقوم المستخدم بتسجيل الدخول، إما باستخدام اسم المستخدم وكلمة المرور أو من خلال خدمة مثل جوجل. الهدف هو التأكد من أن المستخدمين هم بالفعل من يدعون أنهم، مما يحمي بيانات المستخدم والتطبيق من الوصول غير المصرح به أو الأنشطة الاحتيالية.
+
+### استراتيجيات المصادقة
+
+تستخدم تطبيقات الويب الحديثة عدة استراتيجيات للمصادقة:
+
+1. **OAuth/OpenID Connect (OIDC)**: تتيح الوصول من طرف ثالث دون مشاركة بيانات اعتماد المستخدم. مثالية لتسجيلات الدخول عبر وسائل التواصل الاجتماعي وحلول Single Sign-On (SSO). تضيف طبقة هوية مع OpenID Connect.
+2. **تسجيل الدخول ببيانات الاعتماد (البريد الإلكتروني + كلمة المرور)**: خيار قياسي لتطبيقات الويب، حيث يقوم المستخدمون بتسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور. مألوف وسهل التنفيذ، ولكنه يتطلب إجراءات أمنية قوية ضد التهديدات مثل التصيد الاحتيالي.
+3. **المصادقة بدون كلمة مرور/قائمة على الرموز**: تستخدم روابط سحرية عبر البريد الإلكتروني أو رموز لمرة واحدة عبر الرسائل القصيرة للوصول الآمن بدون كلمة مرور. مشهور لراحته وأمانه المعزز، يساعد هذا الأسلوب في تقليل إرهاق كلمة المرور. قيده هو الاعتماد على توفر البريد الإلكتروني أو الهاتف للمستخدم.
+4. **مفاتيح الوصول/WebAuthn**: تستخدم بيانات اعتماد تشفيرية فريدة لكل موقع، مما يوفر أمانًا عاليًا ضد التصيد الاحتيالي. آمن ولكنه جديد، قد يكون صعب التنفيذ.
+
+يجب أن يتم اختيار استراتيجية المصادقة بما يتوافق مع متطلبات تطبيقك المحددة، واعتبارات واجهة المستخدم، والأهداف الأمنية.
+
+### تنفيذ المصادقة
+
+في هذا القسم، سنستكشف عملية إضافة مصادقة أساسية بالبريد الإلكتروني وكلمة المرور إلى تطبيق ويب. بينما توفر هذه الطريقة مستوى أساسيًا من الأمان، يجدر النظر في خيارات أكثر تقدمًا مثل OAuth أو تسجيلات الدخول بدون كلمة مرور لمزيد من الحماية ضد التهديدات الأمنية الشائعة. تدفق المصادقة الذي سنناقشه هو كما يلي:
+
+<PagesOnly>
+
+1. يقوم المستخدم بإرسال بيانات اعتماده عبر نموذج تسجيل الدخول.
+2. يرسل النموذج طلبًا يتم معالجته بواسطة مسار API.
+3. عند التحقق الناجح، تكتمل العملية، مما يشير إلى نجاح مصادقة المستخدم.
+4. إذا فشل التحقق، يتم عرض رسالة خطأ.
+
+ضع في اعتبارك نموذج تسجيل دخول حيث يمكن للمستخدمين إدخال بيانات اعتمادهم:
+
+```tsx filename="pages/login.tsx" switcher
+import { FormEvent } from 'react'
+import { useRouter } from 'next/router'
+
+export default function LoginPage() {
+  const router = useRouter()
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const formData = new FormData(event.currentTarget)
+    const email = formData.get('email')
+    const password = formData.get('password')
+
+    const response = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    })
+
+    if (response.ok) {
+      router.push('/profile')
+    } else {
+      // Handle errors
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="email" name="email" placeholder="Email" required />
+      <input type="password" name="password" placeholder="Password" required />
+      <button type="submit">Login</button>
+    </form>
+  )
+}
+```
+
+```jsx filename="pages/login.jsx" switcher
+import { FormEvent } from 'react'
+import { useRouter } from 'next/router'
+
+export default function LoginPage() {
+  const router = useRouter()
+
+  async function handleSubmit(event) {
+    event.preventDefault()
+
+    const formData = new FormData(event.currentTarget)
+    const email = formData.get('email')
+    const password = formData.get('password')
+
+    const response = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    })
+
+    if (response.ok) {
+      router.push('/profile')
+    } else {
+      // Handle errors
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="email" name="email" placeholder="Email" required />
+      <input type="password" name="password" placeholder="Password" required />
+      <button type="submit">Login</button>
+    </form>
+  )
+}
+```
+
+يحتوي النموذج أعلاه على حقلين إدخال لجمع بريد المستخدم الإلكتروني وكلمة المرور. عند الإرسال، يقوم بتشغيل وظيفة ترسل طلب POST إلى مسار API (`/api/auth/login`).
+
+يمكنك بعد ذلك استدعاء واجهة برمجة التطبيقات (API) لموفر المصادقة في مسار API لمعالجة المصادقة:
+
+```ts filename="pages/api/auth/login.ts" switcher
+import { NextApiRequest, NextApiResponse } from 'next'
+import { signIn } from '@/auth'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const { email, password } = req.body
+    await signIn('credentials', { email, password })
+
+    res.status(200).json({ success: true })
+  } catch (error) {
+    if (error.type === 'CredentialsSignin') {
+      res.status(401).json({ error: 'Invalid credentials.' })
+    } else {
+      res.status(500).json({ error: 'Something went wrong.' })
+    }
+  }
+}
+```
+
+```js filename="pages/api/auth/login.js" switcher
+import { signIn } from '@/auth'
+
+export default async function handler(req, res) {
+  try {
+    const { email, password } = req.body
+    await signIn('credentials', { email, password })
+
+    res.status(200).json({ success: true })
+  } catch (error) {
+    if (error.type === 'CredentialsSignin') {
+      res.status(401).json({ error: 'Invalid credentials.' })
+    } else {
+      res.status(500).json({ error: 'Something went wrong.' })
+    }
+  }
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+1. يقوم المستخدم بإرسال بيانات اعتماده عبر نموذج تسجيل الدخول.
+2. يستدعي النموذج إجراء خادم (Server Action).
+3. عند التحقق الناجح، تكتمل العملية، مما يشير إلى نجاح مصادقة المستخدم.
+4. إذا فشل التحقق، يتم عرض رسالة خطأ.
+
+ضع في اعتبارك نموذج تسجيل دخول حيث يمكن للمستخدمين إدخال بيانات اعتمادهم:
+
+```tsx filename="app/login/page.tsx" switcher
+import { authenticate } from '@/app/lib/actions'
+
+export default function Page() {
+  return (
+    <form action={authenticate}>
+      <input type="email" name="email" placeholder="Email" required />
+      <input type="password" name="password" placeholder="Password" required />
+      <button type="submit">Login</button>
+    </form>
+  )
+}
+```
+
+```jsx filename="app/login/page.jsx" switcher
+import { authenticate } from '@/app/lib/actions'
+
+export default function Page() {
+  return (
+    <form action={authenticate}>
+      <input type="email" name="email" placeholder="Email" required />
+      <input type="password" name="password" placeholder="Password" required />
+      <button type="submit">Login</button>
+    </form>
+  )
+}
+```
+
+يحتوي النموذج أعلاه على حقلين إدخال لجمع بريد المستخدم الإلكتروني وكلمة المرور. عند الإرسال، يستدعي إجراء الخادم `authenticate`.
+
+يمكنك بعد ذلك استدعاء واجهة برمجة التطبيقات (API) لموفر المصادقة في إجراء الخادم لمعالجة المصادقة:
+
+```ts filename="app/lib/actions.ts" switcher
+'use server'
+
+import { signIn } from '@/auth'
+
+export async function authenticate(_currentState: unknown, formData: FormData) {
+  try {
+    await signIn('credentials', formData)
+  } catch (error) {
+    if (error) {
+      switch (error.type) {
+        case 'CredentialsSignin':
+          return 'Invalid credentials.'
+        default:
+          return 'Something went wrong.'
+      }
+    }
+    throw error
+  }
+}
+```
+
+```js filename="app/lib/actions.js" switcher
+'use server'
+
+import { signIn } from '@/auth'
+
+export async function authenticate(_currentState, formData) {
+  try {
+    await signIn('credentials', formData)
+  } catch (error) {
+    if (error) {
+      switch (error.type) {
+        case 'CredentialsSignin':
+          return 'Invalid credentials.'
+        default:
+          return 'Something went wrong.'
+      }
+    }
+    throw error
+  }
+}
+```
+
+</AppOnly>
+
+في هذا الكود، تتحقق طريقة `signIn` من بيانات الاعتماد مقابل بيانات المستخدم المخزنة.
+بعد معالجة موفر المصادقة لبيانات الاعتماد، هناك نتيجتان محتملتان:
+
+- **المصادقة الناجحة**: تعني هذه النتيجة أن تسجيل الدخول كان ناجحًا. يمكن بعد ذلك بدء إجراءات إضافية، مثل الوصول إلى المسارات المحمية وجلب معلومات المستخدم.
+- **المصادقة الفاشلة**: في الحالات التي تكون فيها بيانات الاعتماد غير صحيحة أو يتم مواجهة خطأ، تقوم الوظيفة بإرجاع رسالة خطأ مقابلة للإشارة إلى فشل المصادقة.
+
+<AppOnly>
+
+أخيرًا، في مكون `login-form.tsx` الخاص بك، يمكنك استخدام `useFormState` من React لاستدعاء إجراء الخادم والتعامل مع أخطاء النموذج، واستخدام `useFormStatus` للتعامل مع حالة الانتظار للنموذج:
+
+```tsx filename="app/login/page.tsx" switcher
+'use client'
+
+import { authenticate } from '@/app/lib/actions'
+import { useFormState, useFormStatus } from 'react-dom'
+
+export default function Page() {
+  const [errorMessage, dispatch] = useFormState(authenticate, undefined)
+
+  return (
+    <form action={dispatch}>
+      <input type="email" name="email" placeholder="Email" required />
+      <input type="password" name="password" placeholder="Password" required />
+      <div>{errorMessage && <p>{errorMessage}</p>}</div>
+      <LoginButton />
+    </form>
+  )
+}
+
+function LoginButton() {
+  const { pending } = useFormStatus()
+
+  const handleClick = (event) => {
+    if (pending) {
+      event.preventDefault()
+    }
+  }
+
+  return (
+    <button aria-disabled={pending} type="submit" onClick={handleClick}>
+      Login
+    </button>
+  )
+}
+```
+
+```jsx filename="app/login/page.jsx" switcher
+'use client'
+
+import { authenticate } from '@/app/lib/actions'
+import { useFormState, useFormStatus } from 'react-dom'
+
+export default function Page() {
+  const [errorMessage, dispatch] = useFormState(authenticate, undefined)
+
+  return (
+    <form action={dispatch}>
+      <input type="email" name="email" placeholder="Email" required />
+      <input type="password" name="password" placeholder="Password" required />
+      <div>{errorMessage && <p>{errorMessage}</p>}</div>
+      <LoginButton />
+    </form>
+  )
+}
+
+function LoginButton() {
+  const { pending } = useFormStatus()
+
+  const handleClick = (event) => {
+    if (pending) {
+      event.preventDefault()
+    }
+  }
+
+  return (
+    <button aria-disabled={pending} type="submit" onClick={handleClick}>
+      Login
+    </button>
+  )
+}
+```
+
+</AppOnly>
+
+لإعداد مصادقة مبسطة في مشاريع Next.js، خاصة عند تقديم طرق متعددة لتسجيل الدخول، فكر في استخدام [حل مصادقة شامل](#examples).
+
+## التفويض
+
+بمجرد مصادقة المستخدم، ستحتاج إلى التأكد من أن المستخدم مسموح له بزيارة مسارات معينة، وأداء عمليات مثل تعديل البيانات باستخدام إجراءات الخادم واستدعاء معالجات المسار.
+
+### حماية المسارات باستخدام Middleware
+
+[الوسيط (Middleware)](/docs/app/building-your-application/routing/middleware) في Next.js يساعدك في التحكم في من يمكنه الوصول إلى أجزاء مختلفة من موقعك. هذا مهم للحفاظ على مناطق مثل لوحة تحكم المستخدم محمية بينما تكون صفحات أخرى مثل صفحات التسويق عامة. يوصى بتطبيق Middleware على جميع المسارات وتحديد استثناءات للوصول العام.
+
+إليك كيفية تنفيذ Middleware للمصادقة في Next.js:
+
+#### إعداد Middleware:
+
+- أنشئ ملف `middleware.ts` أو `.js` في الدليل الجذر لمشروعك.
+- أضف منطقًا للتحقق من صلاحيات وصول المستخدم، مثل التحقق من وجود رمز مصادقة.
+
+#### تحديد المسارات المحمية:
+
+- ليس كل المسارات تتطلب تفويضًا. استخدم خيار `matcher` في Middleware لتحديد أي مسارات لا تتطلب فحص التفويض.
+
+#### منطق Middleware:
+
+- اكتب منطقًا للتحقق مما إذا كان المستخدم مصادقًا عليه. تحقق من أدوار المستخدمين أو الصلاحيات لتخويل المسار.
+
+#### التعامل مع الوصول غير المصرح به:
+
+- أعد توجيه المستخدمين غير المصرح لهم إلى صفحة تسجيل دخول أو صفحة خطأ حسب الاقتضاء.
+
+مثال لملف Middleware:
+
+```ts filename="middleware.ts" switcher
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const currentUser = request.cookies.get('currentUser')?.value
+
+  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
+    return Response.redirect(new URL('/dashboard', request.url))
+  }
+
+  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
+    return Response.redirect(new URL('/login', request.url))
+  }
+}
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
+}
+```
+
+```js filename="middleware.js" switcher
+export function middleware(request) {
+  const currentUser = request.cookies.get('currentUser')?.value
+
+  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
+    return Response.redirect(new URL('/dashboard', request.url))
+  }
+
+  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
+    return Response.redirect(new URL('/login', request.url))
+  }
+}
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
+}
+```
+
+يستخدم هذا المثال [`Response.redirect`](https://developer.mozilla.org/en-US/docs/Web/API/Response/redirect_static) للتعامل مع إعادة التوجيه مبكرًا في خط الطلب، مما يجعله فعالًا ومركزيًا للتحكم في الوصول.
+
+<AppOnly>
+
+لاحتياجات إعادة التوجيه المحددة، يمكن استخدام وظيفة `redirect` في مكونات الخادم ومعالجات المسار وإجراءات الخادم لتوفير تحكم أكبر. هذا مفيد للتنقل القائم على الأدوار أو السيناريوهات الحساسة للسياق.
+
+```ts filename="app/page.tsx" switcher
+import { redirect } from 'next/navigation'
+
+export default function Page() {
+  // منطق لتحديد ما إذا كانت هناك حاجة لإعادة توجيه
+  const accessDenied = true
+  if (accessDenied) {
+    redirect('/login')
+  }
+
+  // تحديد مسارات أخرى ومنطق
+}
+```
+
+```js filename="app/page.jsx" switcher
+import { redirect } from 'next/navigation'
+
+export default function Page() {
+  // منطق لتحديد ما إذا كانت هناك حاجة لإعادة توجيه
+  const accessDenied = true
+  if (accessDenied) {
+    redirect('/login')
+  }
+
+  // تحديد مسارات أخرى ومنطق
+}
+```
+
+</AppOnly>
+
+بعد المصادقة الناجحة، من المهم إدارة تنقل المستخدم بناءً على أدواره. على سبيل المثال، قد يتم إعادة توجيه مستخدم مسؤول إلى لوحة تحكم المسؤول، بينما يتم إرسال مستخدم عادي إلى صفحة مختلفة. هذا مهم للتجارب الخاصة بالأدوار والتنقل المشروط، مثل مطالبة المستخدمين بإكمال ملفهم الشخصي إذا لزم الأمر.
+
+عند إعداد التفويض، من المهم التأكد من أن الفحوصات الأمنية الرئيسية تحدث حيث يصل تطبيقك إلى البيانات أو يغيرها. بينما يمكن أن يكون Middleware مفيدًا للتحقق الأولي، لا يجب أن يكون خط الدفاع الوحيد في حماية بياناتك. يجب تنفيذ الجزء الأكبر من الفحوصات الأمنية في طبقة الوصول إلى البيانات (DAL).
+
+<PagesOnly>
+
+### حماية مسارات واجهة برمجة التطبيقات (API Routes)
+
+تُعد مسارات واجهة برمجة التطبيقات (API Routes) في Next.js ضرورية للتعامل مع المنطق من جانب الخادم وإدارة البيانات. من الأهمية بمكان تأمين هذه المسارات لضمان أن المستخدمين المصرح لهم فقط يمكنهم الوصول إلى الوظائف المحددة. يتضمن ذلك عادةً التحقق من حالة مصادقة المستخدم وأذوناته المستندة إلى الأدوار.
+
+إليك مثالًا لتأمين مسار واجهة برمجة التطبيقات:
+
+```ts filename="pages/api/route.ts" switcher
+import { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const session = await getSession(req)
+
+  // التحقق مما إذا كان المستخدم مصادقًا عليه
+  if (!session) {
+    res.status(401).json({
+      error: 'User is not authenticated',
+    })
+    return
+  }
+
+  // التحقق مما إذا كان للمستخدم دور 'admin'
+  if (session.user.role !== 'admin') {
+    res.status(401).json({
+      error: 'Unauthorized access: User does not have admin privileges.',
+    })
+    return
+  }
+
+  // المتابعة مع المسار للمستخدمين المصرح لهم
+  // ... تنفيذ مسار واجهة برمجة التطبيقات
+}
+```
+
+```js filename="pages/api/route.js" switcher
+export default async function handler(req, res) {
+  const session = await getSession(req)
+
+  // التحقق مما إذا كان المستخدم مصادقًا عليه
+  if (!session) {
+    res.status(401).json({
+      error: 'User is not authenticated',
+    })
+    return
+  }
+
+  // التحقق مما إذا كان للمستخدم دور 'admin'
+  if (session.user.role !== 'admin') {
+    res.status(401).json({
+      error: 'Unauthorized access: User does not have admin privileges.',
+    })
+    return
+  }
+
+  // المتابعة مع المسار للمستخدمين المصرح لهم
+  // ... تنفيذ مسار واجهة برمجة التطبيقات
+}
+```
+
+يُظهر هذا مثالًا لمسار واجهة برمجة التطبيقات مع فحص أمني من مستويين للمصادقة والتفويض. يقوم أولاً بالتحقق من وجود جلسة نشطة، ثم يتأكد مما إذا كان المستخدم المسجل لديه دور 'admin'. يضمن هذا النهج وصولاً آمنًا، محدودًا بالمستخدمين المصادق عليهم والمصرح لهم، مما يحافظ على أمان قوي لمعالجة الطلبات.
+
+</PagesOnly>
+
+<AppOnly>
+
+يدعو هذا النهج، المذكور في [هذه المدونة الأمنية](/blog/security-nextjs-server-components-actions)، إلى توحيد جميع عمليات الوصول إلى البيانات ضمن طبقة وصول إلى البيانات (DAL) مخصصة. تضمن هذه الاستراتيجية وصولاً متسقًا إلى البيانات، وتقلل من الأخطاء المتعلقة بالتفويض، وتُبسط الصيانة. لضمان أمان شامل، ضع في الاعتبار المجالات الرئيسية التالية:
+
+- إجراءات الخادم (Server Actions): قم بتنفيذ فحوصات أمنية في العمليات من جانب الخادم، خاصة للعمليات الحساسة.
+- معالجات المسارات (Route Handlers): إدارة الطلبات الواردة مع تدابير أمنية لضمان أن الوصول محدود للمستخدمين المصرح لهم.
+- طبقة الوصول إلى البيانات (DAL): تتفاعل مباشرة مع قاعدة البيانات وهي ضرورية للتحقق من صحة المعاملات البياناتية والتصريح بها. من الحيوي إجراء فحوصات حرجة داخل طبقة الوصول إلى البيانات لتأمين البيانات في نقطة التفاعل الأكثر أهمية - الوصول أو التعديل.
+
+للحصول على دليل مفصل حول تأمين طبقة الوصول إلى البيانات، بما في ذلك نماذج الأكواد وممارسات الأمان المتقدمة، راجع [قسم طبقة الوصول إلى البيانات](/blog/security-nextjs-server-components-actions#data-access-layer) في دليل الأمان.
+
+### حماية إجراءات الخادم (Server Actions)
+
+من المهم التعامل مع [إجراءات الخادم](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) بنفس اعتبارات الأمان مثل نقاط نهاية واجهة برمجة التطبيقات الموجهة للجمهور. التحقق من تفويض المستخدم لكل إجراء أمر بالغ الأهمية. قم بتنفيذ فحوصات داخل إجراءات الخادم لتحديد أذونات المستخدم، مثل تقييد بعض الإجراءات لمستخدمي 'admin'.
+
+في المثال أدناه، نتحقق من دور المستخدم قبل السماح بتنفيذ الإجراء:
+
+```ts filename="app/lib/actions.ts" switcher
+'use server'
+
+// ...
+
+export async function serverAction() {
+  const session = await getSession()
+  const userRole = session?.user?.role
+
+  // التحقق مما إذا كان المستخدم مصرحًا له بتنفيذ الإجراء
+  if (userRole !== 'admin') {
+    throw new Error('Unauthorized access: User does not have admin privileges.')
+  }
+
+  // المتابعة مع الإجراء للمستخدمين المصرح لهم
+  // ... تنفيذ الإجراء
+}
+```
+
+```js filename="app/lib/actions.js" switcher
+'use server'
+
+// ...
+
+export async function serverAction() {
+  const session = await getSession()
+  const userRole = session?.user?.role
+
+  // التحقق مما إذا كان المستخدم مصرحًا له بتنفيذ الإجراء
+  if (userRole !== 'admin') {
+    throw new Error('Unauthorized access: User does not have admin privileges.')
+  }
+
+  // المتابعة مع الإجراء للمستخدمين المصرح لهم
+  // ... تنفيذ الإجراء
+}
+```
+
+### حماية معالجات المسارات (Route Handlers)
+
+تلعب معالجات المسارات في Next.js دورًا حيويًا في إدارة الطلبات الواردة. تمامًا مثل إجراءات الخادم، يجب تأمينها لضمان أن المستخدمين المصرح لهم فقط يمكنهم الوصول إلى وظائف معينة. يتضمن ذلك عادةً التحقق من حالة مصادقة المستخدم وأذوناته.
+
+إليك مثالًا لتأمين معالج مسار:
+
+```ts filename="app/api/route.ts" switcher
+export async function GET() {
+  // مصادقة المستخدم والتحقق من الدور
+  const session = await getSession()
+
+  // التحقق مما إذا كان المستخدم مصادقًا عليه
+  if (!session) {
+    return new Response(null, { status: 401 }) // المستخدم غير مصادق عليه
+  }
+
+  // التحقق مما إذا كان للمستخدم دور 'admin'
+  if (session.user.role !== 'admin') {
+    return new Response(null, { status: 403 }) // المستخدم مصادق عليه ولكن ليس لديه الأذونات الصحيحة
+  }
+
+  // جلب البيانات للمستخدمين المصرح لهم
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET() {
+  // مصادقة المستخدم والتحقق من الدور
+  const session = await getSession()
+
+  // التحقق مما إذا كان المستخدم مصادقًا عليه
+  if (!session) {
+    return new Response(null, { status: 401 }) // المستخدم غير مصادق عليه
+  }
+
+  // التحقق مما إذا كان للمستخدم دور 'admin'
+  if (session.user.role !== 'admin') {
+    return new Response(null, { status: 403 }) // المستخدم مصادق عليه ولكن ليس لديه الأذونات الصحيحة
+  }
+
+  // جلب البيانات للمستخدمين المصرح لهم
+}
+```
+
+يُظهر هذا مثالًا لمعالج مسار مع فحص أمني من مستويين للمصادقة والتفويض. يقوم أولاً بالتحقق من وجود جلسة نشطة، ثم يتأكد مما إذا كان المستخدم المسجل لديه دور 'admin'. يضمن هذا النهج وصولاً آمنًا، محدودًا بالمستخدمين المصادق عليهم والمصرح لهم، مما يحافظ على أمان قوي لمعالجة الطلبات.
+
+### التفويض باستخدام مكونات الخادم (Server Components)
+
+تم تصميم [مكونات الخادم](/docs/app/building-your-application/rendering/server-components) في Next.js للتنفيذ من جانب الخادم وتوفر بيئة آمنة لدمج المنطق المعقد مثل التفويض. تمكن من الوصول المباشر إلى موارد الخلفية، مما يحسن الأداء للمهام الثقيلة البيانات ويعزز الأمان للعمليات الحساسة.
+
+في مكونات الخادم، من الممارسات الشائعة عرض عناصر واجهة المستخدم بشكل مشروط بناءً على دور المستخدم. يعزز هذا النهج تجربة المستخدم والأمان من خلال ضمان وصول المستخدمين فقط إلى المحتوى الذي يُصرح لهم بمشاهدته.
+
+**مثال:**
+
+```tsx filename="app/dashboard/page.tsx" switcher
+export default async function Dashboard() {
+  const session = await getSession()
+  const userRole = session?.user?.role // بافتراض أن 'role' جزء من كائن الجلسة
+
+  if (userRole === 'admin') {
+    return <AdminDashboard /> // مكون لمستخدمي 'admin'
+  } else if (userRole === 'user') {
+    return <UserDashboard /> // مكون للمستخدمين العاديين
+  } else {
+    return <AccessDenied /> // مكون يُظهر لوصول غير مصرح به
+  }
+}
+```
+
+```jsx filename="app/dashboard/page.jsx" switcher
+export default function Dashboard() {
+  const session = await getSession()
+  const userRole = session?.user?.role // بافتراض أن 'role' جزء من كائن الجلسة
+
+  if (userRole === 'admin') {
+    return <AdminDashboard /> // مكون لمستخدمي 'admin'
+  } else if (userRole === 'user') {
+    return <UserDashboard /> // مكون للمستخدمين العاديين
+  } else {
+    return <AccessDenied /> // مكون يُظهر لوصول غير مصرح به
+  }
+}
+```
+
+في هذا المثال، يُظهر مكون لوحة التحكم واجهات مستخدم مختلفة لمستخدمي 'admin' و'user' والأدوار غير المصرح بها. يضمن هذا النمط تفاعل كل مستخدم فقط مع المكونات المناسبة لدوره، مما يعزز كلًا من الأمان وتجربة المستخدم.
+
+</AppOnly>
+
+### أفضل الممارسات
+
+- **إدارة الجلسات الآمنة**: أولوية لأمان بيانات الجلسة لمنع الوصول غير المصرح به وخرق البيانات. استخدم التشفير وممارسات التخزين الآمن.
+- **إدارة الأدوار الديناميكية**: استخدم نظامًا مرنًا لأدوار المستخدمين لتسهيل التكيف مع التغييرات في الأذونات والأدوار، وتجنب الأدوار الثابتة.
+- **نهج الأمان أولاً**: في جميع جوانب منطق التفويض، أعط الأولوية للأمان لحماية بيانات المستخدم والحفاظ على سلامة تطبيقك. يتضمن ذلك اختبارًا شاملًا والنظر في نقاط الضعف الأمنية المحتملة.
+
+## إدارة الجلسات
+
+تشمل إدارة الجلسات تتبع وإدارة تفاعل المستخدم مع التطبيق بمرور الوقت، مما يضمن الحفاظ على حالته المصادق عليها عبر أجزاء مختلفة من التطبيق.
+
+يمنع هذا الحاجة إلى تسجيلات الدخول المتكررة، مما يعزز كلًا من الأمان وراحة المستخدم. هناك طريقتان رئيسيتان تُستخدمان لإدارة الجلسات: الجلسات المعتمدة على ملفات تعريف الارتباط (Cookies) وجلسات قاعدة البيانات.
+
+### الجلسات المعتمدة على ملفات تعريف الارتباط (Cookie-Based Sessions)
+
+> **🎥 شاهد:** تعلم المزيد عن الجلسات المعتمدة على ملفات تعريف الارتباط والمصادقة مع Next.js → [YouTube (11 دقيقة)](https://www.youtube.com/watch?v=DJvM2lSPn6w).
+
+تدير الجلسات المعتمدة على ملفات تعريف الارتباط بيانات المستخدم عن طريق تخزين معلومات الجلسة المشفرة مباشرة في ملفات تعريف الارتباط بالمتصفح. عند تسجيل دخول المستخدم، يتم تخزين هذه البيانات المشفرة في ملف تعريف الارتباط. يتضمن كل طلب لاحق للخادم هذا الملف، مما يقلل الحاجة إلى استعلامات الخادم المتكررة ويعزز كفاءة جانب العميل.
+
+ومع ذلك، تتطلب هذه الطريقة تشفيرًا دقيقًا لحماية البيانات الحساسة، حيث أن ملفات تعريف الارتباط عرضة لمخاطر الأمان من جانب العميل. يعد تشفير بيانات الجلسة في ملفات تعريف الارتباط مفتاحًا لحماية معلومات المستخدم من الوصول غير المصرح به. يضمن ذلك أنه حتى إذا تم سرقة ملف تعريف الارتباط، تظل البيانات بداخله غير قابلة للقراءة.
+
+بالإضافة إلى ذلك، بينما تكون ملفات تعريف الارتباط الفردية محدودة في الحجم (عادة حوالي 4 كيلوبايت)، يمكن لتقنيات مثل تقسيم ملفات تعريف الارتباط (cookie-chunking) التغلب على هذا القيد عن طريق تقسيم بيانات الجلسة الكبيرة إلى ملفات تعريف ارتباط متعددة.
+
+قد يبدو تعيين ملف تعريف الارتباط في مشروع Next.js كما يلي:
+
+**تعيين ملف تعريف الارتباط على الخادم:**
+
+<PagesOnly>
+
+```ts filename="pages/api/login.ts" switcher
+import { serialize } from 'cookie'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const sessionData = req.body
+  const encryptedSessionData = encrypt(sessionData)
+
+  const cookie = serialize('session', encryptedSessionData, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 60 * 60 * 24 * 7, // أسبوع واحد
+    path: '/',
+  })
+  res.setHeader('Set-Cookie', cookie)
+  res.status(200).json({ message: 'Successfully set cookie!' })
+}
+```
+
+```js filename="pages/api/login.js" switcher
+import { serialize } from 'cookie'
+
+export default function handler(req, res) {
+  const sessionData = req.body
+  const encryptedSessionData = encrypt(sessionData)
+
+  const cookie = serialize('session', encryptedSessionData, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 60 * 60 * 24 * 7, // أسبوع واحد
+    path: '/',
+  })
+  res.setHeader('Set-Cookie', cookie)
+  res.status(200).json({ message: 'Successfully set cookie!' })
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function handleLogin(sessionData) {
+  const encryptedSessionData = encrypt(sessionData) // تشفير بيانات جلسة المستخدم
+  cookies().set('session', encryptedSessionData, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 60 * 60 * 24 * 7, // أسبوع واحد
+    path: '/',
+  })
+  // إعادة التوجيه أو التعامل مع الاستجابة بعد تعيين ملف تعريف الارتباط
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function handleLogin(sessionData) {
+  const encryptedSessionData = encrypt(sessionData) // تشفير بيانات جلسة المستخدم
+  cookies().set('session', encryptedSessionData, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 60 * 60 * 24 * 7, // أسبوع واحد
+    path: '/',
+  })
+  // إعادة التوجيه أو التعامل مع الاستجابة بعد تعيين ملف تعريف الارتباط
+}
+```
+
+**الوصول إلى بيانات الجلسة المخزنة في ملف تعريف الارتباط في مكون خادم:**
+
+```tsx filename="app/page.tsx" switcher
+import { cookies } from 'next/headers'
+
+export async function getSessionData(req) {
+  const encryptedSessionData = cookies().get('session')?.value
+  return encryptedSessionData ? JSON.parse(decrypt(encryptedSessionData)) : null
+}
+```
+
+```jsx filename="app/page.jsx" switcher
+import { cookies } from 'next/headers'
+
+export async function getSessionData(req) {
+  const encryptedSessionData = cookies().get('session')?.value
+  return encryptedSessionData ? JSON.parse(decrypt(encryptedSessionData)) : null
+}
+```
+
+</AppOnly>
+
+### جلسات قاعدة البيانات
+
+تتضمن إدارة جلسات قاعدة البيانات تخزين بيانات الجلسة على الخادم، مع استلام متصفح المستخدم فقط لمعرف الجلسة. يشير هذا المعرف إلى بيانات الجلسة المخزنة على جانب الخادم، دون احتوائه على البيانات نفسها. تعزز هذه الطريقة الأمان، حيث تحتفظ ببيانات الجلسة الحساسة بعيدًا عن بيئة جانب العميل، مما يقلل من خطر التعرض لهجمات جانب العميل. كما أن جلسات قاعدة البيانات أكثر قابلية للتوسع، حيث تستوعب احتياجات تخزين بيانات أكبر.
+
+ومع ذلك، لهذا النهج مقايضاته. يمكن أن يزيد من الحمل على الأداء بسبب الحاجة إلى عمليات بحث في قاعدة البيانات في كل تفاعل للمستخدم. يمكن لاستراتيجيات مثل تخزين بيانات الجلسة مؤقتًا المساعدة في التخفيف من ذلك. بالإضافة إلى ذلك، يعني الاعتماد على قاعدة البيانات أن إدارة الجلسات تكون موثوقة مثل أداء قاعدة البيانات وتوفرها.
+
+إليك مثالًا مبسطًا لتنفيذ جلسات قاعدة البيانات في تطبيق Next.js:
+
+**إنشاء جلسة على الخادم**:
+
+<PagesOnly>
+
+```ts filename="pages/api/create-session.ts" switcher
+import db from '../../lib/db'
+import { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const user = req.body
+    const sessionId = generateSessionId()
+    await db.insertSession({
+      sessionId,
+      userId: user.id,
+      createdAt: new Date(),
+    })
+
+    res.status(200).json({ sessionId })
+  } catch (error) {
+    res.status(500).json({ error: 'Internal Server Error' })
+  }
+}
+```
+
+```js filename="pages/api/create-session.js" switcher
+import db from '../../lib/db'
+
+export default async function handler(req, res) {
+  try {
+    const user = req.body
+    const sessionId = generateSessionId()
+    await db.insertSession({
+      sessionId,
+      userId: user.id,
+      createdAt: new Date(),
+    })
+
+    res.status(200).json({ sessionId })
+  } catch (error) {
+    res.status(500).json({ error: 'Internal Server Error' })
+  }
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```js
+import db from './lib/db'
+
+export async function createSession(user) {
+  const sessionId = generateSessionId() // إنشاء معرف جلسة فريد
+  await db.insertSession({ sessionId, userId: user.id, createdAt: new Date() })
+  return sessionId
+}
+```
+
+**استرداد جلسة في Middleware أو منطق جانب الخادم**:
+
+```js
+import { cookies } from 'next/headers'
+import db from './lib/db'
+
+export async function getSession() {
+  const sessionId = cookies().get('sessionId')?.value
+  return sessionId ? await db.findSession(sessionId) : null
+}
+```
+
+</AppOnly>
+
+### اختيار إدارة الجلسات في Next.js
+
+يعتمد الاختيار بين جلسات تعتمد على ملفات تعريف الارتباط (cookies) وجلسات تعتمد على قواعد البيانات في Next.js على احتياجات تطبيقك. جلسات ملفات تعريف الارتباط أبسط وتناسب التطبيقات الصغيرة ذات الحمل الخفيف على الخادم، ولكنها قد توفر حماية أقل. بينما جلسات قواعد البيانات، رغم تعقيدها، توفر أمانًا أفضل وقابلية للتوسع، مما يجعلها مثالية للتطبيقات الكبيرة الحساسة للبيانات.
+
+مع [حلول المصادقة](#examples) مثل [NextAuth.js](https://authjs.dev/guides/upgrade-to-v5)، تصبح إدارة الجلسات أكثر كفاءة، سواء باستخدام ملفات تعريف الارتباط أو تخزين قاعدة البيانات. هذا الأتمتة يبسط عملية التطوير، ولكن من المهم فهم طريقة إدارة الجلسات المستخدمة من قبل الحل الذي تختاره. تأكد من أنها تتماشى مع متطلبات الأمان والأداء لتطبيقك.
+
+بغض النظر عن اختيارك، ضع الأمان في أولوية استراتيجية إدارة الجلسات. بالنسبة لجلسات ملفات تعريف الارتباط، يعد استخدام ملفات تعريف ارتباط آمنة ومخصصة لبروتوكول HTTP فقط أمرًا بالغ الأهمية لحماية بيانات الجلسة. أما بالنسبة لجلسات قواعد البيانات، فإن النسخ الاحتياطي المنتظم والتعامل الآمن مع بيانات الجلسة أمران أساسيان. تنفيذ آليات انتهاء صلاحية الجلسة وتنظيفها ضروري في كلا النهجين لمنع الوصول غير المصرح به والحفاظ على أداء وموثوقية التطبيق.
+
+## أمثلة
+
+فيما يلي حلول مصادقة متوافقة مع Next.js، يرجى الرجوع إلى أدلة البدء السريع أدناه لمعرفة كيفية تكوينها في تطبيق Next.js الخاص بك:
+
+{/* TODO: Change link to authjs.dev when new documentation is ready */}
+
+- [Auth0](https://auth0.com/docs/quickstart/webapp/nextjs/01-login)
+- [Clerk](https://clerk.com/docs/quickstarts/nextjs)
+- [Kinde](https://kinde.com/docs/developer-tools/nextjs-sdk)
+- [Lucia](https://lucia-auth.com/getting-started/nextjs-app)
+- [NextAuth.js](https://authjs.dev/guides/upgrade-to-v5)
+- [Supabase](https://supabase.com/docs/guides/getting-started/quickstarts/nextjs)
+- [Stytch](https://stytch.com/docs/guides/quickstarts/nextjs)
+- [Iron Session](https://github.com/vvo/iron-session)
+
+## قراءة إضافية
+
+لمواصلة التعلم عن المصادقة والأمان، تحقق من الموارد التالية:
+
+- [فهم هجمات XSS](https://vercel.com/guides/understanding-xss-attacks)
+- [فهم هجمات CSRF](https://vercel.com/guides/understanding-csrf-attacks)
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx
new file mode 100644
index 00000000..7e6fc853
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx
@@ -0,0 +1,167 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:39:25.924Z
+title: قائمة التحقق للإنتاج
+description: توصيات لضمان أفضل أداء وتجربة مستخدم قبل نشر تطبيق Next.js الخاص بك في بيئة الإنتاج.
+---
+
+قبل نشر تطبيق Next.js الخاص بك في بيئة الإنتاج، هناك بعض التحسينات والأنماط التي يجب مراعاتها لتحقيق أفضل تجربة مستخدم وأداء وأمان.
+
+توفر هذه الصفحة أفضل الممارسات التي يمكنك استخدامها كمرجع عند [بناء تطبيقك](#during-development)، [قبل الانتقال للإنتاج](#before-going-to-production)، وبعد [النشر](#after-deployment) - بالإضافة إلى [تحسينات Next.js التلقائية](#automatic-optimizations) التي يجب أن تكون على علم بها.
+
+## التحسينات التلقائية
+
+هذه التحسينات في Next.js مفعلة افتراضيًا ولا تتطلب أي تكوين:
+
+<AppOnly>
+
+- **[مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components):** يستخدم Next.js مكونات الخادم افتراضيًا. تعمل مكونات الخادم على الخادم ولا تتطلب JavaScript للعرض على العميل. وبالتالي، ليس لها أي تأثير على حجم حزم JavaScript الخاصة بالعميل. يمكنك بعد ذلك استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) حسب الحاجة للتفاعلية.
+- **[تقسيم الكود (Code-splitting)](/docs/app/building-your-application/routing/linking-and-navigating#how-routing-and-navigation-works):** تمكن مكونات الخادم من تقسيم الكود تلقائيًا حسب مقاطع المسار. يمكنك أيضًا التفكير في [التحميل البطيء (lazy loading)](/docs/app/building-your-application/optimizing/lazy-loading) لمكونات العميل ومكتبات الطرف الثالث، حيثما كان ذلك مناسبًا.
+- **[الجلب المسبق (Prefetching)](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching):** عندما يدخل رابط لمسار جديد في نطاق رؤية المستخدم، يقوم Next.js بجلب المسار مسبقًا في الخلفية. هذا يجعل التنقل إلى المسارات الجديدة شبه فوري. يمكنك إلغاء تفعيل الجلب المسبق، حيثما كان ذلك مناسبًا.
+- **[العرض الثابت (Static Rendering)](/docs/app/building-your-application/rendering/server-components#static-rendering-default):** يقوم Next.js بعرض مكونات الخادم والعميل بشكل ثابت على الخادم أثناء البناء ويخزن النتيجة المعروضة لتحسين أداء تطبيقك. يمكنك اختيار [العرض الديناميكي (Dynamic Rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) لمسارات محددة، حيثما كان ذلك مناسبًا.
+- **[التخزين المؤقت (Caching)](/docs/app/building-your-application/caching):** يقوم Next.js بتخزين طلبات البيانات، والنتيجة المعروضة لمكونات الخادم والعميل، والأصول الثابتة، والمزيد، لتقليل عدد طلبات الشبكة إلى خادمك وقاعدة البيانات وخدمات الخلفية. يمكنك إلغاء تفعيل التخزين المؤقت، حيثما كان ذلك مناسبًا.
+
+</AppOnly>
+
+<PagesOnly>
+
+- **[تقسيم الكود (Code-splitting)](/docs/pages/building-your-application/routing/pages-and-layouts):** يقوم Next.js بتقسيم كود تطبيقك تلقائيًا حسب الصفحات. هذا يعني أنه يتم تحميل الكود المطلوب للصفحة الحالية فقط أثناء التنقل. يمكنك أيضًا التفكير في [التحميل البطيء (lazy loading)](/docs/pages/building-your-application/optimizing/lazy-loading) لمكتبات الطرف الثالث، حيثما كان ذلك مناسبًا.
+- **[الجلب المسبق (Prefetching)](/docs/pages/api-reference/components/link#prefetch):** عندما يدخل رابط لمسار جديد في نطاق رؤية المستخدم، يقوم Next.js بجلب المسار مسبقًا في الخلفية. هذا يجعل التنقل إلى المسارات الجديدة شبه فوري. يمكنك إلغاء تفعيل الجلب المسبق، حيثما كان ذلك مناسبًا.
+- **[التحسين الثابت التلقائي (Automatic Static Optimization)](/docs/pages/building-your-application/rendering/automatic-static-optimization):** يحدد Next.js تلقائيًا ما إذا كانت الصفحة ثابتة (يمكن تقديمها مسبقًا) إذا لم يكن لديها متطلبات بيانات حظر. يمكن تخزين الصفحات المحسنة وعرضها للمستخدم النهائي من مواقع CDN متعددة. يمكنك اختيار [العرض من جانب الخادم (Server-side Rendering)](/docs/pages/building-your-application/data-fetching/get-server-side-props)، حيثما كان ذلك مناسبًا.
+
+</PagesOnly>
+
+تهدف هذه الإعدادات الافتراضية إلى تحسين أداء تطبيقك، وتقليل التكلفة وكمية البيانات المنقولة في كل طلب شبكة.
+
+## أثناء التطوير
+
+أثناء بناء تطبيقك، نوصي باستخدام الميزات التالية لضمان أفضل أداء وتجربة مستخدم:
+
+### التوجيه والعرض
+
+<AppOnly>
+
+- **[التخطيطات (Layouts)](/docs/app/building-your-application/routing/pages-and-layouts#layouts):** استخدم التخطيطات لمشاركة واجهة المستخدم عبر الصفحات وتمكين [العرض الجزئي (partial rendering)](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering) أثناء التنقل.
+- **[مكون `<Link>`](/docs/app/building-your-application/routing/linking-and-navigating#link-component):** استخدم مكون `<Link>` لـ[التنقل من جانب العميل والجلب المسبق](/docs/app/building-your-application/routing/linking-and-navigating#how-routing-and-navigation-works).
+- **[معالجة الأخطاء (Error Handling)](/docs/app/building-your-application/routing/error-handling):** تعامل مع [الأخطاء الشاملة (catch-all errors)](/docs/app/building-your-application/routing/error-handling) وأخطاء [404](/docs/app/api-reference/file-conventions/not-found) في الإنتاج بإنشاء صفحات أخطاء مخصصة.
+- **[أنماط التكوين (Composition Patterns)](/docs/app/building-your-application/rendering/composition-patterns):** اتبع أنماط التكوين الموصى بها لمكونات الخادم والعميل، وتحقق من وضع [حدود `"use client"`](/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree) لتجنب زيادة حجم حزمة JavaScript الخاصة بالعميل بشكل غير ضروري.
+- **[الوظائف الديناميكية (Dynamic Functions)](/docs/app/building-your-application/rendering/server-components#dynamic-functions):** كن على علم بأن الوظائف الديناميكية مثل [`cookies()`](/docs/app/api-reference/functions/cookies) وخاصية [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) ستجعل المسار بأكمله يعمل في [وضع العرض الديناميكي (Dynamic Rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) (أو تطبيقك بالكامل إذا تم استخدامها في [التخطيط الجذري (Root Layout)](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)). تأكد من أن استخدام الوظائف الديناميكية مقصود وقم بتغليفها في حدود `<Suspense>` حيثما كان ذلك مناسبًا.
+
+> **معلومة مفيدة:** [التقديم المسبق الجزئي (Partial Prerendering) (تجريبي)](/blog/next-14#partial-prerendering-preview) سيسمح لأجزاء من المسار أن تكون ديناميكية دون جعل المسار بأكمله يعمل في وضع العرض الديناميكي.
+
+</AppOnly>
+
+<PagesOnly>
+
+- **[مكون `<Link>`](/docs/pages/building-your-application/routing/linking-and-navigating):** استخدم مكون `<Link>` للتنقل من جانب العميل والجلب المسبق.
+- **[الأخطاء المخصصة (Custom Errors)](/docs/pages/building-your-application/routing/custom-error):** تعامل مع أخطاء [500](/docs/pages/building-your-application/routing/custom-error#500-page) و[404](/docs/pages/building-your-application/routing/custom-error#404-page) بشكل أنيق.
+
+</PagesOnly>
+
+### جلب البيانات والتخزين المؤقت
+
+<AppOnly>
+
+- **[مكونات الخادم (Server Components)](/docs/app/building-your-application/data-fetching/patterns#fetching-data-on-the-server):** استفد من مزايا جلب البيانات على الخادم باستخدام مكونات الخادم.
+- **[معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers):** استخدم معالجات المسار للوصول إلى موارد الخلفية من مكونات العميل. ولكن لا تستدعي معالجات المسار من مكونات الخادم لتجنب طلب خادم إضافي.
+- **[البث (Streaming)](/docs/app/building-your-application/routing/loading-ui-and-streaming):** استخدم واجهة تحميل وReact Suspense لإرسال واجهة المستخدم تدريجيًا من الخادم إلى العميل، ومنع حظر المسار بأكمله أثناء جلب البيانات.
+- **[جلب البيانات المتوازي (Parallel Data Fetching)](/docs/app/building-your-application/data-fetching/patterns#parallel-and-sequential-data-fetching):** قلل من شلالات الشبكة بجلب البيانات بشكل متوازي، حيثما كان ذلك مناسبًا. أيضًا، فكر في [جلب البيانات مسبقًا (preloading data)](/docs/app/building-your-application/data-fetching/patterns#preloading-data) حيثما كان ذلك مناسبًا.
+- **[تخزين البيانات المؤقت (Data Caching)](/docs/app/building-your-application/caching#data-cache):** تحقق مما إذا كانت طلبات البيانات الخاصة بك مخزنة مؤقتًا أم لا، وقم بتفعيل التخزين المؤقت، حيثما كان ذلك مناسبًا. تأكد من أن الطلبات التي لا تستخدم `fetch` [مخزنة مؤقتًا](/docs/app/api-reference/functions/unstable_cache).
+- **[الصور الثابتة (Static Images)](/docs/app/building-your-application/optimizing/static-assets):** استخدم دليل `public` لتخزين الأصول الثابتة لتطبيقك مؤقتًا تلقائيًا، مثل الصور.
+
+</AppOnly>
+
+<PagesOnly>
+
+- **[مسارات API (API Routes)](/docs/pages/building-your-application/routing/api-routes):** استخدم معالجات المسار للوصول إلى موارد الخلفية، ومنع الكشف عن الأسرار الحساسة للعميل.
+- **[تخزين البيانات المؤقت (Data Caching)](/docs/pages/building-your-application/data-fetching/get-static-props):** تحقق مما إذا كانت طلبات البيانات الخاصة بك مخزنة مؤقتًا أم لا، وقم بتفعيل التخزين المؤقت، حيثما كان ذلك مناسبًا. تأكد من أن الطلبات التي لا تستخدم `getStaticProps` مخزنة مؤقتًا حيثما كان ذلك مناسبًا.
+- **[التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration):** استخدم التجديد الثابت التدريجي لتحديث الصفحات الثابتة بعد بنائها، دون إعادة بناء موقعك بالكامل.
+- **[الصور الثابتة (Static Images)](/docs/pages/building-your-application/optimizing/static-assets):** استخدم دليل `public` لتخزين الأصول الثابتة لتطبيقك مؤقتًا تلقائيًا، مثل الصور.
+
+</PagesOnly>
+
+### واجهة المستخدم وإمكانية الوصول
+
+<AppOnly>
+
+- **[النماذج والتحقق (Forms and Validation)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms):** استخدم إجراءات الخادم لمعالجة إرسال النماذج، والتحقق من جانب الخادم، ومعالجة الأخطاء.
+
+</AppOnly>
+
+- **[وحدة الخطوط (Font Module)](/docs/app/building-your-application/optimizing/fonts):** حسّن الخطوط باستخدام وحدة الخطوط، التي تستضيف ملفات الخطوط تلقائيًا مع الأصول الثابتة الأخرى، وتزيل طلبات الشبكة الخارجية، وتقلل من [انزياح التخطيط (layout shift)](https://web.dev/articles/cls).
+- **[مكون `<Image>`](/docs/app/building-your-application/optimizing/images):** حسّن الصور باستخدام مكون الصورة، الذي يحسن الصور تلقائيًا، ويمنع انزياح التخطيط، ويقدمها بتنسيقات حديثة مثل WebP أو AVIF.
+- **[مكون `<Script>`](/docs/app/building-your-application/optimizing/scripts):** حسّن نصوص الطرف الثالث باستخدام مكون النص، الذي يؤجل النصوص تلقائيًا ويمنعها من حظر الخيط الرئيسي.
+- **[ESLint](/docs/architecture/accessibility#linting):** استخدم المكون الإضافي المدمج `eslint-plugin-jsx-a11y` لاكتشاف مشكلات إمكانية الوصول مبكرًا.
+
+### الأمان
+
+<AppOnly>
+
+- **[التلويث (Tainting)](/docs/app/building-your-application/data-fetching/patterns#preventing-sensitive-data-from-being-exposed-to-the-client):** امنع الكشف عن البيانات الحساسة للعميل عن طريق تلويث كائنات البيانات و/أو قيم محددة.
+- **[إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#authentication-and-authorization):** تأكد من أن المستخدمين مصرح لهم باستدعاء إجراءات الخادم. راجع [ممارسات الأمان الموصى بها](/blog/security-nextjs-server-components-actions).
+
+</AppOnly>
+
+- **[متغيرات البيئة (Environment Variables)](/docs/app/building-your-application/configuring/environment-variables):** تأكد من إضافة ملفات `.env.*` إلى `.gitignore` وأن المتغيرات العامة فقط مسبوقة بـ `NEXT_PUBLIC_`.
+- **[سياسة أمان المحتوى (Content Security Policy)](/docs/app/building-your-application/configuring/content-security-policy):** فكر في إضافة سياسة أمان المحتوى لحماية تطبيقك من التهديدات الأمنية المختلفة مثل حقن النصوص عبر المواقع (cross-site scripting)، والتصيد بالنقر (clickjacking)، وهجمات حقن التعليمات البرمجية الأخرى.
+
+### البيانات الوصفية وتحسين محركات البحث (SEO)
+
+<AppOnly>
+
+- **[واجهة برمجة تطبيقات البيانات الوصفية (Metadata API)](/docs/app/building-your-application/optimizing/metadata):** استخدم واجهة برمجة تطبيقات البيانات الوصفية لتحسين تحسين محركات البحث (SEO) لتطبيقك عن طريق إضافة عناوين الصفحات والأوصاف والمزيد.
+- **[صور Open Graph (OG)](/docs/app/api-reference/file-conventions/metadata/opengraph-image):** أنشئ صور OG لإعداد تطبيقك للمشاركة الاجتماعية.
+- **[خرائط الموقع (Sitemaps)](/docs/app/api-reference/functions/generate-sitemaps) و[ملفات الروبوتات (Robots)](/docs/app/api-reference/file-conventions/metadata/robots):** ساعد محركات البحث في الزحف إلى صفحاتك وفهرستها عن طريق إنشاء خرائط مواقع وملفات روبوتات.
+
+</AppOnly>
+
+<PagesOnly>
+
+- **[مكون `<Head>`](/docs/pages/api-reference/components/head):** استخدم مكون `next/head` لإضافة عناوين الصفحات والأوصاف والمزيد.
+
+</PagesOnly>
+
+### سلامة الأنواع
+
+- **TypeScript و[المكون الإضافي لـ TS](/docs/app/building-your-application/configuring/typescript):** استخدم TypeScript والمكون الإضافي لـ TypeScript لتحسين سلامة الأنواع، ولمساعدتك في اكتشاف الأخطاء مبكرًا.
+
+## قبل الانتقال للإنتاج
+
+قبل الانتقال للإنتاج، يمكنك تشغيل `next build` لبناء تطبيقك محليًا واكتشاف أي أخطاء في البناء، ثم تشغيل `next start` لقياس أداء تطبيقك في بيئة تشبه بيئة الإنتاج.
+
+### مؤشرات الويب الأساسية (Core Web Vitals)
+
+- **[Lighthouse](https://developers.google.com/web/tools/lighthouse):** شغّل Lighthouse في وضع التصفح المتخفي لفهم أفضل لكيفية تجربة المستخدمين لموقعك، ولتحديد مجالات التحسين. هذا اختبار محاكاة ويجب أن يقترن بفحص بيانات الميدان (مثل مؤشرات الويب الأساسية).
+
+<AppOnly>
+
+- **[خطاف `useReportWebVitals`](/docs/app/api-reference/functions/use-report-web-vitals):** استخدم هذا الخطاف لإرسال بيانات [مؤشرات الويب الأساسية (Core Web Vitals)](https://web.dev/articles/vitals) إلى أدوات التحليلات.
+
+</AppOnly>
+
+### تحليل الحزم
+
+استخدم [المكون الإضافي `@next/bundle-analyzer`](/docs/app/building-your-application/optimizing/bundle-analyzer) لتحليل حجم حزم JavaScript الخاصة بك وتحديد الوحدات الكبيرة والتبعيات التي قد تؤثر على أداء تطبيقك.
+
+بالإضافة إلى ذلك، يمكن للأدوات التالية مساعدتك في فهم تأثير إضافة تبعيات جديدة إلى تطبيقك:
+
+- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
+- [Package Phobia](https://packagephobia.com/)
+- [Bundle Phobia](https://bundlephobia.com/)
+- [bundlejs](https://bundlejs.com/)
+
+## بعد النشر
+
+اعتمادًا على مكان نشر تطبيقك، قد يكون لديك إمكانية الوصول إلى أدوات وتكاملات إضافية لمساعدتك في مراقبة وتحسين أداء تطبيقك.
+
+لنشرات Vercel، نوصي بما يلي:
+
+- **[التحليلات](https://vercel.com/analytics?utm_source=next-site&utm_campaign=nextjs-docs&utm_medium=docs):** لوحة تحليلات مدمجة لمساعدتك في فهم حركة مرور تطبيقك، بما في ذلك عدد الزوار الفريدين، ومشاهدات الصفحات، والمزيد.
+- **[Speed Insights](https://vercel.com/docs/speed-insights?utm_source=next-site&utm_campaign=nextjs-docs&utm_medium=docs):** رؤى أداء واقعية بناءً على بيانات الزوار، تقدم رؤية عملية لكيفية أداء موقعك في الميدان.
+- **[التسجيل](https://vercel.com/docs/observability/runtime-logs?utm_source=next-site&utm_campaign=nextjs-docs&utm_medium=docs):** سجلات وقت التشغيل والنشاط لمساعدتك في تصحيح الأخطاء ومراقبة تطبيقك في الإنتاج. بدلاً من ذلك، راجع [صفحة التكاملات](https://vercel.com/integrations?utm_source=next-site&utm_campaign=nextjs-docs&utm_medium=docs) للحصول على قائمة بأدوات وخدمات الطرف الثالث.
+
+> **معلومة مفيدة:**
+>
+> للحصول على فهم شامل لأفضل الممارسات لنشرات الإنتاج على Vercel، بما في ذلك الاستراتيجيات التفصيلية لتحسين أداء الموقع، راجع [قائمة التحقق للإنتاج لـ Vercel](https://vercel.com/docs/production-checklist?utm_source=next-site&utm_campaign=nextjs-docs&utm_medium=docs).
+
+اتباع هذه التوصيات سيساعدك في بناء تطبيق أسرع وأكثر موثوقية وأمانًا لمستخدميك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/02-static-exports.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/02-static-exports.mdx
new file mode 100644
index 00000000..8a170a27
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/02-static-exports.mdx
@@ -0,0 +1,372 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:38:24.877Z
+title: التصدير الثابت
+description: يتيح Next.js البدء كموقع ثابت أو تطبيق صفحة واحدة (SPA)، ثم الترقية لاحقًا بشكل اختياري لاستخدام ميزات تتطلب خادمًا.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يتيح Next.js البدء كموقع ثابت أو تطبيق صفحة واحدة (SPA)، ثم الترقية لاحقًا بشكل اختياري لاستخدام ميزات تتطلب خادمًا.
+
+عند تشغيل `next build`، يقوم Next.js بإنشاء ملف HTML لكل مسار. من خلال تقسيم تطبيق SPA صارم إلى ملفات HTML فردية، يمكن لـ Next.js تجنب تحميل كود JavaScript غير الضروري على جانب العميل، مما يقلل حجم الحزمة ويُمكن من تحميل الصفحات بشكل أسرع.
+
+بما أن Next.js يدعم هذا التصدير الثابت، فيمكن نشره واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة من نوع HTML/CSS/JS.
+
+<PagesOnly>
+
+> **معلومة مفيدة**: نوصي باستخدام موجه التطبيق (App Router) لدعم محسن للتصدير الثابت.
+
+</PagesOnly>
+
+## التهيئة
+
+لتمكين التصدير الثابت، قم بتغيير وضع الإخراج داخل `next.config.js`:
+
+```js filename="next.config.js" highlight={5}
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  output: 'export',
+
+  // اختياري: تغيير الروابط `/me` -> `/me/` وإنشاء `/me.html` -> `/me/index.html`
+  // trailingSlash: true,
+
+  // اختياري: منع التحويل التلقائي `/me` -> `/me/`، والحفاظ على `href` كما هو
+  // skipTrailingSlashRedirect: true,
+
+  // اختياري: تغيير دليل الإخراج `out` -> `dist`
+  // distDir: 'dist',
+}
+
+module.exports = nextConfig
+```
+
+بعد تشغيل `next build`، سينشئ Next.js مجلد `out` الذي يحتوي على أصول HTML/CSS/JS لتطبيقك.
+
+<PagesOnly>
+
+يمكنك استخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) و [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths) لإنشاء ملف HTML لكل صفحة في دليل `pages` الخاص بك (أو أكثر لـ [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes)).
+
+</PagesOnly>
+
+<AppOnly>
+
+## الميزات المدعومة
+
+تم تصميم نواة Next.js لدعم التصدير الثابت.
+
+### مكونات الخادم
+
+عند تشغيل `next build` لإنشاء تصدير ثابت، ستتم معالجة مكونات الخادم المستهلكة داخل دليل `app` أثناء عملية البناء، بشكل مشابه لإنشاء المواقع الثابتة التقليدية.
+
+سيتم تقديم المكون الناتج إلى HTML ثابت لتحميل الصفحة الأولية وحمولة ثابتة للتنقل بين المسارات على العميل. لا توجد تغييرات مطلوبة لمكونات الخادم عند استخدام التصدير الثابت، إلا إذا كانت تستهلك [وظائف الخادم الديناميكية](#unsupported-features).
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  // سيتم تنفيذ هذا الـ fetch على الخادم أثناء `next build`
+  const res = await fetch('https://api.example.com/...')
+  const data = await res.json()
+
+  return <main>...</main>
+}
+```
+
+### مكونات العميل
+
+إذا كنت تريد تنفيذ جلب البيانات على العميل، يمكنك استخدام مكون عميل مع [SWR](https://github.com/vercel/swr) لتخزين الطلبات مؤقتًا.
+
+```tsx filename="app/other/page.tsx" switcher
+'use client'
+
+import useSWR from 'swr'
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+export default function Page() {
+  const { data, error } = useSWR(
+    `https://jsonplaceholder.typicode.com/posts/1`,
+    fetcher
+  )
+  if (error) return 'Failed to load'
+  if (!data) return 'Loading...'
+
+  return data.title
+}
+```
+
+```jsx filename="app/other/page.js" switcher
+'use client'
+
+import useSWR from 'swr'
+
+const fetcher = (url) => fetch(url).then((r) => r.json())
+
+export default function Page() {
+  const { data, error } = useSWR(
+    `https://jsonplaceholder.typicode.com/posts/1`,
+    fetcher
+  )
+  if (error) return 'Failed to load'
+  if (!data) return 'Loading...'
+
+  return data.title
+}
+```
+
+نظرًا لأن انتقالات المسار تحدث على جانب العميل، فإن هذا يعمل مثل تطبيق SPA تقليدي. على سبيل المثال، يسمح مسار الفهرس التالي بالتنقل بين منشورات مختلفة على العميل:
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Index Page</h1>
+      <hr />
+      <ul>
+        <li>
+          <Link href="/post/1">Post 1</Link>
+        </li>
+        <li>
+          <Link href="/post/2">Post 2</Link>
+        </li>
+      </ul>
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Index Page</h1>
+      <p>
+        <Link href="/other">Other Page</Link>
+      </p>
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## الميزات المدعومة
+
+يتم دعم معظم ميزات Next.js الأساسية اللازمة لبناء موقع ثابت، بما في ذلك:
+
+- [المسارات الديناميكية عند استخدام `getStaticPaths`](/docs/app/building-your-application/routing/dynamic-routes)
+- الجلب المسبق مع `next/link`
+- التحميل المسبق لـ JavaScript
+- [الاستيراد الديناميكي](/docs/pages/building-your-application/optimizing/lazy-loading)
+- أي خيارات للتنسيق (مثل وحدات CSS، styled-jsx)
+- [جلب البيانات من جانب العميل](/docs/pages/building-your-application/data-fetching/client-side)
+- [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)
+- [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths)
+
+</PagesOnly>
+
+### تحسين الصور
+
+يمكن استخدام [تحسين الصور](/docs/app/building-your-application/optimizing/images) عبر `next/image` مع التصدير الثابت عن طريق تعريف محمل صور مخصص في `next.config.js`. على سبيل المثال، يمكنك تحسين الصور باستخدام خدمة مثل Cloudinary:
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  images: {
+    loader: 'custom',
+    loaderFile: './my-loader.ts',
+  },
+}
+
+module.exports = nextConfig
+```
+
+سيحدد هذا المحمل المخصص كيفية جلب الصور من مصدر بعيد. على سبيل المثال، سيقوم المحمل التالي ببناء عنوان URL لـ Cloudinary:
+
+```ts filename="my-loader.ts" switcher
+export default function cloudinaryLoader({
+  src,
+  width,
+  quality,
+}: {
+  src: string
+  width: number
+  quality?: number
+}) {
+  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
+  return `https://res.cloudinary.com/demo/image/upload/${params.join(
+    ','
+  )}${src}`
+}
+```
+
+```js filename="my-loader.js" switcher
+export default function cloudinaryLoader({ src, width, quality }) {
+  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
+  return `https://res.cloudinary.com/demo/image/upload/${params.join(
+    ','
+  )}${src}`
+}
+```
+
+يمكنك بعد ذلك استخدام `next/image` في تطبيقك، مع تحديد مسارات نسبية للصورة في Cloudinary:
+
+```tsx filename="app/page.tsx" switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
+}
+```
+
+<AppOnly>
+
+### معالجات المسار
+
+ستقوم معالجات المسار (Route Handlers) بعرض استجابة ثابتة عند تشغيل `next build`. يتم دعم فعل HTTP `GET` فقط. يمكن استخدام هذا لإنشاء ملفات ثابتة من نوع HTML أو JSON أو TXT أو غيرها من البيانات المخزنة مؤقتًا أو غير المخزنة. على سبيل المثال:
+
+```ts filename="app/data.json/route.ts" switcher
+export async function GET() {
+  return Response.json({ name: 'Lee' })
+}
+```
+
+```js filename="app/data.json/route.js" switcher
+export async function GET() {
+  return Response.json({ name: 'Lee' })
+}
+```
+
+سيقوم الملف أعلاه `app/data.json/route.ts` بعرض ملف ثابت أثناء `next build`، منتجًا `data.json` يحتوي على `{ name: 'Lee' }`.
+
+إذا كنت بحاجة إلى قراءة قيم ديناميكية من الطلب الوارد، فلا يمكنك استخدام التصدير الثابت.
+
+### واجهات برمجة تطبيقات المتصفح
+
+يتم تقديم مكونات العميل مسبقًا إلى HTML أثناء `next build`. نظرًا لأن [واجهات برمجة تطبيقات الويب](https://developer.mozilla.org/docs/Web/API) مثل `window` و `localStorage` و `navigator` غير متوفرة على الخادم، فأنت بحاجة إلى الوصول إلى هذه الواجهات بأمان فقط عند التشغيل في المتصفح. على سبيل المثال:
+
+```jsx
+'use client';
+
+import { useEffect } from 'react';
+
+export default function ClientComponent() {
+  useEffect(() => {
+    // لديك الآن إمكانية الوصول إلى `window`
+    console.log(window.innerHeight);
+  }, [])
+
+  return ...;
+}
+```
+
+</AppOnly>
+
+## الميزات غير المدعومة
+
+الميزات التي تتطلب خادم Node.js، أو المنطق الديناميكي الذي لا يمكن حسابه أثناء عملية البناء، **غير** مدعومة:
+
+<AppOnly>
+
+- [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) مع `dynamicParams: true`
+- [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) بدون `generateStaticParams()`
+- [معالجات المسار](/docs/app/building-your-application/routing/route-handlers) التي تعتمد على Request
+- [الكوكيز](/docs/app/api-reference/functions/cookies)
+- [إعادة الكتابة](/docs/app/api-reference/next-config-js/rewrites)
+- [إعادة التوجيه](/docs/app/api-reference/next-config-js/redirects)
+- [الرؤوس](/docs/app/api-reference/next-config-js/headers)
+- [الوسيط](/docs/app/building-your-application/routing/middleware)
+- [التجديد الثابت التدريجي](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)
+- [تحسين الصور](/docs/app/building-your-application/optimizing/images) مع المحمل الافتراضي `loader`
+- [وضع المسودة](/docs/app/building-your-application/configuring/draft-mode)
+
+سيؤدي محاولة استخدام أي من هذه الميزات مع `next dev` إلى حدوث خطأ، مشابهًا لتعيين الخيار [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) إلى `error` في تخطيط الجذر.
+
+```jsx
+export const dynamic = 'error'
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+- [التوجيه الدولي](/docs/pages/building-your-application/routing/internationalization)
+- [مسارات API](/docs/pages/building-your-application/routing/api-routes)
+- [إعادة الكتابة](/docs/pages/api-reference/next-config-js/rewrites)
+- [إعادة التوجيه](/docs/pages/api-reference/next-config-js/redirects)
+- [الرؤوس](/docs/pages/api-reference/next-config-js/headers)
+- [الوسيط](/docs/pages/building-your-application/routing/middleware)
+- [التجديد الثابت التدريجي](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)
+- [تحسين الصور](/docs/pages/building-your-application/optimizing/images) مع المحمل الافتراضي `loader`
+- [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode)
+- [`getStaticPaths` مع `fallback: true`](/docs/pages/api-reference/functions/get-static-paths#fallback-true)
+- [`getStaticPaths` مع `fallback: 'blocking'`](/docs/pages/api-reference/functions/get-static-paths#fallback-blocking)
+- [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)
+
+</PagesOnly>
+
+## النشر
+
+مع التصدير الثابت، يمكن نشر Next.js واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة من نوع HTML/CSS/JS.
+
+عند تشغيل `next build`، ينشئ Next.js التصدير الثابت في مجلد `out`. على سبيل المثال، لنفترض أن لديك المسارات التالية:
+
+- `/`
+- `/blog/[id]`
+
+بعد تشغيل `next build`، سينشئ Next.js الملفات التالية:
+
+- `/out/index.html`
+- `/out/404.html`
+- `/out/blog/post-1.html`
+- `/out/blog/post-2.html`
+
+إذا كنت تستخدم مضيفًا ثابتًا مثل Nginx، فيمكنك تكوين إعادة كتابة من الطلبات الواردة إلى الملفات الصحيحة:
+
+```nginx filename="nginx.conf"
+server {
+  listen 80;
+  server_name acme.com;
+
+  root /var/www/out;
+
+  location / {
+      try_files $uri $uri.html $uri/ =404;
+  }
+
+  # هذا ضروري عندما `trailingSlash: false`.
+  # يمكنك حذف هذا عندما `trailingSlash: true`.
+  location /blog/ {
+      rewrite ^/blog/(.*)$ /blog/$1.html break;
+  }
+
+  error_page 404 /404.html;
+  location = /404.html {
+      internal;
+  }
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                              |
+| --------- | -------------------------------------------------------------------------------------------------------------------- |
+| `v14.0.0` | تمت إزالة `next export` لصالح `"output": "export"`                                                      |
+| `v13.4.0` | أضاف موجه التطبيق (App Router) دعمًا محسنًا للتصدير الثابت، بما في ذلك استخدام مكونات خادم React ومعالجات المسار. |
+| `v13.3.0` | أصبح `next export` قديمًا واستُبدل بـ `"output": "export"`                                                   |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/03-multi-zones.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/03-multi-zones.mdx
new file mode 100644
index 00000000..79fa8de0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/03-multi-zones.mdx
@@ -0,0 +1,91 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:36:50.323Z
+title: المناطق المتعددة (Multi-Zones)
+description: تعلم كيفية بناء واجهات أمامية صغيرة باستخدام ميزة المناطق المتعددة في Next.js لنشر تطبيقات Next.js متعددة تحت نطاق واحد.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مع المناطق (With Zones)](https://github.com/vercel/next.js/tree/canary/examples/with-zones)
+
+</details>
+
+المناطق المتعددة هي نهج للواجهات الأمامية الصغيرة التي تقسم تطبيقًا كبيرًا على نطاق إلى تطبيقات Next.js أصغر تخدم كل منها مجموعة من المسارات. هذا مفيد عندما تكون هناك مجموعات من الصفحات غير مرتبطة بالصفحات الأخرى في التطبيق. عن طريق نقل هذه الصفحات إلى منطقة منفصلة (أي تطبيق منفصل)، يمكنك تقليل حجم كل تطبيق مما يحسن أوقات البناء ويزيل الكود الضروري لمنطقة واحدة فقط.
+
+على سبيل المثال، لنفترض أن لديك مجموعة الصفحات التالية التي ترغب في تقسيمها:
+
+- `/blog/*` لجميع منشورات المدونة
+- `/dashboard/*` لجميع الصفحات عندما يكون المستخدم مسجل الدخول إلى لوحة التحكم
+- `/*` لبقية موقعك غير المغطى بالمناطق الأخرى
+
+بدعم المناطق المتعددة، يمكنك إنشاء ثلاثة تطبيقات يتم تقديمها جميعًا على نفس النطاق وتظهر متشابهة للمستخدم، ولكن يمكنك تطوير ونشر كل من التطبيقات بشكل مستقل.
+
+<Image
+  alt="ثلاث مناطق: A، B، C. توضح التنقل الصلب بين مسارات من مناطق مختلفة، والتنقل الناعم بين مسارات داخل نفس المنطقة."
+  srcLight="/docs/light/multi-zones.png"
+  srcDark="/docs/dark/multi-zones.png"
+  width="1600"
+  height="750"
+/>
+
+التنقل بين الصفحات في نفس المنطقة سيقوم بتنقل ناعم، وهو تنقل لا يتطلب إعادة تحميل الصفحة. على سبيل المثال، في هذا الرسم البياني، التنقل من `/` إلى `/products` سيكون تنقلًا ناعمًا.
+
+التنقل من صفحة في منطقة إلى صفحة في منطقة أخرى، مثل من `/` إلى `/dashboard`، سيقوم بتنقل صلب، مع إلغاء تحميل موارد الصفحة الحالية وتحميل موارد الصفحة الجديدة. الصفحات التي يتم زيارتها بشكل متكرر معًا يجب أن تكون في نفس المنطقة لتجنب التنقل الصلب.
+
+## كيفية تعريف منطقة
+
+لا توجد واجهات برمجة تطبيقات خاصة لتعريف منطقة جديدة. المنطقة هي تطبيق Next.js عادي حيث تقوم أيضًا بتكوين [basePath](/docs/app/api-reference/next-config-js/basePath) لتجنب التعارض مع الصفحات والملفات الثابتة في المناطق الأخرى.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  basePath: '/blog',
+}
+```
+
+التطبيق الافتراضي الذي سيتعامل مع جميع المسارات غير المرسلة إلى منطقة أكثر تحديدًا لا يحتاج إلى `basePath`.
+
+أصول Next.js، مثل JavaScript وCSS، سيتم أيضًا إضافة بادئة لها بـ `basePath` للتأكد من أنها لا تتعارض مع أصول المناطق الأخرى. سيتم تقديم هذه الأصول تحت `/basePath/_next/...` لكل من المناطق.
+
+إذا كانت المنطقة تخدم صفحات لا تشترك في بادئة مسار مشتركة، مثل `/home` و `/blog`، فيمكنك أيضًا تعيين [`assetPrefix`](/docs/app/api-reference/next-config-js/assetPrefix) لضمان تقديم جميع أصول Next.js تحت بادئة مسار فريدة للمنطقة دون إضافة بادئة مسار إلى بقية المسارات في تطبيقك.
+
+## كيفية توجيه الطلبات إلى المنطقة الصحيحة
+
+مع إعداد المناطق المتعددة، تحتاج إلى توجيه المسارات إلى المنطقة الصحيحة حيث يتم تقديمها بواسطة تطبيقات مختلفة. يمكنك استخدام أي وكيل HTTP للقيام بذلك، ولكن يمكن أيضًا استخدام أحد تطبيقات Next.js لتوجيه الطلبات للنطاق بأكمله.
+
+لتوجيه إلى المنطقة الصحيحة باستخدام تطبيق Next.js، يمكنك استخدام [`rewrites`](/docs/app/api-reference/next-config-js/rewrites). لكل مسار يتم تقديمه بواسطة منطقة مختلفة، ستضيف قاعدة إعادة كتابة لإرسال هذا المسار إلى نطاق المنطقة الأخرى. على سبيل المثال:
+
+```js filename="next.config.js"
+async rewrites() {
+    return [
+        {
+            source: '/blog',
+            destination: `${process.env.BLOG_DOMAIN}/blog`,
+        },
+        {
+            source: '/blog/:path+',
+            destination: `${process.env.BLOG_DOMAIN}/blog/:path+`,
+        }
+    ];
+}
+```
+
+يجب أن يكون `destination` عنوان URL يتم تقديمه بواسطة المنطقة، بما في ذلك المخطط والنطاق. يجب أن يشير هذا إلى نطاق الإنتاج للمنطقة، ولكن يمكن أيضًا استخدامه لتوجيه الطلبات إلى `localhost` في التطوير المحلي.
+
+> **جيد أن تعرف**: يجب أن تكون مسارات URL فريدة لمنطقة. على سبيل المثال، محاولة منطقتين تقديم `/blog` سينشئ تعارضًا في التوجيه.
+
+## الربط بين المناطق
+
+يجب استخدام علامة `a` للروابط إلى مسارات في منطقة مختلفة بدلاً من مكون Next.js [`<Link>`](/docs/pages/api-reference/components/link). هذا لأن Next.js سيحاول جلب مسبقًا والتنقل الناعم إلى أي مسار نسبي في مكون `<Link>`، وهو ما لن يعمل عبر المناطق.
+
+## مشاركة الكود
+
+يمكن أن تعيش تطبيقات Next.js التي تشكل المناطق المختلفة في أي مستودع. ومع ذلك، غالبًا ما يكون من الملائم وضع هذه المناطق في [monorepo](https://ar.wikipedia.org/wiki/%D9%85%D9%88%D9%86%D9%88%D8%B1%D9%8A%D8%A8%D9%88) لمشاركة الكود بسهولة أكبر. بالنسبة للمناطق الموجودة في مستودعات مختلفة، يمكن أيضًا مشاركة الكود باستخدام حزم NPM العامة أو الخاصة.
+
+نظرًا لأنه يمكن إصدار الصفحات في مناطق مختلفة في أوقات مختلفة، يمكن أن تكون أعلام الميزات مفيدة لتمكين أو تعطيل الميزات بالتزامن عبر المناطق المختلفة.
+
+بالنسبة لتطبيقات [Next.js على Vercel](https://vercel.com?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، يمكنك استخدام [monorepo](https://vercel.com/blog/monorepos-are-changing-how-teams-build-software?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لنشر جميع المناطق المتأثرة باستخدام أمر `git push` واحد.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/index.mdx
new file mode 100644
index 00000000..f9ce7119
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/10-deploying/index.mdx
@@ -0,0 +1,284 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:38:35.854Z
+title: النشر
+description: تعلم كيفية نشر تطبيق Next.js الخاص بك إلى بيئة الإنتاج، سواءً كان مُدارًا أو مضيفًا ذاتيًا.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+تهانينا، حان وقت النشر إلى بيئة الإنتاج.
+
+يمكنك نشر [Next.js المُدار مع Vercel](#managed-nextjs-with-vercel)، أو استضافة ذاتية على خادم Node.js، صورة Docker، أو حتى ملفات HTML ثابتة. عند النشر باستخدام `next start`، جميع ميزات Next.js مدعومة.
+
+## بناءات الإنتاج
+
+تشغيل `next build` يولد نسخة مُحسنة من تطبيقك للإنتاج. يتم إنشاء ملفات HTML وCSS وJavaScript بناءً على صفحاتك. يتم **تجميع** JavaScript و**تصغير** حزم المتصفح باستخدام [مُجمّع Next.js](/docs/architecture/nextjs-compiler) لتحقيق أفضل أداء ودعم [جميع المتصفحات الحديثة](/docs/architecture/supported-browsers).
+
+ينتج Next.js ناتج نشر قياسي يُستخدم في النشر المُدار والذاتي لـ Next.js. هذا يضمن دعم جميع الميزات في كلا طريقي النشر. في الإصدار الرئيسي القادم، سنحول هذا الناتج إلى [مواصفات Build Output API](https://vercel.com/docs/build-output-api/v3?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+## Next.js المُدار مع Vercel
+
+[Vercel](https://vercel.com/docs/frameworks/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، مبتكرو Next.js والمشرفون عليها، يوفرون بنية تحتية مُدارة ومنصة تجربة مطور لتطبيقات Next.js الخاصة بك.
+
+النشر على Vercel لا يتطلب أي إعدادات ويوفر تحسينات إضافية للتوسع، التوفر، والأداء عالميًا. ومع ذلك، جميع ميزات Next.js لا تزال مدعومة عند الاستضافة الذاتية.
+
+تعلم المزيد عن [Next.js على Vercel](https://vercel.com/docs/frameworks/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) أو [انشر قالبًا مجانًا](https://vercel.com/templates/next.js?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لتجربته.
+
+## الاستضافة الذاتية
+
+يمكنك استضافة Next.js ذاتيًا بثلاث طرق مختلفة:
+
+- [خادم Node.js](#nodejs-server)
+- [حاوية Docker](#docker-image)
+- [تصدير ثابت](#static-html-export)
+
+### خادم Node.js
+
+يمكن نشر Next.js على أي مزود استضافة يدعم Node.js. تأكد من أن ملف `package.json` يحتوي على نصوص `"build"` و`"start"`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+```
+
+ثم، قم بتشغيل `npm run build` لبناء تطبيقك. أخيرًا، قم بتشغيل `npm run start` لبدء خادم Node.js. يدعم هذا الخادم جميع ميزات Next.js.
+
+### صورة Docker
+
+يمكن نشر Next.js على أي مزود استضافة يدعم حاويات [Docker](https://www.docker.com/). يمكنك استخدام هذه الطريقة عند النشر على منصات تنسيق الحاويات مثل [Kubernetes](https://kubernetes.io/) أو عند التشغيل داخل حاوية في أي مزود سحابي.
+
+1. [ثبّت Docker](https://docs.docker.com/get-docker/) على جهازك
+2. [انسخ مثالنا](https://github.com/vercel/next.js/tree/canary/examples/with-docker) (أو [مثال البيئات المتعددة](https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env))
+3. ابنِ حاويتك: `docker build -t nextjs-docker .`
+4. شغّل حاويتك: `docker run -p 3000:3000 nextjs-docker`
+
+يدعم Next.js عبر Docker جميع ميزات Next.js.
+
+### تصدير HTML ثابت
+
+يتيح Next.js البدء كموقع ثابت أو تطبيق صفحة واحدة (SPA)، ثم الترقية لاحقًا لاستخدام الميزات التي تتطلب خادمًا.
+
+بما أن Next.js يدعم هذا [التصدير الثابت](/docs/app/building-your-application/deploying/static-exports)، يمكن نشره واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة HTML/CSS/JS. يتضمن ذلك أدوات مثل AWS S3 أو Nginx أو Apache.
+
+التشغيل كـ [تصدير ثابت](/docs/app/building-your-application/deploying/static-exports) لا يدعم ميزات Next.js التي تتطلب خادمًا. [تعلم المزيد](/docs/app/building-your-application/deploying/static-exports#unsupported-features).
+
+> **معلومة مفيدة:**
+>
+> - [مكونات الخادم](/docs/app/building-your-application/rendering/server-components) مدعومة مع التصدير الثابت.
+
+## الميزات
+
+### تحسين الصور
+
+[تحسين الصور](/docs/app/building-your-application/optimizing/images) عبر `next/image` يعمل مع الاستضافة الذاتية دون أي إعدادات عند النشر باستخدام `next start`. إذا كنت تفضل أن يكون لديك خدمة منفصلة لتحسين الصور، يمكنك [تكوين محمل صور](/docs/app/building-your-application/optimizing/images#loaders).
+
+يمكن استخدام تحسين الصور مع [تصدير ثابت](/docs/app/building-your-application/deploying/static-exports#image-optimization) عن طريق تعريف محمل صور مخصص في `next.config.js`. لاحظ أن الصور يتم تحسينها أثناء التشغيل، وليس أثناء البناء.
+
+> **معلومة مفيدة:**
+>
+> - عند الاستضافة الذاتية، فكر في تثبيت `sharp` لتحسين أداء [تحسين الصور](/docs/pages/building-your-application/optimizing/images) في بيئة الإنتاج عن طريق تشغيل `npm install sharp` في دليل مشروعك. على منصات Linux، قد يحتاج `sharp` إلى [إعدادات إضافية](https://sharp.pixelplumbing.com/install#linux-memory-allocator) لمنع استخدام الذاكرة المفرط.
+> - تعلم المزيد عن [سلوك التخزين المؤقت للصور المحسنة](/docs/app/api-reference/components/image#caching-behavior) وكيفية تكوين TTL.
+> - يمكنك أيضًا [تعطيل تحسين الصور](/docs/app/api-reference/components/image#unoptimized) والاستفادة من المزايا الأخرى لاستخدام `next/image` إذا كنت تفضل ذلك. على سبيل المثال، إذا كنت تقوم بتحسين الصور بنفسك بشكل منفصل.
+
+### Middleware
+
+[Middleware](/docs/app/building-your-application/routing/middleware) يعمل مع الاستضافة الذاتية دون أي إعدادات عند النشر باستخدام `next start`. نظرًا لأنه يتطلب الوصول إلى الطلب الوارد، فهو غير مدعوم عند استخدام [تصدير ثابت](/docs/app/building-your-application/deploying/static-exports).
+
+يستخدم Middleware [وقت تشغيل](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes) وهو مجموعة فرعية من جميع واجهات برمجة تطبيقات Node.js المتاحة للمساعدة في ضمان زمن انتقال منخفض، حيث قد يعمل أمام كل مسار أو أصل في تطبيقك. لا يتطلب هذا وقت التشغيل تشغيل "على الحافة" ويعمل في خادم أحادي المنطقة. هناك حاجة إلى إعدادات إضافية وبنية تحتية لتشغيل Middleware في مناطق متعددة.
+
+إذا كنت تبحث عن إضافة منطق (أو استخدام حزمة خارجية) تتطلب جميع واجهات برمجة تطبيقات Node.js، فقد تتمكن من نقل هذا المنطق إلى [تخطيط](/docs/app/building-your-application/routing/pages-and-layouts#layouts) كمكون [خادم](/docs/app/building-your-application/rendering/server-components). على سبيل المثال، التحقق من [الرؤوس](/docs/app/api-reference/functions/headers) و[إعادة التوجيه](/docs/app/api-reference/functions/redirect). يمكنك أيضًا استخدام الرؤوس أو ملفات تعريف الارتباط أو معلمات الاستعلام لـ [إعادة التوجيه](/docs/app/api-reference/next-config-js/redirects#header-cookie-and-query-matching) أو [إعادة الكتابة](/docs/app/api-reference/next-config-js/rewrites#header-cookie-and-query-matching) عبر `next.config.js`. إذا لم ينجح ذلك، يمكنك أيضًا استخدام [خادم مخصص](/docs/pages/building-your-application/configuring/custom-server).
+
+### متغيرات البيئة
+
+يمكن لـ Next.js دعم متغيرات البيئة في وقت البناء ووقت التشغيل.
+
+**بشكل افتراضي، متغيرات البيئة متاحة فقط على الخادم**. لجعل متغير البيئة متاحًا في المتصفح، يجب أن يبدأ بـ `NEXT_PUBLIC_`. ومع ذلك، سيتم تضمين متغيرات البيئة العامة هذه في حزمة JavaScript أثناء `next build`.
+
+لقراءة متغيرات البيئة في وقت التشغيل، نوصي باستخدام `getServerSideProps` أو [الترقية التدريجية لموجه التطبيق](/docs/app/building-your-application/upgrading/app-router-migration). مع موجه التطبيق، يمكننا قراءة متغيرات البيئة بأمان على الخادم أثناء التقديم الديناميكي. هذا يسمح لك باستخدام صورة Docker واحدة يمكن ترقيتها عبر بيئات متعددة بقيم مختلفة.
+
+```jsx
+import { unstable_noStore as noStore } from 'next/cache';
+
+export default function Component() {
+  noStore();
+  // ملفات تعريف الارتباط ()، الرؤوس ()، وغيرها من الوظائف الديناميكية
+  // ستختار أيضًا التقديم الديناميكي، مما يجعل
+  // متغير البيئة هذا يتم تقييمه في وقت التشغيل
+  const value = process.env.MY_VALUE
+  ...
+}
+```
+
+> **معلومة مفيدة:**
+>
+> - يمكنك تشغيل التعليمات البرمجية عند بدء تشغيل الخادم باستخدام [وظيفة `register`](/docs/app/building-your-application/optimizing/instrumentation).
+> - لا نوصي باستخدام خيار [runtimeConfig](/docs/pages/api-reference/next-config-js/runtime-configuration)، لأنه لا يعمل مع وضع الإخراج المستقل. بدلاً من ذلك، نوصي [بالترقية التدريجية](/docs/app/building-your-application/upgrading/app-router-migration) لموجه التطبيق.
+
+### التخزين المؤقت و ISR
+
+يمكن لـ Next.js تخزين الاستجابات وصفحات ثابتة مولدة ومخرجات بناء وأصول ثابتة أخرى مثل الصور والخطوط والنصوص البرمجية.
+
+يستخدم التخزين المؤقت وإعادة التحقق من الصفحات (باستخدام التوليد الثابت التدريجي (ISR) أو وظائف أحدث في موجه التطبيق **نفس التخزين المؤقت المشترك**. افتراضيًا، يتم تخزين هذا التخزين المؤقت في نظام الملفات (على القرص) على خادم Next.js الخاص بك. **يعمل هذا تلقائيًا عند الاستضافة الذاتية** باستخدام كل من موجه الصفحات وموجه التطبيق.
+
+يمكنك تكوين موقع التخزين المؤقت لـ Next.js إذا كنت تريد الاحتفاظ بالصفحات والبيانات المخزنة مؤقتًا في تخزين دائم، أو مشاركة التخزين المؤقت عبر عدة حاويات أو نسخ من تطبيق Next.js الخاص بك.
+
+#### التخزين المؤقت التلقائي
+
+- يضبط Next.js رأس `Cache-Control` على `public, max-age=31536000, immutable` للأصول الثابتة حقًا. لا يمكن تجاوزه. تحتوي هذه الملفات الثابتة على تجزئة SHA في اسم الملف، لذا يمكن تخزينها مؤقتًا إلى أجل غير مسمى بأمان. على سبيل المثال، [استيراد الصور الثابتة](/docs/app/building-your-application/optimizing/images#local-images). يمكنك [تكوين TTL](/docs/app/api-reference/components/image#caching-behavior) للصور.
+- يضبط التوليد الثابت التدريجي (ISR) رأس `Cache-Control` على `s-maxage: <revalidate in getStaticProps>, stale-while-revalidate`. يتم تعريف وقت إعادة التحقق هذا في [وظيفة `getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) بالثواني. إذا قمت بتعيين `revalidate: false`، فسيتم تعيين مدة التخزين المؤقت الافتراضية إلى سنة واحدة.
+- تعيين الصفحات المقدمة ديناميكيًا رأس `Cache-Control` على `private, no-cache, no-store, max-age=0, must-revalidate` لمنع تخزين البيانات الخاصة بالمستخدم مؤقتًا. ينطبق هذا على كل من موجه التطبيق وموجه الصفحات. يتضمن هذا أيضًا [وضع المسودة](/docs/app/building-your-application/configuring/draft-mode).
+
+#### الأصول الثابتة
+
+إذا كنت تريد استضافة أصول ثابتة على نطاق أو CDN مختلف، يمكنك استخدام [تكوين `assetPrefix`](/docs/app/api-reference/next-config-js/assetPrefix) في `next.config.js`. سيستخدم Next.js هذه البادئة عند استرداد ملفات JavaScript أو CSS. فصل أصولك إلى نطاق مختلف له عيب الوقت الإضافي المستغرق في تحليل DNS و TLS.
+
+[تعلم المزيد عن `assetPrefix`](/docs/app/api-reference/next-config-js/assetPrefix).
+
+#### تكوين التخزين المؤقت
+
+افتراضيًا، سيتم تخزين الأصول المخزنة مؤقتًا في الذاكرة (50 ميجابايت افتراضيًا) وعلى القرص. إذا كنت تستضيف Next.js باستخدام منصة تنسيق حاويات مثل Kubernetes، سيكون لكل نسخة نسخة من التخزين المؤقت. لمنع عرض بيانات قديمة لأن التخزين المؤقت غير مشترك بين النسخ افتراضيًا، يمكنك تكوين التخزين المؤقت لـ Next.js لتوفير معالج تخزين مؤقت وتعطيل التخزين المؤقت في الذاكرة.
+
+لتكوين موقع ISR/تخزين البيانات المؤقت عند الاستضافة الذاتية، يمكنك تكوين معالج مخصص في ملف `next.config.js` الخاص بك:
+
+```jsx filename="next.config.js"
+module.exports = {
+  cacheHandler: require.resolve('./cache-handler.js'),
+  cacheMaxMemorySize: 0, // تعطيل التخزين المؤقت في الذاكرة الافتراضي
+}
+```
+
+ثم، أنشئ `cache-handler.js` في جذر مشروعك، على سبيل المثال:
+
+```jsx filename="cache-handler.js"
+const cache = new Map()
+
+module.exports = class CacheHandler {
+  constructor(options) {
+    this.options = options
+  }
+
+  async get(key) {
+    // يمكن تخزين هذا في أي مكان، مثل تخزين دائم
+    return cache.get(key)
+  }
+
+  async set(key, data, ctx) {
+    // يمكن تخزين هذا في أي مكان، مثل تخزين دائم
+    cache.set(key, {
+      value: data,
+      lastModified: Date.now(),
+      tags: ctx.tags,
+    })
+  }
+
+  async revalidateTag(tag) {
+    // التكرار على جميع المدخلات في التخزين المؤقت
+    for (let [key, value] of cache) {
+      // إذا كانت علامات القيمة تتضمن العلامة المحددة، احذف هذه المدخلة
+      if (value.tags.includes(tag)) {
+        cache.delete(key)
+      }
+    }
+  }
+}
+```
+
+سيسمح لك استخدام معالج تخزين مؤقت مخصص بضمان الاتساق عبر جميع النسخ التي تستضيف تطبيق Next.js الخاص بك. على سبيل المثال، يمكنك حفظ القيم المخزنة مؤقتًا في أي مكان، مثل [Redis](https://github.com/vercel/next.js/tree/canary/examples/cache-handler-redis) أو AWS S3.
+
+> **معلومة مفيدة:**
+>
+> - `revalidatePath` هي طبقة ملائمة فوق علامات التخزين المؤقت. استدعاء `revalidatePath` سيستدعي وظيفة `revalidateTag` مع علامة افتراضية خاصة للصفحة المقدمة.
+
+### تخزين البناء المؤقت
+
+ينشئ Next.js معرفًا أثناء `next build` لتحديد إصدار التطبيق الذي يتم تقديمه. يجب استخدام نفس البناء وتشغيله في حاويات متعددة.
+
+إذا كنت تقوم بإعادة البناء لكل مرحلة من بيئتك، فستحتاج إلى إنشاء معرف بناء متسق للاستخدام بين الحاويات. استخدم أمر `generateBuildId` في `next.config.js`:
+
+```jsx filename="next.config.js"
+module.exports = {
+  generateBuildId: async () => {
+    // يمكن أن يكون هذا أي شيء، باستخدام أحدث تجزئة git
+    return process.env.GIT_HASH
+  },
+}
+```
+
+### انحراف الإصدار
+
+سيقوم Next.js تلقائيًا بالتخفيف من معظم حالات [انحراف الإصدار](https://www.industrialempathy.com/posts/version-skew/) وإعادة تحميل التطبيق تلقائيًا لاسترداد الأصول الجديدة عند الكشف عنها. على سبيل المثال، إذا كان هناك عدم تطابق في `deploymentId`، فإن الانتقالات بين الصفحات ستؤدي إلى تنقل صعب بدلاً من استخدام قيمة مسبقة الجلب.
+
+عند إعادة تحميل التطبيق، قد يكون هناك فقدان لحالة التطبيق إذا لم يتم تصميمه للاستمرار بين تنقلات الصفحات. على سبيل المثال، استخدام حالة URL أو التخزين المحلي سيحافظ على الحالة بعد تحديث الصفحة. ومع ذلك، حالة المكون مثل `useState` ستضيع في مثل هذه التنقلات.
+
+يوفر Vercel [حماية إضافية من الانحراف](https://vercel.com/docs/deployments/skew-protection?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) لتطبيقات Next.js لضمان أن الأصول والوظائف من الإصدار السابق لا تزال متاحة للعملاء القدامى، حتى بعد نشر الإصدار الجديد.
+
+يمكنك تكوين خاصية `deploymentId` يدويًا في ملف `next.config.js` الخاص بك لضمان استخدام كل طلب إما سلسلة استعلام `?dpl` أو رأس `x-deployment-id`.
+
+<AppOnly>
+
+### البث و Suspense
+
+يدعم موجه تطبيق Next.js [استجابات البث](/docs/app/building-your-application/routing/loading-ui-and-streaming) عند الاستضافة الذاتية. إذا كنت تستخدم Nginx أو وكيلًا مشابهًا، فستحتاج إلى تكوينه لتعطيل التخزين المؤقت لتمكين البث.
+
+على سبيل المثال، يمكنك تعطيل التخزين المؤقت في Nginx عن طريق تعيين `X-Accel-Buffering` إلى `no`:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/:path*{/}?',
+        headers: [
+          {
+            key: 'X-Accel-Buffering',
+            value: 'no',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## الإيقاف اليدوي الآمن
+
+عند استضافة التطبيق ذاتيًا، قد ترغب في تنفيذ كود معين عند إيقاف الخادم عند استقبال إشارات `SIGTERM` أو `SIGINT`.
+
+يمكنك تعيين متغير البيئة `NEXT_MANUAL_SIG_HANDLE` إلى `true` ثم تسجيل معالج للإشارة داخل ملف `_document.js`. يجب تسجيل متغير البيئة مباشرة في سكريبت `package.json` وليس في ملف `.env`.
+
+> **معلومة مفيدة**: معالجة الإشارات اليدوية غير متاحة في وضع `next dev`.
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
+  }
+}
+```
+
+```js filename="pages/_document.js"
+if (process.env.NEXT_MANUAL_SIG_HANDLE) {
+  process.on('SIGTERM', () => {
+    console.log('Received SIGTERM: cleaning up')
+    process.exit(0)
+  })
+  process.on('SIGINT', () => {
+    console.log('Received SIGINT: cleaning up')
+    process.exit(0)
+  })
+}
+```
+
+</PagesOnly>
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/01-codemods.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/01-codemods.mdx
new file mode 100644
index 00000000..f4df6201
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/01-codemods.mdx
@@ -0,0 +1,380 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:36:15.804Z
+title: Codemods
+description: استخدام Codemods لترقية قاعدة كود Next.js عند إصدار ميزات جديدة.
+---
+
+Codemods هي تحويلات تعمل على قاعدة الكود برمجيًا. هذا يسمح بتطبيق عدد كبير من التغييرات برمجيًا دون الحاجة إلى المرور يدويًا عبر كل ملف.
+
+يوفر Next.js تحويلات Codemod للمساعدة في ترقية قاعدة كود Next.js عند تحديث API أو إهماله.
+
+## الاستخدام
+
+في طرفيتك، انتقل (`cd`) إلى مجلد مشروعك، ثم قم بتشغيل:
+
+```bash filename="Terminal"
+npx @next/codemod <transform> <path>
+```
+
+مع استبدال `<transform>` و `<path>` بقيم مناسبة.
+
+- `transform` - اسم التحويل
+- `path` - الملفات أو المجلد المراد تحويله
+- `--dry` تشغيل تجريبي، لن يتم تعديل أي كود
+- `--print` طباعة المخرجات المتغيرة للمقارنة
+
+## Codemods الخاصة بـ Next.js
+
+### 14.0
+
+#### نقل استيرادات `ImageResponse`
+
+##### `next-og-import`
+
+```bash filename="Terminal"
+npx @next/codemod@latest next-og-import .
+```
+
+هذا الكودمود ينقل استيرادات من `next/server` إلى `next/og` لاستخدام [توليد صور OG ديناميكية](/docs/app/building-your-application/optimizing/metadata#dynamic-image-generation).
+
+على سبيل المثال:
+
+```js
+import { ImageResponse } from 'next/server'
+```
+
+يتحول إلى:
+
+```js
+import { ImageResponse } from 'next/og'
+```
+
+#### استخدام تصدير `viewport`
+
+##### `metadata-to-viewport-export`
+
+```bash filename="Terminal"
+npx @next/codemod@latest metadata-to-viewport-export .
+```
+
+هذا الكودمود ينقل بعض بيانات وصف viewport إلى تصدير `viewport`.
+
+على سبيل المثال:
+
+```js
+export const metadata = {
+  title: 'My App',
+  themeColor: 'dark',
+  viewport: {
+    width: 1,
+  },
+}
+```
+
+يتحول إلى:
+
+```js
+export const metadata = {
+  title: 'My App',
+}
+
+export const viewport = {
+  width: 1,
+  themeColor: 'dark',
+}
+```
+
+### 13.2
+
+#### استخدام الخط المدمج
+
+##### `built-in-next-font`
+
+```bash filename="Terminal"
+npx @next/codemod@latest built-in-next-font .
+```
+
+هذا الكودمود يزيل حزمة `@next/font` ويحول استيرادات `@next/font` إلى `next/font` المدمج.
+
+على سبيل المثال:
+
+```js
+import { Inter } from '@next/font/google'
+```
+
+يتحول إلى:
+
+```js
+import { Inter } from 'next/font/google'
+```
+
+### 13.0
+
+#### إعادة تسمية استيرادات صورة Next
+
+##### `next-image-to-legacy-image`
+
+```bash filename="Terminal"
+npx @next/codemod@latest next-image-to-legacy-image .
+```
+
+يعيد تسمية استيرادات `next/image` بأمان في تطبيقات Next.js 10 أو 11 أو 12 الحالية إلى `next/legacy/image` في Next.js 13. كما يعيد تسمية `next/future/image` إلى `next/image`.
+
+على سبيل المثال:
+
+```jsx filename="pages/index.js"
+import Image1 from 'next/image'
+import Image2 from 'next/future/image'
+
+export default function Home() {
+  return (
+    <div>
+      <Image1 src="/test.jpg" width="200" height="300" />
+      <Image2 src="/test.png" width="500" height="400" />
+    </div>
+  )
+}
+```
+
+يتحول إلى:
+
+```jsx filename="pages/index.js"
+// 'next/image' تصبح 'next/legacy/image'
+import Image1 from 'next/legacy/image'
+// 'next/future/image' تصبح 'next/image'
+import Image2 from 'next/image'
+
+export default function Home() {
+  return (
+    <div>
+      <Image1 src="/test.jpg" width="200" height="300" />
+      <Image2 src="/test.png" width="500" height="400" />
+    </div>
+  )
+}
+```
+
+#### الانتقال إلى مكون الصورة الجديد
+
+##### `next-image-experimental`
+
+```bash filename="Terminal"
+npx @next/codemod@latest next-image-experimental .
+```
+
+ينقل بشكل خطير من `next/legacy/image` إلى `next/image` الجديد عن طريق إضافة أنماط مضمنة وإزالة الخصائص غير المستخدمة.
+
+- يزيل خاصية `layout` ويضيف `style`.
+- يزيل خاصية `objectFit` ويضيف `style`.
+- يزيل خاصية `objectPosition` ويضيف `style`.
+- يزيل خاصية `lazyBoundary`.
+- يزيل خاصية `lazyRoot`.
+
+#### إزالة علامات `<a>` من مكونات Link
+
+##### `new-link`
+
+```bash filename="Terminal"
+npx @next/codemod@latest new-link .
+```
+
+<AppOnly>
+
+قم بإزالة علامات `<a>` داخل [مكونات Link](/docs/app/api-reference/components/link)، أو أضف خاصية `legacyBehavior` إلى الروابط التي لا يمكن إصلاحها تلقائيًا.
+
+</AppOnly>
+
+<PagesOnly>
+
+قم بإزالة علامات `<a>` داخل [مكونات Link](/docs/pages/api-reference/components/link)، أو أضف خاصية `legacyBehavior` إلى الروابط التي لا يمكن إصلاحها تلقائيًا.
+
+</PagesOnly>
+
+على سبيل المثال:
+
+```jsx
+<Link href="/about">
+  <a>About</a>
+</Link>
+// يتحول إلى
+<Link href="/about">
+  About
+</Link>
+
+<Link href="/about">
+  <a onClick={() => console.log('clicked')}>About</a>
+</Link>
+// يتحول إلى
+<Link href="/about" onClick={() => console.log('clicked')}>
+  About
+</Link>
+```
+
+في الحالات التي لا يمكن فيها تطبيق الإصلاح التلقائي، تتم إضافة خاصية `legacyBehavior`. هذا يسمح لتطبيقك بالاستمرار في العمل باستخدام السلوك القديم لهذا الرابط المحدد.
+
+```jsx
+const Component = () => <a>About</a>
+
+<Link href="/about">
+  <Component />
+</Link>
+// يصبح
+<Link href="/about" legacyBehavior>
+  <Component />
+</Link>
+```
+
+### 11
+
+#### الانتقال من CRA
+
+##### `cra-to-next`
+
+```bash filename="Terminal"
+npx @next/codemod cra-to-next
+```
+
+ينقل مشروع Create React App إلى Next.js؛ بإنشاء Pages Router والإعدادات اللازمة لمطابقة السلوك. يتم استخدام التصيير من جانب العميل فقط في البداية لمنع كسر التوافق بسبب استخدام `window` أثناء SSR ويمكن تمكينه بسلاسة للسماح بالتبني التدريجي لميزات Next.js المحددة.
+
+يرجى مشاركة أي ملاحظات متعلقة بهذا التحويل [في هذه المناقشة](https://github.com/vercel/next.js/discussions/25858).
+
+### 10
+
+#### إضافة استيرادات React
+
+##### `add-missing-react-import`
+
+```bash filename="Terminal"
+npx @next/codemod add-missing-react-import
+```
+
+يحول الملفات التي لا تستورد `React` لتشمل الاستيراد من أجل عمل [تحويل JSX الجديد لـ React](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
+
+على سبيل المثال:
+
+```jsx filename="my-component.js"
+export default class Home extends React.Component {
+  render() {
+    return <div>Hello World</div>
+  }
+}
+```
+
+يتحول إلى:
+
+```jsx filename="my-component.js"
+import React from 'react'
+export default class Home extends React.Component {
+  render() {
+    return <div>Hello World</div>
+  }
+}
+```
+
+### 9
+
+#### تحويل المكونات المجهولة إلى مكونات مسماة
+
+##### `name-default-component`
+
+```bash filename="Terminal"
+npx @next/codemod name-default-component
+```
+
+**النسخ 9 وما فوق.**
+
+يحول المكونات المجهولة إلى مكونات مسماة للتأكد من عملها مع [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
+
+على سبيل المثال:
+
+```jsx filename="my-component.js"
+export default function () {
+  return <div>Hello World</div>
+}
+```
+
+يتحول إلى:
+
+```jsx filename="my-component.js"
+export default function MyComponent() {
+  return <div>Hello World</div>
+}
+```
+
+سيكون للمكون اسم بحالة الجمل (camel-case) بناءً على اسم الملف، ويعمل أيضًا مع دوال السهم.
+
+### 8
+
+#### تحويل HOC الخاص بـ AMP إلى تكوين صفحة
+
+##### `withamp-to-config`
+
+```bash filename="Terminal"
+npx @next/codemod withamp-to-config
+```
+
+يحول HOC `withAmp` إلى تكوين صفحة Next.js 9.
+
+على سبيل المثال:
+
+```js
+// قبل
+import { withAmp } from 'next/amp'
+
+function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export default withAmp(Home)
+```
+
+```js
+// بعد
+export default function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export const config = {
+  amp: true,
+}
+```
+
+### 6
+
+#### استخدام `withRouter`
+
+##### `url-to-withrouter`
+
+```bash filename="Terminal"
+npx @next/codemod url-to-withrouter
+```
+
+يحول خاصية `url` المهملة التي يتم حقنها تلقائيًا في الصفحات الرئيسية إلى استخدام `withRouter` وخاصية `router` التي يحقنها. اقرأ المزيد هنا: [https://nextjs.org/docs/messages/url-deprecated](/docs/messages/url-deprecated)
+
+على سبيل المثال:
+
+```js filename="من"
+import React from 'react'
+export default class extends React.Component {
+  render() {
+    const { pathname } = this.props.url
+    return <div>Current pathname: {pathname}</div>
+  }
+}
+```
+
+```js filename="إلى"
+import React from 'react'
+import { withRouter } from 'next/router'
+export default withRouter(
+  class extends React.Component {
+    render() {
+      const { pathname } = this.props.router
+      return <div>Current pathname: {pathname}</div>
+    }
+  }
+)
+```
+
+هذه حالة واحدة. جميع الحالات التي يتم تحويلها (واختبارها) يمكن العثور عليها في [دليل `__testfixtures__`](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/02-app-router-migration.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/02-app-router-migration.mdx
new file mode 100644
index 00000000..8a6cf338
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/02-app-router-migration.mdx
@@ -0,0 +1,920 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:40:48.047Z
+title: دليل التبني التدريجي لموجه التطبيقات (App Router)
+nav_title: الهجرة إلى موجه التطبيقات
+description: تعلم كيفية ترقية تطبيق Next.js الحالي من موجه الصفحات (Pages Router) إلى موجه التطبيقات (App Router).
+---
+
+سيساعدك هذا الدليل في:
+
+- [تحديث تطبيق Next.js من الإصدار 12 إلى الإصدار 13](#nextjs-version)
+- [ترقية الميزات التي تعمل في كل من دليل `pages` ودليل `app`](#upgrading-new-features)
+- [هجرة تطبيقك الحالي تدريجياً من `pages` إلى `app`](#migrating-from-pages-to-app)
+
+## الترقية
+
+### إصدار Node.js
+
+أصبح الحد الأدنى لإصدار Node.js الآن **v18.17**. راجع [توثيق Node.js](https://nodejs.org/docs/latest-v18.x/api/) لمزيد من المعلومات.
+
+### إصدار Next.js
+
+لتحديث Next.js إلى الإصدار 13، قم بتشغيل الأمر التالي باستخدام مدير الحزم المفضل لديك:
+
+```bash filename="Terminal"
+npm install next@latest react@latest react-dom@latest
+```
+
+### إصدار ESLint
+
+إذا كنت تستخدم ESLint، فستحتاج إلى ترقية إصدار ESLint:
+
+```bash filename="Terminal"
+npm install -D eslint-config-next@latest
+```
+
+> **معلومة مفيدة**: قد تحتاج إلى إعادة تشغيل خادم ESLint في VS Code لتفعيل تغييرات ESLint. افتح لوحة الأوامر (`cmd+shift+p` على Mac؛ `ctrl+shift+p` على Windows) وابحث عن `ESLint: Restart ESLint Server`.
+
+## الخطوات التالية
+
+بعد التحديث، راجع الأقسام التالية للخطوات التالية:
+
+- [ترقية الميزات الجديدة](#upgrading-new-features): دليل لمساعدتك في الترقية إلى ميزات جديدة مثل مكونات الصورة والرابط المحسنة.
+- [الهجرة من دليل `pages` إلى `app`](#migrating-from-pages-to-app): دليل خطوة بخطوة لمساعدتك في الهجرة التدريجية من دليل `pages` إلى دليل `app`.
+
+## ترقية الميزات الجديدة
+
+أدخل Next.js 13 [موجه التطبيقات الجديد (App Router)](/docs/app/building-your-application/routing) بميزات واتفاقيات جديدة. يتوفر الموجه الجديد في دليل `app` ويتعايش مع دليل `pages`.
+
+لا تتطلب الترقية إلى Next.js 13 استخدام [موجه التطبيقات الجديد (App Router)](/docs/app/building-your-application/routing#the-app-router). يمكنك الاستمرار في استخدام `pages` مع الميزات الجديدة التي تعمل في كلا الدليلين، مثل [مكون الصورة](#image-component) المحدث، [مكون الرابط](#link-component)، [مكون السكريبت](#script-component)، و[تحسين الخطوط](#font-optimization).
+
+### مكون `<Image/>`
+
+قدم Next.js 12 تحسينات جديدة لمكون الصورة مع استيراد مؤقت: `next/future/image`. شملت هذه التحسينات كمية أقل من JavaScript على جانب العميل، طرق أسهل لتوسيع وتصميم الصور، تحسين إمكانية الوصول، وتحميل كسول أصلي في المتصفح.
+
+في الإصدار 13، أصبح هذا السلوك الجديد هو الافتراضي لـ `next/image`.
+
+هناك اثنان من أدوات التعديل التلقائي (codemods) لمساعدتك في الهجرة إلى مكون الصورة الجديد:
+
+- [**أداة `next-image-to-legacy-image` التلقائية**](/docs/app/building-your-application/upgrading/codemods#next-image-to-legacy-image): تقوم بإعادة تسمية استيرادات `next/image` إلى `next/legacy/image` تلقائياً وبأمان. ستحافظ المكونات الحالية على نفس السلوك.
+- [**أداة `next-image-experimental` التلقائية**](/docs/app/building-your-application/upgrading/codemods#next-image-experimental): تضيف أنماط مضمنة بشكل خطير وتزيل الخصائص غير المستخدمة. سيغير هذا سلوك المكونات الحالية لتتوافق مع الإعدادات الافتراضية الجديدة. لاستخدام هذه الأداة، يجب تشغيل أداة `next-image-to-legacy-image` أولاً.
+
+### مكون `<Link>`
+
+لم يعد مكون [`<Link>`](/docs/app/building-your-application/routing/linking-and-navigating#link-component) يتطلب إضافة علامة `<a>` يدوياً كطفل. تمت إضافة هذا السلوك كخيار تجريبي في [الإصدار 12.2](https://nextjs.org/blog/next-12-2) وأصبح الآن الافتراضي. في Next.js 13، يقوم `<Link>` دائماً بعرض `<a>` ويسمح لك بتمرير الخصائص إلى العلامة الأساسية.
+
+على سبيل المثال:
+
+```jsx
+import Link from 'next/link'
+
+// Next.js 12: يجب تضمين `<a>` وإلا سيتم استبعادها
+<Link href="/about">
+  <a>About</a>
+</Link>
+
+// Next.js 13: يقوم `<Link>` دائماً بعرض `<a>` في الخلفية
+<Link href="/about">
+  About
+</Link>
+```
+
+لترقية روابطك إلى Next.js 13، يمكنك استخدام [أداة `new-link` التلقائية](/docs/app/building-your-application/upgrading/codemods#new-link).
+
+### مكون `<Script>`
+
+تم تحديث سلوك [`next/script`](/docs/app/api-reference/components/script) لدعم كل من `pages` و`app`، ولكن يجب إجراء بعض التغييرات لضمان هجرة سلسة:
+
+- انقل أي نصوص `beforeInteractive` التي أدرجتها سابقاً في `_document.js` إلى ملف التخطيط الجذري (`app/layout.tsx`).
+- لا تعمل استراتيجية `worker` التجريبية بعد في `app` وسيتعين إزالة النصوص المحددة بهذه الاستراتيجية أو تعديلها لاستخدام استراتيجية مختلفة (مثل `lazyOnload`).
+- لن تعمل معالجات `onLoad` و`onReady` و`onError` في مكونات الخادم (Server Components)، لذا تأكد من نقلها إلى [مكون العميل (Client Component)](/docs/app/building-your-application/rendering/server-components) أو إزالتها تماماً.
+
+### تحسين الخطوط
+
+سابقاً، ساعدك Next.js في تحسين الخطوط عن طريق [تضمين CSS للخطوط](/docs/app/building-your-application/optimizing/fonts). يقدم الإصدار 13 وحدة [`next/font`](/docs/app/building-your-application/optimizing/fonts) الجديدة التي تمنحك القدرة على تخصيص تجربة تحميل الخطوط مع ضمان أداء وخصوصية ممتازين. يعمل `next/font` في كل من دليل `pages` و`app`.
+
+بينما لا يزال [تضمين CSS](/docs/app/building-your-application/optimizing/fonts) يعمل في `pages`، إلا أنه لا يعمل في `app`. يجب استخدام [`next/font`](/docs/app/building-your-application/optimizing/fonts) بدلاً من ذلك.
+
+راجع صفحة [تحسين الخطوط](/docs/app/building-your-application/optimizing/fonts) لمعرفة كيفية استخدام `next/font`.
+
+## الهجرة من `pages` إلى `app`
+
+> **🎥 شاهد:** تعلم كيفية تبني موجه التطبيقات تدريجياً → [YouTube (16 دقيقة)](https://www.youtube.com/watch?v=YQMSietiFm0).
+
+قد تكون الانتقال إلى موجه التطبيقات هي المرة الأولى التي تستخدم فيها ميزات React التي يبني عليها Next.js مثل مكونات الخادم (Server Components) وSuspense وغيرها. عند الجمع مع ميزات Next.js الجديدة مثل [الملفات الخاصة](/docs/app/building-your-application/routing#file-conventions) و[التخطيطات](/docs/app/building-your-application/routing/pages-and-layouts#layouts)، تعني الهجرة تعلم مفاهيم ونماذج عقلية وتغييرات سلوكية جديدة.
+
+نوصي بتقليل التعقيد المرتبط بهذه التحديثات عن طريق تقسيم عملية الهجرة إلى خطوات أصغر. تم تصميم دليل `app` عمداً للعمل بالتزامن مع دليل `pages` للسماح بالهجرة صفحة بصفحة بشكل تدريجي.
+
+- يدعم دليل `app` المسارات المتداخلة _والتخطيطات_. [تعلم المزيد](/docs/app/building-your-application/routing).
+- استخدم المجلدات المتداخلة ل[تحديد المسارات](/docs/app/building-your-application/routing/defining-routes) وملف `page.js` الخاص لجعل جزء المسار متاحاً للجمهور. [تعلم المزيد](#step-4-migrating-pages).
+- تُستخدم [الاتفاقيات الخاصة للملفات](/docs/app/building-your-application/routing#file-conventions) لإنشاء واجهة مستخدم لكل جزء من المسار. أكثر الملفات الخاصة شيوعاً هي `page.js` و`layout.js`.
+  - استخدم `page.js` لتعريف واجهة المستخدم الفريدة للمسار.
+  - استخدم `layout.js` لتعريف واجهة المستخدم المشتركة بين عدة مسارات.
+  - يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` للملفات الخاصة.
+- يمكنك وضع ملفات أخرى في دليل `app` مثل المكونات والأنماط والاختبارات وغيرها. [تعلم المزيد](/docs/app/building-your-application/routing).
+- تم استبدال وظائف جلب البيانات مثل `getServerSideProps` و`getStaticProps` بـ [واجهة برمجة تطبيقات جديدة](/docs/app/building-your-application/data-fetching) داخل `app`. تم استبدال `getStaticPaths` بـ [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
+- تم استبدال `pages/_app.js` و`pages/_document.js` بتخطيط جذري واحد `app/layout.js`. [تعلم المزيد](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
+- تم استبدال `pages/_error.js` بملفات خاصة `error.js` أكثر دقة. [تعلم المزيد](/docs/app/building-your-application/routing/error-handling).
+- تم استبدال `pages/404.js` بملف [`not-found.js`](/docs/app/api-reference/file-conventions/not-found).
+- تم استبدال مسارات API `pages/api/*` بملف [`route.js`](/docs/app/api-reference/file-conventions/route) الخاص (Route Handler).
+
+### الخطوة 1: إنشاء دليل `app`
+
+قم بتحديث إلى أحدث إصدار من Next.js (يتطلب الإصدار 13.4 أو أحدث):
+
+```bash
+npm install next@latest
+```
+
+ثم، قم بإنشاء دليل `app` جديد في جذر مشروعك (أو دليل `src/`).
+
+### الخطوة 2: إنشاء تخطيط جذري
+
+قم بإنشاء ملف `app/layout.tsx` جديد داخل دليل `app`. هذا هو [التخطيط الجذري](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) الذي سيتم تطبيقه على جميع المسارات داخل `app`.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  // يجب أن تقبل التخطيطات خاصية children.
+  // سيتم ملؤها بالتخطيطات أو الصفحات المتداخلة
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({
+  // يجب أن تقبل التخطيطات خاصية children.
+  // سيتم ملؤها بالتخطيطات أو الصفحات المتداخلة
+  children,
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+- **يجب** أن يتضمن دليل `app` تخطيطاً جذرياً.
+- يجب أن يحدد التخطيط الجذري علامات `<html>` و`<body>` لأن Next.js لا ينشئها تلقائياً.
+- يحل التخطيط الجذري محل ملفات `pages/_app.tsx` و`pages/_document.tsx`.
+- يمكن استخدام امتدادات الملفات `.js` أو `.jsx` أو `.tsx` لملفات التخطيط.
+
+لإدارة عناصر HTML `<head>`، يمكنك استخدام [دعم SEO المدمج](/docs/app/building-your-application/optimizing/metadata):
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Home',
+  description: 'Welcome to Next.js',
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: 'Home',
+  description: 'Welcome to Next.js',
+}
+```
+
+#### هجرة `_document.js` و`_app.js`
+
+إذا كان لديك ملف `_app` أو `_document` موجود، يمكنك نسخ المحتويات (مثل الأنماط العامة) إلى التخطيط الجذري (`app/layout.tsx`). لن تنطبق الأنماط في `app/layout.tsx` على `pages/*`. يجب الاحتفاظ بـ `_app`/`_document` أثناء الهجرة لمنع تعطل مسارات `pages/*`. بمجرد اكتمال الهجرة، يمكنك حذفها بأمان.
+
+إذا كنت تستخدم أي موفري سياق React، فسيتعين نقلهم إلى [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components).
+
+#### هجرة نمط `getLayout()` إلى التخطيطات (اختياري)
+
+كان Next.js يوصي بإضافة [خاصية إلى مكونات الصفحة](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts) لتحقيق تخطيطات لكل صفحة في دليل `pages`. يمكن استبدال هذا النمط بالدعم الأصلي لـ[التخطيطات المتداخلة](/docs/app/building-your-application/routing/pages-and-layouts#layouts) في دليل `app`.
+
+<details>
+  <summary>راجع مثال قبل وبعد</summary>
+
+**قبل**
+
+```jsx filename="components/DashboardLayout.js"
+export default function DashboardLayout({ children }) {
+  return (
+    <div>
+      <h2>My Dashboard</h2>
+      {children}
+    </div>
+  )
+}
+```
+
+```jsx filename="pages/dashboard/index.js"
+import DashboardLayout from '../components/DashboardLayout'
+
+export default function Page() {
+  return <p>My Page</p>
+}
+
+Page.getLayout = function getLayout(page) {
+  return <DashboardLayout>{page}</DashboardLayout>
+}
+```
+
+**بعد**
+
+- أزل خاصية `Page.getLayout` من `pages/dashboard/index.js` واتبع [خطوات هجرة الصفحات](#step-4-migrating-pages) إلى دليل `app`.
+
+  ```jsx filename="app/dashboard/page.js"
+  export default function Page() {
+    return <p>My Page</p>
+  }
+  ```
+
+- انقل محتويات `DashboardLayout` إلى [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components) جديد للاحتفاظ بسلوك دليل `pages`.
+
+  ```jsx filename="app/dashboard/DashboardLayout.js"
+  'use client' // يجب أن تكون هذه التوجيه في أعلى الملف، قبل أي استيرادات.
+
+  // هذا مكون عميل (Client Component)
+  export default function DashboardLayout({ children }) {
+    return (
+      <div>
+        <h2>My Dashboard</h2>
+        {children}
+      </div>
+    )
+  }
+  ```
+
+- استورد `DashboardLayout` إلى ملف `layout.js` جديد داخل دليل `app`.
+
+  ```jsx filename="app/dashboard/layout.js"
+  import DashboardLayout from './DashboardLayout'
+
+  // هذا مكون خادم (Server Component)
+  export default function Layout({ children }) {
+    return <DashboardLayout>{children}</DashboardLayout>
+  }
+  ```
+
+- يمكنك نقل الأجزاء غير التفاعلية من `DashboardLayout.js` (مكون العميل) إلى `layout.js` (مكون الخادم) تدريجياً لتقليل كمية JavaScript للمكون التي ترسلها إلى العميل.
+
+</details>
+
+### الخطوة 3: هجرة `next/head`
+
+في دليل `pages`، يتم استخدام مكون React `next/head` لإدارة عناصر HTML `<head>` مثل `title` و`meta`. في دليل `app`، تم استبدال `next/head` بـ[دعم SEO المدمج الجديد](/docs/app/building-your-application/optimizing/metadata).
+
+**قبل:**
+
+```tsx filename="pages/index.tsx" switcher
+import Head from 'next/head'
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>My page title</title>
+      </Head>
+    </>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+import Head from 'next/head'
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>My page title</title>
+      </Head>
+    </>
+  )
+}
+```
+
+**بعد:**
+
+```tsx filename="app/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'My Page Title',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+```jsx filename="app/page.js" switcher
+export const metadata = {
+  title: 'My Page Title',
+}
+
+export default function Page() {
+  return '...'
+}
+```
+
+[راجع جميع خيارات البيانات الوصفية (metadata)](/docs/app/api-reference/functions/generate-metadata).
+
+### الخطوة 4: ترحيل الصفحات
+
+- الصفحات في [دليل `app`](/docs/app/building-your-application/routing) هي [مكونات خادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا. هذا يختلف عن دليل `pages` حيث تكون الصفحات [مكونات عميل (Client Components)](/docs/app/building-your-application/rendering/client-components).
+- [جلب البيانات (Data fetching)](/docs/app/building-your-application/data-fetching) قد تغير في `app`. تم استبدال `getServerSideProps` و `getStaticProps` و `getInitialProps` بواجهة برمجة تطبيقات أبسط.
+- يستخدم دليل `app` مجلدات متداخلة لـ[تحديد المسارات (defining routes)](/docs/app/building-your-application/routing/defining-routes) وملف خاص `page.js` لجعل جزء المسار متاحًا للجمهور.
+- | دليل `pages` | دليل `app`       | المسار          |
+  | ----------------- | --------------------- | -------------- |
+  | `index.js`        | `page.js`             | `/`            |
+  | `about.js`        | `about/page.js`       | `/about`       |
+  | `blog/[slug].js`  | `blog/[slug]/page.js` | `/blog/post-1` |
+
+نوصي بتقسيم ترحيل الصفحة إلى خطوتين رئيسيتين:
+
+- الخطوة 1: نقل مكون الصفحة المصدر افتراضيًا إلى مكون عميل جديد.
+- الخطوة 2: استيراد مكون العميل الجديد إلى ملف `page.js` جديد داخل دليل `app`.
+
+> **معلومة مفيدة**: هذا هو أسهل مسار للترحيل لأنه يشبه إلى حد كبير سلوك دليل `pages`.
+
+**الخطوة 1: إنشاء مكون عميل جديد**
+
+- أنشئ ملفًا منفصلًا جديدًا داخل دليل `app` (مثل `app/home-page.tsx` أو ما شابه) يقوم بتصدير مكون عميل. لتحديد مكونات العميل، أضف توجيه `'use client'` في أعلى الملف (قبل أي استيرادات).
+  - على غرار موجه الصفحات (Pages Router)، هناك [خطوة تحسين](/docs/app/building-your-application/rendering/client-components#full-page-load) لتقديم مسبق لمكونات العميل إلى HTML ثابت عند تحميل الصفحة الأولي.
+- انقل مكون الصفحة المصدر افتراضيًا من `pages/index.js` إلى `app/home-page.tsx`.
+
+```tsx filename="app/home-page.tsx" switcher
+'use client'
+
+// هذا مكون عميل (مشابه للمكونات في دليل `pages`)
+// يتلقى البيانات كخصائص، وله إمكانية الوصول إلى الحالة والتأثيرات، ويتم
+// تقديمه مسبقًا على الخادم أثناء تحميل الصفحة الأولي.
+export default function HomePage({ recentPosts }) {
+  return (
+    <div>
+      {recentPosts.map((post) => (
+        <div key={post.id}>{post.title}</div>
+      ))}
+    </div>
+  )
+}
+```
+
+```jsx filename="app/home-page.js" switcher
+'use client'
+
+// هذا مكون عميل. يتلقى البيانات كخصائص و
+// لديه إمكانية الوصول إلى الحالة والتأثيرات تمامًا مثل مكونات الصفحة
+// في دليل `pages`.
+export default function HomePage({ recentPosts }) {
+  return (
+    <div>
+      {recentPosts.map((post) => (
+        <div key={post.id}>{post.title}</div>
+      ))}
+    </div>
+  )
+}
+```
+
+**الخطوة 2: إنشاء صفحة جديدة**
+
+- أنشئ ملف `app/page.tsx` جديدًا داخل دليل `app`. هذا مكون خادم افتراضيًا.
+- استورد مكون العميل `home-page.tsx` إلى الصفحة.
+- إذا كنت تقوم بجلب البيانات في `pages/index.js`، انقل منطق جلب البيانات مباشرة إلى مكون الخادم باستخدام [واجهات برمجة تطبيقات جلب البيانات الجديدة](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating). راجع [دليل ترقية جلب البيانات](#step-6-migrating-data-fetching-methods) لمزيد من التفاصيل.
+
+  ```tsx filename="app/page.tsx" switcher
+  // استورد مكون العميل الخاص بك
+  import HomePage from './home-page'
+
+  async function getPosts() {
+    const res = await fetch('https://...')
+    const posts = await res.json()
+    return posts
+  }
+
+  export default async function Page() {
+    // جلب البيانات مباشرة في مكون خادم
+    const recentPosts = await getPosts()
+    // إعادة توجيه البيانات التي تم جلبها إلى مكون العميل الخاص بك
+    return <HomePage recentPosts={recentPosts} />
+  }
+  ```
+
+  ```jsx filename="app/page.js" switcher
+  // استورد مكون العميل الخاص بك
+  import HomePage from './home-page'
+
+  async function getPosts() {
+    const res = await fetch('https://...')
+    const posts = await res.json()
+    return posts
+  }
+
+  export default async function Page() {
+    // جلب البيانات مباشرة في مكون خادم
+    const recentPosts = await getPosts()
+    // إعادة توجيه البيانات التي تم جلبها إلى مكون العميل الخاص بك
+    return <HomePage recentPosts={recentPosts} />
+  }
+  ```
+
+- إذا كانت صفحتك السابقة تستخدم `useRouter`، فستحتاج إلى التحديث إلى خطافات التوجيه الجديدة. [تعلم المزيد](/docs/app/api-reference/functions/use-router).
+- ابدأ خادم التطوير الخاص بك وقم بزيارة [`http://localhost:3000`](http://localhost:3000). يجب أن ترى مسار الفهرس الحالي الخاص بك، الذي يتم تقديمه الآن عبر دليل التطبيق.
+
+### الخطوة 5: ترحيل خطافات التوجيه
+
+تمت إضافة موجه جديد لدعم السلوك الجديد في دليل `app`.
+
+في `app`، يجب عليك استخدام الخطافات الثلاثة الجديدة المستوردة من `next/navigation`: [`useRouter()`](/docs/app/api-reference/functions/use-router)، [`usePathname()`](/docs/app/api-reference/functions/use-pathname)، و [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params).
+
+- خطاف `useRouter` الجديد مستورد من `next/navigation` وله سلوك مختلف عن خطاف `useRouter` في `pages` المستورد من `next/router`.
+  - [خطاف `useRouter` المستورد من `next/router`](/docs/pages/api-reference/functions/use-router) غير مدعوم في دليل `app` ولكن يمكن الاستمرار في استخدامه في دليل `pages`.
+- خطاف `useRouter` الجديد لا يُرجع سلسلة `pathname`. استخدم خطاف `usePathname` المنفصل بدلاً من ذلك.
+- خطاف `useRouter` الجديد لا يُرجع كائن `query`. استخدم خطاف `useSearchParams` المنفصل بدلاً من ذلك.
+- يمكنك استخدام `useSearchParams` و `usePathname` معًا للاستماع إلى تغييرات الصفحة. راجع قسم [أحداث الموجه (Router Events)](/docs/app/api-reference/functions/use-router#router-events) لمزيد من التفاصيل.
+- هذه الخطافات الجديدة مدعومة فقط في مكونات العميل. لا يمكن استخدامها في مكونات الخادم.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // ...
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // ...
+}
+```
+
+بالإضافة إلى ذلك، يحتوي خطاف `useRouter` الجديد على التغييرات التالية:
+
+- تمت إزالة `isFallback` لأنه تم [استبدال](#replacing-fallback) `fallback`.
+- تمت إزالة قيم `locale` و `locales` و `defaultLocales` و `domainLocales` لأن ميزات i18n المضمنة في Next.js لم تعد ضرورية في دليل `app`. [تعلم المزيد حول i18n](/docs/app/building-your-application/routing/internationalization).
+- تمت إزالة `basePath`. البديل لن يكون جزءًا من `useRouter`. لم يتم تنفيذه بعد.
+- تمت إزالة `asPath` لأنه تمت إزالة مفهوم `as` من الموجه الجديد.
+- تمت إزالة `isReady` لأنه لم يعد ضروريًا. أثناء [التقديم الثابت (static rendering)](/docs/app/building-your-application/rendering/server-components#static-rendering-default)، أي مكون يستخدم خطاف [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) سيتخطى خطوة التقديم المسبق وسيتم تقديمه على العميل أثناء التشغيل.
+
+[عرض مرجع واجهة برمجة تطبيقات `useRouter()`](/docs/app/api-reference/functions/use-router).
+
+### الخطوة 6: ترحيل طرق جلب البيانات
+
+يستخدم دليل `pages` `getServerSideProps` و `getStaticProps` لجلب البيانات للصفحات. داخل دليل `app`، تم استبدال وظائف جلب البيانات السابقة هذه بـ[واجهة برمجة تطبيقات أبسط](/docs/app/building-your-application/data-fetching) مبنية على `fetch()` و مكونات خادم React غير المتزامنة.
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا لمدة 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا لمدة 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+#### التقديم من جانب الخادم (`getServerSideProps`)
+
+في دليل `pages`، يُستخدم `getServerSideProps` لجلب البيانات من الخادم وإعادة توجيه الخصائص إلى مكون React المصدر افتراضيًا في الملف. يتم تقديم HTML الأولي للصفحة من الخادم، يليه "ترطيب" الصفحة في المتصفح (جعلها تفاعلية).
+
+```jsx filename="pages/dashboard.js"
+// دليل `pages`
+
+export async function getServerSideProps() {
+  const res = await fetch(`https://...`)
+  const projects = await res.json()
+
+  return { props: { projects } }
+}
+
+export default function Dashboard({ projects }) {
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>{project.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+في دليل `app`، يمكننا وضع جلب البيانات داخل مكونات React باستخدام [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components). هذا يسمح لنا بإرسال كمية أقل من JavaScript إلى العميل، مع الحفاظ على HTML المقدم من الخادم.
+
+عن طريق تعيين خيار `cache` إلى `no-store`، يمكننا الإشارة إلى أن البيانات التي تم جلبها يجب [ألا يتم تخزينها مؤقتًا أبدًا](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating). هذا مشابه لـ `getServerSideProps` في دليل `pages`.
+
+```tsx filename="app/dashboard/page.tsx" switcher
+// دليل `app`
+
+// يمكن تسمية هذه الوظيفة بأي شيء
+async function getProjects() {
+  const res = await fetch(`https://...`, { cache: 'no-store' })
+  const projects = await res.json()
+
+  return projects
+}
+
+export default async function Dashboard() {
+  const projects = await getProjects()
+
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>{project.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+// دليل `app`
+
+// يمكن تسمية هذه الوظيفة بأي شيء
+async function getProjects() {
+  const res = await fetch(`https://...`, { cache: 'no-store' })
+  const projects = await res.json()
+
+  return projects
+}
+
+export default async function Dashboard() {
+  const projects = await getProjects()
+
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>{project.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+#### الوصول إلى كائن الطلب
+
+في دليل `pages`، يمكنك استرداد البيانات المستندة إلى الطلب بناءً على واجهة برمجة تطبيقات HTTP لـ Node.js.
+
+على سبيل المثال، يمكنك استرداد كائن `req` من `getServerSideProps` واستخدامه لاسترداد ملفات تعريف الارتباط (cookies) ورؤوس (headers) الطلب.
+
+```jsx filename="pages/index.js"
+// دليل `pages`
+
+export async function getServerSideProps({ req, query }) {
+  const authHeader = req.getHeaders()['authorization'];
+  const theme = req.cookies['theme'];
+
+  return { props: { ... }}
+}
+
+export default function Page(props) {
+  return ...
+}
+```
+
+يكشف دليل `app` عن وظائف جديدة للقراءة فقط لاسترداد بيانات الطلب:
+
+- [`headers()`](/docs/app/api-reference/functions/headers): مبنية على واجهة برمجة تطبيقات رؤوس الويب، ويمكن استخدامها داخل [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) لاسترداد رؤوس الطلب.
+- [`cookies()`](/docs/app/api-reference/functions/cookies): مبنية على واجهة برمجة تطبيقات ملفات تعريف الارتباط للويب، ويمكن استخدامها داخل [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) لاسترداد ملفات تعريف الارتباط.
+
+```tsx filename="app/page.tsx" switcher
+// دليل `app`
+import { cookies, headers } from 'next/headers'
+
+async function getData() {
+  const authHeader = headers().get('authorization')
+
+  return '...'
+}
+
+export default async function Page() {
+  // يمكنك استخدام `cookies()` أو `headers()` داخل مكونات الخادم
+  // مباشرة أو في وظيفة جلب البيانات الخاصة بك
+  const theme = cookies().get('theme')
+  const data = await getData()
+  return '...'
+}
+```
+
+```jsx filename="app/page.js" switcher
+// دليل `app`
+import { cookies, headers } from 'next/headers'
+
+async function getData() {
+  const authHeader = headers().get('authorization')
+
+  return '...'
+}
+
+export default async function Page() {
+  // يمكنك استخدام `cookies()` أو `headers()` داخل مكونات الخادم
+  // مباشرة أو في وظيفة جلب البيانات الخاصة بك
+  const theme = cookies().get('theme')
+  const data = await getData()
+  return '...'
+}
+```
+
+#### توليد الموقع الثابت (`getStaticProps`)
+
+في دليل `pages`، تُستخدم وظيفة `getStaticProps` لتقديم صفحة مسبقًا أثناء البناء. يمكن استخدام هذه الوظيفة لجلب البيانات من واجهة برمجة تطبيقات خارجية أو مباشرة من قاعدة بيانات، وإعادة توجيه هذه البيانات إلى الصفحة بأكملها أثناء إنشائها.
+
+```jsx filename="pages/index.js"
+// دليل `pages`
+
+export async function getStaticProps() {
+  const res = await fetch(`https://...`)
+  const projects = await res.json()
+
+  return { props: { projects } }
+}
+
+export default function Index({ projects }) {
+  return projects.map((project) => <div>{project.name}</div>)
+}
+```
+
+في دليل `app`، سيكون جلب البيانات باستخدام [`fetch()`](/docs/app/api-reference/functions/fetch) افتراضيًا إلى `cache: 'force-cache'`، والذي سيخزن بيانات الطلب مؤقتًا حتى يتم إبطالها يدويًا. هذا مشابه لـ `getStaticProps` في دليل `pages`.
+
+```jsx filename="app/page.js"
+// دليل `app`
+
+// يمكن تسمية هذه الوظيفة بأي شيء
+async function getProjects() {
+  const res = await fetch(`https://...`)
+  const projects = await res.json()
+
+  return projects
+}
+
+export default async function Index() {
+  const projects = await getProjects()
+
+  return projects.map((project) => <div>{project.name}</div>)
+}
+```
+
+#### المسارات الديناميكية (`getStaticPaths`)
+
+في دليل `pages`، تُستخدم الدالة `getStaticPaths` لتحديد المسارات الديناميكية التي يجب تقديمها مسبقًا وقت البناء.
+
+```jsx filename="pages/posts/[id].js"
+// دليل `pages`
+import PostLayout from '@/components/post-layout'
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  return { props: { post } }
+}
+
+export default function Post({ post }) {
+  return <PostLayout post={post} />
+}
+```
+
+في دليل `app`، يتم استبدال `getStaticPaths` بـ [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
+
+تتصرف [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) بشكل مشابه لـ `getStaticPaths`، ولكن لديها واجهة برمجة تطبيقات مبسطة لإعادة معلمات المسار ويمكن استخدامها داخل [التخطيطات](/docs/app/building-your-application/routing/pages-and-layouts). الشكل الذي تُعيده `generateStaticParams` هو مصفوفة من المقاطع بدلاً من مصفوفة من كائنات `param` متداخلة أو سلسلة من المسارات المحلولة.
+
+```jsx filename="app/posts/[id]/page.js"
+// دليل `app`
+import PostLayout from '@/components/post-layout'
+
+export async function generateStaticParams() {
+  return [{ id: '1' }, { id: '2' }]
+}
+
+async function getPost(params) {
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  return post
+}
+
+export default async function Post({ params }) {
+  const post = await getPost(params)
+
+  return <PostLayout post={post} />
+}
+```
+
+استخدام الاسم `generateStaticParams` أكثر ملاءمة من `getStaticPaths` للنموذج الجديد في دليل `app`. تم استبدال البادئة `get` بـ `generate` الأكثر وصفية، والتي تناسب بشكل أفضل الآن بعد أن لم تعد `getStaticProps` و `getServerSideProps` ضرورية. تم استبدال اللاحقة `Paths` بـ `Params`، وهي أكثر ملاءمة للتوجيه المتداخل مع مقاطع ديناميكية متعددة.
+
+---
+
+#### استبدال `fallback`
+
+في دليل `pages`، تُستخدم الخاصية `fallback` التي تُرجعها `getStaticPaths` لتحديد سلوك الصفحة التي لم يتم تقديمها مسبقًا وقت البناء. يمكن تعيين هذه الخاصية إلى `true` لعرض صفحة احتياطية أثناء إنشاء الصفحة، أو `false` لعرض صفحة 404، أو `blocking` لإنشاء الصفحة وقت الطلب.
+
+```jsx filename="pages/posts/[id].js"
+// دليل `pages`
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking'
+  };
+}
+
+export async function getStaticProps({ params }) {
+  ...
+}
+
+export default function Post({ post }) {
+  return ...
+}
+```
+
+في دليل `app`، تتحكم خاصية [`config.dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) في كيفية التعامل مع المعلمات خارج [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params):
+
+- **`true`**: (الافتراضي) يتم إنشاء المقاطع الديناميكية غير المضمنة في `generateStaticParams` عند الطلب.
+- **`false`**: ستعيد المقاطع الديناميكية غير المضمنة في `generateStaticParams` خطأ 404.
+
+هذا يحل محل خيار `fallback: true | false | 'blocking'` الخاص بـ `getStaticPaths` في دليل `pages`. لم يتم تضمين خيار `fallback: 'blocking'` في `dynamicParams` لأن الفرق بين `'blocking'` و `true` ضئيل مع البث.
+
+```jsx filename="app/posts/[id]/page.js"
+// دليل `app`
+
+export const dynamicParams = true;
+
+export async function generateStaticParams() {
+  return [...]
+}
+
+async function getPost(params) {
+  ...
+}
+
+export default async function Post({ params }) {
+  const post = await getPost(params);
+
+  return ...
+}
+```
+
+عند تعيين [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) إلى `true` (الافتراضي)، عند طلب مقطع مسار لم يتم إنشاؤه، سيتم تقديمه من الخادم وتخزينه مؤقتًا.
+
+#### التجديد الثابت التدريجي (`getStaticProps` مع `revalidate`)
+
+في دليل `pages`، تسمح لك الدالة `getStaticProps` بإضافة حقل `revalidate` لإعادة إنشاء الصفحة تلقائيًا بعد فترة زمنية معينة.
+
+```jsx filename="pages/index.js"
+// دليل `pages`
+
+export async function getStaticProps() {
+  const res = await fetch(`https://.../posts`)
+  const posts = await res.json()
+
+  return {
+    props: { posts },
+    revalidate: 60,
+  }
+}
+
+export default function Index({ posts }) {
+  return (
+    <Layout>
+      <PostList posts={posts} />
+    </Layout>
+  )
+}
+```
+
+في دليل `app`، يمكن لجلب البيانات باستخدام [`fetch()`](/docs/app/api-reference/functions/fetch) استخدام `revalidate`، والذي سيخزن الطلب مؤقتًا للعدد المحدد من الثواني.
+
+```jsx filename="app/page.js"
+// دليل `app`
+
+async function getPosts() {
+  const res = await fetch(`https://.../posts`, { next: { revalidate: 60 } })
+  const data = await res.json()
+
+  return data.posts
+}
+
+export default async function PostList() {
+  const posts = await getPosts()
+
+  return posts.map((post) => <div>{post.name}</div>)
+}
+```
+
+#### مسارات API
+
+تستمر مسارات API في العمل في دليل `pages/api` دون أي تغييرات. ومع ذلك، تم استبدالها بـ [Route Handlers](/docs/app/building-your-application/routing/route-handlers) في دليل `app`.
+
+تسمح Route Handlers بإنشاء معالجات طلب مخصصة لمسار معين باستخدام واجهات برمجة تطبيقات الويب [Request](https://developer.mozilla.org/docs/Web/API/Request) و [Response](https://developer.mozilla.org/docs/Web/API/Response).
+
+```ts filename="app/api/route.ts" switcher
+export async function GET(request: Request) {}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {}
+```
+
+> **معلومة جيدة**: إذا كنت تستخدم مسارات API سابقًا لاستدعاء API خارجي من العميل، يمكنك الآن استخدام [مكونات الخادم](/docs/app/building-your-application/rendering/server-components) بدلاً من ذلك لجلب البيانات بأمان. تعلم المزيد حول [جلب البيانات](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating).
+
+### الخطوة 7: التنسيق
+
+في دليل `pages`، تقتصر أنماط CSS العامة على `pages/_app.js` فقط. مع دليل `app`، تم رفع هذا القيد. يمكن إضافة الأنماط العامة إلى أي تخطيط أو صفحة أو مكون.
+
+- [وحدات CSS](/docs/app/building-your-application/styling/css-modules)
+- [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css)
+- [الأنماط العامة](/docs/app/building-your-application/styling/css-modules#global-styles)
+- [CSS-in-JS](/docs/app/building-your-application/styling/css-in-js)
+- [أوراق الأنماط الخارجية](/docs/app/building-your-application/styling/css-modules#external-stylesheets)
+- [Sass](/docs/app/building-your-application/styling/sass)
+
+#### Tailwind CSS
+
+إذا كنت تستخدم Tailwind CSS، فستحتاج إلى إضافة دليل `app` إلى ملف `tailwind.config.js` الخاص بك:
+
+```js filename="tailwind.config.js"
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}', // <-- أضف هذا السطر
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+}
+```
+
+ستحتاج أيضًا إلى استيراد أنماطك العامة في ملف `app/layout.js`:
+
+```jsx filename="app/layout.js"
+import '../styles/globals.css'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+تعلم المزيد حول [التنسيق باستخدام Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css)
+
+## Codemods
+
+يوفر Next.js تحويلات Codemod للمساعدة في ترقية قاعدة التعليمات البرمجية عند إيقاف ميزة ما. راجع [Codemods](/docs/app/building-your-application/upgrading/codemods) لمزيد من المعلومات.
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/03-version-14.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/03-version-14.mdx
new file mode 100644
index 00000000..0fb39dfc
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/03-version-14.mdx
@@ -0,0 +1,38 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:44.780Z
+title: الإصدار 14
+description: ترقية تطبيق Next.js من الإصدار 13 إلى 14.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+## الترقية من الإصدار 13 إلى 14
+
+لترقية Next.js إلى الإصدار 14، قم بتنفيذ الأمر التالي باستخدام مدير الحزم المفضل لديك:
+
+```bash filename="Terminal"
+npm i next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
+```bash filename="Terminal"
+yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
+```bash filename="Terminal"
+pnpm up next react react-dom eslint-config-next --latest
+```
+
+```bash filename="Terminal"
+bun add next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
+> **معلومة مفيدة:** إذا كنت تستخدم TypeScript، تأكد من ترقية `@types/react` و `@types/react-dom` إلى أحدث إصداراتهم.
+
+### ملخص الإصدار 14
+
+- تم رفع الحد الأدنى لإصدار Node.js من 16.14 إلى 18.17، حيث أن الإصدار 16.x قد وصل إلى نهاية دعمه.
+- تم إزالة أمر `next export` لصالح خيار `output: 'export'` في الإعدادات. يرجى الاطلاع على [الوثائق](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) لمزيد من المعلومات.
+- تم تغيير مسار استيراد `ImageResponse` من `next/server` إلى `next/og`. يتوفر [أداة تحويل تلقائي](/docs/app/building-your-application/upgrading/codemods#next-og-import) لإعادة تسمية عمليات الاستيراد الخاصة بك بشكل آلي وآمن.
+- تمت إزالة حزمة `@next/font` بالكامل لصالح `next/font` المدمج. يتوفر [أداة تحويل تلقائي](/docs/app/building-your-application/upgrading/codemods#built-in-next-font) لإعادة تسمية عمليات الاستيراد الخاصة بك بشكل آلي وآمن.
+- تمت إزالة هدف WASM لـ `next-swc`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/04-from-vite.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/04-from-vite.mdx
new file mode 100644
index 00000000..8209fec6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/04-from-vite.mdx
@@ -0,0 +1,558 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:38:16.086Z
+title: الانتقال من Vite
+description: تعلم كيفية نقل تطبيق React الحالي من Vite إلى Next.js.
+---
+
+سيساعدك هذا الدليل في نقل تطبيق Vite موجود إلى Next.js.
+
+## لماذا التبديل؟
+
+هناك عدة أسباب قد تدفعك للتبديل من Vite إلى Next.js:
+
+### بطء وقت تحميل الصفحة الأولي
+
+إذا قمت ببناء تطبيقك باستخدام [إضافة Vite الافتراضية لـ React](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)، فإن تطبيقك هو تطبيق يعمل فقط على جانب العميل. التطبيقات التي تعمل فقط على جانب العميل، والمعروفة أيضًا باسم تطبيقات الصفحة الواحدة (SPAs)، غالبًا ما تعاني من بطء في وقت تحميل الصفحة الأولي. يحدث هذا بسبب عدة أسباب:
+
+1. يحتاج المتصفح إلى انتظار تحميل وتشغيل كود React وحزمة التطبيق بالكامل قبل أن يتمكن الكود من إرسال طلبات لتحميل بعض البيانات.
+2. ينمو كود التطبيق مع كل ميزة جديدة وإضافة تبعية إضافية.
+
+### عدم وجود تقسيم تلقائي للكود
+
+يمكن إدارة مشكلة بطء أوقات التحميل السابقة إلى حد ما باستخدام تقسيم الكود. ومع ذلك، إذا حاولت تقسيم الكود يدويًا، فغالبًا ما ستجعل الأداء أسوأ. من السهل إدخال شلالات شبكة عن غير قصد عند تقسيم الكود يدويًا. يوفر Next.js تقسيمًا تلقائيًا للكود مدمجًا في جهاز التوجيه الخاص به.
+
+### شلالات الشبكة
+
+يحدث سبب شائع لضعف الأداء عندما تقوم التطبيقات بعمل طلبات متتابعة بين العميل والخادم لجلب البيانات. أحد الأنماط الشائعة لجلب البيانات في تطبيق SPA هو عرض عنصر نائب في البداية، ثم جلب البيانات بعد تحميل المكون. لسوء الحظ، هذا يعني أن المكون الفرعي الذي يجلب البيانات لا يمكنه البدء في الجلب حتى ينتهي المكون الأصلي من تحميل بياناته الخاصة.
+
+بينما يتم دعم جلب البيانات على العميل باستخدام Next.js، فإنه يمنحك أيضًا خيار نقل جلب البيانات إلى الخادم، مما يمكنه القضاء على شلالات العميل-الخادم.
+
+### حالات تحميل سريعة ومقصودة
+
+مع الدعم المدمج [للبث عبر React Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)، يمكنك أن تكون أكثر تحديدًا بشأن الأجزاء التي تريد تحميلها أولاً وبأي ترتيب دون إدخال شلالات شبكة.
+
+هذا يتيح لك بناء صفحات يتم تحميلها بشكل أسرع والقضاء على [تحولات التخطيط](https://vercel.com/blog/how-core-web-vitals-affect-seo).
+
+### اختر استراتيجية جلب البيانات
+
+اعتمادًا على احتياجاتك، يسمح لك Next.js باختيار استراتيجية جلب البيانات على أساس كل صفحة ومكون. يمكنك أن تقرر الجلب في وقت البناء، أو في وقت الطلب على الخادم، أو على العميل. على سبيل المثال، يمكنك جلب البيانات من نظام إدارة المحتوى الخاص بك وعرض مشاركات المدونة الخاصة بك في وقت البناء، والتي يمكن بعد ذلك تخزينها مؤقتًا بكفاءة على CDN.
+
+### Middleware
+
+[Next.js Middleware](/docs/app/building-your-application/routing/middleware) يسمح لك بتشغيل الكود على الخادم قبل اكتمال الطلب. هذا مفيد بشكل خاص لتجنب ظهور محتوى غير مصادق عليه عندما يزور المستخدم صفحة تتطلب مصادقة عن طريق توجيه المستخدم إلى صفحة تسجيل الدخول. يكون Middleware مفيدًا أيضًا للتجربة [والتدويل](/docs/app/building-your-application/routing/internationalization).
+
+### تحسينات مدمجة
+
+غالبًا ما يكون لـ [الصور](/docs/app/building-your-application/optimizing/images)، [والخطوط](/docs/app/building-your-application/optimizing/fonts)، و[نصوص الطرف الثالث](/docs/app/building-your-application/optimizing/scripts) تأثير كبير على أداء التطبيق. يأتي Next.js مع مكونات مدمجة تقوم بتحسينها تلقائيًا لك.
+
+## خطوات النقل
+
+هدفنا من هذا النقل هو الحصول على تطبيق Next.js يعمل في أسرع وقت ممكن، بحيث يمكنك بعد ذلك تبني ميزات Next.js تدريجيًا. في البداية، سنحافظ عليه كتطبيق يعمل فقط على جانب العميل (SPA) دون نقل جهاز التوجيه الحالي الخاص بك. هذا يساعد في تقليل فرص مواجهة مشكلات أثناء عملية النقل ويقلل من تعارضات الدمج.
+
+### الخطوة 1: تثبيت تبعية Next.js
+
+أول شيء تحتاج إلى فعله هو تثبيت `next` كتبعية:
+
+```bash filename="Terminal"
+npm install next@latest
+```
+
+### الخطوة 2: إنشاء ملف تكوين Next.js
+
+قم بإنشاء ملف `next.config.mjs` في جذر مشروعك. سيحتوي هذا الملف على [خيارات تكوين Next.js](/docs/app/api-reference/next-config-js).
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // يخرج تطبيق صفحة واحدة (SPA).
+  distDir: './dist', // يغير دليل إخراج البناء إلى `./dist/`.
+}
+
+export default nextConfig
+```
+
+> **جيد أن تعرف:** يمكنك استخدام إما `.js` أو `.mjs` لملف تكوين Next.js الخاص بك.
+
+### الخطوة 3: تحديث تكوين TypeScript
+
+إذا كنت تستخدم TypeScript، فأنت بحاجة إلى تحديث ملف `tsconfig.json` الخاص بك بالتغييرات التالية لجعله متوافقًا مع Next.js. إذا كنت لا تستخدم TypeScript، يمكنك تخطي هذه الخطوة.
+
+1. أزل [مرجع المشروع](https://www.typescriptlang.org/tsconfig#references) إلى `tsconfig.node.json`
+2. أضف `./dist/types/**/*.ts` و `./next-env.d.ts` إلى [مصفوفة `include`](https://www.typescriptlang.org/tsconfig#include)
+3. أضف `./node_modules` إلى [مصفوفة `exclude`](https://www.typescriptlang.org/tsconfig#exclude)
+4. أضف `{ "name": "next" }` إلى [مصفوفة `plugins` في `compilerOptions`](https://www.typescriptlang.org/tsconfig#plugins): `"plugins": [{ "name": "next" }]`
+5. اضبط [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) على `true`: `"esModuleInterop": true`
+6. اضبط [`jsx`](https://www.typescriptlang.org/tsconfig#jsx) على `preserve`: `"jsx": "preserve"`
+7. اضبط [`allowJs`](https://www.typescriptlang.org/tsconfig#allowJs) على `true`: `"allowJs": true`
+8. اضبط [`forceConsistentCasingInFileNames`](https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames) على `true`: `"forceConsistentCasingInFileNames": true`
+9. اضبط [`incremental`](https://www.typescriptlang.org/tsconfig#incremental) على `true`: `"incremental": true`
+
+إليك مثال على ملف `tsconfig.json` يعمل مع هذه التغييرات:
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts"],
+  "exclude": ["./node_modules"]
+}
+```
+
+يمكنك العثور على مزيد من المعلومات حول تكوين TypeScript في [وثائق Next.js](/docs/app/building-your-application/configuring/typescript#typescript-plugin).
+
+### الخطوة 4: إنشاء تخطيط الجذر
+
+يجب أن يتضمن تطبيق [جهاز توجيه التطبيق](/docs/app) في Next.js ملف [تخطيط جذر](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)، وهو [مكون خادم React](/docs/app/building-your-application/rendering/server-components) سيلف كل الصفحات في تطبيقك. يتم تعريف هذا الملف في المستوى الأعلى من دليل `app`.
+
+أقرب ما يعادل ملف تخطيط الجذر في تطبيق Vite هو ملف [`index.html`](https://vitejs.dev/guide/#index-html-and-project-root)، الذي يحتوي على علامات `<html>` و `<head>` و `<body>` الخاصة بك.
+
+في هذه الخطوة، ستحول ملف `index.html` إلى ملف تخطيط جذر:
+
+1. قم بإنشاء دليل `app` جديد في دليل `src` الخاص بك.
+2. قم بإنشاء ملف `layout.tsx` جديد داخل دليل `app`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return null
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return null
+}
+```
+
+> **جيد أن تعرف**: يمكن استخدام امتدادات `.js` أو `.jsx` أو `.tsx` لملفات التخطيط.
+
+3. انسخ محتوى ملف `index.html` الخاص بك إلى مكون `<RootLayout>` الذي تم إنشاؤه مسبقًا مع استبدال علامات `body.div#root` و `body.script` بـ `<div id="root">{children}</div>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+4. يتضمن Next.js بالفعل بشكل افتراضي علامات [meta charset](https://developer.mozilla.org/docs/Web/HTML/Element/meta#charset) و [meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)، لذا يمكنك إزالتها بأمان من `<head>` الخاص بك:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+5. يتم إضافة أي [ملفات بيانات وصفية](/docs/app/building-your-application/optimizing/metadata#file-based-metadata) مثل `favicon.ico` أو `icon.png` أو `robots.txt` تلقائيًا إلى علامة `<head>` للتطبيق طالما قمت بوضعها في المستوى الأعلى من دليل `app`. بعد نقل [جميع الملفات المدعومة](/docs/app/building-your-application/optimizing/metadata#file-based-metadata) إلى دليل `app`، يمكنك حذف علامات `<link>` الخاصة بها بأمان:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+6. أخيرًا، يمكن لـ Next.js إدارة علامات `<head>` الأخيرة الخاصة بك باستخدام [واجهة برمجة تطبيقات البيانات الوصفية](/docs/app/building-your-application/optimizing/metadata). انقل معلومات البيانات الوصفية النهائية الخاصة بك إلى كائن [`metadata` مُصدَّر](/docs/app/api-reference/functions/generate-metadata#metadata-object):
+
+```tsx filename="app/layout.tsx" switcher
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'My App',
+  description: 'My App is a...',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: 'My App',
+  description: 'My App is a...',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+مع التغييرات المذكورة أعلاه، انتقلت من الإعلان عن كل شيء في `index.html` الخاص بك إلى استخدام النهج القائم على الاتفاقيات في Next.js المدمج في الإطار ([واجهة برمجة تطبيقات البيانات الوصفية](/docs/app/building-your-application/optimizing/metadata)). يتيح لك هذا النهج تحسين تحسين محركات البحث وقابلية مشاركة صفحاتك على الويب بسهولة أكبر.
+
+### الخطوة 5: إنشاء صفحة نقطة الدخول
+
+في Next.js، يمكنك تحديد نقطة دخول لتطبيقك عن طريق إنشاء ملف `page.tsx`. أقرب ما يعادله في Vite هو ملف `main.tsx`. في هذه الخطوة، ستقوم بإعداد نقطة الدخول لتطبيقك.
+
+1. **قم بإنشاء دليل `[[...slug]]` داخل دليل `app` الخاص بك.**
+
+نظرًا لأننا في هذا الدليل نهدف أولاً إلى إعداد Next.js كتطبيق صفحة واحدة (SPA)، تحتاج إلى أن تكون نقطة دخول الصفحة قادرة على التقاط جميع المسارات المحتملة لتطبيقك. لهذا، قم بإنشاء دليل جديد `[[...slug]]` داخل دليل `app`.
+
+هذا الدليل هو ما يسمى 
+[بقطاع مسار اختياري شامل](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments).
+يستخدم Next.js جهاز توجيه يعتمد على نظام الملفات حيث 
+[تستخدم الأدلة لتحديد المسارات](/docs/app/building-your-application/routing/defining-routes#creating-routes).
+سيضمن هذا الدليل الخاص أن جميع مسارات تطبيقك سيتم توجيهها إلى ملف `page.tsx` الموجود بداخله.
+
+2. **قم بإنشاء ملف جديد `page.tsx` داخل دليل `app/[[...slug]]` بالمحتوى التالي:**
+
+```tsx filename="app/[[...slug]]/page.tsx" switcher
+import '../../index.css'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return '...' // سنقوم بتحديث هذا لاحقًا
+}
+```
+
+```jsx filename="app/[[...slug]]/page.js" switcher
+import '../../index.css'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return '...' // سنقوم بتحديث هذا لاحقًا
+}
+```
+
+> **معلومة مفيدة**: يمكن استخدام امتدادات `.js` أو `.jsx` أو `.tsx` لملفات الصفحات.
+
+هذا الملف هو [مكون خادم (Server Component)](/docs/app/building-your-application/rendering/server-components). عند تشغيل `next build`، يتم تقديم الملف مسبقًا إلى أصل ثابت. لا يتطلب أي كود ديناميكي.
+
+يستورد هذا الملف CSS العام الخاص بنا ويخبر [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) أننا سننشئ مسارًا واحدًا فقط، وهو مسار الفهرس `/`.
+
+الآن، لننقل بقية تطبيق Vite الذي سيعمل على جانب العميل فقط.
+
+```tsx filename="app/[[...slug]]/client.tsx" switcher
+'use client'
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export function ClientOnly() {
+  return <App />
+}
+```
+
+```jsx filename="app/[[...slug]]/client.js" switcher
+'use client'
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export function ClientOnly() {
+  return <App />
+}
+```
+
+هذا الملف هو [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components)، يتم تعريفه باستخدام التوجيه `'use client'`. لا يزال يتم تقديم مكونات العميل مسبقًا إلى HTML على الخادم قبل إرسالها إلى العميل.
+
+نظرًا لأننا نريد بدء تطبيق يعمل على جانب العميل فقط، يمكننا تكوين Next.js لتعطيل التقديم المسبق من مكون `App` فما دون.
+
+```tsx
+const App = dynamic(() => import('../../App'), { ssr: false })
+```
+
+الآن، قم بتحديث صفحة نقطة الدخول لاستخدام المكون الجديد:
+
+```tsx filename="app/[[...slug]]/page.tsx" switcher
+import '../../index.css'
+import { ClientOnly } from './client'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return <ClientOnly />
+}
+```
+
+```jsx filename="app/[[...slug]]/page.js" switcher
+import '../../index.css'
+import { ClientOnly } from './client'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return <ClientOnly />
+}
+```
+
+### الخطوة 6: تحديث استيراد الصور الثابتة
+
+يتعامل Next.js مع استيراد الصور الثابتة بشكل مختلف قليلاً عن Vite. مع Vite، يؤدي استيراد ملف صورة إلى إرجاع عنوان URL العام كسلسلة نصية:
+
+```tsx filename="App.tsx"
+import image from './img.png' // `image` ستكون '/assets/img.2d8efhg.png' في الإنتاج
+
+export default function App() {
+  return <img src={image} />
+}
+```
+
+مع Next.js، يُرجع استيراد الصور الثابتة كائنًا. يمكن بعد ذلك استخدام هذا الكائن مباشرة مع مكون Next.js [`<Image>`](/docs/app/api-reference/components/image)، أو يمكنك استخدام خاصية `src` للكائن مع وسم `<img>` الحالي.
+
+يتمتع مكون `<Image>` بمزايا إضافية مثل 
+[تحسين الصور تلقائيًا](/docs/app/building-your-application/optimizing/images). يضبط مكون `<Image>` تلقائيًا سمات `width` و `height` لوسم `<img>` الناتج بناءً على أبعاد الصورة. هذا يمنع حدوث تغييرات في التخطيط عند تحميل الصورة. ومع ذلك، يمكن أن يسبب هذا مشاكل إذا كان تطبيقك يحتوي على صور بأبعاد غير متساوية دون ضبط الآخر على `auto`. عندما لا يتم ضبطه على `auto`، سيعتمد البعد على قيمة سمة البعد لوسم `<img>`، مما قد يجعل الصورة تظهر مشوهة.
+
+سيؤدي الاحتفاظ بوسم `<img>` إلى تقليل كمية التغييرات في تطبيقك ومنع المشاكل المذكورة أعلاه. يمكنك بعد ذلك الانتقال لاحقًا إلى مكون `<Image>` للاستفادة من تحسين الصور عن طريق [تكوين محمل (loader)](/docs/app/building-your-application/optimizing/images#loaders)، أو الانتقال إلى خادم Next.js الافتراضي الذي يحتوي على تحسين تلقائي للصور.
+
+1. **قم بتحويل مسارات الاستيراد المطلقة للصور المستوردة من `/public` إلى استيراد نسبي:**
+
+```tsx
+// قبل
+import logo from '/logo.png'
+
+// بعد
+import logo from '../public/logo.png'
+```
+
+2. **قم بتمرير خاصية `src` للصورة بدلاً من كائن الصورة بالكامل إلى وسم `<img>`:**
+
+```tsx
+// قبل
+<img src={logo} />
+
+// بعد
+<img src={logo.src} />
+```
+
+بدلاً من ذلك، يمكنك الرجوع إلى عنوان URL العام لأصل الصورة بناءً على اسم الملف. على سبيل المثال، سيتم تقديم الصورة `public/logo.png` على `/logo.png` لتطبيقك، والذي سيكون قيمة `src`.
+
+> **تحذير:** إذا كنت تستخدم TypeScript، فقد تواجه أخطاء نوع عند الوصول إلى خاصية `src`. يمكنك تجاهلها بأمان الآن. سيتم إصلاحها بنهاية هذا الدليل.
+
+### الخطوة 7: ترحيل متغيرات البيئة
+
+يدعم Next.js متغيرات البيئة `.env` 
+[المشابهة لـ Vite](/docs/app/building-your-application/configuring/environment-variables).
+الفرق الرئيسي هو البادئة المستخدمة لعرض متغيرات البيئة على جانب العميل.
+
+- قم بتغيير جميع متغيرات البيئة ذات البادئة `VITE_` إلى `NEXT_PUBLIC_`.
+
+يعرض Vite بعض متغيرات البيئة المدمجة على كائن `import.meta.env` الخاص الذي لا يدعمه Next.js. تحتاج إلى تحديث استخدامها كما يلي:
+
+- `import.meta.env.MODE` ⇒ `process.env.NODE_ENV`
+- `import.meta.env.PROD` ⇒ `process.env.NODE_ENV === 'production'`
+- `import.meta.env.DEV` ⇒ `process.env.NODE_ENV !== 'production'`
+- `import.meta.env.SSR` ⇒ `typeof window !== 'undefined'`
+
+لا يوفر Next.js أيضًا متغير بيئة `BASE_URL` مدمجًا. ومع ذلك، لا يزال بإمكانك تكوين واحد إذا كنت بحاجة إليه:
+
+1. **أضف ما يلي إلى ملف `.env` الخاص بك:**
+
+```bash filename=".env"
+# ...
+NEXT_PUBLIC_BASE_PATH="/some-base-path"
+```
+
+2. **قم بتعيين [`basePath`](/docs/app/api-reference/next-config-js/basePath) إلى `process.env.NEXT_PUBLIC_BASE_PATH` في ملف `next.config.mjs`:**
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // يُخرج تطبيق صفحة واحدة (SPA).
+  distDir: './dist', // يغير دليل إخراج البناء إلى `./dist/`.
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH, // يضبط المسار الأساسي على `/some-base-path`.
+}
+
+export default nextConfig
+```
+
+3. **قم بتحديث استخدامات `import.meta.env.BASE_URL` إلى `process.env.NEXT_PUBLIC_BASE_PATH`**
+
+### الخطوة 8: تحديث الأوامر في `package.json`
+
+يجب أن تكون الآن قادرًا على تشغيل تطبيقك لاختبار ما إذا كنت قد نجحت في ترحيله إلى Next.js. ولكن قبل ذلك، تحتاج إلى تحديث `scripts` في `package.json` بأوامر Next.js ذات الصلة، وإضافة `.next` و `next-env.d.ts` إلى `.gitignore`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+```
+
+```txt filename=".gitignore"
+# ...
+.next
+next-env.d.ts
+dist
+```
+
+الآن قم بتشغيل `npm run dev`، وافتح [`http://localhost:3000`](http://localhost:3000). يجب أن ترى تطبيقك يعمل الآن على Next.js.
+
+> **مثال:** تحقق من [طلب السحب هذا](https://github.com/inngest/vite-to-nextjs/pull/1) لمثال عمل لتطبيق Vite تم ترحيله إلى Next.js.
+
+### الخطوة 9: التنظيف
+
+يمكنك الآن تنظيف قاعدة التعليمات البرمجية من آثار Vite ذات الصلة:
+
+- احذف `main.tsx`
+- احذف `index.html`
+- احذف `vite-env.d.ts`
+- احذف `tsconfig.node.json`
+- احذف `vite.config.ts`
+- أزل تبعيات Vite
+
+## الخطوات التالية
+
+إذا سار كل شيء وفقًا للخطة، فلديك الآن تطبيق Next.js يعمل كتطبيق صفحة واحدة. ومع ذلك، لم تستفد بعد من معظم مزايا Next.js، ولكن يمكنك الآن البدء في إجراء تغييرات تدريجية لجني جميع الفوائد. إليك ما قد ترغب في القيام به بعد ذلك:
+
+- قم بالانتقال من React Router إلى [موجه تطبيق Next.js](/docs/app/building-your-application/routing) للحصول على:
+  - تقسيم الشفرة تلقائيًا
+  - [عرض الخادم المتدفق (Streaming Server-Rendering)](/docs/app/building-your-application/routing/loading-ui-and-streaming)
+  - [مكونات خادم React (React Server Components)](/docs/app/building-your-application/rendering/server-components)
+- [قم بتحسين الصور باستخدام مكون `<Image>`](/docs/app/building-your-application/optimizing/images)
+- [قم بتحسين الخطوط باستخدام `next/font`](/docs/app/building-your-application/optimizing/fonts)
+- [قم بتحسين البرامج النصية لجهات خارجية باستخدام مكون `<Script>`](/docs/app/building-your-application/optimizing/scripts)
+- [قم بتحديث تكوين ESLint لدعم قواعد Next.js](/docs/app/building-your-application/configuring/eslint)
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/05-from-create-react-app.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/05-from-create-react-app.mdx
new file mode 100644
index 00000000..802694d0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/05-from-create-react-app.mdx
@@ -0,0 +1,550 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:37:49.448Z
+title: الانتقال من Create React App
+description: تعلم كيفية نقل تطبيق React الحالي من Create React App إلى Next.js.
+---
+
+سيساعدك هذا الدليل في نقل موقع Create React App الحالي إلى Next.js.
+
+## لماذا التبديل؟
+
+هناك عدة أسباب قد تدفعك للتبديل من Create React App إلى Next.js:
+
+### بطء وقت تحميل الصفحة الأولي
+
+يستخدم Create React App React من جانب العميل فقط. التطبيقات التي تعمل من جانب العميل فقط، والمعروفة باسم تطبيقات الصفحة الواحدة (SPAs)، غالبًا ما تعاني من بطء في وقت تحميل الصفحة الأولي. يحدث هذا لعدة أسباب:
+
+1. يحتاج المتصفح إلى انتظار تحميل وتشغيل كود React وحزمة التطبيق بالكامل قبل أن يتمكن الكود من إرسال طلبات لتحميل البيانات.
+2. ينمو كود التطبيق مع كل ميزة واعتماد جديد تضيفه.
+
+### عدم وجود تقسيم تلقائي للكود
+
+يمكن إدارة مشكلة بطء أوقات التحميل السابقة إلى حد ما باستخدام تقسيم الكود. ومع ذلك، إذا حاولت إجراء تقسيم الكود يدويًا، فقد يؤدي ذلك في كثير من الأحيان إلى تفاقم الأداء. من السهل إدخال شلالات الشبكة عن طريق الخطأ عند تقسيم الكود يدويًا. يوفر Next.js تقسيم الكود التلقائي المدمج في جهاز التوجيه الخاص به.
+
+### شلالات الشبكة
+
+يحدث سبب شائع لضعف الأداء عندما تقوم التطبيقات بعمل طلبات متتابعة بين العميل والخادم لجلب البيانات. أحد الأنماط الشائع لجلب البيانات في تطبيق SPA هو عرض عنصر نائب أولاً، ثم جلب البيانات بعد تحميل المكون. لسوء الحظ، هذا يعني أن المكون الفرعي الذي يجلب البيانات لا يمكنه البدء في الجلب حتى ينتهي المكون الأصلي من تحميل بياناته الخاصة.
+
+بينما يتم دعم جلب البيانات من العميل باستخدام Next.js، فإنه يعطيك أيضًا خيار نقل جلب البيانات إلى الخادم، مما يمكن أن يلغي شلالات العميل-الخادم.
+
+### حالات التحميل السريعة والمقصودة
+
+مع الدعم المدمج لـ [البث عبر React Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)، يمكنك أن تكون أكثر تحديدًا لأي أجزاء من واجهة المستخدم تريد تحميلها أولاً وبأي ترتيب دون إدخال شلالات الشبكة.
+
+هذا يمكّنك من بناء صفحات أسرع في التحميل وتجنب [تحولات التخطيط](https://vercel.com/blog/how-core-web-vitals-affect-seo).
+
+### اختيار استراتيجية جلب البيانات
+
+حسب احتياجاتك، يسمح لك Next.js باختيار استراتيجية جلب البيانات على أساس الصفحة والمكون. يمكنك أن تقرر الجلب في وقت البناء، أو في وقت الطلب على الخادم، أو على العميل. على سبيل المثال، يمكنك جلب البيانات من نظام إدارة المحتوى (CMS) وعرض مشاركات المدونة في وقت البناء، والتي يمكن بعد ذلك تخزينها بكفاءة على شبكة CDN.
+
+### Middleware
+
+[Next.js Middleware](/docs/app/building-your-application/routing/middleware) يسمح لك بتشغيل الكود على الخادم قبل اكتمال الطلب. هذا مفيد بشكل خاص لتجنب ظهور محتوى غير مصادق عليه عندما يزور المستخدم صفحة تتطلب مصادقة عن طريق توجيه المستخدم إلى صفحة تسجيل الدخول. كما أن Middleware مفيد للتجارب و[التدويل](/docs/app/building-your-application/routing/internationalization).
+
+### تحسينات مدمجة
+
+غالبًا ما يكون لـ [الصور](/docs/app/building-your-application/optimizing/images)، [الخطوط](/docs/app/building-your-application/optimizing/fonts)، و[نصوص الطرف الثالث](/docs/app/building-your-application/optimizing/scripts) تأثير كبير على أداء التطبيق. يأتي Next.js مع مكونات مدمجة تقوم بتحسينها تلقائيًا لك.
+
+## خطوات النقل
+
+هدفنا من هذا النقل هو الحصول على تطبيق Next.js يعمل في أسرع وقت ممكن، بحيث يمكنك بعد ذلك تبني ميزات Next.js تدريجيًا. في البداية، سنحافظ عليه كتطبيق يعمل من جانب العميل فقط (SPA) دون نقل جهاز التوجيه الحالي الخاص بك. هذا يساعد في تقليل فرص مواجهة مشكلات أثناء عملية النقل ويقلل من تعارضات الدمج.
+
+### الخطوة 1: تثبيت تبعية Next.js
+
+أول شيء تحتاج إلى فعله هو تثبيت `next` كتبعية:
+
+```bash filename="Terminal"
+npm install next@latest
+```
+
+### الخطوة 2: إنشاء ملف تكوين Next.js
+
+قم بإنشاء ملف `next.config.mjs` في جذر مشروعك. سيحتوي هذا الملف على [خيارات تكوين Next.js](/docs/app/api-reference/next-config-js).
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // يخرج تطبيق صفحة واحدة (SPA).
+  distDir: './dist', // يغير دليل إخراج البناء إلى `./dist/`.
+}
+
+export default nextConfig
+```
+
+### الخطوة 3: تحديث تكوين TypeScript
+
+إذا كنت تستخدم TypeScript، فأنت بحاجة إلى تحديث ملف `tsconfig.json` الخاص بك بالتغييرات التالية لجعله متوافقًا مع Next.js:
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "./dist/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
+```
+
+يمكنك العثور على مزيد من المعلومات حول تكوين TypeScript في [وثائق Next.js](/docs/app/building-your-application/configuring/typescript#typescript-plugin).
+
+### الخطوة 4: إنشاء التخطيط الجذري
+
+يجب أن يتضمن تطبيق [موجه التطبيق (App Router)](/docs/app) في Next.js ملف [تخطيط جذري](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)، وهو [مكون خادم React](/docs/app/building-your-application/rendering/server-components) سيضم جميع الصفحات في تطبيقك. يتم تعريف هذا الملف في المستوى الأعلى من دليل `app`.
+
+أقرب ما يعادل ملف التخطيط الجذري في تطبيق CRA هو ملف `index.html`، الذي يحتوي على علامات `<html>`، `<head>`، و `<body>`.
+
+في هذه الخطوة، ستقوم بتحويل ملف `index.html` الخاص بك إلى ملف تخطيط جذري:
+
+1. قم بإنشاء دليل `app` جديد في دليل `src` الخاص بك.
+2. قم بإنشاء ملف `layout.tsx` جديد داخل دليل `app`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return null
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return null
+}
+```
+
+> **جيد أن تعرف**: يمكن استخدام الامتدادات `.js`، `.jsx`، أو `.tsx` لملفات التخطيط.
+
+انسخ محتوى ملف `index.html` الخاص بك إلى مكون `<RootLayout>` الذي تم إنشاؤه مسبقًا مع استبدال `body.div#root` و `body.script` بعلامة `<div id="root">{children}</div>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>React App</title>
+        <meta name="description" content="Web site created..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>React App</title>
+        <meta name="description" content="Web site created..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+> **جيد أن تعرف**: سنتجاهل [ملف manifest](/docs/app/api-reference/file-conventions/metadata)، والأيقونات الإضافية بخلاف favicon، و[تكوين الاختبار](/docs/app/building-your-application/testing)، ولكن إذا كانت هذه متطلبات، فإن Next.js يدعم هذه الخيارات أيضًا.
+
+### الخطوة 5: البيانات الوصفية
+
+يتضمن Next.js بالفعل بشكل افتراضي علامات [meta charset](https://developer.mozilla.org/docs/Web/HTML/Element/meta#charset) و [meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)، لذا يمكنك إزالتها بأمان من `<head>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <title>React App</title>
+        <meta name="description" content="Web site created..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <title>React App</title>
+        <meta name="description" content="Web site created..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+يتم إضافة أي [ملفات بيانات وصفية](/docs/app/building-your-application/optimizing/metadata#file-based-metadata) مثل `favicon.ico`، `icon.png`، `robots.txt` تلقائيًا إلى علامة `<head>` للتطبيق طالما أنك وضعتها في المستوى الأعلى من دليل `app`. بعد نقل [جميع الملفات المدعومة](/docs/app/building-your-application/optimizing/metadata#file-based-metadata) إلى دليل `app`، يمكنك حذف علامات `<link>` الخاصة بها بأمان:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <title>React App</title>
+        <meta name="description" content="Web site created..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>React App</title>
+        <meta name="description" content="Web site created..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+أخيرًا، يمكن لـ Next.js إدارة علامات `<head>` الأخيرة الخاصة بك باستخدام [واجهة برمجة تطبيقات البيانات الوصفية (Metadata API)](/docs/app/building-your-application/optimizing/metadata). انقل معلومات البيانات الوصفية النهائية الخاصة بك إلى كائن [`metadata` مُصدر](/docs/app/api-reference/functions/generate-metadata#metadata-object):
+
+```tsx filename="app/layout.tsx" switcher
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'React App',
+  description: 'Web site created with Next.js.',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: 'React App',
+  description: 'Web site created with Next.js.',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+مع التغييرات أعلاه، انتقلت من الإعلان عن كل شيء في ملف `index.html` إلى استخدام النهج القائم على الاتفاقية المدمج في Next.js ([واجهة برمجة تطبيقات البيانات الوصفية](/docs/app/building-your-application/optimizing/metadata)). يمكّنك هذا النهج من تحسين تحسين محركات البحث (SEO) وإمكانية مشاركة صفحاتك على الويب بسهولة أكبر.
+
+### الخطوة 6: الأنماط
+
+مثل Create React App، يحتوي Next.js على دعم مدمج لـ [وحدات CSS](/docs/app/building-your-application/styling/css-modules).
+
+إذا كنت تستخدم ملف CSS عام، فقم باستيراده إلى ملف `app/layout.tsx`:
+
+```tsx filename="app/layout.tsx" switcher
+import '../index.css'
+
+// ...
+```
+
+إذا كنت تستخدم Tailwind، فستحتاج إلى تثبيت `postcss` و `autoprefixer`:
+
+```bash filename="Terminal"
+npm install postcss autoprefixer
+```
+
+ثم، قم بإنشاء ملف `postcss.config.js` في جذر مشروعك:
+
+```js filename="postcss.config.js"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+```
+
+### الخطوة 7: إنشاء صفحة نقطة الدخول
+
+في Next.js، تقوم بتعريف نقطة دخول لتطبيقك عن طريق إنشاء ملف `page.tsx`. أقرب ما يعادل هذا الملف في CRA هو ملف `src/index.tsx` الخاص بك. في هذه الخطوة، ستقوم بإعداد نقطة دخول التطبيق.
+
+**قم بإنشاء دليل `[[...slug]]` في دليل `app` الخاص بك.**
+
+نظرًا لأن هذا الدليل يهدف أولاً إلى إعداد Next.js كتطبيق SPA (تطبيق صفحة واحدة)، فأنت بحاجة إلى أن تكون نقطة دخول الصفحة قادرة على التقاط جميع المسارات الممكنة لتطبيقك. لهذا، قم بإنشاء دليل `[[...slug]]` جديد في دليل `app` الخاص بك.
+
+هذا الدليل هو ما يسمى [بقطاع المسار الاختياري الشامل](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments). يستخدم Next.js جهاز توجيه قائم على نظام الملفات حيث [تستخدم الأدلة لتحديد المسارات](/docs/app/building-your-application/routing/defining-routes#creating-routes). سيضمن هذا الدليل الخاص أن جميع مسارات تطبيقك سيتم توجيهها إلى ملف `page.tsx` الموجود فيه.
+
+**قم بإنشاء ملف `page.tsx` جديد داخل دليل `app/[[...slug]]` بالمحتوى التالي:**
+
+```tsx filename="app/[[...slug]]/page.tsx" switcher
+import '../../index.css'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return '...' // سنقوم بتحديث هذا
+}
+```
+
+```jsx filename="app/[[...slug]]/page.js" switcher
+import '../../index.css'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return '...' // سنقوم بتحديث هذا
+}
+```
+
+هذا الملف هو [مكون خادم](/docs/app/building-your-application/rendering/server-components). عند تشغيل `next build`، يتم تقديم الملف مسبقًا إلى أصل ثابت. لا يتطلب أي كود ديناميكي.
+
+يستورد هذا الملف CSS العام الخاص بنا ويخبر [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) أننا سنقوم فقط بإنشاء مسار واحد، وهو مسار الفهرس عند `/`.
+
+الآن، لننقل بقية تطبيق CRA الخاص بنا والذي سيعمل من جانب العميل فقط.
+
+```tsx filename="app/[[...slug]]/client.tsx" switcher
+'use client'
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export function ClientOnly() {
+  return <App />
+}
+```
+
+```jsx filename="app/[[...slug]]/client.js" switcher
+'use client'
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export function ClientOnly() {
+  return <App />
+}
+```
+
+هذا الملف هو [مكون عميل](/docs/app/building-your-application/rendering/client-components)، معرف بتوجيه `'use client'`. لا يزال يتم تقديم مكونات العميل مسبقًا إلى HTML على الخادم قبل إرسالها إلى العميل.
+
+نظرًا لأننا نريد بدء تطبيق يعمل من جانب العميل فقط، يمكننا تكوين Next.js لتعطيل التقديم المسبق من مكون `App` وما بعده.
+
+```tsx
+const App = dynamic(() => import('../../App'), { ssr: false })
+```
+
+الآن، قم بتحديث صفحة نقطة الدخول الخاصة بك لاستخدام المكون الجديد:
+
+```tsx filename="app/[[...slug]]/page.tsx" switcher
+import '../../index.css'
+import { ClientOnly } from './client'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return <ClientOnly />
+}
+```
+
+```jsx filename="app/[[...slug]]/page.js" switcher
+import '../../index.css'
+import { ClientOnly } from './client'
+
+export function generateStaticParams() {
+  return [{ slug: [''] }]
+}
+
+export default function Page() {
+  return <ClientOnly />
+}
+```
+
+### الخطوة 8: تحديث استيراد الصور الثابتة
+
+يتعامل Next.js مع استيراد الصور الثابتة بشكل مختلف قليلاً عن CRA. مع CRA، استيراد ملف صورة سيعيد عنوان URL العام كسلسلة نصية:
+
+```tsx filename="App.tsx"
+import image from './img.png'
+
+export default function App() {
+  return <img src={image} />
+}
+```
+
+مع Next.js، استيراد الصور الثابتة يعيد كائنًا. يمكن بعد ذلك استخدام هذا الكائن مباشرة مع مكون [`<Image>` في Next.js](/docs/app/api-reference/components/image)، أو يمكنك استخدام خاصية `src` من الكائن مع وسم `<img>` الحالي لديك.
+
+يتمتع مكون `<Image>` بفوائد إضافية مثل [تحسين الصور تلقائيًا](/docs/app/building-your-application/optimizing/images). يضبط مكون `<Image>` تلقائيًا سمات `width` و `height` لوسم `<img>` الناتج بناءً على أبعاد الصورة. هذا يمنع حدوث تغييرات في التنسيق عند تحميل الصورة. ومع ذلك، قد يسبب هذا مشاكل إذا كان تطبيقك يحتوي على صور بأحد أبعادها فقط مع تنسيق دون الآخر مع تنسيق إلى `auto`. عندما لا يتم تنسيق البعد إلى `auto`، سيعتمد البعد على قيمة سمة البعد في وسم `<img>`، مما قد يجعل الصورة تظهر مشوهة.
+
+سيؤدي الاحتفاظ بوسم `<img>` إلى تقليل عدد التغييرات في تطبيقك ومنع المشاكل المذكورة أعلاه. يمكنك بعد ذلك الانتقال لاحقًا إلى مكون `<Image>` للاستفادة من تحسين الصور عن طريق [تكوين محمل](/docs/app/building-your-application/optimizing/images#loaders)، أو الانتقال إلى خادم Next.js الافتراضي الذي يحتوي على تحسين تلقائي للصور.
+
+**تحويل مسارات الاستيراد المطلقة للصور المستوردة من `/public` إلى استيرادات نسبية:**
+
+```tsx
+// قبل
+import logo from '/logo.png'
+
+// بعد
+import logo from '../public/logo.png'
+```
+
+**تمرير خاصية `src` للصورة بدلاً من كائن الصورة كاملًا إلى وسم `<img>`:**
+
+```tsx
+// قبل
+<img src={logo} />
+
+// بعد
+<img src={logo.src} />
+```
+
+بدلاً من ذلك، يمكنك الإشارة إلى عنوان URL العام لأصول الصورة بناءً على اسم الملف. على سبيل المثال، `public/logo.png` سيخدم الصورة على `/logo.png` لتطبيقك، والذي سيكون قيمة `src`.
+
+> **تحذير:** إذا كنت تستخدم TypeScript، قد تواجه أخطاء نوع عند الوصول إلى خاصية `src`. يمكنك تجاهل هذه الأخطاء بأمان الآن. سيتم إصلاحها بنهاية هذا الدليل.
+
+### الخطوة 9: ترحيل متغيرات البيئة
+
+يدعم Next.js متغيرات البيئة [`.env`](/docs/app/building-your-application/configuring/environment-variables) بشكل مشابه لـ CRA.
+
+الفرق الرئيسي هو البادئة المستخدمة لعرض متغيرات البيئة على جانب العميل. قم بتغيير جميع متغيرات البيئة ذات البادئة `REACT_APP_` إلى `NEXT_PUBLIC_`.
+
+### الخطوة 10: تحديث الأوامر في `package.json`
+
+يجب أن تكون الآن قادرًا على تشغيل تطبيقك لاختبار ما إذا كنت قد نجحت في ترحيله إلى Next.js. ولكن قبل ذلك، تحتاج إلى تحديث `scripts` في `package.json` بأوامر Next.js ذات الصلة، وإضافة `.next` و `next-env.d.ts` و `dist` إلى ملف `.gitignore`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+```
+
+```txt filename=".gitignore"
+# ...
+.next
+next-env.d.ts
+dist
+```
+
+الآن قم بتشغيل `npm run dev`، وافتح [`http://localhost:3000`](http://localhost:3000). يجب أن ترى تطبيقك يعمل الآن على Next.js.
+
+### الخطوة 11: التنظيف
+
+يمكنك الآن تنظيف قاعدة التعليمات البرمجية من آثار Create React App:
+
+- احذف `src/index.tsx`
+- احذف `public/index.html`
+- احذف إعداد `reportWebVitals`
+- أزل تبعيات CRA (`react-scripts`)
+
+## توافق الحزم
+
+يستخدم كل من Create React App وNext.js بشكل افتراضي webpack للحزم.
+
+عند ترحيل تطبيق CRA إلى Next.js، قد يكون لديك تكوين مخصص لـ webpack تريد ترحيله. يدعم Next.js توفير [تكوين مخصص لـ webpack](/docs/app/api-reference/next-config-js/webpack).
+
+علاوة على ذلك، يدعم Next.js [Turbopack](/docs/app/api-reference/next-config-js/turbo) عبر `next dev --turbo` لتحسين أداء التطوير المحلي. يدعم Turbopack بعض [محملات webpack](/docs/app/api-reference/next-config-js/turbo) أيضًا من أجل التوافق والتبني التدريجي.
+
+## الخطوات التالية
+
+إذا سار كل شيء وفقًا للخطة، لديك الآن تطبيق Next.js يعمل كتطبيق أحادي الصفحة. ومع ذلك، لم تستفد بعد من معظم مزايا Next.js، ولكن يمكنك الآن البدء في إجراء تغييرات تدريجية لتحقيق جميع الفوائد. إليك ما قد ترغب في القيام به بعد ذلك:
+
+- الانتقال من React Router إلى [موجه تطبيق Next.js](/docs/app/building-your-application/routing) للحصول على:
+  - تقسيم الشفرة تلقائيًا
+  - [عرض من جانب الخادم مع دفق](/docs/app/building-your-application/routing/loading-ui-and-streaming)
+  - [مكونات الخادم في React](/docs/app/building-your-application/rendering/server-components)
+- [تحسين الصور مع مكون `<Image>`](/docs/app/building-your-application/optimizing/images)
+- [تحسين الخطوط مع `next/font`](/docs/app/building-your-application/optimizing/fonts)
+- [تحسين نصوص الطرف الثالث مع مكون `<Script>`](/docs/app/building-your-application/optimizing/scripts)
+- [تحديث تكوين ESLint لدعم قواعد Next.js](/docs/app/building-your-application/configuring/eslint)
+
+> **معلومة مفيدة:** استخدام تصدير ثابت [لا يدعم حاليًا](https://github.com/vercel/next.js/issues/54393) استخدام الخطاف `useParams`.
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/index.mdx
new file mode 100644
index 00000000..109a7ae3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/11-upgrading/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:10.660Z
+title: دليل الترقية
+nav_title: الترقية
+description: تعلم كيفية الترقية إلى أحدث إصدارات Next.js.
+---
+
+قم بترقية تطبيقك إلى إصدارات أحدث من Next.js أو قم بالهجرة من موجه الصفحات (Pages Router) إلى موجه التطبيقات (App Router).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/01-building-your-application/index.mdx b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/index.mdx
new file mode 100644
index 00000000..ce8e3482
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/01-building-your-application/index.mdx
@@ -0,0 +1,24 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:16.577Z
+title: بناء تطبيقك
+description: تعلم كيفية استخدام ميزات Next.js لبناء تطبيقك.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+يوفر Next.js اللبنات الأساسية لإنشاء تطبيقات ويب كاملة المكدس ومرنة. توضح الأدلة في قسم **بناء تطبيقك** كيفية استخدام هذه الميزات وكيفية تخصيص سلوك تطبيقك.
+
+تم تنظيم الأقسام والصفحات بالتسلسل، من الأساسي إلى المتقدم، حتى تتمكن من متابعتها خطوة بخطوة عند بناء تطبيق Next.js الخاص بك. ومع ذلك، يمكنك قراءتها بأي ترتيب أو التخطي إلى الصفحات التي تنطبق على حالتك الاستخدامية.
+
+<AppOnly>
+
+إذا كنت جديدًا على Next.js، نوصي بالبدء بأقسام [التوجيه (Routing)](/docs/app/building-your-application/routing)، [التصيير (Rendering)](/docs/app/building-your-application/rendering)، [جلب البيانات (Data Fetching)](/docs/app/building-your-application/data-fetching) و[التنسيق (Styling)](/docs/app/building-your-application/styling)، حيث تقدم المفاهيم الأساسية لـ Next.js والويب لمساعدتك على البدء. ثم يمكنك التعمق أكثر في الأقسام الأخرى مثل [التحسين (Optimizing)](/docs/app/building-your-application/optimizing) و [التكوين (Configuring)](/docs/app/building-your-application/configuring). أخيرًا، عندما تكون جاهزًا، تحقق من أقسام [النشر (Deploying)](/docs/app/building-your-application/deploying) و [الترقية (Upgrading)](/docs/app/building-your-application/upgrading).
+
+</AppOnly>
+
+<PagesOnly>
+
+إذا كنت جديدًا على Next.js، نوصي بالبدء بأقسام [التوجيه (Routing)](/docs/pages/building-your-application/routing)، [التصيير (Rendering)](/docs/pages/building-your-application/rendering)، [جلب البيانات (Data Fetching)](/docs/pages/building-your-application/data-fetching) و[التنسيق (Styling)](/docs/pages/building-your-application/styling)، حيث تقدم المفاهيم الأساسية لـ Next.js والويب لمساعدتك على البدء. ثم يمكنك التعمق أكثر في الأقسام الأخرى مثل [التحسين (Optimizing)](/docs/pages/building-your-application/optimizing) و [التكوين (Configuring)](/docs/pages/building-your-application/configuring). أخيرًا، عندما تكون جاهزًا، تحقق من أقسام [النشر (Deploying)](/docs/pages/building-your-application/deploying) و [الترقية (Upgrading)](/docs/pages/building-your-application/upgrading).
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/font.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/font.mdx
new file mode 100644
index 00000000..8adc7dc5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/font.mdx
@@ -0,0 +1,356 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:36:37.905Z
+title: وحدة الخطوط
+nav_title: الخطوط
+description: تحسين تحميل خطوط الويب باستخدام محملي `next/font` المدمجين.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+سيساعدك مرجع API هذا على فهم كيفية استخدام [`next/font/google`](/docs/app/building-your-application/optimizing/fonts#google-fonts) و [`next/font/local`](/docs/app/building-your-application/optimizing/fonts#local-fonts). لميزات الاستخدام، يرجى الاطلاع على صفحة [تحسين الخطوط](/docs/app/building-your-application/optimizing/fonts).
+
+### وسائط دالة الخط
+
+للاستخدام، راجع [خطوط جوجل](/docs/app/building-your-application/optimizing/fonts#google-fonts) و [الخطوط المحلية](/docs/app/building-your-application/optimizing/fonts#local-fonts).
+
+| المفتاح                                         | `font/google`       | `font/local`        | النوع                       | مطلوب          |
+| ------------------------------------------- | ------------------- | ------------------- | -------------------------- | ----------------- |
+| [`src`](#src)                               | <Cross size={18} /> | <Check size={18} /> | سلسلة أو مصفوفة من الكائنات | نعم               |
+| [`weight`](#weight)                         | <Check size={18} /> | <Check size={18} /> | سلسلة أو مصفوفة            | مطلوب/اختياري |
+| [`style`](#style)                           | <Check size={18} /> | <Check size={18} /> | سلسلة أو مصفوفة            | -                 |
+| [`subsets`](#subsets)                       | <Check size={18} /> | <Cross size={18} /> | مصفوفة من السلاسل           | -                 |
+| [`axes`](#axes)                             | <Check size={18} /> | <Cross size={18} /> | مصفوفة من السلاسل           | -                 |
+| [`display`](#display)                       | <Check size={18} /> | <Check size={18} /> | سلسلة                     | -                 |
+| [`preload`](#preload)                       | <Check size={18} /> | <Check size={18} /> | قيمة منطقية                | -                 |
+| [`fallback`](#fallback)                     | <Check size={18} /> | <Check size={18} /> | مصفوفة من السلاسل           | -                 |
+| [`adjustFontFallback`](#adjustfontfallback) | <Check size={18} /> | <Check size={18} /> | قيمة منطقية أو سلسلة          | -                 |
+| [`variable`](#variable)                     | <Check size={18} /> | <Check size={18} /> | سلسلة                     | -                 |
+| [`declarations`](#declarations)             | <Cross size={18} /> | <Check size={18} /> | مصفوفة من الكائنات           | -                 |
+
+### `src`
+
+مسار ملف الخط كسلسلة أو مصفوفة من الكائنات (من نوع `Array<{path: string, weight?: string, style?: string}>`) بالنسبة إلى الدليل الذي يتم فيه استدعاء دالة محمل الخط.
+
+يستخدم في `next/font/local`
+
+- مطلوب
+
+أمثلة:
+
+- `src:'./fonts/my-font.woff2'` حيث يتم وضع `my-font.woff2` في دليل باسم `fonts` داخل دليل `app`
+- `src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]`
+- إذا تم استدعاء دالة محمل الخط في `app/page.tsx` باستخدام `src:'../styles/fonts/my-font.ttf'`، فإن `my-font.ttf` يوضع في `styles/fonts` في جذر المشروع
+
+### `weight`
+
+[`وزن`](https://fonts.google.com/knowledge/glossary/weight) الخط مع الاحتمالات التالية:
+
+- سلسلة بقيم محتملة للأوزان المتاحة للخط المحدد أو نطاق من القيم إذا كان خطًا [متغيرًا](https://fonts.google.com/variablefonts)
+- مصفوفة من قيم الوزن إذا كان الخط ليس [خط جوجل متغير](https://fonts.google.com/variablefonts). ينطبق على `next/font/google` فقط.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- مطلوب إذا كان الخط المستخدم **ليس** [متغيرًا](https://fonts.google.com/variablefonts)
+
+أمثلة:
+
+- `weight: '400'`: سلسلة لقيمة وزن واحدة - لخط [`Inter`](https://fonts.google.com/specimen/Inter?query=inter)، القيم المحتملة هي `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'` أو `'variable'` حيث `'variable'` هي القيمة الافتراضية)
+- `weight: '100 900'`: سلسلة للنطاق بين `100` و `900` لخط متغير
+- `weight: ['100','400','900']`: مصفوفة من 3 قيم محتملة لخط غير متغير
+
+### `style`
+
+[`نمط`](https://developer.mozilla.org/docs/Web/CSS/font-style) الخط مع الاحتمالات التالية:
+
+- سلسلة [قيمة](https://developer.mozilla.org/docs/Web/CSS/font-style#values) بقيمة افتراضية `'normal'`
+- مصفوفة من قيم النمط إذا كان الخط ليس [خط جوجل متغير](https://fonts.google.com/variablefonts). ينطبق على `next/font/google` فقط.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `style: 'italic'`: سلسلة - يمكن أن تكون `normal` أو `italic` لـ `next/font/google`
+- `style: 'oblique'`: سلسلة - يمكن أن تأخذ أي قيمة لـ `next/font/local` ولكن من المتوقع أن تأتي من [أنماط الخطوط القياسية](https://developer.mozilla.org/docs/Web/CSS/font-style)
+- `style: ['italic','normal']`: مصفوفة من قيمتين لـ `next/font/google` - القيم من `normal` و `italic`
+
+### `subsets`
+
+[`مجموعات فرعية`](https://fonts.google.com/knowledge/glossary/subsetting) الخط المحددة بمصفوفة من قيم السلسلة بأسماء كل مجموعة فرعية ترغب في [تحميلها مسبقًا](/docs/app/building-your-application/optimizing/fonts#specifying-a-subset). سيتم حقق علامة تحميل مسبق للرابط في الرأس عند تعيين خيار [`preload`](#preload) على `true`، وهو الإعداد الافتراضي.
+
+يستخدم في `next/font/google`
+
+- اختياري
+
+أمثلة:
+
+- `subsets: ['latin']`: مصفوفة بمجموعة فرعية `latin`
+
+يمكنك العثور على قائمة بجميع المجموعات الفرعية في صفحة خطوط جوجل للخط الخاص بك.
+
+### `axes`
+
+بعض الخطوط المتغيرة تحتوي على محاور إضافية `axes` يمكن تضمينها. افتراضيًا، يتم تضمين وزن الخط فقط للحفاظ على حجم الملف. تعتمد القيم المحتملة لـ `axes` على الخط المحدد.
+
+يستخدم في `next/font/google`
+
+- اختياري
+
+أمثلة:
+
+- `axes: ['slnt']`: مصفوفة بقيمة `slnt` لخط `Inter` المتغير الذي يحتوي على `slnt` كمحاور إضافية كما هو موضح [هنا](https://fonts.google.com/variablefonts?vfquery=inter#font-families). يمكنك العثور على قيم `axes` المحتملة للخط الخاص بك باستخدام الفلتر في [صفحة خطوط جوجل المتغيرة](https://fonts.google.com/variablefonts#font-families) والبحث عن محاور غير `wght`
+
+### `display`
+
+[`عرض`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) الخط بقيم سلسلة محتملة `'auto'`, `'block'`, `'swap'`, `'fallback'` أو `'optional'` بقيمة افتراضية `'swap'`.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `display: 'optional'`: سلسلة معينة لقيمة `optional`
+
+### `preload`
+
+قيمة منطقية تحدد ما إذا كان يجب [تحميل الخط مسبقًا](/docs/app/building-your-application/optimizing/fonts#preloading) أم لا. القيمة الافتراضية هي `true`.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `preload: false`
+
+### `fallback`
+
+خط الاحتياطي لاستخدامه إذا تعذر تحميل الخط. مصفوفة من السلاسل لخطوط الاحتياطي بدون قيمة افتراضية.
+
+- اختياري
+
+يستخدم في `next/font/google` و `next/font/local`
+
+أمثلة:
+
+- `fallback: ['system-ui', 'arial']`: مصفوفة تعيين خطوط الاحتياطي إلى `system-ui` أو `arial`
+
+### `adjustFontFallback`
+
+- لـ `next/font/google`: قيمة منطقية تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل [تحول التخطيط التراكمي](https://web.dev/cls/). القيمة الافتراضية هي `true`.
+- لـ `next/font/local`: قيمة سلسلة أو منطقية `false` تحدد ما إذا كان يجب استخدام خط احتياطي تلقائي لتقليل [تحول التخطيط التراكمي](https://web.dev/cls/). القيم المحتملة هي `'Arial'`, `'Times New Roman'` أو `false`. القيمة الافتراضية هي `'Arial'`.
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `adjustFontFallback: false`: لـ `next/font/google`
+- `adjustFontFallback: 'Times New Roman'`: لـ `next/font/local`
+
+### `variable`
+
+قيمة سلسلة لتحديد اسم متغير CSS لاستخدامه إذا تم تطبيق النمط باستخدام [طريقة متغير CSS](#css-variables).
+
+يستخدم في `next/font/google` و `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `variable: '--my-font'`: يتم تعريف متغير CSS `--my-font`
+
+### `declarations`
+
+مصفوفة من أزواج مفتاح-قيمة لـ [واصفات](https://developer.mozilla.org/docs/Web/CSS/@font-face#descriptors) وجه الخط التي تحدد `@font-face` المنشأة بشكل أكبر.
+
+يستخدم في `next/font/local`
+
+- اختياري
+
+أمثلة:
+
+- `declarations: [{ prop: 'ascent-override', value: '90%' }]`
+
+## تطبيق الأنماط
+
+يمكنك تطبيق أنماط الخط بثلاث طرق:
+
+- [`className`](#classname)
+- [`style`](#style-1)
+- [متغيرات CSS](#css-variables)
+
+### `className`
+
+تُرجع `className` CSS للقراءة فقط للخط المحمل لتمريرها إلى عنصر HTML.
+
+```tsx
+<p className={inter.className}>Hello, Next.js!</p>
+```
+
+### `style`
+
+تُرجع كائن `style` CSS للقراءة فقط للخط المحمل لتمريرها إلى عنصر HTML، بما في ذلك `style.fontFamily` للوصول إلى اسم عائلة الخط وخطوط الاحتياطي.
+
+```tsx
+<p style={inter.style}>Hello World</p>
+```
+
+### متغيرات CSS
+
+إذا كنت ترغب في تعيين أنماطك في ورقة أنماط خارجية وتحديد خيارات إضافية هناك، استخدم طريقة متغير CSS.
+
+بالإضافة إلى استيراد الخط، استورد أيضًا ملف CSS حيث يتم تعريف متغير CSS وقم بتعيين خيار المتغير لكائن محمل الخط كما يلي:
+
+```tsx filename="app/page.tsx" switcher
+import { Inter } from 'next/font/google'
+import styles from '../styles/component.module.css'
+
+const inter = Inter({
+  variable: '--font-inter',
+})
+```
+
+```jsx filename="app/page.js" switcher
+import { Inter } from 'next/font/google'
+import styles from '../styles/component.module.css'
+
+const inter = Inter({
+  variable: '--font-inter',
+})
+```
+
+لاستخدام الخط، قم بتعيين `className` للحاوية الأم للنص الذي ترغب في تنسيقه إلى قيمة `variable` لمحمل الخط و `className` للنص إلى خاصية `styles` من ملف CSS الخارجي.
+
+```tsx filename="app/page.tsx" switcher
+<main className={inter.variable}>
+  <p className={styles.text}>Hello World</p>
+</main>
+```
+
+```jsx filename="app/page.js" switcher
+<main className={inter.variable}>
+  <p className={styles.text}>Hello World</p>
+</main>
+```
+
+قم بتعيين فئة المحدد `text` في ملف CSS `component.module.css` كما يلي:
+
+```css filename="styles/component.module.css"
+.text {
+  font-family: var(--font-inter);
+  font-weight: 200;
+  font-style: italic;
+}
+```
+
+في المثال أعلاه، يتم تنسيق النص `Hello World` باستخدام خط `Inter` وخط الاحتياطي المنشأ مع `font-weight: 200` و `font-style: italic`.
+
+## استخدام ملف تعريفات الخطوط
+
+في كل مرة تستدعي فيها دالة الخط المحلي أو خط جوجل، سيتم استضافة هذا الخط كنسخة واحدة في تطبيقك. لذلك، إذا كنت بحاجة إلى استخدام نفس الخط في أماكن متعددة، يجب تحميله في مكان واحد واستيراد كائن الخط ذي الصلة حيث تحتاجه. يتم ذلك باستخدام ملف تعريفات الخطوط.
+
+على سبيل المثال، أنشئ ملف `fonts.ts` في مجلد `styles` في جذر دليل تطبيقك.
+
+ثم، حدد تعريفات الخطوط الخاصة بك كما يلي:
+
+```ts filename="styles/fonts.ts" switcher
+import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
+import localFont from 'next/font/local'
+
+// تعريف الخطوط المتغيرة
+const inter = Inter()
+const lora = Lora()
+// تعريف وزنين لخط غير متغير
+const sourceCodePro400 = Source_Sans_3({ weight: '400' })
+const sourceCodePro700 = Source_Sans_3({ weight: '700' })
+// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد الأنماط
+const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })
+
+export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }
+```
+
+```js filename="styles/fonts.js" switcher
+import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
+import localFont from 'next/font/local'
+
+// تعريف الخطوط المتغيرة
+const inter = Inter()
+const lora = Lora()
+// تعريف وزنين لخط غير متغير
+const sourceCodePro400 = Source_Sans_3({ weight: '400' })
+const sourceCodePro700 = Source_Sans_3({ weight: '700' })
+// تعريف خط محلي مخصص حيث يتم تخزين GreatVibes-Regular.ttf في مجلد الأنماط
+const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })
+
+export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }
+```
+
+يمكنك الآن استخدام هذه التعريفات في الكود الخاص بك كما يلي:
+
+```tsx filename="app/page.tsx" switcher
+import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'
+
+export default function Page() {
+  return (
+    <div>
+      <p className={inter.className}>Hello world using Inter font</p>
+      <p style={lora.style}>Hello world using Lora font</p>
+      <p className={sourceCodePro700.className}>
+        Hello world using Source_Sans_3 font with weight 700
+      </p>
+      <p className={greatVibes.className}>My title in Great Vibes font</p>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'
+
+export default function Page() {
+  return (
+    <div>
+      <p className={inter.className}>Hello world using Inter font</p>
+      <p style={lora.style}>Hello world using Lora font</p>
+      <p className={sourceCodePro700.className}>
+        Hello world using Source_Sans_3 font with weight 700
+      </p>
+      <p className={greatVibes.className}>My title in Great Vibes font</p>
+    </div>
+  )
+}
+```
+
+لتسهيل الوصول إلى تعريفات الخطوط في الكود الخاص بك، يمكنك تعريف اسم مسار في ملفات `tsconfig.json` أو `jsconfig.json` كما يلي:
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      "@/fonts": ["./styles/fonts"]
+    }
+  }
+}
+```
+
+يمكنك الآن استيراد أي تعريف خط كما يلي:
+
+```tsx filename="app/about/page.tsx" switcher
+import { greatVibes, sourceCodePro400 } from '@/fonts'
+```
+
+```jsx filename="app/about/page.js" switcher
+import { greatVibes, sourceCodePro400 } from '@/fonts'
+```
+
+## تغييرات الإصدار
+
+| الإصدار   | التغييرات                                                               |
+| --------- | --------------------------------------------------------------------- |
+| `v13.2.0` | تم تغيير اسم `@next/font` إلى `next/font`. لم يعد التثبيت مطلوبًا. |
+| `v13.0.0` | تمت إضافة `@next/font`.                                               |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/image.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/image.mdx
new file mode 100644
index 00000000..ba1a9d5d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/image.mdx
@@ -0,0 +1,1091 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:42:02.900Z
+title: مكون <Image>
+description: تحسين الصور في تطبيق Next.js الخاص بك باستخدام مكون `next/image` المدمج.
+---
+
+{/* المحتوى مشترك بين تطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مكون الصورة](https://github.com/vercel/next.js/tree/canary/examples/image-component)
+
+</details>
+
+<PagesOnly>
+
+> **معلومة مفيدة**: إذا كنت تستخدم إصدارًا من Next.js قبل الإصدار 13، فستحتاج إلى استخدام [وثائق next/legacy/image](/docs/pages/api-reference/components/image-legacy) حيث تم تغيير اسم المكون.
+
+</PagesOnly>
+
+سيساعدك مرجع API هذا على فهم كيفية استخدام [الخصائص (props)](#props) وخيارات [التكوين](#configuration-options) المتاحة لمكون الصورة. لميزات الاستخدام، يرجى زيارة صفحة [مكون الصورة](/docs/app/building-your-application/optimizing/images).
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <Image
+      src="/profile.png"
+      width={500}
+      height={500}
+      alt="صورة المؤلف"
+    />
+  )
+}
+```
+
+## الخصائص (Props)
+
+فيما يلي ملخص لخصائص مكون الصورة المتاحة:
+
+<div style={{ overflowX: 'auto', width: '100%' }}>
+| الخاصية                                      | مثال                                  | النوع            | الحالة     |
+| ----------------------------------------- | ---------------------------------------- | --------------- | ---------- |
+| [`src`](#src)                             | `src="/profile.png"`                     | نص              | مطلوب     |
+| [`width`](#width)                         | `width={500}`                            | عدد صحيح (بكسل) | مطلوب     |
+| [`height`](#height)                       | `height={500}`                           | عدد صحيح (بكسل) | مطلوب     |
+| [`alt`](#alt)                             | `alt="صورة المؤلف"`            | نص              | مطلوب     |
+| [`loader`](#loader)                       | `loader={imageLoader}`                   | دالة            | -          |
+| [`fill`](#fill)                           | `fill={true}`                            | منطقي           | -          |
+| [`sizes`](#sizes)                         | `sizes="(max-width: 768px) 100vw, 33vw"` | نص              | -          |
+| [`quality`](#quality)                     | `quality={80}`                           | عدد صحيح (1-100)| -          |
+| [`priority`](#priority)                   | `priority={true}`                        | منطقي           | -          |
+| [`placeholder`](#placeholder)             | `placeholder="blur"`                     | نص              | -          |
+| [`style`](#style)                         | `style={{objectFit: "contain"}}`         | كائن            | -          |
+| [`onLoadingComplete`](#onloadingcomplete) | `onLoadingComplete={img => done())}`     | دالة            | مهمل |
+| [`onLoad`](#onload)                       | `onLoad={event => done())}`              | دالة            | -          |
+| [`onError`](#onerror)                     | `onError(event => fail()}`               | دالة            | -          |
+| [`loading`](#loading)                     | `loading="lazy"`                         | نص              | -          |
+| [`blurDataURL`](#blurdataurl)             | `blurDataURL="data:image/jpeg..."`       | نص              | -          |
+| [`overrideSrc`](#overridesrc)             | `overrideSrc="/seo.png"`                 | نص              | -          |
+</div>
+
+## الخصائص المطلوبة
+
+يتطلب مكون الصورة الخصائص التالية: `src`، `width`، `height`، و `alt`.
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <Image
+        src="/profile.png"
+        width={500}
+        height={500}
+        alt="صورة المؤلف"
+      />
+    </div>
+  )
+}
+```
+
+### `src`
+
+يجب أن يكون أحد الخيارات التالية:
+
+- ملف صورة [مستورد بشكل ثابت](/docs/app/building-your-application/optimizing/images#local-images)
+- مسار نصي. يمكن أن يكون عنوان URL خارجي مطلق، أو مسار داخلي اعتمادًا على خاصية [المحمل (loader)](#loader).
+
+عند استخدام عنوان URL خارجي، يجب إضافته إلى [remotePatterns](#remotepatterns) في ملف `next.config.js`.
+
+### `width`
+
+تمثل خاصية `width` العرض المعروض بالبكسل، لذا ستؤثر على حجم الصورة الظاهر.
+
+مطلوبة، باستثناء [الصور المستوردة بشكل ثابت](/docs/app/building-your-application/optimizing/images#local-images) أو الصور ذات خاصية [`fill`](#fill).
+
+### `height`
+
+تمثل خاصية `height` الارتفاع المعروض بالبكسل، لذا ستؤثر على حجم الصورة الظاهر.
+
+مطلوبة، باستثناء [الصور المستوردة بشكل ثابت](/docs/app/building-your-application/optimizing/images#local-images) أو الصور ذات خاصية [`fill`](#fill).
+
+### `alt`
+
+تستخدم خاصية `alt` لوصف الصورة لقارئات الشاشة ومحركات البحث. وهي أيضًا النص الاحتياطي إذا تم تعطيل الصور أو حدث خطأ أثناء تحميل الصورة.
+
+يجب أن تحتوي على نص يمكن أن يحل محل الصورة [دون تغيير معنى الصفحة](https://html.spec.whatwg.org/multipage/images.html#general-guidelines). لا يُقصد بها استكمال الصورة ولا يجب أن تكرر المعلومات المقدمة بالفعل في التسميات التوضيحية أعلى أو أسفل الصورة.
+
+إذا كانت الصورة [زخرفية بحتة](https://html.spec.whatwg.org/multipage/images.html#a-purely-decorative-image-that-doesn't-add-any-information) أو [غير مخصصة للمستخدم](https://html.spec.whatwg.org/multipage/images.html#an-image-not-intended-for-the-user)، فيجب أن تكون خاصية `alt` نصًا فارغًا (`alt=""`).
+
+[تعلم المزيد](https://html.spec.whatwg.org/multipage/images.html#alt)
+
+## الخصائص الاختيارية
+
+يقبل مكون `<Image />` عددًا من الخصائص الإضافية بخلاف تلك المطلوبة. يصف هذا القسم الخصائص الأكثر استخدامًا لمكون الصورة. يمكن العثور على تفاصيل حول الخصائص الأقل استخدامًا في قسم [الخصائص المتقدمة](#advanced-props).
+
+### `loader`
+
+دالة مخصصة تستخدم لحل عناوين URL للصور.
+
+`loader` هي دالة تُرجع سلسلة عنوان URL للصورة، مع الأخذ في الاعتبار المعلمات التالية:
+
+- [`src`](#src)
+- [`width`](#width)
+- [`quality`](#quality)
+
+فيما يلي مثال على استخدام محمل مخصص:
+
+<AppOnly>
+
+```js
+'use client'
+
+import Image from 'next/image'
+
+const imageLoader = ({ src, width, quality }) => {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+
+export default function Page() {
+  return (
+    <Image
+      loader={imageLoader}
+      src="me.png"
+      alt="صورة المؤلف"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+> **معلومة مفيدة**: استخدام خصائص مثل `loader`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة إلى سلسلة.
+
+</AppOnly>
+
+<PagesOnly>
+
+```js
+import Image from 'next/image'
+
+const imageLoader = ({ src, width, quality }) => {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+
+export default function Page() {
+  return (
+    <Image
+      loader={imageLoader}
+      src="me.png"
+      alt="صورة المؤلف"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+</PagesOnly>
+
+بدلاً من ذلك، يمكنك استخدام تكوين [loaderFile](#loaderfile) في ملف `next.config.js` لتكوين كل مثيل لـ `next/image` في تطبيقك، دون تمرير خاصية.
+
+### `fill`
+
+```js
+fill={true} // {true} | {false}
+```
+
+قيمة منطقية تجعل الصورة تملأ العنصر الأب، وهو مفيد عندما يكون [`width`](#width) و [`height`](#height) غير معروفين.
+
+يجب أن يخصص العنصر الأب نمط `position: "relative"` أو `position: "fixed"` أو `position: "absolute"`.
+
+بشكل افتراضي، سيتم تخصيص نمط `position: "absolute"` لعنصر img تلقائيًا.
+
+إذا لم يتم تطبيق أي أنماط على الصورة، فستتمدد الصورة لملء الحاوية. قد تفضل تعيين `object-fit: "contain"` لصورة محاطة لتلائم الحافظة والحفاظ على نسبة العرض إلى الارتفاع.
+
+بدلاً من ذلك، سيؤدي `object-fit: "cover"` إلى ملء الصورة للحاوية بالكامل واقتصاصها للحفاظ على نسبة العرض إلى الارتفاع. لكي يبدو هذا صحيحًا، يجب تعيين نمط `overflow: "hidden"` للعنصر الأب.
+
+لمزيد من المعلومات، راجع أيضًا:
+
+- [`position`](https://developer.mozilla.org/docs/Web/CSS/position)
+- [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit)
+- [`object-position`](https://developer.mozilla.org/docs/Web/CSS/object-position)
+
+### `sizes`
+
+سلسلة نصية، تشبه استعلام الوسائط، توفر معلومات حول عرض الصورة عند نقاط التوقف المختلفة. ستؤثر قيمة `sizes` بشكل كبير على أداء الصور التي تستخدم [`fill`](#fill) أو التي [تم تصميمها بحجم متجاوب](#responsive-images).
+
+تخدم خاصية `sizes` غرضين مهمين متعلقين بأداء الصورة:
+
+- أولاً، تستخدم المتصفحات قيمة `sizes` لتحديد حجم الصورة الذي يجب تنزيله، من `srcset` الذي تم إنشاؤه تلقائيًا بواسطة `next/image`. عندما يختار المتصفح، لا يعرف بعد حجم الصورة على الصفحة، لذا يختار صورة بنفس حجم أو أكبر من نافذة العرض. تتيح لك خاصية `sizes` إخبار المتصفح بأن الصورة ستكون في الواقع أصغر من الشاشة الكاملة. إذا لم تحدد قيمة `sizes` في صورة ذات خاصية `fill`، فسيتم استخدام القيمة الافتراضية `100vw` (عرض الشاشة الكاملة).
+- ثانيًا، تغير خاصية `sizes` سلوك قيمة `srcset` التي تم إنشاؤه تلقائيًا. إذا لم تكن هناك قيمة `sizes` موجودة، يتم إنشاء `srcset` صغير مناسب لصورة بحجم ثابت (1x/2x/إلخ). إذا تم تعريف `sizes`، يتم إنشاء `srcset` كبير مناسب لصورة متجاوبة (640w/750w/إلخ). إذا كانت خاصية `sizes` تتضمن أحجامًا مثل `50vw`، التي تمثل نسبة مئوية من عرض نافذة العرض، فسيتم تقليم `srcset` لاستبعاد أي قيم صغيرة جدًا بحيث لا تكون ضرورية أبدًا.
+
+على سبيل المثال، إذا كنت تعلم أن تصميمك سيجعل الصورة بعرض كامل على الأجهزة المحمولة، وتخطيط من عمودين على الأجهزة اللوحية، وتخطيط من ثلاثة أعمدة على شاشات سطح المكتب، فيجب عليك تضمين خاصية sizes مثل ما يلي:
+
+```jsx
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div className="grid-element">
+      <Image
+        fill
+        src="/example.png"
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+      />
+    </div>
+  )
+}
+```
+
+يمكن أن يكون لمثال `sizes` هذا تأثير كبير على مقاييس الأداء. بدون `sizes`، ستكون الصورة المختارة من الخادم أوسع بثلاث مرات مما تحتاج إليه. نظرًا لأن حجم الملف يتناسب مع مربع العرض، فبدون `sizes`، سيقوم المستخدم بتنزيل صورة أكبر بتسع مرات مما هو ضروري.
+
+تعرف على المزيد حول `srcset` و `sizes`:
+
+- [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
+- [mdn](https://developer.mozilla.org/docs/Web/HTML/Element/img#sizes)
+
+### `quality`
+
+```js
+quality={75} // {number 1-100}
+```
+
+جودة الصورة المحسنة، عدد صحيح بين `1` و `100`، حيث `100` هي أفضل جودة وبالتالي أكبر حجم ملف. القيمة الافتراضية هي `75`.
+
+إذا تم تعريف تكوين [`qualities`](#qualities) في `next.config.js`، فيجب أن تتطابق خاصية `quality` مع إحدى القيم المحددة في التكوين.
+
+> **معلومة مفيدة**: إذا كانت صورة المصدر الأصلية منخفضة الجودة بالفعل، فقد يؤدي تعيين خاصية الجودة مرتفعة جدًا إلى جعل الصورة المحسنة الناتجة أكبر من صورة المصدر الأصلية.
+
+### `priority`
+
+```js
+priority={false} // {false} | {true}
+```
+
+عندما تكون القيمة `true`، تعتبر الصورة ذات أولوية عالية ويتم [تحميلها مسبقًا](https://web.dev/preload-responsive-images/). يتم تعطيل التحميل البطيء تلقائيًا للصور التي تستخدم `priority`.
+
+يجب استخدام خاصية `priority` على أي صورة تم اكتشافها كعنصر [أكبر محتوى مرئي للرسم (LCP)](https://nextjs.org/learn/seo/web-performance/lcp). قد يكون من المناسب وجود عدة صور ذات أولوية، حيث يمكن أن تكون صور مختلفة هي عنصر LCP لأحجام نافذة عرض مختلفة.
+
+يجب استخدامها فقط عندما تكون الصورة مرئية فوق الطية. القيمة الافتراضية هي `false`.
+
+### `placeholder`
+
+```js
+placeholder = 'empty' // "empty" | "blur" | "data:image/..."
+```
+
+عنصر نائب يستخدم أثناء تحميل الصورة. القيم الممكنة هي `blur`، `empty`، أو `data:image/...`. القيمة الافتراضية هي `empty`.
+
+عند `blur`، سيتم استخدام خاصية [`blurDataURL`](#blurdataurl) كعنصر نائب. إذا كان `src` كائنًا من [استيراد ثابت](/docs/app/building-your-application/optimizing/images#local-images) وكانت الصورة المستوردة `.jpg`، `.png`، `.webp`، أو `.avif`، فسيتم ملء `blurDataURL` تلقائيًا، إلا إذا تم اكتشاف أن الصورة متحركة.
+
+للصور الديناميكية، يجب توفير خاصية [`blurDataURL`](#blurdataurl). يمكن أن تساعد حلول مثل [Plaiceholder](https://github.com/joe-bell/plaiceholder) في إنشاء `base64`.
+
+عند `data:image/...`، سيتم استخدام [عنوان URL للبيانات (Data URL)](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) كعنصر نائب أثناء تحميل الصورة.
+
+عند `empty`، لن يكون هناك عنصر نائب أثناء تحميل الصورة، فقط مساحة فارغة.
+
+جربها:
+
+- [عرض توضيحي لعنصر النائب `blur`](https://image-component.nextjs.gallery/placeholder)
+- [عرض توضيحي لتأثير اللمعان مع خاصية `placeholder` لعنوان URL للبيانات](https://image-component.nextjs.gallery/shimmer)
+- [عرض توضيحي لتأثير اللون مع خاصية `blurDataURL`](https://image-component.nextjs.gallery/color)
+
+## الخصائص المتقدمة
+
+في بعض الحالات، قد تحتاج إلى استخدام أكثر تقدمًا. يقبل مكون `<Image />` الخصائص المتقدمة التالية اختياريًا.
+
+### `style`
+
+يسمح بتمرير أنماط CSS إلى عنصر الصورة الأساسي.
+
+```jsx filename="components/ProfileImage.js"
+const imageStyle = {
+  borderRadius: '50%',
+  border: '1px solid #fff',
+}
+
+export default function ProfileImage() {
+  return <Image src="..." style={imageStyle} />
+}
+```
+
+تذكر أن خصائص العرض والارتفاع المطلوبة يمكن أن تتفاعل مع تصميمك. إذا استخدمت التصميم لتعديل عرض الصورة، فيجب أيضًا تصميم ارتفاعها على `auto` للحفاظ على نسبة العرض إلى الارتفاع الأصلية، وإلا ستتشوه صورتك.
+
+### `onLoadingComplete`
+
+<AppOnly>
+
+```jsx
+'use client'
+
+<Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx
+<Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />
+```
+
+</PagesOnly>
+
+> **تحذير**: مهمل منذ Next.js 14 لصالح [`onLoad`](#onload).
+
+دالة رد اتصال يتم استدعاؤها بمجرد تحميل الصورة بالكامل وإزالة [العنصر النائب](#placeholder).
+
+سيتم استدعاء دالة الرد بوسيطة واحدة، مرجع لعنصر `<img>` الأساسي.
+
+<AppOnly>
+
+> **معلومة مفيدة**: استخدام خصائص مثل `onLoadingComplete`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة إلى سلسلة.
+
+</AppOnly>
+
+### `onLoad`
+
+```jsx
+<Image onLoad={(e) => console.log(e.target.naturalWidth)} />
+```
+
+دالة رد اتصال يتم استدعاؤها بمجرد تحميل الصورة بالكامل وإزالة [العنصر النائب](#placeholder).
+
+سيتم استدعاء دالة الرد بوسيطة واحدة، الحدث الذي يحتوي على `target` يشير إلى عنصر `<img>` الأساسي.
+
+<AppOnly>
+
+> **معلومة مفيدة**: استخدام خصائص مثل `onLoad`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة إلى سلسلة.
+
+</AppOnly>
+
+### `onError`
+
+```jsx
+<Image onError={(e) => console.error(e.target.id)} />
+```
+
+دالة رد اتصال يتم استدعاؤها إذا فشل تحميل الصورة.
+
+<AppOnly>
+
+> **معلومة مفيدة**: استخدام خصائص مثل `onError`، التي تقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة إلى سلسلة.
+
+</AppOnly>
+
+### `loading`
+
+> **توصية**: هذا الخصائص مخصص فقط لحالات الاستخدام المتقدمة. تحويل صورة للتحميل باستخدام `eager` عادةً ما **يؤثر سلبًا على الأداء**. نوصي باستخدام خاصية [`priority`](#priority) بدلاً من ذلك، والتي ستعمل على تحميل الصورة مسبقًا بفعالية.
+
+```js
+loading = 'lazy' // {lazy} | {eager}
+```
+
+سلوك تحميل الصورة. الافتراضي هو `lazy`.
+
+عندما يكون `lazy`، يتم تأجيل تحميل الصورة حتى تصل إلى مسافة محسوبة من
+منطقة العرض.
+
+عندما يكون `eager`، يتم تحميل الصورة على الفور.
+
+تعرف على المزيد حول [خاصية `loading`](https://developer.mozilla.org/docs/Web/HTML/Element/img#loading).
+
+### `blurDataURL`
+
+[رابط بيانات (Data URL)](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) ل
+استخدامها كصورة نائبة قبل تحميل صورة `src` بنجاح. يكون له تأثير فقط عند دمجه
+مع [`placeholder="blur"`](#placeholder).
+
+يجب أن تكون الصورة مشفرة بـ base64. سيتم تكبيرها وطمسها، لذلك يُنصح باستخدام صورة صغيرة جدًا (10 بكسل أو أقل). تضمين صور أكبر كعناصر نائبة قد يضر بأداء تطبيقك.
+
+جربه:
+
+- [عرض خاصية `blurDataURL` الافتراضية](https://image-component.nextjs.gallery/placeholder)
+- [عرض تأثير اللون مع خاصية `blurDataURL`](https://image-component.nextjs.gallery/color)
+
+يمكنك أيضًا [إنشاء رابط بيانات بلون ثابت](https://png-pixel.com) لمطابقة الصورة.
+
+### `unoptimized`
+
+```js
+unoptimized = {false} // {false} | {true}
+```
+
+عندما يكون `true`، سيتم تقديم الصورة المصدر كما هي دون تغيير الجودة،
+الحجم، أو التنسيق. الافتراضي هو `false`.
+
+```js
+import Image from 'next/image'
+
+const UnoptimizedImage = (props) => {
+  return <Image {...props} unoptimized />
+}
+```
+
+منذ Next.js 12.3.0، يمكن تعيين هذه الخاصية لجميع الصور عن طريق تحديث `next.config.js` بالإعداد التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    unoptimized: true,
+  },
+}
+```
+
+### `overrideSrc`
+
+عند تقديم خاصية `src` لمكون `<Image>`، يتم إنشاء كل من سمات `srcset` و `src` تلقائيًا للنتيجة `<img>`.
+
+```jsx filename="input.js"
+<Image src="/me.jpg" />
+```
+
+```html filename="output.html"
+<img
+  srcset="
+    /_next/image?url=%2Fme.jpg&w=640&q=75 1x,
+    /_next/image?url=%2Fme.jpg&w=828&q=75 2x
+  "
+  src="/_next/image?url=%2Fme.jpg&w=828&q=75"
+/>
+```
+
+في بعض الحالات، قد لا يكون من المرغوب فيه إنشاء سمة `src` ويمكنك تجاوزها باستخدام خاصية `overrideSrc`.
+
+على سبيل المثال، عند ترقية موقع ويب موجود من `<img>` إلى `<Image>`، قد ترغب في الحفاظ على نفس سمة `src` لأغراض تحسين محركات البحث مثل ترتيب الصور أو تجنب إعادة الزحف.
+
+```jsx filename="input.js"
+<Image src="/me.jpg" overrideSrc="/override.jpg" />
+```
+
+```html filename="output.html"
+<img
+  srcset="
+    /_next/image?url=%2Fme.jpg&w=640&q=75 1x,
+    /_next/image?url=%2Fme.jpg&w=828&q=75 2x
+  "
+  src="/override.jpg"
+/>
+```
+
+### decoding
+
+تلميح للمتصفح يشير إلى ما إذا كان يجب عليه الانتظار لفك تشفير الصورة قبل عرض تحديثات المحتوى الأخرى أم لا. الافتراضي هو `async`.
+
+القيم الممكنة هي التالية:
+
+- `async` - فك تشفير الصورة بشكل غير متزامن والسماح بعرض محتوى آخر قبل اكتمالها.
+- `sync` - فك تشفير الصورة بشكل متزامن لعرض ذري مع محتوى آخر.
+- `auto` - لا توجد تفضيلات لوضع فك التشفير؛ يقرر المتصفح الأفضل.
+
+تعرف على المزيد حول [خاصية `decoding`](https://developer.mozilla.org/docs/Web/HTML/Element/img#loading).
+
+### خصائص أخرى
+
+سيتم تمرير الخصائص الأخرى على مكون `<Image />` إلى العنصر
+`img` الأساسي باستثناء التالي:
+
+- `srcSet`. استخدم [أحجام الجهاز (Device Sizes)](#devicesizes) بدلاً من ذلك.
+
+## خيارات التكوين
+
+بالإضافة إلى الخصائص، يمكنك تكوين مكون الصورة في `next.config.js`. الخيارات المتاحة هي:
+
+### `localPatterns`
+
+يمكنك تكوين `localPatterns` اختياريًا في ملف `next.config.js` للسماح بمسارات محددة بالتحسين وحظر جميع المسارات الأخرى.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    localPatterns: [
+      {
+        pathname: '/assets/images/**',
+        search: '',
+      },
+    ],
+  },
+}
+```
+
+> **جيد للمعرفة**: المثال أعلاه سيضمن أن خاصية `src` لـ `next/image` يجب أن تبدأ بـ `/assets/images/` ويجب ألا تحتوي على سلسلة استعلام. محاولة تحسين أي مسار آخر سترد بـ 400 طلب غير صالح.
+
+### `remotePatterns`
+
+لحماية تطبيقك من المستخدمين الضارين، يلزم التكوين لاستخدام الصور الخارجية. هذا يضمن أن الصور الخارجية من حسابك فقط يمكن تقديمها من واجهة برمجة تطبيقات تحسين الصور في Next.js. يمكن تكوين هذه الصور الخارجية باستخدام خاصية `remotePatterns` في ملف `next.config.js`، كما هو موضح أدناه:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'example.com',
+        port: '',
+        pathname: '/account123/**',
+        search: '',
+      },
+    ],
+  },
+}
+```
+
+> **جيد للمعرفة**: المثال أعلاه سيضمن أن خاصية `src` لـ `next/image` يجب أن تبدأ بـ `https://example.com/account123/` ويجب ألا تحتوي على سلسلة استعلام. أي بروتوكول آخر، أو اسم مضيف، أو منفذ، أو مسار غير متطابق سيرد بـ 400 طلب غير صالح.
+
+أدناه مثال لخاصية `remotePatterns` في ملف `next.config.js` باستخدام نمط حرف البدل في `hostname`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.example.com',
+        port: '',
+        search: '',
+      },
+    ],
+  },
+}
+```
+
+> **جيد للمعرفة**: المثال أعلاه سيضمن أن خاصية `src` لـ `next/image` يجب أن تبدأ بـ `https://img1.example.com` أو `https://me.avatar.example.com` أو أي عدد من النطاقات الفرعية. لا يمكن أن تحتوي على منفذ أو سلسلة استعلام. أي بروتوكول آخر أو اسم مضيف غير متطابق سيرد بـ 400 طلب غير صالح.
+
+يمكن استخدام أنماط حرف البدل لكل من `pathname` و `hostname` ولها الصيغة التالية:
+
+- `*` تطابق مقطع مسار واحد أو نطاق فرعي
+- `**` تطابق أي عدد من مقاطع المسار في النهاية أو النطاقات الفرعية في البداية
+
+صيغة `**` لا تعمل في منتصف النمط.
+
+> **جيد للمعرفة**: عند حذف `protocol`، أو `port`، أو `pathname`، أو `search`، فإن حرف البدل `**` يكون ضمنيًا. هذا غير موصى به لأنه قد يسمح للمستخدمين الضارين بتحسين عناوين URL لم تقصدها.
+
+أدناه مثال لخاصية `remotePatterns` في ملف `next.config.js` باستخدام `search`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'assets.example.com',
+        search: '?v=1727111025337',
+      },
+    ],
+  },
+}
+```
+
+> **جيد للمعرفة**: المثال أعلاه سيضمن أن خاصية `src` لـ `next/image` يجب أن تبدأ بـ `https://assets.example.com` ويجب أن تحتوي على سلسلة الاستعلام الدقيقة `?v=1727111025337`. أي بروتوكول آخر أو سلسلة استعلام سيرد بـ 400 طلب غير صالح.
+
+### `domains`
+
+> **تحذير**: أصبحت قديمة منذ Next.js 14 لصالح [`remotePatterns`](#remotepatterns) الصارمة لحماية تطبيقك من المستخدمين الضارين. استخدم `domains` فقط إذا كنت تملك كل المحتوى المقدم من النطاق.
+
+على غرار [`remotePatterns`](#remotepatterns)، يمكن استخدام تكوين `domains` لتوفير قائمة بأسماء المضيفين المسموح بها للصور الخارجية.
+
+ومع ذلك، لا يدعم تكوين `domains` مطابقة نمط حرف البدل ولا يمكنه تقييد البروتوكول، أو المنفذ، أو مسار المسار.
+
+أدناه مثال لخاصية `domains` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    domains: ['assets.acme.com'],
+  },
+}
+```
+
+### `loaderFile`
+
+إذا كنت تريد استخدام مزود سحابي لتحسين الصور بدلاً من استخدام واجهة برمجة تطبيقات تحسين الصور المدمجة في Next.js، يمكنك تكوين `loaderFile` في `next.config.js` كما يلي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    loader: 'custom',
+    loaderFile: './my/image/loader.js',
+  },
+}
+```
+
+يجب أن يشير هذا إلى ملف نسبي لجذر تطبيق Next.js الخاص بك. يجب أن يصدر الملف دالة افتراضية تُرجع سلسلة، على سبيل المثال:
+
+<AppOnly>
+
+```js filename="my/image/loader.js"
+'use client'
+
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```js filename="my/image/loader.js"
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+</PagesOnly>
+
+بدلاً من ذلك، يمكنك استخدام [خاصية `loader`](#loader) لتكوين كل مثيل من `next/image`.
+
+أمثلة:
+
+- [تكوين محمل الصور المخصص](/docs/app/api-reference/next-config-js/images#example-loader-configuration)
+
+<AppOnly>
+
+> **جيد للمعرفة**: تخصيص ملف محمل الصور، الذي يقبل دالة، يتطلب استخدام [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة إلى سلسلة.
+
+</AppOnly>
+
+## متقدم
+
+التكوين التالي مخصص لحالات الاستخدام المتقدمة وعادةً ما لا يكون ضروريًا. إذا اخترت تكوين الخصائص أدناه، فستتجاوز أي تغييرات على إعدادات Next.js الافتراضية في التحديثات المستقبلية.
+
+### `deviceSizes`
+
+إذا كنت تعرف عرض الأجهزة المتوقع لمستخدميك، يمكنك تحديد قائمة بنقاط توقف عرض الجهاز باستخدام خاصية `deviceSizes` في `next.config.js`. تُستخدم هذه الأبعاد عندما يستخدم مكون `next/image` خاصية [`sizes`](#sizes) لضمان تقديم الصورة الصحيحة لجهاز المستخدم.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  },
+}
+```
+
+### `imageSizes`
+
+يمكنك تحديد قائمة بعروض الصور باستخدام خاصية `images.imageSizes` في ملف `next.config.js`. يتم دمج هذه الأبعاد مع مصفوفة [أحجام الأجهزة (deviceSizes)](#devicesizes) لتشكيل المصفوفة الكاملة للأحجام المستخدمة لإنشاء [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) للصور.
+
+السبب في وجود قائمتين منفصلتين هو أن `imageSizes` تُستخدم فقط للصور التي توفر خاصية [`sizes`](#sizes)، مما يشير إلى أن الصورة أصغر من العرض الكامل للشاشة. **لذلك، يجب أن تكون جميع الأحجام في `imageSizes` أصغر من أصغر حجم في `deviceSizes`.**
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+}
+```
+
+### `qualities`
+
+ستسمح واجهة برمجة تطبيقات [تحسين الصور (Image Optimization API)](#loader) الافتراضية تلقائيًا بجميع الجودات من 1 إلى 100. إذا كنت ترغب في تقييد الجودات المسموح بها، يمكنك إضافة تكوين إلى `next.config.js`.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    qualities: [25, 50, 75],
+  },
+}
+```
+
+في المثال أعلاه، يُسمح فقط بثلاث جودات: 25، 50، و75. إذا لم تتطابق خاصية [`quality`](#quality) مع قيمة في هذه المصفوفة، فستفشل الصورة بـ 400 طلب غير صالح.
+
+### `formats`
+
+ستكتشف واجهة برمجة تطبيقات [تحسين الصور (Image Optimization API)](#loader) الافتراضية تلقائيًا تنسيقات الصور المدعومة من المتصفح عبر رأس `Accept` للطلب.
+
+إذا تطابق رأس `Accept` أكثر من تنسيق واحد من التنسيقات المكونة، يتم استخدام أول تطابق في المصفوفة. لذلك، ترتيب المصفوفة مهم. إذا لم يكن هناك تطابق (أو إذا كانت الصورة المصدر [متحركة](#animated-images))، ستعود واجهة برمجة التطبيقات إلى تنسيق الصورة الأصلي.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الافتراضي أدناه.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/webp'],
+  },
+}
+```
+
+يمكنك تمكين دعم AVIF بالتكوين التالي.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+  },
+}
+```
+
+> **جيد للمعرفة**:
+>
+> - يستغرق AVIF عادةً 20٪ وقتًا أطول للتشفير ولكنه يضغط بنسبة 20٪ أصغر مقارنة بـ WebP. هذا يعني أن المرة الأولى التي يتم فيها طلب صورة، ستكون عادةً أبطأ ثم الطلبات اللاحقة التي يتم تخزينها مؤقتًا ستكون أسرع.
+> - إذا كنت تستضيف بنفسك مع وكيل/شبكة توصيل محتوى (Proxy/CDN) أمام Next.js، فيجب تكوين الوكيل لإعادة توجيه رأس `Accept`.
+
+## سلوك التخزين المؤقت
+
+يصف ما يلي خوارزمية التخزين المؤقت لـ [المحمل (loader)](#loader) الافتراضي. بالنسبة لجميع المحملات الأخرى، يرجى الرجوع إلى وثائق مزود السحابة الخاص بك.
+
+يتم تحسين الصور ديناميكيًا عند الطلب وتخزينها في دليل `<distDir>/cache/images`. سيتم تقديم ملف الصورة المحسن للطلبات اللاحقة حتى يصل تاريخ الانتهاء. عند إجراء طلب يتطابق مع ملف مخزن مؤقتًا ولكن منتهي الصلاحية، يتم تقديم الصورة المنتهية الصلاحية على الفور. ثم يتم تحسين الصورة مرة أخرى في الخلفية (يُسمى أيضًا إعادة التحقق) وحفظها في ذاكرة التخزين المؤقت مع تاريخ انتهاء جديد.
+
+يمكن تحديد حالة التخزين المؤقت للصورة عن طريق قراءة قيمة رأس الاستجابة `x-nextjs-cache`. القيم الممكنة هي التالية:
+
+- `MISS` - المسار غير موجود في ذاكرة التخزين المؤقت (يحدث مرة واحدة على الأكثر، في الزيارة الأولى)
+- `STALE` - المسار موجود في ذاكرة التخزين المؤقت ولكن تجاوز وقت إعادة التحقق لذلك سيتم تحديثه في الخلفية
+- `HIT` - المسار موجود في ذاكرة التخزين المؤقت ولم يتجاوز وقت إعادة التحقق
+
+يتم تعريف تاريخ الانتهاء (أو بالأحرى الحد الأقصى للعمر) إما عن طريق تكوين [`minimumCacheTTL`](#minimumcachettl) أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر. على وجه التحديد، يتم استخدام قيمة `max-age` لرأس `Cache-Control`. إذا تم العثور على كل من `s-maxage` و `max-age`، فإن `s-maxage` يكون مفضلًا. يتم أيضًا تمرير `max-age` إلى أي عملاء لاحقين بما في ذلك شبكات توصيل المحتوى والمتصفحات.
+
+- يمكنك تكوين [`minimumCacheTTL`](#minimumcachettl) لزيادة مدة التخزين المؤقت عندما لا يتضمن رأس الصورة الأصلية `Cache-Control` أو كانت القيمة منخفضة جدًا.
+- يمكنك تكوين [`deviceSizes`](#devicesizes) و [`imageSizes`](#imagesizes) لتقليل العدد الإجمالي للصور الممكن إنشاؤها.
+- يمكنك تكوين [formats](#formats) لتعطيل تنسيقات متعددة لصالح تنسيق صورة واحد.
+
+### `minimumCacheTTL`
+
+يمكنك تكوين وقت البقاء (TTL) بالثواني للصور المحسنة المخزنة مؤقتًا. في كثير من الحالات، من الأفضل استخدام [استيراد صورة ثابتة (Static Image Import)](/docs/app/building-your-application/optimizing/images#local-images) والتي ستقوم تلقائيًا بتجزئة محتويات الملف وتخزين الصورة مؤقتًا إلى الأبد مع رأس `Cache-Control` بقيمة `immutable`.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    minimumCacheTTL: 60,
+  },
+}
+```
+
+يتم تعريف تاريخ انتهاء الصورة المحسنة (أو بالأحرى الحد الأقصى للعمر) إما عن طريق `minimumCacheTTL` أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر.
+
+إذا كنت بحاجة إلى تغيير سلوك التخزين المؤقت لكل صورة، يمكنك تكوين [`headers`](/docs/app/api-reference/next-config-js/headers) لتعيين رأس `Cache-Control` على الصورة الأصلية (مثل `/some-asset.jpg`، وليس `/_next/image` نفسها).
+
+لا توجد آلية لإبطال ذاكرة التخزين المؤقت في هذا الوقت، لذا من الأفضل الحفاظ على `minimumCacheTTL` منخفضًا. وإلا فقد تحتاج إلى تغيير [`src`](#src) يدويًا أو حذف `<distDir>/cache/images`.
+
+### `disableStaticImages`
+
+يسمح السلوك الافتراضي باستيراد الملفات الثابتة مثل `import icon from './icon.png'` ثم تمريرها إلى خاصية `src`.
+
+في بعض الحالات، قد ترغب في تعطيل هذه الميزة إذا كانت تتعارض مع ملحقات أخرى تتوقع أن يكون الاستيراد مختلفًا.
+
+يمكنك تعطيل استيراد الصور الثابتة داخل `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
+### `dangerouslyAllowSVG`
+
+لا يقوم [المحمل (loader)](#loader) الافتراضي بتحسين صور SVG لعدة أسباب. أولاً، SVG هو تنسيق متجه مما يعني أنه يمكن تغيير حجمه دون فقدان الجودة. ثانياً، يحتوي SVG على العديد من الميزات المشابهة لـ HTML/CSS، مما قد يؤدي إلى ثغرات أمنية بدون [رؤوس سياسة أمان المحتوى (CSP)](/docs/app/api-reference/next-config-js/headers#content-security-policy) المناسبة.
+
+لذلك، نوصي باستخدام خاصية [`unoptimized`](#unoptimized) عندما يكون معروفاً أن خاصية [`src`](#src) تشير إلى صورة SVG. يحدث هذا تلقائياً عندما ينتهي `src` بـ `".svg"`.
+
+ومع ذلك، إذا كنت بحاجة إلى تقديم صور SVG باستخدام واجهة برمجة تطبيقات تحسين الصور الافتراضية، يمكنك تعيين `dangerouslyAllowSVG` داخل ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    dangerouslyAllowSVG: true,
+    contentDispositionType: 'attachment',
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
+}
+```
+
+بالإضافة إلى ذلك، يُوصى بشدة بتعيين `contentDispositionType` لإجبار المتصفح على تنزيل الصورة، وكذلك تعيين `contentSecurityPolicy` لمنع تنفيذ البرامج النصية المضمنة في الصورة.
+
+## الصور المتحركة
+
+سيقوم [المحمل (loader)](#loader) الافتراضي تلقائياً بتجاوز تحسين الصور للصور المتحركة وعرض الصورة كما هي.
+
+الكشف التلقائي عن الملفات المتحركة هو جهد أفضل ويدعم تنسيقات GIF وAPNG وWebP. إذا كنت ترغب في تجاوز تحسين الصور بشكل صريح لصورة متحركة معينة، استخدم خاصية [unoptimized](#unoptimized).
+
+## الصور المتجاوبة
+
+تحتوي مجموعة `srcset` المُنشأة افتراضياً على صور `1x` و `2x` لدعم نسب بكسل مختلفة للأجهزة. ومع ذلك، قد ترغب في عرض صورة متجاوبة تتمدد مع نافذة العرض. في هذه الحالة، ستحتاج إلى تعيين [`sizes`](#sizes) بالإضافة إلى `style` (أو `className`).
+
+يمكنك عرض صورة متجاوبة باستخدام إحدى الطرق التالية.
+
+### صورة متجاوبة باستخدام استيراد ثابت
+
+إذا لم تكن الصورة المصدر ديناميكية، يمكنك استيرادها بشكل ثابت لإنشاء صورة متجاوبة:
+
+```jsx filename="components/author.js"
+import Image from 'next/image'
+import me from '../photos/me.jpg'
+
+export default function Author() {
+  return (
+    <Image
+      src={me}
+      alt="صورة المؤلف"
+      sizes="100vw"
+      style={{
+        width: '100%',
+        height: 'auto',
+      }}
+    />
+  )
+}
+```
+
+جربها:
+
+- [عرض الصورة المتجاوبة مع نافذة العرض](https://image-component.nextjs.gallery/responsive)
+
+### صورة متجاوبة مع نسبة العرض إلى الارتفاع
+
+إذا كانت الصورة المصدر ديناميكية أو عنوان URL بعيد، ستحتاج أيضاً إلى توفير `width` و `height` لتعيين نسبة العرض إلى الارتفاع الصحيحة للصورة المتجاوبة:
+
+```jsx filename="components/page.js"
+import Image from 'next/image'
+
+export default function Page({ photoUrl }) {
+  return (
+    <Image
+      src={photoUrl}
+      alt="صورة المؤلف"
+      sizes="100vw"
+      style={{
+        width: '100%',
+        height: 'auto',
+      }}
+      width={500}
+      height={300}
+    />
+  )
+}
+```
+
+جربها:
+
+- [عرض الصورة المتجاوبة مع نافذة العرض](https://image-component.nextjs.gallery/responsive)
+
+### صورة متجاوبة مع `fill`
+
+إذا كنت لا تعرف نسبة العرض إلى الارتفاع، ستحتاج إلى تعيين خاصية [`fill`](#fill) وتعيين `position: relative` على العنصر الأب. اختيارياً، يمكنك تعيين نمط `object-fit` اعتماداً على السلوك المطلوب للتمدد مقابل الاقتصاص:
+
+```jsx filename="app/page.js"
+import Image from 'next/image'
+
+export default function Page({ photoUrl }) {
+  return (
+    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+      <Image
+        src={photoUrl}
+        alt="صورة المؤلف"
+        sizes="300px"
+        fill
+        style={{
+          objectFit: 'contain',
+        }}
+      />
+    </div>
+  )
+}
+```
+
+جربها:
+
+- [عرض خاصية `fill`](https://image-component.nextjs.gallery/fill)
+
+## كشف السمة باستخدام CSS
+
+إذا كنت ترغب في عرض صورة مختلفة لوضعي الضوء والظلام، يمكنك إنشاء مكون جديد يضم مكوني `<Image>` ويعرض الصورة الصحيحة بناءً على استعلام CSS الإعلامي.
+
+```css filename="components/theme-image.module.css"
+.imgDark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .imgLight {
+    display: none;
+  }
+  .imgDark {
+    display: unset;
+  }
+}
+```
+
+```tsx filename="components/theme-image.tsx" switcher
+import styles from './theme-image.module.css'
+import Image, { ImageProps } from 'next/image'
+
+type Props = Omit<ImageProps, 'src' | 'priority' | 'loading'> & {
+  srcLight: string
+  srcDark: string
+}
+
+const ThemeImage = (props: Props) => {
+  const { srcLight, srcDark, ...rest } = props
+
+  return (
+    <>
+      <Image {...rest} src={srcLight} className={styles.imgLight} />
+      <Image {...rest} src={srcDark} className={styles.imgDark} />
+    </>
+  )
+}
+```
+
+```jsx filename="components/theme-image.js" switcher
+import styles from './theme-image.module.css'
+import Image from 'next/image'
+
+const ThemeImage = (props) => {
+  const { srcLight, srcDark, ...rest } = props
+
+  return (
+    <>
+      <Image {...rest} src={srcLight} className={styles.imgLight} />
+      <Image {...rest} src={srcDark} className={styles.imgDark} />
+    </>
+  )
+}
+```
+
+> **معلومة جيدة**: يضمن السلوك الافتراضي لـ `loading="lazy"` تحميل الصورة الصحيحة فقط. لا يمكنك استخدام `priority` أو `loading="eager"` لأن ذلك سيؤدي إلى تحميل كلتا الصورتين. بدلاً من ذلك، يمكنك استخدام [`fetchPriority="high"`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority).
+
+جربها:
+
+- [عرض كشف السمة للوضعين الفاتح والداكن](https://image-component.nextjs.gallery/theme)
+
+## getImageProps
+
+للحالات الأكثر تقدمًا، يمكنك استدعاء `getImageProps()` للحصول على الخصائص التي سيتم تمريرها إلى عنصر `<img>` الأساسي، وبدلاً من ذلك تمريرها إلى مكون آخر أو نمط أو لوحة رسم (canvas)، إلخ.
+
+هذا أيضًا يتجنب استدعاء `useState()` من React مما قد يؤدي إلى أداء أفضل، ولكنه لا يمكن استخدامه مع خاصية [`placeholder`](#placeholder) لأن العنصر النائب لن يتم إزالته أبدًا.
+
+### كشف السمة باستخدام `<picture>`
+
+إذا كنت ترغب في عرض صورة مختلفة لوضعي الضوء والظلام، يمكنك استخدام عنصر [`<picture>`](https://developer.mozilla.org/docs/Web/HTML/Element/picture) لعرض صورة مختلفة بناءً على [نظام الألوان المفضل](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) للمستخدم.
+
+```jsx filename="app/page.js"
+import { getImageProps } from 'next/image'
+
+export default function Page() {
+  const common = { alt: 'مثال السمة', width: 800, height: 400 }
+  const {
+    props: { srcSet: dark },
+  } = getImageProps({ ...common, src: '/dark.png' })
+  const {
+    props: { srcSet: light, ...rest },
+  } = getImageProps({ ...common, src: '/light.png' })
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
+      <source media="(prefers-color-scheme: light)" srcSet={light} />
+      <img {...rest} />
+    </picture>
+  )
+}
+```
+
+### التوجيه الفني (Art Direction)
+
+إذا كنت ترغب في عرض صورة مختلفة للهواتف المحمولة وأجهزة الكمبيوتر، والمعروف أحيانًا باسم [التوجيه الفني](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)، يمكنك توفير خصائص مختلفة لـ `src` و `width` و `height` و `quality` لـ `getImageProps()`.
+
+```jsx filename="app/page.js"
+import { getImageProps } from 'next/image'
+
+export default function Home() {
+  const common = { alt: 'مثال التوجيه الفني', sizes: '100vw' }
+  const {
+    props: { srcSet: desktop },
+  } = getImageProps({
+    ...common,
+    width: 1440,
+    height: 875,
+    quality: 80,
+    src: '/desktop.jpg',
+  })
+  const {
+    props: { srcSet: mobile, ...rest },
+  } = getImageProps({
+    ...common,
+    width: 750,
+    height: 1334,
+    quality: 70,
+    src: '/mobile.jpg',
+  })
+
+  return (
+    <picture>
+      <source media="(min-width: 1000px)" srcSet={desktop} />
+      <source media="(min-width: 500px)" srcSet={mobile} />
+      <img {...rest} style={{ width: '100%', height: 'auto' }} />
+    </picture>
+  )
+}
+```
+
+### خلفية CSS
+
+يمكنك حتى تحويل سلسلة `srcSet` إلى دالة CSS [`image-set()`](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set) لتحسين صورة الخلفية.
+
+```jsx filename="app/page.js"
+import { getImageProps } from 'next/image'
+
+function getBackgroundImage(srcSet = '') {
+  const imageSet = srcSet
+    .split(', ')
+    .map((str) => {
+      const [url, dpi] = str.split(' ')
+      return `url("${url}") ${dpi}`
+    })
+    .join(', ')
+  return `image-set(${imageSet})`
+}
+
+export default function Home() {
+  const {
+    props: { srcSet },
+  } = getImageProps({ alt: '', width: 128, height: 128, src: '/img.png' })
+  const backgroundImage = getBackgroundImage(srcSet)
+  const style = { height: '100vh', width: '100vw', backgroundImage }
+
+  return (
+    <main style={style}>
+      <h1>مرحباً بالعالم</h1>
+    </main>
+  )
+}
+```
+
+## أخطاء متصفح معروفة
+
+يستخدم مكون `next/image` هذا [تحميل كسول](https://caniuse.com/loading-lazy-attr) أصلي من المتصفح، والذي قد يعود إلى التحميل المتعطش للمتصفحات الأقدم من Safari 15.4. عند استخدام العنصر النائب blur-up، ستعود المتصفحات الأقدم من Safari 12 إلى عنصر نائب فارغ. عند استخدام أنماط مع `width`/`height` بقيمة `auto`، من الممكن التسبب في [تحول التخطيط (Layout Shift)](https://web.dev/cls/) على المتصفحات الأقدم من Safari 15 التي لا [تحافظ على نسبة العرض إلى الارتفاع](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes). لمزيد من التفاصيل، راجع [هذا الفيديو من MDN](https://www.youtube.com/watch?v=4-d_SoCHeWE).
+
+- [Safari 15 - 16.3](https://bugs.webkit.org/show_bug.cgi?id=243601) يعرض حدًا رماديًا أثناء التحميل. Safari 16.4 [أصلح هذه المشكلة](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/#:~:text=Now%20in%20Safari%2016.4%2C%20a%20gray%20line%20no%20longer%20appears%20to%20mark%20the%20space%20where%20a%20lazy%2Dloaded%20image%20will%20appear%20once%20it%E2%80%99s%20been%20loaded.). الحلول الممكنة:
+  - استخدم CSS `@supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }`
+  - استخدم [`priority`](#priority) إذا كانت الصورة فوق الطية
+- [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) يعرض خلفية بيضاء أثناء التحميل. الحلول الممكنة:
+  - تمكين تنسيقات [`formats`](#formats) AVIF
+  - استخدم [`placeholder`](#placeholder)
+
+## سجل الإصدارات
+
+| الإصدار    | التغييرات                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v14.2.23` | تمت إضافة تكوين `qualities`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `v14.2.15` | تمت إضافة خاصية `decoding` وتكوين `localPatterns`.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `v14.2.14` | تمت إضافة خاصية `remotePatterns.search`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `v14.2.0`  | تمت إضافة خاصية `overrideSrc`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `v14.1.0`  | أصبحت `getImageProps()` مستقرة.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `v14.0.0`  | تم إهمال خاصية `onLoadingComplete` وتكوين `domains`.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `v13.4.14` | دعم خاصية `placeholder` لـ `data:/image...`.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `v13.2.0`  | تمت إضافة تكوين `contentDispositionType`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `v13.0.6`  | تمت إضافة خاصية `ref`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `v13.0.0`  | تم تغيير اسم استيراد `next/image` إلى `next/legacy/image`. تم تغيير اسم استيراد `next/future/image` إلى `next/image`. يتوفر [أداة تحويل تلقائي](/docs/app/building-your-application/upgrading/codemods#next-image-to-legacy-image) لإعادة تسمية الاستيرادات بشكل آلي وآمن. تمت إزالة غلاف `<span>`. تمت إزالة الخصائص `layout`, `objectFit`, `objectPosition`, `lazyBoundary`, `lazyRoot`. أصبحت `alt` إلزامية. تستقبل `onLoadingComplete` مرجعًا لعنصر `img`. تمت إزالة تكوين المحمل المدمج. |
+| `v12.3.0`  | أصبح تكوين `remotePatterns` و `unoptimized` مستقرًا.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `v12.2.0`  | تمت إضافة تكوين `remotePatterns` التجريبي وتكوين `unoptimized` التجريبي. تمت إزالة `layout="raw"`.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `v12.1.1`  | تمت إضافة خاصية `style`. تمت إضافة دعم تجريبي لـ `layout="raw"`.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `v12.1.0`  | تمت إضافة تكوين `dangerouslyAllowSVG` و `contentSecurityPolicy`.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `v12.0.9`  | تمت إضافة خاصية `lazyRoot`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `v12.0.0`  | تمت إضافة تكوين `formats`.<br/>تمت إضافة دعم AVIF.<br/>تم تغيير غلاف `<div>` إلى `<span>`.                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `v11.1.0`  | تمت إضافة خصائص `onLoadingComplete` و `lazyBoundary`.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `v11.0.0`  | دعم خاصية `src` للاستيراد الثابت.<br/>تمت إضافة خاصية `placeholder`.<br/>تمت إضافة خاصية `blurDataURL`.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `v10.0.5`  | تمت إضافة خاصية `loader`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `v10.0.1`  | تمت إضافة خاصية `layout`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `v10.0.0`  | تم تقديم `next/image`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/index.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/index.mdx
new file mode 100644
index 00000000..4514d0d0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:54.514Z
+title: المكونات
+description: مرجع API للمكونات المدمجة في Next.js.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/link.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/link.mdx
new file mode 100644
index 00000000..8e5c5c3d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/link.mdx
@@ -0,0 +1,511 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:36:36.329Z
+title: مكون <Link>
+description: تمكين التنقل السريع من جانب العميل باستخدام مكون `next/link` المدمج.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+<PagesOnly>
+
+<details>
+  <summary>أمثلة</summary>
+
+- [Hello World](https://github.com/vercel/next.js/tree/canary/examples/hello-world)
+- [Active className on Link](https://github.com/vercel/next.js/tree/canary/examples/active-class-name)
+
+</details>
+
+</PagesOnly>
+
+`<Link>` هو مكون React يمتد عنصر HTML `<a>` لتوفير [الجلب المسبق (Prefetching)](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) والتنقل من جانب العميل بين المسارات. وهو الطريقة الأساسية للتنقل بين المسارات في Next.js.
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">Dashboard</Link>
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/dashboard">Dashboard</Link>
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+على سبيل المثال، ضع في الاعتبار دليل `pages` مع الملفات التالية:
+
+- `pages/index.js`
+- `pages/about.js`
+- `pages/blog/[slug].js`
+
+يمكننا إنشاء رابط لكل من هذه الصفحات كما يلي:
+
+```jsx
+import Link from 'next/link'
+
+function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/">Home</Link>
+      </li>
+      <li>
+        <Link href="/about">About Us</Link>
+      </li>
+      <li>
+        <Link href="/blog/hello-world">Blog Post</Link>
+      </li>
+    </ul>
+  )
+}
+
+export default Home
+```
+
+</PagesOnly>
+
+## الخصائص (Props)
+
+فيما يلي ملخص للخصائص المتاحة لمكون Link:
+
+<PagesOnly>
+
+| الخاصية                  | مثال                 | النوع             | مطلوب |
+| ------------------------ | ------------------- | ---------------- | -------- |
+| [`href`](#href-required) | `href="/dashboard"` | String أو Object | نعم      |
+| [`replace`](#replace)    | `replace={false}`   | Boolean          | -        |
+| [`scroll`](#scroll)      | `scroll={false}`    | Boolean          | -        |
+| [`prefetch`](#prefetch)  | `prefetch={false}`  | Boolean          | -        |
+
+</PagesOnly>
+
+<AppOnly>
+
+| الخاصية                  | مثال                 | النوع             | مطلوب |
+| ------------------------ | ------------------- | ---------------- | -------- |
+| [`href`](#href-required) | `href="/dashboard"` | String أو Object | نعم      |
+| [`replace`](#replace)    | `replace={false}`   | Boolean          | -        |
+| [`scroll`](#scroll)      | `scroll={false}`    | Boolean          | -        |
+| [`prefetch`](#prefetch)  | `prefetch={false}`  | Boolean أو null  | -        |
+
+</AppOnly>
+
+> **معلومة مفيدة**: يمكن إضافة سمات عنصر `<a>` مثل `className` أو `target="_blank"` إلى `<Link>` كخصائص وسيتم تمريرها إلى عنصر `<a>` الأساسي.
+
+### `href` (مطلوب)
+
+المسار أو URL للانتقال إليه.
+
+```jsx
+<Link href="/dashboard">Dashboard</Link>
+```
+
+يمكن أن يقبل `href` أيضًا كائنًا، على سبيل المثال:
+
+```jsx
+// الانتقال إلى /about?name=test
+<Link
+  href={{
+    pathname: '/about',
+    query: { name: 'test' },
+  }}
+>
+  About
+</Link>
+```
+
+### `replace`
+
+**القيمة الافتراضية `false`.** عندما تكون `true`، سيستبدل `next/link` حالة التاريخ الحالية بدلاً من إضافة URL جديد إلى [سجل المتصفح (History API)](https://developer.mozilla.org/docs/Web/API/History_API).
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" replace>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" replace>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+### `scroll`
+
+**القيمة الافتراضية `true`.** السلوك الافتراضي لـ `<Link>` هو التمرير إلى أعلى المسار الجديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام. عندما تكون `false`، لن يقوم `next/link` بالتمرير إلى أعلى الصفحة بعد التنقل.
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" scroll={false}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" scroll={false}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - سيؤدي Next.js إلى التمرير إلى [الصفحة](/docs/app/building-your-application/routing/pages-and-layouts#pages) إذا لم تكن مرئية في نافذة العرض عند التنقل.
+
+### `prefetch`
+
+<AppOnly>
+
+يحدث الجلب المسبق (Prefetching) عندما يدخل مكون `<Link />` نافذة عرض المستخدم (مبدئيًا أو عبر التمرير). يقوم Next.js بجلب وتحميل المسار المرتبط (المشار إليه بـ `href`) وبياناته في الخلفية لتحسين أداء التنقل من جانب العميل. يتم تمكين الجلب المسبق فقط في بيئة الإنتاج.
+
+- **`null` (افتراضي)**: يعتمد سلوك الجلب المسبق على ما إذا كان المسار ثابتًا أو ديناميكيًا. بالنسبة للمسارات الثابتة، سيتم جلب المسار بالكامل (بما في ذلك جميع بياناته). بالنسبة للمسارات الديناميكية، سيتم جلب جزء المسار حتى أقرب مقطع به حد [`loading.js`](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states).
+- `true`: سيتم جلب المسار بالكامل لكل من المسارات الثابتة والديناميكية.
+- `false`: لن يحدث الجلب المسبق أبدًا سواء عند الدخول إلى نافذة العرض أو عند التمرير.
+
+```tsx filename="app/page.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" prefetch={false}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" prefetch={false}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+يحدث الجلب المسبق (Prefetching) عندما يدخل مكون `<Link />` نافذة عرض المستخدم (مبدئيًا أو عبر التمرير). يقوم Next.js بجلب وتحميل المسار المرتبط (المشار إليه بـ `href`) وبياناته في الخلفية لتحسين أداء التنقل من جانب العميل. يتم تمكين الجلب المسبق فقط في بيئة الإنتاج.
+
+- **`true` (افتراضي)**: سيتم جلب المسار بالكامل وبياناته.
+- `false`: لن يحدث الجلب المسبق عند الدخول إلى نافذة العرض، ولكن سيحدث عند التمرير. إذا كنت ترغب في إزالة الجلب تمامًا عند التمرير أيضًا، ففكر في استخدام علامة `<a>` أو [التبديل التدريجي](/docs/app/building-your-application/upgrading/app-router-migration) إلى App Router، والذي يتيح تعطيل الجلب المسبق عند التمرير أيضًا.
+
+```tsx filename="pages/index.tsx" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" prefetch={false}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/dashboard" prefetch={false}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+## خصائص أخرى
+
+### `legacyBehavior`
+
+لم يعد عنصر `<a>` مطلوبًا كطفل لـ `<Link>`. أضف خاصية `legacyBehavior` لاستخدام السلوك القديم أو قم بإزالة `<a>` للترقية. يتوفر [أداة تحويل تلقائي (codemod)](/docs/app/building-your-application/upgrading/codemods#new-link) لترقية الكود تلقائيًا.
+
+> **معلومة مفيدة**: عندما لا يتم تعيين `legacyBehavior` إلى `true`، يمكن تمرير جميع خصائص [علامة `anchor`](https://developer.mozilla.org/docs/Web/HTML/Element/a) إلى `next/link` أيضًا مثل `className`، `onClick`، إلخ.
+
+### `passHref`
+
+يجبر `Link` على إرسال خاصية `href` إلى الطفل. القيمة الافتراضية `false`.
+
+### `scroll`
+
+التمرير إلى أعلى الصفحة بعد التنقل. القيمة الافتراضية `true`.
+
+### `shallow`
+
+تحديث مسار الصفحة الحالية دون إعادة تشغيل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)، [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) أو [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props). القيمة الافتراضية `false`.
+
+### `locale`
+
+يتم إضافة اللغة النشطة تلقائيًا. تسمح `locale` بتوفير لغة مختلفة. عندما تكون `false` يجب أن يتضمن `href` اللغة حيث يتم تعطيل السلوك الافتراضي.
+
+</PagesOnly>
+
+## أمثلة
+
+### الربط مع المسارات الديناميكية
+
+بالنسبة للمسارات الديناميكية، يمكن أن يكون استخدام القوالب النصية (template literals) مفيدًا لإنشاء مسار الرابط.
+
+<PagesOnly>
+
+على سبيل المثال، يمكنك إنشاء قائمة من الروابط للمسار الديناميكي `pages/blog/[slug].js`.
+
+```jsx filename="pages/blog/index.js"
+import Link from 'next/link'
+
+function Posts({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Posts
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+على سبيل المثال، يمكنك إنشاء قائمة من الروابط للمسار الديناميكي `app/blog/[slug]/page.js`:
+
+```jsx filename="app/blog/page.js"
+import Link from 'next/link'
+
+function Page({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+</AppOnly>
+
+### إذا كان الطفل مكونًا مخصصًا يلف علامة `<a>`
+
+<AppOnly>
+
+إذا كان طفل `Link` هو مكون مخصص يلف علامة `<a>`، فيجب عليك إضافة `passHref` إلى `Link`. هذا ضروري إذا كنت تستخدم مكتبات مثل [styled-components](https://styled-components.com/). بدون ذلك، لن تحتوي علامة `<a>` على سمة `href`، مما يؤثر على إمكانية الوصول إلى موقعك وقد يؤثر على SEO. إذا كنت تستخدم [ESLint](/docs/app/building-your-application/configuring/eslint#eslint-plugin)، فهناك قاعدة مدمجة `next/link-passhref` لضمان الاستخدام الصحيح لـ `passHref`.
+
+</AppOnly>
+
+<PagesOnly>
+
+إذا كان طفل `Link` هو مكون مخصص يلف علامة `<a>`، فيجب عليك إضافة `passHref` إلى `Link`. هذا ضروري إذا كنت تستخدم مكتبات مثل [styled-components](https://styled-components.com/). بدون ذلك، لن تحتوي علامة `<a>` على سمة `href`، مما يؤثر على إمكانية الوصول إلى موقعك وقد يؤثر على SEO. إذا كنت تستخدم [ESLint](/docs/pages/building-your-application/configuring/eslint#eslint-plugin)، فهناك قاعدة مدمجة `next/link-passhref` لضمان الاستخدام الصحيح لـ `passHref`.
+
+</PagesOnly>
+
+```jsx
+import Link from 'next/link'
+import styled from 'styled-components'
+
+// هذا ينشئ مكونًا مخصصًا يلف علامة <a>
+const RedLink = styled.a`
+  color: red;
+`
+
+function NavLink({ href, name }) {
+  return (
+    <Link href={href} passHref legacyBehavior>
+      <RedLink>{name}</RedLink>
+    </Link>
+  )
+}
+
+export default NavLink
+```
+
+- إذا كنت تستخدم ميزة JSX pragma في [emotion](https://emotion.sh/) (`@jsx jsx`)، فيجب عليك استخدام `passHref` حتى إذا كنت تستخدم علامة `<a>` مباشرة.
+- يجب أن يدعم المكون خاصية `onClick` لتنشيط التنقل بشكل صحيح.
+
+### إذا كان الطفل مكونًا وظيفيًا
+
+إذا كان طفل `Link` مكونًا وظيفيًا، بالإضافة إلى استخدام `passHref` و `legacyBehavior`، يجب عليك تغليف المكون في [`React.forwardRef`](https://react.dev/reference/react/forwardRef):
+
+```jsx
+import Link from 'next/link'
+
+// يجب تمرير `onClick`، `href`، و `ref` إلى عنصر DOM
+// للمعالجة الصحيحة
+const MyButton = React.forwardRef(({ onClick, href }, ref) => {
+  return (
+    <a href={href} onClick={onClick} ref={ref}>
+      Click Me
+    </a>
+  )
+})
+
+function Home() {
+  return (
+    <Link href="/about" passHref legacyBehavior>
+      <MyButton />
+    </Link>
+  )
+}
+
+export default Home
+```
+
+### مع كائن URL
+
+يمكن أن يتلقى `Link` أيضًا كائن URL وسيقوم تلقائيًا بتنسيقه لإنشاء سلسلة URL. إليك كيفية القيام بذلك:
+
+```jsx
+import Link from 'next/link'
+
+function Home() {
+  return (
+    <ul>
+      <li>
+        <Link
+          href={{
+            pathname: '/about',
+            query: { name: 'test' },
+          }}
+        >
+          About us
+        </Link>
+      </li>
+      <li>
+        <Link
+          href={{
+            pathname: '/blog/[slug]',
+            query: { slug: 'my-post' },
+          }}
+        >
+          Blog Post
+        </Link>
+      </li>
+    </ul>
+  )
+}
+
+export default Home
+```
+
+يحتوي المثال أعلاه على رابط إلى:
+
+- مسار محدد مسبقًا: `/about?name=test`
+- [مسار ديناميكي](/docs/app/building-your-application/routing/dynamic-routes): `/blog/my-post`
+
+يمكنك استخدام كل خاصية كما هو موضح في [توثيق وحدة Node.js URL](https://nodejs.org/api/url.html#url_url_strings_and_url_objects).
+
+### استبدال URL بدلاً من الإضافة
+
+السلوك الافتراضي لمكون `Link` هو إضافة (`push`) URL جديد إلى سجل `history`. يمكنك استخدام خاصية `replace` لمنع إضافة إدخال جديد، كما في المثال التالي:
+
+```jsx
+<Link href="/about" replace>
+  About us
+</Link>
+```
+
+### تعطيل التمرير إلى أعلى الصفحة
+
+السلوك الافتراضي لـ `Link` هو التمرير إلى أعلى الصفحة. عندما يكون هناك hash محدد، سوف ينتقل إلى id المحدد، مثل علامة `<a>` العادية. لمنع التمرير إلى الأعلى / hash، يمكن إضافة `scroll={false}` إلى `Link`:
+
+```jsx
+<Link href="/#hashid" scroll={false}>
+  تعطيل التمرير إلى الأعلى
+</Link>
+```
+
+### Middleware
+
+من الشائع استخدام [Middleware](/docs/app/building-your-application/routing/middleware) للمصادقة أو لأغراض أخرى تتضمن إعادة كتابة المستخدم إلى صفحة مختلفة. لكي يعمل مكون `<Link />` بشكل صحيح في جلب الروابط مسبقًا مع إعادة الكتابة عبر Middleware، تحتاج إلى إخبار Next.js بكل من URL المعروض وURL المطلوب جلبها مسبقًا. هذا مطلوب لتجنب عمليات الجلب غير الضرورية إلى middleware لمعرفة المسار الصحيح للجلب المسبق.
+
+على سبيل المثال، إذا كنت تريد تقديم مسار `/dashboard` الذي يحتوي على مشاهدات للمستخدمين المصادق عليهم والزوار، يمكنك إضافة شيء مشابه لما يلي في Middleware الخاص بك لإعادة توجيه المستخدم إلى الصفحة الصحيحة:
+
+```js filename="middleware.js"
+export function middleware(req) {
+  const nextUrl = req.nextUrl
+  if (nextUrl.pathname === '/dashboard') {
+    if (req.cookies.authToken) {
+      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
+    } else {
+      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
+    }
+  }
+}
+```
+
+في هذه الحالة، سترغب في استخدام الكود التالي في مكون `<Link />` الخاص بك:
+
+```js
+import Link from 'next/link'
+import useIsAuthed from './hooks/useIsAuthed'
+
+export default function Page() {
+  const isAuthed = useIsAuthed()
+  const path = isAuthed ? '/auth/dashboard' : '/public/dashboard'
+  return (
+    <Link as="/dashboard" href={path}>
+      Dashboard
+    </Link>
+  )
+}
+```
+
+<PagesOnly>
+
+> **معلومة مفيدة**: إذا كنت تستخدم [المسارات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes)، فستحتاج إلى تكييف خصائص `as` و `href`. على سبيل المثال، إذا كان لديك مسار ديناميكي مثل `/dashboard/authed/[user]` تريد عرضه بشكل مختلف عبر middleware، فستكتب: `<Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>`.
+
+</PagesOnly>
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                                                         |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.0.0` | لم يعد يتطلب وسم `<a>` فرعي. تم توفير [أداة تحويل الشفرات](/docs/app/building-your-application/upgrading/codemods#remove-a-tags-from-link-components) لتحديث قاعدة الشفرة تلقائيًا. |
+| `v10.0.0` | خاصية `href` التي تشير إلى مسار ديناميكي يتم حلها تلقائيًا ولم تعد تتطلب خاصية `as`.                                                                                         |
+| `v8.0.0`  | تحسين أداء الجلب المسبق (Prefetching).                                                                                                                                                               |
+| `v1.0.0`  | تم تقديم `next/link`.                                                                                                                                                                         |
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/script.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/script.mdx
new file mode 100644
index 00000000..87f029a8
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/01-components/script.mdx
@@ -0,0 +1,470 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:35:49.163Z
+title: مكون <Script>
+description: تحسين أداء البرامج النصية الخارجية في تطبيق Next.js باستخدام مكون `next/script` المدمج.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+سيساعدك مرجع API هذا على فهم كيفية استخدام [الخصائص](#props) المتاحة لمكون Script. لميزاته واستخدامه، يرجى زيارة صفحة [تحسين البرامج النصية](/docs/app/building-your-application/optimizing/scripts).
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import Script from 'next/script'
+
+export default function Dashboard() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import Script from 'next/script'
+
+export default function Dashboard() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" />
+    </>
+  )
+}
+```
+
+## الخصائص
+
+فيما يلي ملخص للخصائص المتاحة لمكون Script:
+
+| الخاصية                 | مثال                             | النوع     | مطلوب                              |
+| ----------------------- | -------------------------------- | -------- | --------------------------------- |
+| [`src`](#src)           | `src="http://example.com/script"` | سلسلة نصية | مطلوب إلا إذا تم استخدام برنامج نصي مضمن |
+| [`strategy`](#strategy) | `strategy="lazyOnload"`           | سلسلة نصية | -                                 |
+| [`onLoad`](#onload)     | `onLoad={onLoadFunc}`             | دالة      | -                                 |
+| [`onReady`](#onready)   | `onReady={onReadyFunc}`           | دالة      | -                                 |
+| [`onError`](#onerror)   | `onError={onErrorFunc}`           | دالة      | -                                 |
+
+## الخصائص المطلوبة
+
+يتطلب مكون `<Script />` الخصائص التالية.
+
+### `src`
+
+مسار نصي يحدد عنوان URL لبرنامج نصي خارجي. يمكن أن يكون هذا عنوان URL خارجي مطلق أو مسار داخلي. خاصية `src` مطلوبة إلا إذا تم استخدام برنامج نصي مضمن.
+
+## الخصائص الاختيارية
+
+يقبل مكون `<Script />` عددًا من الخصائص الإضافية بخلاف تلك المطلوبة.
+
+### `strategy`
+
+إستراتيجية تحميل البرنامج النصي. هناك أربع إستراتيجيات مختلفة يمكن استخدامها:
+
+- `beforeInteractive`: التحميل قبل أي كود Next.js وقبل أي عملية ترطيب للصفحة.
+- `afterInteractive`: (**الافتراضي**) التحميل مبكرًا ولكن بعد حدوث بعض الترطيب على الصفحة.
+- `lazyOnload`: التحميل خلال وقت الفراغ في المتصفح.
+- `worker`: (تجريبي) التحميل في عامل ويب.
+
+### `beforeInteractive`
+
+يتم حقن البرامج النصية التي تستخدم إستراتيجية `beforeInteractive` في HTML الأولي من الخادم، وتنزيلها قبل أي وحدة Next.js، وتنفيذها بالترتيب الذي توضع فيه قبل حدوث أي ترطيب للصفحة.
+
+يتم جلب البرامج النصية المحددة بهذه الإستراتيجية مسبقًا قبل أي كود أساسي، لكن تنفيذها لا يمنع ترطيب الصفحة.
+
+<AppOnly>
+
+يجب وضع البرامج النصية `beforeInteractive` داخل تخطيط الجذر (`app/layout.tsx`) وهي مصممة لتحميل البرامج النصية المطلوبة للموقع بأكمله (أي سيتم تحميل البرنامج النصي عند تحميل أي صفحة في التطبيق من جانب الخادم).
+
+</AppOnly>
+
+<PagesOnly>
+
+يجب وضع البرامج النصية `beforeInteractive` داخل مكون `Document` (`pages/_document.js`) وهي مصممة لتحميل البرامج النصية المطلوبة للموقع بأكمله (أي سيتم تحميل البرنامج النصي عند تحميل أي صفحة في التطبيق من جانب الخادم).
+
+</PagesOnly>
+
+**يجب استخدام هذه الإستراتيجية فقط للبرامج النصية الحرجة التي تحتاج إلى جلبها قبل أن يصبح أي جزء من الصفحة تفاعليًا.**
+
+<AppOnly>
+
+```tsx filename="app/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Script
+          src="https://example.com/script.js"
+          strategy="beforeInteractive"
+        />
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import Script from 'next/script'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Script
+          src="https://example.com/script.js"
+          strategy="beforeInteractive"
+        />
+      </body>
+    </html>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/_document.js"
+import { Html, Head, Main, NextScript } from 'next/document'
+import Script from 'next/script'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+        <Script
+          src="https://example.com/script.js"
+          strategy="beforeInteractive"
+        />
+      </body>
+    </Html>
+  )
+}
+```
+
+</PagesOnly>
+
+> **ملاحظة جيدة**: سيتم دائمًا حقن البرامج النصية ذات `beforeInteractive` داخل `head` من مستند HTML بغض النظر عن مكان وضعها في المكون.
+
+بعض الأمثلة على البرامج النصية التي يجب تحميلها في أقرب وقت ممكن باستخدام `beforeInteractive`:
+
+- كاشفات الروبوتات
+- مديرو موافقات الكوكيز
+
+### `afterInteractive`
+
+يتم حقن البرامج النصية التي تستخدم إستراتيجية `afterInteractive` في HTML من جانب العميل وسيتم تحميلها بعد حدوث بعض (أو كل) الترطيب على الصفحة. **هذه هي الإستراتيجية الافتراضية** لمكون Script ويجب استخدامها لأي برنامج نصي يحتاج إلى التحميل في أقرب وقت ممكن ولكن ليس قبل أي كود Next.js أساسي.
+
+يمكن وضع البرامج النصية `afterInteractive` داخل أي صفحة أو تخطيط وسيتم تحميلها وتنفيذها فقط عند فتح تلك الصفحة (أو مجموعة الصفحات) في المتصفح.
+
+```jsx filename="app/page.js"
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="afterInteractive" />
+    </>
+  )
+}
+```
+
+بعض الأمثلة على البرامج النصية المناسبة لـ `afterInteractive`:
+
+- مديرو العلامات
+- أدوات التحليل
+
+### `lazyOnload`
+
+يتم حقن البرامج النصية التي تستخدم إستراتيجية `lazyOnload` في HTML من جانب العميل خلال وقت الفراغ في المتصفح وسيتم تحميلها بعد جلب جميع الموارد على الصفحة. يجب استخدام هذه الإستراتيجية لأي برامج نصية خلفية أو ذات أولوية منخفضة لا تحتاج إلى التحميل مبكرًا.
+
+يمكن وضع البرامج النصية `lazyOnload` داخل أي صفحة أو تخطيط وسيتم تحميلها وتنفيذها فقط عند فتح تلك الصفحة (أو مجموعة الصفحات) في المتصفح.
+
+```jsx filename="app/page.js"
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="lazyOnload" />
+    </>
+  )
+}
+```
+
+أمثلة على البرامج النصية التي لا تحتاج إلى التحميل فورًا ويمكن جلبها باستخدام `lazyOnload`:
+
+- ملحقات الدردشة الداعمة
+- أدوات وسائل التواصل الاجتماعي
+
+### `worker`
+
+> **تحذير:** إستراتيجية `worker` ليست مستقرة بعد ولا تعمل مع دليل [`app`](/docs/app/building-your-application/routing/defining-routes). استخدم بحذر.
+
+يتم تفريغ البرامج النصية التي تستخدم إستراتيجية `worker` إلى عامل ويب لتحرير الخيط الرئيسي وضمان معالجة الموارد الأساسية فقط عليه. بينما يمكن استخدام هذه الإستراتيجية لأي برنامج نصي، فهي حالة استخدام متقدمة غير مضمونة لدعم جميع البرامج النصية الخارجية.
+
+لاستخدام `worker` كإستراتيجية، يجب تمكين علامة `nextScriptWorkers` في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    nextScriptWorkers: true,
+  },
+}
+```
+
+يمكن حاليًا استخدام البرامج النصية `worker` **فقط في دليل `pages/`**:
+
+```tsx filename="pages/home.tsx" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+```jsx filename="pages/home.js" switcher
+import Script from 'next/script'
+
+export default function Home() {
+  return (
+    <>
+      <Script src="https://example.com/script.js" strategy="worker" />
+    </>
+  )
+}
+```
+
+### `onLoad`
+
+> **تحذير:** `onLoad` لا يعمل حاليًا مع مكونات الخادم ويمكن استخدامه فقط في مكونات العميل. علاوة على ذلك، لا يمكن استخدام `onLoad` مع `beforeInteractive` - فكر في استخدام `onReady` بدلاً من ذلك.
+
+تتطلب بعض البرامج النصية الخارجية من المستخدمين تشغيل كود JavaScript مرة واحدة بعد انتهاء تحميل البرنامج النصي لإنشاء محتوى أو استدعاء دالة. إذا كنت تقوم بتحميل برنامج نصي باستخدام إستراتيجية تحميل `afterInteractive` أو `lazyOnload`، فيمكنك تنفيذ الكود بعد تحميله باستخدام خاصية `onLoad`.
+
+إليك مثالًا لتنفيذ طريقة lodash فقط بعد تحميل المكتبة.
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
+        onLoad={() => {
+          console.log(_.sample([1, 2, 3, 4]))
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
+        onLoad={() => {
+          console.log(_.sample([1, 2, 3, 4]))
+        }}
+      />
+    </>
+  )
+}
+```
+
+### `onReady`
+
+> **تحذير:** `onReady` لا يعمل حاليًا مع مكونات الخادم ويمكن استخدامه فقط في مكونات العميل.
+
+تتطلب بعض البرامج النصية الخارجية من المستخدمين تشغيل كود JavaScript بعد انتهاء تحميل البرنامج النصي وفي كل مرة يتم فيها تحميل المكون (على سبيل المثال، بعد التنقل بين المسارات). يمكنك تنفيذ الكود بعد حدث تحميل البرنامج النصي عند تحميله لأول مرة ثم بعد كل إعادة تحميل لاحقة للمكون باستخدام خاصية `onReady`.
+
+إليك مثالًا لكيفية إعادة إنشاء تضمين Google Maps JS في كل مرة يتم فيها تحميل المكون:
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import { useRef } from 'react'
+import Script from 'next/script'
+
+export default function Page() {
+  const mapRef = useRef()
+
+  return (
+    <>
+      <div ref={mapRef}></div>
+      <Script
+        id="google-maps"
+        src="https://maps.googleapis.com/maps/api/js"
+        onReady={() => {
+          new google.maps.Map(mapRef.current, {
+            center: { lat: -34.397, lng: 150.644 },
+            zoom: 8,
+          })
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import { useRef } from 'react'
+import Script from 'next/script'
+
+export default function Page() {
+  const mapRef = useRef()
+
+  return (
+    <>
+      <div ref={mapRef}></div>
+      <Script
+        id="google-maps"
+        src="https://maps.googleapis.com/maps/api/js"
+        onReady={() => {
+          new google.maps.Map(mapRef.current, {
+            center: { lat: -34.397, lng: 150.644 },
+            zoom: 8,
+          })
+        }}
+      />
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx
+import { useRef } from 'react'
+import Script from 'next/script'
+
+export default function Page() {
+  const mapRef = useRef()
+
+  return (
+    <>
+      <div ref={mapRef}></div>
+      <Script
+        id="google-maps"
+        src="https://maps.googleapis.com/maps/api/js"
+        onReady={() => {
+          new google.maps.Map(mapRef.current, {
+            center: { lat: -34.397, lng: 150.644 },
+            zoom: 8,
+          })
+        }}
+      />
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+### `onError`
+
+> **تحذير:** `onError` لا يعمل حاليًا مع مكونات الخادم ويمكن استخدامه فقط في مكونات العميل. لا يمكن استخدام `onError` مع إستراتيجية التحميل `beforeInteractive`.
+
+في بعض الأحيان يكون من المفيد اكتشاف فشل تحميل برنامج نصي. يمكن التعامل مع هذه الأخطاء باستخدام خاصية `onError`:
+
+<AppOnly>
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onError={(e: Error) => {
+          console.error('فشل تحميل البرنامج النصي', e)
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onError={(e: Error) => {
+          console.error('فشل تحميل البرنامج النصي', e)
+        }}
+      />
+    </>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx
+import Script from 'next/script'
+
+export default function Page() {
+  return (
+    <>
+      <Script
+        src="https://example.com/script.js"
+        onError={(e: Error) => {
+          console.error('فشل تحميل البرنامج النصي', e)
+        }}
+      />
+    </>
+  )
+}
+```
+
+</PagesOnly>
+
+## سجل الإصدارات
+
+| الإصدار     | التغييرات                                                                 |
+| ----------- | ------------------------------------------------------------------------- |
+| `v13.0.0`   | تم تعديل `beforeInteractive` و `afterInteractive` لدعم `app`.             |
+| `v12.2.4`   | تمت إضافة خاصية `onReady`.                                                |
+| `v12.2.2`   | السماح بـ `next/script` مع `beforeInteractive` في `_document`.            |
+| `v11.0.0`   | تم تقديم `next/script`.                                                  |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
new file mode 100644
index 00000000..d88fb66f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
@@ -0,0 +1,286 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:13:44.965Z
+title: أيقونة الموقع (favicon)، الأيقونة (icon)، وأيقونة أبل (apple-icon)
+description: مرجع API لاتفاقيات ملفات أيقونة الموقع (favicon)، الأيقونة (icon)، وأيقونة أبل (apple-icon).
+---
+
+تتيح لك اتفاقيات ملفات `favicon` أو `icon` أو `apple-icon` تعيين أيقونات لتطبيقك.
+
+هذه الأيقونات مفيدة لإضافة رموز التطبيق التي تظهر في أماكن مثل علامات تبويب متصفح الويب وشاشات هواتف الذكية ونتائج محركات البحث.
+
+هناك طريقتان لتعيين أيقونات التطبيق:
+
+- [استخدام ملفات الصور (.ico, .jpg, .png)](#ملفات-الصور-ico-jpg-png)
+- [استخدام الكود لإنشاء أيقونة (.js, .ts, .tsx)](#إنشاء-أيقونات-باستخدام-الكود-js-ts-tsx)
+
+## ملفات الصور (.ico, .jpg, .png)
+
+استخدم ملف صورة لتعيين أيقونة التطبيق عن طريق وضع ملف صورة `favicon` أو `icon` أو `apple-icon` داخل دليل `/app` الخاص بك.
+يمكن أن يكون ملف صورة `favicon` موجودًا فقط في المستوى الأعلى من `app/`.
+
+سيقوم Next.js بتقييم الملف وإضافة الوسوم المناسبة تلقائيًا إلى عنصر `<head>` في تطبيقك.
+
+| اتفاقية الملف             | أنواع الملفات المدعومة                    | المواقع الصالحة |
+| --------------------------- | --------------------------------------- | --------------- |
+| [`favicon`](#favicon)       | `.ico`                                  | `app/`          |
+| [`icon`](#icon)             | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*`      |
+| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png`                 | `app/**/*`      |
+
+### `favicon`
+
+أضف ملف صورة `favicon.ico` إلى مقطع المسار الجذري `/app`.
+
+```html filename="<head> output"
+<link rel="icon" href="/favicon.ico" sizes="any" />
+```
+
+### `icon`
+
+أضف ملف صورة `icon.(ico|jpg|jpeg|png|svg)`.
+
+```html filename="<head> output"
+<link
+  rel="icon"
+  href="/icon?<generated>"
+  type="image/<generated>"
+  sizes="<generated>"
+/>
+```
+
+### `apple-icon`
+
+أضف ملف صورة `apple-icon.(jpg|jpeg|png)`.
+
+```html filename="<head> output"
+<link
+  rel="apple-touch-icon"
+  href="/apple-icon?<generated>"
+  type="image/<generated>"
+  sizes="<generated>"
+/>
+```
+
+> **معلومة مفيدة**
+>
+> - يمكنك تعيين أيقونات متعددة عن طريق إضافة لاحقة رقمية لاسم الملف. على سبيل المثال، `icon1.png`، `icon2.png`، إلخ. سيتم ترتيب الملفات المرقمة أبجديًا.
+> - يمكن تعيين أيقونات الموقع (favicons) فقط في مقطع `/app` الجذري. إذا كنت بحاجة إلى مزيد من التخصيص، يمكنك استخدام [`icon`](#icon).
+> - يتم تحديد وسوم `<link>` والسمات المناسبة مثل `rel`، `href`، `type`، و `sizes` بناءً على نوع الأيقونة وبيانات الملف الذي تم تقييمه.
+>   - على سبيل المثال، ملف `.png` بحجم 32 × 32 بكسل سيكون له سمات `type="image/png"` و `sizes="32x32"`.
+> - يتم إضافة `sizes="any"` إلى ناتج `favicon.ico` لتجنب [خلل في المتصفح](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) حيث يتم تفضيل أيقونة `.ico` على `.svg`.
+
+## إنشاء أيقونات باستخدام الكود (.js, .ts, .tsx)
+
+بالإضافة إلى استخدام [ملفات الصور المباشرة](#ملفات-الصور-ico-jpg-png)، يمكنك **إنشاء** أيقونات برمجيًا باستخدام الكود.
+
+قم بإنشاء أيقونة تطبيق عن طريق إنشاء مسار `icon` أو `apple-icon` يقوم بتصدير دالة افتراضية.
+
+| اتفاقية الملف | أنواع الملفات المدعومة |
+| --------------- | -------------------- |
+| `icon`          | `.js`, `.ts`, `.tsx` |
+| `apple-icon`    | `.js`, `.ts`, `.tsx` |
+
+أسهل طريقة لإنشاء أيقونة هي استخدام واجهة برمجة التطبيقات [`ImageResponse`](/docs/app/api-reference/functions/image-response) من `next/og`.
+
+```tsx filename="app/icon.tsx" switcher
+import { ImageResponse } from 'next/og'
+
+// تكوين مقطع المسار
+export const runtime = 'edge'
+
+// بيانات الصورة
+export const size = {
+  width: 32,
+  height: 32,
+}
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default function Icon() {
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 24,
+          background: 'black',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+        }}
+      >
+        A
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // للراحة، يمكننا إعادة استخدام بيانات حجم الأيقونة المصدرة
+      // للتكوين لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+    }
+  )
+}
+```
+
+```jsx filename="app/icon.js" switcher
+import { ImageResponse } from 'next/og'
+
+// تكوين مقطع المسار
+export const runtime = 'edge'
+
+// بيانات الصورة
+export const size = {
+  width: 32,
+  height: 32,
+}
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default function Icon() {
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 24,
+          background: 'black',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+        }}
+      >
+        A
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // للراحة، يمكننا إعادة استخدام بيانات حجم الأيقونة المصدرة
+      // للتكوين لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+    }
+  )
+}
+```
+
+```html filename="<head> output"
+<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />
+```
+
+> **معلومة مفيدة**
+>
+> - بشكل افتراضي، يتم [**تحسين الأيقونات المولدة بشكل ثابت**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (يتم إنشاؤها وقت البناء وتخزينها مؤقتًا) ما لم تستخدم [وظائف ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) أو بيانات غير مخزنة مؤقتًا.
+> - يمكنك إنشاء أيقونات متعددة في نفس الملف باستخدام [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
+> - لا يمكنك إنشاء أيقونة `favicon`. استخدم [`icon`](#icon) أو ملف [favicon.ico](#favicon) بدلاً من ذلك.
+
+### الخصائص (Props)
+
+تستقبل الدالة الافتراضية التصدير الخصائص التالية:
+
+#### `params` (اختياري)
+
+كائن يحتوي على [كائن معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من المقطع الجذري وصولاً إلى المقطع الذي يوجد فيه `icon` أو `apple-icon`.
+
+```tsx filename="app/shop/[slug]/icon.tsx" switcher
+export default function Icon({ params }: { params: { slug: string } }) {
+  // ...
+}
+```
+
+```jsx filename="app/shop/[slug]/icon.js" switcher
+export default function Icon({ params }) {
+  // ...
+}
+```
+
+| المسار                           | الرابط         | `params`                  |
+| ------------------------------- | ----------- | ------------------------- |
+| `app/shop/icon.js`              | `/shop`     | `undefined`               |
+| `app/shop/[slug]/icon.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/icon.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/icon.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+### القيمة المُرجعة
+
+يجب أن تُرجع الدالة الافتراضية التصدير `Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `ReadableStream` | `Response`.
+
+> **معلومة مفيدة**: `ImageResponse` تلبي نوع الإرجاع هذا.
+
+### تصدير التكوين
+
+يمكنك تكوين بيانات الأيقونة اختياريًا عن طريق تصدير المتغيرات `size` و `contentType` من مسار `icon` أو `apple-icon`.
+
+| الخيار                        | النوع                                                                                                            |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| [`size`](#size)               | `{ width: number; height: number }`                                                                             |
+| [`contentType`](#contenttype) | `string` - [نوع MIME للصورة](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) |
+
+#### `size`
+
+```tsx filename="icon.tsx | apple-icon.tsx" switcher
+export const size = { width: 32, height: 32 }
+
+export default function Icon() {}
+```
+
+```jsx filename="icon.js | apple-icon.js" switcher
+export const size = { width: 32, height: 32 }
+
+export default function Icon() {}
+```
+
+```html filename="<head> output"
+<link rel="icon" sizes="32x32" />
+```
+
+#### `contentType`
+
+```tsx filename="icon.tsx | apple-icon.tsx" switcher
+export const contentType = 'image/png'
+
+export default function Icon() {}
+```
+
+```jsx filename="icon.js | apple-icon.js" switcher
+export const contentType = 'image/png'
+
+export default function Icon() {}
+```
+
+```html filename="<head> output"
+<link rel="icon" type="image/png" />
+```
+
+#### تكوين مقطع المسار
+
+`icon` و `apple-icon` هما معالجان متخصصان [للمسارات (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) يمكنهما استخدام نفس [خيارات تكوين مقطع المسار](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات.
+
+| الخيار                                                                                             | النوع                                                     | الافتراضي    |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------- |
+| [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic)                 | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'` | `'auto'`   |
+| [`revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate)           | `false \| 'force-cache' \| 0 \| number`                  | `false`    |
+| [`runtime`](/docs/app/api-reference/file-conventions/route-segment-config#runtime)                 | `'nodejs' \| 'edge'`                                     | `'nodejs'` |
+| [`preferredRegion`](/docs/app/api-reference/file-conventions/route-segment-config#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]`     | `'auto'`   |
+
+```tsx filename="app/icon.tsx" switcher
+export const runtime = 'edge'
+
+export default function Icon() {}
+```
+
+```jsx filename="app/icon.js" switcher
+export const runtime = 'edge'
+
+export default function Icon() {}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                      |
+| --------- | -------------------------------------------- |
+| `v13.3.0` | تم تقديم `favicon` و `icon` و `apple-icon` |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/index.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/index.mdx
new file mode 100644
index 00000000..9be53098
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/index.mdx
@@ -0,0 +1,13 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:08.307Z
+title: مرجع API لملفات البيانات الوصفية (Metadata Files)
+nav_title: ملفات البيانات الوصفية
+description: وثائق API لاتفاقيات ملفات البيانات الوصفية.
+---
+
+يغطي هذا القسم من الوثائق **اتفاقيات ملفات البيانات الوصفية**. يمكن تعريف البيانات الوصفية المعتمدة على الملفات عن طريق إضافة ملفات بيانات وصفية خاصة إلى مقاطع المسار (route segments).
+
+يمكن تعريف كل اتفاقية ملف إما باستخدام ملف ثابت (مثل `opengraph-image.jpg`)، أو متغير ديناميكي يستخدم التعليمات البرمجية لإنشاء الملف (مثل `opengraph-image.js`).
+
+بمجرد تعريف الملف، سيقوم Next.js تلقائيًا بخدمة الملف (مع تجزئة في بيئة الإنتاج للتخزين المؤقت) وتحديث عناصر الرأس ذات الصلة بالبيانات الوصفية الصحيحة، مثل عنوان URL للأصل، ونوع الملف، وحجم الصورة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
new file mode 100644
index 00000000..993df733
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
@@ -0,0 +1,72 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:05.147Z
+title: ملف manifest.json
+description: مرجع API لملف manifest.json.
+---
+
+أضف أو أنشئ ملف `manifest.(json|webmanifest)` يتوافق مع [مواصفات ويب مانيفست](https://developer.mozilla.org/docs/Web/Manifest) في **الجذر** من دليل `app` لتوفير معلومات حول تطبيق الويب الخاص بك للمتصفح.
+
+## ملف مانيفست ثابت
+
+```json filename="app/manifest.json | app/manifest.webmanifest"
+{
+  "name": "My Next.js Application",
+  "short_name": "Next.js App",
+  "description": "An application built with Next.js",
+  "start_url": "/"
+  // ...
+}
+```
+
+## إنشاء ملف مانيفست
+
+أضف ملف `manifest.js` أو `manifest.ts` الذي يُرجع [كائن `Manifest`](#manifest-object).
+
+```ts filename="app/manifest.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Next.js App',
+    short_name: 'Next.js App',
+    description: 'Next.js App',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}
+```
+
+```js filename="app/manifest.js" switcher
+export default function manifest() {
+  return {
+    name: 'Next.js App',
+    short_name: 'Next.js App',
+    description: 'Next.js App',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}
+```
+
+### كائن Manifest
+
+يحتوي كائن المانيفست على قائمة واسعة من الخيارات التي قد يتم تحديثها بسبب معايير الويب الجديدة. لمعلومات حول جميع الخيارات الحالية، راجع نوع `MetadataRoute.Manifest` في محرر الأكواد إذا كنت تستخدم [TypeScript](https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin) أو راجع وثائق [MDN](https://developer.mozilla.org/docs/Web/Manifest).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
new file mode 100644
index 00000000..e3b2d0ce
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
@@ -0,0 +1,430 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:13:36.485Z
+title: opengraph-image و twitter-image
+description: مرجع API لاتفاقيات ملفات صورة Open Graph وصورة Twitter.
+---
+
+تتيح لك اتفاقيات ملفات `opengraph-image` و `twitter-image` تعيين صور Open Graph و Twitter لقطاع المسار.
+
+وهي مفيدة لتعيين الصور التي تظهر على الشبكات الاجتماعية وتطبيقات المراسلة عندما يشارك المستخدم رابطًا لموقعك.
+
+هناك طريقتان لتعيين صور Open Graph و Twitter:
+
+- [باستخدام ملفات الصور (.jpg، .png، .gif)](#image-files-jpg-png-gif)
+- [باستخدام الكود لإنشاء الصور (.js، .ts، .tsx)](#generate-images-using-code-js-ts-tsx)
+
+## ملفات الصور (.jpg، .png، .gif)
+
+استخدم ملف صورة لتعيين صورة مشتركة لقطاع المسار عن طريق وضع ملف صورة `opengraph-image` أو `twitter-image` في القطاع.
+
+سيقوم Next.js بتقييم الملف وإضافة العلامات المناسبة تلقائيًا إلى عنصر `<head>` لتطبيقك.
+
+| اتفاقية الملف                                 | أنواع الملفات المدعومة            |
+| ----------------------------------------------- | ------------------------------- |
+| [`opengraph-image`](#opengraph-image)           | `.jpg`، `.jpeg`، `.png`، `.gif` |
+| [`twitter-image`](#twitter-image)               | `.jpg`، `.jpeg`، `.png`، `.gif` |
+| [`opengraph-image.alt`](#opengraph-imagealttxt) | `.txt`                          |
+| [`twitter-image.alt`](#twitter-imagealttxt)     | `.txt`                          |
+
+### `opengraph-image`
+
+أضف ملف صورة `opengraph-image.(jpg|jpeg|png|gif)` إلى أي قطاع مسار.
+
+```html filename="<head> output"
+<meta property="og:image" content="<generated>" />
+<meta property="og:image:type" content="<generated>" />
+<meta property="og:image:width" content="<generated>" />
+<meta property="og:image:height" content="<generated>" />
+```
+
+### `twitter-image`
+
+أضف ملف صورة `twitter-image.(jpg|jpeg|png|gif)` إلى أي قطاع مسار.
+
+```html filename="<head> output"
+<meta name="twitter:image" content="<generated>" />
+<meta name="twitter:image:type" content="<generated>" />
+<meta name="twitter:image:width" content="<generated>" />
+<meta name="twitter:image:height" content="<generated>" />
+```
+
+### `opengraph-image.alt.txt`
+
+أضف ملف `opengraph-image.alt.txt` مصاحبًا في نفس قطاع المسار مثل صورة `opengraph-image.(jpg|jpeg|png|gif)` كنص بديل لها.
+
+```txt filename="opengraph-image.alt.txt"
+About Acme
+```
+
+```html filename="<head> output"
+<meta property="og:image:alt" content="About Acme" />
+```
+
+### `twitter-image.alt.txt`
+
+أضف ملف `twitter-image.alt.txt` مصاحبًا في نفس قطاع المسار مثل صورة `twitter-image.(jpg|jpeg|png|gif)` كنص بديل لها.
+
+```txt filename="twitter-image.alt.txt"
+About Acme
+```
+
+```html filename="<head> output"
+<meta property="twitter:image:alt" content="About Acme" />
+```
+
+## إنشاء الصور باستخدام الكود (.js، .ts، .tsx)
+
+بالإضافة إلى استخدام [ملفات الصور الحرفية](#image-files-jpg-png-gif)، يمكنك **إنشاء** الصور برمجيًا باستخدام الكود.
+
+قم بإنشاء صورة مشتركة لقطاع المسار عن طريق إنشاء مسار `opengraph-image` أو `twitter-image` يقوم بتصدير دالة افتراضية.
+
+| اتفاقية الملف   | أنواع الملفات المدعومة |
+| ----------------- | -------------------- |
+| `opengraph-image` | `.js`، `.ts`، `.tsx` |
+| `twitter-image`   | `.js`، `.ts`، `.tsx` |
+
+> **معلومة مفيدة**
+>
+> - بشكل افتراضي، يتم [**تحسين الصور المُنشأة بشكل ثابت**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (يتم إنشاؤها وقت البناء وتخزينها مؤقتًا) ما لم تستخدم [وظائف ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) أو بيانات غير مخزنة مؤقتًا.
+> - يمكنك إنشاء صور متعددة في نفس الملف باستخدام [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
+
+أسهل طريقة لإنشاء صورة هي استخدام واجهة برمجة التطبيقات [ImageResponse](/docs/app/api-reference/functions/image-response) من `next/og`.
+
+```tsx filename="app/about/opengraph-image.tsx" switcher
+import { ImageResponse } from 'next/og'
+
+// تكوين قطاع المسار
+export const runtime = 'edge'
+
+// بيانات وصفية للصورة
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default async function Image() {
+  // الخط
+  const interSemiBold = fetch(
+    new URL('./Inter-SemiBold.ttf', import.meta.url)
+  ).then((res) => res.arrayBuffer())
+
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 128,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        About Acme
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // للراحة، يمكننا إعادة استخدام تكوين حجم opengraph-image
+      // المُصدّر لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+      fonts: [
+        {
+          name: 'Inter',
+          data: await interSemiBold,
+          style: 'normal',
+          weight: 400,
+        },
+      ],
+    }
+  )
+}
+```
+
+```jsx filename="app/about/opengraph-image.js" switcher
+import { ImageResponse } from 'next/og'
+
+// تكوين قطاع المسار
+export const runtime = 'edge'
+
+// بيانات وصفية للصورة
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default async function Image() {
+  // الخط
+  const interSemiBold = fetch(
+    new URL('./Inter-SemiBold.ttf', import.meta.url)
+  ).then((res) => res.arrayBuffer())
+
+  return new ImageResponse(
+    (
+      // عنصر JSX لـ ImageResponse
+      <div
+        style={{
+          fontSize: 128,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        About Acme
+      </div>
+    ),
+    // خيارات ImageResponse
+    {
+      // للراحة، يمكننا إعادة استخدام تكوين حجم opengraph-image
+      // المُصدّر لتعيين عرض وارتفاع ImageResponse أيضًا.
+      ...size,
+      fonts: [
+        {
+          name: 'Inter',
+          data: await interSemiBold,
+          style: 'normal',
+          weight: 400,
+        },
+      ],
+    }
+  )
+}
+```
+
+```html filename="<head> output"
+<meta property="og:image" content="<generated>" />
+<meta property="og:image:alt" content="About Acme" />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+```
+
+### الخصائص
+
+تستقبل الدالة الافتراضية المصدرة الخصائص التالية:
+
+#### `params` (اختياري)
+
+كائن يحتوي على [كائن معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من القطاع الجذر وصولاً إلى القطاع الذي يوجد فيه `opengraph-image` أو `twitter-image`.
+
+```tsx filename="app/shop/[slug]/opengraph-image.tsx" switcher
+export default function Image({ params }: { params: { slug: string } }) {
+  // ...
+}
+```
+
+```jsx filename="app/shop/[slug]/opengraph-image.js" switcher
+export default function Image({ params }) {
+  // ...
+}
+```
+
+| المسار                                      | URL         | `params`                  |
+| ------------------------------------------ | ----------- | ------------------------- |
+| `app/shop/opengraph-image.js`              | `/shop`     | `undefined`               |
+| `app/shop/[slug]/opengraph-image.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/opengraph-image.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/opengraph-image.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+### القيمة المُرجعة
+
+يجب أن تُرجع الدالة الافتراضية المصدرة `Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `ReadableStream` | `Response`.
+
+> **معلومة مفيدة**: `ImageResponse` تفي بنوع الإرجاع هذا.
+
+### تصدير التكوين
+
+يمكنك تكوين البيانات الوصفية للصورة اختياريًا عن طريق تصدير المتغيرات `alt` و`size` و`contentType` من مسار `opengraph-image` أو `twitter-image`.
+
+| الخيار                        | النوع                                                                                                            |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| [`alt`](#alt)                 | `string`                                                                                                        |
+| [`size`](#size)               | `{ width: number; height: number }`                                                                             |
+| [`contentType`](#contenttype) | `string` - [نوع MIME للصورة](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) |
+
+#### `alt`
+
+```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
+export const alt = 'نص بديل لصورتي'
+
+export default function Image() {}
+```
+
+```jsx filename="opengraph-image.js | twitter-image.js" switcher
+export const alt = 'نص بديل لصورتي'
+
+export default function Image() {}
+```
+
+```html filename="<head> output"
+<meta property="og:image:alt" content="نص بديل لصورتي" />
+```
+
+#### `size`
+
+```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
+export const size = { width: 1200, height: 630 }
+
+export default function Image() {}
+```
+
+```jsx filename="opengraph-image.js | twitter-image.js" switcher
+export const size = { width: 1200, height: 630 }
+
+export default function Image() {}
+```
+
+```html filename="<head> output"
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+```
+
+#### `contentType`
+
+```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
+export const contentType = 'image/png'
+
+export default function Image() {}
+```
+
+```jsx filename="opengraph-image.js | twitter-image.js" switcher
+export const contentType = 'image/png'
+
+export default function Image() {}
+```
+
+```html filename="<head> output"
+<meta property="og:image:type" content="image/png" />
+```
+
+#### تكوين قطاع المسار
+
+`opengraph-image` و `twitter-image` هما [معالجا مسار متخصصان](/docs/app/building-your-application/routing/route-handlers) يمكنهما استخدام نفس [خيارات تكوين قطاع المسار](/docs/app/api-reference/file-conventions/route-segment-config) مثل الصفحات والتخطيطات.
+
+| الخيار                                                                                             | النوع                                                     | الافتراضي    |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------- |
+| [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic)                 | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'` | `'auto'`   |
+| [`revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate)           | `false \| 'force-cache' \| 0 \| number`                  | `false`    |
+| [`runtime`](/docs/app/api-reference/file-conventions/route-segment-config#runtime)                 | `'nodejs' \| 'edge'`                                     | `'nodejs'` |
+| [`preferredRegion`](/docs/app/api-reference/file-conventions/route-segment-config#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]`     | `'auto'`   |
+
+```tsx filename="app/opengraph-image.tsx" switcher
+export const runtime = 'edge'
+
+export default function Image() {}
+```
+
+```jsx filename="app/opengraph-image.js" switcher
+export const runtime = 'edge'
+
+export default function Image() {}
+```
+
+### أمثلة
+
+#### استخدام بيانات خارجية
+
+يستخدم هذا المثال كائن `params` والبيانات الخارجية لإنشاء الصورة.
+
+> **معلومة مفيدة**:
+> بشكل افتراضي، سيتم [تحسين هذه الصورة المُنشأة بشكل ثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default). يمكنك تكوين [خيارات](/docs/app/api-reference/functions/fetch) `fetch` الفردية أو [خيارات](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) قطاعات المسار لتغيير هذا السلوك.
+
+```tsx filename="app/posts/[slug]/opengraph-image.tsx" switcher
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image({ params }: { params: { slug: string } }) {
+  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
+    res.json()
+  )
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 48,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {post.title}
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}
+```
+
+```jsx filename="app/posts/[slug]/opengraph-image.js" switcher
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image({ params }) {
+  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
+    res.json()
+  )
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 48,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {post.title}
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                           |
+| --------- | ------------------------------------------------- |
+| `v13.3.0` | تم تقديم `opengraph-image` و `twitter-image`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx
new file mode 100644
index 00000000..40aebd0a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx
@@ -0,0 +1,148 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:11:56.962Z
+title: ملف robots.txt
+description: مرجع API لملف robots.txt.
+---
+
+أضف أو أنشئ ملف `robots.txt` يتوافق مع [معيار استبعاد الروبوتات](https://en.wikipedia.org/wiki/Robots.txt#Standard) في **الجذر** من دليل `app` لإخبار زواحف محركات البحث عن عناوين URL التي يمكنها الوصول إليها في موقعك.
+
+## ملف `robots.txt` ثابت
+
+```txt filename="app/robots.txt"
+User-Agent: *
+Allow: /
+Disallow: /private/
+
+Sitemap: https://acme.com/sitemap.xml
+```
+
+## إنشاء ملف Robots
+
+أضف ملف `robots.js` أو `robots.ts` الذي يُرجع [كائن `Robots`](#robots-object).
+
+```ts filename="app/robots.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/private/',
+    },
+    sitemap: 'https://acme.com/sitemap.xml',
+  }
+}
+```
+
+```js filename="app/robots.js" switcher
+export default function robots() {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/private/',
+    },
+    sitemap: 'https://acme.com/sitemap.xml',
+  }
+}
+```
+
+النتيجة:
+
+```txt
+User-Agent: *
+Allow: /
+Disallow: /private/
+
+Sitemap: https://acme.com/sitemap.xml
+```
+
+### تخصيص وكلاء مستخدم معينين
+
+يمكنك تخصيص كيفية زحف روبوتات محركات البحث الفردية إلى موقعك عن طريق تمرير مصفوفة من وكلاء المستخدم إلى خاصية `rules`. على سبيل المثال:
+
+```ts filename="app/robots.ts" switcher
+import type { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: 'Googlebot',
+        allow: ['/'],
+        disallow: '/private/',
+      },
+      {
+        userAgent: ['Applebot', 'Bingbot'],
+        disallow: ['/'],
+      },
+    ],
+    sitemap: 'https://acme.com/sitemap.xml',
+  }
+}
+```
+
+```js filename="app/robots.js" switcher
+export default function robots() {
+  return {
+    rules: [
+      {
+        userAgent: 'Googlebot',
+        allow: ['/'],
+        disallow: ['/private/'],
+      },
+      {
+        userAgent: ['Applebot', 'Bingbot'],
+        disallow: ['/'],
+      },
+    ],
+    sitemap: 'https://acme.com/sitemap.xml',
+  }
+}
+```
+
+النتيجة:
+
+```txt
+User-Agent: Googlebot
+Allow: /
+Disallow: /private/
+
+User-Agent: Applebot
+Disallow: /
+
+User-Agent: Bingbot
+Disallow: /
+
+Sitemap: https://acme.com/sitemap.xml
+```
+
+### كائن Robots
+
+```tsx
+type Robots = {
+  rules:
+    | {
+        userAgent?: string | string[]
+        allow?: string | string[]
+        disallow?: string | string[]
+        crawlDelay?: number
+      }
+    | Array<{
+        userAgent: string | string[]
+        allow?: string | string[]
+        disallow?: string | string[]
+        crawlDelay?: number
+      }>
+  sitemap?: string | string[]
+  host?: string
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات              |
+| --------- | -------------------- |
+| `v13.3.0` | تم تقديم `robots`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
new file mode 100644
index 00000000..0e9544cd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
@@ -0,0 +1,300 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T18:12:54.118Z
+title: ملف sitemap.xml
+description: مرجع API لملف sitemap.xml.
+related:
+  title: الخطوات التالية
+  description: تعلم كيفية استخدام دالة generateSitemaps.
+  links:
+    - app/api-reference/functions/generate-sitemaps
+---
+
+`sitemap.(xml|js|ts)` هو ملف خاص يتوافق مع [تنسيق Sitemaps XML](https://www.sitemaps.org/protocol.html) لمساعدة زواحف محركات البحث على فهرسة موقعك بكفاءة أكبر.
+
+### ملفات Sitemap (.xml)
+
+للتطبيقات الصغيرة، يمكنك إنشاء ملف `sitemap.xml` ووضعه في جذر دليل `app` الخاص بك.
+
+```xml filename="app/sitemap.xml"
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://acme.com</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>1</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/about</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/blog</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>
+```
+
+### إنشاء Sitemap باستخدام الكود (.js, .ts)
+
+يمكنك استخدام اصطلاح ملف `sitemap.(js|ts)` لإنشاء Sitemap برمجيًا عن طريق تصدير دالة افتراضية تُرجع مصفوفة من عناوين URL. إذا كنت تستخدم TypeScript، فإن نوع [`Sitemap`](#returns) متاح.
+
+```ts filename="app/sitemap.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: 'https://acme.com',
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+    {
+      url: 'https://acme.com/about',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: 'https://acme.com/blog',
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.5,
+    },
+  ]
+}
+```
+
+```js filename="app/sitemap.js" switcher
+export default function sitemap() {
+  return [
+    {
+      url: 'https://acme.com',
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+    {
+      url: 'https://acme.com/about',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: 'https://acme.com/blog',
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.5,
+    },
+  ]
+}
+```
+
+النتيجة:
+
+```xml filename="acme.com/sitemap.xml"
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://acme.com</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>1</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/about</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://acme.com/blog</loc>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>
+```
+
+### إنشاء Sitemap متعدد اللغات
+
+```ts filename="app/sitemap.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: 'https://acme.com',
+      lastModified: new Date(),
+      alternates: {
+        languages: {
+          es: 'https://acme.com/es',
+          de: 'https://acme.com/de',
+        },
+      },
+    },
+    {
+      url: 'https://acme.com/about',
+      lastModified: new Date(),
+      alternates: {
+        languages: {
+          es: 'https://acme.com/es/about',
+          de: 'https://acme.com/de/about',
+        },
+      },
+    },
+    {
+      url: 'https://acme.com/blog',
+      lastModified: new Date(),
+      alternates: {
+        languages: {
+          es: 'https://acme.com/es/blog',
+          de: 'https://acme.com/de/blog',
+        },
+      },
+    },
+  ]
+}
+```
+
+النتيجة:
+
+```xml filename="acme.com/sitemap.xml"
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+  <url>
+    <loc>https://acme.com</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="es"
+      href="https://acme.com/es"/>
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://acme.com/de"/>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+  </url>
+  <url>
+    <loc>https://acme.com/about</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="es"
+      href="https://acme.com/es/about"/>
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://acme.com/de/about"/>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+  </url>
+  <url>
+    <loc>https://acme.com/blog</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="es"
+      href="https://acme.com/es/blog"/>
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://acme.com/de/blog"/>
+    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
+  </url>
+</urlset>
+```
+
+### إنشاء خرائط مواقع متعددة
+
+بينما تعمل خريطة موقع واحدة لمعظم التطبيقات، قد تحتاج لتطبيقات الويب الكبيرة إلى تقسيم خريطة الموقع إلى ملفات متعددة.
+
+هناك طريقتان لإنشاء خرائط مواقع متعددة:
+
+- عن طريق تداخل `sitemap.(xml|js|ts)` داخل أجزاء مسارات متعددة، مثل `app/sitemap.xml` و `app/products/sitemap.xml`.
+- باستخدام دالة [`generateSitemaps`](/docs/app/api-reference/functions/generate-sitemaps).
+
+على سبيل المثال، لتقسيم خريطة موقع باستخدام `generateSitemaps`، قم بإرجاع مصفوفة من الكائنات تحتوي على `id` لخريطة الموقع. ثم استخدم `id` لإنشاء خرائط مواقع فريدة.
+
+```ts filename="app/product/sitemap.ts" switcher
+import { BASE_URL } from '@/app/lib/constants'
+
+export async function generateSitemaps() {
+  // جلب العدد الإجمالي للمنتجات وحساب عدد خرائط المواقع المطلوبة
+  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
+}
+
+export default async function sitemap({
+  id,
+}: {
+  id: number
+}): Promise<MetadataRoute.Sitemap> {
+  // الحد الأقصى لـ Google هو 50,000 عنوان URL لكل خريطة موقع
+  const start = id * 50000
+  const end = start + 50000
+  const products = await getProducts(
+    `SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`
+  )
+  return products.map((product) => ({
+    url: `${BASE_URL}/product/${id}`,
+    lastModified: product.date,
+  }))
+}
+```
+
+```js filename="app/product/sitemap.js" switcher
+import { BASE_URL } from '@/app/lib/constants'
+
+export async function generateSitemaps() {
+  // جلب العدد الإجمالي للمنتجات وحساب عدد خرائط المواقع المطلوبة
+  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
+}
+
+export default async function sitemap({ id }) {
+  // الحد الأقصى لـ Google هو 50,000 عنوان URL لكل خريطة موقع
+  const start = id * 50000
+  const end = start + 50000
+  const products = await getProducts(
+    `SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`
+  )
+  return products.map((product) => ({
+    url: `${BASE_URL}/product/${id}`,
+    lastModified: product.date,
+  }))
+}
+```
+
+في بيئة الإنتاج، ستكون خرائط المواقع التي تم إنشاؤها متاحة على `/.../sitemap/[id].xml`. على سبيل المثال، `/product/sitemap/1.xml`.
+
+في بيئة التطوير، يمكنك عرض خريطة الموقع التي تم إنشاؤها على `/.../sitemap.xml/[id]`. على سبيل المثال، `/product/sitemap.xml/1`. هذا الاختلاف مؤقت وسيتبع تنسيق الإنتاج.
+
+راجع [مرجع API لـ `generateSitemaps`](/docs/app/api-reference/functions/generate-sitemaps) لمزيد من المعلومات.
+
+## القيم المُرجعة
+
+يجب أن تُرجع الدالة الافتراضية المصدرة من `sitemap.(xml|ts|js)` مصفوفة من الكائنات بالخصائص التالية:
+
+```tsx
+type Sitemap = Array<{
+  url: string
+  lastModified?: string | Date
+  changeFrequency?:
+    | 'always'
+    | 'hourly'
+    | 'daily'
+    | 'weekly'
+    | 'monthly'
+    | 'yearly'
+    | 'never'
+  priority?: number
+  alternates?: {
+    languages?: Languages<string>
+  }
+}>
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                     |
+| --------- | ------------------------------------------------------------ |
+| `v13.4.5` | إضافة سمات `changeFrequency` و `priority` إلى خرائط المواقع. |
+| `v13.3.0` | تقديم `sitemap`.                                        |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/default.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/default.mdx
new file mode 100644
index 00000000..29b4951e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/default.mdx
@@ -0,0 +1,41 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:03.954Z
+title: default.js
+description: مرجع API لملف default.js.
+related:
+  title: تعرف على المزيد حول المسارات المتوازية (Parallel Routes)
+  links:
+    - app/building-your-application/routing/parallel-routes
+---
+
+يُستخدم ملف `default.js` لعرض بديل احتياطي داخل [المسارات المتوازية (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes) عندما لا يتمكن Next.js من استعادة الحالة النشطة [للفتحة (slot)](/docs/app/building-your-application/routing/parallel-routes#slots) بعد تحميل الصفحة بالكامل.
+
+أثناء [التنقل الناعم (soft navigation)](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation)، يحتفظ Next.js بتتبع الحالة _النشطة_ (الصفحة الفرعية) لكل فتحة. ومع ذلك، بالنسبة للتنقلات الصلبة (تحميل الصفحة بالكامل)، لا يمكن لـ Next.js استعادة الحالة النشطة. في هذه الحالة، يمكن عرض ملف `default.js` للصفحات الفرعية التي لا تتطابق مع عنوان URL الحالي.
+
+خذ بعين الاعتبار هيكل المجلدات التالي. تحتوي فتحة `@team` على صفحة `settings`، بينما لا تحتوي فتحة `@analytics` عليها.
+
+<Image
+  alt="المسارات المتوازية - مسارات غير متطابقة"
+  srcLight="/docs/light/parallel-routes-unmatched-routes.png"
+  srcDark="/docs/dark/parallel-routes-unmatched-routes.png"
+  width="1600"
+  height="930"
+/>
+
+عند التنقل إلى `/settings`، ستعرض فتحة `@team` صفحة `settings` مع الحفاظ على الصفحة النشطة الحالية لفتحة `@analytics`.
+
+عند التحديث، سيقوم Next.js بعرض ملف `default.js` لـ `@analytics`. إذا لم يكن `default.js` موجودًا، فسيتم عرض خطأ `404` بدلاً من ذلك.
+
+بالإضافة إلى ذلك، نظرًا لأن `children` هي فتحة ضمنية، فأنت بحاجة أيضًا إلى إنشاء ملف `default.js` لعرض بديل احتياطي لـ `children` عندما لا يتمكن Next.js من استعادة الحالة النشطة للصفحة الأصلية.
+
+## الخصائص (Props)
+
+### `params` (اختياري)
+
+كائن يحتوي على [معلمات المسار الديناميكي (dynamic route parameters)](/docs/app/building-your-application/routing/dynamic-routes) من الجزء الجذري وصولاً إلى الصفحات الفرعية للفتحة. على سبيل المثال:
+
+| مثال                                    | عنوان URL    | `params`                            |
+| --------------------------------------- | ------------ | ----------------------------------- |
+| `app/@sidebar/[artist]/default.js`      | `/zack`      | `{ artist: 'zack' }`                |
+| `app/@sidebar/[artist]/[album]/default.js` | `/zack/next` | `{ artist: 'zack', album: 'next' }` |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/error.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/error.mdx
new file mode 100644
index 00000000..dc4bc255
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/error.mdx
@@ -0,0 +1,161 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:27.185Z
+title: error.js
+description: مرجع API لملف error.js الخاص.
+related:
+  title: تعلم المزيد عن معالجة الأخطاء
+  links:
+    - app/building-your-application/routing/error-handling
+---
+
+يحدد ملف **error** حدود واجهة المستخدم للخطأ لقطاع مسار معين.
+
+هو مفيد لالتقاط الأخطاء **غير المتوقعة** التي تحدث في مكونات الخادم ومكونات العميل وعرض واجهة مستخدم بديلة.
+
+```tsx filename="app/dashboard/error.tsx" switcher
+'use client' // مكونات الخطأ يجب أن تكون مكونات عميل
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة تقارير الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاستعادة عن طريق إعادة عرض القطاع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/dashboard/error.js" switcher
+'use client' // مكونات الخطأ يجب أن تكون مكونات عميل
+
+import { useEffect } from 'react'
+
+export default function Error({ error, reset }) {
+  useEffect(() => {
+    // تسجيل الخطأ في خدمة تقارير الأخطاء
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>حدث خطأ ما!</h2>
+      <button
+        onClick={
+          // محاولة الاستعادة عن طريق إعادة عرض القطاع
+          () => reset()
+        }
+      >
+        حاول مرة أخرى
+      </button>
+    </div>
+  )
+}
+```
+
+## الخصائص
+
+### `error`
+
+نسخة من كائن [`Error`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error) يتم تمريرها إلى مكون العميل `error.js`.
+
+#### `error.message`
+
+رسالة الخطأ.
+
+- بالنسبة للأخطاء الممررة من مكونات العميل، ستكون هذه رسالة الخطأ الأصلية.
+- بالنسبة للأخطاء الممررة من مكونات الخادم، ستكون هذه رسالة خطأ عامة لتجنب تسريب تفاصيل حساسة. يمكن استخدام `errors.digest` لمطابقة الخطأ المقابل في سجلات الخادم.
+
+#### `error.digest`
+
+تجزئة يتم إنشاؤها تلقائيًا للخطأ الذي تم طرحه في مكون الخادم. يمكن استخدامها لمطابقة الخطأ المقابل في سجلات الخادم.
+
+### `reset`
+
+دالة لإعادة تعيين حدود الخطأ. عند تنفيذها، ستقوم الدالة بمحاولة إعادة عرض محتويات حدود الخطأ. إذا نجحت، يتم استبدال مكون الخطأ الاحتياطي بنتيجة إعادة العرض.
+
+يمكن استخدامها لدفع المستخدم لمحاولة التعافي من الخطأ.
+
+> **معلومة مفيدة**:
+>
+> - حدود `error.js` يجب أن تكون **[مكونات عميل](/docs/app/building-your-application/rendering/client-components)**.
+> - في إصدارات الإنتاج، سيتم تجريد الأخطاء الممررة من مكونات الخادم من تفاصيل الخطأ المحددة لتجنب تسريب معلومات حساسة.
+> - حدود `error.js` **لن** تتعامل مع الأخطاء المطروحة في مكون `layout.js` في نفس القطاع لأن حدود الخطأ متداخلة **داخل** مكون التخطيط هذا.
+>   - للتعامل مع الأخطاء لتخطيط معين، ضع ملف `error.js` في القطاع الأب للتخطيط.
+>   - للتعامل مع الأخطاء داخل تخطيط الجذر أو القالب، استخدم نوعًا مختلفًا من `error.js` يسمى `app/global-error.js`.
+
+## `global-error.js`
+
+للتعامل مع الأخطاء في `layout.js` الجذر تحديدًا، استخدم نوعًا مختلفًا من `error.js` يسمى `app/global-error.js` موجود في دليل الجذر `app`.
+
+```tsx filename="app/global-error.tsx" switcher
+'use client'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/global-error.js" switcher
+'use client'
+
+export default function GlobalError({ error, reset }) {
+  return (
+    <html>
+      <body>
+        <h2>حدث خطأ ما!</h2>
+        <button onClick={() => reset()}>حاول مرة أخرى</button>
+      </body>
+    </html>
+  )
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - `global-error.js` يحل محل `layout.js` الجذر عند التنشيط ولذلك **يجب** أن يحدد علامات `<html>` و `<body>` الخاصة به.
+> - أثناء تصميم واجهة مستخدم للخطأ، قد تجد أنه من المفيد استخدام [أدوات مطوري React](https://react.dev/learn/react-developer-tools) لتبديل حدود الخطأ يدويًا.
+
+## not-found.js
+
+يتم استخدام ملف [`not-found`](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) لعرض واجهة المستخدم عند استدعاء دالة `notFound()` داخل قطاع مسار.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                    |
+| --------- | -------------------------- |
+| `v13.1.0` | تم تقديم `global-error`. |
+| `v13.0.0` | تم تقديم `error`.        |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/index.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/index.mdx
new file mode 100644
index 00000000..30b04aff
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:32.654Z
+title: اصطلاحات الملفات
+description: مرجع API لملفات Next.js الخاصة.
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/instrumentation.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/instrumentation.mdx
new file mode 100644
index 00000000..fae3742e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/instrumentation.mdx
@@ -0,0 +1,55 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:46.914Z
+title: ملف instrumentation.js
+description: مرجع API لملف instrumentation.js.
+related:
+  title: تعرف على المزيد حول الأدوات (Instrumentation)
+  links:
+    - app/building-your-application/optimizing/instrumentation
+---
+
+يستخدم ملف `instrumentation.js|ts` لدمج أدوات المراقبة والتسجيل في تطبيقك. هذا يسمح لك بتتبع أداء وسلوك التطبيق، وتصحيح المشكلات في بيئة الإنتاج.
+
+لاستخدامه، ضع الملف في **الجذر** لتطبيقك أو داخل مجلد [`src`](/docs/app/building-your-application/configuring/src-directory) إذا كنت تستخدم واحدًا.
+
+## خيار التكوين
+
+الأدوات (Instrumentation) حاليًا ميزة تجريبية، لاستخدام ملف `instrumentation`، يجب عليك الموافقة صراحةً عن طريق تعريف [`experimental.instrumentationHook = true;`](/docs/app/api-reference/next-config-js/instrumentationHook) في ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    instrumentationHook: true,
+  },
+}
+```
+
+## التصديرات
+
+### `register` (مطلوب)
+
+يصدر الملف دالة `register` يتم استدعاؤها **مرة واحدة** عند بدء مثيل جديد لخادم Next.js. يمكن أن تكون `register` دالة غير متزامنة (async).
+
+```ts filename="instrumentation.ts" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel('next-app')
+}
+```
+
+```js filename="instrumentation.js" switcher
+import { registerOTel } from '@vercel/otel'
+
+export function register() {
+  registerOTel('next-app')
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                 |
+| --------- | ------------------------------------------------------- |
+| `v14.0.4` | دعم Turbopack لـ `instrumentation`                 |
+| `v13.2.0` | تقديم `instrumentation` كميزة تجريبية |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/layout.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/layout.mdx
new file mode 100644
index 00000000..1dd89d4a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/layout.mdx
@@ -0,0 +1,133 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:20.584Z
+title: ملف layout.js
+description: مرجع API لملف layout.js.
+---
+
+**التنسيق (Layout)** هو واجهة مستخدم مشتركة بين المسارات (routes).
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <section>{children}</section>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+export default function DashboardLayout({ children }) {
+  return <section>{children}</section>
+}
+```
+
+**تنسيق الجذر (Root Layout)** هو أعلى تنسيق في دليل الجذر `app`. يُستخدم لتحديد علامات `<html>` و `<body>` وعناصر واجهة المستخدم المشتركة عالميًا.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+## الخصائص (Props)
+
+### `children` (مطلوب)
+
+يجب أن تقبل مكونات التنسيق وتستخدم خاصية `children`. أثناء التصيير، سيتم تعبئة `children` بشرائح المسار التي يحيط بها التنسيق. ستكون هذه بشكل أساسي مكون [التنسيق](/docs/app/building-your-application/routing/pages-and-layouts#pages) الفرعي (إذا وجد) أو [الصفحة](/docs/app/building-your-application/routing/pages-and-layouts#pages)، ولكن قد تكون أيضًا ملفات خاصة أخرى مثل [التحميل](/docs/app/building-your-application/routing/loading-ui-and-streaming) أو [الخطأ](/docs/app/building-your-application/routing/error-handling) عند الاقتضاء.
+
+### `params` (اختياري)
+
+كائن [معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من شريحة الجذر وصولًا إلى ذلك التنسيق.
+
+| مثال                           | الرابط (URL)     | `params`                  |
+| ------------------------------ | ---------------- | ------------------------- |
+| `app/dashboard/[team]/layout.js`  | `/dashboard/1` | `{ team: '1' }`           |
+| `app/shop/[tag]/[item]/layout.js` | `/shop/1/2`    | `{ tag: '1', item: '2' }` |
+| `app/blog/[...slug]/layout.js`    | `/blog/1/2`    | `{ slug: ['1', '2'] }`    |
+
+مثال:
+
+```tsx filename="app/shop/[tag]/[item]/layout.tsx" switcher
+export default function ShopLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {
+    tag: string
+    item: string
+  }
+}) {
+  // الرابط -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  return <section>{children}</section>
+}
+```
+
+```jsx filename="app/shop/[tag]/[item]/layout.js" switcher
+export default function ShopLayout({ children, params }) {
+  // الرابط -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  return <section>{children}</section>
+}
+```
+
+## معلومات مفيدة
+
+### التنسيقات لا تتلقى `searchParams`
+
+على عكس [الصفحات](/docs/app/api-reference/file-conventions/page)، مكونات التنسيق **لا** تتلقى خاصية `searchParams`. وذلك لأن التنسيق المشترك [لا يتم إعادة تصييره أثناء التنقل](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering) مما قد يؤدي إلى `searchParams` قديمة بين عمليات التنقل.
+
+عند استخدام التنقل من جانب العميل، يقوم Next.js تلقائيًا بتصيير جزء الصفحة الموجود أسفل التنسيق المشترك بين مسارين فقط.
+
+على سبيل المثال، في هيكل الدليل التالي، `dashboard/layout.tsx` هو التنسيق المشترك لكل من `/dashboard/settings` و `/dashboard/analytics`:
+
+<Image
+  alt="هيكل ملف يظهر مجلد dashboard يحتوي على ملف layout.tsx، ومجلدات settings و analytics تحتوي على صفحاتها الخاصة"
+  srcLight="/docs/light/shared-dashboard-layout.png"
+  srcDark="/docs/dark/shared-dashboard-layout.png"
+  width="1600"
+  height="687"
+/>
+
+عند التنقل من `/dashboard/settings` إلى `/dashboard/analytics`، سيتم إعادة تصيير `page.tsx` في `/dashboard/analytics` على الخادم، بينما لن يتم إعادة تصيير `dashboard/layout.tsx` لأنه واجهة مستخدم مشتركة بين المسارين.
+
+هذا التحسين للأداء يجعل التنقل بين الصفحات التي تشترك في تنسيق أسرع حيث يتعين فقط جلب البيانات وتصيير الصفحة، بدلاً من المسار الكامل الذي قد يتضمن تنسيقات مشتركة تجلب بياناتها الخاصة.
+
+نظرًا لأن `dashboard/layout.tsx` لا يعاد تصييره، قد تصبح خاصية `searchParams` في مكون الخادم للتنسيق **قديمة** بعد التنقل.
+
+- بدلاً من ذلك، استخدم خاصية [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) للصفحة أو خطاف [`useSearchParams`](/docs/app/api-reference/functions/use-search-params) في مكون العميل، والذي يعاد تصييره على العميل بأحدث `searchParams`.
+
+### تنسيقات الجذر
+
+- **يجب** أن يتضمن دليل `app` ملف `app/layout.js` للجذر.
+- **يجب** أن يحدد تنسيق الجذر علامات `<html>` و `<body>`.
+  - **لا يجب** إضافة علامات `<head>` يدويًا مثل `<title>` و `<meta>` إلى تنسيقات الجذر. بدلاً من ذلك، استخدم [واجهة برمجة تطبيقات البيانات الوصفية (Metadata API)](/docs/app/api-reference/functions/generate-metadata) التي تتعامل تلقائيًا مع المتطلبات المتقدمة مثل البث (streaming) وإزالة تكرار عناصر `<head>`.
+- يمكنك استخدام [مجموعات المسارات (route groups)](/docs/app/building-your-application/routing/route-groups) لإنشاء تنسيقات جذر متعددة.
+  - التنقل **بين تنسيقات جذر متعددة** سيؤدي إلى **تحميل كامل للصفحة** (بدلاً من التنقل من جانب العميل). على سبيل المثال، التنقل من `/cart` الذي يستخدم `app/(shop)/layout.js` إلى `/blog` الذي يستخدم `app/(marketing)/layout.js` سيؤدي إلى تحميل كامل للصفحة. هذا **ينطبق فقط** على تنسيقات الجذر المتعددة.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات              |
+| --------- | ---------------------- |
+| `v13.0.0` | تم تقديم `layout`.     |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/loading.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/loading.mdx
new file mode 100644
index 00000000..bc7ede36
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/loading.mdx
@@ -0,0 +1,36 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:29.548Z
+title: loading.js
+description: مرجع API لملف loading.js.
+---
+
+يمكن لملف **loading** إنشاء حالات تحميل فورية مبنية على [Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming).
+
+بشكل افتراضي، هذا الملف هو [مكون من جانب الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components) - ولكن يمكن أيضًا استخدامه كمكون عميل (Client Component) من خلال التوجيه `"use client"`.
+
+```tsx filename="app/feed/loading.tsx" switcher
+export default function Loading() {
+  // أو مكون هيكل تحميل مخصص
+  return <p>Loading...</p>
+}
+```
+
+```jsx filename="app/feed/loading.js" switcher
+export default function Loading() {
+  // أو مكون هيكل تحميل مخصص
+  return <p>Loading...</p>
+}
+```
+
+لا تقبل مكونات واجهة مستخدم التحميل أي معاملات.
+
+> **معلومة مفيدة**
+>
+> - أثناء تصميم واجهة مستخدم التحميل، قد تجد أنه من المفيد استخدام [أداة مطوري React (React Developer Tools)](https://react.dev/learn/react-developer-tools) لتبديل حدود Suspense يدويًا.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات               |
+| --------- | --------------------- |
+| `v13.0.0` | تم إدخال `loading`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/middleware.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/middleware.mdx
new file mode 100644
index 00000000..c2f5f1c6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/middleware.mdx
@@ -0,0 +1,137 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:16.623Z
+title: ملف middleware.js
+description: مرجع API لملف middleware.js.
+related:
+  title: تعلم المزيد عن Middleware
+  links:
+    - app/building-your-application/routing/middleware
+---
+
+يُستخدم ملف `middleware.js|ts` لكتابة [Middleware](/docs/app/building-your-application/routing/middleware) وتنفيذ الكود على الخادم قبل اكتمال الطلب. ثم بناءً على الطلب الوارد، يمكنك تعديل الاستجابة عن طريق إعادة الكتابة، التوجيه، تعديل رؤوس الطلب أو الاستجابة، أو الرد مباشرة.
+
+يتم تنفيذ Middleware قبل عرض المسارات. وهو مفيد بشكل خاص لتنفيذ منطق مخصص من جانب الخادم مثل المصادقة، التسجيل، أو معالجة عمليات التوجيه.
+
+استخدم ملف `middleware.ts` (أو .js) في جذر مشروعك لتعريف Middleware. على سبيل المثال، في نفس مستوى مجلد `app` أو `pages`، أو داخل `src` إذا كان ذلك مناسبًا.
+
+```tsx filename="middleware.ts" switcher
+import { NextResponse, NextRequest } from 'next/server'
+
+// يمكن وضع علامة `async` على هذه الدالة إذا تم استخدام `await` داخلها
+export function middleware(request: NextRequest) {
+  return NextResponse.redirect(new URL('/home', request.url))
+}
+
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+// يمكن وضع علامة `async` على هذه الدالة إذا تم استخدام `await` داخلها
+export function middleware(request) {
+  return NextResponse.redirect(new URL('/home', request.url))
+}
+
+export const config = {
+  matcher: '/about/:path*',
+}
+```
+
+## التصديرات
+
+### دالة Middleware
+
+يجب أن يصدر الملف دالة واحدة، إما كتصدير افتراضي أو باسم `middleware`. لاحظ أنه لا يتم دعم عدة دوال middleware من نفس الملف.
+
+```js filename="middleware.js"
+// مثال على التصدير الافتراضي
+export default function middleware(request) {
+  // منطق Middleware
+}
+```
+
+### كائن التكوين (اختياري)
+
+يمكن تصدير كائن تكوين اختياريًا بجانب دالة Middleware. يتضمن هذا الكائن [matcher](#matcher) لتحديد المسارات التي ينطبق عليها Middleware.
+
+#### Matcher
+
+يسمح خيار `matcher` لك بتحديد مسارات معينة لتنفيذ Middleware عليها. يمكنك تحديد هذه المسارات بعدة طرق:
+
+- لمسار واحد: استخدم سلسلة نصية مباشرة لتحديد المسار، مثل `'/about'`.
+- لعدة مسارات: استخدم مصفوفة لسرد عدة مسارات، مثل `matcher: ['/about', '/contact']`، مما يطبق Middleware على كلا المسارين `/about` و `/contact`.
+
+بالإضافة إلى ذلك، يدعم `matcher` مواصفات مسارات معقدة من خلال التعبيرات المنتظمة، مثل `matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']`، مما يتيح تحكمًا دقيقًا في المسارات التي يجب تضمينها أو استبعادها.
+
+يقبل خيار `matcher` أيضًا مصفوفة من الكائنات بالمفاتيح التالية:
+
+- `source`: المسار أو النمط المستخدم لمطابقة مسارات الطلب. يمكن أن يكون سلسلة لمطابقة المسار مباشرة أو نمط لمطابقة أكثر تعقيدًا.
+- `regexp` (اختياري): سلسلة تعبير منتظم تضبط المطابقة بناءً على المصدر. توفر تحكمًا إضافيًا في المسارات المضمنة أو المستبعدة.
+- `locale` (اختياري): قيمة منطقية، عند تعيينها إلى `false`، تتجاهل التوجيه القائم على اللغة في مطابقة المسار.
+- `has` (اختياري): يحدد شروطًا بناءً على وجود عناصر طلب محددة مثل الرؤوس، معلمات الاستعلام، أو ملفات تعريف الارتباط.
+- `missing` (اختياري): يركز على الشروط حيث تكون عناصر طلب معينة غائبة، مثل الرؤوس أو ملفات تعريف الارتباط المفقودة.
+
+```js filename="middleware.js"
+export const config = {
+  matcher: [
+    {
+      source: '/api/*',
+      regexp: '^/api/(.*)',
+      locale: false,
+      has: [
+        { type: 'header', key: 'Authorization', value: 'Bearer Token' },
+        { type: 'query', key: 'userId', value: '123' },
+      ],
+      missing: [{ type: 'cookie', key: 'session', value: 'active' }],
+    },
+  ],
+}
+```
+
+## المعاملات
+
+### `request`
+
+عند تعريف Middleware، تقبل الدالة الافتراضية المُصدَّرة معاملًا واحدًا، `request`. هذا المعامل هو نسخة من `NextRequest`، الذي يمثل طلب HTTP الوارد.
+
+```tsx filename="middleware.ts" switcher
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // يتم وضع منطق Middleware هنا
+}
+```
+
+```js filename="middleware.js" switcher
+export function middleware(request) {
+  // يتم وضع منطق Middleware هنا
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - `NextRequest` هو نوع يمثل طلبات HTTP الواردة في Middleware الخاص بـ Next.js، بينما [`NextResponse`](#nextresponse) هو فئة تُستخدم لمعالجة وإرسال استجابات HTTP.
+
+## NextResponse
+
+يمكن لـ Middleware استخدام كائن [`NextResponse`](/docs/app/building-your-application/routing/middleware#nextresponse) الذي يمتد من [واجهة برمجة تطبيقات Web Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). عن طريق إرجاع كائن `NextResponse`، يمكنك معالجة ملفات تعريف الارتباط مباشرة، تعيين الرؤوس، تنفيذ عمليات التوجيه، وإعادة كتابة المسارات.
+
+> **معلومة مفيدة**: بالنسبة لعمليات التوجيه، يمكنك أيضًا استخدام `Response.redirect` بدلاً من `NextResponse.redirect`.
+
+## وقت التشغيل
+
+يدعم Middleware فقط [وقت تشغيل Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes). لا يمكن استخدام وقت تشغيل Node.js.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                       |
+| --------- | --------------------------------------------------------------------------------------------- |
+| `v13.1.0` | تمت إضافة أعلام Middleware المتقدمة                                                               |
+| `v13.0.0` | يمكن لـ Middleware تعديل رؤوس الطلب، رؤوس الاستجابة، وإرسال الاستجابات                   |
+| `v12.2.0` | أصبح Middleware مستقرًا، يرجى الاطلاع على [دليل الترقية](/docs/messages/middleware-upgrade-guide) |
+| `v12.0.9` | فرض عناوين URL المطلقة في وقت تشغيل Edge ([PR](https://github.com/vercel/next.js/pull/33410))    |
+| `v12.0.0` | تمت إضافة Middleware (نسخة تجريبية)                                                                       |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/not-found.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/not-found.mdx
new file mode 100644
index 00000000..b5d07c95
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/not-found.mdx
@@ -0,0 +1,95 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:43.493Z
+title: not-found.js
+description: مرجع API لملف not-found.js.
+---
+
+يستخدم ملف **not-found** لعرض واجهة المستخدم عند استدعاء دالة [`notFound`](/docs/app/api-reference/functions/not-found) داخل مقطع مسار. بالإضافة إلى تقديم واجهة مستخدم مخصصة، سيقوم Next.js بإرجاع رمز حالة HTTP `200` للاستجابات المُجراة (streamed)، و`404` للاستجابات غير المُجراة.
+
+```tsx filename="app/not-found.tsx" switcher
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/blog/not-found.js" switcher
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  )
+}
+```
+
+> **معلومة مفيدة**: بالإضافة إلى معالجة أخطاء `notFound()` المتوقعة، فإن ملف `app/not-found.js` الرئيسي يتعامل أيضًا مع أي عناوين URL غير متطابقة لتطبيقك بالكامل. هذا يعني أن المستخدمين الذين يزورون عنوان URL غير معالج بواسطة تطبيقك سيشاهدون واجهة المستخدم التي يوفرها ملف `app/not-found.js`.
+
+## الخصائص (Props)
+
+لا تقبل مكونات `not-found.js` أي خصائص (props).
+
+## جلب البيانات (Data Fetching)
+
+بشكل افتراضي، `not-found` هو مكون خادم (Server Component). يمكنك تعليمه كـ `async` لجلب وعرض البيانات:
+
+```tsx filename="app/not-found.tsx" switcher
+import Link from 'next/link'
+import { headers } from 'next/headers'
+
+export default async function NotFound() {
+  const headersList = headers()
+  const domain = headersList.get('host')
+  const data = await getSiteData(domain)
+  return (
+    <div>
+      <h2>Not Found: {data.name}</h2>
+      <p>Could not find requested resource</p>
+      <p>
+        View <Link href="/blog">all posts</Link>
+      </p>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/not-found.jsx" switcher
+import Link from 'next/link'
+import { headers } from 'next/headers'
+
+export default async function NotFound() {
+  const headersList = headers()
+  const domain = headersList.get('host')
+  const data = await getSiteData(domain)
+  return (
+    <div>
+      <h2>Not Found: {data.name}</h2>
+      <p>Could not find requested resource</p>
+      <p>
+        View <Link href="/blog">all posts</Link>
+      </p>
+    </div>
+  )
+}
+```
+
+إذا كنت بحاجة إلى استخدام خطافات (hooks) مكون العميل مثل `usePathname` لعرض المحتوى بناءً على المسار، فيجب عليك جلب البيانات من جانب العميل بدلاً من ذلك.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                             |
+| --------- | --------------------------------------------------- |
+| `v13.3.0` | ملف `app/not-found` الرئيسي يتعامل مع عناوين URL غير المتطابقة عالميًا. |
+| `v13.0.0` | تم تقديم `not-found`.                             |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/page.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/page.mdx
new file mode 100644
index 00000000..9628feee
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/page.mdx
@@ -0,0 +1,59 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:13.740Z
+title: ملف page.js
+description: مرجع API لملف page.js.
+---
+
+**الصفحة** هي واجهة مستخدم فريدة لكل مسار.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function Page({
+  params,
+  searchParams,
+}: {
+  params: { slug: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}) {
+  return <h1>My Page</h1>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export default function Page({ params, searchParams }) {
+  return <h1>My Page</h1>
+}
+```
+
+## الخصائص
+
+### `params` (اختياري)
+
+كائن يحتوي على [معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من الجزء الجذري وصولاً إلى تلك الصفحة. على سبيل المثال:
+
+| المثال                               | الرابط       | `params`                       |
+| ------------------------------------ | ----------- | ------------------------------ |
+| `app/shop/[slug]/page.js`            | `/shop/1`   | `{ slug: '1' }`                |
+| `app/shop/[category]/[item]/page.js` | `/shop/1/2` | `{ category: '1', item: '2' }` |
+| `app/shop/[...slug]/page.js`         | `/shop/1/2` | `{ slug: ['1', '2'] }`         |
+
+### `searchParams` (اختياري)
+
+كائن يحتوي على [معلمات البحث](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) للرابط الحالي. على سبيل المثال:
+
+| الرابط            | `searchParams`       |
+| --------------- | -------------------- |
+| `/shop?a=1`     | `{ a: '1' }`         |
+| `/shop?a=1&b=2` | `{ a: '1', b: '2' }` |
+| `/shop?a=1&a=2` | `{ a: ['1', '2'] }`  |
+
+> **معلومة مفيدة**:
+>
+> - `searchParams` هو [وظيفة ديناميكية (Dynamic API)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) لا يمكن معرفة قيمها مسبقًا. استخدامها سيؤدي إلى تفعيل [التصيير الديناميكي (dynamic rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) في وقت الطلب.
+> - `searchParams` يُرجع كائن JavaScript عادي وليس نسخة من `URLSearchParams`.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات            |
+| --------- | ------------------ |
+| `v13.0.0` | تم إدخال `page`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
new file mode 100644
index 00000000..76244051
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
@@ -0,0 +1,227 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:35:27.086Z
+title: تكوين مقطع المسار (Route Segment Config)
+description: تعلم كيفية تكوين خيارات مقاطع المسار في Next.js.
+---
+
+تتيح لك خيارات مقطع المسار تكوين سلوك [الصفحة](/docs/app/building-your-application/routing/pages-and-layouts)، أو [التخطيط](/docs/app/building-your-application/routing/pages-and-layouts)، أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers) من خلال تصدير المتغيرات التالية مباشرة:
+
+| الخيار                                | النوع                                                                                                                      | الافتراضي                    |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| [`dynamic`](#dynamic)                 | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`                                                                  | `'auto'`                   |
+| [`dynamicParams`](#dynamicparams)     | `boolean`                                                                                                                 | `true`                     |
+| [`revalidate`](#revalidate)           | `false \| 0 \| number`                                                                                                    | `false`                    |
+| [`fetchCache`](#fetchcache)           | `'auto' \| 'default-cache' \| 'only-cache' \| 'force-cache' \| 'force-no-store' \| 'default-no-store' \| 'only-no-store'` | `'auto'`                   |
+| [`runtime`](#runtime)                 | `'nodejs' \| 'edge'`                                                                                                      | `'nodejs'`                 |
+| [`preferredRegion`](#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]`                                                                      | `'auto'`                   |
+| [`maxDuration`](#maxduration)         | `number`                                                                                                                  | يتم تعيينه بواسطة منصة النشر |
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+export const maxDuration = 5
+
+export default function MyComponent() {}
+```
+
+```jsx filename="layout.js | page.js | route.js" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+export const maxDuration = 5
+
+export default function MyComponent() {}
+```
+
+> **معلومة مفيدة**:
+>
+> - يجب أن تكون قيم خيارات التكوين قابلة للتحليل الثابت حالياً. على سبيل المثال `revalidate = 600` صالحة، لكن `revalidate = 60 * 10` غير صالحة.
+
+## الخيارات
+
+### `dynamic`
+
+تغيير السلوك الديناميكي للتخطيط أو الصفحة إلى ثابت بالكامل أو ديناميكي بالكامل.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const dynamic = 'auto'
+// 'auto' | 'force-dynamic' | 'error' | 'force-static'
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const dynamic = 'auto'
+// 'auto' | 'force-dynamic' | 'error' | 'force-static'
+```
+
+> **معلومة مفيدة**: النموذج الجديد في دليل `app` يفضل التحكم الدقيق في التخزين المؤقت على مستوى طلب `fetch` بدلاً من النموذج الثنائي الكلي لـ `getServerSideProps` و `getStaticProps` على مستوى الصفحة في دليل `pages`. خيار `dynamic` هو طريقة للعودة إلى النموذج السابق كتسهيل ويوفر مسار هجرة أبسط.
+
+- **`'auto'`** (الافتراضي): الخيار الافتراضي لتخزين أكبر قدر ممكن دون منع أي مكونات من اختيار السلوك الديناميكي.
+- **`'force-dynamic'`**: إجبار [التصيير الديناميكي (dynamic rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)، مما سيؤدي إلى تصيير المسارات لكل مستخدم عند وقت الطلب. هذا الخيار يعادل `getServerSideProps()` في دليل `pages`.
+
+- **`'error'`**: إجبار التصيير الثابت وتخزين بيانات التخطيط أو الصفحة عن طريق التسبب في خطأ إذا استخدمت أي مكونات [وظائف ديناميكية (dynamic functions)](/docs/app/building-your-application/rendering/server-components#dynamic-functions) أو بيانات غير مخزنة مؤقتاً. هذا الخيار يعادل:
+  - `getStaticProps()` في دليل `pages`.
+  - تعيين خيار كل طلب `fetch()` في تخطيط أو صفحة إلى `{ cache: 'force-cache' }`.
+  - تعيين تكوين المقطع إلى `fetchCache = 'only-cache', dynamicParams = false`.
+  - `dynamic = 'error'` يغير الافتراضي لـ `dynamicParams` من `true` إلى `false`. يمكنك العودة إلى تصيير الصفحات ديناميكياً للمعلمات الديناميكية التي لم يتم إنشاؤها بواسطة `generateStaticParams` عن طريق تعيين `dynamicParams = true` يدوياً.
+- **`'force-static'`**: إجبار التصيير الثابت وتخزين بيانات التخطيط أو الصفحة عن طريق إجبار [`cookies()`](/docs/app/api-reference/functions/cookies)، و [`headers()`](/docs/app/api-reference/functions/headers) و [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) على إرجاع قيم فارغة.
+
+> **معلومة مفيدة**:
+>
+> - يمكن العثور على إرشادات حول [كيفية الترقية](/docs/app/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods) من `getServerSideProps` و `getStaticProps` إلى `dynamic: 'force-dynamic'` و `dynamic: 'error'` في [دليل الترقية](/docs/app/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods).
+
+### `dynamicParams`
+
+التحكم فيما يحدث عند زيارة مقطع ديناميكي لم يتم إنشاؤه باستخدام [generateStaticParams](/docs/app/api-reference/functions/generate-static-params).
+
+```tsx filename="layout.tsx | page.tsx" switcher
+export const dynamicParams = true // true | false,
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const dynamicParams = true // true | false,
+```
+
+- **`true`** (الافتراضي): يتم إنشاء المقاطع الديناميكية غير المضمنة في `generateStaticParams` عند الطلب.
+- **`false`**: سترجع المقاطع الديناميكية غير المضمنة في `generateStaticParams` خطأ 404.
+
+> **معلومة مفيدة**:
+>
+> - يحل هذا الخيار محل خيار `fallback: true | false | blocking` لـ `getStaticPaths` في دليل `pages`.
+> - عندما يكون `dynamicParams = true`، يستخدم المقطع [تصيير الخادم المتدفق (Streaming Server Rendering)](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense).
+> - إذا تم استخدام `dynamic = 'error'` و `dynamic = 'force-static'`، فسيغير الافتراضي لـ `dynamicParams` إلى `false`.
+
+### `revalidate`
+
+تعيين وقت إعادة التحقق الافتراضي للتخطيط أو الصفحة. لا يتجاوز هذا الخيار قيمة `revalidate` المعينة بواسطة طلبات `fetch` الفردية.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const revalidate = false
+// false | 0 | number
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const revalidate = false
+// false | 0 | number
+```
+
+- **`false`** (الافتراضي): الاستدلال الافتراضي لتخزين أي طلبات `fetch` التي تعين خيار `cache` الخاص بها إلى `'force-cache'` أو التي يتم اكتشافها قبل استخدام [وظيفة ديناميكية (dynamic function)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions). يعادل دلالياً `revalidate: Infinity` مما يعني بشكل فعال أنه يجب تخزين المورد إلى أجل غير مسمى. لا يزال بإمكان طلبات `fetch` الفردية استخدام `cache: 'no-store'` أو `revalidate: 0` لتجنب التخزين المؤقت وجعل المسار يتم تصييره ديناميكياً. أو تعيين `revalidate` إلى رقم موجب أقل من الافتراضي للمسار لزيادة تواتر إعادة التحقق للمسار.
+- **`0`**: التأكد من أن التخطيط أو الصفحة يتم [تصييره ديناميكياً (dynamically rendered)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) دائماً حتى إذا لم يتم اكتشاف أي وظائف ديناميكية أو جلب بيانات غير مخزنة مؤقتاً. يغير هذا الخيار الافتراضي لطلبات `fetch` التي لا تعين خيار `cache` إلى `'no-store'` ولكن يترك طلبات `fetch` التي تختار `'force-cache'` أو تستخدم `revalidate` موجباً كما هي.
+- **`number`**: (بالثواني) تعيين تواتر إعادة التحقق الافتراضي للتخطيط أو الصفحة إلى `n` ثانية.
+
+> **معلومة مفيدة**: خيار `revalidate` متاح فقط عند استخدام [وقت تشغيل Node.js (Node.js Runtime)](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#nodejs-runtime). هذا يعني أن استخدام خيار `revalidate` مع `runtime = 'edge'` لن يعمل.
+
+#### تواتر إعادة التحقق
+
+- سيحدد أقل `revalidate` عبر كل تخطيط وصفحة لمسار واحد تواتر إعادة التحقق للمسار _بالكامل_. يضمن هذا إعادة التحقق من الصفحات الفرنية بتواتر مشابه لتخطيطاتها الأصلية.
+- يمكن لطلبات `fetch` الفردية تعيين `revalidate` أقل من `revalidate` الافتراضي للمسار لزيادة تواتر إعادة التحقق للمسار بالكامل. يسمح لك هذا بالاختيار الديناميكي لإعادة التحقق الأكثر تواتراً لمسارات معينة بناءً على بعض المعايير.
+
+### `fetchCache`
+
+<details>
+  <summary>هذا خيار متقدم يجب استخدامه فقط إذا كنت بحاجة تحديداً إلى تجاوز السلوك الافتراضي.</summary>
+
+بشكل افتراضي، سيخزن Next.js **أي** طلبات `fetch()` يمكن الوصول إليها **قبل** استخدام أي [وظائف ديناميكية (dynamic functions)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) **ولن يخزن** طلبات `fetch` التي يتم اكتشافها **بعد** استخدام الوظائف الديناميكية.
+
+يسمح لك `fetchCache` بتجاوز خيار `cache` الافتراضي لجميع طلبات `fetch` في تخطيط أو صفحة.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const fetchCache = 'auto'
+// 'auto' | 'default-cache' | 'only-cache'
+// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const fetchCache = 'auto'
+// 'auto' | 'default-cache' | 'only-cache'
+// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
+```
+
+- **`'auto'`** (الافتراضي): الخيار الافتراضي لتخزين طلبات `fetch` قبل الوظائف الديناميكية مع خيار `cache` الذي توفره وعدم تخزين طلبات `fetch` بعد الوظائف الديناميكية.
+- **`'default-cache'`**: السماح بأي خيار `cache` يتم تمريره إلى `fetch` ولكن إذا لم يتم توفير خيار، فسيتم تعيين خيار `cache` إلى `'force-cache'`. هذا يعني أن حتى طلبات `fetch` بعد الوظائف الديناميكية تعتبر ثابتة.
+- **`'only-cache'`**: التأكد من أن جميع طلبات `fetch` تختار التخزين المؤقت عن طريق تغيير الافتراضي إلى `cache: 'force-cache'` إذا لم يتم توفير خيار والتسبب في خطأ إذا استخدمت أي طلبات `fetch` `cache: 'no-store'`.
+- **`'force-cache'`**: التأكد من أن جميع طلبات `fetch` تختار التخزين المؤقت عن طريق تعيين خيار `cache` لجميع طلبات `fetch` إلى `'force-cache'`.
+- **`'default-no-store'`**: السماح بأي خيار `cache` يتم تمريره إلى `fetch` ولكن إذا لم يتم توفير خيار، فسيتم تعيين خيار `cache` إلى `'no-store'`. هذا يعني أن حتى طلبات `fetch` قبل الوظائف الديناميكية تعتبر ديناميكية.
+- **`'only-no-store'`**: التأكد من أن جميع طلبات `fetch` تختار عدم التخزين المؤقت عن طريق تغيير الافتراضي إلى `cache: 'no-store'` إذا لم يتم توفير خيار والتسبب في خطأ إذا استخدمت أي طلبات `fetch` `cache: 'force-cache'`
+- **`'force-no-store'`**: التأكد من أن جميع طلبات `fetch` تختار عدم التخزين المؤقت عن طريق تعيين خيار `cache` لجميع طلبات `fetch` إلى `'no-store'`. هذا يجبر جميع طلبات `fetch` على إعادة الجلب في كل طلب حتى إذا قدمت خيار `'force-cache'`.
+
+#### سلوك المقطع عبر المسار
+
+- يجب أن تكون أي خيارات معينة عبر كل تخطيط وصفحة لمسار واحد متوافقة مع بعضها البعض.
+  - إذا تم توفير كل من `'only-cache'` و `'force-cache'`، فإن `'force-cache'` يفوز. إذا تم توفير كل من `'only-no-store'` و `'force-no-store'`، فإن `'force-no-store'` يفوز. يغير الخيار القسري السلوك عبر المسار بحيث يمنع مقطع واحد مع `'force-*'` أي أخطاء ناتجة عن `'only-*'`.
+  - الهدف من خيارات `'only-*'` و `force-*'` هو ضمان أن المسار بالكامل إما ثابت بالكامل أو ديناميكي بالكامل. هذا يعني:
+    - لا يُسمح بدمج `'only-cache'` و `'only-no-store'` في مسار واحد.
+    - لا يُسمح بدمج `'force-cache'` و `'force-no-store'` في مسار واحد.
+  - لا يمكن للوالد تقديم `'default-no-store'` إذا قدم الطفل `'auto'` أو `'*-cache'` لأن ذلك قد يجعل نفس طلب الجلب له سلوك مختلف.
+- يُوصى عمومًا بترك التخطيطات الأصلية المشتركة كـ `'auto'` وتخصيص الخيارات حيث تختلف المقاطع الفرعية.
+
+</details>
+
+### `runtime`
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const runtime = 'nodejs'
+// 'nodejs' | 'edge'
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const runtime = 'nodejs'
+// 'nodejs' | 'edge'
+```
+
+- **`'nodejs'`** (الافتراضي)
+- **`'edge'`**
+
+تعلم المزيد عن [وقت تشغيل Edge و Node.js (Edge and Node.js runtimes)](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+
+### `preferredRegion`
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const preferredRegion = 'auto'
+// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const preferredRegion = 'auto'
+// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
+```
+
+يعتمد دعم `preferredRegion` والمناطق المدعومة على منصة النشر الخاصة بك.
+
+> **معلومة مفيدة**:
+>
+> - إذا لم يتم تحديد `preferredRegion`، فسوف يرث خيار أقرب تخطيط أبوي.
+> - التخطيط الجذري افتراضيًا لجميع المناطق.
+
+### `maxDuration`
+
+بشكل افتراضي، لا يحد Next.js من تنفيذ منطق جانب الخادم (تصيير صفحة أو معالجة API).
+يمكن لمنصات النشر استخدام `maxDuration` من إخراج بناء Next.js لإضافة حدود تنفيذ محددة.
+على سبيل المثال، على [Vercel](https://vercel.com/docs/functions/serverless-functions/runtimes#max-duration).
+
+**ملاحظة**: تتطلب هذه الإعدادات Next.js `13.4.10` أو أعلى.
+
+```tsx filename="layout.tsx | page.tsx | route.ts" switcher
+export const maxDuration = 5
+```
+
+```js filename="layout.js | page.js | route.js" switcher
+export const maxDuration = 5
+```
+
+> **معلومة مفيدة**:
+>
+> - إذا كنت تستخدم [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations)، فقم بتعيين `maxDuration` على مستوى الصفحة لتغيير المهلة الافتراضية لجميع إجراءات الخادم المستخدمة في الصفحة.
+
+### `generateStaticParams`
+
+يمكن استخدام الدالة `generateStaticParams` بالاشتراك مع [مقاطع المسار الديناميكية (dynamic route segments)](/docs/app/building-your-application/routing/dynamic-routes) لتحديد قائمة معلمات مقطع المسار التي سيتم إنشاؤها ثابتاً في وقت البناء بدلاً من عند الطلب في وقت الطلب.
+
+راجع [مرجع API](/docs/app/api-reference/functions/generate-static-params) لمزيد من التفاصيل.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/route.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/route.mdx
new file mode 100644
index 00000000..167616a8
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/route.mdx
@@ -0,0 +1,94 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:22.424Z
+title: ملف route.js
+description: مرجع API لملف route.js الخاص.
+---
+
+تسمح لك معالجات المسارات (Route Handlers) بإنشاء معالجات طلبات مخصصة لمسار معين باستخدام واجهات برمجة التطبيقات [Request](https://developer.mozilla.org/docs/Web/API/Request) و [Response](https://developer.mozilla.org/docs/Web/API/Response) الخاصة بالويب.
+
+## طرق HTTP
+
+يسمح لك ملف **المسار** بإنشاء معالجات طلبات مخصصة لمسار معين. الطرق التالية من [HTTP methods](https://developer.mozilla.org/docs/Web/HTTP/Methods) مدعومة: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, و `OPTIONS`.
+
+```ts filename="route.ts" switcher
+export async function GET(request: Request) {}
+
+export async function HEAD(request: Request) {}
+
+export async function POST(request: Request) {}
+
+export async function PUT(request: Request) {}
+
+export async function DELETE(request: Request) {}
+
+export async function PATCH(request: Request) {}
+
+// إذا لم يتم تعريف `OPTIONS`، فإن Next.js ستنفذ `OPTIONS` تلقائيًا وتعيين رأس الاستجابة `Allow` المناسب بناءً على الطرق الأخرى المعرفة في معالج المسار.
+export async function OPTIONS(request: Request) {}
+```
+
+```js filename="route.js" switcher
+export async function GET(request) {}
+
+export async function HEAD(request) {}
+
+export async function POST(request) {}
+
+export async function PUT(request) {}
+
+export async function DELETE(request) {}
+
+export async function PATCH(request) {}
+
+// إذا لم يتم تعريف `OPTIONS`، فإن Next.js ستنفذ `OPTIONS` تلقائيًا وتعيين رأس الاستجابة `Allow` المناسب بناءً على الطرق الأخرى المعرفة في معالج المسار.
+export async function OPTIONS(request) {}
+```
+
+> **معلومة مفيدة**: معالجات المسارات متاحة فقط داخل دليل `app`. **لا تحتاج** إلى استخدام مسارات API (`pages`) ومعالجات المسارات (`app`) معًا، حيث يجب أن تكون معالجات المسارات قادرة على التعامل مع جميع حالات الاستخدام.
+
+## المعاملات
+
+### `request` (اختياري)
+
+كائن `request` هو كائن [NextRequest](/docs/app/api-reference/functions/next-request)، وهو امتداد لواجهة برمجة التطبيقات [Request](https://developer.mozilla.org/docs/Web/API/Request) الخاصة بالويب. يمنحك `NextRequest` تحكمًا أكبر في الطلب الوارد، بما في ذلك الوصول السهل إلى `cookies` وكائن URL ممتد ومحلل `nextUrl`.
+
+### `context` (اختياري)
+
+```ts filename="app/dashboard/[team]/route.ts" switcher
+type Params = {
+  team: string
+}
+
+export async function GET(request: Request, context: { params: Params }) {
+  const team = context.params.team // '1'
+}
+
+// حدد نوع params وفقًا لمعاملات المسار الخاصة بك (انظر الجدول أدناه)
+```
+
+```js filename="app/dashboard/[team]/route.js" switcher
+
+export async function GET(request, context: { params }) {
+  const team = context.params.team // '1'
+}
+
+```
+
+حاليًا، القيمة الوحيدة لـ `context` هي `params`، وهو كائن يحتوي على [معاملات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) للمسار الحالي.
+
+| مثال                           | URL            | `params`                  |
+| ------------------------------ | -------------- | ------------------------- |
+| `app/dashboard/[team]/route.js`  | `/dashboard/1` | `{ team: '1' }`           |
+| `app/shop/[tag]/[item]/route.js` | `/shop/1/2`    | `{ tag: '1', item: '2' }` |
+| `app/blog/[...slug]/route.js`    | `/blog/1/2`    | `{ slug: ['1', '2'] }`    |
+
+## NextResponse
+
+يمكن لمعالجات المسارات توسيع واجهة برمجة التطبيقات Response الخاصة بالويب عن طريق إرجاع كائن `NextResponse`. هذا يسمح لك بسهولة تعيين ملفات تعريف الارتباط (cookies) والعناوين وإعادة التوجيه وإعادة الكتابة. [عرض مرجع API](/docs/app/api-reference/functions/next-response).
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                        |
+| --------- | ------------------------------ |
+| `v13.2.0` | تم تقديم معالجات المسارات. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/template.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/template.mdx
new file mode 100644
index 00000000..14e0fce4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/02-file-conventions/template.mdx
@@ -0,0 +1,57 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:09.083Z
+title: ملف template.js
+description: مرجع API لملف template.js.
+---
+
+ملف **القالب (template)** يشبه [التخطيط (layout)](/docs/app/building-your-application/routing/pages-and-layouts#layouts) من حيث أنه يغلف كل تخطيط فرعي أو صفحة. ولكن على عكس التخطيطات التي تظل ثابتة عبر المسارات وتحافظ على الحالة، فإن القوالب تنشئ نسخة جديدة لكل عنصر فرعي عند التنقل.
+
+```tsx filename="app/template.tsx" switcher
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>
+}
+```
+
+```jsx filename="app/template.jsx" switcher
+export default function Template({ children }) {
+  return <div>{children}</div>
+}
+```
+
+<Image
+  alt="ملف template.js الخاص"
+  srcLight="/docs/light/template-special-file.png"
+  srcDark="/docs/dark/template-special-file.png"
+  width="1600"
+  height="444"
+/>
+
+على الرغم من أنه أقل شيوعًا، قد تختار استخدام قالب بدلاً من تخطيط إذا كنت تريد:
+
+- ميزات تعتمد على `useEffect` (مثل تسجيل مشاهدات الصفحة) و `useState` (مثل نموذج تعليقات لكل صفحة).
+- تغيير السلوك الافتراضي للإطار. على سبيل المثال، حدود Suspense داخل التخطيطات تظهر الحالة الاحتياطية فقط عند تحميل التخطيط لأول مرة وليس عند تبديل الصفحات. أما في القوالب، فإن الحالة الاحتياطية تظهر في كل تنقل.
+
+## الخصائص
+
+### `children` (مطلوب)
+
+يجب أن تقبل مكونات القالب وتستخدم خاصية `children`. يتم عرض `template` بين [التخطيط (layout)](/docs/app/api-reference/file-conventions/layout) وعناصره الفرعية. على سبيل المثال:
+
+```jsx filename="الإخراج"
+<Layout>
+  {/* لاحظ أن القالب يحصل على مفتاح فريد. */}
+  <Template key={routeParam}>{children}</Template>
+</Layout>
+```
+
+> **معلومة مفيدة**:
+>
+> - افتراضيًا، `template` هو [مكون خادم (Server Component)](/docs/app/building-your-application/rendering/server-components)، ولكن يمكن أيضًا استخدامه كـ [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components) عبر توجيه `"use client"`.
+> - عندما ينتقل المستخدم بين المسارات التي تشترك في `template`، يتم تحميل نسخة جديدة من المكون، يتم إعادة إنشاء عناصر DOM، **لا** يتم الحفاظ على الحالة، ويتم إعادة مزامنة التأثيرات.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                 |
+| --------- | ------------------------- |
+| `v13.0.0` | تم تقديم `template`.      |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/cookies.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/cookies.mdx
new file mode 100644
index 00000000..cb9ef6ee
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/cookies.mdx
@@ -0,0 +1,159 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:33.985Z
+title: ملفات تعريف الارتباط (cookies)
+description: مرجع API لوظيفة ملفات تعريف الارتباط (cookies).
+related:
+  title: الخطوات التالية
+  description: لمزيد من المعلومات حول ما يمكنك القيام به بعد ذلك، نوصي بالأقسام التالية
+  links:
+    - app/building-your-application/data-fetching/server-actions-and-mutations
+---
+
+تتيح لك وظيفة `cookies` قراءة ملفات تعريف الارتباط (cookies) الواردة في طلب HTTP من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components) أو كتابة ملفات تعريف الارتباط الصادرة في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+> **معلومة مفيدة**: `cookies()` هي [وظيفة ديناميكية (Dynamic Function)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) لا يمكن معرفة قيمها مسبقًا. استخدامها في تخطيط أو صفحة سيؤدي إلى تحويل المسار إلى [عرض ديناميكي (dynamic rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) عند وقت الطلب.
+
+## `cookies().get(name)`
+
+طريقة تأخذ اسم ملف تعريف الارتباط وتُرجع كائنًا يحتوي على الاسم والقيمة. إذا لم يتم العثور على ملف تعريف الارتباط بالاسم المحدد، تُرجع `undefined`. إذا وجدت عدة ملفات مطابقة، ستُرجع أول تطابق فقط.
+
+```jsx filename="app/page.js"
+import { cookies } from 'next/headers'
+
+export default function Page() {
+  const cookieStore = cookies()
+  const theme = cookieStore.get('theme')
+  return '...'
+}
+```
+
+## `cookies().getAll()`
+
+طريقة مشابهة لـ `get`، ولكنها تُرجع قائمة بجميع ملفات تعريف الارتباط المطابقة للاسم. إذا لم يتم تحديد الاسم، تُرجع جميع ملفات تعريف الارتباط المتاحة.
+
+```jsx filename="app/page.js"
+import { cookies } from 'next/headers'
+
+export default function Page() {
+  const cookieStore = cookies()
+  return cookieStore.getAll().map((cookie) => (
+    <div key={cookie.name}>
+      <p>Name: {cookie.name}</p>
+      <p>Value: {cookie.value}</p>
+    </div>
+  ))
+}
+```
+
+## `cookies().has(name)`
+
+طريقة تأخذ اسم ملف تعريف الارتباط وتُرجع قيمة `boolean` بناءً على وجود الملف (`true`) أو عدم وجوده (`false`).
+
+```jsx filename="app/page.js"
+import { cookies } from 'next/headers'
+
+export default function Page() {
+  const cookieStore = cookies()
+  const hasCookie = cookieStore.has('theme')
+  return '...'
+}
+```
+
+## `cookies().set(name, value, options)`
+
+طريقة تأخذ اسم ملف تعريف الارتباط وقيمة وخيارات وتقوم بتعيين ملف تعريف الارتباط الصادر.
+
+> **معلومة مفيدة**: لا يسمح HTTP بتعيين ملفات تعريف الارتباط بعد بدء البث، لذا يجب استخدام `.set()` في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function create(data) {
+  cookies().set('name', 'lee')
+  // أو
+  cookies().set('name', 'lee', { secure: true })
+  // أو
+  cookies().set({
+    name: 'name',
+    value: 'lee',
+    httpOnly: true,
+    path: '/',
+  })
+}
+```
+
+## حذف ملفات تعريف الارتباط
+
+> **معلومة مفيدة**: يمكنك فقط حذف ملفات تعريف الارتباط في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+هناك عدة خيارات لحذف ملف تعريف الارتباط:
+
+### `cookies().delete(name)`
+
+يمكنك حذف ملف تعريف الارتباط صراحةً بالاسم المحدد.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function delete(data) {
+  cookies().delete('name')
+}
+```
+
+### `cookies().set(name, '')`
+
+بدلاً من ذلك، يمكنك تعيين ملف تعريف ارتباط جديد بنفس الاسم وقيمة فارغة.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function delete(data) {
+  cookies().set('name', '')
+}
+```
+
+> **معلومة مفيدة**: `.set()` متاح فقط في [إجراء الخادم (Server Action)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) أو [معالج المسار (Route Handler)](/docs/app/building-your-application/routing/route-handlers).
+
+### `cookies().set(name, value, { maxAge: 0 })`
+
+تعيين `maxAge` إلى 0 سينتهي صلاحية ملف تعريف الارتباط فورًا.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function delete(data) {
+  cookies().set('name', 'value', { maxAge: 0 })
+}
+```
+
+### `cookies().set(name, value, { expires: timestamp })`
+
+تعيين `expires` إلى أي قيمة في الماضي سينتهي صلاحية ملف تعريف الارتباط فورًا.
+
+```js filename="app/actions.js"
+'use server'
+
+import { cookies } from 'next/headers'
+
+async function delete(data) {
+  const oneDay = 24 * 60 * 60 * 1000
+  cookies().set('name', 'value', { expires: Date.now() - oneDay })
+}
+```
+
+> **معلومة مفيدة**: يمكنك فقط حذف ملفات تعريف الارتباط التي تنتمي إلى نفس النطاق الذي يتم منه استدعاء `.set()`. بالإضافة إلى ذلك، يجب تنفيذ الكود على نفس البروتوكول (HTTP أو HTTPS) مثل ملف تعريف الارتباط الذي تريد حذفه.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات               |
+| --------- | --------------------- |
+| `v13.0.0` | تم إدخال `cookies`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/draft-mode.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/draft-mode.mdx
new file mode 100644
index 00000000..2f12702a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/draft-mode.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:38.740Z
+title: draftMode
+description: مرجع API لوظيفة draftMode.
+---
+
+تتيح لك وظيفة `draftMode` اكتشاف [وضع المسودة (Draft Mode)](/docs/app/building-your-application/configuring/draft-mode) داخل [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components).
+
+```jsx filename="app/page.js"
+import { draftMode } from 'next/headers'
+
+export default function Page() {
+  const { isEnabled } = draftMode()
+  return (
+    <main>
+      <h1>My Blog Post</h1>
+      <p>Draft Mode is currently {isEnabled ? 'Enabled' : 'Disabled'}</p>
+    </main>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                 |
+| --------- | ----------------------- |
+| `v13.4.0` | تم إدخال `draftMode`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/fetch.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/fetch.mdx
new file mode 100644
index 00000000..ff397786
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/fetch.mdx
@@ -0,0 +1,109 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:26.819Z
+title: fetch
+description: مرجع API لدالة fetch الممتدة.
+---
+
+يقوم Next.js بتمديد [واجهة برمجة تطبيقات `fetch()` الأصلية على الويب](https://developer.mozilla.org/docs/Web/API/Fetch_API) للسماح لكل طلب على الخادم بتعيين دلالات التخزين المؤقت الخاصة به بشكل دائم.
+
+في المتصفح، يشير خيار `cache` إلى كيفية تفاعل طلب fetch مع _ذاكرة التخزين المؤقت HTTP للمتصفح_. مع هذا الامتداد، يشير `cache` إلى كيفية تفاعل طلب fetch من _جانب الخادم_ مع ذاكرة التخزين المؤقت HTTP الدائمة للإطار.
+
+يمكنك استدعاء `fetch` مع `async` و `await` مباشرة داخل مكونات الخادم.
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الإعداد الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا مع عمر افتراضي قدره 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default async function Page() {
+  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
+  // مشابه لـ `getStaticProps`.
+  // `force-cache` هو الإعداد الافتراضي ويمكن حذفه.
+  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
+
+  // يجب إعادة جلب هذا الطلب في كل طلب.
+  // مشابه لـ `getServerSideProps`.
+  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
+
+  // يجب تخزين هذا الطلب مؤقتًا مع عمر افتراضي قدره 10 ثوانٍ.
+  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
+  const revalidatedData = await fetch(`https://...`, {
+    next: { revalidate: 10 },
+  })
+
+  return <div>...</div>
+}
+```
+
+## `fetch(url, options)`
+
+بما أن Next.js يمدد [واجهة برمجة تطبيقات `fetch()` على الويب](https://developer.mozilla.org/docs/Web/API/Fetch_API)، يمكنك استخدام أي من [الخيارات الأصلية المتاحة](https://developer.mozilla.org/docs/Web/API/fetch#parameters).
+
+### `options.cache`
+
+تكوين كيفية تفاعل الطلب مع [ذاكرة التخزين المؤقت للبيانات](/docs/app/building-your-application/caching#data-cache) في Next.js.
+
+```ts
+fetch(`https://...`, { cache: 'force-cache' | 'no-store' })
+```
+
+- **`force-cache`** (الافتراضي) - يبحث Next.js عن طلب مطابق في ذاكرة التخزين المؤقت للبيانات.
+  - إذا كان هناك تطابق وكان حديثًا، سيتم إرجاعه من ذاكرة التخزين المؤقت.
+  - إذا لم يكن هناك تطابق أو تطابق قديم، سيقوم Next.js بجلب المورد من الخادم البعيد وتحديث ذاكرة التخزين المؤقت بالمورد الذي تم تنزيله.
+- **`no-store`** - يقوم Next.js بجلب المورد من الخادم البعيد في كل طلب دون البحث في ذاكرة التخزين المؤقت، ولن يقوم بتحديث ذاكرة التخزين المؤقت بالمورد الذي تم تنزيله.
+
+> **معلومة مفيدة**:
+>
+> - إذا لم تقم بتوفير خيار `cache`، سيقوم Next.js بالافتراضي إلى `force-cache`، ما لم يتم استخدام [وظيفة ديناميكية](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) مثل `cookies()`، وفي هذه الحالة سيكون الافتراضي هو `no-store`.
+> - يعمل خيار `no-cache` بنفس طريقة `no-store` في Next.js.
+
+### `options.next.revalidate`
+
+```ts
+fetch(`https://...`, { next: { revalidate: false | 0 | number } })
+```
+
+تعيين عمر ذاكرة التخزين المؤقت للمورد (بالثواني).
+
+- **`false`** - تخزين المورد مؤقتًا إلى أجل غير مسمى. يعادل دلاليًا `revalidate: Infinity`. قد تقوم ذاكرة التخزين المؤقت HTTP بإزالة الموارد القديمة بمرور الوقت.
+- **`0`** - منع تخزين المورد مؤقتًا.
+- **`number`** - (بالثواني) تحديد أن يكون للمورد عمر تخزين مؤقت بحد أقصى `n` ثانية.
+
+> **معلومة مفيدة**:
+>
+> - إذا قام طلب `fetch()` فردي بتعيين رقم `revalidate` أقل من [الافتراضي `revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) لمسار، فسيتم تقليل فاصل إعادة التحقق بالكامل للمسار.
+> - إذا كان هناك طلبا fetch بنفس URL في نفس المسار لهما قيم `revalidate` مختلفة، سيتم استخدام القيمة الأقل.
+> - لتسهيل الأمر، ليس من الضروري تعيين خيار `cache` إذا تم تعيين `revalidate` على رقم حيث أن `0` تعني `cache: 'no-store'` والقيمة الموجبة تعني `cache: 'force-cache'`.
+> - الخيارات المتضاربة مثل `{ revalidate: 0, cache: 'force-cache' }` أو `{ revalidate: 10, cache: 'no-store' }` ستؤدي إلى حدوث خطأ.
+
+### `options.next.tags`
+
+```ts
+fetch(`https://...`, { next: { tags: ['collection'] } })
+```
+
+تعيين علامات ذاكرة التخزين المؤقت للمورد. يمكن بعد ذلك إعادة التحقق من صحة البيانات عند الطلب باستخدام [`revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/revalidateTag). الحد الأقصى لطول العلامة المخصصة هو 256 حرفًا والحد الأقصى لعدد العناصر هو 128.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات             |
+| --------- | ------------------- |
+| `v13.0.0` | تم تقديم `fetch`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-image-metadata.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-image-metadata.mdx
new file mode 100644
index 00000000..bba400af
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-image-metadata.mdx
@@ -0,0 +1,230 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:14.495Z
+title: generateImageMetadata
+description: تعلم كيفية إنشاء صور متعددة في ملف خاص واحد لواجهة برمجة التطبيقات (Metadata API).
+related:
+  title: الخطوات التالية
+  description: عرض جميع خيارات واجهة برمجة التطبيقات (Metadata API).
+  links:
+    - app/api-reference/file-conventions/metadata
+    - app/building-your-application/optimizing/metadata
+---
+
+يمكنك استخدام `generateImageMetadata` لإنشاء إصدارات مختلفة من صورة واحدة أو إرجاع صور متعددة لقطاع مسار واحد. هذا مفيد عندما تريد تجنب ترميز قيم البيانات الوصفية (metadata) بشكل ثابت، مثل الأيقونات.
+
+## المعاملات
+
+تقبل دالة `generateImageMetadata` المعاملات التالية:
+
+#### `params` (اختياري)
+
+كائن يحتوي على [معاملات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من القطاع الجذري وصولاً إلى القطاع الذي يتم استدعاء `generateImageMetadata` منه.
+
+```tsx filename="icon.tsx" switcher
+export function generateImageMetadata({
+  params,
+}: {
+  params: { slug: string }
+}) {
+  // ...
+}
+```
+
+```jsx filename="icon.js" switcher
+export function generateImageMetadata({ params }) {
+  // ...
+}
+```
+
+| المسار                          | الرابط       | `params`                  |
+| ------------------------------- | ----------- | ------------------------- |
+| `app/shop/icon.js`              | `/shop`     | `undefined`               |
+| `app/shop/[slug]/icon.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/icon.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/icon.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+## القيم المرجعة
+
+يجب أن ترجع دالة `generateImageMetadata` مصفوفة من الكائنات تحتوي على البيانات الوصفية للصورة مثل `alt` و `size`. بالإضافة إلى ذلك، يجب أن يتضمن كل عنصر قيمة `id` والتي سيتم تمريرها إلى خاصيات دالة إنشاء الصورة.
+
+| كائن البيانات الوصفية للصورة | النوع                                |
+| --------------------- | ----------------------------------- |
+| `id`                  | `string` (مطلوب)                 |
+| `alt`                 | `string`                            |
+| `size`                | `{ width: number; height: number }` |
+| `contentType`         | `string`                            |
+
+```tsx filename="icon.tsx" switcher
+import { ImageResponse } from 'next/og'
+
+export function generateImageMetadata() {
+  return [
+    {
+      contentType: 'image/png',
+      size: { width: 48, height: 48 },
+      id: 'small',
+    },
+    {
+      contentType: 'image/png',
+      size: { width: 72, height: 72 },
+      id: 'medium',
+    },
+  ]
+}
+
+export default function Icon({ id }: { id: string }) {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 88,
+          background: '#000',
+          color: '#fafafa',
+        }}
+      >
+        Icon {id}
+      </div>
+    )
+  )
+}
+```
+
+```jsx filename="icon.js" switcher
+import { ImageResponse } from 'next/og'
+
+export function generateImageMetadata() {
+  return [
+    {
+      contentType: 'image/png',
+      size: { width: 48, height: 48 },
+      id: 'small',
+    },
+    {
+      contentType: 'image/png',
+      size: { width: 72, height: 72 },
+      id: 'medium',
+    },
+  ]
+}
+
+export default function Icon({ id }) {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 88,
+          background: '#000',
+          color: '#fafafa',
+        }}
+      >
+        Icon {id}
+      </div>
+    )
+  )
+}
+```
+
+### أمثلة
+
+#### استخدام بيانات خارجية
+
+يستخدم هذا المثال كائن `params` وبيانات خارجية لإنشاء صور متعددة [Open Graph images](/docs/app/api-reference/file-conventions/metadata/opengraph-image) لقطاع مسار.
+
+```tsx filename="app/products/[id]/opengraph-image.tsx" switcher
+import { ImageResponse } from 'next/og'
+import { getCaptionForImage, getOGImages } from '@/app/utils/images'
+
+export async function generateImageMetadata({
+  params,
+}: {
+  params: { id: string }
+}) {
+  const images = await getOGImages(params.id)
+
+  return images.map((image, idx) => ({
+    id: idx,
+    size: { width: 1200, height: 600 },
+    alt: image.text,
+    contentType: 'image/png',
+  }))
+}
+
+export default async function Image({
+  params,
+  id,
+}: {
+  params: { id: string }
+  id: number
+}) {
+  const productId = params.id
+  const imageId = id
+  const text = await getCaptionForImage(productId, imageId)
+
+  return new ImageResponse(
+    (
+      <div
+        style={
+          {
+            // ...
+          }
+        }
+      >
+        {text}
+      </div>
+    )
+  )
+}
+```
+
+```jsx filename="app/products/[id]/opengraph-image.js" switcher
+import { ImageResponse } from 'next/og'
+import { getCaptionForImage, getOGImages } from '@/app/utils/images'
+
+export async function generateImageMetadata({ params }) {
+  const images = await getOGImages(params.id)
+
+  return images.map((image, idx) => ({
+    id: idx,
+    size: { width: 1200, height: 600 },
+    alt: image.text,
+    contentType: 'image/png',
+  }))
+}
+
+export default async function Image({ params, id }) {
+  const productId = params.id
+  const imageId = id
+  const text = await getCaptionForImage(productId, imageId)
+
+  return new ImageResponse(
+    (
+      <div
+        style={
+          {
+            // ...
+          }
+        }
+      >
+        {text}
+      </div>
+    )
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                             |
+| --------- | ----------------------------------- |
+| `v13.3.0` | تم تقديم `generateImageMetadata`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-metadata.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-metadata.mdx
new file mode 100644
index 00000000..1ac88015
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-metadata.mdx
@@ -0,0 +1,1199 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:38:47.545Z
+title: كائن البيانات الوصفية وخيارات generateMetadata
+nav_title: generateMetadata
+description: تعلم كيفية إضافة البيانات الوصفية (Metadata) إلى تطبيق Next.js لتحسين تحسين محركات البحث (SEO) وإمكانية مشاركة الويب.
+related:
+  title: الخطوات التالية
+  description: عرض جميع خيارات واجهة برمجة تطبيقات البيانات الوصفية.
+  links:
+    - app/api-reference/file-conventions/metadata
+    - app/api-reference/functions/generate-viewport
+    - app/building-your-application/optimizing/metadata
+---
+
+تغطي هذه الصفحة جميع خيارات **البيانات الوصفية المعتمدة على التكوين** باستخدام `generateMetadata` وكائن البيانات الوصفية الثابت.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import { Metadata } from 'next'
+
+// إما بيانات وصفية ثابتة
+export const metadata: Metadata = {
+  title: '...',
+}
+
+// أو بيانات وصفية ديناميكية
+export async function generateMetadata({ params }) {
+  return {
+    title: '...',
+  }
+}
+```
+
+```jsx filename="layout.js | page.js" switcher
+// إما بيانات وصفية ثابتة
+export const metadata = {
+  title: '...',
+}
+
+// أو بيانات وصفية ديناميكية
+export async function generateMetadata({ params }) {
+  return {
+    title: '...',
+  }
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - تصدير كائن `metadata` ودالة `generateMetadata** مدعوم فقط في مكونات الخادم (Server Components)**.
+> - لا يمكنك تصدير كائن `metadata` ودالة `generateMetadata` من نفس مقطع المسار.
+
+## كائن `metadata`
+
+لتحديد بيانات وصفية ثابتة، قم بتصدير كائن [`Metadata`](#metadata-fields) من ملف `layout.js` أو `page.js`.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+```jsx filename="layout.js | page.js" switcher
+export const metadata = {
+  title: '...',
+  description: '...',
+}
+
+export default function Page() {}
+```
+
+راجع [حقول البيانات الوصفية](#metadata-fields) للحصول على قائمة كاملة بالخيارات المدعومة.
+
+## دالة `generateMetadata`
+
+يمكن تعيين البيانات الوصفية الديناميكية التي تعتمد على **معلومات ديناميكية**، مثل معلمات المسار الحالية، أو البيانات الخارجية، أو `metadata` في المقاطع الأب، عن طريق تصدير دالة `generateMetadata` التي تُرجع كائن [`Metadata`](#metadata-fields).
+
+```tsx filename="app/products/[id]/page.tsx" switcher
+import { Metadata, ResolvingMetadata } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية للأب وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }: Props) {}
+```
+
+```jsx filename="app/products/[id]/page.js" switcher
+export async function generateMetadata({ params, searchParams }, parent) {
+  // قراءة معلمات المسار
+  const id = params.id
+
+  // جلب البيانات
+  const product = await fetch(`https://.../${id}`).then((res) => res.json())
+
+  // الوصول الاختياري إلى البيانات الوصفية للأب وتوسيعها (بدلاً من استبدالها)
+  const previousImages = (await parent).openGraph?.images || []
+
+  return {
+    title: product.title,
+    openGraph: {
+      images: ['/some-specific-page-image.jpg', ...previousImages],
+    },
+  }
+}
+
+export default function Page({ params, searchParams }) {}
+```
+
+### المعلمات
+
+تقبل دالة `generateMetadata` المعلمات التالية:
+
+- `props` - كائن يحتوي على معلمات المسار الحالي:
+
+  - `params` - كائن يحتوي على كائن [معلمات المسار الديناميكي](/docs/app/building-your-application/routing/dynamic-routes) من المقطع الجذري وصولاً إلى المقطع الذي يتم استدعاء `generateMetadata` منه. أمثلة:
+
+    | المسار                           | الرابط         | `params`                  |
+    | ------------------------------- | ----------- | ------------------------- |
+    | `app/shop/[slug]/page.js`       | `/shop/1`   | `{ slug: '1' }`           |
+    | `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+    | `app/shop/[...slug]/page.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+  - `searchParams` - كائن يحتوي على [معلمات البحث](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) الحالية للرابط. أمثلة:
+
+    | الرابط             | `searchParams`       |
+    | --------------- | -------------------- |
+    | `/shop?a=1`     | `{ a: '1' }`         |
+    | `/shop?a=1&b=2` | `{ a: '1', b: '2' }` |
+    | `/shop?a=1&a=2` | `{ a: ['1', '2'] }`  |
+
+- `parent` - وعد بحل البيانات الوصفية من مقاطع المسار الأب.
+
+### القيم المُرجعة
+
+يجب أن تُرجع `generateMetadata` كائن [`Metadata`](#metadata-fields) يحتوي على حقل بيانات وصفية واحد أو أكثر.
+
+> **معلومة مفيدة**:
+>
+> - إذا كانت البيانات الوصفية لا تعتمد على معلومات وقت التشغيل، فيجب تعريفها باستخدام كائن [`metadata`](#the-metadata-object) الثابت بدلاً من `generateMetadata`.
+> - طلبات `fetch` يتم [تخزينها مؤقتًا](/docs/app/building-your-application/caching#request-memoization) تلقائيًا لنفس البيانات عبر `generateMetadata`، و`generateStaticParams`، والتخطيطات، والصفحات، ومكونات الخادم. يمكن استخدام [`cache` في React](/docs/app/building-your-application/caching#request-memoization) إذا لم يكن `fetch` متاحًا.
+> - `searchParams` متاحة فقط في مقاطع `page.js`.
+> - يمكن أيضًا استخدام طرق Next.js [`redirect()`](/docs/app/api-reference/functions/redirect) و[`notFound()`](/docs/app/api-reference/functions/not-found) داخل `generateMetadata`.
+
+## حقول البيانات الوصفية
+
+### `title`
+
+يُستخدم سمة `title` لتعيين عنوان المستند. يمكن تعريفه كـ [سلسلة نصية](#string) بسيطة أو [كائن قالب](#template-object) اختياري.
+
+#### سلسلة نصية
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  title: 'Next.js',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<title>Next.js</title>
+```
+
+#### كائن القالب
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    template: '...',
+    default: '...',
+    absolute: '...',
+  },
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: {
+    default: '...',
+    template: '...',
+    absolute: '...',
+  },
+}
+```
+
+##### الافتراضي
+
+يمكن استخدام `title.default` لتوفير **عنوان احتياطي** لمقاطع المسار الفرعية التي لا تحدد `title`.
+
+```tsx filename="app/layout.tsx"
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Acme',
+  },
+}
+```
+
+```tsx filename="app/about/page.tsx"
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {}
+
+// الناتج: <title>Acme</title>
+```
+
+##### القالب
+
+يمكن استخدام `title.template` لإضافة بادئة أو لاحقة إلى `titles` المعرفة في مقاطع المسار **الفرعية**.
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme',
+    default: 'Acme', // مطلوب افتراضي عند إنشاء قالب
+  },
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: {
+    template: '%s | Acme',
+    default: 'Acme', // مطلوب افتراضي عند إنشاء قالب
+  },
+}
+```
+
+```tsx filename="app/about/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'About',
+}
+
+// الناتج: <title>About | Acme</title>
+```
+
+```jsx filename="app/about/page.js" switcher
+export const metadata = {
+  title: 'About',
+}
+
+// الناتج: <title>About | Acme</title>
+```
+
+> **معلومة مفيدة**:
+>
+> - `title.template` يطبق على مقاطع المسار **الفرعية** و**ليس** المقطع الذي تم تعريفه فيه. هذا يعني:
+>
+>   - `title.default` **مطلوب** عند إضافة `title.template`.
+>   - `title.template` المعرفة في `layout.js` لن تطبق على `title` المعرفة في `page.js` لنفس مقطع المسار.
+>   - `title.template` المعرفة في `page.js` ليس لها تأثير لأن الصفحة دائمًا هي المقطع النهائي (ليس لديها أي مقاطع مسار فرعية).
+>
+> - `title.template` **ليس له تأثير** إذا لم يحدد المسار `title` أو `title.default`.
+
+##### المطلق
+
+يمكن استخدام `title.absolute` لتوفير عنوان **يتجاهل** `title.template` المعرفة في المقاطع الأب.
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme',
+  },
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: {
+    template: '%s | Acme',
+  },
+}
+```
+
+```tsx filename="app/about/page.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    absolute: 'About',
+  },
+}
+
+// الناتج: <title>About</title>
+```
+
+```jsx filename="app/about/page.js" switcher
+export const metadata = {
+  title: {
+    absolute: 'About',
+  },
+}
+
+// الناتج: <title>About</title>
+```
+
+> **معلومة مفيدة**:
+>
+> - `layout.js`
+>
+>   - `title` (سلسلة نصية) و `title.default` يحددان العنوان الافتراضي للمقاطع الفرعية (التي لا تحدد `title` الخاصة بها). ستعزز `title.template` من أقرب مقطع أب إذا كان موجودًا.
+>   - `title.absolute` يحدد العنوان الافتراضي للمقاطع الفرعية. يتجاهل `title.template` من المقاطع الأب.
+>   - `title.template` يحدد قالب عنوان جديد للمقاطع الفرعية.
+>
+> - `page.js`
+>   - إذا لم تحدد الصفحة عنوانها الخاص، سيتم استخدام العنوان المحلول لأقرب أب.
+>   - `title` (سلسلة نصية) يحدد عنوان المسار. سيعزز `title.template` من أقرب مقطع أب إذا كان موجودًا.
+>   - `title.absolute` يحدد عنوان المسار. يتجاهل `title.template` من المقاطع الأب.
+>   - `title.template` ليس له تأثير في `page.js` لأن الصفحة دائمًا هي المقطع النهائي للمسار.
+
+### `description`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  description: 'The React Framework for the Web',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="description" content="The React Framework for the Web" />
+```
+
+### الحقول الأساسية
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  generator: 'Next.js',
+  applicationName: 'Next.js',
+  referrer: 'origin-when-cross-origin',
+  keywords: ['Next.js', 'React', 'JavaScript'],
+  authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
+  creator: 'Jiachi Liu',
+  publisher: 'Sebastian Markbåge',
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="application-name" content="Next.js" />
+<meta name="author" content="Seb" />
+<link rel="author" href="https://nextjs.org" />
+<meta name="author" content="Josh" />
+<meta name="generator" content="Next.js" />
+<meta name="keywords" content="Next.js,React,JavaScript" />
+<meta name="referrer" content="origin-when-cross-origin" />
+<meta name="color-scheme" content="dark" />
+<meta name="creator" content="Jiachi Liu" />
+<meta name="publisher" content="Sebastian Markbåge" />
+<meta name="format-detection" content="telephone=no, address=no, email=no" />
+```
+
+### `metadataBase`
+
+`metadataBase` هو خيار ملائم لتعيين بادئة عنوان URL أساسي لحقول `metadata` التي تتطلب عنوان URL مكتمل.
+
+- يسمح `metadataBase` لحقول `metadata` المعتمدة على URL المعرفة في **مقطع المسار الحالي وما تحته** باستخدام **مسار نسبي** بدلاً من عنوان URL المطلق المطلوب.
+- سيتم دمج المسار النسبي للحقل مع `metadataBase` لتكوين عنوان URL مكتمل.
+- إذا لم يتم تكوينه، يتم **تعبئة `metadataBase` تلقائيًا** بـ [قيمة افتراضية](#default-value).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  metadataBase: new URL('https://acme.com'),
+  alternates: {
+    canonical: '/',
+    languages: {
+      'en-US': '/en-US',
+      'de-DE': '/de-DE',
+    },
+  },
+  openGraph: {
+    images: '/og-image.png',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="canonical" href="https://acme.com" />
+<link rel="alternate" hreflang="en-US" href="https://acme.com/en-US" />
+<link rel="alternate" hreflang="de-DE" href="https://acme.com/de-DE" />
+<meta property="og:image" content="https://acme.com/og-image.png" />
+```
+
+> **معلومة مفيدة**:
+>
+> - يتم تعيين `metadataBase` عادةً في `app/layout.js` الجذر لتطبيقه على حقول `metadata` المعتمدة على URL عبر جميع المسارات.
+> - يمكن تكوين جميع حقول `metadata` المعتمدة على URL التي تتطلب عناوين URL مطلقة باستخدام خيار `metadataBase`.
+> - يمكن أن يحتوي `metadataBase` على نطاق فرعي مثل `https://app.acme.com` أو مسار أساسي مثل `https://acme.com/start/from/here`
+> - إذا قدم حقل `metadata` عنوان URL مطلقًا، سيتم تجاهل `metadataBase`.
+> - استخدام مسار نسبي في حقل `metadata` يعتمد على URL دون تكوين `metadataBase` سيؤدي إلى خطأ في البناء.
+> - سيقوم Next.js بتطبيع الشرطات المكررة بين `metadataBase` (مثل `https://acme.com/`) وحقل نسبي (مثل `/path`) إلى شرطة واحدة (مثل `https://acme.com/path`)
+
+#### القيمة الافتراضية
+
+إذا لم يتم تكوينه، فإن `metadataBase` له **قيمة افتراضية**
+
+- عند اكتشاف [`VERCEL_URL`](https://vercel.com/docs/concepts/projects/environment-variables/system-environment-variables#:~:text=.-,VERCEL_URL,-The%20domain%20name): `https://${process.env.VERCEL_URL` وإلا فإنه يعود إلى `http://localhost:${process.env.PORT || 3000}`.
+- عند تجاوز الافتراضي، نوصي باستخدام متغيرات البيئة لحساب عنوان URL. هذا يسمح بتكوين عنوان URL لبيئات التطوير المحلية، والاختبار، والإنتاج.
+
+#### تكوين URL
+
+يفضل تكوين URL نية المطور على دلالات اجتياز الدليل الافتراضية.
+
+- يتم تطبيع الشرطات في نهاية `metadataBase` وحقول `metadata`.
+- يتم التعامل مع المسار "المطلق" في حقل `metadata` (الذي عادةً ما يستبدل مسار URL بالكامل) على أنه مسار "نسبي" (يبدأ من نهاية `metadataBase`).
+
+على سبيل المثال، بالنظر إلى `metadataBase` التالي:
+
+```tsx filename="app/layout.tsx" switcher
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://acme.com'),
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  metadataBase: new URL('https://acme.com'),
+}
+```
+
+سيتم حل أي حقول `metadata` التي ترث `metadataBase` أعلاه وتعيين قيمتها الخاصة على النحو التالي:
+
+| حقل `metadata`                 | عنوان URL المحلول                     |
+| -------------------------------- | -------------------------------- |
+| `/`                              | `https://acme.com`               |
+| `./`                             | `https://acme.com`               |
+| `payments`                       | `https://acme.com/payments`      |
+| `/payments`                      | `https://acme.com/payments`      |
+| `./payments`                     | `https://acme.com/payments`      |
+| `../payments`                    | `https://acme.com/payments`      |
+| `https://beta.acme.com/payments` | `https://beta.acme.com/payments` |
+
+### `openGraph`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  openGraph: {
+    title: 'Next.js',
+    description: 'إطار عمل React للويب',
+    url: 'https://nextjs.org',
+    siteName: 'Next.js',
+    images: [
+      {
+        url: 'https://nextjs.org/og.png', // يجب أن يكون عنوان URL مطلقًا
+        width: 800,
+        height: 600,
+      },
+      {
+        url: 'https://nextjs.org/og-alt.png', // يجب أن يكون عنوان URL مطلقًا
+        width: 1800,
+        height: 1600,
+        alt: 'النص البديل المخصص الخاص بي',
+      },
+    ],
+    videos: [
+      {
+        url: 'https://nextjs.org/video.mp4', // يجب أن يكون عنوان URL مطلقًا
+        width: 800,
+        height: 600,
+      },
+    ],
+    audio: [
+      {
+        url: 'https://nextjs.org/audio.mp3', // يجب أن يكون عنوان URL مطلقًا
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="og:title" content="Next.js" />
+<meta property="og:description" content="إطار عمل React للويب" />
+<meta property="og:url" content="https://nextjs.org/" />
+<meta property="og:site_name" content="Next.js" />
+<meta property="og:locale" content="en_US" />
+<meta property="og:image:url" content="https://nextjs.org/og.png" />
+<meta property="og:image:width" content="800" />
+<meta property="og:image:height" content="600" />
+<meta property="og:image:url" content="https://nextjs.org/og-alt.png" />
+<meta property="og:image:width" content="1800" />
+<meta property="og:image:height" content="1600" />
+<meta property="og:image:alt" content="النص البديل المخصص الخاص بي" />
+<meta property="og:video" content="https://nextjs.org/video.mp4" />
+<meta property="og:video:width" content="800" />
+<meta property="og:video:height" content="600" />
+<meta property="og:audio" content="https://nextjs.org/audio.mp3" />
+<meta property="og:type" content="website" />
+```
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  openGraph: {
+    title: 'Next.js',
+    description: 'إطار عمل React للويب',
+    type: 'article',
+    publishedTime: '2023-01-01T00:00:00.000Z',
+    authors: ['Seb', 'Josh'],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="og:title" content="Next.js" />
+<meta property="og:description" content="إطار عمل React للويب" />
+<meta property="og:type" content="article" />
+<meta property="article:published_time" content="2023-01-01T00:00:00.000Z" />
+<meta property="article:author" content="Seb" />
+<meta property="article:author" content="Josh" />
+```
+
+> **معلومة مفيدة**:
+>
+> - قد يكون استخدام [واجهة برمجة تطبيقات Metadata المعتمدة على الملفات](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) لصور Open Graph أكثر ملاءمة. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيقات المعتمدة على الملفات بإنشاء بيانات وصفية صحيحة تلقائيًا لك.
+
+### `robots`
+
+```tsx
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  robots: {
+    index: false,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: false,
+      noimageindex: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="robots" content="noindex, follow, nocache" />
+<meta
+  name="googlebot"
+  content="index, nofollow, noimageindex, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
+/>
+```
+
+### `icons`
+
+> **معلومة مفيدة**: نوصي باستخدام [واجهة برمجة تطبيقات Metadata المعتمدة على الملفات](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) للأيقونات حيثما أمكن ذلك. بدلاً من الحاجة إلى مزامنة تصدير التكوين مع الملفات الفعلية، ستقوم واجهة برمجة التطبيقات المعتمدة على الملفات بإنشاء بيانات وصفية صحيحة تلقائيًا لك.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  icons: {
+    icon: '/icon.png',
+    shortcut: '/shortcut-icon.png',
+    apple: '/apple-icon.png',
+    other: {
+      rel: 'apple-touch-icon-precomposed',
+      url: '/apple-touch-icon-precomposed.png',
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="shortcut icon" href="/shortcut-icon.png" />
+<link rel="icon" href="/icon.png" />
+<link rel="apple-touch-icon" href="/apple-icon.png" />
+<link
+  rel="apple-touch-icon-precomposed"
+  href="/apple-touch-icon-precomposed.png"
+/>
+```
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  icons: {
+    icon: [
+      { url: '/icon.png' },
+      new URL('/icon.png', 'https://example.com'),
+      { url: '/icon-dark.png', media: '(prefers-color-scheme: dark)' },
+    ],
+    shortcut: ['/shortcut-icon.png'],
+    apple: [
+      { url: '/apple-icon.png' },
+      { url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
+    ],
+    other: [
+      {
+        rel: 'apple-touch-icon-precomposed',
+        url: '/apple-touch-icon-precomposed.png',
+      },
+    ],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="shortcut icon" href="/shortcut-icon.png" />
+<link rel="icon" href="/icon.png" />
+<link rel="icon" href="https://example.com/icon.png" />
+<link rel="icon" href="/icon-dark.png" media="(prefers-color-scheme: dark)" />
+<link rel="apple-touch-icon" href="/apple-icon.png" />
+<link
+  rel="apple-touch-icon-precomposed"
+  href="/apple-touch-icon-precomposed.png"
+/>
+<link
+  rel="apple-touch-icon"
+  href="/apple-icon-x3.png"
+  sizes="180x180"
+  type="image/png"
+/>
+```
+
+> **معلومة مفيدة**: لم تعد علامات meta من نوع `msapplication-*` مدعومة في إصدارات Chromium من Microsoft Edge، وبالتالي لم تعد هناك حاجة إليها.
+
+### `themeColor`
+
+> **مهمل**: خيار `themeColor` في `metadata` مهمل اعتبارًا من Next.js 14. يرجى استخدام [تكوين `viewport`](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
+
+### `manifest`
+
+بيان تطبيق ويب، كما هو محدد في [مواصفات بيان تطبيق الويب](https://developer.mozilla.org/docs/Web/Manifest).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  manifest: 'https://nextjs.org/manifest.json',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="manifest" href="https://nextjs.org/manifest.json" />
+```
+
+### `twitter`
+
+تستخدم مواصفات Twitter (بشكل مفاجئ) لأكثر من مجرد X (المعروف سابقًا باسم Twitter).
+
+تعرف على المزيد حول [مرجع ترميز بطاقة Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Next.js',
+    description: 'إطار عمل React للويب',
+    siteId: '1467726470533754880',
+    creator: '@nextjs',
+    creatorId: '1467726470533754880',
+    images: ['https://nextjs.org/og.png'], // يجب أن يكون عنوان URL مطلقًا
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site:id" content="1467726470533754880" />
+<meta name="twitter:creator" content="@nextjs" />
+<meta name="twitter:creator:id" content="1467726470533754880" />
+<meta name="twitter:title" content="Next.js" />
+<meta name="twitter:description" content="إطار عمل React للويب" />
+<meta name="twitter:image" content="https://nextjs.org/og.png" />
+```
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  twitter: {
+    card: 'app',
+    title: 'Next.js',
+    description: 'إطار عمل React للويب',
+    siteId: '1467726470533754880',
+    creator: '@nextjs',
+    creatorId: '1467726470533754880',
+    images: {
+      url: 'https://nextjs.org/og.png',
+      alt: 'شعار Next.js',
+    },
+    app: {
+      name: 'twitter_app',
+      id: {
+        iphone: 'twitter_app://iphone',
+        ipad: 'twitter_app://ipad',
+        googleplay: 'twitter_app://googleplay',
+      },
+      url: {
+        iphone: 'https://iphone_url',
+        ipad: 'https://ipad_url',
+      },
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="twitter:site:id" content="1467726470533754880" />
+<meta name="twitter:creator" content="@nextjs" />
+<meta name="twitter:creator:id" content="1467726470533754880" />
+<meta name="twitter:title" content="Next.js" />
+<meta name="twitter:description" content="إطار عمل React للويب" />
+<meta name="twitter:card" content="app" />
+<meta name="twitter:image" content="https://nextjs.org/og.png" />
+<meta name="twitter:image:alt" content="شعار Next.js" />
+<meta name="twitter:app:name:iphone" content="twitter_app" />
+<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
+<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
+<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
+<meta name="twitter:app:url:iphone" content="https://iphone_url" />
+<meta name="twitter:app:url:ipad" content="https://ipad_url" />
+<meta name="twitter:app:name:ipad" content="twitter_app" />
+<meta name="twitter:app:name:googleplay" content="twitter_app" />
+```
+
+### `viewport`
+
+> **مهمل**: خيار `viewport` في `metadata` مهمل اعتبارًا من Next.js 14. يرجى استخدام [تكوين `viewport`](/docs/app/api-reference/functions/generate-viewport) بدلاً من ذلك.
+
+### `verification`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  verification: {
+    google: 'google',
+    yandex: 'yandex',
+    yahoo: 'yahoo',
+    other: {
+      me: ['my-email', 'my-link'],
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="google-site-verification" content="google" />
+<meta name="y_key" content="yahoo" />
+<meta name="yandex-verification" content="yandex" />
+<meta name="me" content="my-email" />
+<meta name="me" content="my-link" />
+```
+
+### `appleWebApp`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  itunes: {
+    appId: 'myAppStoreID',
+    appArgument: 'myAppArgument',
+  },
+  appleWebApp: {
+    title: 'تطبيق ويب Apple',
+    statusBarStyle: 'black-translucent',
+    startupImage: [
+      '/assets/startup/apple-touch-startup-image-768x1004.png',
+      {
+        url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
+        media: '(device-width: 768px) and (device-height: 1024px)',
+      },
+    ],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta
+  name="apple-itunes-app"
+  content="app-id=myAppStoreID, app-argument=myAppArgument"
+/>
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-title" content="تطبيق ويب Apple" />
+<link
+  href="/assets/startup/apple-touch-startup-image-768x1004.png"
+  rel="apple-touch-startup-image"
+/>
+<link
+  href="/assets/startup/apple-touch-startup-image-1536x2008.png"
+  media="(device-width: 768px) and (device-height: 1024px)"
+  rel="apple-touch-startup-image"
+/>
+<meta
+  name="apple-mobile-web-app-status-bar-style"
+  content="black-translucent"
+/>
+```
+
+### `alternates`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  alternates: {
+    canonical: 'https://nextjs.org',
+    languages: {
+      'en-US': 'https://nextjs.org/en-US',
+      'de-DE': 'https://nextjs.org/de-DE',
+    },
+    media: {
+      'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
+    },
+    types: {
+      'application/rss+xml': 'https://nextjs.org/rss',
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="canonical" href="https://nextjs.org" />
+<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
+<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
+<link
+  rel="alternate"
+  media="only screen and (max-width: 600px)"
+  href="https://nextjs.org/mobile"
+/>
+<link
+  rel="alternate"
+  type="application/rss+xml"
+  href="https://nextjs.org/rss"
+/>
+```
+
+### `appLinks`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  appLinks: {
+    ios: {
+      url: 'https://nextjs.org/ios',
+      app_store_id: 'app_store_id',
+    },
+    android: {
+      package: 'com.example.android/package',
+      app_name: 'app_name_android',
+    },
+    web: {
+      url: 'https://nextjs.org/web',
+      should_fallback: true,
+    },
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="al:ios:url" content="https://nextjs.org/ios" />
+<meta property="al:ios:app_store_id" content="app_store_id" />
+<meta property="al:android:package" content="com.example.android/package" />
+<meta property="al:android:app_name" content="app_name_android" />
+<meta property="al:web:url" content="https://nextjs.org/web" />
+<meta property="al:web:should_fallback" content="true" />
+```
+
+### `archives`
+
+يصف مجموعة من السجلات أو المستندات أو المواد الأخرى ذات الأهمية التاريخية ([المصدر](https://www.w3.org/TR/2011/WD-html5-20110113/links.html#rel-archives)).
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  archives: ['https://nextjs.org/13'],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="archives" href="https://nextjs.org/13" />
+```
+
+### `assets`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  assets: ['https://nextjs.org/assets'],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="assets" href="https://nextjs.org/assets" />
+```
+
+### `bookmarks`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  bookmarks: ['https://nextjs.org/13'],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="bookmarks" href="https://nextjs.org/13" />
+```
+
+### `category`
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  category: 'technology',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="category" content="technology" />
+```
+
+### `facebook`
+
+يمكنك توصيل تطبيق Facebook أو حساب Facebook بصفحة الويب الخاصة بك لبعض ملحقات Facebook الاجتماعية [توثيق Facebook](https://developers.facebook.com/docs/plugins/comments/#moderation-setup-instructions)
+
+> **معلومة مفيدة**: يمكنك تحديد إما appId أو admins، ولكن ليس كلاهما.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  facebook: {
+    appId: '12345678',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="fb:app_id" content="12345678" />
+```
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  facebook: {
+    admins: '12345678',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="fb:admins" content="12345678" />
+```
+
+إذا كنت تريد إنشاء علامات meta متعددة من نوع fb:admins، يمكنك استخدام قيمة مصفوفة.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  facebook: {
+    admins: ['12345678', '87654321'],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta property="fb:admins" content="12345678" />
+<meta property="fb:admins" content="87654321" />
+```
+
+### `other`
+
+يجب أن تغطي جميع خيارات البيانات الوصفية باستخدام الدعم المدمج. ومع ذلك، قد تكون هناك علامات بيانات وصفية مخصصة خاصة بموقعك، أو علامات بيانات وصفية جديدة تم إصدارها للتو. يمكنك استخدام خيار `other` لعرض أي علامة بيانات وصفية مخصصة.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  other: {
+    custom: 'meta',
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="custom" content="meta" />
+```
+
+إذا كنت تريد إنشاء علامات meta متعددة بنفس المفتاح، يمكنك استخدام قيمة مصفوفة.
+
+```jsx filename="layout.js | page.js"
+export const metadata = {
+  other: {
+    custom: ['meta1', 'meta2'],
+  },
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="custom" content="meta1" /> <meta name="custom" content="meta2" />
+```
+
+## البيانات الوصفية غير المدعومة
+
+الأنواع التالية من البيانات الوصفية لا تدعم حاليًا بشكل مدمج. ومع ذلك، لا يزال يمكن عرضها في التنسيق (layout) أو الصفحة نفسها.
+
+| البيانات الوصفية               | التوصية                                                                                                                                                                                                                                     |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<meta http-equiv="...">`     | استخدم رؤوس HTTP المناسبة عبر [`redirect()`](/docs/app/api-reference/functions/redirect)، [البرمجية الوسيطة (Middleware)](/docs/app/building-your-application/routing/middleware#nextresponse)، [رؤوس الأمان](/docs/app/api-reference/next-config-js/headers) |
+| `<base>`                      | عرض الوسم في التنسيق أو الصفحة نفسها.                                                                                                                                                                                                       |
+| `<noscript>`                  | عرض الوسم في التنسيق أو الصفحة نفسها.                                                                                                                                                                                                       |
+| `<style>`                     | تعرف على المزيد حول [التنسيق في Next.js](/docs/app/building-your-application/styling/css-modules).                                                                                                                                                    |
+| `<script>`                    | تعرف على المزيد حول [استخدام النصوص البرمجية (scripts)](/docs/app/building-your-application/optimizing/scripts).                                                                                                                                                          |
+| `<link rel="stylesheet" />`   | استيراد (import) صفحات الأنماط مباشرة في التنسيق أو الصفحة نفسها.                                                                                                                                                                                        |
+| `<link rel="preload />`       | استخدم [طريقة ReactDOM المسبقة التحميل (preload)](#link-relpreload)                                                                                                                                                                                                    |
+| `<link rel="preconnect" />`   | استخدم [طريقة ReactDOM المسبقة الاتصال (preconnect)](#link-relpreconnect)                                                                                                                                                                                              |
+| `<link rel="dns-prefetch" />` | استخدم [طريقة ReactDOM المسبقة البحث عن DNS (prefetchDNS)](#link-reldns-prefetch)                                                                                                                                                                                           |
+
+### تلميحات الموارد
+
+يحتوي عنصر `<link>` على عدد من الكلمات الرئيسية `rel` التي يمكن استخدامها للإشارة إلى المتصفح أن موردًا خارجيًا قد يكون مطلوبًا. يستخدم المتصفح هذه المعلومات لتطبيق تحسينات التحميل المسبق اعتمادًا على الكلمة الرئيسية.
+
+بينما لا يدعم واجهة برمجة تطبيقات البيانات الوصفية (Metadata API) هذه التلميحات مباشرة، يمكنك استخدام [طرق `ReactDOM` الجديدة](https://github.com/facebook/react/pull/26237) لإدراجها بأمان في `<head>` المستند.
+
+```tsx filename="app/preload-resources.tsx" switcher
+'use client'
+
+import ReactDOM from 'react-dom'
+
+export function PreloadResources() {
+  ReactDOM.preload('...', { as: '...' })
+  ReactDOM.preconnect('...', { crossOrigin: '...' })
+  ReactDOM.prefetchDNS('...')
+
+  return null
+}
+```
+
+```jsx filename="app/preload-resources.js" switcher
+'use client'
+
+import ReactDOM from 'react-dom'
+
+export function PreloadResources() {
+  ReactDOM.preload('...', { as: '...' })
+  ReactDOM.preconnect('...', { crossOrigin: '...' })
+  ReactDOM.prefetchDNS('...')
+
+  return null
+}
+```
+
+##### `<link rel="preload">`
+
+ابدأ تحميل مورد مبكرًا في دورة عرض الصفحة (في المتصفح). [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload).
+
+```tsx
+ReactDOM.preload(href: string, options: { as: string })
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="preload" href="..." as="..." />
+```
+
+##### `<link rel="preconnect">`
+
+ابدأ اتصالًا مسبقًا بأصل معين. [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect).
+
+```tsx
+ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="preconnect" href="..." crossorigin />
+```
+
+##### `<link rel="dns-prefetch">`
+
+حاول حل اسم نطاق قبل طلب الموارد. [وثائق MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/dns-prefetch).
+
+```tsx
+ReactDOM.prefetchDNS(href: string)
+```
+
+```html filename="<head> output" hideLineNumbers
+<link rel="dns-prefetch" href="..." />
+```
+
+> **معلومة مفيدة**:
+>
+> - هذه الطرق مدعومة حاليًا فقط في مكونات العميل (Client Components)، والتي لا تزال تُعرض من جانب الخادم (Server Side Rendered) عند التحميل الأولي للصفحة.
+> - الميزات المدمجة في Next.js مثل `next/font` و`next/image` و`next/script` تتعامل تلقائيًا مع تلميحات الموارد ذات الصلة.
+> - React 18.3 لا يتضمن بعد تعريفات الأنواع لـ `ReactDOM.preload` و`ReactDOM.preconnect` و`ReactDOM.preconnectDNS`. يمكنك استخدام `// @ts-ignore` كحل مؤقت لتجنب أخطاء النوع.
+
+## الأنواع
+
+يمكنك إضافة أمان النوع إلى بياناتك الوصفية باستخدام نوع `Metadata`. إذا كنت تستخدم [الملحق المدمج TypeScript](/docs/app/building-your-application/configuring/typescript) في بيئة التطوير المتكاملة (IDE)، فلن تحتاج إلى إضافة النوع يدويًا، ولكن لا يزال بإمكانك إضافته صراحة إذا أردت.
+
+### كائن `metadata`
+
+```tsx
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Next.js',
+}
+```
+
+### دالة `generateMetadata`
+
+#### دالة عادية
+
+```tsx
+import type { Metadata } from 'next'
+
+export function generateMetadata(): Metadata {
+  return {
+    title: 'Next.js',
+  }
+}
+```
+
+#### دالة غير متزامنة (async)
+
+```tsx
+import type { Metadata } from 'next'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: 'Next.js',
+  }
+}
+```
+
+#### مع خاصية القطعة (segment props)
+
+```tsx
+import type { Metadata } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export function generateMetadata({ params, searchParams }: Props): Metadata {
+  return {
+    title: 'Next.js',
+  }
+}
+
+export default function Page({ params, searchParams }: Props) {}
+```
+
+#### مع البيانات الوصفية الأصلية (parent metadata)
+
+```tsx
+import type { Metadata, ResolvingMetadata } from 'next'
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  return {
+    title: 'Next.js',
+  }
+}
+```
+
+#### مشاريع جافا سكريبت
+
+لمشاريع جافا سكريبت، يمكنك استخدام JSDoc لإضافة أمان النوع.
+
+```js
+/** @type {import("next").Metadata} */
+export const metadata = {
+  title: 'Next.js',
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                 |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.2.0` | `viewport` و`themeColor` و`colorScheme` أصبحت قديمة لصالح [تكوين `viewport`](/docs/app/api-reference/functions/generate-viewport). |
+| `v13.2.0` | تم تقديم `metadata` و`generateMetadata`.                                                                                                           |
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-sitemaps.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-sitemaps.mdx
new file mode 100644
index 00000000..e368f28e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-sitemaps.mdx
@@ -0,0 +1,76 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:45.881Z
+title: generateSitemaps
+nav_title: generateSitemaps
+description: تعلم كيفية استخدام دالة generateSiteMaps لإنشاء خرائط مواقع متعددة لتطبيقك.
+related:
+  title: الخطوات التالية
+  description: تعلم كيفية إنشاء خرائط مواقع لتطبيق Next.js الخاص بك.
+  links:
+    - app/api-reference/file-conventions/metadata/sitemap
+---
+
+يمكنك استخدام دالة `generateSitemaps` لإنشاء خرائط مواقع متعددة لتطبيقك.
+
+## القيم المُرجعة
+
+ترجع دالة `generateSitemaps` مصفوفة من الكائنات تحتوي على خاصية `id`.
+
+## عناوين URL
+
+في بيئة الإنتاج، ستكون خرائط المواقع المُنشأة متاحة على المسار `/.../sitemap/[id].xml`. على سبيل المثال، `/product/sitemap/1.xml`.
+
+أما في بيئة التطوير، يمكنك عرض خريطة الموقع المُنشأة على المسار `/.../sitemap.xml/[id]`. على سبيل المثال، `/product/sitemap.xml/1`. هذا الاختلاف مؤقت وسيتبع تنسيق بيئة الإنتاج.
+
+## مثال
+
+على سبيل المثال، لتقسيم خريطة موقع باستخدام `generateSitemaps`، قم بإرجاع مصفوفة من الكائنات تحتوي على `id` الخاص بخريطة الموقع. ثم استخدم `id` لإنشاء خرائط المواقع الفريدة.
+
+```ts filename="app/product/sitemap.ts" switcher
+import { BASE_URL } from '@/app/lib/constants'
+
+export async function generateSitemaps() {
+  // جلب العدد الإجمالي للمنتجات وحساب عدد خرائط المواقع المطلوبة
+  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
+}
+
+export default async function sitemap({
+  id,
+}: {
+  id: number
+}): Promise<MetadataRoute.Sitemap> {
+  // الحد الأقصى لـ Google هو 50,000 عنوان URL لكل خريطة موقع
+  const start = id * 50000
+  const end = start + 50000
+  const products = await getProducts(
+    `SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`
+  )
+  return products.map((product) => ({
+    url: `${BASE_URL}/product/${product.id}`,
+    lastModified: product.date,
+  }))
+}
+```
+
+```js filename="app/product/sitemap.js" switcher
+import { BASE_URL } from '@/app/lib/constants'
+
+export async function generateSitemaps() {
+  // جلب العدد الإجمالي للمنتجات وحساب عدد خرائط المواقع المطلوبة
+  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
+}
+
+export default async function sitemap({ id }) {
+  // الحد الأقصى لـ Google هو 50,000 عنوان URL لكل خريطة موقع
+  const start = id * 50000
+  const end = start + 50000
+  const products = await getProducts(
+    `SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`
+  )
+  return products.map((product) => ({
+    url: `${BASE_URL}/product/${id}`,
+    lastModified: product.date,
+  }))
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-static-params.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-static-params.mdx
new file mode 100644
index 00000000..20fc19c0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-static-params.mdx
@@ -0,0 +1,328 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:03.213Z
+title: generateStaticParams
+description: مرجع API لوظيفة generateStaticParams
+---
+
+يمكن استخدام دالة `generateStaticParams` بالاشتراك مع [شرائح المسار الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) ل[**إنشاء مسارات بشكل ثابت**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) أثناء وقت البناء بدلاً من الطلب عند وقت الطلب.
+
+```jsx filename="app/blog/[slug]/page.js"
+// إرجاع قائمة من `params` لملء الجزء الديناميكي [slug]
+export async function generateStaticParams() {
+  const posts = await fetch('https://.../posts').then((res) => res.json())
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+
+// سيتم إنشاء نسخ متعددة من هذه الصفحة بشكل ثابت
+// باستخدام `params` المُرجعة من `generateStaticParams`
+export default function Page({ params }) {
+  const { slug } = params
+  // ...
+}
+```
+
+> **معلومة مفيدة**
+>
+> - يمكنك استخدام خيار تكوين شريحة [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) للتحكم فيما يحدث عند زيارة جزء ديناميكي لم يتم إنشاؤه باستخدام `generateStaticParams`.
+> - أثناء `next dev`، سيتم استدعاء `generateStaticParams` عند الانتقال إلى مسار.
+> - أثناء `next build`، يعمل `generateStaticParams` قبل إنشاء التخطيطات أو الصفحات المقابلة.
+> - أثناء إعادة التحقق (ISR)، لن يتم استدعاء `generateStaticParams` مرة أخرى.
+> - `generateStaticParams` يحل محل دالة [`getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) في موجه الصفحات.
+
+## المعاملات
+
+`options.params` (اختياري)
+
+إذا استخدمت عدة شرائح ديناميكية في مسار `generateStaticParams`، فإن دالة `generateStaticParams` الفرعية تُنفذ مرة واحدة لكل مجموعة من `params` التي يولدها الأصل.
+
+كائن `params` يحتوي على `params` المملوءة من `generateStaticParams` الأصلية، والتي يمكن استخدامها [لإنشاء `params` في جزء فرعي](#multiple-dynamic-segments-in-a-route).
+
+## القيم المُرجعة
+
+يجب أن تُرجع `generateStaticParams` مصفوفة من الكائنات حيث يمثل كل كائن الشرائح الديناميكية المملوءة لمسار واحد.
+
+- كل خاصية في الكائن هي شريحة ديناميكية يجب ملؤها للمسار.
+- اسم الخاصية هو اسم الشريحة، وقيمة الخاصية هي ما يجب ملء الشريحة به.
+
+| مثال للمسار               | نوع الإرجاع لـ `generateStaticParams` |
+| ------------------------- | ------------------------------------- |
+| `/product/[id]`           | `{ id: string }[]`                    |
+| `/products/[category]/[product]` | `{ category: string, product: string }[]` |
+| `/products/[...slug]`     | `{ slug: string[] }[]`                |
+
+## شريحة ديناميكية واحدة
+
+```tsx filename="app/product/[id]/page.tsx" switcher
+export function generateStaticParams() {
+  return [{ id: '1' }, { id: '2' }, { id: '3' }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` المُرجعة من `generateStaticParams`
+// - /product/1
+// - /product/2
+// - /product/3
+export default function Page({ params }: { params: { id: string } }) {
+  const { id } = params
+  // ...
+}
+```
+
+```jsx filename="app/product/[id]/page.js" switcher
+export function generateStaticParams() {
+  return [{ id: '1' }, { id: '2' }, { id: '3' }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` المُرجعة من `generateStaticParams`
+// - /product/1
+// - /product/2
+// - /product/3
+export default function Page({ params }) {
+  const { id } = params
+  // ...
+}
+```
+
+## شرائح ديناميكية متعددة
+
+```tsx filename="app/products/[category]/[product]/page.tsx" switcher
+export function generateStaticParams() {
+  return [
+    { category: 'a', product: '1' },
+    { category: 'b', product: '2' },
+    { category: 'c', product: '3' },
+  ]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` المُرجعة من `generateStaticParams`
+// - /products/a/1
+// - /products/b/2
+// - /products/c/3
+export default function Page({
+  params,
+}: {
+  params: { category: string; product: string }
+}) {
+  const { category, product } = params
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/[product]/page.js" switcher
+export function generateStaticParams() {
+  return [
+    { category: 'a', product: '1' },
+    { category: 'b', product: '2' },
+    { category: 'c', product: '3' },
+  ]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` المُرجعة من `generateStaticParams`
+// - /products/a/1
+// - /products/b/2
+// - /products/c/3
+export default function Page({ params }) {
+  const { category, product } = params
+  // ...
+}
+```
+
+## شريحة ديناميكية شاملة
+
+```tsx filename="app/product/[...slug]/page.tsx" switcher
+export function generateStaticParams() {
+  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` المُرجعة من `generateStaticParams`
+// - /product/a/1
+// - /product/b/2
+// - /product/c/3
+export default function Page({ params }: { params: { slug: string[] } }) {
+  const { slug } = params
+  // ...
+}
+```
+
+```jsx filename="app/product/[...slug]/page.js" switcher
+export function generateStaticParams() {
+  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
+}
+
+// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
+// باستخدام `params` المُرجعة من `generateStaticParams`
+// - /product/a/1
+// - /product/b/2
+// - /product/c/3
+export default function Page({ params }) {
+  const { slug } = params
+  // ...
+}
+```
+
+## أمثلة
+
+### شرائح ديناميكية متعددة في مسار
+
+يمكنك إنشاء params للشرائح الديناميكية فوق التخطيط أو الصفحة الحالية، ولكن **ليس تحتها**. على سبيل المثال، بالنظر إلى مسار `app/products/[category]/[product]`:
+
+- `app/products/[category]/[product]/page.js` يمكنه إنشاء params **لكل** من `[category]` و `[product]`.
+- `app/products/[category]/layout.js` يمكنه **فقط** إنشاء params لـ `[category]`.
+
+هناك طريقتان لإنشاء params لمسار بشرائح ديناميكية متعددة:
+
+### إنشاء params من الأسفل إلى الأعلى
+
+إنشاء شرائح ديناميكية متعددة من جزء المسار الفرعي.
+
+```tsx filename="app/products/[category]/[product]/page.tsx" switcher
+// إنشاء شرائح لكل من [category] و [product]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+    product: product.id,
+  }))
+}
+
+export default function Page({
+  params,
+}: {
+  params: { category: string; product: string }
+}) {
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/[product]/page.js" switcher
+// إنشاء شرائح لكل من [category] و [product]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+    product: product.id,
+  }))
+}
+
+export default function Page({ params }) {
+  // ...
+}
+```
+
+### إنشاء params من الأعلى إلى الأسفل
+
+إنشاء الشرائح الأصلية أولاً واستخدام النتيجة لإنشاء الشرائح الفرعية.
+
+```tsx filename="app/products/[category]/layout.tsx" switcher
+// إنشاء شرائح لـ [category]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+  }))
+}
+
+export default function Layout({ params }: { params: { category: string } }) {
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/layout.js" switcher
+// إنشاء شرائح لـ [category]
+export async function generateStaticParams() {
+  const products = await fetch('https://.../products').then((res) => res.json())
+
+  return products.map((product) => ({
+    category: product.category.slug,
+  }))
+}
+
+export default function Layout({ params }) {
+  // ...
+}
+```
+
+يتم تنفيذ دالة `generateStaticParams` لجزء المسار الفرعي مرة واحدة لكل شريحة يولدها الأصل `generateStaticParams`.
+
+يمكن لدالة `generateStaticParams` الفرعية استخدام `params` المُرجعة من دالة `generateStaticParams` الأصلية لإنشاء شرائحها الخاصة ديناميكيًا.
+
+```tsx filename="app/products/[category]/[product]/page.tsx" switcher
+// إنشاء شرائح لـ [product] باستخدام `params` الممررة من
+// دالة `generateStaticParams` للشريحة الأصلية
+export async function generateStaticParams({
+  params: { category },
+}: {
+  params: { category: string }
+}) {
+  const products = await fetch(
+    `https://.../products?category=${category}`
+  ).then((res) => res.json())
+
+  return products.map((product) => ({
+    product: product.id,
+  }))
+}
+
+export default function Page({
+  params,
+}: {
+  params: { category: string; product: string }
+}) {
+  // ...
+}
+```
+
+```jsx filename="app/products/[category]/[product]/page.js" switcher
+// إنشاء شرائح لـ [product] باستخدام `params` الممررة من
+// دالة `generateStaticParams` للشريحة الأصلية
+export async function generateStaticParams({ params: { category } }) {
+  const products = await fetch(
+    `https://.../products?category=${category}`
+  ).then((res) => res.json())
+
+  return products.map((product) => ({
+    product: product.id,
+  }))
+}
+
+export default function Page({ params }) {
+  // ...
+}
+```
+
+> **معلومة مفيدة**: طلبات `fetch` يتم [تخزينها مؤقتًا](/docs/app/building-your-application/caching#request-memoization) تلقائيًا لنفس البيانات عبر جميع الدوال ذات البادئة `generate`، والتخطيطات، والصفحات، ومكونات الخادم. يمكن استخدام [`cache` في React](/docs/app/building-your-application/caching#request-memoization) إذا لم يكن `fetch` متاحًا.
+
+### إنشاء مجموعة فرعية فقط من params
+
+يمكنك إنشاء مجموعة فرعية من params لمسار عن طريق إرجاع مصفوفة من الكائنات تحتوي فقط على الشرائح الديناميكية التي تريد إنشاؤها. ثم باستخدام خيار تكوين شريحة [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams)، يمكنك التحكم فيما يحدث عند زيارة جزء ديناميكي لم يتم إنشاؤه باستخدام `generateStaticParams`.
+
+```jsx filename="app/blog/[slug]/page.js"
+// جميع المنشورات باستثناء أفضل 10 ستكون 404
+export const dynamicParams = false
+
+export async function generateStaticParams() {
+  const posts = await fetch('https://.../posts').then((res) => res.json())
+  const topPosts = posts.slice(0, 10)
+
+  return topPosts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                            |
+| --------- | ------------------------------------ |
+| `v13.0.0` | تم تقديم `generateStaticParams`.     |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-viewport.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-viewport.mdx
new file mode 100644
index 00000000..7d0ec0a9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/generate-viewport.mdx
@@ -0,0 +1,240 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:33:12.110Z
+title: generateViewport
+description: مرجع API لوظيفة generateViewport.
+related:
+  title: الخطوات التالية
+  description: عرض جميع خيارات Metadata API.
+  links:
+    - app/api-reference/file-conventions/metadata
+    - app/building-your-application/optimizing/metadata
+---
+
+يمكنك تخصيص منفذ العرض الأولي للصفحة باستخدام كائن `viewport` الثابت أو وظيفة `generateViewport` الديناميكية.
+
+> **معلومة مفيدة**:
+>
+> - تصديرات كائن `viewport` ووظيفة `generateViewport` **مدعومة فقط في مكونات الخادم (Server Components)**.
+> - لا يمكنك تصدير كائن `viewport` ووظيفة `generateViewport` من نفس مقطع المسار.
+> - إذا كنت تقوم بالترقية من تصديرات `metadata`، يمكنك استخدام [أداة metadata-to-viewport-export codemod](/docs/app/building-your-application/upgrading/codemods#metadata-to-viewport-export) لتحديث التغييرات.
+
+## كائن `viewport`
+
+لتحديد خيارات منفذ العرض، قم بتصدير كائن `viewport` من ملف `layout.jsx` أو `page.jsx`.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import type { Viewport } from 'next'
+
+export const viewport: Viewport = {
+  themeColor: 'black',
+}
+
+export default function Page() {}
+```
+
+```jsx filename="layout.jsx | page.jsx" switcher
+export const viewport = {
+  themeColor: 'black',
+}
+
+export default function Page() {}
+```
+
+## وظيفة `generateViewport`
+
+يجب أن تعيد `generateViewport` [كائن `Viewport`](#viewport-fields) يحتوي على حقل واحد أو أكثر من حقول منفذ العرض.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+export function generateViewport({ params }) {
+  return {
+    themeColor: '...',
+  }
+}
+```
+
+```jsx filename="layout.js | page.js" switcher
+export function generateViewport({ params }) {
+  return {
+    themeColor: '...',
+  }
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - إذا كان منفذ العرض لا يعتمد على معلومات وقت التشغيل، فيجب تعريفه باستخدام كائن [`viewport` الثابت](#the-viewport-object) بدلاً من `generateMetadata`.
+
+## حقول منفذ العرض
+
+### `themeColor`
+
+تعرف على المزيد حول [`theme-color`](https://developer.mozilla.org/docs/Web/HTML/Element/meta/name/theme-color).
+
+**لون سمة بسيط**
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import type { Viewport } from 'next'
+
+export const viewport: Viewport = {
+  themeColor: 'black',
+}
+```
+
+```jsx filename="layout.jsx | page.jsx" switcher
+export const viewport = {
+  themeColor: 'black',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="theme-color" content="black" />
+```
+
+**مع سمة media**
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import type { Viewport } from 'next'
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'cyan' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+}
+```
+
+```jsx filename="layout.jsx | page.jsx" switcher
+export const viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'cyan' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+```
+
+### `width`, `initialScale`, `maximumScale` و `userScalable`
+
+> **معلومة مفيدة**: يتم تعيين وسم meta `viewport` تلقائيًا، وعادةً لا تكون هناك حاجة للتكوين اليدوي لأن الإعدادات الافتراضية كافية. ومع ذلك، يتم توفير المعلومات للاكتمال.
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import type { Viewport } from 'next'
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  // مدعوم أيضًا ولكن أقل استخدامًا
+  // interactiveWidget: 'resizes-visual',
+}
+```
+
+```jsx filename="layout.jsx | page.jsx" switcher
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  // مدعوم أيضًا ولكن أقل استخدامًا
+  // interactiveWidget: 'resizes-visual',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+/>
+```
+
+### `colorScheme`
+
+تعرف على المزيد حول [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=color%2Dscheme%3A%20specifies,of%20the%20following%3A).
+
+```tsx filename="layout.tsx | page.tsx" switcher
+import type { Viewport } from 'next'
+
+export const viewport: Viewport = {
+  colorScheme: 'dark',
+}
+```
+
+```jsx filename="layout.jsx | page.jsx" switcher
+export const viewport = {
+  colorScheme: 'dark',
+}
+```
+
+```html filename="<head> output" hideLineNumbers
+<meta name="color-scheme" content="dark" />
+```
+
+## الأنواع
+
+يمكنك إضافة أمان النوع لكائن منفذ العرض باستخدام نوع `Viewport`. إذا كنت تستخدم [إضافة TypeScript المدمجة](/docs/app/building-your-application/configuring/typescript) في بيئة التطوير الخاصة بك، فلن تحتاج إلى إضافة النوع يدويًا، ولكن لا يزال بإمكانك إضافته صراحةً إذا أردت.
+
+### كائن `viewport`
+
+```tsx
+import type { Viewport } from 'next'
+
+export const viewport: Viewport = {
+  themeColor: 'black',
+}
+```
+
+### وظيفة `generateViewport`
+
+#### وظيفة عادية
+
+```tsx
+import type { Viewport } from 'next'
+
+export function generateViewport(): Viewport {
+  return {
+    themeColor: 'black',
+  }
+}
+```
+
+#### مع خاصية segment
+
+```tsx
+import type { Viewport } from 'next'
+
+type Props = {
+  params: { id: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export function generateViewport({ params, searchParams }: Props): Viewport {
+  return {
+    themeColor: 'black',
+  }
+}
+
+export default function Page({ params, searchParams }: Props) {}
+```
+
+#### مشاريع JavaScript
+
+لمشاريع JavaScript، يمكنك استخدام JSDoc لإضافة أمان النوع.
+
+```js
+/** @type {import("next").Viewport} */
+export const viewport = {
+  themeColor: 'black',
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                       |
+| --------- | --------------------------------------------- |
+| `v14.0.0` | تم تقديم `viewport` و `generateViewport`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/headers.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/headers.mdx
new file mode 100644
index 00000000..fa07b7ef
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/headers.mdx
@@ -0,0 +1,129 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:40.494Z
+title: headers
+description: مرجع API لوظيفة headers.
+---
+
+تتيح لك وظيفة `headers` قراءة رؤوس طلب HTTP الواردة من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components).
+
+## `headers()`
+
+هذه الواجهة تمتد من [واجهة Web Headers API](https://developer.mozilla.org/docs/Web/API/Headers). وهي **للقراءة فقط**، مما يعني أنه لا يمكنك `تعيين` أو `حذف` رؤوس الطلب الصادرة.
+
+```tsx filename="app/page.tsx" switcher
+import { headers } from 'next/headers'
+
+export default function Page() {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return <div>Referer: {referer}</div>
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { headers } from 'next/headers'
+
+export default function Page() {
+  const headersList = headers()
+  const referer = headersList.get('referer')
+
+  return <div>Referer: {referer}</div>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - `headers()` هي [وظيفة ديناميكية (Dynamic Function)](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) لا يمكن معرفة قيمها المُرجعة مسبقًا. استخدامها في تخطيط أو صفحة سيؤدي إلى تحويل المسار إلى [عرض ديناميكي (dynamic rendering)](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) وقت الطلب.
+
+### مرجع API
+
+```tsx
+const headersList = headers()
+```
+
+#### المعاملات
+
+لا تأخذ `headers` أي معاملات.
+
+#### القيم المُرجعة
+
+تُرجع `headers` كائن [Web Headers](https://developer.mozilla.org/docs/Web/API/Headers) **للقراءة فقط**.
+
+- [`Headers.entries()`](https://developer.mozilla.org/docs/Web/API/Headers/entries): تُرجع [مكررًا (iterator)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) يسمح بالمرور عبر جميع أزواج المفتاح/القيمة في هذا الكائن.
+- [`Headers.forEach()`](https://developer.mozilla.org/docs/Web/API/Headers/forEach): تنفذ دالة معينة مرة واحدة لكل زوج مفتاح/قيمة في كائن `Headers` هذا.
+- [`Headers.get()`](https://developer.mozilla.org/docs/Web/API/Headers/get): تُرجع [سلسلة نصية (String)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) تحتوي على جميع قيم رأس معين داخل كائن `Headers`.
+- [`Headers.has()`](https://developer.mozilla.org/docs/Web/API/Headers/has): تُرجع قيمة منطقية تشير إلى ما إذا كان كائن `Headers` يحتوي على رأس معين.
+- [`Headers.keys()`](https://developer.mozilla.org/docs/Web/API/Headers/keys): تُرجع [مكررًا (iterator)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) يسمح بالمرور عبر جميع مفاتيح أزواج المفتاح/القيمة في هذا الكائن.
+- [`Headers.values()`](https://developer.mozilla.org/docs/Web/API/Headers/values): تُرجع [مكررًا (iterator)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) يسمح بالمرور عبر جميع قيم أزواج المفتاح/القيمة في هذا الكائن.
+
+### أمثلة
+
+#### الاستخدام مع جلب البيانات
+
+يمكن استخدام `headers()` مع [Suspense لجلب البيانات (Suspense for Data Fetching)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating).
+
+```jsx filename="app/page.js"
+import { Suspense } from 'react'
+import { headers } from 'next/headers'
+
+async function User() {
+  const authorization = headers().get('authorization')
+  const res = await fetch('...', {
+    headers: { authorization }, // تمرير رأس التفويض
+  })
+  const user = await res.json()
+
+  return <h1>{user.name}</h1>
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={null}>
+      <User />
+    </Suspense>
+  )
+}
+```
+
+#### عنوان IP
+
+يمكن استخدام `headers()` للحصول على عنوان IP الخاص بالعميل.
+
+```jsx filename="app/page.js"
+import { Suspense } from 'react'
+import { headers } from 'next/headers'
+
+function IP() {
+  const FALLBACK_IP_ADDRESS = '0.0.0.0'
+  const forwardedFor = headers().get('x-forwarded-for')
+
+  if (forwardedFor) {
+    return forwardedFor.split(',')[0] ?? FALLBACK_IP_ADDRESS
+  }
+
+  return headers().get('x-real-ip') ?? FALLBACK_IP_ADDRESS
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={null}>
+      <IP />
+    </Suspense>
+  )
+}
+```
+
+بالإضافة إلى `x-forwarded-for`، يمكن لـ `headers()` قراءة:
+
+- `x-real-ip`
+- `x-forwarded-host`
+- `x-forwarded-port`
+- `x-forwarded-proto`
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات               |
+| --------- | --------------------- |
+| `v13.0.0` | تم إدخال `headers`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/image-response.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/image-response.mdx
new file mode 100644
index 00000000..caf14aa3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/image-response.mdx
@@ -0,0 +1,47 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:07.178Z
+title: ImageResponse
+description: مرجع API لبناء ImageResponse.
+---
+
+يسمح لك مُنشئ `ImageResponse` بإنشاء صور ديناميكية باستخدام JSX وCSS. هذا مفيد لإنشاء صور وسائل التواصل الاجتماعي مثل صور Open Graph وبطاقات Twitter وغيرها.
+
+الخيارات المتاحة لـ `ImageResponse` هي:
+
+```jsx
+import { ImageResponse } from 'next/og'
+
+new ImageResponse(
+  element: ReactElement,
+  options: {
+    width?: number = 1200
+    height?: number = 630
+    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
+    fonts?: {
+      name: string,
+      data: ArrayBuffer,
+      weight: number,
+      style: 'normal' | 'italic'
+    }[]
+    debug?: boolean = false
+
+    // خيارات سيتم تمريرها إلى استجابة HTTP
+    status?: number = 200
+    statusText?: string
+    headers?: Record<string, string>
+  },
+)
+```
+
+## خصائص CSS المدعومة
+
+يرجى الرجوع إلى [توثيق Satori](https://github.com/vercel/satori#css) للحصول على قائمة بميزات HTML وCSS المدعومة.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                               |
+| --------- | ----------------------------------------------------- |
+| `v14.0.0` | تم نقل `ImageResponse` من `next/server` إلى `next/og` |
+| `v13.3.0` | يمكن استيراد `ImageResponse` من `next/server`.        |
+| `v13.0.0` | تم تقديم `ImageResponse` عبر حزمة `@vercel/og`.       |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/index.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/index.mdx
new file mode 100644
index 00000000..63881bbd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:46.913Z
+title: الدوال (Functions)
+description: مرجع API لدوال وخطافات (Hooks) Next.js.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/next-request.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/next-request.mdx
new file mode 100644
index 00000000..1dd2f69c
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/next-request.mdx
@@ -0,0 +1,153 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:45.798Z
+title: NextRequest
+description: مرجع API لـ NextRequest.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+NextRequest يمتد [واجهة طلب الويب (Web Request API)](https://developer.mozilla.org/docs/Web/API/Request) مع إضافة طرق إضافية لسهولة الاستخدام.
+
+## `cookies`
+
+قراءة أو تعديل رأس [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) للطلب.
+
+### `set(name, value)`
+
+بالنظر إلى اسم، يقوم بتعيين ملف تعريف الارتباط (cookie) بالقيمة المعطاة في الطلب.
+
+```ts
+// بالنظر إلى الطلب الوارد /home
+// تعيين ملف تعريف الارتباط لإخفاء اللافتة
+// سيكون للطلب رأس `Set-Cookie:show-banner=false;path=/home`
+request.cookies.set('show-banner', 'false')
+```
+
+### `get(name)`
+
+بالنظر إلى اسم ملف تعريف الارتباط، يقوم بإرجاع قيمته. إذا لم يتم العثور على ملف تعريف الارتباط، يتم إرجاع `undefined`. إذا تم العثور على أكثر من ملف تعريف ارتباط، يتم إرجاع الأول.
+
+```ts
+// بالنظر إلى الطلب الوارد /home
+// { name: 'show-banner', value: 'false', Path: '/home' }
+request.cookies.get('show-banner')
+```
+
+### `getAll()`
+
+بالنظر إلى اسم ملف تعريف الارتباط، يقوم بإرجاع قيم ملفات تعريف الارتباط. إذا لم يتم تحديد اسم، يتم إرجاع جميع ملفات تعريف الارتباط في الطلب.
+
+```ts
+// بالنظر إلى الطلب الوارد /home
+// [
+//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
+//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
+// ]
+request.cookies.getAll('experiments')
+// بدلاً من ذلك، الحصول على جميع ملفات تعريف الارتباط للطلب
+request.cookies.getAll()
+```
+
+### `delete(name)`
+
+بالنظر إلى اسم ملف تعريف الارتباط، يقوم بحذفه من الطلب.
+
+```ts
+// إرجاع true إذا تم الحذف، false إذا لم يتم حذف أي شيء
+request.cookies.delete('experiments')
+```
+
+### `has(name)`
+
+بالنظر إلى اسم ملف تعريف الارتباط، يقوم بإرجاع `true` إذا كان ملف تعريف الارتباط موجودًا في الطلب.
+
+```ts
+// إرجاع true إذا كان ملف تعريف الارتباط موجودًا، false إذا لم يكن موجودًا
+request.cookies.has('experiments')
+```
+
+### `clear()`
+
+إزالة رأس `Set-Cookie` من الطلب.
+
+```ts
+request.cookies.clear()
+```
+
+## `nextUrl`
+
+يمتد واجهة [`URL`](https://developer.mozilla.org/docs/Web/API/URL) الأصلية مع إضافة طرق إضافية لسهولة الاستخدام، بما في ذلك خصائص خاصة بـ Next.js.
+
+```ts
+// بالنظر إلى طلب إلى /home، pathname هو /home
+request.nextUrl.pathname
+// بالنظر إلى طلب إلى /home?name=lee، searchParams هو { 'name': 'lee' }
+request.nextUrl.searchParams
+```
+
+الخيارات التالية متاحة:
+
+<PagesOnly>
+
+| الخاصية          | النوع                      | الوصف                                                                                                                     |
+| ----------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `basePath`        | `string`                  | [المسار الأساسي](/docs/pages/api-reference/next-config-js/basePath) لـ URL.                                                  |
+| `buildId`         | `string` \| `undefined`   | معرف بناء تطبيق Next.js. يمكن [تخصيصه](/docs/pages/api-reference/next-config-js/generateBuildId). |
+| `defaultLocale`   | `string` \| `undefined`   | اللغة الافتراضية لـ [التدويل](/docs/pages/building-your-application/routing/internationalization).              |
+| `domainLocale`    |                           |                                                                                                                                 |
+| - `defaultLocale` | `string`                  | اللغة الافتراضية داخل النطاق.                                                                                             |
+| - `domain`        | `string`                  | النطاق المرتبط بلغة محددة.                                                                                   |
+| - `http`          | `boolean` \| `undefined`  | يشير إلى ما إذا كان النطاق يستخدم HTTP.                                                                                          |
+| `locales`         | `string[]` \| `undefined` | مصفوفة اللغات المتاحة.                                                                                                  |
+| `locale`          | `string` \| `undefined`   | اللغة النشطة حاليًا.                                                                                                    |
+| `url`             | `URL`                     | كائن URL.                                                                                                                 |
+
+</PagesOnly>
+
+<AppOnly>
+
+| الخاصية       | النوع                    | الوصف                                                                                                                   |
+| -------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `basePath`     | `string`                | [المسار الأساسي](/docs/app/api-reference/next-config-js/basePath) لـ URL.                                                  |
+| `buildId`      | `string` \| `undefined` | معرف بناء تطبيق Next.js. يمكن [تخصيصه](/docs/app/api-reference/next-config-js/generateBuildId). |
+| `pathname`     | `string`                | مسار URL.                                                                                                      |
+| `searchParams` | `Object`                | معلمات البحث لـ URL.                                                                                             |
+
+> **ملاحظة:** خصائص التدويل من موجه الصفحات غير متاحة للاستخدام في موجه التطبيق. تعلم المزيد عن [التدويل مع موجه التطبيق](/docs/app/building-your-application/routing/internationalization).
+
+</AppOnly>
+
+## `ip`
+
+خاصية `ip` هي سلسلة تحتوي على عنوان IP للطلب. يمكن توفير هذه القيمة اختياريًا من خلال منصة الاستضافة الخاصة بك.
+
+> **جيد للمعرفة:** في [Vercel](https://vercel.com/docs/frameworks/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، يتم توفير هذه القيمة افتراضيًا. في المنصات الأخرى، يمكنك استخدام رأس [`X-Forwarded-For`](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Forwarded-For) لتوفير عنوان IP.
+
+```ts
+// يتم توفيره بواسطة Vercel
+request.ip
+// الاستضافة الذاتية
+request.headers.get('X-Forwarded-For')
+```
+
+## `geo`
+
+خاصية `geo` هي كائن يحتوي على المعلومات الجغرافية للطلب. يمكن توفير هذه القيمة اختياريًا من خلال منصة الاستضافة الخاصة بك.
+
+> **جيد للمعرفة:** في [Vercel](https://vercel.com/docs/frameworks/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، يتم توفير هذه القيمة افتراضيًا. في المنصات الأخرى، يمكنك استخدام رأس [`X-Forwarded-For`](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Forwarded-For) لتوفير عنوان IP، ثم استخدام [خدمة طرف ثالث](https://ip-api.com/) للبحث عن المعلومات الجغرافية.
+
+```ts
+// يتم توفيره بواسطة Vercel
+request.geo.city
+request.geo.country
+request.geo.region
+request.geo.latitude
+request.geo.longitude
+
+// الاستضافة الذاتية
+function getGeo(request) {
+  let ip = request.headers.get('X-Forwarded-For')
+  // استخدام خدمة طرف ثالث للبحث عن المعلومات الجغرافية
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/next-response.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/next-response.mdx
new file mode 100644
index 00000000..a71ecba9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/next-response.mdx
@@ -0,0 +1,148 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:23.564Z
+title: NextResponse
+description: مرجع API لـ NextResponse.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+تمتد `NextResponse` من [واجهة برمجة تطبيقات الاستجابة (Web Response API)](https://developer.mozilla.org/docs/Web/API/Response) مع إضافة طرق إضافية لتسهيل الاستخدام.
+
+## `cookies`
+
+قراءة أو تعديل رأس [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) في الاستجابة.
+
+### `set(name, value)`
+
+بالنظر إلى اسم، يتم تعيين ملف تعريف الارتباط (cookie) بقيمة معينة في الاستجابة.
+
+```ts
+// بالنظر إلى طلب وارد لـ /home
+let response = NextResponse.next()
+// تعيين ملف تعريف الارتباط لإخفاء اللافتة
+response.cookies.set('show-banner', 'false')
+// سيكون للاستجابة رأس `Set-Cookie:show-banner=false;path=/home`
+return response
+```
+
+### `get(name)`
+
+بالنظر إلى اسم ملف تعريف الارتباط، يتم إرجاع قيمته. إذا لم يتم العثور على الملف، يتم إرجاع `undefined`. إذا تم العثور على ملفات متعددة، يتم إرجاع الأول.
+
+```ts
+// بالنظر إلى طلب وارد لـ /home
+let response = NextResponse.next()
+// { name: 'show-banner', value: 'false', Path: '/home' }
+response.cookies.get('show-banner')
+```
+
+### `getAll()`
+
+بالنظر إلى اسم ملف تعريف الارتباط، يتم إرجاع قيم الملف. إذا لم يتم تقديم اسم، يتم إرجاع جميع ملفات تعريف الارتباط في الاستجابة.
+
+```ts
+// بالنظر إلى طلب وارد لـ /home
+let response = NextResponse.next()
+// [
+//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
+//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
+// ]
+response.cookies.getAll('experiments')
+// بدلاً من ذلك، الحصول على جميع ملفات تعريف الارتباط للاستجابة
+response.cookies.getAll()
+```
+
+### `delete(name)`
+
+بالنظر إلى اسم ملف تعريف الارتباط، يتم حذفه من الاستجابة.
+
+```ts
+// بالنظر إلى طلب وارد لـ /home
+let response = NextResponse.next()
+// إرجاع true إذا تم الحذف، false إذا لم يتم حذف أي شيء
+response.cookies.delete('experiments')
+```
+
+## `json()`
+
+إنشاء استجابة بجسم JSON معطى.
+
+```ts filename="app/api/route.ts" switcher
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { NextResponse } from 'next/server'
+
+export async function GET(request) {
+  return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+}
+```
+
+## `redirect()`
+
+إنشاء استجابة تعيد التوجيه إلى [رابط URL](https://developer.mozilla.org/docs/Web/API/URL).
+
+```ts
+import { NextResponse } from 'next/server'
+
+return NextResponse.redirect(new URL('/new', request.url))
+```
+
+يمكن إنشاء [رابط URL](https://developer.mozilla.org/docs/Web/API/URL) وتعديله قبل استخدامه في طريقة `NextResponse.redirect()`. على سبيل المثال، يمكنك استخدام خاصية `request.nextUrl` للحصول على الرابط الحالي، ثم تعديله لإعادة التوجيه إلى رابط مختلف.
+
+```ts
+import { NextResponse } from 'next/server'
+
+// بالنظر إلى طلب وارد...
+const loginUrl = new URL('/login', request.url)
+// إضافة ?from=/incoming-url إلى رابط /login
+loginUrl.searchParams.set('from', request.nextUrl.pathname)
+// وإعادة التوجيه إلى الرابط الجديد
+return NextResponse.redirect(loginUrl)
+```
+
+## `rewrite()`
+
+إنشاء استجابة تعيد كتابة (توكيل) رابط [URL](https://developer.mozilla.org/docs/Web/API/URL) مع الحفاظ على الرابط الأصلي.
+
+```ts
+import { NextResponse } from 'next/server'
+
+// الطلب الوارد: /about، المتصفح يعرض /about
+// الطلب المعاد كتابته: /proxy، المتصفح يعرض /about
+return NextResponse.rewrite(new URL('/proxy', request.url))
+```
+
+## `next()`
+
+طريقة `next()` مفيدة في البرمجيات الوسيطة (Middleware)، حيث تسمح لك بالعودة مبكرًا ومتابعة التوجيه.
+
+```ts
+import { NextResponse } from 'next/server'
+
+return NextResponse.next()
+```
+
+يمكنك أيضًا تمرير `headers` عند إنشاء الاستجابة:
+
+```ts
+import { NextResponse } from 'next/server'
+
+// بالنظر إلى طلب وارد...
+const newHeaders = new Headers(request.headers)
+// إضافة رأس جديد
+newHeaders.set('x-version', '123')
+// وإنشاء استجابة مع الرؤوس الجديدة
+return NextResponse.next({
+  request: {
+    // رؤوس الطلب الجديدة
+    headers: newHeaders,
+  },
+})
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/not-found.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/not-found.mdx
new file mode 100644
index 00000000..2a22b535
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/not-found.mdx
@@ -0,0 +1,40 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:51.061Z
+title: notFound
+description: مرجع API لوظيفة notFound.
+---
+
+تتيح لك وظيفة `notFound` عرض [ملف not-found](/docs/app/api-reference/file-conventions/not-found) داخل مقطع مسار (route segment) بالإضافة إلى إضافة وسم `<meta name="robots" content="noindex" />`.
+
+## `notFound()`
+
+استدعاء الدالة `notFound()` يرمي خطأً من نوع `NEXT_NOT_FOUND` ويوقف عرض مقطع المسار الذي تم استدعاؤها فيه. يتيح لك تحديد [ملف not-found](/docs/app/api-reference/file-conventions/not-found) التعامل مع هذه الأخطاء بشكل أنيق من خلال عرض واجهة "غير موجود" (Not Found UI) داخل المقطع.
+
+```jsx filename="app/user/[id]/page.js"
+import { notFound } from 'next/navigation'
+
+async function fetchUser(id) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }) {
+  const user = await fetchUser(params.id)
+
+  if (!user) {
+    notFound()
+  }
+
+  // ...
+}
+```
+
+> **معلومة مفيدة**: لا تحتاج لاستخدام `return notFound()` مع الدالة `notFound()` لأنها تستخدم نوع [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never) في TypeScript.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                |
+| --------- | ---------------------- |
+| `v13.0.0` | تم إدخال `notFound`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/permanentRedirect.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/permanentRedirect.mdx
new file mode 100644
index 00000000..5f61f7d5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/permanentRedirect.mdx
@@ -0,0 +1,63 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:04.341Z
+title: permanentRedirect
+description: مرجع API لدالة permanentRedirect.
+related:
+  links:
+    - app/api-reference/functions/redirect
+---
+
+تتيح لك دالة `permanentRedirect` توجيه المستخدم إلى عنوان URL آخر. يمكن استخدام `permanentRedirect` في مكونات الخادم (Server Components)، ومكونات العميل (Client Components)، و[معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers)، و[إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+عند استخدامها في سياق بث (streaming)، ستقوم بإدراج وسم meta لإصدار التوجيه على جانب العميل. عند استخدامها في إجراء خادم، ستقدم استجابة توجيه HTTP 303 للمستدعي. وإلا، ستقدم استجابة توجيه HTTP 308 (دائم) للمستدعي.
+
+إذا كان المورد غير موجود، يمكنك استخدام [دالة `notFound`](/docs/app/api-reference/functions/not-found) بدلاً من ذلك.
+
+> **معلومة مفيدة**: إذا كنت تفضل إرجاع توجيه HTTP 307 (مؤقت) بدلاً من 308 (دائم)، يمكنك استخدام [دالة `redirect`](/docs/app/api-reference/functions/redirect) بدلاً من ذلك.
+
+## المعاملات
+
+تقبل دالة `permanentRedirect` معاملين:
+
+```js
+permanentRedirect(path, type)
+```
+
+| المعامل | النوع                                                          | الوصف                                                 |
+| --------- | ------------------------------------------------------------- | ----------------------------------------------------------- |
+| `path`    | `string`                                                      | عنوان URL للتوجيه إليه. يمكن أن يكون مسارًا نسبيًا أو مطلقًا. |
+| `type`    | `'replace'` (افتراضي) أو `'push'` (افتراضي في إجراءات الخادم) | نوع التوجيه المطلوب تنفيذه.                            |
+
+بشكل افتراضي، ستستخدم `permanentRedirect` `push` (إضافة إدخال جديد إلى سجل المتصفح) في [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) و`replace` (استبدال عنوان URL الحالي في سجل المتصفح) في كل مكان آخر. يمكنك تجاوز هذا السلوك عن طريق تحديد معامل `type`.
+
+ليس لمعامل `type` أي تأثير عند استخدامه في مكونات الخادم.
+
+## القيمة المرجعة
+
+لا ترجع دالة `permanentRedirect` أي قيمة.
+
+## مثال
+
+استدعاء دالة `permanentRedirect()` يرمي خطأ `NEXT_REDIRECT` ويوقف عرض مقطع المسار الذي تم رميه فيه.
+
+```jsx filename="app/team/[id]/page.js"
+import { permanentRedirect } from 'next/navigation'
+
+async function fetchTeam(id) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }) {
+  const team = await fetchTeam(params.id)
+  if (!team) {
+    permanentRedirect('/login')
+  }
+
+  // ...
+}
+```
+
+> **معلومة مفيدة**: لا تتطلب `permanentRedirect` منك استخدام `return permanentRedirect()` لأنها تستخدم نوع TypeScript [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/redirect.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/redirect.mdx
new file mode 100644
index 00000000..deda7158
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/redirect.mdx
@@ -0,0 +1,145 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:26.071Z
+title: redirect
+description: مرجع API لدالة `redirect`.
+related:
+  links:
+    - app/api-reference/functions/permanentRedirect
+---
+
+تسمح دالة `redirect` بإعادة توجيه المستخدم إلى عنوان URL آخر. يمكن استخدام `redirect` في [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components)، [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers)، و [أفعال الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+عند استخدامها في [سياق البث (streaming context)](/docs/app/building-your-application/routing/loading-ui-and-streaming#what-is-streaming)، تقوم بإدراج وسم meta لإصدار إعادة التوجيه على جانب العميل. عند استخدامها في فعل خادم، تقدم استجابة إعادة توجيه HTTP 303 للمتصل. وإلا، تقدم استجابة إعادة توجيه HTTP 307 للمتصل.
+
+إذا كان المورد غير موجود، يمكنك استخدام [دالة `notFound`](/docs/app/api-reference/functions/not-found) بدلاً من ذلك.
+
+> **معلومة مفيدة**:
+>
+> - في أفعال الخادم ومعالجات المسار، يجب استدعاء `redirect` بعد كتلة `try/catch`.
+> - إذا كنت تفضل إرجاع إعادة توجيه HTTP 308 (دائم) بدلاً من 307 (مؤقت)، يمكنك استخدام [دالة `permanentRedirect`](/docs/app/api-reference/functions/permanentRedirect) بدلاً من ذلك.
+
+## المعاملات
+
+تقبل دالة `redirect` وسيطين:
+
+```js
+redirect(path, type)
+```
+
+| المعامل  | النوع                                                          | الوصف                                                 |
+| --------- | ------------------------------------------------------------- | ----------------------------------------------------------- |
+| `path`    | `string`                                                      | عنوان URL لإعادة التوجيه إليه. يمكن أن يكون مسارًا نسبيًا أو مطلقًا. |
+| `type`    | `'replace'` (افتراضي) أو `'push'` (افتراضي في أفعال الخادم) | نوع إعادة التوجيه المطلوب تنفيذه.                            |
+
+بشكل افتراضي، تستخدم `redirect` `push` (إضافة إدخال جديد إلى سجل المتصفح) في [أفعال الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) و `replace` (استبدال عنوان URL الحالي في سجل المتصفح) في كل مكان آخر. يمكنك تجاوز هذا السلوك عن طريق تحديد معامل `type`.
+
+لا يؤثر معامل `type` عند استخدامه في مكونات الخادم.
+
+## القيمة المرجعة
+
+لا ترجع دالة `redirect` أي قيمة.
+
+## مثال
+
+### مكون الخادم
+
+استدعاء دالة `redirect()` يرمي خطأ `NEXT_REDIRECT` ويوقف عرض جزء المسار الذي تم رميه فيه.
+
+```jsx filename="app/team/[id]/page.js"
+import { redirect } from 'next/navigation'
+
+async function fetchTeam(id) {
+  const res = await fetch('https://...')
+  if (!res.ok) return undefined
+  return res.json()
+}
+
+export default async function Profile({ params }) {
+  const team = await fetchTeam(params.id)
+  if (!team) {
+    redirect('/login')
+  }
+
+  // ...
+}
+```
+
+> **معلومة مفيدة**: لا تتطلب `redirect` استخدام `return redirect()` لأنها تستخدم نوع TypeScript [`never`](https://www.typescriptlang.org/docs/handbook/2/functions.html#never).
+
+### مكون العميل
+
+يمكن استخدام `redirect` في مكون العميل من خلال فعل خادم. إذا كنت بحاجة إلى استخدام معالج حدث لإعادة توجيه المستخدم، يمكنك استخدام خطاف [`useRouter`](/docs/app/api-reference/functions/use-router).
+
+```tsx filename="app/client-redirect.tsx" switcher
+'use client'
+
+import { navigate } from './actions'
+
+export function ClientRedirect() {
+  return (
+    <form action={navigate}>
+      <input type="text" name="id" />
+      <button>Submit</button>
+    </form>
+  )
+}
+```
+
+```jsx filename="app/client-redirect.jsx" switcher
+'use client'
+
+import { navigate } from './actions'
+
+export function ClientRedirect() {
+  return (
+    <form action={navigate}>
+      <input type="text" name="id" />
+      <button>Submit</button>
+    </form>
+  )
+}
+```
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+
+export async function navigate(data: FormData) {
+  redirect(`/posts/${data.get('id')}`)
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { redirect } from 'next/navigation'
+
+export async function navigate(data) {
+  redirect(`/posts/${data.get('id')}`)
+}
+```
+
+## الأسئلة الشائعة
+
+### لماذا تستخدم `redirect` الرموز 307 و 308؟
+
+عند استخدام `redirect()` قد تلاحظ أن الرموز المستخدمة هي `307` لإعادة التوجيه المؤقتة و `308` لإعادة التوجيه الدائمة. بينما تقليديًا كان يستخدم `302` لإعادة التوجيه المؤقتة و `301` لإعادة التوجيه الدائمة، قامت العديد من المتصفحات بتغيير طريقة طلب إعادة التوجيه من `POST` إلى `GET` عند استخدام `302`، بغض النظر عن طريقة الطلب الأصلية.
+
+في المثال التالي لإعادة التوجيه من `/users` إلى `/people`، إذا قمت بعمل طلب `POST` إلى `/users` لإنشاء مستخدم جديد، وتمت مطابقة إعادة التوجيه المؤقتة `302`، ستتغير طريقة الطلب من `POST` إلى `GET`. هذا غير منطقي، لأنه لإنشاء مستخدم جديد، يجب أن تقوم بعمل طلب `POST` إلى `/people` وليس طلب `GET`.
+
+أدخل رمز الحالة `307` يعني الحفاظ على طريقة الطلب كـ `POST`.
+
+- `302` - إعادة توجيه مؤقتة، ستغير طريقة الطلب من `POST` إلى `GET`
+- `307` - إعادة توجيه مؤقتة، ستحافظ على طريقة الطلب كـ `POST`
+
+تستخدم طريقة `redirect()` رمز `307` افتراضيًا، بدلاً من إعادة التوجيه المؤقتة `302`، مما يعني أن طلباتك ستظل دائمًا كطلبات `POST`.
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/HTTP/Redirections) حول إعادة التوجيه HTTP.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                |
+| --------- | ---------------------- |
+| `v13.0.0` | تم إدخال `redirect`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/revalidatePath.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/revalidatePath.mdx
new file mode 100644
index 00000000..34a91fd3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/revalidatePath.mdx
@@ -0,0 +1,125 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:14.886Z
+title: revalidatePath
+description: مرجع API لوظيفة revalidatePath.
+---
+
+تتيح لك `revalidatePath` إزالة [البيانات المخزنة مؤقتًا](/docs/app/building-your-application/caching) عند الطلب لمسار معين.
+
+> **معلومة مفيدة**:
+>
+> - `revalidatePath` متاحة في كل من [بيئات تشغيل Node.js و Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+> - `revalidatePath` تبطِل صلاحية الذاكرة المؤقتة فقط عند زيارة المسار المدرج بعد ذلك. هذا يعني أن استدعاء `revalidatePath` مع جزء مسار ديناميكي لن يؤدي إلى تشغيل العديد من عمليات إعادة التحقق على الفور. تحدث عملية الإبطال فقط عند زيارة المسار بعد ذلك.
+> - حاليًا، `revalidatePath` تبطل صلاحية جميع المسارات في [ذاكرة التخزين المؤقت لموجه العميل](/docs/app/building-your-application/caching#router-cache). هذا السلوك مؤقت وسيتم تحديثه في المستقبل ليتم تطبيقه فقط على المسار المحدد.
+> - استخدام `revalidatePath` يبطل صلاحية **المسار المحدد فقط** في [ذاكرة التخزين المؤقت للمسار من جانب الخادم](/docs/app/building-your-application/caching#full-route-cache).
+
+## المعاملات
+
+```tsx
+revalidatePath(path: string, type?: 'page' | 'layout'): void;
+```
+
+- `path`: إما سلسلة تمثل مسار نظام الملفات المرتبط بالبيانات التي تريد إعادة التحقق منها (على سبيل المثال، `/product/[slug]/page`)، أو جزء المسار الحرفي (على سبيل المثال، `/product/123`). يجب أن يكون أقل من 1024 حرفًا. هذه القيمة حساسة لحالة الأحرف.
+- `type`: (اختياري) سلسلة `'page'` أو `'layout'` لتغيير نوع المسار لإعادة التحقق منه. إذا كان `path` يحتوي على جزء ديناميكي (على سبيل المثال، `/product/[slug]/page`)، فإن هذه المعلمة مطلوبة.
+
+## القيم المُرجعة
+
+لا ترجع `revalidatePath` أي قيمة.
+
+## أمثلة
+
+### إعادة التحقق من عنوان URL معين
+
+```ts
+import { revalidatePath } from 'next/cache'
+revalidatePath('/blog/post-1')
+```
+
+سيؤدي هذا إلى إعادة التحقق من عنوان URL معين في الزيارة التالية للصفحة.
+
+### إعادة التحقق من مسار صفحة
+
+```ts
+import { revalidatePath } from 'next/cache'
+revalidatePath('/blog/[slug]', 'page')
+// أو مع مجموعات المسارات
+revalidatePath('/(main)/post/[slug]', 'page')
+```
+
+سيؤدي هذا إلى إعادة التحقق من أي عنوان URL يتطابق مع ملف `page` المقدم في الزيارة التالية للصفحة. هذا **لن** يبطل صلاحية الصفحات الموجودة أسفل الصفحة المحددة. على سبيل المثال، `/blog/[slug]` لن تبطل صلاحية `/blog/[slug]/[author]`.
+
+### إعادة التحقق من مسار تخطيط
+
+```ts
+import { revalidatePath } from 'next/cache'
+revalidatePath('/blog/[slug]', 'layout')
+// أو مع مجموعات المسارات
+revalidatePath('/(main)/post/[slug]', 'layout')
+```
+
+سيؤدي هذا إلى إعادة التحقق من أي عنوان URL يتطابق مع ملف `layout` المقدم في الزيارة التالية للصفحة. سيؤدي هذا إلى إعادة التحقق من الصفحات الموجودة أسفل نفس التخطيط في الزيارة التالية. على سبيل المثال، في الحالة أعلاه، `/blog/[slug]/[another]` ستُعاد التحقق منها أيضًا في الزيارة التالية.
+
+### إعادة التحقق من جميع البيانات
+
+```ts
+import { revalidatePath } from 'next/cache'
+
+revalidatePath('/', 'layout')
+```
+
+سيؤدي هذا إلى مسح ذاكرة التخزين المؤقت لموجه العميل، وإعادة التحقق من ذاكرة التخزين المؤقت للبيانات في الزيارة التالية للصفحة.
+
+### إجراء الخادم
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export default async function submit() {
+  await submitForm()
+  revalidatePath('/')
+}
+```
+
+### معالج المسار
+
+```ts filename="app/api/revalidate/route.ts" switcher
+import { revalidatePath } from 'next/cache'
+import { NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const path = request.nextUrl.searchParams.get('path')
+
+  if (path) {
+    revalidatePath(path)
+    return Response.json({ revalidated: true, now: Date.now() })
+  }
+
+  return Response.json({
+    revalidated: false,
+    now: Date.now(),
+    message: 'Missing path to revalidate',
+  })
+}
+```
+
+```js filename="app/api/revalidate/route.js" switcher
+import { revalidatePath } from 'next/cache'
+
+export async function GET(request) {
+  const path = request.nextUrl.searchParams.get('path')
+
+  if (path) {
+    revalidatePath(path)
+    return Response.json({ revalidated: true, now: Date.now() })
+  }
+
+  return Response.json({
+    revalidated: false,
+    now: Date.now(),
+    message: 'Missing path to revalidate',
+  })
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/revalidateTag.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/revalidateTag.mdx
new file mode 100644
index 00000000..5d261d1f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/revalidateTag.mdx
@@ -0,0 +1,80 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:38.955Z
+title: revalidateTag
+description: مرجع API لوظيفة revalidateTag.
+---
+
+تتيح لك `revalidateTag` إبطال [البيانات المخزنة مؤقتًا](/docs/app/building-your-application/caching) عند الطلب لعلامة تخزين مؤقت معينة.
+
+> **معلومة مفيدة**:
+>
+> - `revalidateTag` متاحة في كل من [بيئات تشغيل Node.js و Edge](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+> - `revalidateTag` لا تبطل التخزين المؤقت إلا عند زيارة المسار التالية. هذا يعني أن استدعاء `revalidateTag` مع جزء مسار ديناميكي لن يؤدي إلى إطلاق العديد من عمليات الإبطال مرة واحدة. يحدث الإبطال فقط عند زيارة المسار التالية.
+
+## المعاملات
+
+```tsx
+revalidateTag(tag: string): void;
+```
+
+- `tag`: سلسلة تمثل علامة التخزين المؤقت المرتبطة بالبيانات التي تريد إبطالها. يجب أن تكون أقل من أو تساوي 256 حرفًا. هذه القيمة حساسة لحالة الأحرف.
+
+يمكنك إضافة علامات إلى `fetch` كما يلي:
+
+```tsx
+fetch(url, { next: { tags: [...] } });
+```
+
+## القيم المُرجعة
+
+لا ترجع `revalidateTag` أي قيمة.
+
+## أمثلة
+
+### إجراء الخادم (Server Action)
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export default async function submit() {
+  await addPost()
+  revalidateTag('posts')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export default async function submit() {
+  await addPost()
+  revalidateTag('posts')
+}
+```
+
+### معالج المسار (Route Handler)
+
+```ts filename="app/api/revalidate/route.ts" switcher
+import { NextRequest } from 'next/server'
+import { revalidateTag } from 'next/cache'
+
+export async function GET(request: NextRequest) {
+  const tag = request.nextUrl.searchParams.get('tag')
+  revalidateTag(tag)
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
+
+```js filename="app/api/revalidate/route.js" switcher
+import { revalidateTag } from 'next/cache'
+
+export async function GET(request) {
+  const tag = request.nextUrl.searchParams.get('tag')
+  revalidateTag(tag)
+  return Response.json({ revalidated: true, now: Date.now() })
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/unstable_cache.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/unstable_cache.mdx
new file mode 100644
index 00000000..667df7c5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/unstable_cache.mdx
@@ -0,0 +1,50 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:35.518Z
+title: unstable_cache
+description: مرجع API لوظيفة unstable_cache.
+---
+
+تسمح لك `unstable_cache` بتخزين نتائج العمليات المكلفة، مثل استعلامات قاعدة البيانات، وإعادة استخدامها عبر طلبات متعددة.
+
+```jsx
+import { getUser } from './data';
+import { unstable_cache } from 'next/cache';
+
+const getCachedUser = unstable_cache(
+  async (id) => getUser(id),
+  ['my-app-user']
+);
+
+export default async function Component({ userID }) {
+  const user = await getCachedUser(userID);
+  ...
+}
+```
+
+> **معلومة مفيدة**:
+> الوصول إلى مصادر البيانات الديناميكية مثل `headers` أو `cookies` داخل نطاق التخزين المؤقت غير مدعوم. إذا كنت بحاجة إلى هذه البيانات داخل دالة مخزنة مؤقتًا، استخدم `headers` خارج الدالة المخزنة ومرر البيانات الديناميكية المطلوبة كوسيطة.
+
+> **تحذير**: واجهة برمجة التطبيقات (API) هذه غير مستقرة وقد تتغير في المستقبل. سنوفر وثائق للهجرة وأدوات تعديل التعليمات البرمجية (codemods) إذا لزم الأمر عند استقرار هذه الواجهة.
+
+## المعاملات
+
+```jsx
+const data = unstable_cache(fetchData, keyParts, options)()
+```
+
+- `fetchData`: دالة غير متزامنة تقوم باسترداد البيانات التي تريد تخزينها مؤقتًا. يجب أن تكون دالة تُرجع `Promise`.
+- `keyParts`: مصفوفة تحدد مفتاح التخزين المؤقت. يجب أن تحتوي على قيم فريدة عالميًا تُعرِّف معًا مفتاح البيانات التي يتم تخزينها مؤقتًا. يتضمن مفتاح التخزين المؤقت أيضًا الوسائط الممررة إلى الدالة.
+- `options`: كائن يتحكم في سلوك التخزين المؤقت. يمكن أن يحتوي على الخصائص التالية:
+  - `tags`: مصفوفة من العلامات التي يمكن استخدامها للتحكم في إبطال التخزين المؤقت.
+  - `revalidate`: عدد الثواني التي بعدها يجب إعادة التحقق من صحة التخزين المؤقت. احذف أو مرر `false` للتخزين المؤقت إلى أجل غير مسمى أو حتى يتم استدعاء طرق `revalidateTag()` أو `revalidatePath()` المطابقة.
+
+## القيم المُرجعة
+
+تُرجع `unstable_cache` دالة عند استدعائها، تُرجع Promise يتم حلها إلى البيانات المخزنة مؤقتًا. إذا لم تكن البيانات في التخزين المؤقت، سيتم استدعاء الدالة المقدمة، وسيتم تخزين نتيجتها مؤقتًا وإرجاعها.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                      |
+| --------- | ---------------------------- |
+| `v14.0.0` | تم تقديم `unstable_cache`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/unstable_noStore.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/unstable_noStore.mdx
new file mode 100644
index 00000000..afa79dce
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/unstable_noStore.mdx
@@ -0,0 +1,45 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:21.267Z
+title: unstable_noStore
+description: مرجع API لوظيفة unstable_noStore.
+---
+
+يمكن استخدام `unstable_noStore` للانسحاب التصريحي من التصيير الثابت (static rendering) للإشارة إلى أن مكونًا معينًا لا يجب تخزينه مؤقتًا.
+
+```jsx
+import { unstable_noStore as noStore } from 'next/cache';
+
+export default async function Component() {
+  noStore();
+  const result = await db.query(...);
+  ...
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - `unstable_noStore` تعادل `cache: 'no-store'` في طلب `fetch`
+> - يُفضل استخدام `unstable_noStore` بدلاً من `export const dynamic = 'force-dynamic'` لأنها أكثر دقة ويمكن استخدامها على أساس كل مكون
+
+- استخدام `unstable_noStore` داخل [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache) لن يلغي التصيير الثابت. بدلاً من ذلك، سيعتمد على تكوين التخزين المؤقت لتحديد ما إذا كان سيتم تخزين النتيجة مؤقتًا أم لا.
+
+## طريقة الاستخدام
+
+إذا كنت تفضل عدم تمرير خيارات إضافية إلى `fetch`، مثل `cache: 'no-store'` أو `next: { revalidate: 0 }`، يمكنك استخدام `noStore()` كبديل لكل هذه الحالات.
+
+```jsx
+import { unstable_noStore as noStore } from 'next/cache';
+
+export default async function Component() {
+  noStore();
+  const result = await db.query(...);
+  ...
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                        |
+| --------- | ------------------------------ |
+| `v14.0.0` | تم تقديم `unstable_noStore`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-params.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-params.mdx
new file mode 100644
index 00000000..81d6e784
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-params.mdx
@@ -0,0 +1,75 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:30.257Z
+title: useParams
+description: مرجع API لخطاف `useParams`.
+---
+
+`useParams` هو خطاف **مكون العميل (Client Component)** الذي يسمح لك بقراءة [المعاملات الديناميكية (dynamic params)](/docs/app/building-your-application/routing/dynamic-routes) للطريق المملوءة بواسطة URL الحالي.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const params = useParams<{ tag: string; item: string }>()
+
+  // Route -> /shop/[tag]/[item]
+  // URL -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  console.log(params)
+
+  return <></>
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useParams } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const params = useParams()
+
+  // Route -> /shop/[tag]/[item]
+  // URL -> /shop/shoes/nike-air-max-97
+  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
+  console.log(params)
+
+  return <></>
+}
+```
+
+## المعاملات
+
+```tsx
+const params = useParams()
+```
+
+لا يأخذ `useParams` أي معاملات.
+
+## القيم المعادة
+
+يعيد `useParams` كائنًا يحتوي على [المعاملات الديناميكية](/docs/app/building-your-application/routing/dynamic-routes) المملوءة للطريق الحالي.
+
+- كل خاصية في الكائن تمثل مقطعًا ديناميكيًا نشطًا.
+- اسم الخاصية هو اسم المقطع، وقيمة الخاصية هي القيمة التي تم ملء المقطع بها.
+- ستكون قيمة الخاصية إما `string` أو مصفوفة من `string` بناءً على [نوع المقطع الديناميكي](/docs/app/building-your-application/routing/dynamic-routes).
+- إذا كان الطريق لا يحتوي على معاملات ديناميكية، يعيد `useParams` كائنًا فارغًا.
+- إذا تم استخدامه في موجه الصفحات (Pages Router)، سيعيد `useParams` `null` في العرض الأولي ويتم تحديثه بالخصائص وفقًا للقواعد المذكورة أعلاه بمجرد أن يصبح الموجه جاهزًا.
+
+على سبيل المثال:
+
+| الطريق                           | URL         | `useParams()`             |
+| ------------------------------- | ----------- | ------------------------- |
+| `app/shop/page.js`              | `/shop`     | `{}`                      |
+| `app/shop/[slug]/page.js`       | `/shop/1`   | `{ slug: '1' }`           |
+| `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
+| `app/shop/[...slug]/page.js`    | `/shop/1/2` | `{ slug: ['1', '2'] }`    |
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                 |
+| --------- | ----------------------- |
+| `v13.3.0` | تم تقديم `useParams`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-pathname.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-pathname.mdx
new file mode 100644
index 00000000..54ad7595
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-pathname.mdx
@@ -0,0 +1,96 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:23.908Z
+title: usePathname
+description: مرجع API لخطاف `usePathname`.
+---
+
+`usePathname` هو خطاف لمكون **العميل (Client Component)** يتيح لك قراءة **مسار URL (pathname)** الحالي.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const pathname = usePathname()
+  return <p>Current pathname: {pathname}</p>
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const pathname = usePathname()
+  return <p>Current pathname: {pathname}</p>
+}
+```
+
+يتطلب `usePathname` عمدًا استخدام [مكون العميل (Client Component)](/docs/app/building-your-application/rendering/client-components). من المهم ملاحظة أن مكونات العميل ليست تحسينًا سلبيًا، بل هي جزء أساسي من بنية [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components).
+
+على سبيل المثال، سيتم عرض مكون العميل الذي يستخدم `usePathname` في HTML عند تحميل الصفحة الأولي. عند الانتقال إلى مسار جديد، لا يحتاج هذا المكون إلى إعادة جلب البيانات. بدلاً من ذلك، يتم تنزيل المكون مرة واحدة (في حزمة جافا سكريبت الخاصة بالعميل)، ويعاد عرضه بناءً على الحالة الحالية.
+
+> **معلومة مفيدة**:
+>
+> - قراءة URL الحالي من [مكون الخادم (Server Component)](/docs/app/building-your-application/rendering/server-components) غير مدعومة. هذا التصميم مقصود لدعم الحفاظ على حالة التخطيط عبر تنقلات الصفحات.
+> - وضع التوافقية:
+>   - قد يُرجع `usePathname` قيمة `null` عند عرض [مسار احتياطي (fallback route)](/docs/pages/api-reference/functions/get-static-paths#fallback-true) أو عندما يتم [تحسين صفحة دليل `pages` تلقائيًا بشكل ثابت](/docs/pages/building-your-application/rendering/automatic-static-optimization) بواسطة Next.js ولم يكن الموجه جاهزًا.
+>   - سيقوم Next.js بتحديث أنواعك تلقائيًا إذا اكتشف وجود كل من دليل `app` و`pages` في مشروعك.
+
+## المعاملات
+
+```tsx
+const pathname = usePathname()
+```
+
+لا يأخذ `usePathname` أي معاملات.
+
+## القيم المُرجعة
+
+يُرجع `usePathname` سلسلة تمثل مسار URL الحالي. على سبيل المثال:
+
+| URL                 | القيمة المُرجعة        |
+| ------------------- | --------------------- |
+| `/`                 | `'/'`                 |
+| `/dashboard`        | `'/dashboard'`        |
+| `/dashboard?v=2`    | `'/dashboard'`        |
+| `/blog/hello-world` | `'/blog/hello-world'` |
+
+## أمثلة
+
+### تنفيذ شيء استجابةً لتغيير المسار
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+
+function ExampleClientComponent() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  useEffect(() => {
+    // نفّذ شيئًا هنا...
+  }, [pathname, searchParams])
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+
+function ExampleClientComponent() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  useEffect(() => {
+    // نفّذ شيئًا هنا...
+  }, [pathname, searchParams])
+}
+```
+
+| الإصدار   | التغييرات                   |
+| --------- | ------------------------- |
+| `v13.0.0` | تم إدخال `usePathname`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx
new file mode 100644
index 00000000..45ef7237
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx
@@ -0,0 +1,230 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:13.594Z
+title: useReportWebVitals
+description: مرجع API لوظيفة `useReportWebVitals`.
+---
+
+{/* المحتوى مشترك بين تطبيقات الموجه (router) للصفحات والتطبيقات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+يتيح لك خطاف `useReportWebVitals` الإبلاغ عن [مؤشرات ويب الأساسية (Core Web Vitals)](https://web.dev/vitals/)، ويمكن استخدامه مع خدمة التحليلات الخاصة بك.
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { useReportWebVitals } from 'next/web-vitals'
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals((metric) => {
+    console.log(metric)
+  })
+
+  return <Component {...pageProps} />
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```jsx filename="app/_components/web-vitals.js"
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    console.log(metric)
+  })
+}
+```
+
+```jsx filename="app/layout.js"
+import { WebVitals } from './_components/web-vitals'
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>
+        <WebVitals />
+        {children}
+      </body>
+    </html>
+  )
+}
+```
+
+> نظرًا لأن خطاف `useReportWebVitals` يتطلب توجيه `"use client"`، فإن النهج الأكثر كفاءة هو إنشاء مكون منفصل يستورده التخطيط الجذري. هذا يحصر حدود العميل حصريًا في مكون `WebVitals`.
+
+</AppOnly>
+
+## useReportWebVitals
+
+كائن `metric` الذي يتم تمريره كوسيطة للخطاف يتكون من عدة خصائص:
+
+- `id`: معرف فريد للمقياس في سياق تحميل الصفحة الحالي
+- `name`: اسم مقياس الأداء. القيم المحتملة تشمل أسماء مقاييس [مؤشرات ويب الأساسية](#web-vitals) (TTFB, FCP, LCP, FID, CLS) المحددة لتطبيق ويب.
+- `delta`: الفرق بين القيمة الحالية والقيمة السابقة للمقياس. القيمة عادةً ما تكون بالميلي ثانية وتمثل التغيير في قيمة المقياس بمرور الوقت.
+- `entries`: مصفوفة من [إدخالات الأداء (Performance Entries)](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) المرتبطة بالمقياس. توفر هذه الإدخالات معلومات مفصلة عن أحداث الأداء المتعلقة بالمقياس.
+- `navigationType`: يشير إلى [نوع التنقل (type of navigation)](https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming/type) الذي أثار جمع المقياس. القيم المحتملة تشمل `"navigate"`, `"reload"`, `"back_forward"`, و `"prerender"`.
+- `rating`: تقييم نوعي لقيمة المقياس، يوفر تقييمًا للأداء. القيم المحتملة هي `"good"`, `"needs-improvement"`, و `"poor"`. يتم تحديد التقييم عادةً بمقارنة قيمة المقياس مع عتبات محددة مسبقًا تشير إلى أداء مقبول أو دون المستوى الأمثل.
+- `value`: القيمة الفعلية أو مدة إدخال الأداء، عادةً بالميلي ثانية. توفر القيمة مقياسًا كميًا لجانب الأداء الذي يتم تتبعه بواسطة المقياس. مصدر القيمة يعتمد على المقياس المحدد الذي يتم قياسه ويمكن أن يأتي من واجهات [Performance API](https://developer.mozilla.org/docs/Web/API/Performance_API) المختلفة.
+
+## مؤشرات ويب الأساسية (Web Vitals)
+
+[مؤشرات ويب الأساسية (Web Vitals)](https://web.dev/vitals/) هي مجموعة من المقاييس المفيدة التي تهدف إلى التقاط تجربة المستخدم لصفحة الويب. تشمل مؤشرات الويب الأساسية التالية:
+
+- [الوقت حتى أول بايت (Time to First Byte)](https://developer.mozilla.org/docs/Glossary/Time_to_first_byte) (TTFB)
+- [الرسم الأول للمحتوى (First Contentful Paint)](https://developer.mozilla.org/docs/Glossary/First_contentful_paint) (FCP)
+- [الرسم الأكبر للمحتوى (Largest Contentful Paint)](https://web.dev/lcp/) (LCP)
+- [تأخر أول إدخال (First Input Delay)](https://web.dev/fid/) (FID)
+- [الانزياح التراكمي للتخطيط (Cumulative Layout Shift)](https://web.dev/cls/) (CLS)
+- [التفاعل حتى الرسم التالي (Interaction to Next Paint)](https://web.dev/inp/) (INP)
+
+يمكنك التعامل مع جميع نتائج هذه المقاييس باستخدام خاصية `name`.
+
+<PagesOnly>
+
+```jsx filename="pages/_app.js"
+import { useReportWebVitals } from 'next/web-vitals'
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // التعامل مع نتائج FCP
+      }
+      case 'LCP': {
+        // التعامل مع نتائج LCP
+      }
+      // ...
+    }
+  })
+
+  return <Component {...pageProps} />
+}
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+```tsx filename="app/components/web-vitals.tsx" switcher
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // التعامل مع نتائج FCP
+      }
+      case 'LCP': {
+        // التعامل مع نتائج LCP
+      }
+      // ...
+    }
+  })
+}
+```
+
+```jsx filename="app/components/web-vitals.js" switcher
+'use client'
+
+import { useReportWebVitals } from 'next/web-vitals'
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'FCP': {
+        // التعامل مع نتائج FCP
+      }
+      case 'LCP': {
+        // التعامل مع نتائج LCP
+      }
+      // ...
+    }
+  })
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+## مقاييس مخصصة
+
+بالإضافة إلى المقاييس الأساسية المذكورة أعلاه، هناك بعض المقاييس المخصصة الإضافية التي تقيس الوقت الذي تستغرقه الصفحة للترطيب (hydration) والرسم:
+
+- `Next.js-hydration`: المدة الزمنية التي تستغرقها الصفحة لبدء وإنهاء الترطيب (بالميلي ثانية)
+- `Next.js-route-change-to-render`: المدة الزمنية التي تستغرقها الصفحة لبدء الرسم بعد تغيير المسار (بالميلي ثانية)
+- `Next.js-render`: المدة الزمنية التي تستغرقها الصفحة لإنهاء الرسم بعد تغيير المسار (بالميلي ثانية)
+
+يمكنك التعامل مع جميع نتائج هذه المقاييس بشكل منفصل:
+
+```jsx filename="pages/_app.js"
+import { useReportWebVitals } from 'next/web-vitals'
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case 'Next.js-hydration':
+        // التعامل مع نتائج الترطيب
+        break
+      case 'Next.js-route-change-to-render':
+        // التعامل مع نتائج تغيير المسار إلى الرسم
+        break
+      case 'Next.js-render':
+        // التعامل مع نتائج الرسم
+        break
+      default:
+        break
+    }
+  })
+
+  return <Component {...pageProps} />
+}
+```
+
+تعمل هذه المقاييس في جميع المتصفحات التي تدعم [واجهة برمجة تطبيقات توقيت المستخدم (User Timing API)](https://caniuse.com/#feat=user-timing).
+
+</PagesOnly>
+
+## الاستخدام على Vercel
+
+[إحصاءات سرعة Vercel (Vercel Speed Insights)](https://vercel.com/docs/concepts/speed-insights) يتم تكوينها تلقائيًا على نشرات Vercel، ولا تتطلب استخدام `useReportWebVitals`. هذا الخطاف مفيد في التطوير المحلي، أو إذا كنت تستخدم خدمة تحليلات مختلفة.
+
+## إرسال النتائج إلى أنظمة خارجية
+
+يمكنك إرسال النتائج إلى أي نقطة نهاية لقياس وتتبع أداء المستخدم الحقيقي على موقعك. على سبيل المثال:
+
+```js
+useReportWebVitals((metric) => {
+  const body = JSON.stringify(metric)
+  const url = 'https://example.com/analytics'
+
+  // استخدم `navigator.sendBeacon()` إذا كان متاحًا، مع التراجع إلى `fetch()`.
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(url, body)
+  } else {
+    fetch(url, { body, method: 'POST', keepalive: true })
+  }
+})
+```
+
+> **جيد للمعرفة**: إذا كنت تستخدم [Google Analytics](https://analytics.google.com/analytics/web/)، فإن استخدام قيمة `id` يمكن أن يسمح لك ببناء توزيعات المقاييس يدويًا (لحساب النسب المئوية، إلخ.)
+
+> ```js
+> useReportWebVitals(metric => {
+>   // استخدم `window.gtag` إذا قمت بتهيئة Google Analytics كما في هذا المثال:
+>   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
+>   window.gtag('event', metric.name, {
+>     value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // يجب أن تكون القيم أعدادًا صحيحة
+>     event_label: metric.id, // معرف فريد لتحميل الصفحة الحالي
+>     non_interaction: true, // يتجنب التأثير على معدل الارتداد.
+>   });
+> }
+> ```
+>
+> اقرأ المزيد عن [إرسال النتائج إلى Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-router.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-router.mdx
new file mode 100644
index 00000000..3f18a4f6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-router.mdx
@@ -0,0 +1,163 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:34.066Z
+title: useRouter
+description: مرجع API لخطاف `useRouter`.
+---
+
+يسمح لك خطاف `useRouter` بتغيير المسارات برمجيًا داخل [مكونات العميل (Client Components)](/docs/app/building-your-application/rendering/client-components).
+
+> **توصية:** استخدم [مكون `<Link>`](/docs/app/building-your-application/routing/linking-and-navigating#link-component) للتنقل إلا إذا كان لديك متطلب محدد لاستخدام `useRouter`.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      Dashboard
+    </button>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/dashboard')}>
+      Dashboard
+    </button>
+  )
+}
+```
+
+## `useRouter()`
+
+- `router.push(href: string, { scroll: boolean })`: تنفيذ تنقل من جانب العميل إلى المسار المحدد. يضيف إدخالًا جديدًا إلى [سجل المتصفح (browser’s history)](https://developer.mozilla.org/docs/Web/API/History_API).
+- `router.replace(href: string, { scroll: boolean })`: تنفيذ تنقل من جانب العميل إلى المسار المحدد دون إضافة إدخال جديد إلى [سجل المتصفح (browser’s history stack)](https://developer.mozilla.org/docs/Web/API/History_API).
+- `router.refresh()`: تحديث المسار الحالي. يتم إجراء طلب جديد إلى الخادم، وإعادة جلب طلبات البيانات، وإعادة عرض مكونات الخادم. سيقوم العميل بدمج حمولة مكون خادم React المحدثة دون فقدان حالة React من جانب العميل (مثل `useState`) أو حالة المتصفح (مثل موضع التمرير).
+- `router.prefetch(href: string)`: [الجلب المسبق (Prefetch)](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) للمسار المحدد لتحقيق انتقالات أسرع من جانب العميل.
+- `router.back()`: التنقل للخلف إلى المسار السابق في سجل المتصفح.
+- `router.forward()`: التنقل للأمام إلى الصفحة التالية في سجل المتصفح.
+
+> **معلومة مفيدة**:
+>
+> - يقوم مكون `<Link>` تلقائيًا بجلب المسارات مسبقًا عندما تصبح مرئية في نافذة العرض.
+> - يمكن أن يعيد `refresh()` نفس النتيجة إذا كانت طلبات الجلب مخزنة مؤقتًا. قد تغير الوظائف الديناميكية الأخرى مثل `cookies` و `headers` أيضًا الاستجابة.
+
+### الانتقال من `next/router`
+
+- يجب استيراد خطاف `useRouter` من `next/navigation` وليس من `next/router` عند استخدام موجه التطبيق (App Router)
+- تمت إزالة سلسلة `pathname` واستبدالها بـ [`usePathname()`](/docs/app/api-reference/functions/use-pathname)
+- تمت إزالة كائن `query` واستبداله بـ [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params)
+- تم استبدال `router.events`. [انظر أدناه.](#router-events)
+
+[عرض دليل الانتقال الكامل](/docs/app/building-your-application/upgrading/app-router-migration).
+
+## أمثلة
+
+### أحداث الموجه (Router events)
+
+يمكنك الاستماع لتغييرات الصفحة عن طريق تكوين خطافات أخرى لمكون العميل مثل `usePathname` و `useSearchParams`.
+
+```jsx filename="app/components/navigation-events.js"
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+
+export function NavigationEvents() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    const url = `${pathname}?${searchParams}`
+    console.log(url)
+    // يمكنك الآن استخدام URL الحالي
+    // ...
+  }, [pathname, searchParams])
+
+  return null
+}
+```
+
+والتي يمكن استيرادها في تخطيط (layout).
+
+```jsx filename="app/layout.js" highlight={2,10-12}
+import { Suspense } from 'react'
+import { NavigationEvents } from './components/navigation-events'
+
+export default function Layout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+
+        <Suspense fallback={null}>
+          <NavigationEvents />
+        </Suspense>
+      </body>
+    </html>
+  )
+}
+```
+
+> **معلومة مفيدة**: تم تغليف `<NavigationEvents>` في [حدود `Suspense`](/docs/app/building-your-application/routing/loading-ui-and-streaming#example) لأن [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) يتسبب في العرض من جانب العميل حتى حدود `Suspense` الأقرب أثناء [العرض الثابت (static rendering)](/docs/app/building-your-application/rendering/server-components#static-rendering-default). [معرفة المزيد](/docs/app/api-reference/functions/use-search-params#behavior).
+
+### تعطيل استعادة التمرير
+
+بشكل افتراضي، سيقوم Next.js بالتمرير إلى أعلى الصفحة عند التنقل إلى مسار جديد. يمكنك تعطيل هذا السلوك عن طريق تمرير `scroll: false` إلى `router.push()` أو `router.replace()`.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button
+      type="button"
+      onClick={() => router.push('/dashboard', { scroll: false })}
+    >
+      Dashboard
+    </button>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.jsx" switcher
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button
+      type="button"
+      onClick={() => router.push('/dashboard', { scroll: false })}
+    >
+      Dashboard
+    </button>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                        |
+| --------- | ---------------------------------------------- |
+| `v13.0.0` | تم تقديم `useRouter` من `next/navigation`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-search-params.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-search-params.mdx
new file mode 100644
index 00000000..427b4888
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-search-params.mdx
@@ -0,0 +1,369 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:34.046Z
+title: useSearchParams
+description: مرجع API لخطاف `useSearchParams`.
+---
+
+`useSearchParams` هو خطاف لمكون **العميل (Client Component)** يتيح لك قراءة **سلسلة الاستعلام (query string)** لـ URL الحالي.
+
+يُرجع `useSearchParams` نسخة **للقراءة فقط** من واجهة [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams).
+
+```tsx filename="app/dashboard/search-bar.tsx" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // URL -> `/dashboard?search=my-project`
+  // `search` -> 'my-project'
+  return <>Search: {search}</>
+}
+```
+
+```jsx filename="app/dashboard/search-bar.js" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // URL -> `/dashboard?search=my-project`
+  // `search` -> 'my-project'
+  return <>Search: {search}</>
+}
+```
+
+## المعاملات
+
+```tsx
+const searchParams = useSearchParams()
+```
+
+لا يأخذ `useSearchParams` أي معاملات.
+
+## القيم المُرجعة
+
+يُرجع `useSearchParams` نسخة **للقراءة فقط** من واجهة [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams)، والتي تتضمن طرقًا مساعدة لقراءة سلسلة استعلام URL:
+
+- [`URLSearchParams.get()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/get): تُرجع القيمة الأولى المرتبطة بمعامل البحث. على سبيل المثال:
+
+  | URL                  | `searchParams.get("a")`                                                                                         |
+  | -------------------- | --------------------------------------------------------------------------------------------------------------- |
+  | `/dashboard?a=1`     | `'1'`                                                                                                           |
+  | `/dashboard?a=`      | `''`                                                                                                            |
+  | `/dashboard?b=3`     | `null`                                                                                                          |
+  | `/dashboard?a=1&a=2` | `'1'` _- استخدم [`getAll()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/getAll) للحصول على جميع القيم_ |
+
+- [`URLSearchParams.has()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/has): تُرجع قيمة منطقية تشير إلى وجود المعامل المحدد. على سبيل المثال:
+
+  | URL              | `searchParams.has("a")` |
+  | ---------------- | ----------------------- |
+  | `/dashboard?a=1` | `true`                  |
+  | `/dashboard?b=3` | `false`                 |
+
+- تعرف على المزيد حول الطرق الأخرى **للقراءة فقط** في [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams)، بما في ذلك [`getAll()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/getAll)، [`keys()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/keys)، [`values()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/values)، [`entries()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/entries)، [`forEach()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/forEach)، و [`toString()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/toString).
+
+> **معلومة مفيدة**:
+>
+> - `useSearchParams` هو خطاف لمكون [العميل (Client Component)](/docs/app/building-your-application/rendering/client-components) و**غير مدعوم** في [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) لمنع قيم قديمة أثناء [التصيير الجزئي (partial rendering)](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering).
+> - إذا تضمن التطبيق دليل `/pages`، فسيرجع `useSearchParams` `ReadonlyURLSearchParams | null`. القيمة `null` هي لأغراض التوافق أثناء الترحيل حيث لا يمكن معرفة معلمات البحث أثناء التصيير المسبق لصفحة لا تستخدم `getServerSideProps`
+
+### التصيير الثابت (Static Rendering)
+
+إذا تم [تصيير المسار بشكل ثابت](/docs/app/building-your-application/rendering/server-components#static-rendering-default)، فإن استدعاء `useSearchParams` سيؤدي إلى تصيير شجرة مكون العميل حتى أقرب [حد `Suspense`](/docs/app/building-your-application/routing/loading-ui-and-streaming#example) على جانب العميل.
+
+هذا يسمح بجزء من المسار أن يتم تصييره بشكل ثابت بينما الجزء الديناميكي الذي يستخدم `useSearchParams` يتم تصييره على جانب العميل.
+
+نوصي بتغليف مكون العميل الذي يستخدم `useSearchParams` داخل حدود `<Suspense/>`. هذا سيسمح لأي مكونات عميل فوقه أن يتم تصييرها بشكل ثابت وإرسالها كجزء من HTML الأولي. [مثال](/docs/app/api-reference/functions/use-search-params#static-rendering).
+
+على سبيل المثال:
+
+```tsx filename="app/dashboard/search-bar.tsx" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // هذا لن يتم تسجيله على الخادم عند استخدام التصيير الثابت
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```jsx filename="app/dashboard/search-bar.js" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // هذا لن يتم تسجيله على الخادم عند استخدام التصيير الثابت
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import { Suspense } from 'react'
+import SearchBar from './search-bar'
+
+// هذا المكون الممرر كحالة احتياطية لحد Suspense
+// سيتم تصييره مكان شريط البحث في HTML الأولي.
+// عندما تصبح القيمة متاحة أثناء تهيئة React، سيتم استبدال
+// الحالة الاحتياطية بمكون `<SearchBar>`.
+function SearchBarFallback() {
+  return <>placeholder</>
+}
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <Suspense fallback={<SearchBarFallback />}>
+          <SearchBar />
+        </Suspense>
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import { Suspense } from 'react'
+import SearchBar from './search-bar'
+
+// هذا المكون الممرر كحالة احتياطية لحد Suspense
+// سيتم تصييره مكان شريط البحث في HTML الأولي.
+// عندما تصبح القيمة متاحة أثناء تهيئة React، سيتم استبدال
+// الحالة الاحتياطية بمكون `<SearchBar>`.
+function SearchBarFallback() {
+  return <>placeholder</>
+}
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <Suspense fallback={<SearchBarFallback />}>
+          <SearchBar />
+        </Suspense>
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+## السلوك
+
+### التصيير الديناميكي (Dynamic Rendering)
+
+إذا تم [تصيير المسار بشكل ديناميكي](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)، فسيكون `useSearchParams` متاحًا على الخادم أثناء التصيير الأولي لمكون العميل.
+
+على سبيل المثال:
+
+```tsx filename="app/dashboard/search-bar.tsx" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // سيتم تسجيل هذا على الخادم أثناء التصيير الأولي
+  // وعلى العميل أثناء التنقلات اللاحقة.
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```jsx filename="app/dashboard/search-bar.js" switcher
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+export default function SearchBar() {
+  const searchParams = useSearchParams()
+
+  const search = searchParams.get('search')
+
+  // سيتم تسجيل هذا على الخادم أثناء التصيير الأولي
+  // وعلى العميل أثناء التنقلات اللاحقة.
+  console.log(search)
+
+  return <>Search: {search}</>
+}
+```
+
+```tsx filename="app/dashboard/page.tsx" switcher
+import SearchBar from './search-bar'
+
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <SearchBar />
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+```jsx filename="app/dashboard/page.js" switcher
+import SearchBar from './search-bar'
+
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return (
+    <>
+      <nav>
+        <SearchBar />
+      </nav>
+      <h1>Dashboard</h1>
+    </>
+  )
+}
+```
+
+> **معلومة مفيدة**: يمكن استخدام خيار تكوين مقطع المسار [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) بقيمة `force-dynamic` لإجبار التصيير الديناميكي.
+
+### مكونات الخادم (Server Components)
+
+#### الصفحات (Pages)
+
+للوصول إلى معلمات البحث في [الصفحات (Pages)](/docs/app/api-reference/file-conventions/page) (مكونات الخادم)، استخدم الخاصية [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional).
+
+#### التخطيطات (Layouts)
+
+على عكس الصفحات، [التخطيطات (Layouts)](/docs/app/api-reference/file-conventions/layout) (مكونات الخادم) **لا** تتلقى خاصية `searchParams`. هذا لأن التخطيط المشترك [لا يتم إعادة تصييره أثناء التنقل](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering) مما قد يؤدي إلى `searchParams` قديمة بين التنقلات. عرض [شرح مفصل](/docs/app/api-reference/file-conventions/layout#layouts-do-not-receive-searchparams).
+
+بدلاً من ذلك، استخدم خاصية الصفحة [`searchParams`](/docs/app/api-reference/file-conventions/page) أو خطاف [`useSearchParams`](/docs/app/api-reference/functions/use-search-params) في مكون عميل، والذي يتم إعادة تصييره على العميل بأحدث `searchParams`.
+
+## أمثلة
+
+### تحديث `searchParams`
+
+يمكنك استخدام [`useRouter`](/docs/app/api-reference/functions/use-router) أو [`Link`](/docs/app/api-reference/components/link) لتعيين `searchParams` جديدة. بعد تنفيذ التنقل، سيستلم [`page.js`](/docs/app/api-reference/file-conventions/page) الحالي [خاصية `searchParams` محدثة](/docs/app/api-reference/file-conventions/page#searchparams-optional).
+
+```tsx filename="app/example-client-component.tsx" switcher
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // الحصول على سلسلة searchParams جديدة عن طريق دمج
+  // searchParams الحالية مع زوج مفتاح/قيمة معين
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString())
+      params.set(name, value)
+
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  return (
+    <>
+      <p>Sort By</p>
+
+      {/* باستخدام useRouter */}
+      <button
+        onClick={() => {
+          // <pathname>?sort=asc
+          router.push(pathname + '?' + createQueryString('sort', 'asc'))
+        }}
+      >
+        ASC
+      </button>
+
+      {/* باستخدام <Link> */}
+      <Link
+        href={
+          // <pathname>?sort=desc
+          pathname + '?' + createQueryString('sort', 'desc')
+        }
+      >
+        DESC
+      </Link>
+    </>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+export default function ExampleClientComponent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // الحصول على سلسلة searchParams جديدة عن طريق دمج
+  // searchParams الحالية مع زوج مفتاح/قيمة معين
+  const createQueryString = useCallback(
+    (name, value) => {
+      const params = new URLSearchParams(searchParams)
+      params.set(name, value)
+
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  return (
+    <>
+      <p>Sort By</p>
+
+      {/* باستخدام useRouter */}
+      <button
+        onClick={() => {
+          // <pathname>?sort=asc
+          router.push(pathname + '?' + createQueryString('sort', 'asc'))
+        }}
+      >
+        ASC
+      </button>
+
+      {/* باستخدام <Link> */}
+      <Link
+        href={
+          // <pathname>?sort=desc
+          pathname + '?' + createQueryString('sort', 'desc')
+        }
+      >
+        DESC
+      </Link>
+    </>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                       |
+| --------- | ----------------------------- |
+| `v13.0.0` | تم تقديم `useSearchParams`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx
new file mode 100644
index 00000000..e2a122cf
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-selected-layout-segment.mdx
@@ -0,0 +1,174 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:30.467Z
+title: useSelectedLayoutSegment
+description: مرجع API لخطاف `useSelectedLayoutSegment`.
+---
+
+`useSelectedLayoutSegment` هو خطاف **مكون عميل (Client Component)** يسمح لك بقراءة مقطع المسار النشط **المستوى الواحد أسفل** التخطيط الذي يتم استدعاؤه منه.
+
+هذا مفاهيم لواجهة المستخدم للتنقل، مثل علامات التبويب داخل التخطيط الرئيسي التي تغير النمط بناءً على مقطع الابن النشط.
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segment = useSelectedLayoutSegment()
+
+  return <p>Active segment: {segment}</p>
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segment = useSelectedLayoutSegment()
+
+  return <p>Active segment: {segment}</p>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - بما أن `useSelectedLayoutSegment` هو خطاف [مكون عميل (Client Component)](/docs/app/building-your-application/rendering/client-components)، والتخطيطات هي [مكونات خادم (Server Components)](/docs/app/building-your-application/rendering/server-components) افتراضيًا، فإن `useSelectedLayoutSegment` عادةً ما يتم استدعاؤه عبر مكون عميل يتم استيراده إلى التخطيط.
+> - `useSelectedLayoutSegment` يُرجع فقط المقطع بمستوى واحد أسفل. لاسترجاع جميع المقاطع النشطة، راجع [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments)
+
+## المعاملات
+
+```tsx
+const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)
+```
+
+`useSelectedLayoutSegment` يقبل بشكل اختياري [`parallelRoutesKey`](/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments)، مما يسمح لك بقراءة مقطع المسار النشط داخل تلك الفتحة.
+
+## القيم المُرجعة
+
+`useSelectedLayoutSegment` يُرجع سلسلة نصية للمقطع النشط أو `null` إذا لم يوجد.
+
+على سبيل المثال، بالنظر إلى التخطيطات وعناوين URL أدناه، سيكون المقطع المُرجع:
+
+| التخطيط                    | عنوان URL المزور                  | المقطع المُرجع |
+| ------------------------- | ------------------------------ | ---------------- |
+| `app/layout.js`           | `/`                            | `null`           |
+| `app/layout.js`           | `/dashboard`                   | `'dashboard'`    |
+| `app/dashboard/layout.js` | `/dashboard`                   | `null`           |
+| `app/dashboard/layout.js` | `/dashboard/settings`          | `'settings'`     |
+| `app/dashboard/layout.js` | `/dashboard/analytics`         | `'analytics'`    |
+| `app/dashboard/layout.js` | `/dashboard/analytics/monthly` | `'analytics'`    |
+
+## أمثلة
+
+### إنشاء مكون رابط نشط
+
+يمكنك استخدام `useSelectedLayoutSegment` لإنشاء مكون رابط نشط يغير النمط بناءً على المقطع النشط. على سبيل المثال، قائمة مشاركات مميزة في الشريط الجانبي لمدونة:
+
+```tsx filename="app/blog/blog-nav-link.tsx" switcher
+'use client'
+
+import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+// هذا المكون *العميل* سيتم استيراده إلى تخطيط المدونة
+export default function BlogNavLink({
+  slug,
+  children,
+}: {
+  slug: string
+  children: React.ReactNode
+}) {
+  // التنقل إلى `/blog/hello-world` سيرجع 'hello-world'
+  // لمقطع التخطيط المحدد
+  const segment = useSelectedLayoutSegment()
+  const isActive = slug === segment
+
+  return (
+    <Link
+      href={`/blog/${slug}`}
+      // تغيير النمط بناءً على ما إذا كان الرابط نشطًا
+      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
+    >
+      {children}
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/blog/blog-nav-link.js" switcher
+'use client'
+
+import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+
+// هذا المكون *العميل* سيتم استيراده إلى تخطيط المدونة
+export default function BlogNavLink({ slug, children }) {
+  // التنقل إلى `/blog/hello-world` سيرجع 'hello-world'
+  // لمقطع التخطيط المحدد
+  const segment = useSelectedLayoutSegment()
+  const isActive = slug === segment
+
+  return (
+    <Link
+      href={`/blog/${slug}`}
+      // تغيير النمط بناءً على ما إذا كان الرابط نشطًا
+      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
+    >
+      {children}
+    </Link>
+  )
+}
+```
+
+```tsx filename="app/blog/layout.tsx" switcher
+// استيراد مكون العميل إلى تخطيط رئيسي (مكون خادم)
+import { BlogNavLink } from './blog-nav-link'
+import getFeaturedPosts from './get-featured-posts'
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const featuredPosts = await getFeaturedPosts()
+  return (
+    <div>
+      {featuredPosts.map((post) => (
+        <div key={post.id}>
+          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
+        </div>
+      ))}
+      <div>{children}</div>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/blog/layout.js" switcher
+// استيراد مكون العميل إلى تخطيط رئيسي (مكون خادم)
+import { BlogNavLink } from './blog-nav-link'
+import getFeaturedPosts from './get-featured-posts'
+
+export default async function Layout({ children }) {
+  const featuredPosts = await getFeaturedPosts()
+  return (
+    <div>
+      {featuredPosts.map((post) => (
+        <div key={post.id}>
+          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
+        </div>
+      ))}
+      <div>{children}</div>
+    </div>
+  )
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                |
+| --------- | -------------------------------------- |
+| `v13.0.0` | تم تقديم `useSelectedLayoutSegment`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-selected-layout-segments.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-selected-layout-segments.mdx
new file mode 100644
index 00000000..ba17c29e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/use-selected-layout-segments.mdx
@@ -0,0 +1,79 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:01.904Z
+title: useSelectedLayoutSegments
+description: مرجع API لخطاف useSelectedLayoutSegments.
+---
+
+`useSelectedLayoutSegments` هو خطاف لمكون العميل (Client Component) يتيح لك قراءة مقاطع المسار النشطة أسفل التخطيط (Layout) الذي يتم استدعاؤه منه.
+
+هذا مفاص لإنشاء واجهات المستخدم في التخطيطات الأم التي تحتاج إلى معرفة بالمقاطع الفرعية النشطة مثل مسارات التنقل (breadcrumbs).
+
+```tsx filename="app/example-client-component.tsx" switcher
+'use client'
+
+import { useSelectedLayoutSegments } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segments = useSelectedLayoutSegments()
+
+  return (
+    <ul>
+      {segments.map((segment, index) => (
+        <li key={index}>{segment}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+```jsx filename="app/example-client-component.js" switcher
+'use client'
+
+import { useSelectedLayoutSegments } from 'next/navigation'
+
+export default function ExampleClientComponent() {
+  const segments = useSelectedLayoutSegments()
+
+  return (
+    <ul>
+      {segments.map((segment, index) => (
+        <li key={index}>{segment}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - بما أن `useSelectedLayoutSegments` هو خطاف لمكون العميل (Client Component)، والتخطيطات هي مكونات خادم (Server Components) افتراضيًا، فإن `useSelectedLayoutSegments` يتم استدعاؤه عادةً عبر مكون عميل يتم استيراده إلى تخطيط.
+> - المقاطع المُرجعة تتضمن مجموعات المسارات (Route Groups)، والتي قد لا ترغب في تضمينها في واجهة المستخدم. يمكنك استخدام طريقة `filter()` للمصفوفة لإزالة العناصر التي تبدأ بقوس.
+
+## المعاملات
+
+```tsx
+const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)
+```
+
+يقبل `useSelectedLayoutSegments` اختياريًا مفتاح [`parallelRoutesKey`](/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments)، والذي يسمح لك بقراءة مقطع المسار النشط ضمن تلك الفتحة.
+
+## القيم المُرجعة
+
+يُرجع `useSelectedLayoutSegments` مصفوفة من السلاسل تحتوي على المقاطع النشطة بمستوى واحد أسفل التخطيط الذي تم استدعاء الخطاف منه. أو مصفوفة فارغة إذا لم تكن هناك مقاطع.
+
+على سبيل المثال، بالنظر إلى التخطيطات وعناوين URL أدناه، ستكون المقاطع المُرجعة:
+
+| التخطيط                    | عنوان URL المزور      | المقاطع المُرجعة           |
+| ------------------------- | --------------------- | --------------------------- |
+| `app/layout.js`           | `/`                   | `[]`                        |
+| `app/layout.js`           | `/dashboard`          | `['dashboard']`             |
+| `app/layout.js`           | `/dashboard/settings` | `['dashboard', 'settings']` |
+| `app/dashboard/layout.js` | `/dashboard`          | `[]`                        |
+| `app/dashboard/layout.js` | `/dashboard/settings` | `['settings']`              |
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                 |
+| --------- | --------------------------------------- |
+| `v13.0.0` | تم تقديم `useSelectedLayoutSegments`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/userAgent.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/userAgent.mdx
new file mode 100644
index 00000000..658238c4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/04-functions/userAgent.mdx
@@ -0,0 +1,73 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:56.302Z
+title: userAgent
+description: أداة `userAgent` تمد واجهة برمجة تطبيقات الويب (Web Request API) بخصائص وطرق إضافية للتفاعل مع كائن وكيل المستخدم من الطلب.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+أداة `userAgent` تمد [واجهة برمجة تطبيقات الويب (Web Request API)](https://developer.mozilla.org/docs/Web/API/Request) بخصائص وطرق إضافية للتفاعل مع كائن وكيل المستخدم من الطلب.
+
+```ts filename="middleware.ts" switcher
+import { NextRequest, NextResponse, userAgent } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const url = request.nextUrl
+  const { device } = userAgent(request)
+  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
+  url.searchParams.set('viewport', viewport)
+  return NextResponse.rewrite(url)
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse, userAgent } from 'next/server'
+
+export function middleware(request) {
+  const url = request.nextUrl
+  const { device } = userAgent(request)
+  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
+  url.searchParams.set('viewport', viewport)
+  return NextResponse.rewrite(url)
+}
+```
+
+## `isBot`
+
+قيمة منطقية تشير إلى ما إذا كان الطلب قادمًا من بوت معروف.
+
+## `browser`
+
+كائن يحتوي على معلومات عن المتصفح المستخدم في الطلب.
+
+- `name`: سلسلة نصية تمثل اسم المتصفح، أو `undefined` إذا لم يكن معرّفًا.
+- `version`: سلسلة نصية تمثل إصدار المتصفح، أو `undefined`.
+
+## `device`
+
+كائن يحتوي على معلومات عن الجهاز المستخدم في الطلب.
+
+- `model`: سلسلة نصية تمثل نموذج الجهاز، أو `undefined`.
+- `type`: سلسلة نصية تمثل نوع الجهاز، مثل `console`، `mobile`، `tablet`، `smarttv`، `wearable`، `embedded`، أو `undefined`.
+- `vendor`: سلسلة نصية تمثل الشركة المصنعة للجهاز، أو `undefined`.
+
+## `engine`
+
+كائن يحتوي على معلومات عن محرك المتصفح.
+
+- `name`: سلسلة نصية تمثل اسم المحرك. القيم المحتملة تشمل: `Amaya`، `Blink`، `EdgeHTML`، `Flow`، `Gecko`، `Goanna`، `iCab`، `KHTML`، `Links`، `Lynx`، `NetFront`، `NetSurf`، `Presto`، `Tasman`، `Trident`، `w3m`، `WebKit` أو `undefined`.
+- `version`: سلسلة نصية تمثل إصدار المحرك، أو `undefined`.
+
+## `os`
+
+كائن يحتوي على معلومات عن نظام التشغيل.
+
+- `name`: سلسلة نصية تمثل اسم نظام التشغيل، أو `undefined`.
+- `version`: سلسلة نصية تمثل إصدار نظام التشغيل، أو `undefined`.
+
+## `cpu`
+
+كائن يحتوي على معلومات عن بنية المعالج.
+
+- `architecture`: سلسلة نصية تمثل بنية المعالج. القيم المحتملة تشمل: `68k`، `amd64`، `arm`، `arm64`، `armhf`، `avr`، `ia32`، `ia64`، `irix`، `irix64`، `mips`، `mips64`، `pa-risc`، `ppc`، `sparc`، `sparc64` أو `undefined`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/appDir.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/appDir.mdx
new file mode 100644
index 00000000..91c40619
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/appDir.mdx
@@ -0,0 +1,12 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:31.749Z
+title: دليل appDir
+description: تمكين موجه التطبيق (App Router) لاستخدام التخطيطات (layouts)، البث (streaming)، والمزيد.
+---
+
+> **من الجيد معرفة**: هذا الخيار **لم يعد** مطلوبًا بدءًا من Next.js 13.4. حيث أصبح موجه التطبيق (App Router) مستقرًا الآن.
+
+يُمكّن موجه التطبيق ([دليل `app`](/docs/app/building-your-application/routing)) من دعم [التخطيطات (layouts)](/docs/app/building-your-application/routing/pages-and-layouts)، [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components)، [البث (streaming)](/docs/app/building-your-application/routing/loading-ui-and-streaming)، و[جلب البيانات المترافق (colocated data fetching)](/docs/app/building-your-application/data-fetching).
+
+سيؤدي استخدام دليل `app` إلى تمكين [وضع React الصارم (React Strict Mode)](https://react.dev/reference/react/StrictMode) تلقائيًا. تعلم كيفية [تبني دليل `app` تدريجيًا](/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx
new file mode 100644
index 00000000..84ee069d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/assetPrefix.mdx
@@ -0,0 +1,77 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:00.278Z
+title: assetPrefix
+description: تعلم كيفية استخدام خيار التكوين assetPrefix لضبط شبكة توصيل المحتوى (CDN) الخاصة بك.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<AppOnly>
+
+> **ملاحظة**: [النشر على Vercel](/docs/app/building-your-application/deploying) يقوم تلقائيًا بضبط شبكة توصيل محتوى (CDN) عالمية لمشروع Next.js الخاص بك.
+> لا تحتاج إلى إعداد بادئة الأصول (Asset Prefix) يدويًا.
+
+</AppOnly>
+
+<PagesOnly>
+
+> **ملاحظة**: [النشر على Vercel](/docs/pages/building-your-application/deploying) يقوم تلقائيًا بضبط شبكة توصيل محتوى (CDN) عالمية لمشروع Next.js الخاص بك.
+> لا تحتاج إلى إعداد بادئة الأصول (Asset Prefix) يدويًا.
+
+</PagesOnly>
+
+> **معلومة مفيدة**: Next.js 9.5+ أضافت دعمًا لـ [مسار الأساس (Base Path)](/docs/app/api-reference/next-config-js/basePath) القابل للتخصيص، والذي يكون أكثر ملاءمة لاستضافة تطبيقك على مسار فرعي مثل `/docs`.
+> لا ننصح باستخدام بادئة أصول مخصصة لهذا الغرض.
+
+## إعداد شبكة توصيل المحتوى (CDN)
+
+لإعداد [شبكة توصيل محتوى (CDN)](https://en.wikipedia.org/wiki/Content_delivery_network)، يمكنك تعيين بادئة الأصول (asset prefix) وضبط أصل CDN ليتحول إلى النطاق الذي يستضيف Next.js.
+
+افتح ملف `next.config.mjs` وأضف تكوين `assetPrefix` بناءً على [المرحلة](/docs/app/api-reference/next-config-js#async-configuration):
+
+```js filename="next.config.mjs"
+// @ts-check
+import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'
+
+export default (phase) => {
+  const isDev = phase === PHASE_DEVELOPMENT_SERVER
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    assetPrefix: isDev ? undefined : 'https://cdn.mydomain.com',
+  }
+  return nextConfig
+}
+```
+
+سيستخدم Next.js تلقائيًا بادئة الأصول الخاصة بك لملفات JavaScript و CSS التي يتم تحميلها من المسار `/_next/` (مجلد `.next/static/`). على سبيل المثال، مع التكوين أعلاه، طلب جزء JS التالي:
+
+```
+/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
+```
+
+سيصبح بدلاً من ذلك:
+
+```
+https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
+```
+
+سيعتمد التكوين الدقيق لرفع ملفاتك إلى CDN معين على CDN الذي تختاره. المجلد الوحيد الذي تحتاج إلى استضافته على CDN الخاص بك هو محتويات `.next/static/`، والتي يجب رفعها كـ `_next/static/` كما يشير عنوان URL أعلاه. **لا ترفع بقية مجلد `.next/`**، حيث لا يجب تعريض كود الخادم والتكوينات الأخرى للعامة.
+
+بينما تغطي `assetPrefix` طلبات `_next/static`، إلا أنها لا تؤثر على المسارات التالية:
+
+<AppOnly>
+
+- الملفات في مجلد [public](/docs/app/building-your-application/optimizing/static-assets)؛ إذا كنت تريد تقديم هذه الأصول عبر CDN، يجب عليك إضافة البادئة بنفسك
+
+</AppOnly>
+
+<PagesOnly>
+
+- الملفات في مجلد [public](/docs/pages/building-your-application/optimizing/static-assets)؛ إذا كنت تريد تقديم هذه الأصول عبر CDN، يجب عليك إضافة البادئة بنفسك
+- طلبات `/_next/data/` لصفحات `getServerSideProps`. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لأنها ليست ثابتة.
+- طلبات `/_next/data/` لصفحات `getStaticProps`. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لدعم [التوليد الثابت التدريجي (Incremental Static Generation)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)، حتى لو لم تكن تستخدمه (لضمان الاتساق).
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/basePath.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/basePath.mdx
new file mode 100644
index 00000000..450d862f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/basePath.mdx
@@ -0,0 +1,81 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:38.442Z
+title: basePath
+description: استخدم `basePath` لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه داخل مكون. */}
+
+لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق، يمكنك استخدام خيار التكوين `basePath`.
+
+`basePath` يسمح لك بتعيين بادئة مسار للتطبيق. على سبيل المثال، لاستخدام `/docs` بدلاً من `''` (سلسلة فارغة، القيمة الافتراضية)، افتح ملف `next.config.js` وأضف تكوين `basePath`:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+}
+```
+
+> **من الجيد معرفة**: يجب تعيين هذه القيمة أثناء وقت البناء ولا يمكن تغييرها دون إعادة البناء لأن القيمة مضمنة في حزم جانب العميل.
+
+### الروابط
+
+عند الربط بصفحات أخرى باستخدام `next/link` و `next/router`، سيتم تطبيق `basePath` تلقائيًا.
+
+على سبيل المثال، استخدام `/about` سيصبح تلقائيًا `/docs/about` عندما يتم تعيين `basePath` إلى `/docs`.
+
+```js
+export default function HomePage() {
+  return (
+    <>
+      <Link href="/about">صفحة حول</Link>
+    </>
+  )
+}
+```
+
+إخراج html:
+
+```html
+<a href="/docs/about">صفحة حول</a>
+```
+
+هذا يضمن أنك لست بحاجة لتغيير جميع الروابط في تطبيقك عند تغيير قيمة `basePath`.
+
+### الصور
+
+<AppOnly>
+
+عند استخدام مكون [`next/image`](/docs/app/api-reference/components/image)، ستحتاج إلى إضافة `basePath` قبل `src`.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استخدام مكون [`next/image`](/docs/pages/api-reference/components/image)، ستحتاج إلى إضافة `basePath` قبل `src`.
+
+</PagesOnly>
+
+على سبيل المثال، استخدام `/docs/me.png` سيخدم صورتك بشكل صحيح عندما يتم تعيين `basePath` إلى `/docs`.
+
+```jsx
+import Image from 'next/image'
+
+function Home() {
+  return (
+    <>
+      <h1>صفحتي الرئيسية</h1>
+      <Image
+        src="/docs/me.png"
+        alt="صورة المؤلف"
+        width={500}
+        height={500}
+      />
+      <p>مرحبًا بكم في صفحتي الرئيسية!</p>
+    </>
+  )
+}
+
+export default Home
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/compress.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/compress.mdx
new file mode 100644
index 00000000..8d86b397
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/compress.mdx
@@ -0,0 +1,37 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:28.401Z
+title: ضغط
+description: يوفر Next.js ضغط gzip لضغط المحتوى المعروض والملفات الثابتة، ويعمل فقط مع هدف الخادم. تعلم المزيد عنه هنا.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+بشكل افتراضي، يستخدم Next.js `gzip` لضغط المحتوى المعروض والملفات الثابتة عند استخدام `next start` أو خادم مخصص. هذه تحسين للتطبيقات التي لا تحتوي على ضغط مُهيأ. إذا كان الضغط _مُهيأ بالفعل_ في تطبيقك عبر خادم مخصص، فلن يقوم Next.js بإضافة الضغط.
+
+> **من الجيد معرفة:**
+>
+> - عند استضافة تطبيقك على [Vercel](https://vercel.com/docs/edge-network/compression)، يستخدم الضغط `brotli` أولًا، ثم `gzip`.
+> - يمكنك التحقق مما إذا كان الضغط مفعلًا وأي خوارزمية مستخدمة من خلال النظر إلى رؤوس [`Accept-Encoding`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding) (خيارات مقبولة من المتصفح) و [`Content-Encoding`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding) (المستخدمة حاليًا) في الاستجابة.
+
+## تعطيل الضغط
+
+لتعطيل **الضغط**، عيّن خيار `compress` في الإعدادات إلى `false`:
+
+```js filename="next.config.js"
+module.exports = {
+  compress: false,
+}
+```
+
+لا نوصي بتعطيل الضغط إلا إذا كان لديك ضغط مُهيأ على خادمك، حيث يقلل الضغط من استخدام النطاق الترددي ويحسن أداء تطبيقك.
+
+## تغيير خوارزمية الضغط
+
+لتغيير خوارزمية الضغط الخاصة بك، ستحتاج إلى تهيئة خادمك المخصص وتعيين خيار `compress` إلى `false` في ملف `next.config.js`.
+
+على سبيل المثال، إذا كنت تستخدم [nginx](https://www.nginx.com/) وتريد التبديل إلى `brotli`، عيّن خيار `compress` إلى `false` للسماح لـ nginx بالتعامل مع الضغط.
+
+> **من الجيد معرفة:**
+>
+> - بالنسبة لتطبيقات Next.js على Vercel، يتم التعامل مع الضغط بواسطة شبكة Vercel's Edge وليس Next.js. راجع [توثيق Vercel](https://vercel.com/docs/edge-network/compression) لمزيد من المعلومات.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/crossOrigin.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/crossOrigin.mdx
new file mode 100644
index 00000000..f49b1c27
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/crossOrigin.mdx
@@ -0,0 +1,21 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:13.140Z
+title: crossOrigin
+description: استخدم خيار `crossOrigin` لإضافة وسم crossOrigin على وسوم `script` التي يتم إنشاؤها بواسطة `next/script`.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+استخدم خيار `crossOrigin` لإضافة [سمة `crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) في جميع وسوم `<script>` التي يتم إنشاؤها بواسطة <AppOnly>[مكون `next/script`](/docs/app/building-your-application/optimizing/scripts)</AppOnly> <PagesOnly>[مكون `next/script`](/docs/pages/building-your-application/optimizing/scripts) و[مكونات `next/head`](/docs/pages/api-reference/components/head)</PagesOnly>، وتحديد كيفية معالجة طلبات cross-origin.
+
+```js filename="next.config.js"
+module.exports = {
+  crossOrigin: 'anonymous',
+}
+```
+
+## الخيارات
+
+- `'anonymous'`: يضيف سمة [`crossOrigin="anonymous"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#anonymous).
+- `'use-credentials'`: يضيف سمة [`crossOrigin="use-credentials"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#use-credentials).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/devIndicators.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/devIndicators.mdx
new file mode 100644
index 00000000..781ccdd0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/devIndicators.mdx
@@ -0,0 +1,56 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:14.319Z
+title: مؤشرات التطوير (devIndicators)
+description: تتضمن الصفحات المُحسنة مؤشرًا لإعلامك إذا كانت تُحسن بشكل ثابت. يمكنك إلغاء تفعيله هنا.
+---
+
+{/* المحتوى التالي مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<AppOnly>
+
+عند تعديل الكود الخاص بك، وعندما يقوم Next.js بتحويل التطبيق، يظهر مؤشر التحويل في الزاوية اليمنى السفلية للصفحة.
+
+> **من الجيد معرفة**: هذا المؤشر موجود فقط في وضع التطوير ولن يظهر عند بناء وتشغيل التطبيق في وضع الإنتاج.
+
+في بعض الحالات قد يكون هذا المؤشر في موضع غير مناسب في صفحتك، على سبيل المثال، عند تعارضه مع مشغل الدردشة. لتغيير موضعه، افتح ملف `next.config.js` وقم بتعيين `buildActivityPosition` في كائن `devIndicators` إلى `bottom-right` (الافتراضي)، `bottom-left`، `top-right` أو `top-left`:
+
+```js filename="next.config.js"
+module.exports = {
+  devIndicators: {
+    buildActivityPosition: 'bottom-right',
+  },
+}
+```
+
+في بعض الحالات قد لا يكون هذا المؤشر مفيدًا لك. لإزالته، افتح ملف `next.config.js` وقم بتعطيل إعداد `buildActivity` في كائن `devIndicators`:
+
+```js filename="next.config.js"
+module.exports = {
+  devIndicators: {
+    buildActivity: false,
+  },
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+> **من الجيد معرفة**: تمت إزالة هذا المؤشر في إصدار Next.js 10.0.1. ننصح بالترقية إلى أحدث إصدار من Next.js.
+
+عندما تكون الصفحة مؤهلة لـ[التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization) نعرض مؤشرًا لإعلامك بذلك.
+
+هذا مفيد لأن التحسين الثابت التلقائي يمكن أن يكون مفيدًا جدًا، ومعرفة ما إذا كانت الصفحة مؤهلة لذلك أثناء التطوير يمكن أن يكون مفيدًا.
+
+في بعض الحالات قد لا يكون هذا المؤشر مفيدًا، مثل عند العمل على تطبيقات إلكترون. لإزالته افتح ملف `next.config.js` وقم بتعطيل إعداد `autoPrerender` في كائن `devIndicators`:
+
+```js filename="next.config.js"
+module.exports = {
+  devIndicators: {
+    autoPrerender: false,
+  },
+}
+```
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/distDir.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/distDir.mdx
new file mode 100644
index 00000000..4d748fe5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/distDir.mdx
@@ -0,0 +1,22 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:55.000Z
+title: distDir
+description: تعيين دليل بناء مخصص للاستخدام بدلاً من الدليل الافتراضي .next.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يمكنك تحديد اسم لاستخدامه كدليل بناء مخصص بدلاً من `.next`.
+
+افتح ملف `next.config.js` وأضف إعداد `distDir`:
+
+```js filename="next.config.js"
+module.exports = {
+  distDir: 'build',
+}
+```
+
+الآن عند تشغيل `next build`، سيقوم Next.js باستخدام `build` بدلاً من المجلد الافتراضي `.next`.
+
+> **يجب ألا** يخرج `distDir` عن دليل مشروعك. على سبيل المثال، `../build` يعتبر مسارًا **غير صالح**.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/env.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/env.mdx
new file mode 100644
index 00000000..d0cc7c41
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/env.mdx
@@ -0,0 +1,66 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:07.455Z
+title: متغيرات البيئة (env)
+description: تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js أثناء وقت البناء.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+<AppOnly>
+
+> منذ إصدار [Next.js 9.4](https://nextjs.org/blog/next-9-4) أصبح لدينا تجربة أكثر سهولة وبديهية [لإضافة متغيرات البيئة](/docs/app/building-your-application/configuring/environment-variables). جربها الآن!
+
+</AppOnly>
+
+<PagesOnly>
+
+> منذ إصدار [Next.js 9.4](https://nextjs.org/blog/next-9-4) أصبح لدينا تجربة أكثر سهولة وبديهية [لإضافة متغيرات البيئة](/docs/pages/building-your-application/configuring/environment-variables). جربها الآن!
+
+</PagesOnly>
+
+<AppOnly>
+
+> **معلومة مفيدة**: متغيرات البيئة المحددة بهذه الطريقة سيتم **دائمًا** تضمينها في حزمة JavaScript، إضافة البادئة `NEXT_PUBLIC_` أمام اسم متغير البيئة يكون له تأثير فقط عند تحديدها [من خلال البيئة أو ملفات .env](/docs/app/building-your-application/configuring/environment-variables).
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**: متغيرات البيئة المحددة بهذه الطريقة سيتم **دائمًا** تضمينها في حزمة JavaScript، إضافة البادئة `NEXT_PUBLIC_` أمام اسم متغير البيئة يكون له تأثير فقط عند تحديدها [من خلال البيئة أو ملفات .env](/docs/pages/building-your-application/configuring/environment-variables).
+
+</PagesOnly>
+
+لإضافة متغيرات البيئة إلى حزمة JavaScript، افتح ملف `next.config.js` وأضف تكوين `env`:
+
+```js filename="next.config.js"
+module.exports = {
+  env: {
+    customKey: 'my-value',
+  },
+}
+```
+
+الآن يمكنك الوصول إلى `process.env.customKey` في الكود الخاص بك. على سبيل المثال:
+
+```jsx
+function Page() {
+  return <h1>قيمة customKey هي: {process.env.customKey}</h1>
+}
+
+export default Page
+```
+
+سيقوم Next.js باستبدال `process.env.customKey` بـ `'my-value'` أثناء وقت البناء. محاولة تفكيك متغيرات `process.env` لن تعمل بسبب طبيعة [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) في webpack.
+
+على سبيل المثال، السطر التالي:
+
+```jsx
+return <h1>قيمة customKey هي: {process.env.customKey}</h1>
+```
+
+سينتهي به المطاف إلى:
+
+```jsx
+return <h1>قيمة customKey هي: {'my-value'}</h1>
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/eslint.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/eslint.mdx
new file mode 100644
index 00000000..646dbdb0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/eslint.mdx
@@ -0,0 +1,24 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:53.437Z
+title: eslint
+description: يقوم Next.js بالإبلاغ عن أخطاء وتحذيرات ESLint أثناء عمليات البناء بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+عند اكتشاف ESLint في مشروعك، يفشل Next.js في **بناء الإنتاج** (`next build`) عند وجود أخطاء.
+
+إذا كنت ترغب في أن يقوم Next.js بإنتاج كود الإنتاج حتى عندما يحتوي تطبيقك على أخطاء ESLint، يمكنك تعطيل خطوة الفحص المضمنة تمامًا. لا يُنصح بهذا إلا إذا كنت قد قمت بالفعل بتكوين ESLint ليعمل في جزء منفصل من سير العمل الخاص بك (على سبيل المثال، في CI أو خطاف ما قبل الالتزام).
+
+افتح `next.config.js` وقم بتمكين خيار `ignoreDuringBuilds` في تكوين `eslint`:
+
+```js filename="next.config.js"
+module.exports = {
+  eslint: {
+    // تحذير: هذا يسمح لعمليات بناء الإنتاج بالإكمال بنجاح حتى إذا
+    // كان مشروعك يحتوي على أخطاء ESLint.
+    ignoreDuringBuilds: true,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/exportPathMap.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/exportPathMap.mdx
new file mode 100644
index 00000000..5b73eb39
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/exportPathMap.mdx
@@ -0,0 +1,96 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:26.810Z
+title: exportPathMap (مهمل)
+nav_title: exportPathMap
+description: تخصيص الصفحات التي سيتم تصديرها كملفات HTML عند استخدام `next export`.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */}
+
+> هذه الميزة حصرية لـ `next export` وهي حالياً **مهملة** لصالح `getStaticPaths` مع `pages` أو `generateStaticParams` مع `app`.
+
+<details>
+  <summary>أمثلة</summary>
+  
+- [التصدير الثابت](https://github.com/vercel/next.js/tree/canary/examples/with-static-export)
+
+</details>
+
+`exportPathMap` تسمح لك بتحديد تعيين مسارات الطلبات إلى وجهات الصفحات، لاستخدامها أثناء التصدير. المسارات المعرفة في `exportPathMap` ستكون متاحة أيضاً عند استخدام [`next dev`](/docs/app/api-reference/cli/next#next-dev-options).
+
+لنبدأ بمثال، لإنشاء `exportPathMap` مخصص لتطبيق به الصفحات التالية:
+
+- `pages/index.js`
+- `pages/about.js`
+- `pages/post.js`
+
+افتح `next.config.js` وأضف تكوين `exportPathMap` التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  exportPathMap: async function (
+    defaultPathMap,
+    { dev, dir, outDir, distDir, buildId }
+  ) {
+    return {
+      '/': { page: '/' },
+      '/about': { page: '/about' },
+      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
+      '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
+      '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
+    }
+  },
+}
+```
+
+> **من الجيد معرفة**: حقل `query` في `exportPathMap` لا يمكن استخدامه مع [الصفحات المحسنة ثابتاً تلقائياً](/docs/pages/building-your-application/rendering/automatic-static-optimization) أو صفحات [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) لأنها تُصدر إلى ملفات HTML أثناء وقت البناء ولا يمكن توفير معلومات استعلام إضافية أثناء `next export`.
+
+سيتم بعد ذلك تصدير الصفحات كملفات HTML، على سبيل المثال، `/about` ستصبح `/about.html`.
+
+`exportPathMap` هي دالة `غير متزامنة` تستقبل وسيطين: الأول هو `defaultPathMap`، وهو الخريطة الافتراضية التي يستخدمها Next.js. الوسيط الثاني هو كائن يحتوي على:
+
+- `dev` - `true` عندما يتم استدعاء `exportPathMap` في وضع التطوير. `false` عند تشغيل `next export`. في التطوير، `exportPathMap` يستخدم لتعريف المسارات.
+- `dir` - المسار المطلق لمجلد المشروع
+- `outDir` - المسار المطلق لمجلد `out/` [قابل للتخصيص باستخدام `-o`](#customizing-the-output-directory)). عندما يكون `dev` هو `true` فإن قيمة `outDir` ستكون `null`.
+- `distDir` - المسار المطلق لمجلد `.next/` (قابل للتخصيص باستخدام تكوين [`distDir`](/docs/pages/api-reference/next-config-js/distDir))
+- `buildId` - معرف البناء المُنشأ
+
+الكائن المُعاد هو خريطة للصفحات حيث يكون `المفتاح` هو `مسار الصفحة` و `القيمة` هي كائن يقبل الحقول التالية:
+
+- `page`: `String` - الصفحة داخل مجلد `pages` التي سيتم عرضها
+- `query`: `Object` - كائن `الاستعلام` الذي يتم تمريره إلى `getInitialProps` عند التصيير المسبق. القيمة الافتراضية هي `{}`
+
+> يمكن أن يكون `مسار الصفحة` المُصدر أيضاً اسم ملف (على سبيل المثال `/readme.md`)، ولكن قد تحتاج إلى تعيين رأس `Content-Type` إلى `text/html` عند تقديم محتواه إذا كان مختلفاً عن `.html`.
+
+## إضافة شرطة مائلة في النهاية
+
+من الممكن تكوين Next.js لتصدير الصفحات كملفات `index.html` وتطلب شرطة مائلة في النهاية، `/about` تصبح `/about/index.html` ويمكن الوصول إليها عبر `/about/`. كان هذا السلوك الافتراضي قبل Next.js 9.
+
+للرجوع إلى هذا السلوك وإضافة شرطة مائلة في النهاية، افتح `next.config.js` وقم بتمكين تكوين `trailingSlash`:
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+}
+```
+
+## تخصيص مجلد الإخراج
+
+<AppOnly>
+
+[`next export`](/docs/app/building-your-application/deploying/static-exports) سيستخدم `out` كمجلد إخراج افتراضي، يمكنك تخصيص هذا باستخدام وسيط `-o`، كما يلي:
+
+</AppOnly>
+
+<PagesOnly>
+
+[`next export`](/docs/pages/building-your-application/deploying/static-exports) سيستخدم `out` كمجلد إخراج افتراضي، يمكنك تخصيص هذا باستخدام وسيط `-o`، كما يلي:
+
+</PagesOnly>
+
+```bash filename="Terminal"
+next export -o outdir
+```
+
+> **تحذير**: استخدام `exportPathMap` مهمل ويتم تجاوزه بواسطة `getStaticPaths` داخل `pages`. لا ننصح باستخدامهما معاً.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/generateBuildId.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/generateBuildId.mdx
new file mode 100644
index 00000000..dbbca225
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/generateBuildId.mdx
@@ -0,0 +1,21 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:43.647Z
+title: generateBuildId
+description: تكوين معرف البناء الذي يُستخدم لتحديد البناء الحالي الذي يتم تقديم تطبيقك من خلاله.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+يقوم Next.js بإنشاء معرف أثناء عملية `next build` لتحديد أي إصدار من تطبيقك يتم تقديمه. يجب استخدام نفس البناء وتشغيله عبر حاويات متعددة.
+
+إذا كنت تقوم بإعادة البناء لكل مرحلة من بيئتك، فستحتاج إلى إنشاء معرف بناء متسق لاستخدامه بين الحاويات. استخدم أمر `generateBuildId` في ملف `next.config.js`:
+
+```jsx filename="next.config.js"
+module.exports = {
+  generateBuildId: async () => {
+    // يمكن أن يكون هذا أي شيء، مثل استخدام آخر هاش من git
+    return process.env.GIT_HASH
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/generateEtags.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/generateEtags.mdx
new file mode 100644
index 00000000..7e699093
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/generateEtags.mdx
@@ -0,0 +1,18 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:29.909Z
+title: generateEtags
+description: يقوم Next.js بإنشاء علامات etag افتراضيًا لكل صفحة. تعرف على المزيد حول كيفية تعطيل إنشاء etag هنا.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يقوم Next.js بإنشاء [علامات etag](https://en.wikipedia.org/wiki/HTTP_ETag) افتراضيًا لكل صفحة. قد ترغب في تعطيل إنشاء etag لصفحات HTML اعتمادًا على استراتيجية التخزين المؤقت الخاصة بك.
+
+افتح ملف `next.config.js` وعطّل خيار `generateEtags`:
+
+```js filename="next.config.js"
+module.exports = {
+  generateEtags: false,
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/headers.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/headers.mdx
new file mode 100644
index 00000000..a9697139
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/headers.mdx
@@ -0,0 +1,544 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:13.156Z
+title: الرؤوس (headers)
+description: إضافة رؤوس HTTP مخصصة لتطبيق Next.js الخاص بك.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+تسمح لك الرؤوس بتعيين رؤوس HTTP مخصصة على الاستجابة لطلب وارد على مسار معين.
+
+لتعيين رؤوس HTTP مخصصة، يمكنك استخدام مفتاح `headers` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/about',
+        headers: [
+          {
+            key: 'x-custom-header',
+            value: 'قيمة الرأس المخصصة',
+          },
+          {
+            key: 'x-another-custom-header',
+            value: 'قيمة الرأس المخصصة الأخرى',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+`headers` هي دالة غير متزامنة تتوقع إرجاع مصفوفة تحتوي على كائنات ذات خصائص `source` و `headers`:
+
+- `source`: نمط مسار الطلب الوارد.
+- `headers`: مصفوفة من كائنات رأس الاستجابة، مع خصائص `key` و `value`.
+- `basePath`: `false` أو `undefined` - إذا كانت false فلن يتم تضمين basePath عند المطابقة، يمكن استخدامه لإعادة التوجيه الخارجية فقط.
+- `locale`: `false` أو `undefined` - ما إذا كان يجب عدم تضمين اللغة عند المطابقة.
+- `has`: مصفوفة من [كائنات has](#header-cookie-and-query-matching) مع خصائص `type` و `key` و `value`.
+- `missing`: مصفوفة من [كائنات missing](#header-cookie-and-query-matching) مع خصائص `type` و `key` و `value`.
+
+يتم التحقق من الرؤوس قبل نظام الملفات الذي يتضمن الصفحات وملفات `/public`.
+
+## سلوك تجاوز الرؤوس
+
+إذا تطابق رأسان على نفس المسار وقاما بتعيين نفس مفتاح الرأس، فإن آخر مفتاح رأس سيتجاوز الأول. باستخدام الرؤوس أدناه، سيؤدي المسار `/hello` إلى أن يكون الرأس `x-hello` بقيمة `world` لأن آخر قيمة رأس تم تعيينها هي `world`.
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'there',
+          },
+        ],
+      },
+      {
+        source: '/hello',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## مطابقة المسار
+
+يتم السماح بمطابقة المسارات، على سبيل المثال `/blog/:slug` ستطابق `/blog/hello-world` (بدون مسارات متداخلة):
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/blog/:slug',
+        headers: [
+          {
+            key: 'x-slug',
+            value: ':slug', // يمكن استخدام المعلمات المتطابقة في القيمة
+          },
+          {
+            key: 'x-slug-:slug', // يمكن استخدام المعلمات المتطابقة في المفتاح
+            value: 'قيمة الرأس المخصصة الأخرى',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Wildcard
+
+لمطابقة مسار wildcard، يمكنك استخدام `*` بعد معلمة، على سبيل المثال `/blog/:slug*` ستطابق `/blog/a/b/c/d/hello-world`:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/blog/:slug*',
+        headers: [
+          {
+            key: 'x-slug',
+            value: ':slug*', // يمكن استخدام المعلمات المتطابقة في القيمة
+          },
+          {
+            key: 'x-slug-:slug*', // يمكن استخدام المعلمات المتطابقة في المفتاح
+            value: 'قيمة الرأس المخصصة الأخرى',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Regex
+
+لمطابقة مسار regex، يمكنك لف regex بين قوسين بعد معلمة، على سبيل المثال `/blog/:slug(\\d{1,})` ستطابق `/blog/123` ولكن ليس `/blog/abc`:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/blog/:post(\\d{1,})',
+        headers: [
+          {
+            key: 'x-post',
+            value: ':post',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+الأحرف التالية `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` تستخدم لمطابقة مسار regex، لذا عند استخدامها في `source` كقيم غير خاصة يجب الهروب منها بإضافة `\\` قبلها:
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      {
+        // هذا سيطابق `/english(default)/something` عند الطلب
+        source: '/english\\(default\\)/:slug',
+        headers: [
+          {
+            key: 'x-header',
+            value: 'value',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## مطابقة الرأس، الكوكي، والاستعلام
+
+لتطبيق رأس فقط عندما تتطابق قيم الرأس أو الكوكي أو الاستعلام مع حقل `has` أو لا تتطابق مع حقل `missing`، يمكن استخدام `has` و `missing`. يجب أن يتطابق كل من `source` وجميع عناصر `has` وألا تتطابق جميع عناصر `missing` لتطبيق الرأس.
+
+يمكن أن تحتوي عناصر `has` و `missing` على الحقول التالية:
+
+- `type`: `String` - يجب أن يكون إما `header` أو `cookie` أو `host` أو `query`.
+- `key`: `String` - المفتاح من النوع المحدد للمطابقة ضده.
+- `value`: `String` أو `undefined` - القيمة للتحقق منها، إذا كانت undefined فإن أي قيمة ستطابق. يمكن استخدام سلسلة تشبه regex لالتقاط جزء معين من القيمة، على سبيل المثال إذا تم استخدام القيمة `first-(?<paramName>.*)` لـ `first-second` فإن `second` ستكون قابلة للاستخدام في الوجهة مع `:paramName`.
+
+```js filename="next.config.js"
+module.exports = {
+  async headers() {
+    return [
+      // إذا كان الرأس `x-add-header` موجودًا،
+      // سيتم تطبيق الرأس `x-another-header`
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-add-header',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: 'hello',
+          },
+        ],
+      },
+      // إذا كان الرأس `x-no-header` غير موجود،
+      // سيتم تطبيق الرأس `x-another-header`
+      {
+        source: '/:path*',
+        missing: [
+          {
+            type: 'header',
+            key: 'x-no-header',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: 'hello',
+          },
+        ],
+      },
+      // إذا تمت مطابقة المصدر والاستعلام والكوكي،
+      // سيتم تطبيق الرأس `x-authorized`
+      {
+        source: '/specific/:path*',
+        has: [
+          {
+            type: 'query',
+            key: 'page',
+            // لن تكون قيمة الصفحة متاحة في
+            // مفاتيح/قيم الرأس حيث يتم توفير القيمة و
+            // لا تستخدم مجموعة التقاط مسماة مثل (?<page>home)
+            value: 'home',
+          },
+          {
+            type: 'cookie',
+            key: 'authorized',
+            value: 'true',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-authorized',
+            value: ':authorized',
+          },
+        ],
+      },
+      // إذا كان الرأس `x-authorized` موجودًا و
+      // يحتوي على قيمة مطابقة، سيتم تطبيق `x-another-header`
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-authorized',
+            value: '(?<authorized>yes|true)',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: ':authorized',
+          },
+        ],
+      },
+      // إذا كان المضيف هو `example.com`،
+      // سيتم تطبيق هذا الرأس
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'host',
+            value: 'example.com',
+          },
+        ],
+        headers: [
+          {
+            key: 'x-another-header',
+            value: ':authorized',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## الرؤوس مع دعم basePath
+
+عند استخدام [دعم `basePath`](/docs/app/api-reference/next-config-js/basePath) مع الرؤوس، يتم تلقائيًا إضافة بادئة `basePath` إلى كل `source` ما لم تقم بإضافة `basePath: false` إلى الرأس:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+
+  async headers() {
+    return [
+      {
+        source: '/with-basePath', // تصبح /docs/with-basePath
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        source: '/without-basePath', // لا يتم تعديلها حيث تم تعيين basePath: false
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+        basePath: false,
+      },
+    ]
+  },
+}
+```
+
+## الرؤوس مع دعم i18n
+
+<AppOnly>
+
+عند استخدام [دعم `i18n`](/docs/app/building-your-application/routing/internationalization) مع الرؤوس، يتم تلقائيًا إضافة بادئة إلى كل `source` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى الرأس. إذا تم استخدام `locale: false` فيجب إضافة بادئة اللغة إلى `source` لمطابقتها بشكل صحيح.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استخدام [دعم `i18n`](/docs/pages/building-your-application/routing/internationalization) مع الرؤوس، يتم تلقائيًا إضافة بادئة إلى كل `source` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى الرأس. إذا تم استخدام `locale: false` فيجب إضافة بادئة اللغة إلى `source` لمطابقتها بشكل صحيح.
+
+</PagesOnly>
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async headers() {
+    return [
+      {
+        source: '/with-locale', // يتعامل تلقائيًا مع جميع اللغات
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        // لا يتعامل مع اللغات تلقائيًا حيث تم تعيين locale: false
+        source: '/nl/with-locale-manual',
+        locale: false,
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        // هذا يطابق '/' حيث أن `en` هي اللغة الافتراضية
+        source: '/en',
+        locale: false,
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        // يتم تحويل هذا إلى /(en|fr|de)/(.*) لذا لن يطابق
+        // المسارات الأساسية `/` أو `/fr` مثل /:path*
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
+## التحكم في التخزين المؤقت (Cache-Control)
+
+لا يمكنك تعيين رؤوس `Cache-Control` في `next.config.js` للصفحات أو الأصول، حيث سيتم تجاوز هذه الرؤوس في الإنتاج لضمان تخزين الاستجابات والأصول الثابتة بشكل فعال.
+
+<AppOnly>
+
+تعرف المزيد عن [التخزين المؤقت](/docs/app/building-your-application/caching) مع موجه التطبيق.
+
+</AppOnly>
+
+<PagesOnly>
+
+إذا كنت بحاجة إلى إعادة التحقق من التخزين المؤقت لصفحة تم [إنشاؤها بشكل ثابت](/docs/pages/building-your-application/rendering/static-site-generation)، يمكنك القيام بذلك عن طريق تعيين خاصية `revalidate` في دالة [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) للصفحة.
+
+يمكنك تعيين رأس `Cache-Control` في [مسارات API](/docs/pages/building-your-application/routing/api-routes) باستخدام طريقة `res.setHeader`:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.setHeader('Cache-Control', 's-maxage=86400')
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  res.setHeader('Cache-Control', 's-maxage=86400')
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+</PagesOnly>
+
+## الخيارات
+
+### CORS
+
+[مشاركة الموارد عبر المصادر (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) هي ميزة أمان تسمح لك بالتحكم في المواقع التي يمكنها الوصول إلى مواردك. يمكنك تعيين رأس `Access-Control-Allow-Origin` للسماح لمصدر معين بالوصول إلى <PagesOnly>نقاط نهاية API</PagesOnly><AppOnly>معالجات المسار</AppOnly> الخاصة بك.
+
+```js
+async headers() {
+    return [
+      {
+        source: "/api/:path*",
+        headers: [
+          {
+            key: "Access-Control-Allow-Origin",
+            value: "*", // تعيين المصدر الخاص بك
+          },
+          {
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, PUT, DELETE, OPTIONS",
+          },
+          {
+            key: "Access-Control-Allow-Headers",
+            value: "Content-Type, Authorization",
+          },
+        ],
+      },
+    ];
+  },
+```
+
+### X-DNS-Prefetch-Control
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control) يتحكم في جلب DNS مسبقًا، مما يسمح للمتصفحات بإجراء تحليل اسم النطاق استباقيًا على الروابط الخارجية والصور وCSS وJavaScript وغير ذلك. يتم تنفيذ هذا الجلب المسبق في الخلفية، لذا يكون [DNS](https://developer.mozilla.org/docs/Glossary/DNS) أكثر احتمالية لحلها بحلول الوقت الذي تكون فيه العناصر المشار إليها مطلوبة. هذا يقلل من زمن الوصول عندما ينقر المستخدم على رابط.
+
+```js
+{
+  key: 'X-DNS-Prefetch-Control',
+  value: 'on'
+}
+```
+
+### Strict-Transport-Security
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) يخبر المتصفحات أنه يجب الوصول إليه فقط باستخدام HTTPS، بدلاً من استخدام HTTP. باستخدام التكوين أدناه، ستستخدم جميع النطاقات الفرعية الحالية والمستقبلية HTTPS لمدة `max-age` تبلغ سنتين. هذا يمنع الوصول إلى الصفحات أو النطاقات الفرعية التي يمكن تقديمها فقط عبر HTTP.
+
+إذا كنت تقوم بالنشر على [Vercel](https://vercel.com/docs/concepts/edge-network/headers#strict-transport-security?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)، فإن هذا الرأس ليس ضروريًا حيث يتم إضافته تلقائيًا إلى جميع عمليات النشر ما لم تعلن عن `headers` في ملف `next.config.js` الخاص بك.
+
+```js
+{
+  key: 'Strict-Transport-Security',
+  value: 'max-age=63072000; includeSubDomains; preload'
+}
+```
+
+### X-Frame-Options
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options) يشير إلى ما إذا كان يجب السماح بعرض الموقع داخل `iframe`. يمكن أن يمنع هذا من هجمات clickjacking.
+
+**تم استبدال هذا الرأس بخيار `frame-ancestors` في CSP**، والذي يتمتع بدعم أفضل في المتصفحات الحديثة (راجع [سياسة أمان المحتوى](/docs/app/building-your-application/configuring/content-security-policy) للحصول على تفاصيل التكوين).
+
+```js
+{
+  key: 'X-Frame-Options',
+  value: 'SAMEORIGIN'
+}
+```
+
+### Permissions-Policy
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/Permissions-Policy) يسمح لك بالتحكم في الميزات وواجهات برمجة التطبيقات التي يمكن استخدامها في المتصفح. كان يُعرف سابقًا باسم `Feature-Policy`.
+
+```js
+{
+  key: 'Permissions-Policy',
+  value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()'
+}
+```
+
+### X-Content-Type-Options
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Content-Type-Options) يمنع المتصفح من محاولة تخمين نوع المحتوى إذا لم يتم تعيين رأس `Content-Type` بشكل صريح. يمكن أن يمنع هذا من استغلال XSS للمواقع التي تسمح للمستخدمين بتحميل ومشاركة الملفات.
+
+على سبيل المثال، قد يحاول مستخدم تنزيل صورة، ولكن يتم معاملتها كنوع `Content-Type` مختلف مثل ملف قابل للتنفيذ، والذي قد يكون ضارًا. ينطبق هذا الرأس أيضًا على تنزيل ملحقات المتصفح. القيمة الوحيدة الصالحة لهذا الرأس هي `nosniff`.
+
+```js
+{
+  key: 'X-Content-Type-Options',
+  value: 'nosniff'
+}
+```
+
+### Referrer-Policy
+
+[هذا الرأس](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) يتحكم في مقدار المعلومات التي يدرجها المتصفح عند الانتقال من الموقع الحالي (المصدر) إلى موقع آخر.
+
+```js
+{
+  key: 'Referrer-Policy',
+  value: 'origin-when-cross-origin'
+}
+```
+
+### سياسة أمان المحتوى (Content-Security-Policy)
+
+تعرف على المزيد حول إضافة [سياسة أمان المحتوى](/docs/app/building-your-application/configuring/content-security-policy) إلى تطبيقك.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات          |
+| --------- | ---------------- |
+| `v13.3.0` | تمت إضافة `missing`. |
+| `v10.2.0` | تمت إضافة `has`.     |
+| `v9.5.0`  | تمت إضافة الرؤوس.   |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/httpAgentOptions.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/httpAgentOptions.mdx
new file mode 100644
index 00000000..4571f8d9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/httpAgentOptions.mdx
@@ -0,0 +1,20 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:29.324Z
+title: خيارات وكيل HTTP (httpAgentOptions)
+description: سيقوم Next.js تلقائيًا باستخدام HTTP Keep-Alive افتراضيًا. تعلم المزيد حول كيفية تعطيل HTTP Keep-Alive هنا.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+في إصدارات Node.js السابقة للإصدار 18، يقوم Next.js تلقائيًا بتوفير دعم متوافق لـ `fetch()` باستخدام [undici](/docs/architecture/supported-browsers#polyfills) وتمكين [HTTP Keep-Alive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Keep-Alive) افتراضيًا.
+
+لتعطيل HTTP Keep-Alive لجميع استدعاءات `fetch()` على جانب الخادم، افتح ملف `next.config.js` وأضف إعداد `httpAgentOptions`:
+
+```js filename="next.config.js"
+module.exports = {
+  httpAgentOptions: {
+    keepAlive: false,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/images.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/images.mdx
new file mode 100644
index 00000000..be8f63d3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/images.mdx
@@ -0,0 +1,229 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:41.751Z
+title: الصور
+description: التخصيص المتقدم لمحمل الصور `next/image`
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+إذا كنت ترغب في استخدام مزود سحابي لتحسين الصور بدلاً من استخدام واجهة برمجة تطبيقات تحسين الصور المدمجة في Next.js، يمكنك تكوين ملف `next.config.js` كما يلي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    loader: 'custom',
+    loaderFile: './my/image/loader.js',
+  },
+}
+```
+
+يجب أن يشير `loaderFile` إلى ملف نسبي من جذر تطبيق Next.js الخاص بك. يجب أن يصدر الملف دالة افتراضية تُرجع سلسلة نصية، على سبيل المثال:
+
+<AppOnly>
+
+```js filename="my/image/loader.js"
+'use client'
+
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام [خاصية `loader`](/docs/app/api-reference/components/image#loader) لتمرير الدالة إلى كل نسخة من `next/image`.
+
+> **معلومة مفيدة**: تخصيص ملف محمل الصور، الذي يقبل دالة، يتطلب استخدام [مكونات العميل](/docs/app/building-your-application/rendering/client-components) لتحويل الدالة المقدمة إلى تنسيق قابل للتخزين.
+
+لمعرفة المزيد حول تكوين سلوك [واجهة برمجة تطبيقات تحسين الصور المدمجة](/docs/app/building-your-application/optimizing/images) و[مكون الصورة](/docs/app/api-reference/components/image)، راجع [خيارات تكوين الصورة](/docs/app/api-reference/components/image#configuration-options) للاطلاع على الخيارات المتاحة.
+
+</AppOnly>
+
+<PagesOnly>
+
+```js filename="my/image/loader.js"
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+بدلاً من ذلك، يمكنك استخدام [خاصية `loader`](/docs/pages/api-reference/components/image#loader) لتمرير الدالة إلى كل نسخة من `next/image`.
+
+لمعرفة المزيد حول تكوين سلوك [واجهة برمجة تطبيقات تحسين الصور المدمجة](/docs/pages/building-your-application/optimizing/images) و[مكون الصورة](/docs/pages/api-reference/components/image)، راجع [خيارات تكوين الصورة](/docs/pages/api-reference/components/image#configuration-options) للاطلاع على الخيارات المتاحة.
+
+</PagesOnly>
+
+## أمثلة على تكوين المحمل
+
+- [Akamai](#akamai)
+- [AWS CloudFront](#aws-cloudfront)
+- [Cloudinary](#cloudinary)
+- [Cloudflare](#cloudflare)
+- [Contentful](#contentful)
+- [Fastly](#fastly)
+- [Gumlet](#gumlet)
+- [ImageEngine](#imageengine)
+- [Imgix](#imgix)
+- [Thumbor](#thumbor)
+- [Sanity](#sanity)
+- [Sirv](#sirv)
+- [Supabase](#supabase)
+
+### Akamai
+
+```js
+// الوثائق: https://techdocs.akamai.com/ivm/reference/test-images-on-demand
+export default function akamaiLoader({ src, width, quality }) {
+  return `https://example.com/${src}?imwidth=${width}`
+}
+```
+
+### AWS CloudFront
+
+```js
+// الوثائق: https://aws.amazon.com/developer/application-security-performance/articles/image-optimization
+export default function cloudfrontLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('format', 'auto')
+  url.searchParams.set('width', width.toString())
+  url.searchParams.set('quality', (quality || 75).toString())
+  return url.href
+```
+
+### Cloudinary
+
+```js
+// العرض التوضيحي: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
+export default function cloudinaryLoader({ src, width, quality }) {
+  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
+  return `https://example.com/${params.join(',')}${src}`
+}
+```
+
+### Cloudflare
+
+```js
+// الوثائق: https://developers.cloudflare.com/images/url-format
+export default function cloudflareLoader({ src, width, quality }) {
+  const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto']
+  return `https://example.com/cdn-cgi/image/${params.join(',')}/${src}`
+}
+```
+
+### Contentful
+
+```js
+// الوثائق: https://www.contentful.com/developers/docs/references/images-api/
+export default function contentfulLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('fm', 'webp')
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', (quality || 75).toString())
+  return url.href
+}
+```
+
+### Fastly
+
+```js
+// الوثائق: https://developer.fastly.com/reference/io/
+export default function fastlyLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('auto', 'webp')
+  url.searchParams.set('width', width.toString())
+  url.searchParams.set('quality', (quality || 75).toString())
+  return url.href
+}
+```
+
+### Gumlet
+
+```js
+// الوثائق: https://docs.gumlet.com/reference/image-transform-size
+export default function gumletLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('format', 'auto')
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', (quality || 75).toString())
+  return url.href
+}
+```
+
+### ImageEngine
+
+```js
+// الوثائق: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives
+export default function imageengineLoader({ src, width, quality }) {
+  const compression = 100 - (quality || 50)
+  const params = [`w_${width}`, `cmpr_${compression}`)]
+  return `https://example.com${src}?imgeng=/${params.join('/')`
+}
+```
+
+### Imgix
+
+```js
+// العرض التوضيحي: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300
+export default function imgixLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  const params = url.searchParams
+  params.set('auto', params.getAll('auto').join(',') || 'format')
+  params.set('fit', params.get('fit') || 'max')
+  params.set('w', params.get('w') || width.toString())
+  params.set('q', (quality || 50).toString())
+  return url.href
+}
+```
+
+### Thumbor
+
+```js
+// الوثائق: https://thumbor.readthedocs.io/en/latest/
+export default function thumborLoader({ src, width, quality }) {
+  const params = [`${width}x0`, `filters:quality(${quality || 75})`]
+  return `https://example.com${params.join('/')}${src}`
+}
+```
+
+### Sanity
+
+```js
+// الوثائق: https://www.sanity.io/docs/image-urls
+export default function sanityLoader({ src, width, quality }) {
+  const prj = 'zp7mbokg'
+  const dataset = 'production'
+  const url = new URL(`https://cdn.sanity.io/images/${prj}/${dataset}${src}`)
+  url.searchParams.set('auto', 'format')
+  url.searchParams.set('fit', 'max')
+  url.searchParams.set('w', width.toString())
+  if (quality) {
+    url.searchParams.set('q', quality.toString())
+  }
+  return url.href
+}
+```
+
+### Sirv
+
+```js
+// الوثائق: https://sirv.com/help/articles/dynamic-imaging/
+export default function sirvLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  const params = url.searchParams
+  params.set('format', params.getAll('format').join(',') || 'optimal')
+  params.set('w', params.get('w') || width.toString())
+  params.set('q', (quality || 85).toString())
+  return url.href
+}
+```
+
+### Supabase
+
+```js
+// الوثائق: https://supabase.com/docs/guides/storage/image-transformations#nextjs-loader
+export default function supabaseLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('width', width.toString())
+  url.searchParams.set('quality', (quality || 75).toString())
+  return url.href
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/incrementalCacheHandlerPath.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/incrementalCacheHandlerPath.mdx
new file mode 100644
index 00000000..817ac668
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/incrementalCacheHandlerPath.mdx
@@ -0,0 +1,61 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:37.369Z
+title: معالج التخزين المؤقت المخصص في Next.js
+nav_title: cacheHandler
+description: تكوين التخزين المؤقت لـ Next.js المستخدم لتخزين وإعادة التحقق من البيانات لاستخدام أي خدمة خارجية مثل Redis أو Memcached أو غيرها.
+---
+
+في Next.js، يستخدم [معالج التخزين المؤقت الافتراضي](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) لموجه الصفحات (Pages Router) وموجه التطبيق (App Router) تخزين نظام الملفات. لا يتطلب هذا أي تكوين، ولكن يمكنك تخصيص معالج التخزين المؤقت باستخدام حقل `cacheHandler` في ملف `next.config.js`.
+
+```js filename="next.config.js"
+module.exports = {
+  cacheHandler: require.resolve('./cache-handler.js'),
+  cacheMaxMemorySize: 0, // تعطيل التخزين المؤقت في الذاكرة الافتراضي
+}
+```
+
+عرض مثال لـ [معالج التخزين المؤقت المخصص](/docs/app/building-your-application/deploying#configuring-caching) ومعرفة المزيد حول التنفيذ.
+
+## مرجع API
+
+يمكن لمعالج التخزين المؤقت تنفيذ الطرق التالية: `get`، `set`، و `revalidateTag`.
+
+### `get()`
+
+| المعامل | النوع     | الوصف                  |
+| --------- | -------- | ---------------------------- |
+| `key`     | `string` | المفتاح للقيمة المخزنة مؤقتًا. |
+
+تُرجع القيمة المخزنة مؤقتًا أو `null` إذا لم يتم العثور عليها.
+
+### `set()`
+
+| المعامل | النوع           | الوصف                      |
+| --------- | -------------- | -------------------------------- |
+| `key`     | `string`       | المفتاح لتخزين البيانات تحته. |
+| `data`    | Data أو `null` | البيانات المراد تخزينها مؤقتًا.           |
+| `ctx`     | `{ tags: [] }` | وسوم التخزين المؤقت المقدمة.         |
+
+تُرجع `Promise<void>`.
+
+### `revalidateTag()`
+
+| المعامل | النوع     | الوصف                  |
+| --------- | -------- | ---------------------------- |
+| `tag`     | `string` | وسم التخزين المؤقت لإعادة التحقق منه. |
+
+تُرجع `Promise<void>`. تعرف على المزيد حول [إعادة التحقق من البيانات](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) أو دالة [`revalidateTag()`](/docs/app/api-reference/functions/revalidateTag).
+
+**معلومة مفيدة:**
+
+- `revalidatePath` هي طبقة تسهيلية فوق وسوم التخزين المؤقت. استدعاء `revalidatePath` سوف يستدعي دالة `revalidateTag` الخاصة بك، والتي يمكنك بعد ذلك اختيار ما إذا كنت تريد وضع وسوم لمفاتيح التخزين المؤقت بناءً على المسار.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                  |
+| --------- | ------------------------------------------------------------------------ |
+| `v14.1.0` | أصبح `cacheHandler` مستقرًا.                                        |
+| `v13.4.0` | يدعم `incrementalCacheHandlerPath` (تجريبي) `revalidateTag`.   |
+| `v13.4.0` | يدعم `incrementalCacheHandlerPath` (تجريبي) الإخراج المستقل. |
+| `v12.2.0` | تمت إضافة `incrementalCacheHandlerPath` (تجريبي).                   |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/index.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/index.mdx
new file mode 100644
index 00000000..a6bd6263
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/index.mdx
@@ -0,0 +1,98 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:36.774Z
+title: خيارات ملف next.config.js
+description: تعلم كيفية تكوين تطبيقك باستخدام ملف next.config.js.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يمكن تكوين Next.js من خلال ملف `next.config.js` في جذر دليل المشروع (على سبيل المثال، بجانب `package.json`) مع تصدير افتراضي.
+
+```js filename="next.config.js"
+// @ts-check
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+}
+
+module.exports = nextConfig
+```
+
+`next.config.js` هو وحدة Node.js عادية، وليس ملف JSON. يتم استخدامه بواسطة خادم Next.js ومراحل البناء، ولا يتم تضمينه في بناء المتصفح.
+
+إذا كنت بحاجة إلى [وحدات ECMAScript](https://nodejs.org/api/esm.html)، يمكنك استخدام `next.config.mjs`:
+
+```js filename="next.config.mjs"
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  /* config options here */
+}
+
+export default nextConfig
+```
+
+يمكنك أيضًا استخدام دالة:
+
+```js filename="next.config.mjs"
+// @ts-check
+
+export default (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  }
+  return nextConfig
+}
+```
+
+منذ Next.js 12.1.0، يمكنك استخدام دالة غير متزامنة:
+
+```js filename="next.config.js"
+// @ts-check
+
+module.exports = async (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  }
+  return nextConfig
+}
+```
+
+`phase` هو السياق الحالي الذي يتم فيه تحميل التكوين. يمكنك رؤية [المراحل المتاحة](https://github.com/vercel/next.js/blob/5e6b008b561caf2710ab7be63320a3d549474a5b/packages/next/shared/lib/constants.ts#L19-L23). يمكن استيراد المراحل من `next/constants`:
+
+```js
+// @ts-check
+
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
+
+module.exports = (phase, { defaultConfig }) => {
+  if (phase === PHASE_DEVELOPMENT_SERVER) {
+    return {
+      /* development only config options here */
+    }
+  }
+
+  return {
+    /* config options for all phases except development here */
+  }
+}
+```
+
+الأسطر المعلقة هي المكان الذي يمكنك وضع التكوينات المسموح بها بواسطة `next.config.js`، والتي [تم تعريفها في هذا الملف](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/config-shared.ts).
+
+ومع ذلك، لا يوجد أي من التكوينات مطلوبًا، وليس من الضروري فهم ما يفعله كل تكوين. بدلاً من ذلك، ابحث عن الميزات التي تحتاج إلى تمكينها أو تعديلها في هذا القسم وسوف تظهر لك ما يجب القيام به.
+
+> تجنب استخدام ميزات JavaScript الجديدة غير المتوفرة في إصدار Node.js المستهدف. لن يتم تحليل `next.config.js` بواسطة Webpack أو Babel أو TypeScript.
+
+توثق هذه الصفحة جميع خيارات التكوين المتاحة:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/instrumentationHook.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/instrumentationHook.mdx
new file mode 100644
index 00000000..cedc1412
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/instrumentationHook.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:13.296Z
+title: instrumentationHook
+description: استخدم خيار instrumentationHook لإعداد أدوات القياس في تطبيق Next.js الخاص بك.
+related:
+  title: تعرف على المزيد حول أدوات القياس
+  links:
+    - app/api-reference/file-conventions/instrumentation
+    - app/building-your-application/optimizing/instrumentation
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+يسمح لك الخيار التجريبي `instrumentationHook` بإعداد أدوات القياس عبر [ملف `instrumentation`](/docs/app/api-reference/file-conventions/instrumentation) في تطبيق Next.js الخاص بك.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    instrumentationHook: true,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/logging.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/logging.mdx
new file mode 100644
index 00000000..201ee426
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/logging.mdx
@@ -0,0 +1,22 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:12.253Z
+title: تسجيل البيانات (logging)
+description: تكوين كيفية تسجيل عمليات جلب البيانات في وحدة التحكم عند تشغيل Next.js في وضع التطوير.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يمكنك تكوين مستوى تسجيل البيانات وما إذا كان سيتم تسجيل عنوان URL الكامل في وحدة التحكم عند تشغيل Next.js في وضع التطوير.
+
+حاليًا، `logging` ينطبق فقط على جلب البيانات باستخدام واجهة `fetch` API. ولا ينطبق بعد على السجلات الأخرى داخل Next.js.
+
+```js filename="next.config.js"
+module.exports = {
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/mdxRs.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/mdxRs.mdx
new file mode 100644
index 00000000..ed0d9ae5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/mdxRs.mdx
@@ -0,0 +1,22 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:01.349Z
+title: mdxRs
+description: استخدم مترجم Rust الجديد لتحويل ملفات MDX في موجه التطبيق (App Router).
+---
+
+للاستخدام مع `@next/mdx`. قم بتحويل ملفات MDX باستخدام مترجم Rust الجديد.
+
+```js filename="next.config.js"
+const withMDX = require('@next/mdx')()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['ts', 'tsx', 'mdx'],
+  experimental: {
+    mdxRs: true,
+  },
+}
+
+module.exports = withMDX(nextConfig)
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/onDemandEntries.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/onDemandEntries.mdx
new file mode 100644
index 00000000..ee5589eb
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/onDemandEntries.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:02.032Z
+title: onDemandEntries
+description: تكوين كيفية تصرف Next.js في التخلص من الصفحات أو الاحتفاظ بها في الذاكرة أثناء التطوير.
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يقدم Next.js بعض الخيارات التي تمنحك تحكمًا في كيفية تخلص الخادم من الصفحات المبنية أو الاحتفاظ بها في الذاكرة أثناء التطوير.
+
+لتغيير الإعدادات الافتراضية، افتح ملف `next.config.js` وأضف تكوين `onDemandEntries`:
+
+```js filename="next.config.js"
+module.exports = {
+  onDemandEntries: {
+    // الفترة (بالميلي ثانية) التي سيحتفظ فيها الخادم بالصفحات في المخزن المؤقت
+    maxInactiveAge: 25 * 1000,
+    // عدد الصفحات التي يجب الاحتفاظ بها في نفس الوقت دون التخلص منها
+    pagesBufferLength: 2,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/optimizePackageImports.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/optimizePackageImports.mdx
new file mode 100644
index 00000000..78b55ba0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/optimizePackageImports.mdx
@@ -0,0 +1,48 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:58.624Z
+title: optimizePackageImports
+description: مرجع API لخيار تكوين `optimizePackageImports` في Next.js
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+بعض الحزم يمكنها تصدير مئات أو آلاف الوحدات، مما قد يسبب مشاكل في الأداء أثناء التطوير والإنتاج.
+
+إضافة حزمة إلى `experimental.optimizePackageImports` ستحمّل فقط الوحدات التي تستخدمها فعليًا، مع الحفاظ على راحتك في كتابة عبارات الاستيراد مع العديد من التصديرات المسماة.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['package-name'],
+  },
+}
+```
+
+المكتبات التالية مُحسّنة بشكل افتراضي:
+
+- `lucide-react`
+- `date-fns`
+- `lodash-es`
+- `ramda`
+- `antd`
+- `react-bootstrap`
+- `ahooks`
+- `@ant-design/icons`
+- `@headlessui/react`
+- `@headlessui-float/react`
+- `@heroicons/react/20/solid`
+- `@heroicons/react/24/solid`
+- `@heroicons/react/24/outline`
+- `@visx/visx`
+- `@tremor/react`
+- `rxjs`
+- `@mui/material`
+- `@mui/icons-material`
+- `recharts`
+- `react-use`
+- `@material-ui/core`
+- `@material-ui/icons`
+- `@tabler/icons-react`
+- `mui-core`
+- `react-icons/*`
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/output.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/output.mdx
new file mode 100644
index 00000000..935a0f8e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/output.mdx
@@ -0,0 +1,143 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:11.690Z
+title: output
+description: يتتبع Next.js تلقائيًا الملفات المطلوبة لكل صفحة لتمكين نشر تطبيقك بسهولة. تعرف هنا على كيفية عمل هذه الميزة.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجّه التطبيق وموجّه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجّه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+أثناء عملية البناء، سيتتبع Next.js تلقائيًا كل صفحة والتبعيات الخاصة بها لتحديد جميع الملفات المطلوبة لنشر نسخة إنتاجية من تطبيقك.
+
+تساعد هذه الميزة في تقليل حجم عمليات النشر بشكل كبير. في السابق، عند النشر باستخدام Docker، كنت بحاجة إلى تثبيت جميع الملفات من `dependencies` الحزمة لتشغيل `next start`. بدءًا من Next.js 12، يمكنك الاستفادة من تتبع ملفات الإخراج في دليل `.next/` لتضمين الملفات الضرورية فقط.
+
+علاوة على ذلك، هذا يلغي الحاجة إلى هدف `serverless` المهمل والذي يمكن أن يسبب مشاكل متنوعة ويخلق أيضًا تكرارًا غير ضروري.
+
+## كيفية العمل
+
+أثناء `next build`، سيستخدم Next.js [`@vercel/nft`](https://github.com/vercel/nft) لتحليل `import` و `require` واستخدام `fs` بشكل ثابت لتحديد جميع الملفات التي قد تحتاجها الصفحة.
+
+يتم أيضًا تتبع خادم الإنتاج الخاص بـ Next.js للملفات المطلوبة وإخراجها في `.next/next-server.js.nft.json` والتي يمكن الاستفادة منها في الإنتاج.
+
+للاستفادة من ملفات `.nft.json` المنبعثة إلى دليل الإخراج `.next`، يمكنك قراءة قائمة الملفات في كل تتبع والتي تكون مرتبطة بملف `.nft.json` ثم نسخها إلى موقع النشر الخاص بك.
+
+## النسخ التلقائي للملفات المتتبعة
+
+يمكن لـ Next.js إنشاء مجلد `standalone` تلقائيًا والذي ينسخ فقط الملفات الضرورية لنشر الإنتاج بما في ذلك ملفات مختارة من `node_modules`.
+
+للاستفادة من هذا النسخ التلقائي، يمكنك تمكينه في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  output: 'standalone',
+}
+```
+
+سيؤدي هذا إلى إنشاء مجلد في `.next/standalone` والذي يمكن نشره بمفرده دون تثبيت `node_modules`.
+
+بالإضافة إلى ذلك، يتم إخراج ملف `server.js` بسيط أيضًا والذي يمكن استخدامه بدلاً من `next start`. لا يقوم هذا الخادم البسيط بنسخ مجلدات `public` أو `.next/static` افتراضيًا حيث يُفضل التعامل مع هذه المجلدات عبر CDN، على الرغم من أنه يمكن نسخ هذه المجلدات يدويًا إلى `standalone/public` و `standalone/.next/static`، وبعد ذلك سيقدم ملف `server.js` هذه الملفات تلقائيًا.
+
+<AppOnly>
+
+> **معلومة مفيدة**:
+>
+> - إذا كان مشروعك بحاجة إلى الاستماع إلى منفذ أو اسم مضيف محدد، يمكنك تعريف متغيرات البيئة `PORT` أو `HOSTNAME` قبل تشغيل `server.js`. على سبيل المثال، قم بتشغيل `PORT=8080 HOSTNAME=0.0.0.0 node server.js` لبدء الخادم على `http://0.0.0.0:8080`.
+> - إذا كان مشروعك يستخدم [تحسين الصور](/docs/app/building-your-application/optimizing/images) مع محمل `loader` الافتراضي، يجب تثبيت `sharp` كتبعية:
+
+</AppOnly>
+
+<PagesOnly>
+
+> **معلومة مفيدة**:
+>
+> - يتم قراءة `next.config.js` أثناء `next build` وتسلسله في ملف الإخراج `server.js`. إذا كانت خيارات [`serverRuntimeConfig` أو `publicRuntimeConfig` القديمة](/docs/pages/api-reference/next-config-js/runtime-configuration) مستخدمة، فإن القيم ستكون محددة بالقيم في وقت البناء.
+> - إذا كان مشروعك بحاجة إلى الاستماع إلى منفذ أو اسم مضيف محدد، يمكنك تعريف متغيرات البيئة `PORT` أو `HOSTNAME` قبل تشغيل `server.js`. على سبيل المثال، قم بتشغيل `PORT=8080 HOSTNAME=0.0.0.0 node server.js` لبدء الخادم على `http://0.0.0.0:8080`.
+> - إذا كان مشروعك يستخدم [تحسين الصور](/docs/pages/building-your-application/optimizing/images) مع محمل `loader` الافتراضي، يجب تثبيت `sharp` كتبعية:
+
+</PagesOnly>
+
+```bash filename="Terminal"
+npm i sharp
+```
+
+```bash filename="Terminal"
+yarn add sharp
+```
+
+```bash filename="Terminal"
+pnpm add sharp
+```
+
+```bash filename="Terminal"
+bun add sharp
+```
+
+## محاذير
+
+- أثناء التتبع في إعدادات monorepo، يتم استخدام دليل المشروع افتراضيًا للتتبع. بالنسبة لـ `next build packages/web-app`، سيكون `packages/web-app` هو جذر التتبع ولن يتم تضمين أي ملفات خارج هذا المجلد. لتضمين ملفات خارج هذا المجلد، يمكنك تعيين `experimental.outputFileTracingRoot` في ملف `next.config.js`.
+
+```js filename="packages/web-app/next.config.js"
+module.exports = {
+  experimental: {
+    // هذا يتضمن ملفات من قاعدة monorepo بمستويين للأعلى
+    outputFileTracingRoot: path.join(__dirname, '../../'),
+  },
+}
+```
+
+- هناك بعض الحالات التي قد يفشل فيها Next.js في تضمين الملفات المطلوبة، أو قد يتضمن ملفات غير مستخدمة عن طريق الخطأ. في هذه الحالات، يمكنك الاستفادة من `experimental.outputFileTracingExcludes` و `experimental.outputFileTracingIncludes` على التوالي في `next.config.js`. يقبل كل تكوين كائنًا مع [minimatch globs](https://www.npmjs.com/package/minimatch) للمفتاح لمطابقة صفحات محددة ومصفوفة من globs مرتبطة بجذر المشروع لتضمينها أو استبعادها في التتبع.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    outputFileTracingExcludes: {
+      '/api/hello': ['./un-necessary-folder/**/*'],
+    },
+    outputFileTracingIncludes: {
+      '/api/another': ['./necessary-folder/**/*'],
+    },
+  },
+}
+```
+
+- حاليًا، لا يفعل Next.js أي شيء مع ملفات `.nft.json` المنبعثة. يجب قراءة الملفات بواسطة منصة النشر الخاصة بك، مثل [Vercel](https://vercel.com)، لإنشاء نشر بسيط. في إصدار مستقبلي، من المخطط إصدار أمر جديد للاستفادة من ملفات `.nft.json` هذه.
+
+## `turbotrace` التجريبي
+
+يمكن أن يكون تتبع التبعيات بطيئًا لأنه يتطلب حسابات وتحليلات معقدة للغاية. لقد أنشأنا `turbotrace` بلغة Rust كبديل أسرع وأذكى للتنفيذ بلغة JavaScript.
+
+لتمكينه، يمكنك إضافة التكوين التالي إلى ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    turbotrace: {
+      // التحكم في مستوى تسجيل turbotrace، الافتراضي هو `error`
+      logLevel?:
+      | 'bug'
+      | 'fatal'
+      | 'error'
+      | 'warning'
+      | 'hint'
+      | 'note'
+      | 'suggestions'
+      | 'info',
+      // التحكم فيما إذا كان سجل turbotrace يجب أن يتضمن تفاصيل التحليل، الافتراضي هو `false`
+      logDetail?: boolean
+      // عرض جميع رسائل السجل دون حدود
+      // يعرض turbotrace رسالة سجل واحدة فقط لكل فئة افتراضيًا
+      logAll?: boolean
+      // التحكم في دليل السياق لـ turbotrace
+      // لن يتم تتبع الملفات خارج دليل السياق
+      // تعيين `experimental.outputFileTracingRoot` له نفس التأثير
+      // إذا تم تعيين كل من `experimental.outputFileTracingRoot` وهذا الخيار، سيتم استخدام `experimental.turbotrace.contextDirectory`
+      contextDirectory?: string
+      // إذا كان هناك تعبير `process.cwd()` في الكود الخاص بك، يمكنك تعيين هذا الخيار لإخبار `turbotrace` بقيمة `process.cwd()` أثناء التتبع.
+      // على سبيل المثال، سيتم تتبع require(process.cwd() + '/package.json') كـ require('/path/to/cwd/package.json')
+      processCwd?: string
+      // التحكم في الحد الأقصى لاستخدام الذاكرة لـ `turbotrace`، بوحدة `MB`، الافتراضي هو `6000`.
+      memoryLimit?: number
+    },
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx
new file mode 100644
index 00000000..72b4bf22
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx
@@ -0,0 +1,62 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:04.658Z
+title: ملحقات الصفحة (pageExtensions)
+description: توسيع ملحقات الصفحة الافتراضية المستخدمة من قبل Next.js عند تحليل الصفحات في موجه الصفحات (Pages Router).
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+<AppOnly>
+
+بشكل افتراضي، يقبل Next.js الملفات ذات الملحقات التالية: `.tsx`, `.ts`, `.jsx`, `.js`. يمكن تعديل هذا للسماح بملحقات أخرى مثل markdown (`.md`, `.mdx`).
+
+```js filename="next.config.js"
+const withMDX = require('@next/mdx')()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['ts', 'tsx', 'mdx'],
+  experimental: {
+    mdxRs: true,
+  },
+}
+
+module.exports = withMDX(nextConfig)
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+يمكنك توسيع ملحقات الصفحة الافتراضية (`.tsx`, `.ts`, `.jsx`, `.js`) المستخدمة من قبل Next.js. داخل ملف `next.config.js`، أضف إعداد `pageExtensions`:
+
+```js filename="next.config.js"
+module.exports = {
+  pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
+}
+```
+
+تغيير هذه القيم يؤثر على _جميع_ صفحات Next.js، بما في ذلك:
+
+- [`middleware.js`](/docs/pages/building-your-application/routing/middleware)
+- [`instrumentation.js`](/docs/pages/building-your-application/optimizing/instrumentation)
+- `pages/_document.js`
+- `pages/_app.js`
+- `pages/api/`
+
+على سبيل المثال، إذا قمت بإعادة تكوين ملحقات الصفحة `.ts` إلى `.page.ts`، ستحتاج إلى إعادة تسمية الصفحات مثل `middleware.page.ts`, `instrumentation.page.ts`, `_app.page.ts`.
+
+## تضمين ملفات غير الصفحات في مجلد `pages`
+
+يمكنك وضع ملفات الاختبار أو الملفات الأخرى المستخدمة من قبل المكونات في مجلد `pages`. داخل ملف `next.config.js`، أضف إعداد `pageExtensions`:
+
+```js filename="next.config.js"
+module.exports = {
+  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
+}
+```
+
+ثم، أعد تسمية صفحاتك لتحتوي على ملحق ملف يتضمن `.page` (مثال: إعادة تسمية `MyPage.tsx` إلى `MyPage.page.tsx`). تأكد من إعادة تسمية _جميع_ صفحات Next.js، بما في ذلك الملفات المذكورة أعلاه.
+
+</PagesOnly>
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/partial-prerendering.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/partial-prerendering.mdx
new file mode 100644
index 00000000..a94f14a7
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/partial-prerendering.mdx
@@ -0,0 +1,36 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:48.454Z
+title: التصيير الجزئي المسبق (تجريبي)
+description: تعلم كيفية تمكين ميزة التصيير الجزئي المسبق (التجريبية) في Next.js 14.
+---
+
+> **تحذير**: التصيير الجزئي المسبق ميزة تجريبية وهي حاليًا **غير مناسبة لبيئات الإنتاج**.
+
+التصيير الجزئي المسبق هو ميزة تجريبية تسمح بتصيير الأجزاء الثابتة من المسار مسبقًا وعرضها من ذاكرة التخزين المؤقت مع دفق الأجزاء الديناميكية، كل ذلك في طلب HTTP واحد.
+
+التصيير الجزئي المسبق متاح في `next@canary`:
+
+```bash filename="Terminal"
+npm install next@canary
+```
+
+يمكنك تمكين التصيير الجزئي المسبق عن طريق تعيين علم `ppr` التجريبي:
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    ppr: true,
+  },
+}
+
+module.exports = nextConfig
+```
+
+> **معلومة مفيدة:**
+>
+> - التصيير الجزئي المسبق لا ينطبق بعد على التنقلات من جانب العميل. نحن نعمل بنشاط على هذا.
+> - تم تصميم التصيير الجزئي المسبق ليعمل فقط مع [بيئة تشغيل Node.js](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes). لا حاجة لاستخدام مجموعة فرعية من بيئة تشغيل Node.js عندما يمكنك تقديم القشرة الثابتة على الفور.
+
+تعلم المزيد عن التصيير الجزئي المسبق في [دورة تعلم Next.js](/learn/dashboard-app/partial-prerendering).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/poweredByHeader.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/poweredByHeader.mdx
new file mode 100644
index 00000000..4673e8d8
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/poweredByHeader.mdx
@@ -0,0 +1,16 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:35.322Z
+title: رأس poweredByHeader
+description: Next.js سيضيف رأس `x-powered-by` افتراضيًا. تعلم كيفية إلغاء تفعيله هنا.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+افتراضيًا، سيضيف Next.js رأس `x-powered-by`. لإلغاء تفعيله، افتح ملف `next.config.js` وعطل إعداد `poweredByHeader`:
+
+```js filename="next.config.js"
+module.exports = {
+  poweredByHeader: false,
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx
new file mode 100644
index 00000000..eb51dd9e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:35.886Z
+title: productionBrowserSourceMaps
+description: تمكين إنشاء خرائط المصدر (source maps) للمتصفح أثناء بناء الإنتاج.
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+خرائط المصدر (source maps) مفعلة بشكل افتراضي أثناء التطوير. أثناء عمليات بناء الإنتاج، يتم تعطيلها لمنع تسريب المصدر على العميل، إلا إذا قمت بالاشتراك صراحةً باستخدام علامة التكوين.
+
+يوفر Next.js علامة تكوين يمكنك استخدامها لتمكين إنشاء خرائط المصدر للمتصفح أثناء بناء الإنتاج:
+
+```js filename="next.config.js"
+module.exports = {
+  productionBrowserSourceMaps: true,
+}
+```
+
+عند تفعيل خيار `productionBrowserSourceMaps`، سيتم إخراج خرائط المصدر في نفس الدليل الذي توجد فيه ملفات JavaScript. سيقوم Next.js تلقائيًا بخدمة هذه الملفات عند الطلب.
+
+- إضافة خرائط المصدر قد تزيد من وقت `next build`
+- تزيد من استخدام الذاكرة أثناء `next build`
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
new file mode 100644
index 00000000..00d1c19d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
@@ -0,0 +1,24 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:32.219Z
+title: reactStrictMode
+description: بيئة تشغيل Next.js كاملة متوافقة الآن مع الوضع الصارم (Strict Mode)، تعلم كيفية التفعيل
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
+
+> **معلومة مفيدة**: منذ إصدار Next.js 13.4، الوضع الصارم (Strict Mode) مفعل افتراضيًا مع موجه التطبيق (app router)، لذا الإعدادات أعلاه ضرورية فقط لموجه الصفحات (pages). يمكنك تعطيل الوضع الصارم عن طريق تعيين `reactStrictMode: false`.
+
+> **مقترح**: نوصي بشدة بتفعيل الوضع الصارم (Strict Mode) في تطبيق Next.js الخاص بك لتحضير تطبيقك لمستقبل React.
+
+[الوضع الصارم (Strict Mode)](https://react.dev/reference/react/StrictMode) في React هو ميزة خاصة بوضع التطوير فقط لتسليط الضوء على المشاكل المحتملة في التطبيق. يساعد في تحديد دورة حياة غير آمنة، استخدام واجهات برمجة قديمة، وعدد من الميزات الأخرى.
+
+بيئة تشغيل Next.js متوافقة مع الوضع الصارم. لتفعيل الوضع الصارم، قم بتكوين الخيار التالي في ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+module.exports = {
+  reactStrictMode: true,
+}
+```
+
+إذا كنت أنت أو فريقك غير مستعدين لاستخدام الوضع الصارم في تطبيقك بالكامل، لا بأس! يمكنك الترحيل تدريجيًا على أساس كل صفحة باستخدام `<React.StrictMode>`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/redirects.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/redirects.mdx
new file mode 100644
index 00000000..5cc7d5ab
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/redirects.mdx
@@ -0,0 +1,322 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:30:29.924Z
+title: إعادة التوجيه (redirects)
+description: إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+تسمح لك إعادة التوجيه (redirects) بتوجيه مسار طلب وارد إلى مسار وجهة مختلف.
+
+لاستخدام إعادة التوجيه، يمكنك استخدام مفتاح `redirects` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/about',
+        destination: '/',
+        permanent: true,
+      },
+    ]
+  },
+}
+```
+
+`redirects` هي دالة غير متزامنة تتوقع إرجاع مصفوفة تحتوي على كائنات ذات خصائص `source` و `destination` و `permanent`:
+
+- `source`: نمط مسار الطلب الوارد.
+- `destination`: المسار الذي تريد توجيه الطلب إليه.
+- `permanent`: `true` أو `false` - إذا كانت `true` سيتم استخدام رمز الحالة 308 الذي يوجه العملاء ومحركات البحث إلى تخزين إعادة التوجيه مؤقتًا، وإذا كانت `false` سيتم استخدام رمز الحالة 307 المؤقت والذي لا يتم تخزينه.
+
+> **لماذا يستخدم Next.js الرمزين 307 و 308؟** تقليديًا، كان يتم استخدام 302 لإعادة التوجيه المؤقت و301 لإعادة التوجيه الدائم، لكن العديد من المتصفحات غيرت طريقة طلب إعادة التوجيه إلى `GET` بغض النظر عن الطريقة الأصلية. على سبيل المثال، إذا قام المتصفح بطلب `POST /v1/users` الذي أعاد رمز الحالة `302` مع موقع `/v2/users`، فقد يكون الطلب التالي `GET /v2/users` بدلاً من `POST /v2/users` المتوقع. يستخدم Next.js رمز الحالة 307 لإعادة التوجيه المؤقت و308 لإعادة التوجيه الدائم للحفاظ بشكل صريح على طريقة الطلب المستخدمة.
+
+- `basePath`: `false` أو `undefined` - إذا كانت `false` فلن يتم تضمين `basePath` عند المطابقة، يمكن استخدامها لإعادة التوجيه الخارجية فقط.
+- `locale`: `false` أو `undefined` - ما إذا كان يجب عدم تضمين اللغة المحلية عند المطابقة.
+- `has`: مصفوفة من [كائنات has](#header-cookie-and-query-matching) مع خصائص `type` و `key` و `value`.
+- `missing`: مصفوفة من [كائنات missing](#header-cookie-and-query-matching) مع خصائص `type` و `key` و `value`.
+
+يتم التحقق من عمليات إعادة التوجيه قبل نظام الملفات الذي يتضمن الصفحات وملفات `/public`.
+
+عند استخدام موجه الصفحات (Pages Router)، لا يتم تطبيق إعادة التوجيه على التوجيه من جانب العميل (`Link`، `router.push`) إلا إذا كان [البرنامج الوسيط (Middleware)](/docs/app/building-your-application/routing/middleware) موجودًا ويتطابق مع المسار.
+
+عند تطبيق إعادة التوجيه، سيتم تمرير أي قيم استعلام مقدمة في الطلب إلى وجهة إعادة التوجيه. على سبيل المثال، انظر إلى تكوين إعادة التوجيه التالي:
+
+```js
+{
+  source: '/old-blog/:path*',
+  destination: '/blog/:path*',
+  permanent: false
+}
+```
+
+عند طلب `/old-blog/post-1?hello=world`، سيتم توجيه العميل إلى `/blog/post-1?hello=world`.
+
+## مطابقة المسار
+
+يُسمح بمطابقة المسار، على سبيل المثال `/old-blog/:slug` ستطابق `/old-blog/hello-world` (بدون مسارات متداخلة):
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/old-blog/:slug',
+        destination: '/news/:slug', // يمكن استخدام المعلمات المتطابقة في الوجهة
+        permanent: true,
+      },
+    ]
+  },
+}
+```
+
+### مطابقة المسار باستخدام الأحرف البدل (Wildcard)
+
+لمطابقة مسار باستخدام الأحرف البدل، يمكنك استخدام `*` بعد المعلمة، على سبيل المثال `/blog/:slug*` ستطابق `/blog/a/b/c/d/hello-world`:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/blog/:slug*',
+        destination: '/news/:slug*', // يمكن استخدام المعلمات المتطابقة في الوجهة
+        permanent: true,
+      },
+    ]
+  },
+}
+```
+
+### مطابقة المسار باستخدام التعبير النمطي (Regex)
+
+لمطابقة مسار باستخدام التعبير النمطي، يمكنك تغليف التعبير النمطي بين قوسين بعد المعلمة، على سبيل المثال `/post/:slug(\\d{1,})` ستطابق `/post/123` ولكن لن تطابق `/post/abc`:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/post/:slug(\\d{1,})',
+        destination: '/news/:slug', // يمكن استخدام المعلمات المتطابقة في الوجهة
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+يتم استخدام الأحرف التالية `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` لمطابقة مسار التعبير النمطي، لذا عند استخدامها في `source` كقيم غير خاصة، يجب الهروب منها بإضافة `\\` قبلها:
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      {
+        // هذا سيطابق `/english(default)/something` عند الطلب
+        source: '/english\\(default\\)/:slug',
+        destination: '/en-us/:slug',
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+## مطابقة الرأس (Header)، الكوكي (Cookie)، والاستعلام (Query)
+
+لمطابقة إعادة التوجيه فقط عندما تتطابق قيم الرأس أو الكوكي أو الاستعلام مع حقل `has` أو لا تتطابق مع حقل `missing`، يمكن استخدام `has` أو `missing`. يجب أن يتطابق كل من `source` وجميع عناصر `has` وألا يتطابق أي من عناصر `missing` لتطبيق إعادة التوجيه.
+
+يمكن أن تحتوي عناصر `has` و `missing` على الحقول التالية:
+
+- `type`: `String` - يجب أن يكون إما `header` أو `cookie` أو `host` أو `query`.
+- `key`: `String` - المفتاح من النوع المحدد للمطابقة ضده.
+- `value`: `String` أو `undefined` - القيمة المطلوب التحقق منها، إذا كانت `undefined` فستطابق أي قيمة. يمكن استخدام سلسلة تشبه التعبير النمطي لالتقاط جزء معين من القيمة، على سبيل المثال إذا تم استخدام القيمة `first-(?<paramName>.*)` لـ `first-second`، فيمكن استخدام `second` في الوجهة مع `:paramName`.
+
+```js filename="next.config.js"
+module.exports = {
+  async redirects() {
+    return [
+      // إذا كان رأس `x-redirect-me` موجودًا،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path((?!another-page$).*)',
+        has: [
+          {
+            type: 'header',
+            key: 'x-redirect-me',
+          },
+        ],
+        permanent: false,
+        destination: '/another-page',
+      },
+      // إذا كان رأس `x-dont-redirect` موجودًا،
+      // لن يتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path((?!another-page$).*)',
+        missing: [
+          {
+            type: 'header',
+            key: 'x-do-not-redirect',
+          },
+        ],
+        permanent: false,
+        destination: '/another-page',
+      },
+      // إذا تمت مطابقة المصدر والاستعلام والكوكي،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/specific/:path*',
+        has: [
+          {
+            type: 'query',
+            key: 'page',
+            // لن تكون قيمة الصفحة متاحة في الوجهة
+            // لأن القيمة مقدمة ولا تستخدم مجموعة التقاط مسماة مثل (?<page>home)
+            value: 'home',
+          },
+          {
+            type: 'cookie',
+            key: 'authorized',
+            value: 'true',
+          },
+        ],
+        permanent: false,
+        destination: '/another/:path*',
+      },
+      // إذا كان رأس `x-authorized` موجودًا ويحتوي على قيمة مطابقة،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/',
+        has: [
+          {
+            type: 'header',
+            key: 'x-authorized',
+            value: '(?<authorized>yes|true)',
+          },
+        ],
+        permanent: false,
+        destination: '/home?authorized=:authorized',
+      },
+      // إذا كان المضيف هو `example.com`،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path((?!another-page$).*)',
+        has: [
+          {
+            type: 'host',
+            value: 'example.com',
+          },
+        ],
+        permanent: false,
+        destination: '/another-page',
+      },
+    ]
+  },
+}
+```
+
+### إعادة التوجيه مع دعم basePath
+
+عند استخدام [دعم `basePath`](/docs/app/api-reference/next-config-js/basePath) مع إعادة التوجيه، يتم تلقائيًا إضافة `basePath` إلى كل `source` و `destination` ما لم تقم بإضافة `basePath: false` إلى إعادة التوجيه:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+
+  async redirects() {
+    return [
+      {
+        source: '/with-basePath', // تصبح تلقائيًا /docs/with-basePath
+        destination: '/another', // تصبح تلقائيًا /docs/another
+        permanent: false,
+      },
+      {
+        // لا يضيف /docs لأن basePath: false مضبوط
+        source: '/without-basePath',
+        destination: 'https://example.com',
+        basePath: false,
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+### إعادة التوجيه مع دعم i18n
+
+<AppOnly>
+
+عند استخدام [دعم `i18n`](/docs/app/building-your-application/routing/internationalization) مع إعادة التوجيه، يتم تلقائيًا إضافة البادئات إلى `source` و `destination` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، يجب إضافة بادئة اللغة إلى `source` و `destination` لمطابقتها بشكل صحيح.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استخدام [دعم `i18n`](/docs/pages/building-your-application/routing/internationalization) مع إعادة التوجيه، يتم تلقائيًا إضافة البادئات إلى `source` و `destination` للتعامل مع `locales` المكونة ما لم تقم بإضافة `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، يجب إضافة بادئة اللغة إلى `source` و `destination` لمطابقتها بشكل صحيح.
+
+</PagesOnly>
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async redirects() {
+    return [
+      {
+        source: '/with-locale', // يتعامل تلقائيًا مع جميع اللغات
+        destination: '/another', // يمرر اللغة تلقائيًا
+        permanent: false,
+      },
+      {
+        // لا يتعامل مع اللغات تلقائيًا لأن locale: false مضبوط
+        source: '/nl/with-locale-manual',
+        destination: '/nl/another',
+        locale: false,
+        permanent: false,
+      },
+      {
+        // هذا يطابق '/' لأن `en` هي defaultLocale
+        source: '/en',
+        destination: '/en/another',
+        locale: false,
+        permanent: false,
+      },
+      // من الممكن مطابقة جميع اللغات حتى عندما يكون locale: false مضبوطًا
+      {
+        source: '/:locale/page',
+        destination: '/en/newpage',
+        permanent: false,
+        locale: false,
+      },
+      {
+        // هذا يتحول إلى /(en|fr|de)/(.*) لذا لن يطابق المسارات
+        // الأساسية `/` أو `/fr` كما يفعل /:path*
+        source: '/(.*)',
+        destination: '/another',
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
+في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء HTTP القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية `statusCode` بدلاً من خاصية `permanent`، ولكن ليس كلاهما. لضمان توافق IE11، يتم إضافة رأس `Refresh` تلقائيًا لرمز الحالة 308.
+
+## إعادة التوجيه الأخرى
+
+- داخل [مسارات API](/docs/pages/building-your-application/routing/api-routes) و [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers)، يمكنك إعادة التوجيه بناءً على الطلب الوارد.
+- داخل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) و [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)، يمكنك إعادة توجيه صفحات محددة في وقت الطلب.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات            |
+| --------- | ------------------ |
+| `v13.3.0` | تمت إضافة `missing`.   |
+| `v10.2.0` | تمت إضافة `has`.       |
+| `v9.5.0`  | تمت إضافة `redirects`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/rewrites.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/rewrites.mdx
new file mode 100644
index 00000000..5a4b0e0c
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/rewrites.mdx
@@ -0,0 +1,479 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:31:12.884Z
+title: إعادة التوجيه (rewrites)
+description: إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.
+---
+
+{/* المحتوى مشترك بين موجه التطبيق وموجه الصفحات. استخدم مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+تسمح لك إعادة التوجيه (rewrites) بتعيين مسار طلب وارد إلى مسار وجهة مختلف.
+
+<AppOnly>
+
+تعمل إعادة التوجيه كوكيل URL وتخفي مسار الوجهة، مما يجعل المستخدم يبدو وكأنه لم يغير موقعه على الموقع. على العكس من ذلك، فإن [إعادة التوجيه (redirects)](/docs/app/api-reference/next-config-js/redirects) ستعيد توجيه إلى صفحة جديدة وتظهر تغييرات URL.
+
+</AppOnly>
+
+<PagesOnly>
+
+تعمل إعادة التوجيه كوكيل URL وتخفي مسار الوجهة، مما يجعل المستخدم يبدو وكأنه لم يغير موقعه على الموقع. على العكس من ذلك، فإن [إعادة التوجيه (redirects)](/docs/pages/api-reference/next-config-js/redirects) ستعيد توجيه إلى صفحة جديدة وتظهر تغييرات URL.
+
+</PagesOnly>
+
+لاستخدام إعادة التوجيه، يمكنك استخدام مفتاح `rewrites` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/about',
+        destination: '/',
+      },
+    ]
+  },
+}
+```
+
+يتم تطبيق إعادة التوجيه على التوجيه من جانب العميل، حيث سيتم تطبيق إعادة التوجيه على `<Link href="/about">` في المثال أعلاه.
+
+`rewrites` هي دالة غير متزامنة تتوقع إرجاع مصفوفة أو كائن من المصفوفات (انظر أدناه) يحتوي على كائنات بخصائص `source` و `destination`:
+
+- `source`: `String` - هو نمط مسار الطلب الوارد.
+- `destination`: `String` - المسار الذي تريد التوجيه إليه.
+- `basePath`: `false` أو `undefined` - إذا كانت القيمة false فلن يتم تضمين basePath عند المطابقة، يمكن استخدامها لإعادة التوجيه الخارجية فقط.
+- `locale`: `false` أو `undefined` - ما إذا كان يجب عدم تضمين اللغة المحلية عند المطابقة.
+- `has` هي مصفوفة من [كائنات has](#header-cookie-and-query-matching) بخصائص `type` و `key` و `value`.
+- `missing` هي مصفوفة من [كائنات missing](#header-cookie-and-query-matching) بخصائص `type` و `key` و `value`.
+
+عندما ترجع دالة `rewrites` مصفوفة، يتم تطبيق إعادة التوجيه بعد التحقق من نظام الملفات (الصفحات وملفات `/public`) وقبل المسارات الديناميكية. عندما ترجع الدالة كائنًا من المصفوفات بشكل محدد، يمكن تغيير هذا السلوك والتحكم فيه بدقة أكبر، اعتبارًا من إصدار `v10.1` من Next.js:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return {
+      beforeFiles: [
+        // يتم التحقق من إعادة التوجيه هذه بعد الرؤوس/إعادة التوجيه
+        // وقبل جميع الملفات بما في ذلك ملفات _next/public مما
+        // يسمح بتجاوز ملفات الصفحات
+        {
+          source: '/some-page',
+          destination: '/somewhere-else',
+          has: [{ type: 'query', key: 'overrideMe' }],
+        },
+      ],
+      afterFiles: [
+        // يتم التحقق من إعادة التوجيه هذه بعد التحقق من ملفات الصفحات/العامة
+        // ولكن قبل المسارات الديناميكية
+        {
+          source: '/non-existent',
+          destination: '/somewhere-else',
+        },
+      ],
+      fallback: [
+        // يتم التحقق من إعادة التوجيه هذه بعد التحقق من ملفات الصفحات/العامة
+        // والمسارات الديناميكية
+        {
+          source: '/:path*',
+          destination: `https://my-old-site.com/:path*`,
+        },
+      ],
+    }
+  },
+}
+```
+
+> **معلومة مفيدة**: إعادة التوجيه في `beforeFiles` لا تتحقق من نظام الملفات/المسارات الديناميكية مباشرة بعد مطابقة المصدر، بل تستمر حتى يتم التحقق من جميع `beforeFiles`.
+
+ترتيب التحقق من المسارات في Next.js هو:
+
+<AppOnly>
+
+1. يتم التحقق من [الرؤوس](/docs/app/api-reference/next-config-js/headers) وتطبيقها
+2. يتم التحقق من [إعادة التوجيه](/docs/app/api-reference/next-config-js/redirects) وتطبيقها
+3. يتم التحقق من إعادة التوجيه `beforeFiles` وتطبيقها
+4. يتم التحقق من الملفات الثابتة من [الدليل العام](/docs/app/building-your-application/optimizing/static-assets)، وملفات `_next/static`، والصفحات غير الديناميكية وتقديمها
+5. يتم التحقق من إعادة التوجيه `afterFiles` وتطبيقها، إذا تمت مطابقة إحدى إعادة التوجيه هذه، نتحقق من المسارات الديناميكية/الملفات الثابتة بعد كل مطابقة
+6. يتم التحقق من إعادة التوجيه `fallback` وتطبيقها، يتم تطبيق هذه قبل عرض صفحة 404 وبعد التحقق من جميع المسارات الديناميكية/الأصول الثابتة. إذا كنت تستخدم [fallback: true/'blocking'](/docs/pages/api-reference/functions/get-static-paths#fallback-true) في `getStaticPaths`، فلن يتم تشغيل إعادة التوجيه `fallback` المحددة في ملف `next.config.js`.
+
+</AppOnly>
+
+<PagesOnly>
+
+1. يتم التحقق من [الرؤوس](/docs/pages/api-reference/next-config-js/headers) وتطبيقها
+2. يتم التحقق من [إعادة التوجيه](/docs/pages/api-reference/next-config-js/redirects) وتطبيقها
+3. يتم التحقق من إعادة التوجيه `beforeFiles` وتطبيقها
+4. يتم التحقق من الملفات الثابتة من [الدليل العام](/docs/pages/building-your-application/optimizing/static-assets)، وملفات `_next/static`، والصفحات غير الديناميكية وتقديمها
+5. يتم التحقق من إعادة التوجيه `afterFiles` وتطبيقها، إذا تمت مطابقة إحدى إعادة التوجيه هذه، نتحقق من المسارات الديناميكية/الملفات الثابتة بعد كل مطابقة
+6. يتم التحقق من إعادة التوجيه `fallback` وتطبيقها، يتم تطبيق هذه قبل عرض صفحة 404 وبعد التحقق من جميع المسارات الديناميكية/الأصول الثابتة. إذا كنت تستخدم [fallback: true/'blocking'](/docs/pages/api-reference/functions/get-static-paths#fallback-true) في `getStaticPaths`، فلن يتم تشغيل إعادة التوجيه `fallback` المحددة في ملف `next.config.js`.
+
+</PagesOnly>
+
+## معلمات إعادة التوجيه
+
+عند استخدام المعلمات في إعادة التوجيه، يتم تمرير المعلمات في الاستعلام افتراضيًا عندما لا يتم استخدام أي من المعلمات في `destination`.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/old-about/:path*',
+        destination: '/about', // لا يتم استخدام معلمة :path هنا لذا سيتم تمريرها تلقائيًا في الاستعلام
+      },
+    ]
+  },
+}
+```
+
+إذا تم استخدام معلمة في الوجهة، فلن يتم تمرير أي من المعلمات تلقائيًا في الاستعلام.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/docs/:path*',
+        destination: '/:path*', // يتم استخدام معلمة :path هنا لذا لن يتم تمريرها تلقائيًا في الاستعلام
+      },
+    ]
+  },
+}
+```
+
+لا يزال بإمكانك تمرير المعلمات يدويًا في الاستعلام إذا تم استخدام واحد بالفعل في الوجهة عن طريق تحديد الاستعلام في `destination`.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/:first/:second',
+        destination: '/:first?second=:second',
+        // نظرًا لأن المعلمة :first مستخدمة في الوجهة، لن تتم إضافة المعلمة :second
+        // تلقائيًا في الاستعلام على الرغم من أنه يمكننا إضافتها يدويًا
+        // كما هو موضح أعلاه
+      },
+    ]
+  },
+}
+```
+
+> **معلومة مفيدة**: سيتم تحليل معلمات الصفحات الثابتة من [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization) أو [التجهيز المسبق](/docs/pages/building-your-application/data-fetching/get-static-props) من إعادة التوجيه على العميل بعد التميؤ وتوفيرها في الاستعلام.
+
+## مطابقة المسار
+
+يُسمح بمطابقة المسار، على سبيل المثال `/blog/:slug` ستطابق `/blog/hello-world` (بدون مسارات متداخلة):
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog/:slug',
+        destination: '/news/:slug', // يمكن استخدام المعلمات المتطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Wildcard
+
+لمطابقة مسار wildcard، يمكنك استخدام `*` بعد معلمة، على سبيل المثال `/blog/:slug*` ستطابق `/blog/a/b/c/d/hello-world`:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog/:slug*',
+        destination: '/news/:slug*', // يمكن استخدام المعلمات المتطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+### مطابقة مسار Regex
+
+لمطابقة مسار regex، يمكنك لف regex بين قوسين بعد معلمة، على سبيل المثال `/blog/:slug(\\d{1,})` ستطابق `/blog/123` ولكن ليس `/blog/abc`:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/old-blog/:post(\\d{1,})',
+        destination: '/blog/:post', // يمكن استخدام المعلمات المتطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+يتم استخدام الأحرف التالية `(`, `)`, `{`, `}`, `[`, `]`, `|`, `\`, `^`, `.`, `:`, `*`, `+`, `-`, `?`, `$` لمطابقة مسار regex، لذا عند استخدامها في `source` كقيم غير خاصة، يجب تهريبها بإضافة `\\` قبلها:
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        // هذا سيطابق `/english(default)/something` عند الطلب
+        source: '/english\\(default\\)/:slug',
+        destination: '/en-us/:slug',
+      },
+    ]
+  },
+}
+```
+
+## مطابقة الرأس، الكوكي، والاستعلام
+
+لمطابقة إعادة توجيه فقط عندما تتطابق قيم الرأس أو الكوكي أو الاستعلام مع حقل `has` أو لا تتطابق مع حقل `missing`، يمكن استخدام `has` و `missing`. يجب أن تتطابق كل من `source` وجميع عناصر `has` وألا تتطابق جميع عناصر `missing` لتطبيق إعادة التوجيه.
+
+يمكن أن تحتوي عناصر `has` و `missing` على الحقول التالية:
+
+- `type`: `String` - يجب أن يكون إما `header` أو `cookie` أو `host` أو `query`.
+- `key`: `String` - المفتاح من النوع المحدد للمطابقة ضده.
+- `value`: `String` أو `undefined` - القيمة للتحقق منها، إذا كانت undefined فستطابق أي قيمة. يمكن استخدام سلسلة تشبه regex لالتقاط جزء معين من القيمة، على سبيل المثال إذا تم استخدام القيمة `first-(?<paramName>.*)` لـ `first-second` فسيتم استخدام `second` في الوجهة مع `:paramName`.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      // إذا كان الرأس `x-rewrite-me` موجودًا،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-rewrite-me',
+          },
+        ],
+        destination: '/another-page',
+      },
+      // إذا كان الرأس `x-rewrite-me` غير موجود،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        missing: [
+          {
+            type: 'header',
+            key: 'x-rewrite-me',
+          },
+        ],
+        destination: '/another-page',
+      },
+      // إذا تمت مطابقة المصدر والاستعلام والكوكي،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/specific/:path*',
+        has: [
+          {
+            type: 'query',
+            key: 'page',
+            // لن تكون قيمة الصفحة متاحة في
+            // الوجهة نظرًا لتوفير القيمة وعدم
+            // استخدام مجموعة التقاط مسماة مثل (?<page>home)
+            value: 'home',
+          },
+          {
+            type: 'cookie',
+            key: 'authorized',
+            value: 'true',
+          },
+        ],
+        destination: '/:path*/home',
+      },
+      // إذا كان الرأس `x-authorized` موجودًا و
+      // يحتوي على قيمة مطابقة، سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'header',
+            key: 'x-authorized',
+            value: '(?<authorized>yes|true)',
+          },
+        ],
+        destination: '/home?authorized=:authorized',
+      },
+      // إذا كان المضيف هو `example.com`،
+      // سيتم تطبيق إعادة التوجيه هذه
+      {
+        source: '/:path*',
+        has: [
+          {
+            type: 'host',
+            value: 'example.com',
+          },
+        ],
+        destination: '/another-page',
+      },
+    ]
+  },
+}
+```
+
+## إعادة التوجيه إلى URL خارجي
+
+<details>
+  <summary>أمثلة</summary>
+
+- [التبني التدريجي لـ Next.js](https://github.com/vercel/next.js/tree/canary/examples/custom-routes-proxying)
+- [استخدام مناطق متعددة](https://github.com/vercel/next.js/tree/canary/examples/with-zones)
+
+</details>
+
+تسمح لك إعادة التوجيه بإعادة التوجيه إلى URL خارجي. هذا مفيد بشكل خاص للتبني التدريجي لـ Next.js. فيما يلي مثال لإعادة توجيه مسار `/blog` من تطبيقك الرئيسي إلى موقع خارجي.
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog',
+        destination: 'https://example.com/blog',
+      },
+      {
+        source: '/blog/:slug',
+        destination: 'https://example.com/blog/:slug', // يمكن استخدام المعلمات المتطابقة في الوجهة
+      },
+    ]
+  },
+}
+```
+
+إذا كنت تستخدم `trailingSlash: true`، فأنت بحاجة أيضًا إلى إضافة شرطة مائلة في نهاية المعلمة `source`. إذا كان خادم الوجهة يتوقع أيضًا شرطة مائلة في النهاية، فيجب تضمينها في المعلمة `destination`.
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+  async rewrites() {
+    return [
+      {
+        source: '/blog/',
+        destination: 'https://example.com/blog/',
+      },
+      {
+        source: '/blog/:path*/',
+        destination: 'https://example.com/blog/:path*/',
+      },
+    ]
+  },
+}
+```
+
+### التبني التدريجي لـ Next.js
+
+يمكنك أيضًا جعل Next.js يعود إلى الوكيل لموقع ويب موجود بعد التحقق من جميع مسارات Next.js.
+
+بهذه الطريقة لا تحتاج إلى تغيير تكوين إعادة التوجيه عند نقل المزيد من الصفحات إلى Next.js
+
+```js filename="next.config.js"
+module.exports = {
+  async rewrites() {
+    return {
+      fallback: [
+        {
+          source: '/:path*',
+          destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,
+        },
+      ],
+    }
+  },
+}
+```
+
+### إعادة التوجيه مع دعم basePath
+
+عند استخدام [دعم `basePath`](/docs/app/api-reference/next-config-js/basePath) مع إعادة التوجيه، يتم إضافة `basePath` تلقائيًا إلى كل `source` و `destination` ما لم تضيف `basePath: false` إلى إعادة التوجيه:
+
+```js filename="next.config.js"
+module.exports = {
+  basePath: '/docs',
+
+  async rewrites() {
+    return [
+      {
+        source: '/with-basePath', // يصبح تلقائيًا /docs/with-basePath
+        destination: '/another', // يصبح تلقائيًا /docs/another
+      },
+      {
+        // لا يضيف /docs إلى /without-basePath نظرًا لتعيين basePath: false
+        // ملاحظة: لا يمكن استخدام هذا لإعادة التوجيه الداخلية مثل `destination: '/another'`
+        source: '/without-basePath',
+        destination: 'https://example.com',
+        basePath: false,
+      },
+    ]
+  },
+}
+```
+
+### إعادة التوجيه مع دعم i18n
+
+<AppOnly>
+
+عند استخدام [دعم `i18n`](/docs/app/building-your-application/routing/internationalization) مع إعادة التوجيه، يتم إضافة البادئات تلقائيًا إلى `source` و `destination` للتعامل مع `locales` المكونة ما لم تضيف `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، يجب إضافة بادئة اللغة إلى `source` و `destination` لمطابقتها بشكل صحيح.
+
+</AppOnly>
+
+<PagesOnly>
+
+عند استخدام [دعم `i18n`](/docs/pages/building-your-application/routing/internationalization) مع إعادة التوجيه، يتم إضافة البادئات تلقائيًا إلى `source` و `destination` للتعامل مع `locales` المكونة ما لم تضيف `locale: false` إلى إعادة التوجيه. إذا تم استخدام `locale: false`، يجب إضافة بادئة اللغة إلى `source` و `destination` لمطابقتها بشكل صحيح.
+
+</PagesOnly>
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async rewrites() {
+    return [
+      {
+        source: '/with-locale', // يتعامل تلقائيًا مع جميع اللغات
+        destination: '/another', // يمرر اللغة تلقائيًا
+      },
+      {
+        // لا يتعامل مع اللغات تلقائيًا نظرًا لتعيين locale: false
+        source: '/nl/with-locale-manual',
+        destination: '/nl/another',
+        locale: false,
+      },
+      {
+        // هذا يطابق '/' لأن `en` هي defaultLocale
+        source: '/en',
+        destination: '/en/another',
+        locale: false,
+      },
+      {
+        // من الممكن مطابقة جميع اللغات حتى عند تعيين locale: false
+        source: '/:locale/api-alias/:path*',
+        destination: '/api/:path*',
+        locale: false,
+      },
+      {
+        // يتم تحويل هذا إلى /(en|fr|de)/(.*) لذا لن يطابق
+        // المسارات العلوية `/` أو `/fr` مثل /:path*
+        source: '/(.*)',
+        destination: '/another',
+      },
+    ]
+  },
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات          |
+| --------- | ---------------- |
+| `v13.3.0` | تم إضافة `missing`. |
+| `v10.2.0` | تم إضافة `has`.     |
+| `v9.5.0`  | تم إضافة العناوين.   |
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/serverActions.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/serverActions.mdx
new file mode 100644
index 00000000..321d728d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/serverActions.mdx
@@ -0,0 +1,57 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:19.754Z
+title: serverActions
+description: تكوين سلوك إجراءات الخادم (Server Actions) في تطبيق Next.js الخاص بك.
+---
+
+خيارات لتكوين سلوك إجراءات الخادم (Server Actions) في تطبيق Next.js الخاص بك.
+
+## `allowedOrigins`
+
+قائمة بنطاقات المنشأ الآمنة الإضافية التي يمكن استدعاء إجراءات الخادم (Server Actions) منها. يقوم Next.js بمقارنة منشأ طلب إجراء الخادم مع نطاق المضيف، مما يضمن تطابقهما لمنع هجمات CSRF. إذا لم يتم توفيره، يُسمح فقط بنفس المنشأ.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+
+module.exports = {
+  experimental: {
+    serverActions: {
+      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
+    },
+  },
+}
+```
+
+## `bodySizeLimit`
+
+بشكل افتراضي، الحد الأقصى لحجم جسم الطلب المرسل إلى إجراء الخادم (Server Action) هو 1 ميجابايت، لمنع استهلاك موارد الخادم المفرطة في تحليل كميات كبيرة من البيانات، وكذلك منع هجمات DDoS المحتملة.
+
+ومع ذلك، يمكنك تكوين هذا الحد باستخدام خيار `serverActions.bodySizeLimit`. يمكن أن يأخذ عدد البايتات أو أي تنسيق سلسلة مدعوم من قبل البايتات، على سبيل المثال `1000`، `'500kb'` أو `'3mb'`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+
+module.exports = {
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '2mb',
+    },
+  },
+}
+```
+
+## تمكين إجراءات الخادم (v13)
+
+أصبحت إجراءات الخادم (Server Actions) ميزة مستقرة في Next.js 14، وتم تمكينها افتراضيًا. ومع ذلك، إذا كنت تستخدم إصدارًا أقدم من Next.js، يمكنك تمكينها عن طريق تعيين `experimental.serverActions` إلى `true`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const config = {
+  experimental: {
+    serverActions: true,
+  },
+}
+
+module.exports = config
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/serverComponentsExternalPackages.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/serverComponentsExternalPackages.mdx
new file mode 100644
index 00000000..76bce798
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/serverComponentsExternalPackages.mdx
@@ -0,0 +1,75 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:24.024Z
+title: serverComponentsExternalPackages
+description: استثناء تبعيات محددة من تجميع مكونات الخادم واستخدام `require` الأصلي في Node.js.
+---
+
+سيتم تجميع التبعيات المستخدمة داخل [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components) و[معالجات المسارات (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) تلقائيًا بواسطة Next.js.
+
+إذا كانت التبعية تستخدم ميزات محددة في Node.js، يمكنك اختيار استثناء تبعيات محددة من تجميع مكونات الخادم واستخدام `require` الأصلي في Node.js.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ['@acme/ui'],
+  },
+}
+
+module.exports = nextConfig
+```
+
+يتضمن Next.js [قائمة قصيرة من الحزم الشائعة](https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/server-external-packages.json) التي تعمل حاليًا على التوافق ويتم استثناؤها تلقائيًا:
+
+- `@aws-sdk/client-s3`
+- `@aws-sdk/s3-presigned-post`
+- `@blockfrost/blockfrost-js`
+- `@highlight-run/node`
+- `@jpg-store/lucid-cardano`
+- `@libsql/client`
+- `@mikro-orm/core`
+- `@mikro-orm/knex`
+- `@prisma/client`
+- `@react-pdf/renderer`
+- `@sentry/profiling-node`
+- `@swc/core`
+- `argon2`
+- `autoprefixer`
+- `aws-crt`
+- `bcrypt`
+- `better-sqlite3`
+- `canvas`
+- `cpu-features`
+- `cypress`
+- `eslint`
+- `express`
+- `firebase-admin`
+- `jest`
+- `jsdom`
+- `libsql`
+- `mdx-bundler`
+- `mongodb`
+- `mongoose`
+- `next-mdx-remote`
+- `next-seo`
+- `node-pty`
+- `node-web-audio-api`
+- `pg`
+- `playwright`
+- `postcss`
+- `prettier`
+- `prisma`
+- `puppeteer-core`
+- `puppeteer`
+- `rimraf`
+- `sharp`
+- `shiki`
+- `sqlite3`
+- `tailwindcss`
+- `ts-node`
+- `typescript`
+- `vscode-oniguruma`
+- `webpack`
+- `websocket`
+- `zeromq`
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/staleTimes.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/staleTimes.mdx
new file mode 100644
index 00000000..c1791d59
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/staleTimes.mdx
@@ -0,0 +1,49 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:28.414Z
+title: أوقات التقادم (تجريبي)
+description: تعلم كيفية تجاوز وقت إبطال ذاكرة التخزين المؤقت لموجه العميل (Client Router Cache).
+---
+
+> **تحذير**: تكوين `staleTimes` هو ميزة تجريبية. من المحتمل أن تتغير استراتيجية التكوين هذه في المستقبل.
+
+`staleTimes` هي ميزة تجريبية تتيح تكوين [فترة الإبطال](/docs/app/building-your-application/caching#duration-3) لذاكرة التخزين المؤقت لموجه العميل.
+
+هذا الخيار متاح بدءًا من الإصدار v14.2.0-canary.53.
+
+يمكنك تمكين هذه الميزة التجريبية وتوفير أوقات إعادة تحقق مخصصة عن طريق تعيين علامة `staleTimes` التجريبية:
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    staleTimes: {
+      dynamic: 30,
+      static: 180,
+    },
+  },
+}
+
+module.exports = nextConfig
+```
+
+تتوافق خصائص `static` و `dynamic` مع الفترة الزمنية (بالثواني) بناءً على أنواع مختلفة من [الجلب المسبق للروابط](/docs/app/api-reference/components/link#prefetch).
+
+- تُستخدم الخاصية `dynamic` عندما لا تكون الصفحة مُولدة بشكل ثابت أو غير مسبوقة الجلب بالكامل (أي مع prefetch={true}).
+  - الافتراضي: 0 ثانية (غير مخزنة مؤقتًا)
+- تُستخدم الخاصية `static` للصفحات المُولدة بشكل ثابت، أو عندما تكون خاصية `prefetch` في مكون `Link` مضبوطة على `true`، أو عند استدعاء [`router.prefetch`](/docs/app/building-your-application/caching#routerprefetch).
+  - الافتراضي: 5 دقائق
+
+> **معلومة مفيدة:**
+>
+> - تعتبر [حدود التحميل](/docs/app/api-reference/file-conventions/loading) قابلة لإعادة الاستخدام لفترة `static` المحددة في هذا التكوين.
+> - لا يؤثر هذا على [التصيير الجزئي](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering)، **بمعنى أن التخطيطات المشتركة لن يتم إعادة جلبها تلقائيًا في كل تنقل، فقط جزء الصفحة الذي يتغير.**
+> - لا يغير هذا سلوك التخزين المؤقت للخلف/الأمام [/docs/app/building-your-application/caching#client-side-router-cache) لمنع تغيير التخطيط وفقدان موضع التمرير في المتصفح.
+
+يمكنك معرفة المزيد عن ذاكرة التخزين المؤقت لموجه العميل [هنا](/docs/app/building-your-application/caching#client-side-router-cache).
+
+### سجل الإصدارات
+
+| الإصدار   | التغييرات                              |
+| --------- | ------------------------------------ |
+| `v14.2.0` | إدخال `staleTimes` التجريبي |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx
new file mode 100644
index 00000000..1e48f8b0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:10.438Z
+title: trailingSlash
+description: تكوين صفحات Next.js للتعامل مع أو بدون شرطة مائلة نهائية.
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+بشكل افتراضي، سيقوم Next.js بإعادة توجيه عناوين URL التي تحتوي على شرطة مائلة نهائية إلى نظيراتها بدون الشرطة المائلة. على سبيل المثال، `/about/` سيتم إعادة توجيهها إلى `/about`. يمكنك تكوين هذا السلوك ليعمل بالعكس، حيث يتم إعادة توجيه عناوين URL بدون شرطة مائلة نهائية إلى نظيراتها التي تحتوي على شرطة مائلة نهائية.
+
+افتح ملف `next.config.js` وأضف إعداد `trailingSlash`:
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+}
+```
+
+مع تفعيل هذا الخيار، سيتم إعادة توجيه عناوين URL مثل `/about` إلى `/about/`.
+
+عند استخدام هذا الخيار مع إعداد [`output: "export"`](/docs/app/building-your-application/deploying/static-exports)، ستقوم صفحة `/about` بإخراج ملف `/about/index.html` (بدلاً من الملف الافتراضي `/about.html`).
+
+## سجل التغييرات
+
+| الإصدار  | التغييرات                |
+| -------- | ---------------------- |
+| `v9.5.0` | تمت إضافة `trailingSlash`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/transpilePackages.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/transpilePackages.mdx
new file mode 100644
index 00000000..f487b520
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/transpilePackages.mdx
@@ -0,0 +1,25 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:06.423Z
+title: transpilePackages
+description: تحويل تلقائي وحزم التبعيات من الحزم المحلية (مثل مستودعات أحادية) أو من التبعيات الخارجية (`node_modules`).
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه صفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+يمكن لـ Next.js تحويل وحزم التبعيات تلقائيًا من الحزم المحلية (مثل المستودعات الأحادية) أو من التبعيات الخارجية (`node_modules`). هذا يحل محل حزمة `next-transpile-modules`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@acme/ui', 'lodash-es'],
+}
+
+module.exports = nextConfig
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                    |
+| --------- | -------------------------- |
+| `v13.0.0` | تمت إضافة `transpilePackages`. |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/turbo.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/turbo.mdx
new file mode 100644
index 00000000..559017a5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/turbo.mdx
@@ -0,0 +1,106 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:28:47.378Z
+title: turbo (تجريبي)
+nav_title: turbo
+description: تكوين Next.js مع خيارات خاصة بـ Turbopack
+---
+
+{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+يمكن تخصيص Turbopack لتحويل ملفات مختلفة وتغيير طريقة حل الوحدات النمطية.
+
+> **من الجيد معرفة**:
+>
+> - هذه الميزات تجريبية وستعمل فقط مع `next --turbo`.
+> - لا يتطلب Turbopack لـ Next.js محملات (loaders) أو تكوين محملات للوظائف المدمجة. يحتوي Turbopack على دعم مدمج لـ CSS وتجميع JavaScript الحديث، لذا لا حاجة لـ `css-loader` أو `postcss-loader` أو `babel-loader` إذا كنت تستخدم `@babel/preset-env`.
+
+## محملات webpack
+
+إذا كنت بحاجة إلى دعم محملات يتجاوز ما هو مدمج، فإن العديد من محملات webpack تعمل بالفعل مع Turbopack. هناك حالياً بعض القيود:
+
+- فقط مجموعة أساسية من واجهة برمجة تطبيقات محملات webpack تم تنفيذها. حالياً، هناك تغطية كافية لبعض المحملات الشائعة، وسنقوم بتوسيع دعم واجهة برمجة التطبيقات في المستقبل.
+- فقط المحملات التي تُرجع كود JavaScript مدعومة. المحملات التي تحول ملفات مثل صفحات الأنماط أو الصور غير مدعومة حالياً.
+- يجب أن تكون الخيارات الممررة إلى محملات webpack بدائية JavaScript عادية أو كائنات أو مصفوفات. على سبيل المثال، لا يمكن تمرير وحدات الإضافات (plugins) التي تم `require()`ها كقيم للخيارات.
+
+لتكوين المحملات، أضف أسماء المحملات التي قمت بتثبيتها وأي خيارات في `next.config.js`، وقم بتعيين امتدادات الملفات إلى قائمة بالمحملات:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    turbo: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      },
+    },
+  },
+}
+```
+
+> **من الجيد معرفة**: قبل إصدار Next.js 13.4.4، كان `experimental.turbo.rules` يُسمى `experimental.turbo.loaders` وكان يقبل فقط امتدادات الملفات مثل `.mdx` بدلاً من `*.mdx`.
+
+### المحملات المدعومة
+
+تم اختبار المحملات التالية للعمل مع تنفيذ محملات webpack في Turbopack:
+
+- [`babel-loader`](https://www.npmjs.com/package/babel-loader)
+- [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack)
+- [`svg-inline-loader`](https://www.npmjs.com/package/svg-inline-loader)
+- [`yaml-loader`](https://www.npmjs.com/package/yaml-loader)
+- [`string-replace-loader`](https://www.npmjs.com/package/string-replace-loader)
+- [`raw-loader`](https://www.npmjs.com/package/raw-loader)
+- ['sass-loader'](https://www.npmjs.com/package/sass-loader)
+
+## أسماء مستعارة للحل (Resolve aliases)
+
+من خلال `next.config.js`، يمكن تكوين Turbopack لتعديل حل الوحدات النمطية باستخدام أسماء مستعارة، مشابه لتكوين [`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias) في webpack.
+
+لتكوين أسماء مستعارة للحل، قم بتعيين الأنماط المستوردة إلى وجهتها الجديدة في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    turbo: {
+      resolveAlias: {
+        underscore: 'lodash',
+        mocha: { browser: 'mocha/browser-entry.js' },
+      },
+    },
+  },
+}
+```
+
+هذا يجعل استيراد حزمة `underscore` يشير إلى حزمة `lodash`. بمعنى آخر، `import underscore from 'underscore'` ستحمل الوحدة النمطية `lodash` بدلاً من `underscore`.
+
+يدعم Turbopack أيضًا التسمية المشروطة من خلال هذا الحقل، مشابه لـ [الصادرات المشروطة](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports) في Node.js. حالياً، فقط شرط `browser` مدعوم. في المثال أعلاه، سيتم توجيه استيرادات الوحدة النمطية `mocha` إلى `mocha/browser-entry.js` عندما يكون Turbopack موجهاً لبيئات المتصفح.
+
+## امتدادات الحل (Resolve extensions)
+
+من خلال `next.config.js`، يمكن تكوين Turbopack لحل الوحدات النمطية بامتدادات مخصصة، مشابه لتكوين [`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions) في webpack.
+
+لتكوين امتدادات الحل، استخدم حقل `resolveExtensions` في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    turbo: {
+      resolveExtensions: [
+        '.mdx',
+        '.tsx',
+        '.ts',
+        '.jsx',
+        '.js',
+        '.mjs',
+        '.json',
+      ],
+    },
+  },
+}
+```
+
+هذا يستبدل امتدادات الحل الأصلية بالقائمة المقدمة. تأكد من تضمين الامتدادات الافتراضية.
+
+لمزيد من المعلومات والإرشادات حول كيفية ترحيل تطبيقك من webpack إلى Turbopack، راجع [وثائق Turbopack حول التوافق مع webpack](https://turbo.build/pack/docs/migrating-from-webpack).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx
new file mode 100644
index 00000000..6ba62593
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx
@@ -0,0 +1,20 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:50.414Z
+title: typedRoutes (تجريبي)
+nav_title: typedRoutes
+description: تمكين الدعم التجريبي للروابط ذات الأنواع الثابتة.
+---
+
+دعم تجريبي للـ[روابط ذات أنواع ثابتة](/docs/app/building-your-application/configuring/typescript#statically-typed-links). هذه الميزة تتطلب استخدام موجه التطبيق (App Router) بالإضافة إلى TypeScript في مشروعك.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    typedRoutes: true,
+  },
+}
+
+module.exports = nextConfig
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/typescript.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/typescript.mdx
new file mode 100644
index 00000000..04afe45f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/typescript.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:49.696Z
+title: TypeScript
+description: يبلغ Next.js عن أخطاء TypeScript بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+---
+
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
+يفشل Next.js في عملية **بناء الإنتاج** (`next build`) عند وجود أخطاء TypeScript في مشروعك.
+
+إذا كنت ترغب في أن يقوم Next.js بإنشاء كود إنتاج بشكل خطير حتى عند وجود أخطاء في تطبيقك، يمكنك تعطيل خطوة التحقق من الأنواع المدمجة.
+
+إذا تم التعطيل، تأكد من أنك تقوم بإجراء فحوصات الأنواع كجزء من عملية البناء أو النشر، وإلا فقد يكون هذا خطيرًا جدًا.
+
+افتح ملف `next.config.js` وقم بتمكين خيار `ignoreBuildErrors` في إعدادات `typescript`:
+
+```js filename="next.config.js"
+module.exports = {
+  typescript: {
+    // !! تحذير !!
+    // السماح بشكل خطير بإكمال عمليات بناء الإنتاج بنجاح حتى لو
+    // كان مشروعك يحتوي على أخطاء في الأنواع.
+    // !! تحذير !!
+    ignoreBuildErrors: true,
+  },
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/urlImports.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/urlImports.mdx
new file mode 100644
index 00000000..eec7228f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/urlImports.mdx
@@ -0,0 +1,93 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:54.208Z
+title: استيراد من روابط URL
+description: تكوين Next.js للسماح باستيراد وحدات من روابط خارجية (ميزة تجريبية).
+---
+
+{/* المحتوى الخاص بهذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه داخل مكون. */}
+
+استيراد الروابط هو ميزة تجريبية تسمح لك باستيراد وحدات مباشرة من خوادم خارجية (بدلاً من القرص المحلي).
+
+> **تحذير**: هذه الميزة تجريبية. استخدم فقط النطاقات التي تثق بها لتنزيل وتنفيذ التعليمات البرمجية على جهازك. يرجى توخي الحذر والانتباه حتى يتم اعتماد الميزة كإصدار مستقر.
+
+لتفعيل هذه الميزة، أضف بادئات الروابط المسموح بها داخل ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    urlImports: ['https://example.com/assets/', 'https://cdn.skypack.dev'],
+  },
+}
+```
+
+ثم يمكنك استيراد الوحدات مباشرة من الروابط:
+
+```js
+import { a, b, c } from 'https://example.com/assets/some/module.js'
+```
+
+يمكن استخدام استيراد الروابط في أي مكان يمكن استخدام استيراد الحزم العادية فيه.
+
+## نموذج الأمان
+
+تم تصميم هذه الميزة مع **الأمان كأولوية قصوى**. في البداية، أضفنا علامة تجريبية تفرض عليك السماح صراحةً بالنطاقات التي تقبل استيراد الروابط منها. نحن نعمل على تطوير ذلك أكثر عن طريق تقييد استيراد الروابط لتنفيذها في بيئة المتصفح الآمنة باستخدام [Edge Runtime](/docs/app/api-reference/edge).
+
+## ملف القفل
+
+عند استخدام استيراد الروابط، سيقوم Next.js بإنشاء دليل `next.lock` يحتوي على ملف قفل والمواد التي تم جلبها.
+يجب **إضافة هذا الدليل إلى Git** وعدم تجاهله عبر ملف `.gitignore`.
+
+- عند تشغيل `next dev`، سيقوم Next.js بتنزيل وإضافة جميع عمليات استيراد الروابط المكتشفة حديثًا إلى ملف القفل الخاص بك
+- عند تشغيل `next build`، سيقوم Next.js باستخدام ملف القفل فقط لبناء التطبيق للإنتاج
+
+عادةً، لا تكون هناك حاجة لطلبات الشبكة وأي ملف قفل قديم سيؤدي إلى فشل عملية البناء.
+يوجد استثناء واحد وهو الموارد التي تستجيب بـ `Cache-Control: no-cache`.
+ستحتوي هذه الموارد على إدخال `no-cache` في ملف القفل وسيتم جلبها دائمًا من الشبكة في كل عملية بناء.
+
+## أمثلة
+
+### Skypack
+
+```js
+import confetti from 'https://cdn.skypack.dev/canvas-confetti'
+import { useEffect } from 'react'
+
+export default () => {
+  useEffect(() => {
+    confetti()
+  })
+  return <p>Hello</p>
+}
+```
+
+### استيراد صور ثابتة
+
+```js
+import Image from 'next/image'
+import logo from 'https://example.com/assets/logo.png'
+
+export default () => (
+  <div>
+    <Image src={logo} placeholder="blur" />
+  </div>
+)
+```
+
+### روابط في CSS
+
+```css
+.className {
+  background: url('https://example.com/assets/hero.jpg');
+}
+```
+
+### استيراد أصول
+
+```js
+const logo = new URL('https://example.com/assets/file.txt', import.meta.url)
+
+console.log(logo.pathname)
+
+// يطبع "/_next/static/media/file.a9727b5d.txt"
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/webVitalsAttribution.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/webVitalsAttribution.mdx
new file mode 100644
index 00000000..f53548a1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/webVitalsAttribution.mdx
@@ -0,0 +1,26 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:40.835Z
+title: خيار webVitalsAttribution
+description: تعلم كيفية استخدام خيار webVitalsAttribution لتحديد مصدر مشكلات مؤشرات ويب الأساسية (Web Vitals).
+---
+
+{/* المحتوى مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
+
+عند تصحيح المشكلات المتعلقة بمؤشرات ويب الأساسية (Web Vitals)، من المفيد غالبًا أن نتمكن من تحديد مصدر المشكلة بدقة. 
+على سبيل المثال، في حالة التحول التراكمي في التخطيط (CLS)، قد نرغب في معرفة العنصر الأول الذي تحرك عند حدوث أكبر تحول في التخطيط.
+أو في حالة أكبر محتوى مرئي مرسوم (LCP)، قد نرغب في تحديد العنصر المقابل لـ LCP للصفحة.
+إذا كان عنصر LCP عبارة عن صورة، فإن معرفة عنوان URL لمورد الصورة يمكن أن يساعدنا في تحديد الأصل الذي نحتاج إلى تحسينه.
+
+يسمح لنا تحديد أكبر مساهم في درجة مؤشرات ويب الأساسية، والمعروف باسم [الإسناد (attribution)](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution)،
+بالحصول على معلومات أكثر تفصيلاً مثل إدخالات [PerformanceEventTiming](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming)، و[PerformanceNavigationTiming](https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming)، و[PerformanceResourceTiming](https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming).
+
+الإسناد معطل افتراضيًا في Next.js ولكن يمكن تفعيله **لكل مقياس** عن طريق تحديد التالي في ملف `next.config.js`.
+
+```js filename="next.config.js"
+experimental: {
+  webVitalsAttribution: ['CLS', 'LCP']
+}
+```
+
+القيم الصالحة للإسناد هي جميع مقاييس `web-vitals` المحددة في نوع [`NextWebVitalsMetric`](https://github.com/vercel/next.js/blob/442378d21dd56d6e769863eb8c2cb521a463a2e0/packages/next/shared/lib/utils.ts#L43).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/webpack.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/webpack.mdx
new file mode 100644
index 00000000..c0383b0b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/05-next-config-js/webpack.mdx
@@ -0,0 +1,90 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:57.799Z
+title: تهيئة Webpack المخصصة
+nav_title: webpack
+description: تعلم كيفية تخصيص تهيئة webpack المستخدمة من قبل Next.js
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+> **من الجيد معرفة**: التغييرات على تهيئة webpack لا تخضع لـ semver لذا تابع على مسؤوليتك الخاصة
+
+قبل الاستمرار في إضافة تهيئة webpack مخصصة لتطبيقك، تأكد من أن Next.js لا يدعم بالفعل حالة الاستخدام الخاصة بك:
+
+<AppOnly>
+
+- [استيراد CSS](/docs/app/building-your-application/styling)
+- [وحدات CSS](/docs/app/building-your-application/styling/css-modules)
+- [استيراد Sass/SCSS](/docs/app/building-your-application/styling/sass)
+- [وحدات Sass/SCSS](/docs/app/building-your-application/styling/sass)
+
+</AppOnly>
+
+<PagesOnly>
+
+- [استيراد CSS](/docs/pages/building-your-application/styling)
+- [وحدات CSS](/docs/pages/building-your-application/styling/css-modules)
+- [استيراد Sass/SCSS](/docs/pages/building-your-application/styling/sass)
+- [وحدات Sass/SCSS](/docs/pages/building-your-application/styling/sass)
+- [تخصيص تهيئة babel](/docs/pages/building-your-application/configuring/babel)
+
+</PagesOnly>
+
+بعض الميزات المطلوبة بشكل شائع متوفرة كإضافات:
+
+- [@next/mdx](https://github.com/vercel/next.js/tree/canary/packages/next-mdx)
+- [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)
+
+لتمديد استخدامنا لـ `webpack`، يمكنك تعريف دالة تمدد تهيئته داخل `next.config.js`، كما يلي:
+
+```js filename="next.config.js"
+module.exports = {
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+  ) => {
+    // مهم: قم بإرجاع التهيئة المعدلة
+    return config
+  },
+}
+```
+
+> يتم تنفيذ دالة `webpack` ثلاث مرات، مرتين للخادم (nodejs / edge runtime) ومرة للعميل. هذا يسمح لك بالتمييز بين تهيئة العميل والخادم باستخدام خاصية `isServer`.
+
+الوسيط الثاني لدالة `webpack` هو كائن يحتوي على الخصائص التالية:
+
+- `buildId`: `String` - معرف البناء، يستخدم كمعرف فريد بين عمليات البناء
+- `dev`: `Boolean` - يشير إلى ما إذا كان التجميع سيتم في وضع التطوير
+- `isServer`: `Boolean` - تكون `true` لتجميع جانب الخادم، و `false` لتجميع جانب العميل
+- `nextRuntime`: `String | undefined` - وقت التشغيل المستهدف لتجميع جانب الخادم؛ إما `"edge"` أو `"nodejs"`، تكون `undefined` لتجميع جانب العميل.
+- `defaultLoaders`: `Object` - محملات افتراضية تستخدم داخليًا من قبل Next.js:
+  - `babel`: `Object` - تهيئة `babel-loader` الافتراضية
+
+مثال على استخدام `defaultLoaders.babel`:
+
+```js
+// مثال تهيئة لإضافة محمل يعتمد على babel-loader
+// هذا المصدر مأخوذ من مصدر إضافة @next/mdx:
+// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
+module.exports = {
+  webpack: (config, options) => {
+    config.module.rules.push({
+      test: /\.mdx/,
+      use: [
+        options.defaultLoaders.babel,
+        {
+          loader: '@mdx-js/loader',
+          options: pluginOptions.options,
+        },
+      ],
+    })
+
+    return config
+  },
+}
+```
+
+#### `nextRuntime`
+
+لاحظ أن `isServer` تكون `true` عندما يكون `nextRuntime` هو `"edge"` أو `"nodejs"`، nextRuntime "`edge`" مخصص حاليًا للـ middleware ومكونات الخادم في وقت تشغيل edge فقط.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/create-next-app.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/create-next-app.mdx
new file mode 100644
index 00000000..e28c04d4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/create-next-app.mdx
@@ -0,0 +1,87 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:54.433Z
+title: create-next-app
+description: إنشاء تطبيقات Next.js باستخدام أمر واحد مع واجهة سطر الأوامر create-next-app.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>محتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا بمكون. */}
+
+تتيح لك واجهة سطر الأوامر `create-next-app` إنشاء تطبيق Next.js جديد بسرعة باستخدام القالب الافتراضي أو [مثال](https://github.com/vercel/next.js/tree/canary/examples) من مستودع Github العام. إنها أسهل طريقة للبدء مع Next.js.
+
+الاستخدام الأساسي:
+
+```bash filename="Terminal"
+npx create-next-app@latest [project-name] [options]
+```
+
+## مرجع
+
+الخيارات المتاحة هي:
+
+| الخيارات                                | الوصف                                                       |
+| --------------------------------------- | ----------------------------------------------------------- |
+| `-h` أو `--help`                        | عرض جميع الخيارات المتاحة                                  |
+| `-v` أو `--version`                     | إخراج رقم الإصدار                                           |
+| `--no-*`                                | إلغاء الخيارات الافتراضية. مثلاً `--no-eslint`              |
+| `--ts` أو `--typescript`                | تهيئة المشروع كنوع TypeScript (افتراضي)                     |
+| `--js` أو `--javascript`                | تهيئة المشروع كنوع JavaScript                               |
+| `--tailwind`                            | تهيئة مع إعدادات Tailwind CSS (افتراضي)                     |
+| `--eslint`                              | تهيئة مع إعدادات ESLint                                     |
+| `--app`                                 | تهيئة المشروع كموجه تطبيق (App Router)                      |
+| `--src-dir`                             | تهيئة داخل مجلد `src/`                                      |
+| `--turbo`                               | تمكين Turbopack افتراضيًا للتطوير                            |
+| `--import-alias <alias-to-configure>`   | تحديد اسم مستعار للاستيراد (افتراضي "@/\*")                 |
+| `--empty`                               | تهيئة مشروع فارغ                                            |
+| `--use-npm`                             | إخبار واجهة سطر الأوامر صراحةً باستخدام npm                 |
+| `--use-pnpm`                            | إخبار واجهة سطر الأوامر صراحةً باستخدام pnpm               |
+| `--use-yarn`                            | إخبار واجهة سطر الأوامر صراحةً باستخدام Yarn                |
+| `--use-bun`                             | إخبار واجهة سطر الأوامر صراحةً باستخدام Bun                |
+| `-e` أو `--example [name] [github-url]` | مثال لتهيئة التطبيق به                                      |
+| `--example-path <path-to-example>`      | تحديد مسار المثال بشكل منفصل                                |
+| `--reset-preferences`                   | إخبار واجهة سطر الأوامر صراحةً بإعادة تعيين التفضيلات       |
+| `--skip-install`                        | إخبار واجهة سطر الأوامر صراحةً بتخطي تثبيت الحزم           |
+| `--yes`                                 | استخدام التفضيلات السابقة أو الإعدادات الافتراضية لجميع الخيارات |
+
+## أمثلة
+
+## مع القالب الافتراضي
+
+لإنشاء تطبيق جديد باستخدام القالب الافتراضي، قم بتنفيذ الأمر التالي في طرفيتك:
+
+```bash filename="Terminal"
+npx create-next-app@latest
+```
+
+ثم سيتم سؤالك الأسئلة التالية:
+
+```txt filename="Terminal"
+ما اسم مشروعك؟ my-app
+هل تريد استخدام TypeScript؟ لا / نعم
+هل تريد استخدام ESLint؟ لا / نعم
+هل تريد استخدام Tailwind CSS؟ لا / نعم
+هل تريد وضع الكود داخل مجلد `src/`؟ لا / نعم
+هل تريد استخدام موجه التطبيق (موصى به)؟ لا / نعم
+هل تريد استخدام Turbopack لـ `next dev`؟ لا / نعم
+هل تريد تخصيص اسم الاستيراد (`@/*` افتراضيًا)؟ لا / نعم
+```
+
+بعد الإجابة على الأسئلة، سيتم إنشاء مشروع جديد مع التكوين الذي اخترته.
+
+## مع مثال رسمي من Next.js
+
+لإنشاء تطبيق جديد باستخدام مثال رسمي من Next.js، استخدم علامة `--example` مع الأمر التالي:
+
+```bash filename="Terminal"
+npx create-next-app@latest --example [your-project-name] [example-name]
+```
+
+يمكنك عرض قائمة بجميع الأمثلة المتاحة مع تعليمات الإعداد في [مستودع Next.js](https://github.com/vercel/next.js/tree/canary/examples).
+
+## مع أي مثال عام من Github
+
+لإنشاء تطبيق جديد باستخدام أي مثال عام من Github، استخدم خيار `--example` مع رابط مستودع Github. على سبيل المثال:
+
+```bash filename="Terminal"
+npx create-next-app@latest --example [your-project-name] "https://github.com/.../"
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/index.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/index.mdx
new file mode 100644
index 00000000..0439245a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/index.mdx
@@ -0,0 +1,13 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:03.633Z
+title: واجهة سطر الأوامر (CLI)
+description: مرجع API لأدوات واجهة سطر الأوامر (CLI) في Next.js.
+---
+
+{/* المحتوى في هذا المستند مشترك بين جهاز التوجيه للتطبيق والصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بجهاز توجيه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
+
+يأتي Next.js مع **أداتين** لواجهة سطر الأوامر (CLI):
+
+- **`create-next-app`**: إنشاء تطبيق Next.js جديد بسرعة باستخدام القالب الافتراضي أو [مثال](https://github.com/vercel/next.js/tree/canary/examples) من مستودع Github العام.
+- **`next`**: تشغيل خادم تطوير Next.js، بناء تطبيقك، والمزيد.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/next.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/next.mdx
new file mode 100644
index 00000000..2fde4580
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/06-cli/next.mdx
@@ -0,0 +1,240 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:41.859Z
+title: واجهة سطر الأوامر (CLI) في Next.js
+description: تعلم كيفية تشغيل وبناء تطبيقك باستخدام واجهة سطر الأوامر (CLI) في Next.js.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
+
+تتيح لك واجهة سطر الأوامر (CLI) في Next.js تطوير وبناء وتشغيل تطبيقك والمزيد.
+
+الاستخدام الأساسي:
+
+```bash filename="Terminal"
+npm run next [command] [options]
+```
+
+## مرجع
+
+الخيارات التالية متاحة:
+
+| الخيارات             | الوصف                        |
+| ------------------- | ---------------------------------- |
+| `-h` أو `--help`    | يعرض جميع الخيارات المتاحة        |
+| `-v` أو `--version` | يعرض رقم إصدار Next.js |
+
+### الأوامر
+
+الأوامر التالية متاحة:
+
+| الأمر                               | الوصف                                                                                                                                                                                                                        |
+| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`dev`](#next-dev-options)            | يبدأ Next.js في وضع التطوير مع إعادة تحميل الوحدات الساخنة (HMR)، وإعداد التقارير عن الأخطاء، والمزيد.                                                                                                                                           |
+| [`build`](#next-build-options)        | ينشئ بناءً مُحسّنًا للإنتاج لتطبيقك. يعرض معلومات عن كل مسار.                                                                                                                                |
+| [`start`](#next-start-options)        | يبدأ Next.js في وضع الإنتاج. يجب تجميع التطبيق أولاً باستخدام `next build`.                                                                                                                                     |
+| [`info`](next-info-options)           | يطبع تفاصيل ذات صلة عن النظام الحالي والتي يمكن استخدامها للإبلاغ عن أخطاء Next.js.                                                                                                                                         |
+| [`lint`](next-lint-options)           | يشغل ESLint لجميع الملفات في مجلدات `/src`، `/app`، `/pages`، `/components`، و `/lib`. كما يوفر إعدادًا موجهًا لتثبيت أي تبعيات مطلوبة إذا لم يكن ESLint مضبوطًا بالفعل في تطبيقك. |
+| [`telemetry`](next-telemetry-options) | يسمح لك بتمكين أو تعطيل جمع بيانات التتبع المجهولة بالكامل في Next.js.                                                                                                                                                |
+
+> **معلومة مفيدة**: تشغيل `next` بدون أمر يعادل `next dev`.
+
+### خيارات `next dev`
+
+يبدأ `next dev` التطبيق في وضع التطوير مع إعادة تحميل الوحدات الساخنة (HMR)، وإعداد التقارير عن الأخطاء، والمزيد. الخيارات التالية متاحة عند تشغيل `next dev`:
+
+| الخيار                                   | الوصف                                                                                                                                          |
+| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h, --help`                             | يعرض جميع الخيارات المتاحة.                                                                                                                          |
+| `[directory]`                            | مجلد لبناء التطبيق فيه. إذا لم يتم توفيره، يتم استخدام المجلد الحالي.                                                           |
+| `--turbo`                                | يبدأ وضع التطوير باستخدام [Turbopack](https://nextjs.org/docs/architecture/turbopack).                                                           |
+| `-p` أو `--port <port>`                  | يحدد رقم المنفذ لبدء التطبيق عليه. الافتراضي: 3000، متغير البيئة: PORT                                                                    |
+| `-H` أو `--hostname <hostname>`           | يحدد اسم المضيف لبدء التطبيق عليه. مفيد لجعل التطبيق متاحًا للأجهزة الأخرى على الشبكة. الافتراضي: 0.0.0.0 |
+| `--experimental-https`                   | يبدأ الخادم باستخدام HTTPS وينشئ شهادة موقعة ذاتيًا.                                                                                |
+| `--experimental-https-key <path>`        | مسار إلى ملف مفتاح HTTPS.                                                                                                                            |
+| `--experimental-https-cert <path>`       | مسار إلى ملف شهادة HTTPS.                                                                                                                    |
+| `--experimental-https-ca <path>`         | مسار إلى ملف سلطة شهادة HTTPS.                                                                                                          |
+| `--experimental-upload-trace <traceUrl>` | يرسل مجموعة فرعية من تتبع التصحيح إلى عنوان URL بعيد.                                                                                        |
+
+### خيارات `next build`
+
+ينشئ `next build` بناءً مُحسّنًا للإنتاج لتطبيقك. يعرض المخرجات معلومات عن كل مسار. على سبيل المثال:
+
+```bash filename="Terminal"
+المسار (app)                              الحجم     أول تحميل لـ JS
+┌ ○ /_not-found                          0 B               0 kB
+└ ƒ /products/[id]                       0 B               0 kB
+
+○  (ثابت)   تم تقديمه مسبقًا كمحتوى ثابت
+ƒ  (ديناميكي)  يتم تقديمه من الخادم عند الطلب
+```
+
+- **الحجم**: حجم الأصول التي يتم تنزيلها عند التنقل إلى الصفحة من جانب العميل. حجم كل مسار يشمل فقط تبعياته.
+- **أول تحميل لـ JS**: حجم الأصول التي يتم تنزيلها عند زيارة الصفحة من الخادم. يتم عرض مقدار JS المشترك بين الجميع كمقياس منفصل.
+
+كلا هذين القيمتين [**مضغوطتين باستخدام gzip**](/docs/app/api-reference/next-config-js/compress). يُشار إلى أول تحميل باللون الأخضر أو الأصفر أو الأحمر. استهدف اللون الأخضر للحصول على تطبيقات عالية الأداء.
+
+الخيارات التالية متاحة لأمر `next build`:
+
+| الخيار                             | الوصف                                                                                                                                   |
+| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h, --help`                       | يعرض جميع الخيارات المتاحة.                                                                                                                   |
+| `[directory]`                      | مجلد لبناء التطبيق فيه. إذا لم يتم توفيره، سيتم استخدام المجلد الحالي.                                           |
+| `-d` أو `--debug`                  | يمكّن مخرجات بناء أكثر تفصيلاً. مع تمكين هذا العلم، سيتم عرض مخرجات بناء إضافية مثل إعادة الكتابة، التوجيهات، والعناوين.      |
+|                                    |
+| `--profile`                        | يمكّن [تخصيص الأداء لـ React](https://react.dev/reference/react/Profiler) في الإنتاج.                                                         |
+| `--no-lint`                        | يعطل فحص الأخطاء (linting).                                                                                                                             |
+| `--no-mangling`                    | يعطل [تشويه الأسماء](https://en.wikipedia.org/wiki/Name_mangling). قد يؤثر هذا على الأداء ويجب استخدامه فقط لأغراض التصحيح. |
+| `--experimental-app-only`          | يبني فقط مسارات موجه التطبيق (App Router).                                                                                                                |
+| `--experimental-build-mode [mode]` | يستخدم وضع بناء تجريبي. (الاختيارات: "compile", "generate", الافتراضي: "default")                                                         |
+
+### خيارات `next start`
+
+يبدأ `next start` التطبيق في وضع الإنتاج. يجب تجميع التطبيق أولاً باستخدام [`next build`](#next-build-options).
+
+الخيارات التالية متاحة لأمر `next start`:
+
+| الخيار                                  | الوصف                                                                                                     |
+| --------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `-h` أو `--help`                        | يعرض جميع الخيارات المتاحة.                                                                                     |
+| `[directory]`                           | مجلد لبدء التطبيق منه. إذا لم يتم توفير مجلد، سيتم استخدام المجلد الحالي. |
+| `-p` أو `--port <port>`                 | يحدد رقم المنفذ لبدء التطبيق عليه. (الافتراضي: 3000، متغير البيئة: PORT)                             |
+| `-H` أو `--hostname <hostname>`         | يحدد اسم المضيف لبدء التطبيق عليه (الافتراضي: 0.0.0.0).                                        |
+| `--keepAliveTimeout <keepAliveTimeout>` | يحدد الحد الأقصى للملي ثانية للانتظار قبل إغلاق الاتصالات غير النشطة.                     |
+
+### خيارات `next info`
+
+يطبع `next info` تفاصيل ذات صلة عن النظام الحالي والتي يمكن استخدامها للإبلاغ عن أخطاء Next.js عند فتح [مشكلة في GitHub](https://github.com/vercel/next.js/issues). تتضمن هذه المعلومات نظام التشغيل (المنصة/الهيكل/الإصدار)، والثنائيات (Node.js، npm، Yarn، pnpm)، وإصدارات الحزم (`next`، `react`، `react-dom`)، والمزيد.
+
+يجب أن تبدو المخرجات كالتالي:
+
+```bash filename="Terminal"
+نظام التشغيل:
+  المنصة: darwin
+  الهيكل: arm64
+  الإصدار: Darwin Kernel Version 23.6.0
+  الذاكرة المتاحة (MB): 65536
+  أنوية المعالج المتاحة: 10
+الثنائيات:
+  Node: 20.12.0
+  npm: 10.5.0
+  Yarn: 1.22.19
+  pnpm: 9.6.0
+الحزم ذات الصلة:
+  next: 15.0.0-canary.115 // يتم اكتشاف أحدث إصدار متاح (15.0.0-canary.115).
+  eslint-config-next: 14.2.5
+  react: 19.0.0-rc
+  react-dom: 19.0.0
+  typescript: 5.5.4
+إعدادات Next.js:
+  output: N/A
+```
+
+الخيارات التالية متاحة لأمر `next info`:
+
+| الخيار           | الوصف                                    |
+| ---------------- | ---------------------------------------------- |
+| `-h` أو `--help` | يعرض جميع الخيارات المتاحة                     |
+| `--verbose`      | يجمع معلومات إضافية لأغراض التصحيح. |
+
+### خيارات `next lint`
+
+يشغل `next lint` ESLint لجميع الملفات في مجلدات `pages/`، `app/`، `components/`، `lib/`، و `src/`. كما يوفر إعدادًا موجهًا لتثبيت أي تبعيات مطلوبة إذا لم يكن ESLint مضبوطًا بالفعل في تطبيقك.
+
+الخيارات التالية متاحة لأمر `next lint`:
+
+| الخيار                                                | الوصف                                                                                                   |
+| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `[directory]`                                         | مجلد أساسي لفحص الأخطاء فيه. إذا لم يتم توفيره، سيتم استخدام المجلد الحالي.       |
+| `-d, --dir, <dirs...>`                                | يتضمن مجلد، أو مجلدات، لتشغيل ESLint عليها.                                                             |
+| `--file, <files...>`                                  | يتضمن ملف، أو ملفات، لتشغيل ESLint عليها.                                                                        |
+| `--ext, [exts...]`                                    | يحدد امتدادات ملفات JavaScript. (الافتراضي: [".js", ".mjs", ".cjs", ".jsx", ".ts", ".mts", ".cts", ".tsx"]) |
+| `-c, --config, <config>`                              | يستخدم ملف التكوين هذا، متجاوزًا جميع خيارات التكوين الأخرى.                                     |
+| `--resolve-plugins-relative-to, <rprt>`               | يحدد مجلدًا يجب حل الملحقات منه.                                                    |
+| `--strict`                                            | ينشئ ملف `.eslintrc.json` باستخدام التكوين الصارم لـ Next.js.                                       |
+| `--rulesdir, <rulesdir...>`                           | يستخدم قواعد إضافية من هذا المجلد (أو المجلدات).                                                                 |
+| `--fix`                                               | يصحح مشاكل الفحص تلقائيًا.                                                                             |
+| `--fix-type <fixType>`                                | يحدد أنواع التصحيحات لتطبيقها (مثل: problem, suggestion, layout).                                      |
+| `--ignore-path <path>`                                | يحدد ملفًا لتجاهله.                                                                                     |
+| `--no-ignore <path>`                                  | يعطل خيار `--ignore-path`.                                                                          |
+| `--quiet`                                             | يبلغ عن الأخطاء فقط.                                                                                          |
+| `--max-warnings [maxWarnings]`                        | يحدد عدد التحذيرات قبل تشغيل رمز خروج غير صفري. (الافتراضي: -1)                          |
+| `-o, --output-file, <outputFile>`                     | يحدد ملفًا لكتابة التقرير فيه.                                                                            |
+| `-f, --format, <format>`                              | يستخدم تنسيق مخرجات محدد.                                                                                |
+| `--no-inline-config`                                  | يمنع التعليقات من تغيير التكوين أو القواعد.                                                              |
+| `--report-unused-disable-directives-severity <level>` | يحدد مستوى الخطورة لتوجيهات eslint-disable غير المستخدمة. (الاختيارات: "error", "off", "warn")                |
+| `--no-cache`                                          | يعطل التخزين المؤقت.                                                                                             |
+| `--cache-location, <cacheLocation>`                   | يحدد موقعًا للتخزين المؤقت.                                                                                 |
+| `--cache-strategy, [cacheStrategy]`                   | يحدد استراتيجية للكشف عن الملفات المتغيرة في التخزين المؤقت. (الافتراضي: "metadata")                     |
+| `--error-on-unmatched-pattern`                        | يبلغ عن الأخطاء عندما لا تتطابق أنماط الملفات.                                                          |
+| `-h, --help`                                          | يعرض هذه الرسالة.                                                                                        |
+
+### خيارات `next telemetry`
+
+يجمع Next.js **بيانات تتبع مجهولة بالكامل** عن الاستخدام العام. المشاركة في هذا البرنامج المجهول اختيارية، ويمكنك الانسحاب إذا كنت تفضل عدم مشاركة المعلومات.
+
+الخيارات التالية متاحة لأمر `next telemetry`:
+
+| الخيار       | الوصف                             |
+| ------------ | --------------------------------------- |
+| `-h, --help` | يعرض جميع الخيارات المتاحة.             |
+| `--enable`   | يمكّن جمع بيانات التتبع في Next.js.  |
+| `--disable`  | يعطل جمع بيانات التتبع في Next.js. |
+
+تعلم المزيد عن [بيانات التتبع](/telemetry).
+
+## أمثلة
+
+### تغيير المنفذ الافتراضي
+
+بشكل افتراضي، يستخدم Next.js `http://localhost:3000` أثناء التطوير ومع أمر `next start`. يمكن تغيير المنفذ الافتراضي باستخدام خيار `-p`، كما يلي:
+
+```bash filename="Terminal"
+next dev -p 4000
+```
+
+أو باستخدام متغير البيئة `PORT`:
+
+```bash filename="Terminal"
+PORT=4000 next dev
+```
+
+> **معلومة مفيدة**: لا يمكن تعيين `PORT` في ملف `.env` لأن تشغيل خادم HTTP يحدث قبل تهيئة أي كود آخر.
+
+### استخدام HTTPS أثناء التطوير
+
+لحالات استخدام معينة مثل webhooks أو المصادقة، قد يكون مطلوبًا استخدام HTTPS للحصول على بيئة آمنة على `localhost`. يمكن لـ Next.js إنشاء شهادة موقعة ذاتيًا باستخدام `next dev` مع علم `--experimental-https`:
+
+```bash filename="Terminal"
+next dev --experimental-https
+```
+
+يمكنك أيضًا توفير شهادة ومفتاح مخصصين باستخدام `--experimental-https-key` و `--experimental-https-cert`. اختياريًا، يمكنك توفير شهادة CA مخصصة باستخدام `--experimental-https-ca` أيضًا.
+
+```bash filename="Terminal"
+next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem
+```
+
+`next dev --experimental-https` مخصص للتطوير فقط وينشئ شهادة موثوقة محليًا باستخدام [`mkcert`](https://github.com/FiloSottile/mkcert). في الإنتاج، استخدم شهادات صادرة بشكل صحيح من جهات موثوقة.
+
+> **معلومة مفيدة**: عند النشر على Vercel، يتم [تكوين HTTPS تلقائيًا](https://vercel.com/docs/security/encryption) لتطبيق Next.js الخاص بك.
+
+### تكوين مهلة للوكلاء المتتالين (Downstream Proxies)
+
+عند نشر Next.js خلف وكيل متتالي (مثل موازن حمل مثل AWS ELB/ALB)، من المهم تكوين خادم HTTP الأساسي لـ Next.js مع [مهلات keep-alive](https://nodejs.org/api/http.html#http_server_keepalivetimeout) تكون _أكبر_ من مهلات الوكيل المتتالي. وإلا، بمجرد الوصول إلى مهلة keep-alive لاتصال TCP معين، سيقوم Node.js بإنهاء هذا الاتصال فورًا دون إخطار الوكيل المتتالي. هذا يؤدي إلى خطأ في الوكيل كلما حاول إعادة استخدام اتصال قام Node.js بإنهائه بالفعل.
+
+لتكوين قيم المهلة لخادم Next.js في الإنتاج، مرر `--keepAliveTimeout` (بالميلي ثانية) إلى `next start`، كما يلي:
+
+```bash filename="Terminal"
+next start --keepAliveTimeout 70000
+```
+
+### تمرير وسائط Node.js
+
+يمكنك تمرير أي [وسائط Node.js](https://nodejs.org/api/cli.html#cli_node_options_options) إلى أوامر `next`. على سبيل المثال:
+
+```bash filename="Terminal"
+NODE_OPTIONS='--throw-deprecation' next
+NODE_OPTIONS='-r esm' next
+NODE_OPTIONS='--inspect' next
+```
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/07-edge.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/07-edge.mdx
new file mode 100644
index 00000000..ba343edc
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/07-edge.mdx
@@ -0,0 +1,167 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:18.822Z
+title: وقت تشغيل Edge
+description: مرجع API لوقت تشغيل Edge.
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
+
+وقت تشغيل Edge في Next.js يعتمد على واجهات برمجة تطبيقات الويب القياسية، وهو يدعم الواجهات البرمجية التالية:
+
+## واجهات برمجة الشبكة
+
+| API                                                                             | الوصف                                |
+| ------------------------------------------------------------------------------- | ------------------------------------ |
+| [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob)                       | يمثل كائن blob                       |
+| [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API)                 | جلب مورد                            |
+| [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent)           | يمثل حدث جلب                         |
+| [`File`](https://developer.mozilla.org/docs/Web/API/File)                       | يمثل ملفًا                           |
+| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)               | يمثل بيانات النموذج                  |
+| [`Headers`](https://developer.mozilla.org/docs/Web/API/Headers)                 | يمثل رؤوس HTTP                       |
+| [`Request`](https://developer.mozilla.org/docs/Web/API/Request)                 | يمثل طلب HTTP                        |
+| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)               | يمثل استجابة HTTP                    |
+| [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | يمثل معلمات بحث URL                  |
+| [`WebSocket`](https://developer.mozilla.org/docs/Web/API/WebSocket)             | يمثل اتصال websocket                 |
+
+## واجهات برمجة التشفير
+
+| API                                                                                 | الوصف                                 |
+| ----------------------------------------------------------------------------------- | ------------------------------------- |
+| [`atob`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/atob) | يفك تشفير سلسلة مشفرة بـ base-64      |
+| [`btoa`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/btoa) | يشفر سلسلة بتنسيق base-64             |
+| [`TextDecoder`](https://developer.mozilla.org/docs/Web/API/TextDecoder)             | يفك تشفير Uint8Array إلى سلسلة        |
+| [`TextDecoderStream`](https://developer.mozilla.org/docs/Web/API/TextDecoderStream) | مفكك تشفير متسلسل للتدفقات            |
+| [`TextEncoder`](https://developer.mozilla.org/docs/Web/API/TextEncoder)             | يشفر سلسلة إلى Uint8Array             |
+| [`TextEncoderStream`](https://developer.mozilla.org/docs/Web/API/TextEncoderStream) | مشفر متسلسل للتدفقات                  |
+
+## واجهات برمجة التدفق
+
+| API                                                                                                     | الوصف                                   |
+| ------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream)                           | يمثل تدفقًا قابلًا للقراءة              |
+| [`ReadableStreamBYOBReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamBYOBReader)       | يمثل قارئًا لـ ReadableStream           |
+| [`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader) | يمثل قارئًا افتراضيًا لـ ReadableStream |
+| [`TransformStream`](https://developer.mozilla.org/docs/Web/API/TransformStream)                         | يمثل تدفق تحويل                         |
+| [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream)                           | يمثل تدفقًا قابلًا للكتابة              |
+| [`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter) | يمثل كاتبًا افتراضيًا لـ WritableStream |
+
+## واجهات برمجة التشفير الآمن
+
+| API                                                                       | الوصف                                                                                         |
+| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| [`crypto`](https://developer.mozilla.org/docs/Web/API/Window/crypto)      | يوفر وصولاً إلى الوظائف التشفيرية للنظام                                                    |
+| [`CryptoKey`](https://developer.mozilla.org/docs/Web/API/CryptoKey)       | يمثل مفتاحًا تشفيريًا                                                                        |
+| [`SubtleCrypto`](https://developer.mozilla.org/docs/Web/API/SubtleCrypto) | يوفر وصولاً إلى البدائيات التشفيرية الشائعة، مثل التجزئة، التوقيع، التشفير أو فك التشفير    |
+
+## واجهات برمجة تطبيقات الويب القياسية
+
+| الواجهة البرمجية                                                                                                                   | الوصف                                                                                                                                                                                          |
+| --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`AbortController`](https://developer.mozilla.org/docs/Web/API/AbortController)                                       | تتيح لك إلغاء طلب واحد أو أكثر من طلبات DOM متى ما رغبت                                                                                                                                     |
+| [`Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)                           | تمثل مصفوفة من القيم                                                                                                                                                                        |
+| [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)               | تمثل مخزن بيانات ثابت الطول للبيانات الثنائية الخام                                                                                                                                            |
+| [`Atomics`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Atomics)                       | توفر عمليات ذرية كطرق ثابتة                                                                                                                                                         |
+| [`BigInt`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt)                         | تمثل عددًا صحيحًا بدقة غير محدودة                                                                                                                                                   |
+| [`BigInt64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array)           | تمثل مصفوفة منظمة من أعداد صحيحة موقعة 64 بت                                                                                                                                                   |
+| [`BigUint64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array)         | تمثل مصفوفة منظمة من أعداد صحيحة غير موقعة 64 بت                                                                                                                                                 |
+| [`Boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)                       | تمثل كيانًا منطقيًا ويمكن أن يكون لها قيمتان: `true` و `false`                                                                                                                              |
+| [`clearInterval`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)                 | تلغي إجراءً متكررًا مؤقتًا تم إنشاؤه مسبقًا عن طريق استدعاء `setInterval()`                                                                                                      |
+| [`clearTimeout`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout)                   | تلغي إجراءً متكررًا مؤقتًا تم إنشاؤه مسبقًا عن طريق استدعاء `setTimeout()`                                                                                                       |
+| [`console`](https://developer.mozilla.org/docs/Web/API/Console)                                                       | توفر وصولاً إلى وحدة تحكم تصحيح الأخطاء في المتصفح                                                                                                                                                   |
+| [`DataView`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView)                     | تمثل عرضًا عامًا لـ `ArrayBuffer`                                                                                                                                                        |
+| [`Date`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date)                             | تمثل لحظة واحدة في الوقت بتنسيق مستقل عن النظام الأساسي                                                                                                                                  |
+| [`decodeURI`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/decodeURI)                   | تفكك معرف مورد موحد (URI) تم إنشاؤه مسبقًا بواسطة `encodeURI` أو بواسطة روتين مشابه                                                                                                |
+| [`decodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) | تفكك مكون معرف مورد موحد (URI) تم إنشاؤه مسبقًا بواسطة `encodeURIComponent` أو بواسطة روتين مشابه                                                                             |
+| [`DOMException`](https://developer.mozilla.org/docs/Web/API/DOMException)                                             | تمثل خطأً يحدث في DOM                                                                                                                                                           |
+| [`encodeURI`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)                   | تشفر معرف مورد موحد (URI) عن طريق استبدال كل مثيل لبعض الأحرف بواحد أو اثنين أو ثلاثة أو أربعة تسلسلات هروب تمثل ترميز UTF-8 للحرف           |
+| [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) | تشفر مكون معرف مورد موحد (URI) عن طريق استبدال كل مثيل لبعض الأحرف بواحد أو اثنين أو ثلاثة أو أربعة تسلسلات هروب تمثل ترميز UTF-8 للحرف |
+| [`Error`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error)                           | تمثل خطأً عند محاولة تنفيذ عبارة أو الوصول إلى خاصية                                                                                                                       |
+| [`EvalError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/EvalError)                   | تمثل خطأً يحدث فيما يتعلق بالدالة العامة `eval()`                                                                                                                               |
+| [`Float32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Float32Array)             | تمثل مصفوفة منظمة من أعداد الفاصلة العائمة 32 بت                                                                                                                                            |
+| [`Float64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Float64Array)             | تمثل مصفوفة منظمة من أعداد الفاصلة العائمة 64 بت                                                                                                                                            |
+| [`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function)                     | تمثل دالة                                                                                                                                                                                |
+| [`Infinity`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Infinity)                     | تمثل قيمة اللانهاية الرياضية                                                                                                                                                           |
+| [`Int8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int8Array)                   | تمثل مصفوفة منظمة من أعداد صحيحة موقعة 8 بت                                                                                                                                                    |
+| [`Int16Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int16Array)                 | تمثل مصفوفة منظمة من أعداد صحيحة موقعة 16 بت                                                                                                                                                   |
+| [`Int32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int32Array)                 | تمثل مصفوفة منظمة من أعداد صحيحة موقعة 32 بت                                                                                                                                                   |
+| [`Intl`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl)                             | توفر وصولاً إلى وظائف التدويل والتهيئة المحلية                                                                                                                               |
+| [`isFinite`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/isFinite)                     | تحدد ما إذا كانت القيمة عددًا محدودًا                                                                                                                                                        |
+| [`isNaN`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/isNaN)                           | تحدد ما إذا كانت القيمة `NaN` أم لا                                                                                                                                                           |
+| [`JSON`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)                             | توفر وظائف لتحويل قيم JavaScript من وإلى تنسيق JSON                                                                                                                      |
+| [`Map`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map)                               | تمثل مجموعة من القيم، حيث يمكن أن يظهر كل قيمة مرة واحدة فقط                                                                                                                              |
+| [`Math`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math)                             | توفر وصولاً إلى الدوال والثوابت الرياضية                                                                                                                                              |
+| [`Number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)                         | تمثل قيمة رقمية                                                                                                                                                                           |
+| [`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)                         | تمثل الكائن الذي هو أساس جميع كائنات JavaScript                                                                                                                                     |
+| [`parseFloat`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/parseFloat)                 | تحلل وسيط سلسلة نصية وتُرجع عددًا عشريًا                                                                                                                                         |
+| [`parseInt`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/parseInt)                     | تحلل وسيط سلسلة نصية وتُرجع عددًا صحيحًا للأساس المحدد                                                                                                                               |
+| [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)                       | تمثل الإكمال النهائي (أو الفشل) لعملية غير متزامنة، وقيمتها الناتجة                                                                                                |
+| [`Proxy`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)                           | تمثل كائنًا يُستخدم لتعريف سلوك مخصص للعمليات الأساسية (مثل البحث عن الخاصية، التعيين، التعداد، استدعاء الدالة، إلخ)                                     |
+| [`queueMicrotask`](https://developer.mozilla.org/docs/Web/API/queueMicrotask)                                         | تضيف مهمة صغيرة إلى قائمة الانتظار لتنفيذها                                                                                                                                                                    |
+| [`RangeError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RangeError)                 | تمثل خطأً عندما تكون القيمة ليست في مجموعة أو نطاق القيم المسموح بها                                                                                                                        |
+| [`ReferenceError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError)         | تمثل خطأً عند الإشارة إلى متغير غير موجود                                                                                                                                       |
+| [`Reflect`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Reflect)                       | توفر طرقًا لعمليات JavaScript القابلة للاعتراض                                                                                                                                             |
+| [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)                         | تمثل تعبيرًا منتظمًا، مما يسمح لك بمطابقة مجموعات من الأحرف                                                                                                                    |
+| [`Set`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set)                               | تمثل مجموعة من القيم، حيث يمكن أن يظهر كل قيمة مرة واحدة فقط                                                                                                                              |
+| [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval)                                               | تستدعي دالة بشكل متكرر، مع تأخير زمني ثابت بين كل استدعاء                                                                                                                               |
+| [`setTimeout`](https://developer.mozilla.org/docs/Web/API/setTimeout)                                                 | تستدعي دالة أو تقيم تعبيرًا بعد عدد محدد من المللي ثانية                                                                                                                 |
+| [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)   | تمثل مخزن بيانات ثابت الطول للبيانات الثنائية الخام                                                                                                                                            |
+| [`String`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)                         | تمثل سلسلة من الأحرف                                                                                                                                                                  |
+| [`structuredClone`](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)            | تنشئ نسخة عميقة من قيمة                                                                                                                                                                       |
+| [`Symbol`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol)                         | تمثل نوع بيانات فريدًا وغير قابل للتغيير يُستخدم كمفتاح لخاصية كائن                                                                                                            |
+| [`SyntaxError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)               | تمثل خطأً عند محاولة تفسير كود غير صحيح من الناحية التركيبية                                                                                                                              |
+| [`TypeError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypeError)                   | تمثل خطأً عندما لا تكون القيمة من النوع المتوقع                                                                                                                                         |
+| [`Uint8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)                 | تمثل مصفوفة منظمة من أعداد صحيحة غير موقعة 8 بت                                                                                                                                                  |
+| [`Uint8ClampedArray`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)   | تمثل مصفوفة منظمة من أعداد صحيحة غير موقعة 8 بت مقيدة بين 0-255                                                                                                                                 |
+| [`Uint32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array)               | تمثل مصفوفة منظمة من أعداد صحيحة غير موقعة 32 بت                                                                                                                                                 |
+| [`URIError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/URIError)                     | تمثل خطأً عند استخدام دالة معالجة URI العامة بطريقة خاطئة                                                                                                                      |
+| [`URL`](https://developer.mozilla.org/docs/Web/API/URL)                                                               | تمثل كائنًا يوفر طرقًا ثابتة تُستخدم لإنشاء عناوين URL للكائنات                                                                                                                          |
+| [`URLPattern`](https://developer.mozilla.org/docs/Web/API/URLPattern)                                                 | تمثل نمط URL                                                                                                                                                                             |
+| [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams)                                       | تمثل مجموعة من أزواج المفتاح/القيم                                                                                                                                                           |
+| [`WeakMap`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)                       | تمثل مجموعة من أزواج المفتاح/القيم حيث تكون المفاتيح مرجعية ضعيفة                                                                                                                   |
+| [`WeakSet`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)                       | تمثل مجموعة من الكائنات حيث يمكن أن يظهر كل كائن مرة واحدة فقط                                                                                                                          |
+| [`WebAssembly`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)               | توفر وصولاً إلى WebAssembly                                                                                                                                                                       |
+
+## حشوات خاصة بـ Next.js
+
+- [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage)
+
+## متغيرات البيئة
+
+يمكنك استخدام `process.env` للوصول إلى [متغيرات البيئة](/docs/app/building-your-application/configuring/environment-variables) لكل من `next dev` و `next build`.
+
+## واجهات برمجة التطبيقات غير المدعومة
+
+يحتوي وقت تشغيل الحافة (Edge Runtime) على بعض القيود بما في ذلك:
+
+- واجهات برمجة تطبيقات Node.js الأصلية **غير مدعومة**. على سبيل المثال، لا يمكنك القراءة أو الكتابة في نظام الملفات.
+- يمكن استخدام `node_modules` طالما أنها تنفذ وحدات ES ولا تستخدم واجهات برمجة تطبيقات Node.js الأصلية.
+- استدعاء `require` مباشرة **غير مسموح به**. استخدم وحدات ES بدلاً من ذلك.
+
+ميزات لغة JavaScript التالية معطلة، **ولن تعمل:**
+
+| واجهة برمجة التطبيق                                                                                                                             | الوصف                                                         |
+| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| [`eval`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/eval)                                       | يقيم كود JavaScript ممثلًا كسلسلة نصية                   |
+| [`new Function(evalString)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function)               | ينشئ دالة جديدة بالكود المقدم كوسيطة        |
+| [`WebAssembly.compile`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compile)         | يترجم وحدة WebAssembly من مصدر مخزن مؤقت                  |
+| [`WebAssembly.instantiate`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) | يترجم وينشئ وحدة WebAssembly من مصدر مخزن مؤقت |
+
+في حالات نادرة، قد يحتوي الكود الخاص بك (أو يستورد) بعض عبارات تقييم الكود الديناميكي التي _لا يمكن الوصول إليها أثناء التشغيل_ ولا يمكن إزالتها عن طريق تقليل الشجرة (treeshaking).
+يمكنك تخفيف الفحص للسماح بملفات محددة مع تكوين مسار واجهة برمجة التطبيقات أو Middleware المصدر:
+
+```javascript
+export const config = {
+  runtime: 'edge', // لمسارات واجهة برمجة التطبيقات للحافة فقط
+  unstable_allowDynamic: [
+    // يسمح بملف واحد
+    '/lib/utilities.js',
+    // استخدم النمط العام للسماح بأي شيء في وحدة function-bind من طرف ثالث
+    '**/node_modules/function-bind/**',
+  ],
+}
+```
+
+`unstable_allowDynamic` هو [نمط عام](https://github.com/micromatch/micromatch#matching-features)، أو مصفوفة من الأنماط العامة، تتجاهل تقييم الكود الديناميكي لملفات محددة. الأنماط العامة مرتبطة بمجلد جذر التطبيق الخاص بك.
+
+تحذير: إذا تم تنفيذ هذه العبارات على الحافة، _فسوف تسبب خطأ أثناء التشغيل_.
diff --git a/apps/docs/content/ar/docs/14/02-app/02-api-reference/index.mdx b/apps/docs/content/ar/docs/14/02-app/02-api-reference/index.mdx
new file mode 100644
index 00000000..22efadd9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/02-api-reference/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:46.552Z
+title: مرجع API
+description: مرجع API لـ Next.js لموجه التطبيق (App Router).
+---
+
+ينقسم مرجع API لـ Next.js إلى الأقسام التالية:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/02-app/index.mdx b/apps/docs/content/ar/docs/14/02-app/index.mdx
new file mode 100644
index 00000000..a922d659
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/02-app/index.mdx
@@ -0,0 +1,74 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:15:49.459Z
+title: موجه التطبيق (App Router)
+description: استخدم موجه التطبيق الجديد مع أحدث ميزات Next.js وReact، بما في ذلك التخطيطات (Layouts)، مكونات الخادم (Server Components)، التعليق المؤقت (Suspense)، والمزيد.
+---
+
+يقدم موجه التطبيق (App Router) في Next.js نموذجًا جديدًا لبناء التطبيقات باستخدام أحدث ميزات React مثل [مكونات الخادم (Server Components)](/docs/app/building-your-application/rendering/server-components)، [البث مع التعليق المؤقت (Streaming with Suspense)](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)، و [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+
+ابدأ باستخدام موجه التطبيق عن طريق [إنشاء صفحتك الأولى](/docs/app/building-your-application/routing/pages-and-layouts).
+
+## الأسئلة الشائعة
+
+### كيف يمكنني الوصول إلى كائن الطلب (request object) في التخطيط؟
+
+لا يمكنك عمدًا الوصول إلى كائن الطلب الخام. ومع ذلك، يمكنك الوصول إلى [الرؤوس (`headers`)](/docs/app/api-reference/functions/headers) و [ملفات تعريف الارتباط (`cookies`)](/docs/app/api-reference/functions/cookies) من خلال دوال خاصة بالخادم فقط. يمكنك أيضًا [تعيين ملفات تعريف الارتباط](#how-can-i-set-cookies).
+
+[التخطيطات (Layouts)](/docs/app/building-your-application/routing/pages-and-layouts#layouts) لا تعيد التصيير. يمكن تخزينها مؤقتًا وإعادة استخدامها لتجنب الحسابات غير الضرورية عند التنقل بين الصفحات. من خلال منع التخطيطات من الوصول إلى الطلب الخام، يمكن لـ Next.js منع تنفيذ التعليمات البرمجية للمستخدم التي قد تكون بطيئة أو مكلفة داخل التخطيط، مما قد يؤثر سلبًا على الأداء.
+
+هذا التصميم يفرض أيضًا سلوكًا متسقًا ومتوقعًا للتخطيطات عبر الصفحات المختلفة، مما يبسط عملية التطوير والتصحيح.
+
+اعتمادًا على نمط واجهة المستخدم الذي تقوم ببنائه، [المسارات المتوازية (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes) تتيح لك عرض صفحات متعددة في نفس التخطيط، وللصفحات حق الوصول إلى مقاطع المسار (route segments) وكذلك معلمات البحث في URL.
+
+### كيف يمكنني الوصول إلى URL في صفحة؟
+
+بشكل افتراضي، الصفحات هي مكونات خادم (Server Components). يمكنك الوصول إلى مقاطع المسار من خلال خاصية [`params`](/docs/app/api-reference/file-conventions/page#params-optional) ومعلمات البحث في URL من خلال خاصية [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) لأي صفحة معينة.
+
+إذا كنت تستخدم مكونات العميل (Client Components)، يمكنك استخدام [`usePathname`](/docs/app/api-reference/functions/use-pathname)، [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment)، و [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) للمسارات الأكثر تعقيدًا.
+
+علاوة على ذلك، اعتمادًا على نمط واجهة المستخدم الذي تقوم ببنائه، [المسارات المتوازية (Parallel Routes)](/docs/app/building-your-application/routing/parallel-routes) تتيح لك عرض صفحات متعددة في نفس التخطيط، وللصفحات حق الوصول إلى مقاطع المسار وكذلك معلمات البحث في URL.
+
+### كيف يمكنني إعادة التوجيه من مكون خادم (Server Component)؟
+
+يمكنك استخدام [`redirect`](/docs/app/api-reference/functions/redirect) لإعادة التوجيه من صفحة إلى URL نسبي أو مطلق. [`redirect`](/docs/app/api-reference/functions/redirect) هو إعادة توجيه مؤقتة (307)، بينما [`permanentRedirect`](/docs/app/api-reference/functions/permanentRedirect) هو إعادة توجيه دائمة (308). عند استخدام هذه الدوال أثناء بث واجهة المستخدم، ستقوم بإدراج وسم meta لتنفيذ إعادة التوجيه على جانب العميل.
+
+### كيف يمكنني التعامل مع المصادقة (authentication) باستخدام موجه التطبيق؟
+
+إليك بعض حلول المصادقة الشائعة التي تدعم موجه التطبيق:
+
+- [NextAuth.js](https://next-auth.js.org/configuration/nextjs#in-app-router)
+- [Clerk](https://clerk.com/docs/quickstarts/nextjs)
+- [Lucia](https://lucia-auth.com/getting-started/nextjs-app)
+- [Auth0](https://github.com/auth0/nextjs-auth0#app-router)
+- [Stytch](https://stytch.com/docs/example-apps/frontend/nextjs)
+- [Kinde](https://kinde.com/docs/developer-tools/nextjs-sdk/)
+- أو التعامل يدويًا مع الجلسات أو رموز JWT
+
+### كيف يمكنني تعيين ملفات تعريف الارتباط (cookies)؟
+
+يمكنك تعيين ملفات تعريف الارتباط في [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#cookies) أو [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) باستخدام دالة [`cookies`](/docs/app/api-reference/functions/cookies).
+
+نظرًا لأن HTTP لا يسمح بتعيين ملفات تعريف الارتباط بعد بدء البث، لا يمكنك تعيين ملفات تعريف الارتباط من صفحة أو تخطيط مباشرة. يمكنك أيضًا تعيين ملفات تعريف الارتباط من [البرمجيات الوسيطة (Middleware)](/docs/app/building-your-application/routing/middleware#using-cookies).
+
+### كيف يمكنني بناء تطبيقات متعددة المستأجرين (multi-tenant apps)؟
+
+إذا كنت تريد بناء تطبيق Next.js واحد يخدم مستأجرين متعددين، فقد [قمنا ببناء مثال](https://vercel.com/templates/next.js/platforms-starter-kit) يوضح بنيتنا الموصى بها.
+
+### كيف يمكنني إبطال ذاكرة التخزين المؤقت لموجه التطبيق؟
+
+هناك طبقات متعددة من التخزين المؤقت في Next.js، وبالتالي، طرق متعددة لإبطال أجزاء مختلفة من الذاكرة المؤقتة. [تعلم المزيد عن التخزين المؤقت](/docs/app/building-your-application/caching).
+
+### هل هناك أي تطبيقات شاملة مفتوحة المصدر مبنية على موجه التطبيق؟
+
+نعم. يمكنك الاطلاع على [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce) أو [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit) للحصول على مثالين أكبر لاستخدام موجه التطبيق مفتوحة المصدر.
+
+## تعلم المزيد
+
+- [أساسيات التوجيه](/docs/app/building-your-application/routing)
+- [جلب البيانات، التخزين المؤقت، وإعادة التحقق](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating)
+- [النماذج والتحولات](/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
+- [التخزين المؤقت](/docs/app/building-your-application/caching)
+- [أساسيات التصيير](/docs/app/building-your-application/rendering)
+- [مكونات الخادم](/docs/app/building-your-application/rendering/server-components)
+- [مكونات العميل](/docs/app/building-your-application/rendering/client-components)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/01-pages-and-layouts.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/01-pages-and-layouts.mdx
new file mode 100644
index 00000000..0ae64191
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/01-pages-and-layouts.mdx
@@ -0,0 +1,215 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:55.021Z
+title: الصفحات والتخطيطات
+description: إنشاء أول صفحة وتخطيط مشترك باستخدام موجه الصفحات (Pages Router).
+---
+
+يحتوي موجه الصفحات (Pages Router) على نظام توجيه قائم على نظام الملفات يعتمد على مفهوم الصفحات.
+
+عند إضافة ملف إلى دليل `pages`، يصبح تلقائيًا متاحًا كمسار.
+
+في Next.js، **الصفحة** هي [مكون React](https://react.dev/learn/your-first-component) يتم تصديره من ملف `.js` أو `.jsx` أو `.ts` أو `.tsx` داخل دليل `pages`. كل صفحة مرتبطة بمسار بناءً على اسم الملف.
+
+**مثال**: إذا قمت بإنشاء `pages/about.js` الذي يصدر مكون React كما يلي، سيكون متاحًا على المسار `/about`.
+
+```jsx
+export default function About() {
+  return <div>About</div>
+}
+```
+
+## مسارات الفهرس
+
+سيقوم الموجه تلقائيًا بتوجيه الملفات المسماة `index` إلى جذر الدليل.
+
+- `pages/index.js` → `/`
+- `pages/blog/index.js` → `/blog`
+
+## المسارات المتداخلة
+
+يدعم الموجه الملفات المتداخلة. إذا قمت بإنشاء هيكل مجلدات متداخل، سيتم توجيه الملفات بنفس الطريقة.
+
+- `pages/blog/first-post.js` → `/blog/first-post`
+- `pages/dashboard/settings/username.js` → `/dashboard/settings/username`
+
+## الصفحات ذات المسارات الديناميكية
+
+يدعم Next.js الصفحات ذات المسارات الديناميكية. على سبيل المثال، إذا قمت بإنشاء ملف باسم `pages/posts/[id].js`، فسيكون متاحًا على `posts/1`، `posts/2`، إلخ.
+
+> لمعرفة المزيد عن التوجيه الديناميكي، راجع [توثيق التوجيه الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes).
+
+## نمط التخطيط
+
+يسمح نموذج React بتفكيك [الصفحة](/docs/pages/building-your-application/routing/pages-and-layouts) إلى سلسلة من المكونات. العديد من هذه المكونات غالبًا ما يتم إعادة استخدامها بين الصفحات. على سبيل المثال، قد يكون لديك نفس شريط التنقل والتذييل في كل صفحة.
+
+```jsx filename="components/layout.js"
+import Navbar from './navbar'
+import Footer from './footer'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Navbar />
+      <main>{children}</main>
+      <Footer />
+    </>
+  )
+}
+```
+
+## أمثلة
+
+### تخطيط مشترك واحد مع تطبيق مخصص
+
+إذا كان لديك تخطيط واحد لتطبيقك بالكامل، يمكنك إنشاء [تطبيق مخصص](/docs/pages/building-your-application/routing/custom-app) وتغليف تطبيقك بالتخطيط. نظرًا لأن مكون `<Layout />` يعاد استخدامه عند تغيير الصفحات، سيتم الحفاظ على حالة المكون (مثل قيم الإدخال).
+
+```jsx filename="pages/_app.js"
+import Layout from '../components/layout'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
+```
+
+### تخطيطات لكل صفحة
+
+إذا كنت بحاجة إلى تخطيطات متعددة، يمكنك إضافة خاصية `getLayout` إلى صفحتك، مما يسمح لك بإرجاع مكون React للتخطيط. هذا يسمح لك بتعريف التخطيط على أساس _كل صفحة_. نظرًا لأننا نرجع دالة، يمكننا الحصول على تخطيطات متداخلة معقدة إذا رغبت في ذلك.
+
+```jsx filename="pages/index.js"
+
+import Layout from '../components/layout'
+import NestedLayout from '../components/nested-layout'
+
+export default function Page() {
+  return (
+    /** محتواك */
+  )
+}
+
+Page.getLayout = function getLayout(page) {
+  return (
+    <Layout>
+      <NestedLayout>{page}</NestedLayout>
+    </Layout>
+  )
+}
+```
+
+```jsx filename="pages/_app.js"
+export default function MyApp({ Component, pageProps }) {
+  // استخدم التخطيط المحدد على مستوى الصفحة، إذا كان متاحًا
+  const getLayout = Component.getLayout ?? ((page) => page)
+
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+عند التنقل بين الصفحات، نريد _الحفاظ_ على حالة الصفحة (قيم الإدخال، موضع التمرير، إلخ.) لتجربة تطبيق صفحة واحدة (SPA).
+
+يمكّن نمط التخطيط هذا من الحفاظ على الحالة لأن شجرة مكونات React تظل محفوظة بين انتقالات الصفحات. مع شجرة المكونات، يمكن لـ React فهم العناصر التي تغيرت للحفاظ على الحالة.
+
+> **جيد أن تعرف**: هذه العملية تسمى [المصالحة](https://react.dev/learn/preserving-and-resetting-state)، وهي الطريقة التي يفهم بها React العناصر التي تغيرت.
+
+### مع TypeScript
+
+عند استخدام TypeScript، يجب أولاً إنشاء نوع جديد لصفحاتك يتضمن دالة `getLayout`. ثم يجب إنشاء نوع جديد لـ `AppProps` يتجاوز خاصية `Component` لاستخدام النوع الذي تم إنشاؤه مسبقًا.
+
+```tsx filename="pages/index.tsx" switcher
+import type { ReactElement } from 'react'
+import Layout from '../components/layout'
+import NestedLayout from '../components/nested-layout'
+import type { NextPageWithLayout } from './_app'
+
+const Page: NextPageWithLayout = () => {
+  return <p>hello world</p>
+}
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <Layout>
+      <NestedLayout>{page}</NestedLayout>
+    </Layout>
+  )
+}
+
+export default Page
+```
+
+```jsx filename="pages/index.js" switcher
+import Layout from '../components/layout'
+import NestedLayout from '../components/nested-layout'
+
+const Page = () => {
+  return <p>hello world</p>
+}
+
+Page.getLayout = function getLayout(page) {
+  return (
+    <Layout>
+      <NestedLayout>{page}</NestedLayout>
+    </Layout>
+  )
+}
+
+export default Page
+```
+
+```tsx filename="pages/_app.tsx" switcher
+import type { ReactElement, ReactNode } from 'react'
+import type { NextPage } from 'next'
+import type { AppProps } from 'next/app'
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode
+}
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout
+}
+
+export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // استخدم التخطيط المحدد على مستوى الصفحة، إذا كان متاحًا
+  const getLayout = Component.getLayout ?? ((page) => page)
+
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+export default function MyApp({ Component, pageProps }) {
+  // استخدم التخطيط المحدد على مستوى الصفحة، إذا كان متاحًا
+  const getLayout = Component.getLayout ?? ((page) => page)
+
+  return getLayout(<Component {...pageProps} />)
+}
+```
+
+### جلب البيانات
+
+داخل التخطيط الخاص بك، يمكنك جلب البيانات على جانب العميل باستخدام `useEffect` أو مكتبة مثل [SWR](https://swr.vercel.app/). لأن هذا الملف ليس [صفحة](/docs/pages/building-your-application/routing/pages-and-layouts)، لا يمكنك استخدام `getStaticProps` أو `getServerSideProps` حاليًا.
+
+```jsx filename="components/layout.js"
+import useSWR from 'swr'
+import Navbar from './navbar'
+import Footer from './footer'
+
+export default function Layout({ children }) {
+  const { data, error } = useSWR('/api/navigation', fetcher)
+
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
+    <>
+      <Navbar links={data.links} />
+      <main>{children}</main>
+      <Footer />
+    </>
+  )
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx
new file mode 100644
index 00000000..d22b9bf5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx
@@ -0,0 +1,66 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:13.944Z
+title: المسارات الديناميكية
+description: المسارات الديناميكية هي صفحات تسمح لك بإضافة معلمات مخصصة إلى عناوين URL الخاصة بك. ابدأ في إنشاء مسارات ديناميكية وتعلم المزيد هنا.
+related:
+  title: الخطوات التالية
+  description: لمزيد من المعلومات حول ما يمكنك فعله بعد ذلك، نوصي بالأقسام التالية
+  links:
+    - pages/building-your-application/routing/linking-and-navigating
+    - pages/api-reference/functions/use-router
+---
+
+عندما لا تعرف أسماء الأجزاء مسبقًا وتريد إنشاء مسارات من بيانات ديناميكية، يمكنك استخدام أجزاء ديناميكية يتم تعبئتها وقت الطلب أو [تتم معالجتها مسبقًا](/docs/pages/building-your-application/data-fetching/get-static-paths) وقت البناء.
+
+## الاصطلاح
+
+يمكن إنشاء جزء ديناميكي عن طريق لف اسم ملف أو مجلد بين أقواس مربعة: `[segmentName]`. على سبيل المثال، `[id]` أو `[slug]`.
+
+يمكن الوصول إلى الأجزاء الديناميكية من [`useRouter`](/docs/pages/api-reference/functions/use-router).
+
+## مثال
+
+على سبيل المثال، يمكن أن يتضمن المدون المسار التالي `pages/blog/[slug].js` حيث `[slug]` هو الجزء الديناميكي لمنشورات المدونة.
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+  return <p>Post: {router.query.slug}</p>
+}
+```
+
+| المسار                  | مثال URL   | `params`        |
+| ---------------------- | ----------- | --------------- |
+| `pages/blog/[slug].js` | `/blog/a`   | `{ slug: 'a' }` |
+| `pages/blog/[slug].js` | `/blog/b`   | `{ slug: 'b' }` |
+| `pages/blog/[slug].js` | `/blog/c`   | `{ slug: 'c' }` |
+
+## أجزاء الالتقاط الشامل
+
+يمكن توسيع الأجزاء الديناميكية لتشمل **جميع** الأجزاء اللاحقة عن طريق إضافة نقاط داخل الأقواس `[...segmentName]`.
+
+على سبيل المثال، `pages/shop/[...slug].js` ستطابق `/shop/clothes`، ولكن أيضًا `/shop/clothes/tops`، `/shop/clothes/tops/t-shirts`، وهكذا.
+
+| المسار                     | مثال URL     | `params`                    |
+| ------------------------- | ------------- | --------------------------- |
+| `pages/shop/[...slug].js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `pages/shop/[...slug].js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `pages/shop/[...slug].js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
+
+## أجزاء الالتقاط الشامل الاختيارية
+
+يمكن جعل أجزاء الالتقاط الشامل **اختيارية** عن طريق تضمين المعلمة بين أقواس مربعة مزدوجة: `[[...segmentName]]`.
+
+على سبيل المثال، `pages/shop/[[...slug]].js` ستطابق أيضًا `/shop`، بالإضافة إلى `/shop/clothes`، `/shop/clothes/tops`، `/shop/clothes/tops/t-shirts`.
+
+الفرق بين أجزاء **الالتقاط الشامل** و **الالتقاط الشامل الاختيارية** هو أنه مع الاختيارية، يتم أيضًا مطابقة المسار بدون المعلمة (`/shop` في المثال أعلاه).
+
+| المسار                       | مثال URL     | `params`                    |
+| --------------------------- | ------------- | --------------------------- |
+| `pages/shop/[[...slug]].js` | `/shop`       | `{ slug: [] }`              |
+| `pages/shop/[[...slug]].js` | `/shop/a`     | `{ slug: ['a'] }`           |
+| `pages/shop/[[...slug]].js` | `/shop/a/b`   | `{ slug: ['a', 'b'] }`      |
+| `pages/shop/[[...slug]].js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/03-linking-and-navigating.mdx
new file mode 100644
index 00000000..87f60b18
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -0,0 +1,193 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:51.774Z
+title: الربط والتنقل
+description: تعرف على كيفية عمل التنقل في Next.js، وكيفية استخدام مكون Link وخطاف `useRouter`.
+---
+
+يسمح موجه Next.js بإجراء انتقالات بين الصفحات من جانب العميل، مشابهًا لتطبيق الصفحة الواحدة (SPA).
+
+يتم توفير مكون React يسمى `Link` لتنفيذ هذا الانتقال بين الصفحات من جانب العميل.
+
+```jsx
+import Link from 'next/link'
+
+function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/">الصفحة الرئيسية</Link>
+      </li>
+      <li>
+        <Link href="/about">من نحن</Link>
+      </li>
+      <li>
+        <Link href="/blog/hello-world">مقال المدونة</Link>
+      </li>
+    </ul>
+  )
+}
+
+export default Home
+```
+
+يستخدم المثال أعلاه روابط متعددة. كل رابط يربط مسارًا (`href`) بصفحة معروفة:
+
+- `/` → `pages/index.js`
+- `/about` → `pages/about.js`
+- `/blog/hello-world` → `pages/blog/[slug].js`
+
+سيتم جلب أي `<Link />` في نطاق الرؤية (مبدئيًا أو عن طريق التمرير) مسبقًا افتراضيًا (بما في ذلك البيانات المقابلة) للصفحات التي تستخدم [التوليد الثابت](/docs/pages/building-your-application/data-fetching/get-static-props). بينما يتم جلب البيانات المقابلة للطرق [المقدمة من الخادم](/docs/pages/building-your-application/data-fetching/get-server-side-props) فقط عند النقر على `<Link />`.
+
+## الربط بمسارات ديناميكية
+
+يمكنك أيضًا استخدام الاستيفاء لإنشاء المسار، وهو مفيد لـ [شرائح المسار الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes). على سبيل المثال، لعرض قائمة بالمقالات التي تم تمريرها إلى المكون كخاصية:
+
+```jsx
+import Link from 'next/link'
+
+function Posts({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
+            {post.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Posts
+```
+
+> يتم استخدام [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) في المثال للحفاظ على توافق المسار مع utf-8.
+
+بدلاً من ذلك، باستخدام كائن URL:
+
+```jsx
+import Link from 'next/link'
+
+function Posts({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>
+          <Link
+            href={{
+              pathname: '/blog/[slug]',
+              query: { slug: post.slug },
+            }}
+          >
+            {post.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Posts
+```
+
+الآن، بدلاً من استخدام الاستيفاء لإنشاء المسار، نستخدم كائن URL في `href` حيث:
+
+- `pathname` هو اسم الصفحة في دليل `pages`. في هذه الحالة `/blog/[slug]`.
+- `query` هو كائن يحتوي على الجزء الديناميكي. في هذه الحالة `slug`.
+
+## حقن الموجه
+
+<details>
+  <summary>أمثلة</summary>
+
+- [التوجيه الديناميكي](https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing)
+
+</details>
+
+للوصول إلى [كائن الموجه](/docs/pages/api-reference/functions/use-router#router-object) في مكون React، يمكنك استخدام [`useRouter`](/docs/pages/api-reference/functions/use-router) أو [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter).
+
+بشكل عام، نوصي باستخدام [`useRouter`](/docs/pages/api-reference/functions/use-router).
+
+## التوجيه الأمرى
+
+يجب أن يكون [`next/link`](/docs/pages/api-reference/components/link) قادرًا على تغطية معظم احتياجاتك من التوجيه، ولكن يمكنك أيضًا إجراء التنقل من جانب العميل بدونه، راجع [توثيق `next/router`](/docs/pages/api-reference/functions/use-router).
+
+يوضح المثال التالي كيفية إجراء التنقل الأساسي بين الصفحات باستخدام [`useRouter`](/docs/pages/api-reference/functions/use-router):
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function ReadMore() {
+  const router = useRouter()
+
+  return (
+    <button onClick={() => router.push('/about')}>
+      انقر هنا لقراءة المزيد
+    </button>
+  )
+}
+```
+
+## التوجيه السطحي
+
+<details>
+  <summary>أمثلة</summary>
+
+- [التوجيه السطحي](https://github.com/vercel/next.js/tree/canary/examples/with-shallow-routing)
+
+</details>
+
+يسمح التوجيه السطحي بتغيير عنوان URL دون إعادة تشغيل طرق جلب البيانات مرة أخرى، بما في ذلك [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)، و[`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)، و[`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props).
+
+ستتلقى `pathname` و`query` المحدثين عبر [كائن الموجه](/docs/pages/api-reference/functions/use-router#router-object) (المضاف بواسطة [`useRouter`](/docs/pages/api-reference/functions/use-router) أو [`withRouter`](/docs/pages/api-reference/functions/use-router#withrouter))، دون فقدان الحالة.
+
+لتمكين التوجيه السطحي، قم بتعيين خيار `shallow` إلى `true`. ضع في اعتبارك المثال التالي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+// عنوان URL الحالي هو '/'
+function Page() {
+  const router = useRouter()
+
+  useEffect(() => {
+    // قم دائمًا بالتنقل بعد التصيير الأول
+    router.push('/?counter=10', undefined, { shallow: true })
+  }, [])
+
+  useEffect(() => {
+    // لقد تغير العداد!
+  }, [router.query.counter])
+}
+
+export default Page
+```
+
+سيتم تحديث عنوان URL إلى `/?counter=10` ولن يتم استبدال الصفحة، فقط حالة المسار تتغير.
+
+يمكنك أيضًا مراقبة تغييرات عنوان URL عبر [`componentDidUpdate`](https://react.dev/reference/react/Component#componentdidupdate) كما هو موضح أدناه:
+
+```jsx
+componentDidUpdate(prevProps) {
+  const { pathname, query } = this.props.router
+  // تحقق من تغير الخصائص لتجنب حلقة لا نهائية
+  if (query.counter !== prevProps.router.query.counter) {
+    // جلب البيانات بناءً على الاستعلام الجديد
+  }
+}
+```
+
+### محاذير
+
+يعمل التوجيه السطحي **فقط** لتغييرات عنوان URL في الصفحة الحالية. على سبيل المثال، لنفترض أن لدينا صفحة أخرى تسمى `pages/about.js`، وتقوم بتشغيل هذا:
+
+```js
+router.push('/?counter=10', '/about?counter=10', { shallow: true })
+```
+
+نظرًا لأن هذه صفحة جديدة، فإنها ستفرغ الصفحة الحالية، وتحميل الصفحة الجديدة وانتظار جلب البيانات حتى لو طلبنا التوجيه السطحي.
+
+عند استخدام التوجيه السطحي مع middleware، فلن يضمن أن الصفحة الجديدة تطابق الصفحة الحالية كما كان يتم سابقًا بدون middleware. هذا بسبب أن middleware يمكنه إعادة الكتابة ديناميكيًا ولا يمكن التحقق منه من جانب العميل دون جلب البيانات الذي يتم تخطيه مع التوجيه السطحي، لذلك يجب دائمًا معاملة تغيير المسار السطحي على أنه سطحي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/04-redirecting.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/04-redirecting.mdx
new file mode 100644
index 00000000..678fdd01
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/04-redirecting.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:30.515Z
+title: إعادة التوجيه
+description: تعرف على الطرق المختلفة للتعامل مع عمليات إعادة التوجيه في Next.js.
+source: app/building-your-application/routing/redirecting
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/05-custom-app.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/05-custom-app.mdx
new file mode 100644
index 00000000..f6babc1a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/05-custom-app.mdx
@@ -0,0 +1,91 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:10.339Z
+title: تطبيق مخصص
+description: التحكم في تهيئة الصفحة وإضافة تخطيط ثابت لجميع الصفحات عن طريق تجاوز مكون التطبيق الافتراضي المستخدم من قبل Next.js.
+---
+
+يستخدم Next.js مكون `App` لتهيئة الصفحات. يمكنك تجاوزه والتحكم في تهيئة الصفحة وإضافة:
+
+- إنشاء تخطيط مشترك بين تغييرات الصفحات
+- حقن بيانات إضافية في الصفحات
+- [إضافة CSS عام](/docs/pages/building-your-application/styling)
+
+## الاستخدام
+
+لتجاوز `App` الافتراضي، أنشئ ملف `pages/_app` كما هو موضح أدناه:
+
+```tsx filename="pages/_app.tsx" switcher
+import type { AppProps } from 'next/app'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.jsx" switcher
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+خاصية `Component` تمثل `الصفحة` النشطة، لذلك عند التنقل بين المسارات، سيتغير `Component` ليعكس `الصفحة` الجديدة. وبالتالي، أي خصائص ترسلها إلى `Component` سيتم استلامها من قبل `الصفحة`.
+
+`pageProps` هو كائن يحتوي على الخصائص الأولية التي تم تحميلها مسبقًا لصفحتك باستخدام إحدى [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching)، وإلا سيكون كائنًا فارغًا.
+
+> **معلومة مفيدة**
+>
+> - إذا كان تطبيقك يعمل وقمت بإضافة `App` مخصص، ستحتاج إلى إعادة تشغيل خادم التطوير. هذا مطلوب فقط إذا لم يكن `pages/_app.js` موجودًا من قبل.
+> - لا يدعم `App` [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching) في Next.js مثل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+
+## استخدام `getInitialProps` مع `App`
+
+استخدام [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props) في `App` سيعطل [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization) للصفحات التي لا تحتوي على [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+**لا نوصي باستخدام هذا النمط.** بدلاً من ذلك، فكر في [التبني التدريجي](/docs/app/building-your-application/upgrading/app-router-migration) لموجه التطبيق (App Router)، الذي يسمح لك بجلب البيانات بسهولة أكبر لـ [الصفحات والتخطيطات](/docs/app/building-your-application/routing/pages-and-layouts).
+
+```tsx filename="pages/_app.tsx" switcher
+import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
+
+type AppOwnProps = { example: string }
+
+export default function MyApp({
+  Component,
+  pageProps,
+  example,
+}: AppProps & AppOwnProps) {
+  return (
+    <>
+      <p>Data: {example}</p>
+      <Component {...pageProps} />
+    </>
+  )
+}
+
+MyApp.getInitialProps = async (
+  context: AppContext
+): Promise<AppOwnProps & AppInitialProps> => {
+  const ctx = await App.getInitialProps(context)
+
+  return { ...ctx, example: 'data' }
+}
+```
+
+```jsx filename="pages/_app.jsx" switcher
+import App from 'next/app'
+
+export default function MyApp({ Component, pageProps, example }) {
+  return (
+    <>
+      <p>Data: {example}</p>
+      <Component {...pageProps} />
+    </>
+  )
+}
+
+MyApp.getInitialProps = async (context) => {
+  const ctx = await App.getInitialProps(context)
+
+  return { ...ctx, example: 'data' }
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/06-custom-document.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/06-custom-document.mdx
new file mode 100644
index 00000000..0c9f4053
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/06-custom-document.mdx
@@ -0,0 +1,149 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:14.750Z
+title: مستند مخصص
+description: توسيع ترميز المستند الافتراضي الذي يضيفه Next.js.
+---
+
+يمكن للمستند `Document` المخصص تحديث وسوم `<html>` و `<body>` المستخدمة في عرض [الصفحة](/docs/pages/building-your-application/routing/pages-and-layouts).
+
+للتجاوز عن المستند الافتراضي `Document`، أنشئ ملف `pages/_document` كما هو موضح أدناه:
+
+```tsx filename="pages/_document.tsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+```jsx filename="pages/_document.jsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+> **معلومة مفيدة**
+>
+> - يتم عرض `_document` فقط على الخادم، لذا لا يمكن استخدام معالجات الأحداث مثل `onClick` في هذا الملف.
+> - مكونات `<Html>`، `<Head />`، `<Main />` و `<NextScript />` مطلوبة لعرض الصفحة بشكل صحيح.
+
+## محاذير
+
+- مكون `<Head />` المستخدم في `_document` ليس هو نفسه [`next/head`](/docs/pages/api-reference/components/head). يجب استخدام مكون `<Head />` هنا فقط لأي كود `<head>` مشترك بين جميع الصفحات. لجميع الحالات الأخرى، مثل وسوم `<title>`، نوصي باستخدام [`next/head`](/docs/pages/api-reference/components/head) في صفحاتك أو مكوناتك.
+- لن يتم تهيئة مكونات React خارج `<Main />` بواسطة المتصفح. لا تضيف منطق التطبيق هنا أو CSS مخصص (مثل `styled-jsx`). إذا كنت بحاجة إلى مكونات مشتركة في جميع صفحاتك (مثل قائمة أو شريط أدوات)، اقرأ [التخطيطات](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern) بدلاً من ذلك.
+- لا يدعم `Document` حاليًا [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching) في Next.js مثل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+
+## تخصيص `renderPage`
+
+تخصيص `renderPage` متقدم ومطلوب فقط لمكتبات مثل CSS-in-JS لدعم العرض من جانب الخادم (SSR). هذا غير مطلوب لدعم `styled-jsx` المدمج.
+
+**لا نوصي باستخدام هذا النمط.** بدلاً من ذلك، فكر في [التبني التدريجي](/docs/app/building-your-application/upgrading/app-router-migration) لموجه التطبيق (App Router)، الذي يسمح لك بجلب البيانات بسهولة أكبر لـ[الصفحات والتخطيطات](/docs/app/building-your-application/routing/pages-and-layouts).
+
+```tsx filename="pages/_document.tsx" switcher
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+  DocumentInitialProps,
+} from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const originalRenderPage = ctx.renderPage
+
+    // تشغيل منطق عرض React بشكل متزامن
+    ctx.renderPage = () =>
+      originalRenderPage({
+        // مفيد لتفعيل شجرة React كاملة
+        enhanceApp: (App) => App,
+        // مفيد لتفعيل على أساس كل صفحة
+        enhanceComponent: (Component) => Component,
+      })
+
+    // تشغيل `getInitialProps` الأصلية، وهي الآن تتضمن `renderPage` المخصصة
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
+```
+
+```jsx filename="pages/_document.jsx" switcher
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const originalRenderPage = ctx.renderPage
+
+    // تشغيل منطق عرض React بشكل متزامن
+    ctx.renderPage = () =>
+      originalRenderPage({
+        // مفيد لتفعيل شجرة React كاملة
+        enhanceApp: (App) => App,
+        // مفيد لتفعيل على أساس كل صفحة
+        enhanceComponent: (Component) => Component,
+      })
+
+    // تشغيل `getInitialProps` الأصلية، وهي الآن تتضمن `renderPage` المخصصة
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
+```
+
+> **معلومة مفيدة**
+>
+> - لا يتم استدعاء `getInitialProps` في `_document` أثناء الانتقالات من جانب العميل.
+> - كائن `ctx` لـ `_document` يعادل الكائن المستلم في [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object)، مع إضافة `renderPage`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/07-api-routes.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/07-api-routes.mdx
new file mode 100644
index 00000000..7dd3e1ae
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/07-api-routes.mdx
@@ -0,0 +1,425 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:18.258Z
+title: مسارات API
+description: يدعم Next.js مسارات API التي تتيح لك بناء واجهة برمجة التطبيقات (API) دون الحاجة إلى مغادرة تطبيق Next.js. تعرف على كيفية عملها هنا.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مسارات API الأساسية](https://github.com/vercel/next.js/tree/canary/examples/api-routes)
+- [مساعدات طلبات مسارات API](https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware)
+- [مسارات API مع GraphQL](https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql)
+- [مسارات API مع REST](https://github.com/vercel/next.js/tree/canary/examples/api-routes-rest)
+- [مسارات API مع CORS](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors)
+
+</details>
+
+> **معلومة مفيدة**: إذا كنت تستخدم App Router، يمكنك استخدام [مكونات الخادم (Server Components)](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) أو [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) بدلاً من مسارات API.
+
+توفر مسارات API حلاً لبناء **واجهة برمجة تطبيقات عامة (public API)** باستخدام Next.js.
+
+أي ملف داخل مجلد `pages/api` يتم تعيينه إلى `/api/*` وسيتم التعامل معه كنقطة نهاية API بدلاً من `صفحة`. هذه الملفات تعمل فقط على جانب الخادم ولن تزيد من حجم حزمة جانب العميل.
+
+على سبيل المثال، مسار API التالي يعيد استجابة JSON مع رمز حالة `200`:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - مسارات API [لا تحدد رؤوس CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)، مما يعني أنها **تعمل فقط من نفس المصدر (same-origin only)** افتراضيًا. يمكنك تخصيص هذا السلوك عن طريق تغليف معالج الطلب بـ[مساعدات طلب CORS](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors).
+> - لا يمكن استخدام مسارات API مع [التصدير الثابت (static exports)](/docs/pages/building-your-application/deploying/static-exports). ومع ذلك، يمكن لـ[معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) في App Router ذلك.
+> - ستتأثر مسارات API بـ[إعدادات `pageExtensions`](/docs/pages/api-reference/next-config-js/pageExtensions) في `next.config.js`.
+
+## المعاملات
+
+```tsx
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  // ...
+}
+```
+
+- `req`: نسخة من [http.IncomingMessage](https://nodejs.org/api/http.html#class-httpincomingmessage)
+- `res`: نسخة من [http.ServerResponse](https://nodejs.org/api/http.html#class-httpserverresponse)
+
+## طرق HTTP
+
+للتعامل مع طرق HTTP المختلفة في مسار API، يمكنك استخدام `req.method` في معالج الطلب، كما يلي:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === 'POST') {
+    // معالجة طلب POST
+  } else {
+    // التعامل مع أي طريقة HTTP أخرى
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  if (req.method === 'POST') {
+    // معالجة طلب POST
+  } else {
+    // التعامل مع أي طريقة HTTP أخرى
+  }
+}
+```
+
+## مساعدات الطلب
+
+توفر مسارات API مساعدات طلب مدمجة تقوم بتحليل الطلب الوارد (`req`):
+
+- `req.cookies` - كائن يحتوي على الكوكيز المرسلة مع الطلب. القيمة الافتراضية `{}`
+- `req.query` - كائن يحتوي على [سلسلة الاستعلام (query string)](https://en.wikipedia.org/wiki/Query_string). القيمة الافتراضية `{}`
+- `req.body` - كائن يحتوي على الجسم المحلل حسب `content-type`، أو `null` إذا لم يتم إرسال جسم
+
+### التكوين المخصص
+
+يمكن لكل مسار API تصدير كائن `config` لتغيير التكوين الافتراضي، وهو كالتالي:
+
+```js
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '1mb',
+    },
+  },
+  // يحدد المدة القصوى المسموح بها لتنفيذ هذه الوظيفة (بالثواني)
+  maxDuration: 5,
+}
+```
+
+`bodyParser` مفعل تلقائيًا. إذا كنت تريد استهلاك الجسم كـ `Stream` أو مع [`raw-body`](https://www.npmjs.com/package/raw-body)، يمكنك تعيين هذا إلى `false`.
+
+إحدى حالات الاستخدام لتعطيل `bodyParsing` التلقائي هي السماح لك بالتحقق من الجسم الخام لطلب **webhook**، على سبيل المثال [من GitHub](https://docs.github.com/en/developers/webhooks-and-events/webhooks/securing-your-webhooks#validating-payloads-from-github).
+
+```js
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+}
+```
+
+`bodyParser.sizeLimit` هو الحد الأقصى للحجم المسموح به للجسم المحلل، بأي تنسيق مدعوم من [bytes](https://github.com/visionmedia/bytes.js)، كما يلي:
+
+```js
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '500kb',
+    },
+  },
+}
+```
+
+`externalResolver` هو علم صريح يخبر الخادم أن هذا المسار يتم معالجته بواسطة محلل خارجي مثل _express_ أو _connect_. تفعيل هذا الخيار يعطل التحذيرات للطلبات غير المحلولة.
+
+```js
+export const config = {
+  api: {
+    externalResolver: true,
+  },
+}
+```
+
+`responseLimit` مفعل تلقائيًا، ويظهر تحذيرًا عندما يتجاوز حجم استجابة مسارات API 4MB.
+
+إذا كنت لا تستخدم Next.js في بيئة بدون خادم (serverless)، وتفهم الآثار المترتبة على الأداء لعدم استخدام CDN أو مضيف وسائط مخصص، يمكنك تعيين هذا الحد إلى `false`.
+
+```js
+export const config = {
+  api: {
+    responseLimit: false,
+  },
+}
+```
+
+يمكن أن يأخذ `responseLimit` أيضًا عدد البايتات أو أي تنسيق سلسلة مدعوم من `bytes`، على سبيل المثال `1000`، `'500kb'` أو `'3mb'`.
+ستكون هذه القيمة هي الحد الأقصى لحجم الاستجابة قبل ظهور تحذير. القيمة الافتراضية هي 4MB. (انظر أعلاه)
+
+```js
+export const config = {
+  api: {
+    responseLimit: '8mb',
+  },
+}
+```
+
+## مساعدات الاستجابة
+
+كائن [استجابة الخادم (Server Response)](https://nodejs.org/api/http.html#http_class_http_serverresponse)، (غالبًا ما يختصر بـ `res`) يتضمن مجموعة من طرق المساعدة المشابهة لـ Express.js لتحسين تجربة المطور وزيادة سرعة إنشاء نقاط نهاية API جديدة.
+
+تشمل طرق المساعدة:
+
+- `res.status(code)` - دالة لتعيين رمز الحالة. يجب أن يكون `code` رمز حالة HTTP صالحًا
+- `res.json(body)` - إرسال استجابة JSON. يجب أن يكون `body` كائنًا قابلاً للتسلسل
+- `res.send(body)` - إرسال استجابة HTTP. يمكن أن يكون `body` `سلسلة`، `كائن` أو `Buffer`
+- `res.redirect([status,] path)` - إعادة التوجيه إلى مسار أو URL محدد. يجب أن يكون `status` رمز حالة HTTP صالحًا. إذا لم يتم تحديده، فإن `status` يكون افتراضيًا "307" "إعادة توجيه مؤقتة".
+- `res.revalidate(urlPath)` - [إعادة التحقق من صفحة عند الطلب](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) باستخدام `getStaticProps`. يجب أن يكون `urlPath` `سلسلة`.
+
+### تعيين رمز حالة الاستجابة
+
+عند إرسال استجابة إلى العميل، يمكنك تعيين رمز حالة الاستجابة.
+
+يضبط المثال التالي رمز حالة الاستجابة إلى `200` (`OK`) ويعيد خاصية `message` بقيمة `Hello from Next.js!` كاستجابة JSON:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default function handler(req, res) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+### إرسال استجابة JSON
+
+عند إرسال استجابة إلى العميل، يمكنك إرسال استجابة JSON، ويجب أن يكون هذا كائنًا قابلًا للتسلسل.
+في تطبيق حقيقي، قد ترغب في إعلام العميل بحالة الطلب بناءً على نتيجة نقطة النهاية المطلوبة.
+
+يرسل المثال التالي استجابة JSON مع رمز الحالة `200` (`OK`) ونتيجة العملية غير المتزامنة. يتم تضمينها في كتلة try catch للتعامل مع أي أخطاء قد تحدث، مع رمز الحالة المناسب ورسالة الخطأ التي يتم التقاطها وإرسالها إلى العميل:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).json({ result })
+  } catch (err) {
+    res.status(500).json({ error: 'failed to load data' })
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default async function handler(req, res) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).json({ result })
+  } catch (err) {
+    res.status(500).json({ error: 'failed to load data' })
+  }
+}
+```
+
+### إرسال استجابة HTTP
+
+يعمل إرسال استجابة HTTP بنفس طريقة إرسال استجابة JSON. الفرق الوحيد هو أن جسم الاستجابة يمكن أن يكون `سلسلة`، `كائن` أو `Buffer`.
+
+يرسل المثال التالي استجابة HTTP مع رمز الحالة `200` (`OK`) ونتيجة العملية غير المتزامنة.
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).send({ result })
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default async function handler(req, res) {
+  try {
+    const result = await someAsyncOperation()
+    res.status(200).send({ result })
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+### إعادة التوجيه إلى مسار أو URL محدد
+
+على سبيل المثال، قد ترغب في إعادة توجيه عميلك إلى مسار أو URL محدد بمجرد تقديم النموذج.
+
+يعيد المثال التالي توجيه العميل إلى المسار `/` إذا تم إرسال النموذج بنجاح:
+
+```ts filename="pages/api/hello.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { name, message } = req.body
+
+  try {
+    await handleFormInputAsync({ name, message })
+    res.redirect(307, '/')
+  } catch (err) {
+    res.status(500).send({ error: 'Failed to fetch data' })
+  }
+}
+```
+
+```js filename="pages/api/hello.js" switcher
+export default async function handler(req, res) {
+  const { name, message } = req.body
+
+  try {
+    await handleFormInputAsync({ name, message })
+    res.redirect(307, '/')
+  } catch (err) {
+    res.status(500).send({ error: 'failed to fetch data' })
+  }
+}
+```
+
+### إضافة أنواع TypeScript
+
+يمكنك جعل مسارات API أكثر أمانًا من حيث النوع عن طريق استيراد أنواع `NextApiRequest` و `NextApiResponse` من `next`، بالإضافة إلى ذلك، يمكنك أيضًا كتابة بيانات الاستجابة الخاصة بك:
+
+```ts
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+  message: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  res.status(200).json({ message: 'Hello from Next.js!' })
+}
+```
+
+> **معلومة مفيدة**: جسم `NextApiRequest` هو `any` لأن العميل قد يتضمن أي حمولة. يجب عليك التحقق من نوع/شكل الجسم في وقت التشغيل قبل استخدامه.
+
+## مسارات API الديناميكية
+
+تدعم مسارات API [المسارات الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes)، وتتبع نفس قواعد تسمية الملفات المستخدمة لـ `pages/`.
+
+```ts filename="pages/api/post/[pid].ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { pid } = req.query
+  res.end(`Post: ${pid}`)
+}
+```
+
+```js filename="pages/api/post/[pid].js" switcher
+export default function handler(req, res) {
+  const { pid } = req.query
+  res.end(`Post: ${pid}`)
+}
+```
+
+الآن، سيستجيب الطلب إلى `/api/post/abc` بالنص: `Post: abc`.
+
+### مسارات API الشاملة
+
+يمكن توسيع مسارات API لالتقاط جميع المسارات عن طريق إضافة ثلاث نقاط (`...`) داخل الأقواس. على سبيل المثال:
+
+- `pages/api/post/[...slug].js` يطابق `/api/post/a`، ولكن أيضًا `/api/post/a/b`، `/api/post/a/b/c` وهكذا.
+
+> **معلومة مفيدة**: يمكنك استخدام أسماء أخرى غير `slug`، مثل: `[...param]`
+
+سيتم إرسال المعاملات المطابقة كمعامل استعلام (`slug` في المثال) إلى الصفحة، وسيكون دائمًا مصفوفة، لذا فإن المسار `/api/post/a` سيكون له كائن `query` التالي:
+
+```json
+{ "slug": ["a"] }
+```
+
+وفي حالة `/api/post/a/b`، وأي مسار مطابق آخر، ستتم إضافة معاملات جديدة إلى المصفوفة، كما يلي:
+
+```json
+{ "slug": ["a", "b"] }
+```
+
+على سبيل المثال:
+
+```ts filename="pages/api/post/[...slug].ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { slug } = req.query
+  res.end(`Post: ${slug.join(', ')}`)
+}
+```
+
+```js filename="pages/api/post/[...slug].js" switcher
+export default function handler(req, res) {
+  const { slug } = req.query
+  res.end(`Post: ${slug.join(', ')}`)
+}
+```
+
+الآن، سيستجيب الطلب إلى `/api/post/a/b/c` بالنص: `Post: a, b, c`.
+
+### مسارات API الشاملة الاختيارية
+
+يمكن جعل المسارات الشاملة اختيارية عن طريق تضمين المعامل في أقواس مزدوجة (`[[...slug]]`).
+
+على سبيل المثال، `pages/api/post/[[...slug]].js` سيطابق `/api/post`، `/api/post/a`، `/api/post/a/b`، وهكذا.
+
+الفرق الرئيسي بين المسارات الشاملة والمسارات الشاملة الاختيارية هو أنه مع المسارات الاختيارية، يتم أيضًا مطابقة المسار بدون المعامل (`/api/post` في المثال أعلاه).
+
+كائنات `query` هي كما يلي:
+
+```json
+{ } // GET `/api/post` (كائن فارغ)
+{ "slug": ["a"] } // `GET /api/post/a` (مصفوفة ذات عنصر واحد)
+{ "slug": ["a", "b"] } // `GET /api/post/a/b` (مصفوفة متعددة العناصر)
+```
+
+### محاذير
+
+- تأخذ مسارات API المحددة مسبقًا الأسبقية على مسارات API الديناميكية، وتأخذ المسارات الديناميكية الأسبقية على مسارات API الشاملة. انظر إلى الأمثلة التالية:
+  - `pages/api/post/create.js` - سيطابق `/api/post/create`
+  - `pages/api/post/[pid].js` - سيطابق `/api/post/1`، `/api/post/abc`، إلخ. ولكن ليس `/api/post/create`
+  - `pages/api/post/[...slug].js` - سيطابق `/api/post/1/2`، `/api/post/a/b/c`، إلخ. ولكن ليس `/api/post/create`، `/api/post/abc`
+
+## مسارات API على الحافة (Edge)
+
+إذا كنت ترغب في استخدام مسارات API مع Edge Runtime، نوصي بتبني App Router تدريجيًا واستخدام [معالجات المسار (Route Handlers)](/docs/app/building-your-application/routing/route-handlers) بدلاً من مسارات API.
+
+توقيع دالة معالجات المسار متساوي الشكل (isomorphic)، مما يعني أنه يمكنك استخدام نفس الوظيفة لكل من Edge و Node.js runtimes.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/08-custom-error.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/08-custom-error.mdx
new file mode 100644
index 00000000..d517aab1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/08-custom-error.mdx
@@ -0,0 +1,100 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:50.904Z
+title: الأخطاء المخصصة
+description: تجاوز وتوسيع صفحة الخطأ المدمجة للتعامل مع الأخطاء المخصصة.
+---
+
+## صفحة 404
+
+قد يتم الوصول إلى صفحة 404 بشكل متكرر. عرض صفحة الخطأ من جانب الخادم (SSR) لكل زيارة يزيد من حمل خادم Next.js. هذا يمكن أن يؤدي إلى زيادة التكاليف وتجارب بطيئة.
+
+لتجنب هذه المشاكل، يوفر Next.js صفحة 404 ثابتة افتراضيًا دون الحاجة إلى إضافة أي ملفات إضافية.
+
+### تخصيص صفحة 404
+
+لإنشاء صفحة 404 مخصصة يمكنك إنشاء ملف `pages/404.js`. يتم توليد هذا الملف بشكل ثابت (static) أثناء عملية البناء.
+
+```jsx filename="pages/404.js"
+export default function Custom404() {
+  return <h1>404 - الصفحة غير موجودة</h1>
+}
+```
+
+> **معلومة مفيدة**: يمكنك استخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) داخل هذه الصفحة إذا كنت بحاجة لجلب البيانات أثناء عملية البناء.
+
+## صفحة 500
+
+عرض صفحة خطأ من جانب الخادم (SSR) لكل زيارة يزيد من تعقيد الاستجابة للأخطاء. لمساعدة المستخدمين في الحصول على ردود سريعة للأخطاء، يوفر Next.js صفحة 500 ثابتة افتراضيًا دون الحاجة إلى إضافة أي ملفات إضافية.
+
+### تخصيص صفحة 500
+
+لتخصيص صفحة 500 يمكنك إنشاء ملف `pages/500.js`. يتم توليد هذا الملف بشكل ثابت (static) أثناء عملية البناء.
+
+```jsx filename="pages/500.js"
+export default function Custom500() {
+  return <h1>500 - حدث خطأ في جانب الخادم</h1>
+}
+```
+
+> **معلومة مفيدة**: يمكنك استخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) داخل هذه الصفحة إذا كنت بحاجة لجلب البيانات أثناء عملية البناء.
+
+### تخصيص متقدم لصفحة الأخطاء
+
+يتم التعامل مع أخطاء 500 من جانب العميل والخادم بواسطة مكون `Error`. إذا كنت ترغب في تجاوزه، قم بتعريف الملف `pages/_error.js` وأضف الكود التالي:
+
+```jsx
+function Error({ statusCode }) {
+  return (
+    <p>
+      {statusCode
+        ? `حدث خطأ ${statusCode} في الخادم`
+        : 'حدث خطأ في جانب العميل'}
+    </p>
+  )
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode }
+}
+
+export default Error
+```
+
+> ملف `pages/_error.js` يستخدم فقط في بيئة الإنتاج. في بيئة التطوير ستحصل على خطأ مع سلسلة الاستدعاءات لمعرفة مصدر الخطأ.
+
+### إعادة استخدام صفحة الخطأ المدمجة
+
+إذا كنت ترغب في عرض صفحة الخطأ المدمجة، يمكنك ذلك عن طريق استيراد مكون `Error`:
+
+```jsx
+import Error from 'next/error'
+
+export async function getServerSideProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const errorCode = res.ok ? false : res.status
+  const json = await res.json()
+
+  return {
+    props: { errorCode, stars: json.stargazers_count },
+  }
+}
+
+export default function Page({ errorCode, stars }) {
+  if (errorCode) {
+    return <Error statusCode={errorCode} />
+  }
+
+  return <div>نجوم Next: {stars}</div>
+}
+```
+
+يقبل مكون `Error` أيضًا خاصية `title` إذا كنت ترغب في إضافة رسالة نصية مع `statusCode`.
+
+إذا كان لديك مكون `Error` مخصص، تأكد من استيراده بدلاً من هذا. `next/error` يصدر المكون الافتراضي المستخدم من قبل Next.js.
+
+### محاذير
+
+- لا يدعم مكون `Error` حاليًا [طرق جلب البيانات](/docs/pages/building-your-application/data-fetching) في Next.js مثل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+- `_error`، مثل `_app`، هو اسم مسار محجوز. `_error` يستخدم لتعريف التخطيطات والسلوكيات المخصصة لصفحات الأخطاء. `/_error` سيعرض 404 عند الوصول إليه مباشرة عبر [التوجيه](/docs/pages/building-your-application/routing) أو العرض في [خادم مخصص](/docs/pages/building-your-application/configuring/custom-server).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/10-internationalization.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/10-internationalization.mdx
new file mode 100644
index 00000000..ca19c3af
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/10-internationalization.mdx
@@ -0,0 +1,357 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:29:00.981Z
+title: التوجيه الدولي (i18n) للروابط
+nav_title: التدويل
+description: يوفر Next.js دعمًا مدمجًا للكشف عن اللغة والتوجيه الدولي. تعرف على المزيد هنا.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [توجيه i18n](https://github.com/vercel/next.js/tree/canary/examples/i18n-routing)
+
+</details>
+
+يقدم Next.js دعمًا مدمجًا للتوجيه الدولي ([i18n](https://en.wikipedia.org/wiki/Internationalization_and_localization#Naming)) منذ الإصدار `v10.0.0`. يمكنك توفير قائمة باللغات، واللغة الافتراضية، ولغات محددة للنطاقات، وسيتولى Next.js توجيه الرواتب تلقائيًا.
+
+يهدف دعم توجيه i18n حاليًا إلى تكامل مع حلول مكتبات i18n الحالية مثل [`react-intl`](https://formatjs.io/docs/getting-started/installation)، [`react-i18next`](https://react.i18next.com/)، [`lingui`](https://lingui.dev/)، [`rosetta`](https://github.com/lukeed/rosetta)، [`next-intl`](https://github.com/amannn/next-intl)، [`next-translate`](https://github.com/aralroca/next-translate)، [`next-multilingual`](https://github.com/Avansai/next-multilingual)، [`tolgee`](https://tolgee.io/integrations/next)، وغيرها من خلال تبسيط المسارات وتحليل اللغة.
+
+## البدء
+
+للبدء، أضف تكوين `i18n` إلى ملف `next.config.js` الخاص بك.
+
+اللغات هي [معرفات لغة UTS](https://www.unicode.org/reports/tr35/tr35-59/tr35.html#Identifiers)، وهي تنسيق معياري لتحديد اللغات.
+
+بشكل عام، يتكون معرف اللغة من لغة ومنطقة ونص مفصولة بشرطة: `language-region-script`. المنطقة والنص اختيارية. مثال:
+
+- `en-US` - الإنجليزية كما تُستخدم في الولايات المتحدة
+- `nl-NL` - الهولندية كما تُستخدم في هولندا
+- `nl` - الهولندية، بدون منطقة محددة
+
+إذا كانت لغة المستخدم هي `nl-BE` ولم تكن مدرجة في التكوين الخاص بك، فسيتم توجيههم إلى `nl` إذا كانت متاحة، أو إلى اللغة الافتراضية بخلاف ذلك.
+إذا كنت لا تخطط لدعم جميع مناطق بلد ما، فمن الجيد تضمين لغات البلد التي ستكون بمثابة احتياطي.
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    // هذه هي جميع اللغات التي تريد دعمها في
+    // تطبيقك
+    locales: ['en-US', 'fr', 'nl-NL'],
+    // هذه هي اللغة الافتراضية التي تريد استخدامها عند زيارة
+    // مسار بدون بادئة لغة مثل `/hello`
+    defaultLocale: 'en-US',
+    // هذه قائمة بنطاقات اللغات واللغة الافتراضية التي
+    // يجب أن تتعامل معها (مطلوبة فقط عند إعداد توجيه النطاق)
+    // ملاحظة: يجب تضمين النطاقات الفرعية في قيمة النطاق لمطابقتها مثل "fr.example.com".
+    domains: [
+      {
+        domain: 'example.com',
+        defaultLocale: 'en-US',
+      },
+      {
+        domain: 'example.nl',
+        defaultLocale: 'nl-NL',
+      },
+      {
+        domain: 'example.fr',
+        defaultLocale: 'fr',
+        // يمكن أيضًا استخدام حقل http اختياري لاختبار
+        // نطاقات اللغات محليًا باستخدام http بدلاً من https
+        http: true,
+      },
+    ],
+  },
+}
+```
+
+## استراتيجيات اللغة
+
+هناك استراتيجيتان للتعامل مع اللغات: توجيه المسار الفرعي وتوجيه النطاق.
+
+### توجيه المسار الفرعي
+
+يضع توجيه المسار الفرعي اللغة في مسار الرابط.
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en-US', 'fr', 'nl-NL'],
+    defaultLocale: 'en-US',
+  },
+}
+```
+
+مع التكوين أعلاه، ستكون `en-US` و `fr` و `nl-NL` متاحة للتوجيه إليها، و `en-US` هي اللغة الافتراضية. إذا كان لديك `pages/blog.js` فستكون الروابط التالية متاحة:
+
+- `/blog`
+- `/fr/blog`
+- `/nl-nl/blog`
+
+اللغة الافتراضية ليس لها بادئة.
+
+### توجيه النطاق
+
+باستخدام توجيه النطاق، يمكنك تكوين اللغات ليتم تقديمها من نطاقات مختلفة:
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['en-US', 'fr', 'nl-NL', 'nl-BE'],
+    defaultLocale: 'en-US',
+
+    domains: [
+      {
+        // ملاحظة: يجب تضمين النطاقات الفرعية في قيمة النطاق لمطابقتها
+        // مثل www.example.com يجب استخدامها إذا كان هذا هو اسم المضيف المتوقع
+        domain: 'example.com',
+        defaultLocale: 'en-US',
+      },
+      {
+        domain: 'example.fr',
+        defaultLocale: 'fr',
+      },
+      {
+        domain: 'example.nl',
+        defaultLocale: 'nl-NL',
+        // تحديد اللغات الأخرى التي يجب إعادة توجيهها
+        // إلى هذا النطاق
+        locales: ['nl-BE'],
+      },
+    ],
+  },
+}
+```
+
+على سبيل المثال، إذا كان لديك `pages/blog.js` فستكون الروابط التالية متاحة:
+
+- `example.com/blog`
+- `www.example.com/blog`
+- `example.fr/blog`
+- `example.nl/blog`
+- `example.nl/nl-BE/blog`
+
+## الكشف التلقائي عن اللغة
+
+عندما يزور المستخدم جذر التطبيق (عادة `/`)، سيحاول Next.js الكشف تلقائيًا عن اللغة المفضلة للمستخدم بناءً على رأس [`Accept-Language`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) والنطاق الحالي.
+
+إذا تم اكتشاف لغة غير اللغة الافتراضية، سيتم إعادة توجيه المستخدم إلى:
+
+- **عند استخدام توجيه المسار الفرعي:** المسار مع بادئة اللغة
+- **عند استخدام توجيه النطاق:** النطاق مع تلك اللغة المحددة كلغة افتراضية
+
+عند استخدام توجيه النطاق، إذا زار مستخدم برأس `Accept-Language` بقيمة `fr;q=0.9` موقع `example.com`، فسيتم إعادة توجيهه إلى `example.fr` حيث أن هذا النطاق يتعامل مع اللغة `fr` افتراضيًا.
+
+عند استخدام توجيه المسار الفرعي، سيتم إعادة توجيه المستخدم إلى `/fr`.
+
+### إضافة بادئة للغة الافتراضية
+
+مع Next.js 12 و[البرمجية الوسيطة (Middleware)](/docs/pages/building-your-application/routing/middleware)، يمكننا إضافة بادئة للغة الافتراضية باستخدام [حل بديل](https://github.com/vercel/next.js/discussions/18419).
+
+على سبيل المثال، إليك ملف `next.config.js` مع دعم لبعض اللغات. لاحظ أن اللغة `"default"` قد تمت إضافتها عمدًا.
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    locales: ['default', 'en', 'de', 'fr'],
+    defaultLocale: 'default',
+    localeDetection: false,
+  },
+  trailingSlash: true,
+}
+```
+
+بعد ذلك، يمكننا استخدام [البرمجية الوسيطة (Middleware)](/docs/pages/building-your-application/routing/middleware) لإضافة قواعد توجيه مخصصة:
+
+```ts filename="middleware.ts"
+import { NextRequest, NextResponse } from 'next/server'
+
+const PUBLIC_FILE = /\.(.*)$/
+
+export async function middleware(req: NextRequest) {
+  if (
+    req.nextUrl.pathname.startsWith('/_next') ||
+    req.nextUrl.pathname.includes('/api/') ||
+    PUBLIC_FILE.test(req.nextUrl.pathname)
+  ) {
+    return
+  }
+
+  if (req.nextUrl.locale === 'default') {
+    const locale = req.cookies.get('NEXT_LOCALE')?.value || 'en'
+
+    return NextResponse.redirect(
+      new URL(`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url)
+    )
+  }
+}
+```
+
+تتخطى هذه [البرمجية الوسيطة (Middleware)](/docs/pages/building-your-application/routing/middleware) إضافة البادئة الافتراضية إلى [مسارات API](/docs/pages/building-your-application/routing/api-routes) وملفات [العامة](/docs/pages/building-your-application/optimizing/static-assets) مثل الخطوط أو الصور. إذا تم تقديم طلب للغة الافتراضية، نقوم بإعادة التوجيه إلى البادئة `/en`.
+
+### تعطيل الكشف التلقائي عن اللغة
+
+يمكن تعطيل الكشف التلقائي عن اللغة باستخدام:
+
+```js filename="next.config.js"
+module.exports = {
+  i18n: {
+    localeDetection: false,
+  },
+}
+```
+
+عند تعيين `localeDetection` إلى `false`، لن يقوم Next.js بعد الآن بإعادة التوجيه تلقائيًا بناءً على اللغة المفضلة للمستخدم وسيوفر فقط معلومات اللغة المكتشفة إما من نطاق اللغة أو مسار اللغة كما هو موضح أعلاه.
+
+## الوصول إلى معلومات اللغة
+
+يمكنك الوصول إلى معلومات اللغة عبر موجه Next.js. على سبيل المثال، باستخدام خطاف [`useRouter()`](/docs/pages/api-reference/functions/use-router) تكون الخصائص التالية متاحة:
+
+- `locale` يحتوي على اللغة النشطة حاليًا.
+- `locales` يحتوي على جميع اللغات المكونة.
+- `defaultLocale` يحتوي على اللغة الافتراضية المكونة.
+
+عند [التقديم المسبق](/docs/pages/building-your-application/rendering/static-site-generation) للصفحات باستخدام `getStaticProps` أو `getServerSideProps`، يتم توفير معلومات اللغة في [السياق](/docs/pages/building-your-application/data-fetching/get-static-props) المقدم للدالة.
+
+عند الاستفادة من `getStaticPaths`، يتم توفير اللغات المكونة في معلمة السياق للدالة تحت `locales` واللغة الافتراضية المكونة تحت `defaultLocale`.
+
+## الانتقال بين اللغات
+
+يمكنك استخدام `next/link` أو `next/router` للانتقال بين اللغات.
+
+بالنسبة لـ `next/link`، يمكن توفير خاصية `locale` للانتقال إلى لغة مختلفة عن اللغة النشطة حاليًا. إذا لم يتم توفير خاصية `locale`، سيتم استخدام اللغة النشطة `locale` أثناء انتقالات العميل. على سبيل المثال:
+
+```jsx
+import Link from 'next/link'
+
+export default function IndexPage(props) {
+  return (
+    <Link href="/another" locale="fr">
+      إلى /fr/another
+    </Link>
+  )
+}
+```
+
+عند استخدام طرق `next/router` مباشرة، يمكنك تحديد اللغة `locale` التي يجب استخدامها عبر خيارات الانتقال. على سبيل المثال:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function IndexPage(props) {
+  const router = useRouter()
+
+  return (
+    <div
+      onClick={() => {
+        router.push('/another', '/another', { locale: 'fr' })
+      }}
+    >
+      إلى /fr/another
+    </div>
+  )
+}
+```
+
+لاحظ أنه للتعامل مع تبديل اللغة `locale` فقط مع الحفاظ على جميع معلومات التوجيه مثل قيم استعلام [المسار الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes) أو قيم استعلام href المخفية، يمكنك توفير معلمة `href` ككائن:
+
+```jsx
+import { useRouter } from 'next/router'
+const router = useRouter()
+const { pathname, asPath, query } = router
+// تغيير اللغة فقط مع الحفاظ على جميع معلومات المسار الأخرى بما في ذلك استعلام href
+router.push({ pathname, query }, asPath, { locale: nextLocale })
+```
+
+راجع [هنا](/docs/pages/api-reference/functions/use-router#with-url-object) لمزيد من المعلومات حول هيكل الكائن لـ `router.push`.
+
+إذا كان لديك `href` يتضمن بالفعل اللغة، يمكنك اختيار عدم التعامل تلقائيًا مع بادئة اللغة:
+
+```jsx
+import Link from 'next/link'
+
+export default function IndexPage(props) {
+  return (
+    <Link href="/fr/another" locale={false}>
+      إلى /fr/another
+    </Link>
+  )
+}
+```
+
+## الاستفادة من ملف تعريف الارتباط `NEXT_LOCALE`
+
+يدعم Next.js تجاوز رأس accept-language باستخدام ملف تعريف الارتباط `NEXT_LOCALE=the-locale`. يمكن تعيين هذا الملف باستخدام مبدل اللغة ثم عندما يعود المستخدم إلى الموقع، سيستفيد من اللغة المحددة في ملف تعريف الارتباط عند إعادة التوجيه من `/` إلى موقع اللغة الصحيح.
+
+على سبيل المثال، إذا فضل المستخدم اللغة `fr` في رأس accept-language ولكن تم تعيين ملف تعريف الارتباط `NEXT_LOCALE=en`، فسيتم توجيه المستخدم إلى موقع اللغة `en` عند زيارة `/` حتى يتم إزالة ملف تعريف الارتباط أو انتهاء صلاحيته.
+
+## تحسين محركات البحث
+
+بما أن Next.js يعرف اللغة التي يزورها المستخدم، فسيضيف تلقائيًا سمة `lang` إلى علامة `<html>`.
+
+لا يعرف Next.js عن متغيرات الصفحة، لذا فإن الأمر يعود إليك لإضافة علامات `hreflang` باستخدام [`next/head`](/docs/pages/api-reference/components/head). يمكنك معرفة المزيد عن `hreflang` في [توثيق Google Webmasters](https://support.google.com/webmasters/answer/189077).
+
+## كيف يعمل هذا مع التوليد الثابت؟
+
+> لاحظ أن التوجيه الدولي لا يتكامل مع [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports) لأنه لا يستفيد من طبقة توجيه Next.js. يتم دعم تطبيقات Next.js الهجينة التي لا تستخدم `output: 'export'` بالكامل.
+
+### المسارات الديناميكية وصفحات `getStaticProps`
+
+بالنسبة للصفحات التي تستخدم `getStaticProps` مع [المسارات الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes)، يجب إرجاع جميع متغيرات اللغة للصفحة المراد تقديمها مسبقًا من [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths). إلى جانب كائن `params` الذي تم إرجاعه لـ `paths`، يمكنك أيضًا إرجاع حقل `locale` يحدد اللغة التي تريد تقديمها. على سبيل المثال:
+
+```jsx filename="pages/blog/[slug].js"
+export const getStaticPaths = ({ locales }) => {
+  return {
+    paths: [
+      // إذا لم يتم توفير `locale`، فسيتم إنشاء اللغة الافتراضية فقط
+      { params: { slug: 'post-1' }, locale: 'en-US' },
+      { params: { slug: 'post-1' }, locale: 'fr' },
+    ],
+    fallback: true,
+  }
+}
+```
+
+بالنسبة لصفحات [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization) وصفحات `getStaticProps` غير الديناميكية، **سيتم إنشاء نسخة من الصفحة لكل لغة**. هذا مهم للنظر فيه لأنه يمكن أن يزيد من أوقات البناء اعتمادًا على عدد اللغات المكونة داخل `getStaticProps`.
+
+على سبيل المثال، إذا كان لديك 50 لغة مكونة مع 10 صفحات غير ديناميكية تستخدم `getStaticProps`، فهذا يعني أن `getStaticProps` سيتم استدعاؤه 500 مرة. سيتم إنشاء 50 نسخة من الصفحات العشر خلال كل بناء.
+
+لتقليل وقت بناء الصفحات الديناميكية مع `getStaticProps`، استخدم [وضع `fallback`](/docs/pages/api-reference/functions/get-static-paths#fallback-true). هذا يسمح لك بإرجاع المسارات واللغات الأكثر شيوعًا فقط من `getStaticPaths` للتقديم المسبق أثناء البناء. ثم سيقوم Next.js ببناء الصفحات المتبقية في وقت التشغيل عند طلبها.
+
+### صفحات التحسين الثابت التلقائي
+
+بالنسبة للصفحات التي يتم [تحسينها ثابتًا تلقائيًا](/docs/pages/building-your-application/rendering/automatic-static-optimization)، سيتم إنشاء نسخة من الصفحة لكل لغة.
+
+### صفحات `getStaticProps` غير الديناميكية
+
+بالنسبة لصفحات `getStaticProps` غير الديناميكية، يتم إنشاء نسخة لكل لغة كما هو مذكور أعلاه. يتم استدعاء `getStaticProps` مع كل `locale` يتم تقديمه. إذا كنت ترغب في استبعاد لغة معينة من التقديم المسبق، يمكنك إرجاع `notFound: true` من `getStaticProps` ولن يتم إنشاء هذا المتغير من الصفحة.
+
+```js
+export async function getStaticProps({ locale }) {
+  // استدعاء نقطة نهاية API خارجية للحصول على المشاركات.
+  // يمكنك استخدام أي مكتبة لجلب البيانات
+  const res = await fetch(`https://.../posts?locale=${locale}`)
+  const posts = await res.json()
+
+  if (posts.length === 0) {
+    return {
+      notFound: true,
+    }
+  }
+
+  // بإرجاع { props: posts }، سيستقبل مكون Blog
+  // `posts` كخاصية في وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+## حدود تكوين i18n
+
+- `locales`: 100 لغة إجمالية
+- `domains`: 100 عنصر نطاق لغة إجمالي
+
+> **من الجيد معرفة**: تمت إضافة هذه الحدود في البداية لمنع [مشكلات الأداء المحتملة في وقت البناء](#dynamic-routes-and-getstaticprops-pages). يمكنك تجاوز هذه الحدود باستخدام التوجيه المخصص عبر [البرمجية الوسيطة (Middleware)](/docs/pages/building-your-application/routing/middleware) في Next.js 12.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/11-middleware.mdx
new file mode 100644
index 00000000..5492777f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/11-middleware.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:58.960Z
+title: البرمجيات الوسيطة (Middleware)
+description: تعلم كيفية استخدام البرمجيات الوسيطة (Middleware) لتشغيل التعليمات البرمجية قبل اكتمال الطلب.
+source: app/building-your-application/routing/middleware
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/index.mdx
new file mode 100644
index 00000000..a74ef76e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/01-routing/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:50.186Z
+title: التوجيه (Routing)
+description: تعلم أساسيات التوجيه لتطبيقات الواجهة الأمامية باستخدام موجه الصفحات (Pages Router).
+---
+
+يحتوي موجه الصفحات (Pages Router) على نظام توجيه يعتمد على نظام الملفات، مبني على مفهوم الصفحات. عند إضافة ملف إلى دليل `pages`، يصبح تلقائيًا متاحًا كمسار (route). تعلم المزيد عن التوجيه في موجه الصفحات:
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/01-server-side-rendering.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/01-server-side-rendering.mdx
new file mode 100644
index 00000000..2f0118b5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/01-server-side-rendering.mdx
@@ -0,0 +1,34 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:00.291Z
+title: العرض من جانب الخادم (SSR)
+description: استخدم العرض من جانب الخادم (SSR) لتوليد صفحات HTML عند كل طلب.
+---
+
+> يُشار إليها أيضًا باسم "SSR" أو "العرض الديناميكي (Dynamic Rendering)".
+
+إذا كانت الصفحة تستخدم **العرض من جانب الخادم (SSR)**، فإن HTML للصفحة يتم توليده عند **كل طلب**.
+
+لاستخدام العرض من جانب الخادم (SSR) لصفحة ما، تحتاج إلى `تصدير` دالة `غير متزامنة (async)` تسمى `getServerSideProps`. سيتم استدعاء هذه الدالة من قبل الخادم عند كل طلب.
+
+على سبيل المثال، لنفترض أن صفحتك تحتاج إلى عرض مسبق لبيانات يتم تحديثها بشكل متكرر (يتم جلبها من واجهة برمجة تطبيقات خارجية). يمكنك كتابة `getServerSideProps` التي تجلب هذه البيانات وتمريرها إلى `الصفحة` كما يلي:
+
+```jsx
+export default function Page({ data }) {
+  // عرض البيانات...
+}
+
+// يتم استدعاؤها عند كل طلب
+export async function getServerSideProps() {
+  // جلب البيانات من واجهة برمجة التطبيقات الخارجية
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  // تمرير البيانات إلى الصفحة عبر الخاصيات (props)
+  return { props: { data } }
+}
+```
+
+كما ترى، `getServerSideProps` تشبه `getStaticProps`، ولكن الفرق هو أن `getServerSideProps` تعمل عند كل طلب بدلاً من وقت البناء.
+
+لمعرفة المزيد حول كيفية عمل `getServerSideProps`، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/get-server-side-props).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/02-static-site-generation.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/02-static-site-generation.mdx
new file mode 100644
index 00000000..1c68156d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/02-static-site-generation.mdx
@@ -0,0 +1,176 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:27:33.538Z
+title: توليد المواقع الثابتة (SSG)
+description: استخدام توليد المواقع الثابتة (SSG) لتقديم الصفحات مسبقًا في وقت البناء.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مثال ووردبريس](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress)([عرض تجريبي](https://next-blog-wordpress.vercel.app))
+- [بداية مدونة باستخدام ملفات markdown](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) ([عرض تجريبي](https://next-blog-starter.vercel.app/))
+- [مثال DatoCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([عرض تجريبي](https://next-blog-datocms.vercel.app/))
+- [مثال TakeShape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([عرض تجريبي](https://next-blog-takeshape.vercel.app/))
+- [مثال Sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([عرض تجريبي](https://next-blog-sanity.vercel.app/))
+- [مثال Prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([عرض تجريبي](https://next-blog-prismic.vercel.app/))
+- [مثال Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([عرض تجريبي](https://next-blog-contentful.vercel.app/))
+- [مثال Strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([عرض تجريبي](https://next-blog-strapi.vercel.app/))
+- [مثال Prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([عرض تجريبي](https://next-blog-prepr.vercel.app/))
+- [مثال Agility CMS](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([عرض تجريبي](https://next-blog-agilitycms.vercel.app/))
+- [مثال Cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([عرض تجريبي](https://next-blog-cosmic.vercel.app/))
+- [مثال ButterCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([عرض تجريبي](https://next-blog-buttercms.vercel.app/))
+- [مثال Storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([عرض تجريبي](https://next-blog-storyblok.vercel.app/))
+- [مثال GraphCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([عرض تجريبي](https://next-blog-graphcms.vercel.app/))
+- [مثال Kontent](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([عرض تجريبي](https://next-blog-kontent.vercel.app/))
+- [مثال Builder.io](https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io) ([عرض تجريبي](https://cms-builder-io.vercel.app/))
+- [مثال TinaCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-tina) ([عرض تجريبي](https://cms-tina-example.vercel.app/))
+- [تغريدة ثابتة (عرض تجريبي)](https://static-tweet.vercel.app/)
+- [مثال Enterspeed](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([عرض تجريبي](https://next-blog-demo.enterspeed.com/))
+
+</details>
+
+إذا كانت الصفحة تستخدم **التوليد الثابت**، فإن HTML الصفحة يتم إنشاؤه في **وقت البناء**. هذا يعني في بيئة الإنتاج، يتم إنشاء HTML الصفحة عند تشغيل `next build`. سيتم بعد ذلك إعادة استخدام هذا HTML في كل طلب. يمكن تخزينه مؤقتًا بواسطة CDN.
+
+في Next.js، يمكنك توليد الصفحات ثابتًا **مع أو بدون بيانات**. دعونا نلقي نظرة على كل حالة.
+
+### التوليد الثابت بدون بيانات
+
+افتراضيًا، يقوم Next.js بتقديم الصفحات مسبقًا باستخدام التوليد الثابت دون جلب البيانات. إليك مثال:
+
+```jsx
+function About() {
+  return <div>About</div>
+}
+
+export default About
+```
+
+لاحظ أن هذه الصفحة لا تحتاج إلى جلب أي بيانات خارجية ليتم تقديمها مسبقًا. في مثل هذه الحالات، ينشئ Next.js ملف HTML واحد لكل صفحة أثناء وقت البناء.
+
+### التوليد الثابت مع البيانات
+
+بعض الصفحات تتطلب جلب بيانات خارجية للتقديم المسبق. هناك سيناريوهان، وقد ينطبق أحدهما أو كلاهما. في كل حالة، يمكنك استخدام هذه الوظائف التي يوفرها Next.js:
+
+1. إذا كان **محتوى** صفحتك يعتمد على بيانات خارجية: استخدم `getStaticProps`.
+2. إذا كانت **مسارات** صفحتك تعتمد على بيانات خارجية: استخدم `getStaticPaths` (عادة بالإضافة إلى `getStaticProps`).
+
+#### السيناريو 1: محتوى الصفحة يعتمد على بيانات خارجية
+
+**مثال**: قد تحتاج صفحة المدونة الخاصة بك إلى جلب قائمة منشورات المدونة من نظام إدارة المحتوى (CMS).
+
+```jsx
+// TODO: يجب جلب `posts` (عن طريق استدعاء نقطة نهاية API)
+//       قبل أن يمكن تقديم هذه الصفحة مسبقًا.
+export default function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+لجلب هذه البيانات عند التقديم المسبق، يسمح لك Next.js بتصدير دالة غير متزامنة تسمى `getStaticProps` من نفس الملف. يتم استدعاء هذه الدالة في وقت البناء وتتيح لك تمرير البيانات التي تم جلبها إلى `props` الصفحة عند التقديم المسبق.
+
+```jsx
+export default function Blog({ posts }) {
+  // عرض المنشورات...
+}
+
+// يتم استدعاء هذه الدالة في وقت البناء
+export async function getStaticProps() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // عن طريق إرجاع { props: { posts } }، سيستلم مكون Blog
+  // `posts` كخاصية في وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+لمعرفة المزيد حول كيفية عمل `getStaticProps`، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+#### السيناريو 2: مسارات الصفحة تعتمد على بيانات خارجية
+
+يسمح لك Next.js بإنشاء صفحات ذات **مسارات ديناميكية**. على سبيل المثال، يمكنك إنشاء ملف يسمى `pages/posts/[id].js` لعرض منشور مدونة واحد بناءً على `id`. سيسمح لك هذا بعرض منشور المدونة بـ `id: 1` عند الوصول إلى `posts/1`.
+
+> لمعرفة المزيد حول التوجيه الديناميكي، راجع [توثيق التوجيه الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes).
+
+ومع ذلك، قد يعتمد `id` الذي تريد تقديمه مسبقًا في وقت البناء على بيانات خارجية.
+
+**مثال**: لنفترض أنك أضفت منشور مدونة واحد فقط (مع `id: 1`) إلى قاعدة البيانات. في هذه الحالة، سترغب فقط في تقديم `posts/1` مسبقًا في وقت البناء.
+
+لاحقًا، قد تضيف المنشور الثاني مع `id: 2`. ثم سترغب في تقديم `posts/2` مسبقًا أيضًا.
+
+لذا فإن **مسارات** الصفحة التي يتم تقديمها مسبقًا تعتمد على بيانات خارجية. للتعامل مع هذا، يسمح لك Next.js بتصدير دالة غير متزامنة تسمى `getStaticPaths` من صفحة ديناميكية (`pages/posts/[id].js` في هذه الحالة). يتم استدعاء هذه الدالة في وقت البناء وتتيح لك تحديد المسارات التي تريد تقديمها مسبقًا.
+
+```jsx
+// يتم استدعاء هذه الدالة في وقت البناء
+export async function getStaticPaths() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد تقديمها مسبقًا بناءً على المنشورات
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // سنقوم بتقديم هذه المسارات مسبقًا فقط في وقت البناء.
+  // { fallback: false } تعني أن المسارات الأخرى يجب أن تعرض 404.
+  return { paths, fallback: false }
+}
+```
+
+أيضًا في `pages/posts/[id].js`، تحتاج إلى تصدير `getStaticProps` حتى تتمكن من جلب بيانات المنشور مع هذا `id` واستخدامها لتقديم الصفحة مسبقًا:
+
+```jsx
+export default function Post({ post }) {
+  // عرض المنشور...
+}
+
+export async function getStaticPaths() {
+  // ...
+}
+
+// يتم استدعاء هذه الدالة أيضًا في وقت البناء
+export async function getStaticProps({ params }) {
+  // params تحتوي على `id` المنشور.
+  // إذا كان المسار مثل /posts/1، فإن params.id هو 1
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  // تمرير بيانات المنشور إلى الصفحة عبر الخاصيات
+  return { props: { post } }
+}
+```
+
+لمعرفة المزيد حول كيفية عمل `getStaticPaths`، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/get-static-paths).
+
+### متى يجب استخدام التوليد الثابت؟
+
+نوصي باستخدام **التوليد الثابت** (مع وبدون بيانات) كلما أمكن ذلك لأن صفحتك يمكن بناؤها مرة واحدة وتقديمها بواسطة CDN، مما يجعلها أسرع بكثير من جعل الخادم يعرض الصفحة في كل طلب.
+
+يمكنك استخدام التوليد الثابت للعديد من أنواع الصفحات، بما في ذلك:
+
+- صفحات التسويق
+- منشورات المدونات والمحافظ
+- قوائم منتجات التجارة الإلكترونية
+- المساعدة والوثائق
+
+يجب أن تسأل نفسك: "هل يمكنني تقديم هذه الصفحة مسبقًا **قبل** طلب المستخدم؟" إذا كانت الإجابة نعم، فيجب عليك اختيار التوليد الثابت.
+
+من ناحية أخرى، فإن التوليد الثابت **ليس** فكرة جيدة إذا لم تتمكن من تقديم الصفحة مسبقًا قبل طلب المستخدم. ربما تعرض صفحتك بيانات يتم تحديثها بشكل متكرر، ويتغير محتوى الصفحة في كل طلب.
+
+في مثل هذه الحالات، يمكنك القيام بأحد الإجراءات التالية:
+
+- استخدام التوليد الثابت مع **جلب البيانات من جانب العميل**: يمكنك تخطي التقديم المسبق لبعض أجزاء الصفحة ثم استخدام JavaScript من جانب العميل لملئها. لمعرفة المزيد حول هذا النهج، راجع [توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching/client-side).
+- استخدام **التقديم من جانب الخادم (SSR)**: يقوم Next.js بتقديم الصفحة مسبقًا في كل طلب. سيكون أبطأ لأنه لا يمكن تخزين الصفحة مؤقتًا بواسطة CDN، ولكن الصفحة المقدمة مسبقًا ستكون دائمًا محدثة. سنتحدث عن هذا النهج أدناه.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/04-automatic-static-optimization.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/04-automatic-static-optimization.mdx
new file mode 100644
index 00000000..65af8d23
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/04-automatic-static-optimization.mdx
@@ -0,0 +1,50 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:16.389Z
+title: التحسين التلقائي للصفحات الثابتة
+description: يقوم Next.js تلقائيًا بتحسين تطبيقك ليكون HTML ثابتًا عندما يكون ذلك ممكنًا. تعرف على كيفية عمل هذه الميزة هنا.
+---
+
+يحدد Next.js تلقائيًا أن الصفحة ثابتة (يمكن تقديمها مسبقًا) إذا لم يكن لديها متطلبات بيانات تعيق التحميل. يتم هذا التحديد من خلال عدم وجود `getServerSideProps` أو `getInitialProps` في الصفحة.
+
+تتيح هذه الميزة لـ Next.js إنشاء تطبيقات هجينة تحتوي على **صفحات يتم عرضها من جانب الخادم وصفحات يتم إنشاؤها بشكل ثابت**.
+
+> الصفحات المولدة بشكل ثابت تظل تفاعلية: سيقوم Next.js بتهيئة التطبيق من جانب العميل ليمنحه تفاعلية كاملة.
+
+إحدى الفوائد الرئيسية لهذه الميزة هي أن الصفحات المحسنة لا تتطلب أي حسابات من جانب الخادم، ويمكن إرسالها فورًا إلى المستخدم النهائي من مواقع متعددة لشبكة CDN. والنتيجة هي تجربة تحميل *فائقة السرعة* للمستخدمين.
+
+## كيفية العمل
+
+إذا كان `getServerSideProps` أو `getInitialProps` موجودًا في الصفحة، سيتحول Next.js إلى عرض الصفحة عند الطلب (أي [عرض من جانب الخادم](/docs/pages/building-your-application/rendering/server-side-rendering)).
+
+إذا لم يكن الأمر كذلك، سيقوم Next.js **بتحسين الصفحة تلقائيًا** عن طريق تقديمها مسبقًا كـ HTML ثابت.
+
+أثناء التقديم المسبق، سيكون كائن `query` الخاص بالموجه فارغًا لأننا لا نملك معلومات `query` لتوفيرها خلال هذه المرحلة. بعد التهيئة، سيؤدي Next.js تحديثًا لتطبيقك لتوفير معلمات المسار في كائن `query`.
+
+الحالات التي يتم فيها تحديث الاستعلام بعد التهيئة مما يؤدي إلى عرض آخر هي:
+
+- الصفحة هي [مسار ديناميكي](/docs/pages/building-your-application/routing/dynamic-routes).
+- تحتوي الصفحة على قيم استعلام في URL.
+- تم تكوين [إعادة التوجيهات](/docs/pages/api-reference/next-config-js/rewrites) في ملف `next.config.js` حيث يمكن أن تحتوي هذه على معلمات قد تحتاج إلى تحليلها وتوفيرها في `query`.
+
+للتمييز ما إذا كان الاستعلام محدثًا بالكامل وجاهزًا للاستخدام، يمكنك الاستفادة من الحقل `isReady` في [`next/router`](/docs/pages/api-reference/functions/use-router#router-object).
+
+> **معلومة مفيدة**: المعلمات المضافة باستخدام [المسارات الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes) إلى صفحة تستخدم [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) ستكون دائمًا متاحة داخل كائن `query`.
+
+سيقوم `next build` بإصدار ملفات `.html` للصفحات المحسنة بشكل ثابت. على سبيل المثال، ستكون نتيجة الصفحة `pages/about.js` كما يلي:
+
+```bash filename="Terminal"
+.next/server/pages/about.html
+```
+
+وإذا أضفت `getServerSideProps` إلى الصفحة، فستصبح JavaScript، كما يلي:
+
+```bash filename="Terminal"
+.next/server/pages/about.js
+```
+
+## محاذير
+
+- إذا كان لديك [تطبيق مخصص `App`](/docs/pages/building-your-application/routing/custom-app) مع `getInitialProps`، فسيتم إيقاف هذا التحسين في الصفحات بدون [توليد ثابت](/docs/pages/building-your-application/data-fetching/get-static-props).
+- إذا كان لديك [مستند مخصص `Document`](/docs/pages/building-your-application/routing/custom-document) مع `getInitialProps`، فتأكد من التحقق مما إذا كان `ctx.req` محددًا قبل افتراض أن الصفحة يتم عرضها من جانب الخادم. سيكون `ctx.req` غير محدد للصفحات التي تم تقديمها مسبقًا.
+- تجنب استخدام قيمة `asPath` في [`next/router`](/docs/pages/api-reference/functions/use-router#router-object) في شجرة العرض حتى يصبح حقل `isReady` في الموجه `true`. تعرف الصفحات المحسنة بشكل ثابت على `asPath` من جانب العميل فقط وليس الخادم، لذا فإن استخدامها كخاصية قد يؤدي إلى أخطاء عدم تطابق. يوضح [مثال `active-class-name`](https://github.com/vercel/next.js/tree/canary/examples/active-class-name) طريقة واحدة لاستخدام `asPath` كخاصية.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/05-client-side-rendering.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/05-client-side-rendering.mdx
new file mode 100644
index 00000000..2595ba49
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/05-client-side-rendering.mdx
@@ -0,0 +1,74 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:15.097Z
+title: التصيير من جانب العميل (CSR)
+description: تعلم كيفية تنفيذ التصيير من جانب العميل في موجه الصفحات (Pages Router).
+related:
+  description: تعرف على طرق التصيير البديلة في Next.js.
+  links:
+    - pages/building-your-application/rendering/server-side-rendering
+    - pages/building-your-application/rendering/static-site-generation
+    - pages/building-your-application/data-fetching/incremental-static-regeneration
+    - app/building-your-application/routing/loading-ui-and-streaming
+---
+
+في التصيير من جانب العميل (CSR) مع React، يقوم المتصفح بتحميل صفحة HTML أساسية وجافاسكريبت اللازمة للصفحة. ثم يتم استخدام جافاسكريبت لتحديث DOM وتصيير الصفحة. عند التحميل الأول للتطبيق، قد يلاحظ المستخدم تأخيرًا بسيطًا قبل رؤية الصفحة كاملة، وذلك لأن الصفحة لا تُصيَّر بالكامل حتى يتم تنزيل جافاسكريبت وتحليلها وتنفيذها.
+
+بعد تحميل الصفحة لأول مرة، يكون الانتقال إلى صفحات أخرى على نفس الموقع أسرع عادةً، حيث لا يحتاج سوى جلب البيانات الضرورية، ويمكن لجافاسكريبت إعادة تصيير أجزاء من الصفحة دون الحاجة إلى تحديث كامل للصفحة.
+
+في Next.js، هناك طريقتان لتنفيذ التصيير من جانب العميل:
+
+1. استخدام خطاف React `useEffect()` داخل صفحاتك بدلاً من طرق التصيير من جانب الخادم ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) و [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)).
+2. استخدام مكتبة لجلب البيانات مثل [SWR](https://swr.vercel.app/) أو [TanStack Query](https://tanstack.com/query/latest/) لجلب البيانات من جانب العميل (موصى به).
+
+إليك مثالاً لاستخدام `useEffect()` داخل صفحة Next.js:
+
+```jsx filename="pages/index.js"
+import React, { useState, useEffect } from 'react'
+
+export function Page() {
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch('https://api.example.com/data')
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const result = await response.json()
+      setData(result)
+    }
+
+    fetchData().catch((e) => {
+      // handle the error as needed
+      console.error('An error occurred while fetching the data: ', e)
+    })
+  }, [])
+
+  return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
+}
+```
+
+في المثال أعلاه، يبدأ المكون بعرض `Loading...`. ثم بمجرد جلب البيانات، يعيد التصيير ويعرض البيانات.
+
+على الرغم من أن جلب البيانات في `useEffect` هو نمط قد تراه في تطبيقات React القديمة، نوصي باستخدام مكتبة لجلب البيانات لتحسين الأداء، التخزين المؤقت، التحديثات التفاؤلية، والمزيد. إليك مثالاً بسيطاً باستخدام [SWR](https://swr.vercel.app/) لجلب البيانات من جانب العميل:
+
+```jsx filename="pages/index.js"
+import useSWR from 'swr'
+
+export function Page() {
+  const { data, error, isLoading } = useSWR(
+    'https://api.example.com/data',
+    fetcher
+  )
+
+  if (error) return <p>Failed to load.</p>
+  if (isLoading) return <p>Loading...</p>
+
+  return <p>Your Data: {data}</p>
+}
+```
+
+> **معلومة مفيدة**:
+>
+> ضع في اعتبارك أن CSR قد يؤثر على تحسين محركات البحث (SEO). بعض زواحف محركات البحث قد لا تنفذ جافاسكريبت وبالتالي ترى فقط الحالة الأولية الفارغة أو حالة التحميل لتطبيقك. قد يؤدي أيضًا إلى مشاكل أداء للمستخدمين ذوي اتصالات الإنترنت البطيئة أو الأجهزة الضعيفة، حيث يحتاجون إلى انتظار تحميل وتنفيذ كل جافاسكريبت قبل رؤية الصفحة كاملة. يروج Next.js لنهج هجين يسمح لك باستخدام مزيج من [التصيير من جانب الخادم](/docs/pages/building-your-application/rendering/server-side-rendering)، [التوليد الثابت للموقع](/docs/pages/building-your-application/rendering/static-site-generation)، والتصيير من جانب العميل، **حسب احتياجات كل صفحة** في تطبيقك. في موجه التطبيق (App Router)، يمكنك أيضًا استخدام [واجهة تحميل مع Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming) لعرض مؤشر تحميل أثناء تصيير الصفحة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/06-edge-and-nodejs-runtimes.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/06-edge-and-nodejs-runtimes.mdx
new file mode 100644
index 00000000..42db42c6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/06-edge-and-nodejs-runtimes.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:23.892Z
+title: بيئات التشغيل (Edge و Node.js)
+description: تعرف على المزيد حول بيئات التشغيل القابلة للتبديل (Edge و Node.js) في Next.js.
+source: app/building-your-application/rendering/edge-and-nodejs-runtimes
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/index.mdx
new file mode 100644
index 00000000..0d9318ff
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/02-rendering/index.mdx
@@ -0,0 +1,24 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:34.252Z
+title: التصيير (Rendering)
+description: تعلم أساسيات التصيير في React وNext.js.
+---
+
+بشكل افتراضي، يقوم Next.js **بالتصيير المسبق** لكل صفحة. هذا يعني أن Next.js يقوم بإنشاء HTML لكل صفحة مسبقًا، بدلاً من ترك كل شيء لـ JavaScript من جانب العميل. يمكن أن يؤدي التصيير المسبق إلى تحسين الأداء وتحسين محركات البحث (SEO).
+
+يرتبط كل HTML مُنشأ بحد أدنى من كود JavaScript اللازم لتلك الصفحة. عندما يتم تحميل الصفحة بواسطة المتصفح، يتم تشغيل كود JavaScript الخاص بها مما يجعل الصفحة تفاعلية بالكامل (تسمى هذه العملية [الترطيب (hydration)](https://react.dev/reference/react-dom/client/hydrateRoot) في React).
+
+### التصيير المسبق
+
+يحتوي Next.js على شكلين من التصيير المسبق: **التوليد الثابت (Static Generation)** و**التصيير من جانب الخادم (Server-side Rendering)**.
+الفرق بينهما هو **متى** يتم إنشاء HTML للصفحة.
+
+- التوليد الثابت: يتم إنشاء HTML **أثناء البناء** وسيتم إعادة استخدامه في كل طلب.
+- التصيير من جانب الخادم: يتم إنشاء HTML **في كل طلب**.
+
+من المهم ملاحظة أن Next.js يسمح لك باختيار شكل التصيير المسبق الذي تريد استخدامه لكل صفحة. يمكنك إنشاء تطبيق Next.js "هجين" باستخدام التوليد الثابت لمعظم الصفحات واستخدام التصيير من جانب الخادم للصفحات الأخرى.
+
+نوصي باستخدام التوليد الثابت بدلاً من التصيير من جانب الخادم لأسباب تتعلق بالأداء. يمكن تخزين الصفحات المولدة ثابتًا بواسطة CDN دون الحاجة إلى تكوين إضافي لتعزيز الأداء. ومع ذلك، في بعض الحالات، قد يكون التصيير من جانب الخادم هو الخيار الوحيد.
+
+يمكنك أيضًا استخدام جلب البيانات من جانب العميل جنبًا إلى جنب مع التوليد الثابت أو التصيير من جانب الخادم. هذا يعني أنه يمكن تصيير بعض أجزاء الصفحة بالكامل بواسطة JavaScript من جانب العميل. لمعرفة المزيد، راجع وثائق [جلب البيانات](/docs/pages/building-your-application/data-fetching/client-side).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx
new file mode 100644
index 00000000..2dbd7bb1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx
@@ -0,0 +1,204 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:26.526Z
+title: getStaticProps
+description: جلب البيانات وإنشاء صفحات ثابتة باستخدام `getStaticProps`. تعرف على المزيد حول واجهة برمجة التطبيقات هذه لجلب البيانات في Next.js.
+---
+
+إذا قمت بتصدير دالة تسمى `getStaticProps` (إنشاء موقع ثابت) من صفحة، فإن Next.js سيقوم بعرض هذه الصفحة مسبقًا أثناء البناء باستخدام الخصائص التي تُرجعها `getStaticProps`.
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetStaticPropsType, GetStaticProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getStaticProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+> لاحظ أنه بغض النظر عن نوع العرض، سيتم تمرير أي `props` إلى مكون الصفحة ويمكن رؤيتها على جانب العميل في HTML الأولي. هذا للسماح للصفحة بأن تتم [إعادة التميؤ (hydration)](https://react.dev/reference/react-dom/hydrate) بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في `props`.
+
+[مرجع واجهة برمجة التطبيقات `getStaticProps`](/docs/pages/api-reference/functions/get-static-props) يغطي جميع المعاملات والخصائص التي يمكن استخدامها مع `getStaticProps`.
+
+## متى يجب استخدام getStaticProps؟
+
+يجب استخدام `getStaticProps` إذا:
+
+- البيانات المطلوبة لعرض الصفحة متوفرة في وقت البناء قبل طلب المستخدم
+- تأتي البيانات من نظام إدارة المحتوى (CMS) بدون واجهة أمامية
+- يجب أن تكون الصفحة معروضة مسبقًا (لتحسين محركات البحث) وسريعة جدًا - `getStaticProps` يولد ملفات `HTML` و `JSON`، وكلاهما يمكن تخزينه مؤقتًا بواسطة CDN لتحسين الأداء
+- يمكن تخزين البيانات بشكل علني (غير خاص بالمستخدم). يمكن تجاوز هذا الشرط في حالات محددة باستخدام Middleware لإعادة كتابة المسار.
+
+## متى يتم تشغيل getStaticProps
+
+`getStaticProps` يعمل دائمًا على الخادم ولا يعمل أبدًا على العميل. يمكنك التحقق من إزالة الكود المكتوب داخل `getStaticProps` من حزمة جانب العميل [باستخدام هذه الأداة](https://next-code-elimination.vercel.app/).
+
+- `getStaticProps` يعمل دائمًا أثناء `next build`
+- `getStaticProps` يعمل في الخلفية عند استخدام [`fallback: true`](/docs/pages/api-reference/functions/get-static-paths#fallback-true)
+- `getStaticProps` يتم استدعاؤه قبل العرض الأولي عند استخدام [`fallback: blocking`](/docs/pages/api-reference/functions/get-static-paths#fallback-blocking)
+- `getStaticProps` يعمل في الخلفية عند استخدام `revalidate`
+- `getStaticProps` يعمل عند الطلب في الخلفية عند استخدام [`revalidate()`](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)
+
+عند استخدامه مع [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)، سيعمل `getStaticProps` في الخلفية أثناء إعادة التحقق من الصفحة القديمة، وسيتم تقديم الصفحة الجديدة للمتصفح.
+
+لا يمكن لـ `getStaticProps` الوصول إلى الطلب الوارد (مثل معلمات الاستعلام أو رؤوس HTTP) لأنه يولد HTML ثابتًا. إذا كنت بحاجة إلى الوصول إلى الطلب لصفحتك، ففكر في استخدام [الوسيط (Middleware)](/docs/pages/building-your-application/routing/middleware) بالإضافة إلى `getStaticProps`.
+
+## استخدام getStaticProps لجلب البيانات من نظام إدارة المحتوى (CMS)
+
+يوضح المثال التالي كيفية جلب قائمة من منشورات المدونة من نظام إدارة المحتوى.
+
+```tsx filename="pages/blog.tsx" switcher
+// سيتم ملء المنشورات في وقت البناء بواسطة getStaticProps()
+export default function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة في وقت البناء على جانب الخادم.
+// لن يتم استدعاؤها على جانب العميل، لذا يمكنك حتى إجراء
+// استعلامات قاعدة بيانات مباشرة.
+export async function getStaticProps() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات.
+  // يمكنك استخدام أي مكتبة لجلب البيانات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // عن طريق إرجاع { props: { posts } }، سيستقبل مكون Blog
+  // `posts` كخاصية في وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+```jsx filename="pages/blog.js" switcher
+// سيتم ملء المنشورات في وقت البناء بواسطة getStaticProps()
+export default function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة في وقت البناء على جانب الخادم.
+// لن يتم استدعاؤها على جانب العميل، لذا يمكنك حتى إجراء
+// استعلامات قاعدة بيانات مباشرة.
+export async function getStaticProps() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات.
+  // يمكنك استخدام أي مكتبة لجلب البيانات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // عن طريق إرجاع { props: { posts } }، سيستقبل مكون Blog
+  // `posts` كخاصية في وقت البناء
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+```
+
+[مرجع واجهة برمجة التطبيقات `getStaticProps`](/docs/pages/api-reference/functions/get-static-props) يغطي جميع المعاملات والخصائص التي يمكن استخدامها مع `getStaticProps`.
+
+## كتابة كود جانب الخادم مباشرة
+
+بما أن `getStaticProps` يعمل فقط على جانب الخادم، فلن يعمل أبدًا على جانب العميل. لن يتم تضمينه حتى في حزمة JS للمتصفح، لذا يمكنك كتابة استعلامات قاعدة بيانات مباشرة دون إرسالها إلى المتصفحات.
+
+هذا يعني أنه بدلاً من جلب **مسار API** من `getStaticProps` (الذي يجلب البيانات من مصدر خارجي)، يمكنك كتابة كود جانب الخادم مباشرة في `getStaticProps`.
+
+خذ المثال التالي. يتم استخدام مسار API لجلب بعض البيانات من نظام إدارة المحتوى. ثم يتم استدعاء مسار API هذا مباشرة من `getStaticProps`. هذا ينتج عنه استدعاء إضافي، مما يقلل الأداء. بدلاً من ذلك، يمكن مشاركة منطق جلب البيانات من نظام إدارة المحتوى باستخدام دليل `lib/`. ثم يمكن مشاركته مع `getStaticProps`.
+
+```js filename="lib/load-posts.js"
+// الدالة التالية مشتركة
+// مع getStaticProps ومسارات API
+// من دليل `lib/`
+export async function loadPosts() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts/')
+  const data = await res.json()
+
+  return data
+}
+```
+
+```jsx filename="pages/blog.js"
+// pages/blog.js
+import { loadPosts } from '../lib/load-posts'
+
+// هذه الدالة تعمل فقط على جانب الخادم
+export async function getStaticProps() {
+  // بدلاً من جلب مسار `/api` الخاص بك، يمكنك استدعاء نفس
+  // الدالة مباشرة في `getStaticProps`
+  const posts = await loadPosts()
+
+  // الخصائص التي يتم إرجاعها سيتم تمريرها إلى مكون الصفحة
+  return { props: { posts } }
+}
+```
+
+بدلاً من ذلك، إذا كنت **لا** تستخدم مسارات API لجلب البيانات، فيمكن استخدام واجهة [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API) مباشرة في `getStaticProps` لجلب البيانات.
+
+للتحقق مما يزيله Next.js من حزمة جانب العميل، يمكنك استخدام [أداة next-code-elimination](https://next-code-elimination.vercel.app/).
+
+## إنشاء كل من HTML و JSON بشكل ثابت
+
+عند عرض صفحة تحتوي على `getStaticProps` مسبقًا في وقت البناء، بالإضافة إلى ملف HTML للصفحة، يقوم Next.js بإنشاء ملف JSON يحتوي على نتيجة تشغيل `getStaticProps`.
+
+سيتم استخدام ملف JSON هذا في توجيه جانب العميل من خلال [`next/link`](/docs/pages/api-reference/components/link) أو [`next/router`](/docs/pages/api-reference/functions/use-router). عند الانتقال إلى صفحة تم عرضها مسبقًا باستخدام `getStaticProps`، يقوم Next.js بجلب ملف JSON هذا (المحسوب مسبقًا في وقت البناء) واستخدامه كخصائص لمكون الصفحة. هذا يعني أن انتقالات الصفحة على جانب العميل **لن** تستدعي `getStaticProps` حيث يتم استخدام ملف JSON المصدر فقط.
+
+عند استخدام التجديد الثابت التدريجي، سيتم تنفيذ `getStaticProps` في الخلفية لإنشاء JSON المطلوب للتنقل على جانب العميل. قد ترى هذا في شكل طلبات متعددة لنفس الصفحة، ومع ذلك، هذا مقصود وليس له أي تأثير على أداء المستخدم النهائي.
+
+## أين يمكن استخدام getStaticProps
+
+يمكن تصدير `getStaticProps` فقط من **صفحة**. لا يمكن تصديره من ملفات غير الصفحات، أو `_app`، أو `_document`، أو `_error`.
+
+أحد أسباب هذا القيد هو أن React يحتاج إلى جميع البيانات المطلوبة قبل عرض الصفحة.
+
+أيضًا، يجب عليك تصدير `getStaticProps` كدالة مستقلة - **لن** تعمل إذا أضفت `getStaticProps` كخاصية لمكون الصفحة.
+
+> **ملاحظة جيدة**: إذا كنت قد أنشأت [تطبيقًا مخصصًا](/docs/pages/building-your-application/routing/custom-app)، فتأكد من تمرير `pageProps` إلى مكون الصفحة كما هو موضح في المستند المرتبط، وإلا ستكون الخصائص فارغة.
+
+## يعمل على كل طلب في وضع التطوير
+
+في وضع التطوير (`next dev`)، سيتم استدعاء `getStaticProps` على كل طلب.
+
+## وضع المعاينة
+
+يمكنك تجاوز التوليد الثابت مؤقتًا وعرض الصفحة في **وقت الطلب** بدلاً من وقت البناء باستخدام [**وضع المعاينة (Preview Mode)**](/docs/pages/building-your-application/configuring/preview-mode). على سبيل المثال، قد تستخدم نظام إدارة محتوى بدون واجهة أمامية وتريد معاينة المسودات قبل نشرها.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx
new file mode 100644
index 00000000..30422997
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx
@@ -0,0 +1,143 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:39.683Z
+title: getStaticPaths
+description: جلب البيانات وإنشاء صفحات ثابتة باستخدام `getStaticPaths`. تعرف على المزيد حول واجهة برمجة التطبيقات هذه لجلب البيانات في Next.js.
+---
+
+إذا كانت الصفحة تحتوي على [مسارات ديناميكية](/docs/pages/building-your-application/routing/dynamic-routes) وتستخدم `getStaticProps`، فإنها تحتاج إلى تحديد قائمة بالمسارات التي سيتم إنشاؤها بشكل ثابت.
+
+عندما تصدر دالة تسمى `getStaticPaths` (إنشاء موقع ثابت) من صفحة تستخدم مسارات ديناميكية، فإن Next.js سيقوم بعرض مسبقًا جميع المسارات المحددة بواسطة `getStaticPaths` بشكل ثابت.
+
+```tsx filename="pages/repo/[name].tsx" switcher
+import type {
+  InferGetStaticPropsType,
+  GetStaticProps,
+  GetStaticPaths,
+} from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticPaths = (async () => {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/repo/[name].js" switcher
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}
+
+export async function getStaticProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+[مرجع واجهة برمجة التطبيقات `getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) يغطي جميع المعلمات والخصائص التي يمكن استخدامها مع `getStaticPaths`.
+
+## متى يجب استخدام getStaticPaths؟
+
+يجب استخدام `getStaticPaths` إذا كنت تقوم بعرض صفحات مسبقًا بشكل ثابت تستخدم مسارات ديناميكية و:
+
+- البيانات تأتي من نظام إدارة محتوى بدون واجهة أمامية (headless CMS)
+- البيانات تأتي من قاعدة بيانات
+- البيانات تأتي من نظام الملفات
+- يمكن تخزين البيانات مؤقتًا بشكل عام (وليست خاصة بالمستخدم)
+- يجب عرض الصفحة مسبقًا (لتحسين محركات البحث SEO) وتكون سريعة جدًا — حيث يقوم `getStaticProps` بإنشاء ملفات `HTML` و `JSON`، وكلاهما يمكن تخزينه مؤقتًا بواسطة CDN لتحسين الأداء
+
+## متى يتم تشغيل getStaticPaths
+
+سيتم تشغيل `getStaticPaths` فقط أثناء البناء في بيئة الإنتاج، ولن يتم استدعاؤه أثناء وقت التشغيل. يمكنك التحقق من إزالة الكود المكتوب داخل `getStaticPaths` من حزمة جانب العميل [باستخدام هذه الأداة](https://next-code-elimination.vercel.app/).
+
+### كيف يعمل getStaticProps فيما يتعلق بـ getStaticPaths
+
+- يتم تشغيل `getStaticProps` أثناء `next build` لأي `paths` تم إرجاعها أثناء البناء
+- يتم تشغيل `getStaticProps` في الخلفية عند استخدام `fallback: true`
+- يتم استدعاء `getStaticProps` قبل العرض الأولي عند استخدام `fallback: blocking`
+
+## أين يمكن استخدام getStaticPaths
+
+- **يجب** استخدام `getStaticPaths` مع `getStaticProps`
+- **لا يمكن** استخدام `getStaticPaths` مع [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)
+- يمكنك تصدير `getStaticPaths` من [مسار ديناميكي](/docs/pages/building-your-application/routing/dynamic-routes) يستخدم أيضًا `getStaticProps`
+- **لا يمكن** تصدير `getStaticPaths` من ملف غير صفحة (مثل مجلد `components`)
+- يجب تصدير `getStaticPaths` كدالة مستقلة، وليس كخاصية لمكون الصفحة
+
+## التشغيل في كل طلب في بيئة التطوير
+
+في بيئة التطوير (`next dev`)، سيتم استدعاء `getStaticPaths` في كل طلب.
+
+## إنشاء المسارات عند الطلب
+
+يسمح `getStaticPaths` لك بالتحكم في الصفحات التي يتم إنشاؤها أثناء البناء بدلاً من إنشائها عند الطلب باستخدام [`fallback`](/docs/pages/api-reference/functions/get-static-paths#fallback-blocking). إنشاء المزيد من الصفحات أثناء البناء سيؤدي إلى عمليات بناء أبطأ.
+
+يمكنك تأجيل إنشاء جميع الصفحات عند الطلب عن طريق إرجاع مصفوفة فارغة لـ `paths`. يمكن أن يكون هذا مفيدًا بشكل خاص عند نشر تطبيق Next.js الخاص بك في بيئات متعددة. على سبيل المثال، يمكنك الحصول على عمليات بناء أسرع عن طريق إنشاء جميع الصفحات عند الطلب للمعاينات (وليس لبناء الإنتاج). هذا مفيد للمواقع التي تحتوي على مئات/آلاف الصفحات الثابتة.
+
+```jsx filename="pages/posts/[id].js"
+export async function getStaticPaths() {
+  // عندما يكون هذا صحيحًا (في بيئات المعاينة) لا تقم
+  // بعرض أي صفحات ثابتة مسبقًا
+  // (عمليات بناء أسرع، ولكن تحميل الصفحة الأولي أبطأ)
+  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
+    return {
+      paths: [],
+      fallback: 'blocking',
+    }
+  }
+
+  // استدعاء نقطة نهاية API خارجية للحصول على المنشورات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد عرضها مسبقًا بناءً على المنشورات
+  // في بيئات الإنتاج، قم بعرض جميع الصفحات مسبقًا
+  // (عمليات بناء أبطأ، ولكن تحميل الصفحة الأولي أسرع)
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // { fallback: false } يعني أن المسارات الأخرى يجب أن تعرض خطأ 404
+  return { paths, fallback: false }
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/03-forms-and-mutations.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/03-forms-and-mutations.mdx
new file mode 100644
index 00000000..e2c49a6d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/03-forms-and-mutations.mdx
@@ -0,0 +1,408 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:34.944Z
+title: النماذج والتحويلات (Forms and Mutations)
+nav_title: النماذج والتحويلات (Forms and Mutations)
+description: تعلم كيفية التعامل مع إرسال النماذج وتحويل البيانات باستخدام Next.js.
+---
+
+تمكنك النماذج من إنشاء وتحديث البيانات في تطبيقات الويب. يوفر Next.js طريقة قوية للتعامل مع إرسال النماذج وتحويل البيانات باستخدام **مسارات API (API Routes)**.
+
+> **معلومة مفيدة:**
+>
+> - سنوصي قريبًا [باعتماد تدريجي](/docs/app/building-your-application/upgrading/app-router-migration) لموجه التطبيق (App Router) واستخدام [إجراءات الخادم (Server Actions)](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) للتعامل مع إرسال النماذج وتحويل البيانات. تسمح إجراءات الخادم بتعريف دوال غير متزامنة على الخادم يمكن استدعاؤها مباشرة من مكوناتك، دون الحاجة إلى إنشاء مسار API يدويًا.
+> - لا تحدد مسارات API [رؤوس CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)، مما يعني أنها تعمل فقط من نفس المصدر افتراضيًا.
+> - نظرًا لأن مسارات API تعمل على الخادم، يمكننا استخدام قيم حساسة (مثل مفاتيح API) عبر [متغيرات البيئة (Environment Variables)](/docs/pages/building-your-application/configuring/environment-variables) دون الكشف عنها للعميل. هذا أمر بالغ الأهمية لأمان تطبيقك.
+
+## أمثلة
+
+### نموذج يعمل على الخادم فقط
+
+مع موجه الصفحات (Pages Router)، تحتاج إلى إنشاء نقاط نهاية API يدويًا للتعامل مع تحويل البيانات على الخادم بشكل آمن.
+
+```ts filename="pages/api/submit.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const data = req.body
+  const id = await createItem(data)
+  res.status(200).json({ id })
+}
+```
+
+```js filename="pages/api/submit.js" switcher
+export default function handler(req, res) {
+  const data = req.body
+  const id = await createItem(data)
+  res.status(200).json({ id })
+}
+```
+
+ثم استدع مسار API من العميل باستخدام معالج الأحداث:
+
+```tsx filename="pages/index.tsx" switcher
+import { FormEvent } from 'react'
+
+export default function Page() {
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const formData = new FormData(event.currentTarget)
+    const response = await fetch('/api/submit', {
+      method: 'POST',
+      body: formData,
+    })
+
+    // تعامل مع الاستجابة إذا لزم الأمر
+    const data = await response.json()
+    // ...
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit">إرسال</button>
+    </form>
+  )
+}
+```
+
+```jsx filename="pages/index.jsx" switcher
+export default function Page() {
+  async function onSubmit(event) {
+    event.preventDefault()
+
+    const formData = new FormData(event.target)
+    const response = await fetch('/api/submit', {
+      method: 'POST',
+      body: formData,
+    })
+
+    // تعامل مع الاستجابة إذا لزم الأمر
+    const data = await response.json()
+    // ...
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit">إرسال</button>
+    </form>
+  )
+}
+```
+
+## التحقق من صحة النموذج
+
+نوصي باستخدام التحقق من صحة HTML مثل `required` و `type="email"` للتحقق الأساسي من صحة النموذج على جانب العميل.
+
+للتحقق المتقدم من صحة النموذج على جانب الخادم، يمكنك استخدام مكتبة تحقق المخططات مثل [zod](https://zod.dev/) للتحقق من حقول النموذج قبل تحويل البيانات:
+
+```ts filename="pages/api/submit.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { z } from 'zod'
+
+const schema = z.object({
+  // ...
+})
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const parsed = schema.parse(req.body)
+  // ...
+}
+```
+
+```js filename="pages/api/submit.js" switcher
+import { z } from 'zod'
+
+const schema = z.object({
+  // ...
+})
+
+export default async function handler(req, res) {
+  const parsed = schema.parse(req.body)
+  // ...
+}
+```
+
+### التعامل مع الأخطاء
+
+يمكنك استخدام حالة React لعرض رسالة خطأ عند فشل إرسال النموذج:
+
+```tsx filename="pages/index.tsx" switcher
+import React, { useState, FormEvent } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsLoading(true)
+    setError(null) // مسح الأخطاء السابقة عند بدء طلب جديد
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (!response.ok) {
+        throw new Error('فشل في إرسال البيانات. يرجى المحاولة مرة أخرى.')
+      }
+
+      // تعامل مع الاستجابة إذا لزم الأمر
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // التقاط رسالة الخطأ لعرضها للمستخدم
+      setError(error.message)
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+      <form onSubmit={onSubmit}>
+        <input type="text" name="name" />
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'جاري التحميل...' : 'إرسال'}
+        </button>
+      </form>
+    </div>
+  )
+}
+```
+
+```jsx filename="pages/index.jsx" switcher
+import React, { useState } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  async function onSubmit(event) {
+    event.preventDefault()
+    setIsLoading(true)
+    setError(null) // مسح الأخطاء السابقة عند بدء طلب جديد
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (!response.ok) {
+        throw new Error('فشل في إرسال البيانات. يرجى المحاولة مرة أخرى.')
+      }
+
+      // تعامل مع الاستجابة إذا لزم الأمر
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // التقاط رسالة الخطأ لعرضها للمستخدم
+      setError(error.message)
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+      <form onSubmit={onSubmit}>
+        <input type="text" name="name" />
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'جاري التحميل...' : 'إرسال'}
+        </button>
+      </form>
+    </div>
+  )
+}
+```
+
+## عرض حالة التحميل
+
+يمكنك استخدام حالة React لعرض حالة التحميل عند إرسال النموذج على الخادم:
+
+```tsx filename="pages/index.tsx" switcher
+import React, { useState, FormEvent } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsLoading(true) // تعيين التحميل إلى true عند بدء الطلب
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      // تعامل مع الاستجابة إذا لزم الأمر
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // تعامل مع الخطأ إذا لزم الأمر
+      console.error(error)
+    } finally {
+      setIsLoading(false) // تعيين التحميل إلى false عند اكتمال الطلب
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit" disabled={isLoading}>
+        {isLoading ? 'جاري التحميل...' : 'إرسال'}
+      </button>
+    </form>
+  )
+}
+```
+
+```jsx filename="pages/index.jsx" switcher
+import React, { useState } from 'react'
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(false)
+
+  async function onSubmit(event) {
+    event.preventDefault()
+    setIsLoading(true) // تعيين التحميل إلى true عند بدء الطلب
+
+    try {
+      const formData = new FormData(event.currentTarget)
+      const response = await fetch('/api/submit', {
+        method: 'POST',
+        body: formData,
+      })
+
+      // تعامل مع الاستجابة إذا لزم الأمر
+      const data = await response.json()
+      // ...
+    } catch (error) {
+      // تعامل مع الخطأ إذا لزم الأمر
+      console.error(error)
+    } finally {
+      setIsLoading(false) // تعيين التحميل إلى false عند اكتمال الطلب
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="name" />
+      <button type="submit" disabled={isLoading}>
+        {isLoading ? 'جاري التحميل...' : 'إرسال'}
+      </button>
+    </form>
+  )
+}
+```
+
+### إعادة التوجيه
+
+إذا كنت ترغب في توجيه المستخدم إلى مسار مختلف بعد التحويل، يمكنك استخدام [`redirect`](/docs/pages/building-your-application/routing/api-routes#response-helpers) لتوجيهه إلى أي عنوان URL مطلق أو نسبي:
+
+```ts filename="pages/api/submit.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const id = await addPost()
+  res.redirect(307, `/post/${id}`)
+}
+```
+
+```js filename="pages/api/submit.js" switcher
+export default async function handler(req, res) {
+  const id = await addPost()
+  res.redirect(307, `/post/${id}`)
+}
+```
+
+### تعيين ملفات تعريف الارتباط (Cookies)
+
+يمكنك تعيين ملفات تعريف الارتباط داخل مسار API باستخدام طريقة `setHeader` على الاستجابة:
+
+```ts filename="pages/api/cookie.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
+  res.status(200).send('تم تعيين ملف تعريف الارتباط.')
+}
+```
+
+```js filename="pages/api/cookie.js" switcher
+export default async function handler(req, res) {
+  res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
+  res.status(200).send('تم تعيين ملف تعريف الارتباط.')
+}
+```
+
+### قراءة ملفات تعريف الارتباط
+
+يمكنك قراءة ملفات تعريف الارتباط داخل مسار API باستخدام مساعد الطلب [`cookies`](/docs/pages/building-your-application/routing/api-routes#request-helpers):
+
+```ts filename="pages/api/cookie.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const auth = req.cookies.authorization
+  // ...
+}
+```
+
+```js filename="pages/api/cookie.js" switcher
+export default async function handler(req, res) {
+  const auth = req.cookies.authorization
+  // ...
+}
+```
+
+### حذف ملفات تعريف الارتباط
+
+يمكنك حذف ملفات تعريف الارتباط داخل مسار API باستخدام طريقة `setHeader` على الاستجابة:
+
+```ts filename="pages/api/cookie.ts" switcher
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
+  res.status(200).send('تم حذف ملف تعريف الارتباط.')
+}
+```
+
+```js filename="pages/api/cookie.js" switcher
+export default async function handler(req, res) {
+  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
+  res.status(200).send('تم حذف ملف تعريف الارتباط.')
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx
new file mode 100644
index 00000000..552b6de0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx
@@ -0,0 +1,125 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:41.706Z
+title: getServerSideProps
+description: جلب البيانات في كل طلب باستخدام `getServerSideProps`.
+---
+
+`getServerSideProps` هي دالة في Next.js تُستخدم لجلب البيانات وعرض محتويات الصفحة في وقت الطلب.
+
+## مثال
+
+يمكنك استخدام `getServerSideProps` عن طريق تصديرها من مكون الصفحة. يوضح المثال التالي كيفية جلب البيانات من واجهة برمجة تطبيقات خارجية في `getServerSideProps`، وتمرير البيانات إلى الصفحة كخصائص (props):
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getServerSideProps = (async () => {
+  // جلب البيانات من واجهة برمجة تطبيقات خارجية
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo: Repo = await res.json()
+  // تمرير البيانات إلى الصفحة عبر الخصائص
+  return { props: { repo } }
+}) satisfies GetServerSideProps<{ repo: Repo }>
+
+export default function Page({
+  repo,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getServerSideProps() {
+  // جلب البيانات من واجهة برمجة تطبيقات خارجية
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  // تمرير البيانات إلى الصفحة عبر الخصائص
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
+}
+```
+
+## متى يجب استخدام `getServerSideProps`؟
+
+يجب استخدام `getServerSideProps` إذا كنت بحاجة إلى عرض صفحة تعتمد على بيانات مستخدم مخصصة، أو معلومات لا يمكن معرفتها إلا في وقت الطلب. على سبيل المثال، رؤوس `authorization` أو بيانات الموقع الجغرافي.
+
+إذا لم تكن بحاجة إلى جلب البيانات في وقت الطلب، أو تفضل تخزين البيانات مؤقتًا وعرض HTML مسبقًا، نوصي باستخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+## السلوك
+
+- تعمل `getServerSideProps` على الخادم.
+- يمكن تصدير `getServerSideProps` فقط من **صفحة**.
+- تُرجع `getServerSideProps` بيانات بتنسيق JSON.
+- عندما يزور المستخدم صفحة، سيتم استخدام `getServerSideProps` لجلب البيانات في وقت الطلب، ويتم استخدام البيانات لعرض HTML الأولي للصفحة.
+- يمكن عرض الخصائص (props) الممررة إلى مكون الصفحة على العميل كجزء من HTML الأولي. هذا يسمح بـ [hydrate](https://react.dev/reference/react-dom/hydrate) الصفحة بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في الخصائص.
+- عندما يزور المستخدم الصفحة عبر [`next/link`](/docs/pages/api-reference/components/link) أو [`next/router`](/docs/pages/api-reference/functions/use-router)، يرسل Next.js طلب API إلى الخادم، الذي يقوم بتشغيل `getServerSideProps`.
+- لا تحتاج إلى استدعاء [مسار API](/docs/pages/building-your-application/routing/api-routes) في Next.js لجلب البيانات عند استخدام `getServerSideProps` لأن الدالة تعمل على الخادم. بدلاً من ذلك، يمكنك استدعاء نظام إدارة المحتوى (CMS)، قاعدة بيانات، أو واجهات برمجة تطبيقات خارجية مباشرة من داخل `getServerSideProps`.
+
+> **معلومة مفيدة:**
+>
+> - راجع [مرجع API لـ `getServerSideProps`](/docs/pages/api-reference/functions/get-server-side-props) للمعلمات والخصائص التي يمكن استخدامها مع `getServerSideProps`.
+> - يمكنك استخدام [أداة إزالة الكود في Next.js](https://next-code-elimination.vercel.app/) للتحقق مما يتم إزالته من حزمة العميل.
+
+## معالجة الأخطاء
+
+إذا حدث خطأ داخل `getServerSideProps`، سيتم عرض ملف `pages/500.js`. راجع وثائق [صفحة 500](/docs/pages/building-your-application/routing/custom-error#500-page) لمعرفة المزيد حول كيفية إنشائها. أثناء التطوير، لن يتم استخدام هذا الملف وسيتم عرض رسالة خطأ التطوير بدلاً من ذلك.
+
+## حالات خاصة
+
+### وقت التشغيل على الحافة (Edge Runtime)
+
+يمكن استخدام `getServerSideProps` مع كل من [وقت تشغيل بدون خادم ووقت تشغيل الحافة](/docs/pages/building-your-application/rendering/edge-and-nodejs-runtimes)، ويمكنك تعيين الخصائص في كليهما.
+
+ولكن حاليًا في وقت تشغيل الحافة، لا يمكنك الوصول إلى كائن الاستجابة. هذا يعني أنه لا يمكنك - على سبيل المثال - إضافة ملفات تعريف الارتباط في `getServerSideProps`. للوصول إلى كائن الاستجابة، يجب **الاستمرار في استخدام وقت تشغيل Node.js**، وهو وقت التشغيل الافتراضي.
+
+يمكنك تعيين وقت التشغيل بشكل صريح لكل صفحة عن طريق تعديل `config`، على سبيل المثال:
+
+```jsx filename="pages/index.js"
+export const config = {
+  runtime: 'nodejs', // أو "edge"
+}
+
+export const getServerSideProps = async () => {}
+```
+
+### التخزين المؤقت مع عرض جانب الخادم (SSR)
+
+يمكنك استخدام رؤوس التخزين المؤقت (`Cache-Control`) داخل `getServerSideProps` لتخزين الاستجابات الديناميكية مؤقتًا. على سبيل المثال، باستخدام [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/).
+
+```jsx
+// تعتبر هذه القيمة جديدة لمدة عشر ثوانٍ (s-maxage=10).
+// إذا تم تكرار الطلب خلال الثواني العشر التالية، ستظل القيمة المخزنة مؤقتًا جديدة.
+// إذا تم تكرار الطلب قبل 59 ثانية، ستكون القيمة المخزنة مؤقتًا قديمة ولكنها ستظل معروضة (stale-while-revalidate=59).
+//
+// في الخلفية، سيتم إنشاء طلب إعادة تحقق لملء التخزين المؤقت بقيمة جديدة.
+// إذا قمت بتحديث الصفحة، سترى القيمة الجديدة.
+export async function getServerSideProps({ req, res }) {
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=10, stale-while-revalidate=59'
+  )
+
+  return {
+    props: {},
+  }
+}
+```
+
+ومع ذلك، قبل اللجوء إلى `cache-control`، نوصي بالتحقق مما إذا كان [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) مع [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) أكثر ملاءمة لحالة استخدامك.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx
new file mode 100644
index 00000000..4b878da3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx
@@ -0,0 +1,184 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:19.966Z
+title: التحديث التدريجي للصفحات الثابتة (ISR)
+description: تعلم كيفية إنشاء أو تحديث الصفحات الثابتة أثناء التشغيل باستخدام التحديث التدريجي للصفحات الثابتة.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [Next.js Commerce](https://nextjs.org/commerce)
+- [GitHub Reactions Demo](https://reactions-demo.vercel.app/)
+- [Static Tweet Demo](https://static-tweet.vercel.app/)
+
+</details>
+
+يسمح لك Next.js بإنشاء أو تحديث الصفحات الثابتة _بعد_ بناء موقعك. يتيح لك التحديث التدريجي للصفحات الثابتة (ISR) استخدام التوليد الثابت على أساس كل صفحة، **دون الحاجة إلى إعادة بناء الموقع بالكامل**. مع ISR، يمكنك الاحتفاظ بمزايا التوليد الثابت مع التوسع إلى ملايين الصفحات.
+
+> **معلومة مفيدة**: وقت التشغيل [`edge`](/docs/pages/api-reference/edge) غير متوافق حاليًا مع ISR، على الرغم من أنه يمكنك الاستفادة من `stale-while-revalidate` عن طريق تعيين رأس `cache-control` يدويًا.
+
+لاستخدام ISR، أضف خاصية `revalidate` إلى `getStaticProps`:
+
+```jsx
+function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// تم تمكين إعادة التحقق وجاء طلب جديد
+export async function getStaticProps() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  return {
+    props: {
+      posts,
+    },
+    // سيحاول Next.js إعادة توليد الصفحة:
+    // - عند وصول طلب جديد
+    // - على الأكثر مرة كل 10 ثوانٍ
+    revalidate: 10, // بالثواني
+  }
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// لم يتم توليد المسار بعد.
+export async function getStaticPaths() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد تقديمها مسبقًا بناءً على المنشورات
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // سنقوم بتقديم هذه المسارات مسبقًا فقط أثناء البناء.
+  // { fallback: 'blocking' } سيقوم بتقديم الصفحات على الخادم
+  // عند الطلب إذا لم يكن المسار موجودًا.
+  return { paths, fallback: 'blocking' }
+}
+
+export default Blog
+```
+
+عند إجراء طلب إلى صفحة تم تقديمها مسبقًا أثناء البناء، سيتم عرض الصفحة المخزنة مؤقتًا في البداية.
+
+- أي طلبات للصفحة بعد الطلب الأولي وقبل مرور 10 ثوانٍ يتم تخزينها أيضًا وتكون فورية.
+- بعد نافذة الـ 10 ثوانٍ، سيظل الطلب التالي يعرض الصفحة المخزنة (القديمة)
+- يقوم Next.js بتشغيل إعادة توليد الصفحة في الخلفية.
+- بمجرد اكتمال توليد الصفحة بنجاح، سيقوم Next.js بإبطال التخزين المؤقت وعرض الصفحة المحدثة. إذا فشل التوليد في الخلفية، ستظل الصفحة القديمة كما هي دون تغيير.
+
+عند إجراء طلب إلى مسار لم يتم توليده بعد، سيقوم Next.js بتقديم الصفحة على الخادم عند الطلب الأول. ستخدم الطلبات المستقبلية الملف الثابت من التخزين المؤقت. يحافظ ISR على Vercel [على التخزين المؤقت عالميًا ويتعامل مع التراجعات](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration?utm_source=next-site&utm_medium=docs&utm_campaign=next-website).
+
+> **معلومة مفيدة**: تحقق مما إذا كان مزود البيانات الأعلى لديك قد مكّن التخزين المؤقت افتراضيًا. قد تحتاج إلى تعطيله (مثل `useCdn: false`)، وإلا لن تتمكن إعادة التحقق من سحب بيانات جديدة لتحديث تخزين ISR المؤقت. يمكن أن يحدث التخزين المؤقت في CDN (لنقطة نهاية يتم طلبها) عندما تُرجع رأس `Cache-Control`.
+
+## إعادة التحقق عند الطلب
+
+إذا قمت بتعيين وقت `revalidate` بقيمة `60`، فسيشاهد جميع الزوار نفس النسخة المولدة من موقعك لمدة دقيقة واحدة. الطريقة الوحيدة لإبطال التخزين المؤقت هي من خلال زيارة شخص ما لتلك الصفحة بعد مرور الدقيقة.
+
+بدءًا من الإصدار `v12.2.0`، يدعم Next.js التحديث التدريجي للصفحات الثابتة عند الطلب لإبطال التخزين المؤقت لـ Next.js يدويًا لصفحة محددة. وهذا يسهل تحديث موقعك عندما:
+
+- يتم إنشاء محتوى جديد أو تحديثه من نظام إدارة المحتوى الخاص بك
+- تتغير بيانات التجارة الإلكترونية (السعر، الوصف، الفئة، التقييمات، إلخ.)
+
+داخل `getStaticProps`، لا تحتاج إلى تحديد `revalidate` لاستخدام إعادة التحقق عند الطلب. إذا تم حذف `revalidate`، فسيستخدم Next.js القيمة الافتراضية `false` (لا إعادة تحقق) وسيعيد التحقق من الصفحة عند الطلب فقط عند استدعاء `revalidate()`.
+
+> **معلومة مفيدة**: لن يتم تنفيذ [البرمجيات الوسيطة](/docs/pages/building-your-application/routing/middleware) لطلبات ISR عند الطلب. بدلاً من ذلك، استدعِ `revalidate()` على المسار _الدقيق_ الذي تريد إعادة التحقق منه. على سبيل المثال، إذا كان لديك `pages/blog/[slug].js` وإعادة توجيه من `/post-1` -> `/blog/post-1`، فستحتاج إلى استدعاء `res.revalidate('/blog/post-1')`.
+
+### استخدام إعادة التحقق عند الطلب
+
+أولاً، أنشئ رمزًا سريًا يعرفه فقط تطبيق Next.js الخاص بك. سيتم استخدام هذا الرمز السري لمنع الوصول غير المصرح به إلى مسار API إعادة التحقق. يمكنك الوصول إلى المسار (إما يدويًا أو عبر webhook) باستخدام هيكل URL التالي:
+
+```bash filename="Terminal"
+https://<your-site.com>/api/revalidate?secret=<token>
+```
+
+بعد ذلك، أضف الرمز السري كـ [متغير بيئة](/docs/pages/building-your-application/configuring/environment-variables) إلى تطبيقك. أخيرًا، أنشئ مسار API إعادة التحقق:
+
+```js filename="pages/api/revalidate.js"
+export default async function handler(req, res) {
+  // تحقق من الرمز السري للتأكد من أن هذا طلب صالح
+  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
+    return res.status(401).json({ message: 'Invalid token' })
+  }
+
+  try {
+    // يجب أن يكون هذا المسار الفعلي وليس مسارًا معاد توجيهه
+    // على سبيل المثال، بالنسبة لـ "/blog/[slug]" يجب أن يكون "/blog/post-1"
+    await res.revalidate('/path-to-revalidate')
+    return res.json({ revalidated: true })
+  } catch (err) {
+    // إذا كان هناك خطأ، سيستمر Next.js
+    // في عرض آخر صفحة تم توليدها بنجاح
+    return res.status(500).send('Error revalidating')
+  }
+}
+```
+
+[شاهد العرض التوضيحي لدينا](https://on-demand-isr.vercel.app) لرؤية إعادة التحقق عند الطلب في العمل وتقديم ملاحظاتك.
+
+### اختبار ISR عند الطلب أثناء التطوير
+
+عند التشغيل محليًا باستخدام `next dev`، يتم استدعاء `getStaticProps` عند كل طلب. للتحقق من صحة تكوين ISR عند الطلب، ستحتاج إلى إنشاء [بناء إنتاج](/docs/pages/api-reference/cli/next#next-build-options) وبدء [خادم الإنتاج](/docs/pages/api-reference/cli/next#next-start-options):
+
+```bash filename="Terminal"
+$ next build
+$ next start
+```
+
+ثم، يمكنك التأكد من أن الصفحات الثابتة قد تم إعادة التحقق منها بنجاح.
+
+## معالجة الأخطاء وإعادة التحقق
+
+إذا حدث خطأ داخل `getStaticProps` أثناء معالجة التوليد في الخلفية، أو إذا قمت برمي خطأ يدويًا، فستستمر الصفحة الأخيرة التي تم توليدها بنجاح في العرض. في الطلب التالي، سيعيد Next.js محاولة استدعاء `getStaticProps`.
+
+```jsx
+export async function getStaticProps() {
+  // إذا ألقى هذا الطلب خطأ غير معالج، فلن يقوم Next.js
+  // بإبطال الصفحة المعروضة حاليًا وسيتم
+  // إعادة محاولة getStaticProps في الطلب التالي.
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  if (!res.ok) {
+    // إذا كان هناك خطأ في الخادم، فقد ترغب في
+    // إلقاء خطأ بدلاً من الإرجاع حتى لا يتم تحديث التخزين المؤقت
+    // حتى الطلب الناجح التالي.
+    throw new Error(`Failed to fetch posts, received status ${res.status}`)
+  }
+
+  // إذا كان الطلب ناجحًا، قم بإرجاع المنشورات
+  // وإعادة التحقق كل 10 ثوانٍ.
+  return {
+    props: {
+      posts,
+    },
+    revalidate: 10,
+  }
+}
+```
+
+## استضافة ISR ذاتيًا
+
+يعمل التحديث التدريجي للصفحات الثابتة (ISR) على [مواقع Next.js المخصصة للاستضافة الذاتية](/docs/pages/building-your-application/deploying#self-hosting) مباشرة عند استخدام `next start`.
+
+تعلم المزيد عن [استضافة Next.js ذاتيًا](/docs/pages/building-your-application/deploying#self-hosting).
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                 |
+| --------- | --------------------------------------------------------------------------------------- |
+| `v14.1.0` | أصبح `cacheHandler` المخصص مستقرًا.                                                        |
+| `v12.2.0` | أصبح ISR عند الطلب مستقرًا                                                                 |
+| `v12.1.0` | تمت إضافة ISR عند الطلب (بيتا).                                                             |
+| `v12.0.0` | تمت إضافة [التراجع المعتمد على الروبوتات لـ ISR](https://nextjs.org/blog/next-12#bot-aware-isr-fallback). |
+| `v9.5.0`  | تمت إضافة مسار الأساس.                                                                        |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/05-client-side.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/05-client-side.mdx
new file mode 100644
index 00000000..c5121e19
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/05-client-side.mdx
@@ -0,0 +1,72 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:05.942Z
+title: جلب البيانات من جانب العميل (Client-side Fetching)
+description: تعرف على جلب البيانات من جانب العميل، وكيفية استخدام SWR، وهي مكتبة خطافات React لجلب البيانات التي تعالج التخزين المؤقت، إعادة التحقق، تتبع التركيز، إعادة الجلب على فترات والمزيد.
+---
+
+جلب البيانات من جانب العميل مفيد عندما لا تتطلب صفحتك فهرسة SEO، أو عندما لا تحتاج إلى تقديم بياناتك مسبقًا، أو عندما يحتاج محتوى صفحاتك إلى التحديث بشكل متكرر. على عكس واجهات برمجة تطبيقات عرض جانب الخادم (SSR)، يمكنك استخدام جلب البيانات من جانب العميل على مستوى المكون.
+
+إذا تم ذلك على مستوى الصفحة، يتم جلب البيانات في وقت التشغيل، ويتم تحديث محتوى الصفحة مع تغير البيانات. عند استخدامها على مستوى المكون، يتم جلب البيانات في وقت تحميل المكون، ويتم تحديث محتوى المكون مع تغير البيانات.
+
+من المهم ملاحظة أن استخدام جلب البيانات من جانب العميل يمكن أن يؤثر على أداء تطبيقك وسرعة تحميل صفحاتك. وذلك لأن جلب البيانات يتم في وقت تحميل المكون أو الصفحات، ولا يتم تخزين البيانات مؤقتًا.
+
+## جلب البيانات من جانب العميل باستخدام useEffect
+
+يوضح المثال التالي كيف يمكنك جلب البيانات من جانب العميل باستخدام خطاف useEffect.
+
+```jsx
+import { useState, useEffect } from 'react'
+
+function Profile() {
+  const [data, setData] = useState(null)
+  const [isLoading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/profile-data')
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+        setLoading(false)
+      })
+  }, [])
+
+  if (isLoading) return <p>Loading...</p>
+  if (!data) return <p>No profile data</p>
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <p>{data.bio}</p>
+    </div>
+  )
+}
+```
+
+## جلب البيانات من جانب العميل باستخدام SWR
+
+قام فريق Next.js بإنشاء مكتبة خطافات React لجلب البيانات تسمى [**SWR**](https://swr.vercel.app/). يوصى بها بشدة إذا كنت تقوم بجلب البيانات من جانب العميل. فهي تعالج التخزين المؤقت، إعادة التحقق، تتبع التركيز، إعادة الجلب على فترات، والمزيد.
+
+باستخدام نفس المثال أعلاه، يمكننا الآن استخدام SWR لجلب بيانات الملف الشخصي. سيقوم SWR تلقائيًا بتخزين البيانات مؤقتًا لنا وسيعيد التحقق من البيانات إذا أصبحت قديمة.
+
+لمزيد من المعلومات حول استخدام SWR، راجع [وثائق SWR](https://swr.vercel.app/docs/getting-started).
+
+```jsx
+import useSWR from 'swr'
+
+const fetcher = (...args) => fetch(...args).then((res) => res.json())
+
+function Profile() {
+  const { data, error } = useSWR('/api/profile-data', fetcher)
+
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <p>{data.bio}</p>
+    </div>
+  )
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/index.mdx
new file mode 100644
index 00000000..e49081b5
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/03-data-fetching/index.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:13.670Z
+title: جلب البيانات
+description: يسمح لك Next.js بجلب البيانات بطرق متعددة، مع التصيير المسبق، أو التصيير من جانب الخادم، أو توليد المواقع الثابتة، والتجديد الثابت التدريجي. تعلم كيفية إدارة بيانات تطبيقك في Next.js.
+---
+
+يسمح جلب البيانات في Next.js بعرض محتواك بطرق مختلفة، اعتمادًا على حالة استخدام تطبيقك. يتضمن ذلك التصيير المسبق باستخدام **التصيير من جانب الخادم (Server-side Rendering)** أو **التوليد الثابت (Static Generation)**، وتحديث أو إنشاء المحتوى أثناء التشغيل باستخدام **التجديد الثابت التدريجي (Incremental Static Regeneration)**.
+
+## أمثلة
+
+- [مثال WordPress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress)([عرض تجريبي](https://next-blog-wordpress.vercel.app))
+- [بداية مدونة باستخدام ملفات markdown](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) ([عرض تجريبي](https://next-blog-starter.vercel.app/))
+- [مثال DatoCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([عرض تجريبي](https://next-blog-datocms.vercel.app/))
+- [مثال TakeShape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([عرض تجريبي](https://next-blog-takeshape.vercel.app/))
+- [مثال Sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([عرض تجريبي](https://next-blog-sanity.vercel.app/))
+- [مثال Prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([عرض تجريبي](https://next-blog-prismic.vercel.app/))
+- [مثال Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([عرض تجريبي](https://next-blog-contentful.vercel.app/))
+- [مثال Strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([عرض تجريبي](https://next-blog-strapi.vercel.app/))
+- [مثال Prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([عرض تجريبي](https://next-blog-prepr.vercel.app/))
+- [مثال Agility CMS](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([عرض تجريبي](https://next-blog-agilitycms.vercel.app/))
+- [مثال Cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([عرض تجريبي](https://next-blog-cosmic.vercel.app/))
+- [مثال ButterCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([عرض تجريبي](https://next-blog-buttercms.vercel.app/))
+- [مثال Storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([عرض تجريبي](https://next-blog-storyblok.vercel.app/))
+- [مثال GraphCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([عرض تجريبي](https://next-blog-graphcms.vercel.app/))
+- [مثال Kontent](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([عرض تجريبي](https://next-blog-kontent.vercel.app/))
+- [عرض تجريبي لـ Static Tweet](https://static-tweet.vercel.app/)
+- [مثال Enterspeed](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([عرض تجريبي](https://next-blog-demo.enterspeed.com/))
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/01-css-modules.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/01-css-modules.mdx
new file mode 100644
index 00000000..5898803b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/01-css-modules.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:35.393Z
+title: وحدات CSS (CSS Modules)
+description: تنسيق تطبيق Next.js الخاص بك باستخدام وحدات CSS (CSS Modules).
+source: app/building-your-application/styling/css-modules
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/02-tailwind-css.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/02-tailwind-css.mdx
new file mode 100644
index 00000000..789b0880
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/02-tailwind-css.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:33.758Z
+title: Tailwind CSS
+description: أضف الأناقة إلى تطبيق Next.js باستخدام Tailwind CSS.
+source: app/building-your-application/styling/tailwind-css
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
new file mode 100644
index 00000000..904b52cd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:32.795Z
+title: CSS في جافا سكريبت (CSS-in-JS)
+description: استخدام مكتبات CSS في جافا سكريبت (CSS-in-JS) مع Next.js
+source: app/building-your-application/styling/css-in-js
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/04-sass.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/04-sass.mdx
new file mode 100644
index 00000000..36d2f393
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/04-sass.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:32.742Z
+title: ساس (Sass)
+description: تعلم كيفية استخدام ساس (Sass) في تطبيق Next.js الخاص بك.
+source: app/building-your-application/styling/sass
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/index.mdx
new file mode 100644
index 00000000..3f644357
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/04-styling/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:31.457Z
+title: التنسيقات (Styling)
+description: تعرف على الطرق المختلفة لتنسيق تطبيق Next.js الخاص بك.
+source: app/building-your-application/styling
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/01-images.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/01-images.mdx
new file mode 100644
index 00000000..8592fbcd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/01-images.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:29.318Z
+title: تحسين الصور
+nav_title: الصور
+description: قم بتحسين صورك باستخدام مكون `next/image` المدمج.
+source: app/building-your-application/optimizing/images
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/02-fonts.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/02-fonts.mdx
new file mode 100644
index 00000000..7254fac6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/02-fonts.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:26.931Z
+title: تحسين الخطوط
+nav_title: الخطوط
+description: قم بتحسين خطوط الويب لتطبيقك باستخدام أدوات التحميل المدمجة `next/font`.
+source: 'app/building-your-application/optimizing/fonts'
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/03-scripts.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/03-scripts.mdx
new file mode 100644
index 00000000..bc016505
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/03-scripts.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:25.630Z
+title: تحسين النصوص البرمجية (Script Optimization)
+nav_title: النصوص البرمجية (Scripts)
+description: تحسين النصوص البرمجية لطرف ثالث باستخدام مكون Script المدمج.
+source: app/building-your-application/optimizing/scripts
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/05-static-assets.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/05-static-assets.mdx
new file mode 100644
index 00000000..77527262
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/05-static-assets.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:23.585Z
+title: الموارد الثابتة
+description: يسمح لك Next.js بتقديم ملفات ثابتة مثل الصور في دليل public. يمكنك تعلم كيفية عمل ذلك هنا.
+source: app/building-your-application/optimizing/static-assets
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/06-bundle-analyzer.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/06-bundle-analyzer.mdx
new file mode 100644
index 00000000..f446cdbd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/06-bundle-analyzer.mdx
@@ -0,0 +1,13 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:22.553Z
+title: محلل الحزم (Bundle Analyzer)
+description: تحليل حجم حزم JavaScript الخاصة بك باستخدام إضافة @next/bundle-analyzer.
+source: app/building-your-application/optimizing/bundle-analyzer
+related:
+  description: تعلم المزيد حول تحسين تطبيقك للإنتاج.
+  links:
+    - pages/building-your-application/deploying/production-checklist
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx
new file mode 100644
index 00000000..8ed09036
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:22.112Z
+title: التحليلات
+description: قياس وتتبع أداء الصفحة باستخدام ميزة Next.js Speed Insights
+source: app/building-your-application/optimizing/analytics
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/08-lazy-loading.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/08-lazy-loading.mdx
new file mode 100644
index 00000000..31df6a45
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/08-lazy-loading.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:19.589Z
+title: التحميل المتأخر (Lazy Loading)
+description: تحميل المكتبات المستوردة ومكونات React بشكل متأخر لتحسين أداء تحميل التطبيق.
+source: app/building-your-application/optimizing/lazy-loading
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/09-instrumentation.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/09-instrumentation.mdx
new file mode 100644
index 00000000..e420c311
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/09-instrumentation.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:16.247Z
+title: التجهيز (Instrumentation)
+description: تعلم كيفية استخدام التجهيز لتشغيل التعليمات البرمجية عند بدء تشغيل الخادم في تطبيق Next.js الخاص بك
+source: app/building-your-application/optimizing/instrumentation
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/10-open-telemetry.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/10-open-telemetry.mdx
new file mode 100644
index 00000000..36dcb5a0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/10-open-telemetry.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:13.970Z
+title: OpenTelemetry
+description: تعلم كيفية إعداد تطبيق Next.js الخاص بك باستخدام OpenTelemetry.
+source: app/building-your-application/optimizing/open-telemetry
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/11-third-party-libraries.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/11-third-party-libraries.mdx
new file mode 100644
index 00000000..841b01c1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/11-third-party-libraries.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:11.798Z
+title: مكتبات الطرف الثالث
+description: تحسين أداء مكتبات الطرف الثالث في تطبيقك باستخدام حزمة `@next/third-parties`
+source: app/building-your-application/optimizing/third-party-libraries
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب عدم تضمينه في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/index.mdx
new file mode 100644
index 00000000..8303338b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/05-optimizing/index.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:12.150Z
+title: التحسينات
+nav_title: التحسين
+description: حسّن تطبيق Next.js الخاص بك للحصول على أفضل أداء وتجربة مستخدم.
+source: app/building-your-application/optimizing
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/01-typescript.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/01-typescript.mdx
new file mode 100644
index 00000000..0fabf318
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/01-typescript.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:10.574Z
+title: TypeScript
+description: يوفر Next.js تجربة تطوير تعتمد على TypeScript أولاً لبناء تطبيق React الخاص بك.
+source: app/building-your-application/configuring/typescript
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/02-eslint.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/02-eslint.mdx
new file mode 100644
index 00000000..a4aa12f9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/02-eslint.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:04.854Z
+title: ESLint
+description: Next.js يبلغ عن أخطاء وتحذيرات ESLint تلقائيًا أثناء عمليات البناء. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+source: app/building-your-application/configuring/eslint
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/03-environment-variables.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/03-environment-variables.mdx
new file mode 100644
index 00000000..4dd822eb
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/03-environment-variables.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:01.680Z
+title: متغيرات البيئة
+description: تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js الخاص بك.
+source: app/building-your-application/configuring/environment-variables
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/04-absolute-imports-and-module-aliases.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/04-absolute-imports-and-module-aliases.mdx
new file mode 100644
index 00000000..de1496ad
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/04-absolute-imports-and-module-aliases.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:59.874Z
+title: الاستيراد المطلق واختصارات مسار الوحدات (Absolute Imports and Module Path Aliases)
+description: تكوين اختصارات مسار الوحدات التي تتيح لك إعادة تعيين مسارات استيراد معينة.
+source: app/building-your-application/configuring/absolute-imports-and-module-aliases
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/05-src-directory.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/05-src-directory.mdx
new file mode 100644
index 00000000..32e4db1b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/05-src-directory.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:54.633Z
+title: دليل `src`
+description: حفظ الصفحات ضمن دليل `src` كبديل عن دليل `pages` الرئيسي.
+source: app/building-your-application/configuring/src-directory
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/06-mdx.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/06-mdx.mdx
new file mode 100644
index 00000000..6dfcb199
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/06-mdx.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:45.906Z
+title: ماركداون و MDX
+nav_title: MDX
+description: تعلم كيفية تكوين MDX لكتابة JSX في ملفات الماركداون الخاصة بك.
+source: app/building-your-application/configuring/mdx
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/07-amp.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/07-amp.mdx
new file mode 100644
index 00000000..efe3ab33
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/07-amp.mdx
@@ -0,0 +1,158 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:14.207Z
+title: AMP
+description: بإعدادات بسيطة ودون مغادرة React، يمكنك البدء في إضافة AMP لتحسين أداء وسرعة صفحاتك.
+---
+
+<details>
+  <summary>أمثلة</summary>
+  
+- [AMP](https://github.com/vercel/next.js/tree/canary/examples/amp)
+
+</details>
+
+مع Next.js يمكنك تحويل أي صفحة React إلى صفحة AMP، بإعدادات بسيطة ودون مغادرة React.
+
+يمكنك قراءة المزيد عن AMP في الموقع الرسمي [amp.dev](https://amp.dev/).
+
+## تمكين AMP
+
+لتمكين دعم AMP لصفحة ما، ولمعرفة المزيد عن إعدادات AMP المختلفة، اقرأ [وثائق API لـ `next/amp`](/docs/pages/building-your-application/configuring/amp).
+
+## محاذير
+
+- فقط CSS-in-JS مدعوم. [وحدات CSS](/docs/pages/building-your-application/styling) غير مدعومة حاليًا في صفحات AMP. يمكنك [المساهمة في دعم وحدات CSS لـ Next.js](https://github.com/vercel/next.js/issues/10549).
+
+## إضافة مكونات AMP
+
+يوفر مجتمع AMP [العديد من المكونات](https://amp.dev/documentation/components/) لجعل صفحات AMP أكثر تفاعلية. سيقوم Next.js تلقائيًا باستيراد جميع المكونات المستخدمة في الصفحة ولا حاجة لاستيراد نصوص مكونات AMP يدويًا:
+
+```jsx
+export const config = { amp: true }
+
+function MyAmpPage() {
+  const date = new Date()
+
+  return (
+    <div>
+      <p>بعض الوقت: {date.toJSON()}</p>
+      <amp-timeago
+        width="0"
+        height="15"
+        datetime={date.toJSON()}
+        layout="responsive"
+      >
+        .
+      </amp-timeago>
+    </div>
+  )
+}
+
+export default MyAmpPage
+```
+
+المثال أعلاه يستخدم مكون [`amp-timeago`](https://amp.dev/documentation/components/amp-timeago/?format=websites).
+
+بشكل افتراضي، يتم دائمًا استيراد أحدث نسخة من المكون. إذا كنت تريد تخصيص الإصدار، يمكنك استخدام `next/head` كما في المثال التالي:
+
+```jsx
+import Head from 'next/head'
+
+export const config = { amp: true }
+
+function MyAmpPage() {
+  const date = new Date()
+
+  return (
+    <div>
+      <Head>
+        <script
+          async
+          key="amp-timeago"
+          custom-element="amp-timeago"
+          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
+        />
+      </Head>
+
+      <p>بعض الوقت: {date.toJSON()}</p>
+      <amp-timeago
+        width="0"
+        height="15"
+        datetime={date.toJSON()}
+        layout="responsive"
+      >
+        .
+      </amp-timeago>
+    </div>
+  )
+}
+
+export default MyAmpPage
+```
+
+## التحقق من صحة AMP
+
+يتم التحقق تلقائيًا من صفحات AMP باستخدام [amphtml-validator](https://www.npmjs.com/package/amphtml-validator) أثناء التطوير. ستظهر الأخطاء والتحذيرات في الطرفية التي بدأت منها Next.js.
+
+يتم أيضًا التحقق من الصفحات أثناء [تصدير HTML ثابت](/docs/pages/building-your-application/deploying/static-exports) وسيتم طباعة أي تحذيرات/أخطاء في الطرفية. أي أخطاء في AMP ستؤدي إلى خروج التصدير برمز حالة `1` لأن التصدير ليس AMP صالحًا.
+
+### مدققات مخصصة
+
+يمكنك إعداد مدقق AMP مخصص في `next.config.js` كما هو موضح أدناه:
+
+```js
+module.exports = {
+  amp: {
+    validator: './custom_validator.js',
+  },
+}
+```
+
+### تخطي التحقق من صحة AMP
+
+لتعطيل التحقق من صحة AMP أضف الكود التالي إلى `next.config.js`
+
+```js
+experimental: {
+  amp: {
+    skipValidation: true
+  }
+}
+```
+
+### AMP في تصدير HTML الثابت
+
+عند استخدام [تصدير HTML ثابت](/docs/pages/building-your-application/deploying/static-exports) لتصيير الصفحات مسبقًا بشكل ثابت، سيكتشف Next.js ما إذا كانت الصفحة تدعم AMP وسيغير سلوك التصدير بناءً على ذلك.
+
+على سبيل المثال، صفحة AMP الهجينة `pages/about.js` ستخرج:
+
+- `out/about.html` - صفحة HTML مع وقت تشغيل React من جانب العميل
+- `out/about.amp.html` - صفحة AMP
+
+وإذا كانت `pages/about.js` صفحة AMP فقط، فستخرج:
+
+- `out/about.html` - صفحة AMP محسنة
+
+سيقوم Next.js تلقائيًا بإدراج رابط للإصدار AMP من صفحتك في الإصدار HTML، لذا لا داعي للقيام بذلك يدويًا، مثل:
+
+```jsx
+<link rel="amphtml" href="/about.amp.html" />
+```
+
+وسيتضمن الإصدار AMP من صفحتك رابطًا للصفحة HTML:
+
+```jsx
+<link rel="canonical" href="/about" />
+```
+
+عند تمكين [`trailingSlash`](/docs/pages/api-reference/next-config-js/trailingSlash) ستكون الصفحات المصدرة لـ `pages/about.js`:
+
+- `out/about/index.html` - صفحة HTML
+- `out/about.amp/index.html` - صفحة AMP
+
+## TypeScript
+
+حاليًا لا يوجد أنواع مضمنة لـ TypeScript في AMP، لكنها موجودة في خطتهم المستقبلية ([#13791](https://github.com/ampproject/amphtml/issues/13791)).
+
+كحل بديل، يمكنك إنشاء ملف يدويًا باسم `amp.d.ts` داخل مشروعك وإضافة هذه [الأنواع المخصصة](https://stackoverflow.com/a/50601125).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/08-babel.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/08-babel.mdx
new file mode 100644
index 00000000..1f57dd70
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/08-babel.mdx
@@ -0,0 +1,67 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:45.928Z
+title: Babel
+description: قم بتوسيع الإعداد المسبق (preset) الذي يضيفه Next.js باستخدام تكويناتك الخاصة.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [تخصيص تكوين Babel](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)
+
+</details>
+
+يتضمن Next.js الإعداد المسبق `next/babel` لتطبيقك، والذي يحتوي على كل ما تحتاجه لتجميع تطبيقات React والكود من جانب الخادم. ولكن إذا كنت ترغب في توسيع تكوينات Babel الافتراضية، فإن ذلك ممكن أيضًا.
+
+## إضافة الإعدادات المسبقة والإضافات (Plugins)
+
+للبدء، تحتاج فقط إلى تعريف ملف `.babelrc` (أو `babel.config.js`) في الدليل الجذري لمشروعك. إذا تم العثور على مثل هذا الملف، فسيتم اعتباره المصدر الموثوق، وبالتالي يحتاج إلى تعريف ما يحتاجه Next.js أيضًا، وهو الإعداد المسبق `next/babel`.
+
+إليك مثال لملف `.babelrc`:
+
+```json filename=".babelrc"
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}
+```
+
+يمكنك [إلقاء نظرة على هذا الملف](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/preset.ts) لمعرفة المزيد عن الإعدادات المسبقة المضمنة في `next/babel`.
+
+لإضافة إعدادات مسبقة/إضافات **بدون تكوينها**، يمكنك القيام بذلك بهذه الطريقة:
+
+```json filename=".babelrc"
+{
+  "presets": ["next/babel"],
+  "plugins": ["@babel/plugin-proposal-do-expressions"]
+}
+```
+
+## تخصيص الإعدادات المسبقة والإضافات
+
+لإضافة إعدادات مسبقة/إضافات **مع تكوين مخصص**، قم بذلك على الإعداد المسبق `next/babel` كما يلي:
+
+```json filename=".babelrc"
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-env": {},
+        "transform-runtime": {},
+        "styled-jsx": {},
+        "class-properties": {}
+      }
+    ]
+  ],
+  "plugins": []
+}
+```
+
+لمعرفة المزيد عن الخيارات المتاحة لكل تكوين، قم بزيارة موقع [توثيق Babel](https://babeljs.io/docs/).
+
+> **معلومة مفيدة**:
+>
+> - يستخدم Next.js [إصدار Node.js الحالي](https://github.com/nodejs/release#release-schedule) للتجميع من جانب الخادم.
+> - يجب الحفاظ على خيار `modules` في `"preset-env"` على `false`، وإلا سيتم إيقاف تقسيم الكود (code splitting) في webpack.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/09-post-css.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/09-post-css.mdx
new file mode 100644
index 00000000..7b37ead0
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/09-post-css.mdx
@@ -0,0 +1,171 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:00.459Z
+title: PostCSS
+description: قم بتوسيع إعدادات PostCSS والإضافات المضافة بواسطة Next.js باستخدام الإعدادات الخاصة بك.
+---
+
+<details open>
+  <summary>أمثلة</summary>
+
+- [مثال Tailwind CSS](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)
+
+</details>
+
+## السلوك الافتراضي
+
+يقوم Next.js بتحويل CSS لدعم [ميزات CSS المدمجة](/docs/pages/building-your-application/styling) باستخدام PostCSS.
+
+بدون أي تكوين إضافي، يقوم Next.js بتحويل CSS مع التحويلات التالية:
+
+- [Autoprefixer](https://github.com/postcss/autoprefixer) يضيف بادئات المتصفحات تلقائياً لقواعد CSS (حتى IE11).
+- يتم تصحيح [أخطاء Flexbox عبر المتصفحات](https://github.com/philipwalton/flexbugs) لتعمل وفقاً [للمواصفات](https://www.w3.org/TR/css-flexbox-1/).
+- يتم تحويل ميزات CSS الجديدة تلقائياً لتكون متوافقة مع Internet Explorer 11:
+  - [خاصية `all`](https://developer.mozilla.org/docs/Web/CSS/all)
+  - [خصائص Break](https://developer.mozilla.org/docs/Web/CSS/break-after)
+  - [خاصية `font-variant`](https://developer.mozilla.org/docs/Web/CSS/font-variant)
+  - [خصائص Gap](https://developer.mozilla.org/docs/Web/CSS/gap)
+  - [نطاقات استعلامات الوسائط](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4)
+
+بشكل افتراضي، لا يتم تحويل [CSS Grid](https://www.w3.org/TR/css-grid-1/) و [الخصائص المخصصة](https://developer.mozilla.org/docs/Web/CSS/var) (متغيرات CSS) لدعم IE11.
+
+لتحويل [تخطيط CSS Grid](https://developer.mozilla.org/docs/Web/CSS/grid) لدعم IE11، يمكنك إضافة التعليق التالي في أعلى ملف CSS الخاص بك:
+
+```css
+/* autoprefixer grid: autoplace */
+```
+
+يمكنك أيضاً تمكين دعم IE11 لـ [تخطيط CSS Grid](https://developer.mozilla.org/docs/Web/CSS/grid)
+في مشروعك بالكامل عن طريق تكوين autoprefixer بالإعدادات الموضحة أدناه (مطوية).
+راجع قسم ["تخصيص الإضافات"](#customizing-plugins) أدناه لمزيد من المعلومات.
+
+<details>
+  <summary>انقر لعرض الإعدادات لتمكين تخطيط CSS Grid</summary>
+
+```json filename="postcss.config.json"
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009",
+          "grid": "autoplace"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}
+```
+
+</details>
+
+لا يتم تحويل متغيرات CSS لأنه [غير ممكن القيام بذلك بأمان](https://github.com/MadLittleMods/postcss-css-variables#caveats).
+إذا كنت بحاجة إلى استخدام المتغيرات، ففكر في استخدام شيء مثل [متغيرات Sass](https://sass-lang.com/documentation/variables) التي يتم تحويلها بواسطة [Sass](https://sass-lang.com/).
+
+## تخصيص المتصفحات المستهدفة
+
+يسمح Next.js بتكوين المتصفحات المستهدفة (لـ [Autoprefixer](https://github.com/postcss/autoprefixer) وميزات CSS المحولة) عبر [Browserslist](https://github.com/browserslist/browserslist).
+
+لتخصيص browserslist، أنشئ مفتاح `browserslist` في ملف `package.json` كما يلي:
+
+```json filename="package.json"
+{
+  "browserslist": [">0.3%", "not dead", "not op_mini all"]
+}
+```
+
+يمكنك استخدام أداة [browsersl.ist](https://browsersl.ist/?q=%3E0.3%25%2C+not+ie+11%2C+not+dead%2C+not+op_mini+all) لتصور المتصفحات التي تستهدفها.
+
+## وحدات CSS
+
+لا حاجة إلى أي تكوين لدعم وحدات CSS. لتمكين وحدات CSS لملف، قم بتغيير امتداد الملف إلى `.module.css`.
+
+يمكنك معرفة المزيد حول [دعم Next.js لوحدات CSS هنا](/docs/pages/building-your-application/styling).
+
+## تخصيص الإضافات
+
+> **تحذير**: عند تعريف ملف تكوين PostCSS مخصص، يقوم Next.js **بتعطيل** [السلوك الافتراضي](#default-behavior) بالكامل.
+> تأكد من تكوين جميع الميزات التي تحتاج إلى تحويل يدوياً، بما في ذلك [Autoprefixer](https://github.com/postcss/autoprefixer).
+> تحتاج أيضاً إلى تثبيت أي إضافات مدرجة في التكوين المخصص يدوياً، مثل `npm install postcss-flexbugs-fixes postcss-preset-env`.
+
+لتخصيص تكوين PostCSS، أنشئ ملف `postcss.config.json` في جذر مشروعك.
+
+هذا هو التكوين الافتراضي المستخدم بواسطة Next.js:
+
+```json filename="postcss.config.json"
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}
+```
+
+> **معلومة مفيدة**: يسمح Next.js أيضاً بتسمية الملف `.postcssrc.json`، أو قراءته من مفتاح `postcss` في `package.json`.
+
+من الممكن أيضاً تكوين PostCSS باستخدام ملف `postcss.config.js`، وهو مفيد عندما تريد تضمين الإضافات بشكل مشروط بناءً على البيئة:
+
+```js filename="postcss.config.js"
+module.exports = {
+  plugins:
+    process.env.NODE_ENV === 'production'
+      ? [
+          'postcss-flexbugs-fixes',
+          [
+            'postcss-preset-env',
+            {
+              autoprefixer: {
+                flexbox: 'no-2009',
+              },
+              stage: 3,
+              features: {
+                'custom-properties': false,
+              },
+            },
+          ],
+        ]
+      : [
+          // لا توجد تحويلات في وضع التطوير
+        ],
+}
+```
+
+> **معلومة مفيدة**: يسمح Next.js أيضاً بتسمية الملف `.postcssrc.js`.
+
+**لا تستخدم `require()`** لاستيراد إضافات PostCSS. يجب توفير الإضافات كسلاسل نصية.
+
+> **معلومة مفيدة**: إذا كان ملف `postcss.config.js` الخاص بك يحتاج إلى دعم أدوات أخرى غير Next.js في نفس المشروع، يجب عليك استخدام تنسيق الكائن المتوافق بدلاً من ذلك:
+>
+> ```js
+> module.exports = {
+>   plugins: {
+>     'postcss-flexbugs-fixes': {},
+>     'postcss-preset-env': {
+>       autoprefixer: {
+>         flexbox: 'no-2009',
+>       },
+>       stage: 3,
+>       features: {
+>         'custom-properties': false,
+>       },
+>     },
+>   },
+> }
+> ```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/10-custom-server.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/10-custom-server.mdx
new file mode 100644
index 00000000..d1cb96a4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/10-custom-server.mdx
@@ -0,0 +1,121 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:52.444Z
+title: خادم مخصص
+description: بدء تطبيق Next.js برمجيًا باستخدام خادم مخصص.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [خادم مخصص](https://github.com/vercel/next.js/tree/canary/examples/custom-server)
+- [التخزين المؤقت للعرض من جانب الخادم (SSR Caching)](https://github.com/vercel/next.js/tree/canary/examples/ssr-caching)
+
+</details>
+
+بشكل افتراضي، يتضمن Next.js خادمه الخاص مع `next start`. إذا كان لديك خادم خلفي موجود، فلا يزال بإمكانك استخدامه مع Next.js (هذا ليس خادمًا مخصصًا). يسمح لك خادم Next.js المخصص ببدء خادم برمجيًا بنسبة 100% لاستخدام أنماط الخوادم المخصصة. معظم الوقت، لن تحتاج إلى هذا - ولكنه متاح للتخصيص الكامل.
+
+> **معلومة مفيدة**:
+>
+> - قبل اتخاذ قرار باستخدام خادم مخصص، يرجى ملاحظة أنه يجب استخدامه فقط عندما لا يستطيع جهاز التوجيه المدمج في Next.js تلبية متطلبات تطبيقك. سيؤدي الخادم المخصص إلى إزالة تحسينات الأداء المهمة، مثل **وظائف الخادم (serverless functions)** و**[التحسين الثابت التلقائي (Automatic Static Optimization)](/docs/pages/building-your-application/rendering/automatic-static-optimization).**
+> - لا يمكن نشر خادم مخصص على [Vercel](https://vercel.com/solutions/nextjs).
+> - وضع الإخراج المستقل، لا يتتبع ملفات الخادم المخصص ويخرج هذا الوضع ملف `server.js` منفصلًا وحديثًا بدلاً من ذلك.
+
+إليك مثالًا على خادم مخصص:
+
+```js filename="server.js"
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const dev = process.env.NODE_ENV !== 'production'
+const hostname = 'localhost'
+const port = 3000
+// عند استخدام middleware يجب توفير `hostname` و `port` أدناه
+const app = next({ dev, hostname, port })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  createServer(async (req, res) => {
+    try {
+      // تأكد من تمرير `true` كوسيطة ثانية لـ `url.parse`.
+      // هذا يخبرها بتحليل جزء الاستعلام من URL.
+      const parsedUrl = parse(req.url, true)
+      const { pathname, query } = parsedUrl
+
+      if (pathname === '/a') {
+        await app.render(req, res, '/a', query)
+      } else if (pathname === '/b') {
+        await app.render(req, res, '/b', query)
+      } else {
+        await handle(req, res, parsedUrl)
+      }
+    } catch (err) {
+      console.error('حدث خطأ أثناء التعامل مع', req.url, err)
+      res.statusCode = 500
+      res.end('خطأ داخلي في الخادم')
+    }
+  })
+    .once('error', (err) => {
+      console.error(err)
+      process.exit(1)
+    })
+    .listen(port, () => {
+      console.log(`> جاهز على http://${hostname}:${port}`)
+    })
+})
+```
+
+> ملف `server.js` لا يمر عبر babel أو webpack. تأكد من أن بناء الجملة والمصادر التي يتطلبها هذا الملف متوافقة مع إصدار node الحالي الذي تقوم بتشغيله.
+
+لتشغيل الخادم المخصص، ستحتاج إلى تحديث `scripts` في `package.json` كما يلي:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  }
+}
+```
+
+---
+
+يستخدم الخادم المخصص الاستيراد التالي لربط الخادم بتطبيق Next.js:
+
+```js
+const next = require('next')
+const app = next({})
+```
+
+استيراد `next` أعلاه هو دالة تستقبل كائنًا مع الخيارات التالية:
+
+| الخيار         | النوع               | الوصف                                                                                                   |
+| -------------- | ------------------ | ------------------------------------------------------------------------------------------------------------- |
+| `conf`         | `Object`           | نفس الكائن الذي ستستخدمه في [next.config.js](/docs/pages/api-reference/next-config-js). الافتراضي هو `{}` |
+| `customServer` | `Boolean`          | (اختياري) اضبط على false عندما يكون الخادم قد تم إنشاؤه بواسطة Next.js                                              |
+| `dev`          | `Boolean`          | (اختياري) ما إذا كان سيتم تشغيل Next.js في وضع التطوير أم لا. الافتراضي هو `false`                                |
+| `dir`          | `String`           | (اختياري) موقع مشروع Next.js. الافتراضي هو `'.'`                                               |
+| `quiet`        | `Boolean`          | (اختياري) إخفاء رسائل الخطأ التي تحتوي على معلومات الخادم. الافتراضي هو `false`                           |
+| `hostname`     | `String`           | (اختياري) اسم المضيف الذي يعمل عليه الخادم                                                        |
+| `port`         | `Number`           | (اختياري) المنفذ الذي يعمل عليه الخادم                                                            |
+| `httpServer`   | `node:http#Server` | (اختياري) خادم HTTP الذي يعمل عليه Next.js                                                   |
+
+يمكن بعد ذلك استخدام `app` المُعاد للسماح لـ Next.js بمعالجة الطلبات حسب الحاجة.
+
+## تعطيل توجيه نظام الملفات
+
+بشكل افتراضي، سيقدم `Next` كل ملف في مجلد `pages` تحت مسار مطابق لاسم الملف. إذا كان مشروعك يستخدم خادمًا مخصصًا، فقد يؤدي هذا السلوك إلى تقديم نفس المحتوى من مسارات متعددة، مما قد يسبب مشاكل في تحسين محركات البحث (SEO) وتجربة المستخدم (UX).
+
+لتعطيل هذا السلوك ومنع التوجيه بناءً على الملفات في `pages`، افتح `next.config.js` وعطل إعداد `useFileSystemPublicRoutes`:
+
+```js filename="next.config.js"
+module.exports = {
+  useFileSystemPublicRoutes: false,
+}
+```
+
+> ملاحظة: `useFileSystemPublicRoutes` يعطل مسارات أسماء الملفات من العرض من جانب الخادم (SSR)؛ قد يظل التوجيه من جانب العميل قادرًا على الوصول إلى تلك المسارات. عند استخدام هذا الخيار، يجب أن تحمي ضد التنقل إلى المسارات التي لا تريدها برمجيًا.
+
+> قد ترغب أيضًا في تكوين جهاز التوجيه من جانب العميل لمنع إعادة التوجيه من جانب العميل إلى مسارات أسماء الملفات؛ لذلك راجع [`router.beforePopState`](/docs/pages/api-reference/functions/use-router#routerbeforepopstate).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/11-draft-mode.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/11-draft-mode.mdx
new file mode 100644
index 00000000..cc39dcc3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/11-draft-mode.mdx
@@ -0,0 +1,183 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:27.799Z
+title: وضع المسودة (Draft Mode)
+description: يوفر Next.js وضع المسودة للتبديل بين الصفحات الثابتة والديناميكية. تعلم كيفية عمله مع موجه الصفحات (Pages Router).
+---
+
+في [توثيق الصفحات](/docs/pages/building-your-application/routing/pages-and-layouts) و[توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching)، تحدثنا عن كيفية تقديم صفحة مسبقًا في وقت البناء (**التوليد الثابت**) باستخدام `getStaticProps` و`getStaticPaths`.
+
+التوليد الثابت مفيد عندما تحصل صفحاتك على البيانات من نظام إدارة المحتوى (CMS). لكنه ليس مثاليًا عندما تكتب مسودة على نظام إدارة المحتوى الخاص بك وتريد معاينة المسودة فورًا على صفحتك. سترغب في أن يقوم Next.js بعرض هذه الصفحات في **وقت الطلب** بدلاً من وقت البناء وجلب محتوى المسودة بدلاً من المحتوى المنشور. سترغب في أن يتجاوز Next.js التوليد الثابت فقط لهذه الحالة الخاصة.
+
+يحتوي Next.js على ميزة تسمى **وضع المسودة (Draft Mode)** التي تحل هذه المشكلة. إليك التعليمات حول كيفية استخدامها.
+
+## الخطوة 1: إنشاء مسار API والوصول إليه
+
+> ألق نظرة على [توثيق مسارات API](/docs/pages/building-your-application/routing/api-routes) أولاً إذا لم تكن معتادًا على مسارات API في Next.js.
+
+أولاً، قم بإنشاء **مسار API**. يمكن أن يكون له أي اسم - مثلاً `pages/api/draft.ts`
+
+في هذا المسار API، تحتاج إلى استدعاء `setDraftMode` على كائن الاستجابة.
+
+```js
+export default function handler(req, res) {
+  // ...
+  res.setDraftMode({ enable: true })
+  // ...
+}
+```
+
+سيؤدي هذا إلى تعيين **كوكي** لتمكين وضع المسودة. الطلبات اللاحقة التي تحتوي على هذا الكوكي ستؤدي إلى تفعيل **وضع المسودة** مما يغير سلوك الصفحات المولدة ثابتًا (المزيد عن هذا لاحقًا).
+
+يمكنك اختبار هذا يدويًا عن طريق إنشاء مسار API مثل أدناه والوصول إليه يدويًا من متصفحك:
+
+```ts filename="pages/api/draft.ts"
+// مثال بسيط لاختباره يدويًا من متصفحك.
+export default function handler(req, res) {
+  res.setDraftMode({ enable: true })
+  res.end('تم تمكين وضع المسودة')
+}
+```
+
+إذا فتحت أدوات المطور في متصفحك وزرت `/api/draft`، ستلاحظ رأس استجابة `Set-Cookie` مع كوكي باسم `__prerender_bypass`.
+
+### الوصول إليه بأمان من نظام إدارة المحتوى الخاص بك
+
+عمليًا، سترغب في استدعاء مسار API هذا _بأمان_ من نظام إدارة المحتوى الخاص بك. الخطوات المحددة ستختلف اعتمادًا على نظام إدارة المحتوى الذي تستخدمه، ولكن إليك بعض الخطوات الشائعة التي يمكنك اتخاذها.
+
+تفترض هذه الخطوات أن نظام إدارة المحتوى الذي تستخدمه يدعم تعيين **عنوان URL مخصص للمسودات**. إذا لم يكن كذلك، فلا يزال بإمكانك استخدام هذه الطريقة لتأمين عناوين URL للمسودات، ولكنك ستحتاج إلى إنشاء عنوان URL للمسودة والوصول إليه يدويًا.
+
+**أولاً**، يجب إنشاء **رمز سري** باستخدام مولد الرموز الذي تختاره. سيعرف هذا السر فقط تطبيق Next.js الخاص بك ونظام إدارة المحتوى الخاص بك. هذا السر يمنع الأشخاص الذين ليس لديهم حق الوصول إلى نظام إدارة المحتوى الخاص بك من الوصول إلى عناوين URL للمسودات.
+
+**ثانيًا**، إذا كان نظام إدارة المحتوى الخاص بك يدعم تعيين عناوين URL مخصصة للمسودات، فحدد ما يلي كعنوان URL للمسودة. يفترض هذا أن مسار API للمسودة موجود في `pages/api/draft.ts`.
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+- `<your-site>` يجب أن يكون نطاق النشر الخاص بك.
+- `<token>` يجب استبداله بالرمز السري الذي أنشأته.
+- `<path>` يجب أن يكون المسار للصفحة التي تريد معاينتها. إذا كنت تريد معاينة `/posts/foo`، فيجب استخدام `&slug=/posts/foo`.
+
+قد يسمح لك نظام إدارة المحتوى الخاص بك بتضمين متغير في عنوان URL للمسودة بحيث يمكن تعيين `<path>` ديناميكيًا بناءً على بيانات نظام إدارة المحتوى مثل: `&slug=/posts/{entry.fields.slug}`
+
+**أخيرًا**، في مسار API للمسودة:
+
+- تحقق من تطابق السر وأن معلمة `slug` موجودة (إذا لم تكن كذلك، يجب أن يفشل الطلب).
+-
+- استدعِ `res.setDraftMode`.
+- ثم أعد توجيه المتصفح إلى المسار المحدد بواسطة `slug`. (يستخدم المثال التالي [إعادة توجيه 307](https://developer.mozilla.org/docs/Web/HTTP/Status/307)).
+
+```js
+export default async (req, res) => {
+  // تحقق من السر ومعلمة slug
+  // يجب أن يعرف هذا السر فقط مسار API هذا ونظام إدارة المحتوى
+  if (req.query.secret !== 'MY_SECRET_TOKEN' || !req.query.slug) {
+    return res.status(401).json({ message: 'رمز غير صالح' })
+  }
+
+  // اتصل بنظام إدارة المحتوى للتحقق مما إذا كان slug المقدم موجودًا
+  // ستقوم getPostBySlug بتنفيذ منطق الجلب المطلوب لنظام إدارة المحتوى
+  const post = await getPostBySlug(req.query.slug)
+
+  // إذا لم يكن slug موجودًا، امنع تمكين وضع المسودة
+  if (!post) {
+    return res.status(401).json({ message: 'slug غير صالح' })
+  }
+
+  // تمكين وضع المسودة عن طريق تعيين الكوكي
+  res.setDraftMode({ enable: true })
+
+  // إعادة التوجيه إلى المسار من المنشور الذي تم جلب بياناته
+  // لا نعيد التوجيه إلى req.query.slug لتجنب ثغرات إعادة التوجيه المفتوحة
+  res.redirect(post.slug)
+}
+```
+
+إذا نجح ذلك، فسيتم إعادة توجيه المتصفح إلى المسار الذي تريد معاينته مع كوكي وضع المسودة.
+
+## الخطوة 2: تحديث `getStaticProps`
+
+الخطوة التالية هي تحديث `getStaticProps` لدعم وضع المسودة.
+
+إذا طلبت صفحة تحتوي على `getStaticProps` مع تعيين الكوكي (عبر `res.setDraftMode`)، فسيتم استدعاء `getStaticProps` في **وقت الطلب** (بدلاً من وقت البناء).
+
+علاوة على ذلك، سيتم استدعاؤها مع كائن `context` حيث `context.draftMode` سيكون `true`.
+
+```js
+export async function getStaticProps(context) {
+  if (context.draftMode) {
+    // بيانات ديناميكية
+  }
+}
+```
+
+لقد استخدمنا `res.setDraftMode` في مسار API للمسودة، لذا `context.draftMode` سيكون `true`.
+
+إذا كنت تستخدم أيضًا `getStaticPaths`، فسيكون `context.params` متاحًا أيضًا.
+
+### جلب بيانات المسودة
+
+يمكنك تحديث `getStaticProps` لجلب بيانات مختلفة بناءً على `context.draftMode`.
+
+على سبيل المثال، قد يكون لنظام إدارة المحتوى الخاص بك نقطة نهاية API مختلفة للمنشورات المسودة. إذا كان الأمر كذلك، يمكنك تعديل عنوان URL لنقطة نهاية API كما يلي:
+
+```js
+export async function getStaticProps(context) {
+  const url = context.draftMode
+    ? 'https://draft.example.com'
+    : 'https://production.example.com'
+  const res = await fetch(url)
+  // ...
+}
+```
+
+هذا كل شيء! إذا قمت بالوصول إلى مسار API للمسودة (مع `secret` و `slug`) من نظام إدارة المحتوى الخاص بك أو يدويًا، يجب أن تكون قادرًا الآن على رؤية محتوى المسودة. وإذا قمت بتحديث مسودتك دون نشر، يجب أن تكون قادرًا على معاينة المسودة.
+
+قم بتعيين هذا كعنوان URL للمسودة على نظام إدارة المحتوى الخاص بك أو قم بالوصول يدويًا، ويجب أن تكون قادرًا على رؤية المسودة.
+
+```bash filename="Terminal"
+https://<your-site>/api/draft?secret=<token>&slug=<path>
+```
+
+## المزيد من التفاصيل
+
+### مسح كوكي وضع المسودة
+
+افتراضيًا، تنتهي جلسة وضع المسودة عند إغلاق المتصفح.
+
+لمسح كوكي وضع المسودة يدويًا، أنشئ مسار API يستدعي `setDraftMode({ enable: false })`:
+
+```ts filename="pages/api/disable-draft.ts"
+export default function handler(req, res) {
+  res.setDraftMode({ enable: false })
+}
+```
+
+ثم أرسل طلبًا إلى `/api/disable-draft` لاستدعاء مسار API. إذا كنت تستدعي هذا المسار باستخدام [`next/link`](/docs/pages/api-reference/components/link)، يجب عليك تمرير `prefetch={false}` لمنع حذف الكوكي عن طريق الخطأ أثناء الجلب المسبق.
+
+### يعمل مع `getServerSideProps`
+
+يعمل وضع المسودة مع `getServerSideProps`، وهو متاح كمفتاح `draftMode` في كائن [`context`](/docs/pages/api-reference/functions/get-server-side-props#context-parameter).
+
+> **ملاحظة جيدة**: لا يجب عليك تعيين رأس `Cache-Control` عند استخدام وضع المسودة لأنه لا يمكن تجاوزه. بدلاً من ذلك، نوصي باستخدام [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+
+### يعمل مع مسارات API
+
+سيكون لمسارات API حق الوصول إلى `draftMode` على كائن الطلب. على سبيل المثال:
+
+```js
+export default function myApiRoute(req, res) {
+  if (req.draftMode) {
+    // جلب بيانات المسودة
+  }
+}
+```
+
+### فريد لكل `next build`
+
+سيتم إنشاء قيمة كوكي تجاوز جديدة في كل مرة تقوم فيها بتشغيل `next build`.
+
+هذا يضمن أنه لا يمكن تخمين كوكي التجاوز.
+
+> **ملاحظة جيدة**: لاختبار وضع المسودة محليًا عبر HTTP، سيحتاج متصفحك إلى السماح بملفات تعريف الارتباط من طرف ثالث والوصول إلى التخزين المحلي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx
new file mode 100644
index 00000000..c4bfcb53
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx
@@ -0,0 +1,106 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:34.715Z
+title: معالجة الأخطاء
+description: كيفية معالجة الأخطاء في تطبيق Next.js الخاص بك.
+---
+
+يشرح هذا التوثيق كيفية معالجة أخطاء التطوير وأخطاء جانب الخادم وأخطاء جانب العميل.
+
+## معالجة الأخطاء أثناء التطوير
+
+عند حدوث خطأ أثناء وقت التشغيل في مرحلة التطوير لتطبيق Next.js الخاص بك، ستظهر لك **نافذة منبثقة**. وهي نافذة تغطي صفحة الويب. تكون **فقط** مرئية عند تشغيل خادم التطوير باستخدام `next dev` عبر `pnpm dev` أو `npm run dev` أو `yarn dev` أو `bun dev` ولن تظهر في بيئة الإنتاج. سيؤدي إصلاح الخطأ إلى إغلاق النافذة المنبثقة تلقائيًا.
+
+إليك مثال على النافذة المنبثقة:
+
+{/* TODO UPDATE SCREENSHOT */}
+![مثال على النافذة المنبثقة في وضع التطوير](https://assets.vercel.com/image/upload/v1645118290/docs-assets/static/docs/error-handling/overlay.png)
+
+## معالجة أخطاء الخادم
+
+يوفر Next.js صفحة 500 افتراضية ثابتة لمعالجة الأخطاء التي تحدث في جانب الخادم لتطبيقك. يمكنك أيضًا [تخصيص هذه الصفحة](/docs/pages/building-your-application/routing/custom-error#customizing-the-500-page) عن طريق إنشاء ملف `pages/500.js`.
+
+وجود صفحة 500 في تطبيقك لا يعرض أخطاء محددة لمستخدم التطبيق.
+
+يمكنك أيضًا استخدام [صفحة 404](/docs/pages/building-your-application/routing/custom-error#404-page) لمعالجة أخطاء وقت التشغيل المحددة مثل `الملف غير موجود`.
+
+## معالجة أخطاء العميل
+
+توفر [حدود الأخطاء (Error Boundaries)](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) في React طريقة أنيقة لمعالجة أخطاء JavaScript في جانب العميل بحيث تستمر الأجزاء الأخرى من التطبيق في العمل. بالإضافة إلى منع تعطل الصفحة، تتيح لك تقديم مكون احتياطي مخصص وحتى تسجيل معلومات الخطأ.
+
+لاستخدام حدود الأخطاء في تطبيق Next.js الخاص بك، يجب إنشاء مكون فئة `ErrorBoundary` وتغليف الخاصية `Component` في ملف `pages/_app.js`. سيكون هذا المكون مسؤولاً عن:
+
+- عرض واجهة احتياطية بعد حدوث خطأ
+- توفير طريقة لإعادة تعيين حالة التطبيق
+- تسجيل معلومات الخطأ
+
+يمكنك إنشاء مكون فئة `ErrorBoundary` عن طريق توسيع `React.Component`. على سبيل المثال:
+
+```jsx
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+
+    // تعريف متغير حالة لتتبع وجود خطأ أم لا
+    this.state = { hasError: false }
+  }
+  static getDerivedStateFromError(error) {
+    // تحديث الحالة بحيث يعرض العرض التالي الواجهة الاحتياطية
+
+    return { hasError: true }
+  }
+  componentDidCatch(error, errorInfo) {
+    // يمكنك استخدام خدمة تسجيل الأخطاء الخاصة بك هنا
+    console.log({ error, errorInfo })
+  }
+  render() {
+    // التحقق مما إذا كان قد تم طرح خطأ
+    if (this.state.hasError) {
+      // يمكنك عرض أي واجهة احتياطية مخصصة
+      return (
+        <div>
+          <h2>عذرًا، حدث خطأ!</h2>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false })}
+          >
+            المحاولة مرة أخرى؟
+          </button>
+        </div>
+      )
+    }
+
+    // إرجاع المكونات الفرعية في حالة عدم وجود خطأ
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary
+```
+
+يتتبع مكون `ErrorBoundary` حالة `hasError`. قيمة متغير الحالة هذا هي قيمة منطقية. عندما تكون قيمة `hasError` `true`، سيعرض مكون `ErrorBoundary` واجهة احتياطية. وإلا، سيعرض المكونات الفرعية.
+
+بعد إنشاء مكون `ErrorBoundary`، قم باستيراده في ملف `pages/_app.js` لتغليف الخاصية `Component` في تطبيق Next.js الخاص بك.
+
+```jsx
+// استيراد مكون ErrorBoundary
+import ErrorBoundary from '../components/ErrorBoundary'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    // تغليف الخاصية Component بمكون ErrorBoundary
+    <ErrorBoundary>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  )
+}
+
+export default MyApp
+```
+
+يمكنك معرفة المزيد عن [حدود الأخطاء (Error Boundaries)](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) في توثيق React.
+
+### الإبلاغ عن الأخطاء
+
+لمراقبة أخطاء العميل، استخدم خدمة مثل [Sentry](https://github.com/vercel/next.js/tree/canary/examples/with-sentry) أو Bugsnag أو Datadog.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/13-debugging.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/13-debugging.mdx
new file mode 100644
index 00000000..3a5b7d05
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/13-debugging.mdx
@@ -0,0 +1,120 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:24:07.459Z
+title: تصحيح الأخطاء
+description: تعلم كيفية تصحيح أخطاء تطبيق Next.js باستخدام VS Code أو أدوات مطوري Chrome.
+---
+
+يشرح هذا التوثيق كيفية تصحيح أخطاء كود الواجهة الأمامية والخلفية في Next.js مع دعم كامل لخرائط المصدر باستخدام إما [مصحح أخطاء VS Code](https://code.visualstudio.com/docs/editor/debugging) أو [أدوات مطوري Chrome](https://developers.google.com/web/tools/chrome-devtools).
+
+يمكن استخدام أي مصحح أخطاء يمكنه الاتصال بـ Node.js لتصحيح تطبيق Next.js. يمكنك العثور على مزيد من التفاصيل في [دليل تصحيح الأخطاء](https://nodejs.org/en/docs/guides/debugging-getting-started/) الخاص بـ Node.js.
+
+## التصحيح باستخدام VS Code
+
+قم بإنشاء ملف باسم `.vscode/launch.json` في جذر مشروعك بالمحتوى التالي:
+
+```json filename="launch.json"
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: تصحيح جانب الخادم",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: تصحيح جانب العميل",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: تصحيح المكدس بالكامل",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}
+```
+
+يمكن استبدال `npm run dev` بـ `yarn dev` إذا كنت تستخدم Yarn أو `pnpm dev` إذا كنت تستخدم pnpm.
+
+إذا كنت [تغير رقم المنفذ](/docs/pages/api-reference/cli/next#next-dev-options) الذي يبدأ منه التطبيق، فاستبدل `3000` في `http://localhost:3000` بالمنفذ الذي تستخدمه.
+
+إذا كنت تشغل Next.js من دليل غير الجذر (على سبيل المثال، إذا كنت تستخدم Turborepo) فستحتاج إلى إضافة `cwd` إلى مهام تصحيح جانب الخادم والمكدس الكامل. على سبيل المثال، `"cwd": "${workspaceFolder}/apps/web"`.
+
+الآن انتقل إلى لوحة التصحيح (`Ctrl+Shift+D` على Windows/Linux، `⇧+⌘+D` على macOS)، اختر تكوين الإطلاق، ثم اضغط `F5` أو اختر **Debug: Start Debugging** من لوحة الأوامر لبدء جلسة التصحيح.
+
+## استخدام المصحح في Jetbrains WebStorm
+
+انقر على القائمة المنسدلة التي تعرض تكوين التشغيل، وانقر على `Edit Configurations...`. أنشئ تكوين تصحيح من نوع `Javascript Debug` مع `http://localhost:3000` كعنوان URL. قم بتخصيصه كما تريد (مثل متصفح التصحيح، حفظه كملف مشروع)، ثم انقر على `OK`. شغل هذا التكوين، وسيتم فتح المتصفح المحدد تلقائيًا. في هذه المرحلة، يجب أن يكون لديك تطبيقان في وضع التصحيح: تطبيق NextJS node، وتطبيق العميل/المتصفح.
+
+## التصحيح باستخدام أدوات مطوري Chrome
+
+### كود جانب العميل
+
+ابدأ خادم التطوير كالمعتاد بتشغيل `next dev`، أو `npm run dev`، أو `yarn dev`. بمجرد بدء الخادم، افتح `http://localhost:3000` (أو عنوان URL البديل) في Chrome. بعد ذلك، افتح أدوات المطور في Chrome (`Ctrl+Shift+J` على Windows/Linux، `⌥+⌘+I` على macOS)، ثم انتقل إلى علامة التبويب **Sources**.
+
+الآن، في أي وقت يصل كود جانب العميل إلى عبارة [`debugger`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/debugger)، سيتم إيقاف تنفيذ الكود وسيظهر هذا الملف في منطقة التصحيح. يمكنك أيضًا الضغط على `Ctrl+P` على Windows/Linux أو `⌘+P` على macOS للبحث عن ملف وتعيين نقاط التوقف يدويًا. لاحظ أنه عند البحث هنا، سيكون لملفات المصدر مسارات تبدأ بـ `webpack://_N_E/./`.
+
+### كود جانب الخادم
+
+لتصحيح كود Next.js في جانب الخادم باستخدام أدوات مطوري Chrome، تحتاج إلى تمرير علم [`--inspect`](https://nodejs.org/api/cli.html#cli_inspect_host_port) إلى عملية Node.js الأساسية:
+
+```bash filename="Terminal"
+NODE_OPTIONS='--inspect' next dev
+```
+
+إذا كنت تستخدم `npm run dev` أو `yarn dev` فيجب تحديث سكريبت `dev` في ملف `package.json` الخاص بك:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "NODE_OPTIONS='--inspect' next dev"
+  }
+}
+```
+
+سيبدو تشغيل خادم تطوير Next.js مع علم `--inspect` كما يلي:
+
+```bash filename="Terminal"
+Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
+For help, see: https://nodejs.org/en/docs/inspector
+ready - started server on 0.0.0.0:3000, url: http://localhost:3000
+```
+
+> كن على علم أن تشغيل `NODE_OPTIONS='--inspect' npm run dev` أو `NODE_OPTIONS='--inspect' yarn dev` لن يعمل. سيحاول هذا بدء عدة مصححات أخطاء على نفس المنفذ: واحد لعملية npm/yarn وواحد لـ Next.js. ستحصل بعد ذلك على خطأ مثل `Starting inspector on 127.0.0.1:9229 failed: address already in use` في وحدة التحكم.
+
+بمجرد بدء الخادم، افتح علامة تبويب جديدة في Chrome وقم بزيارة `chrome://inspect`، حيث يجب أن ترى تطبيق Next.js الخاص بك ضمن قسم **Remote Target**. انقر على **inspect** تحت تطبيقك لفتح نافذة منفصلة لأدوات المطور، ثم انتقل إلى علامة التبويب **Sources**.
+
+يعمل تصحيح كود جانب الخادم هنا بشكل مشابه لتصحيح كود جانب العميل باستخدام أدوات مطوري Chrome، إلا أنه عند البحث عن الملفات هنا باستخدام `Ctrl+P` أو `⌘+P`، سيكون لملفات المصدر مسارات تبدأ بـ `webpack://{application-name}/./` (حيث سيتم استبدال `{application-name}` باسم تطبيقك وفقًا لملف `package.json` الخاص بك).
+
+### التصحيح على Windows
+
+قد يواجه مستخدمو Windows مشكلة عند استخدام `NODE_OPTIONS='--inspect'` لأن هذا التركيب غير مدعوم على منصات Windows. للتحايل على ذلك، قم بتثبيت حزمة [`cross-env`](https://www.npmjs.com/package/cross-env) كاعتماد تطوير (`-D` مع `npm` و `yarn`) واستبدل سكريبت `dev` بما يلي.
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev"
+  }
+}
+```
+
+سيقوم `cross-env` بتعيين متغير البيئة `NODE_OPTIONS` بغض النظر عن المنصة التي تستخدمها (بما في ذلك Mac وLinux وWindows) وسيسمح لك بالتصحيح بشكل متسق عبر الأجهزة وأنظمة التشغيل.
+
+> **معلومة مفيدة**: تأكد من تعطيل Windows Defender على جهازك. ستقوم هذه الخدمة الخارجية بفحص _كل ملف مقروء_، وقد تم الإبلاغ عن أنها تزيد بشكل كبير من وقت التحديث السريع مع `next dev`. هذه مشكلة معروفة، لا تتعلق بـ Next.js، لكنها تؤثر على تطوير Next.js.
+
+## مزيد من المعلومات
+
+لمعرفة المزيد حول كيفية استخدام مصحح أخطاء JavaScript، راجع التوثيق التالي:
+
+- [تصحيح Node.js في VS Code: نقاط التوقف](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_breakpoints)
+- [أدوات مطوري Chrome: تصحيح JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/14-preview-mode.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/14-preview-mode.mdx
new file mode 100644
index 00000000..61d3ee45
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/14-preview-mode.mdx
@@ -0,0 +1,243 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:25:28.898Z
+title: وضع المعاينة
+description: يوفر Next.js وضع المعاينة للصفحات المولدة بشكل ثابت. يمكنك تعلم كيفية عمله هنا.
+---
+
+> **ملاحظة**: تم استبدال هذه الميزة بـ [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode).
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مثال WordPress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress) ([عرض تجريبي](https://next-blog-wordpress.vercel.app))
+- [مثال DatoCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([عرض تجريبي](https://next-blog-datocms.vercel.app/))
+- [مثال TakeShape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([عرض تجريبي](https://next-blog-takeshape.vercel.app/))
+- [مثال Sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([عرض تجريبي](https://next-blog-sanity.vercel.app/))
+- [مثال Prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([عرض تجريبي](https://next-blog-prismic.vercel.app/))
+- [مثال Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([عرض تجريبي](https://next-blog-contentful.vercel.app/))
+- [مثال Strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([عرض تجريبي](https://next-blog-strapi.vercel.app/))
+- [مثال Prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([عرض تجريبي](https://next-blog-prepr.vercel.app/))
+- [مثال Agility CMS](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([عرض تجريبي](https://next-blog-agilitycms.vercel.app/))
+- [مثال Cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([عرض تجريبي](https://next-blog-cosmic.vercel.app/))
+- [مثال ButterCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([عرض تجريبي](https://next-blog-buttercms.vercel.app/))
+- [مثال Storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([عرض تجريبي](https://next-blog-storyblok.vercel.app/))
+- [مثال GraphCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([عرض تجريبي](https://next-blog-graphcms.vercel.app/))
+- [مثال Kontent](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([عرض تجريبي](https://next-blog-kontent.vercel.app//))
+- [مثال Umbraco Heartcore](https://github.com/vercel/next.js/tree/canary/examples/cms-umbraco-heartcore) ([عرض تجريبي](https://next-blog-umbraco-heartcore.vercel.app/))
+- [مثال Plasmic](https://github.com/vercel/next.js/tree/canary/examples/cms-plasmic) ([عرض تجريبي](https://nextjs-plasmic-example.vercel.app/))
+- [مثال Enterspeed](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([عرض تجريبي](https://next-blog-demo.enterspeed.com/))
+- [مثال Makeswift](https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift) ([عرض تجريبي](https://nextjs-makeswift-example.vercel.app/))
+
+</details>
+
+في [توثيق الصفحات](/docs/pages/building-your-application/routing/pages-and-layouts) و[توثيق جلب البيانات](/docs/pages/building-your-application/data-fetching)، تحدثنا عن كيفية تقديم صفحة مسبقًا في وقت البناء (**التوليد الثابت**) باستخدام `getStaticProps` و `getStaticPaths`.
+
+التوليد الثابت مفيد عندما تستخدم صفحاتك نظام إدارة محتوى بدون واجهة (headless CMS). ومع ذلك، فهو ليس مثاليًا عندما تكتب مسودة في نظام إدارة المحتوى الخاص بك وتريد **معاينة** المسودة فورًا على صفحتك. سترغب في أن يقوم Next.js بعرض هذه الصفحات في **وقت الطلب** بدلاً من وقت البناء وجلب محتوى المسودة بدلاً من المحتوى المنشور. سترغب في أن يتجاوز Next.js التوليد الثابت فقط لهذه الحالة المحددة.
+
+يحتوي Next.js على ميزة تسمى **وضع المعاينة** التي تحل هذه المشكلة. فيما يلي إرشادات حول كيفية استخدامها.
+
+## الخطوة 1: إنشاء مسار API للمعاينة والوصول إليه
+
+> ألق نظرة على [توثيق مسارات API](/docs/pages/building-your-application/routing/api-routes) أولاً إذا لم تكن معتادًا على مسارات API في Next.js.
+
+أولاً، قم بإنشاء **مسار API للمعاينة**. يمكن أن يكون له أي اسم - على سبيل المثال `pages/api/preview.js` (أو `.ts` إذا كنت تستخدم TypeScript).
+
+في مسار API هذا، تحتاج إلى استدعاء `setPreviewData` على كائن الاستجابة. يجب أن تكون الوسيطة لـ `setPreviewData` كائنًا، ويمكن استخدامه بواسطة `getStaticProps` (المزيد عن هذا لاحقًا). في الوقت الحالي، سنستخدم `{}`.
+
+```js
+export default function handler(req, res) {
+  // ...
+  res.setPreviewData({})
+  // ...
+}
+```
+
+يضبط `res.setPreviewData` بعض **ملفات تعريف الارتباط** في المتصفح والتي تقوم بتشغيل وضع المعاينة. أي طلبات إلى Next.js تحتوي على ملفات تعريف الارتباط هذه سيتم اعتبارها في **وضع المعاينة**، وسيتغير سلوك الصفحات المولدة بشكل ثابت (المزيد عن هذا لاحقًا).
+
+يمكنك اختبار هذا يدويًا عن طريق إنشاء مسار API مثل أدناه والوصول إليه يدويًا من متصفحك:
+
+```js filename="pages/api/preview.js"
+// مثال بسيط لاختباره يدويًا من متصفحك.
+export default function handler(req, res) {
+  res.setPreviewData({})
+  res.end('تم تفعيل وضع المعاينة')
+}
+```
+
+إذا فتحت أدوات المطور في متصفحك وزرت `/api/preview`، ستلاحظ أن ملفات تعريف الارتباط `__prerender_bypass` و `__next_preview_data` سيتم تعيينها على هذا الطلب.
+
+### الوصول إليه بأمان من نظام إدارة المحتوى الخاص بك
+
+في الواقع، سترغب في استدعاء مسار API هذا _بأمان_ من نظام إدارة المحتوى الخاص بك. الخطوات المحددة ستختلف اعتمادًا على نظام إدارة المحتوى الذي تستخدمه، ولكن إليك بعض الخطوات الشائعة التي يمكنك اتخاذها.
+
+تفترض هذه الخطوات أن نظام إدارة المحتوى الذي تستخدمه يدعم تعيين **عناوين URL مخصصة للمعاينة**. إذا لم يكن كذلك، فلا يزال بإمكانك استخدام هذه الطريقة لتأمين عناوين URL للمعاينة، ولكنك ستحتاج إلى إنشاء عنوان URL للمعاينة والوصول إليه يدويًا.
+
+**أولاً**، يجب عليك إنشاء **سلسلة رمز سرية** باستخدام مولد رموز من اختيارك. سيعرف هذا السر فقط تطبيق Next.js الخاص بك ونظام إدارة المحتوى الخاص بك. يمنع هذا السر الأشخاص الذين لا يمكنهم الوصول إلى نظام إدارة المحتوى الخاص بك من الوصول إلى عناوين URL للمعاينة.
+
+**ثانيًا**، إذا كان نظام إدارة المحتوى الخاص بك يدعم تعيين عناوين URL مخصصة للمعاينة، فحدد ما يلي كعنوان URL للمعاينة. يفترض هذا أن مسار API للمعاينة موجود في `pages/api/preview.js`.
+
+```bash filename="Terminal"
+https://<your-site>/api/preview?secret=<token>&slug=<path>
+```
+
+- `<your-site>` يجب أن يكون نطاق النشر الخاص بك.
+- `<token>` يجب استبداله بالرمز السري الذي قمت بإنشائه.
+- `<path>` يجب أن يكون المسار للصفحة التي تريد معاينتها. إذا كنت تريد معاينة `/posts/foo`، فيجب عليك استخدام `&slug=/posts/foo`.
+
+قد يسمح لك نظام إدارة المحتوى الخاص بك بتضمين متغير في عنوان URL للمعاينة بحيث يمكن تعيين `<path>` ديناميكيًا بناءً على بيانات نظام إدارة المحتوى مثل: `&slug=/posts/{entry.fields.slug}`
+
+**أخيرًا**، في مسار API للمعاينة:
+
+- تحقق من تطابق السر وأن معلمة `slug` موجودة (إذا لم يكن كذلك، يجب أن يفشل الطلب).
+-
+- استدعِ `res.setPreviewData`.
+- ثم أعد توجيه المتصفح إلى المسار المحدد بواسطة `slug`. (يستخدم المثال التالي [إعادة توجيه 307](https://developer.mozilla.org/docs/Web/HTTP/Status/307)).
+
+```js
+export default async (req, res) => {
+  // تحقق من السر والمعلمات التالية
+  // يجب أن يعرف هذا السر فقط مسار API هذا ونظام إدارة المحتوى
+  if (req.query.secret !== 'MY_SECRET_TOKEN' || !req.query.slug) {
+    return res.status(401).json({ message: 'رمز غير صالح' })
+  }
+
+  // جلب نظام إدارة المحتوى للتحقق مما إذا كان `slug` المقدم موجودًا
+  // ستنفذ getPostBySlug منطق الجلب المطلوب لنظام إدارة المحتوى
+  const post = await getPostBySlug(req.query.slug)
+
+  // إذا لم يكن slug موجودًا، امنع تفعيل وضع المعاينة
+  if (!post) {
+    return res.status(401).json({ message: 'slug غير صالح' })
+  }
+
+  // تفعيل وضع المعاينة عن طريق تعيين ملفات تعريف الارتباط
+  res.setPreviewData({})
+
+  // إعادة التوجيه إلى المسار من المنشور الذي تم جلبه
+  // لا نعيد التوجيه إلى req.query.slug لأن ذلك قد يؤدي إلى ثغرات إعادة توجيه مفتوحة
+  res.redirect(post.slug)
+}
+```
+
+إذا نجح ذلك، فسيتم إعادة توجيه المتصفح إلى المسار الذي تريد معاينته مع تعيين ملفات تعريف الارتباط لوضع المعاينة.
+
+## الخطوة 2: تحديث `getStaticProps`
+
+الخطوة التالية هي تحديث `getStaticProps` لدعم وضع المعاينة.
+
+إذا قمت بطلب صفحة تحتوي على `getStaticProps` مع تعيين ملفات تعريف الارتباط لوضع المعاينة (عبر `res.setPreviewData`)، فسيتم استدعاء `getStaticProps` في **وقت الطلب** (بدلاً من وقت البناء).
+
+علاوة على ذلك، سيتم استدعاؤها مع كائن `context` حيث:
+
+- `context.preview` سيكون `true`.
+- `context.previewData` سيكون هو نفسه الوسيطة المستخدمة لـ `setPreviewData`.
+
+```js
+export async function getStaticProps(context) {
+  // إذا طلبت هذه الصفحة مع تعيين ملفات تعريف الارتباط لوضع المعاينة:
+  //
+  // - سيكون context.preview صحيحًا
+  // - سيكون context.previewData هو نفسه
+  //   الوسيطة المستخدمة لـ `setPreviewData`.
+}
+```
+
+استخدمنا `res.setPreviewData({})` في مسار API للمعاينة، لذا سيكون `context.previewData` هو `{}`. يمكنك استخدام هذا لتمرير معلومات الجلسة من مسار API للمعاينة إلى `getStaticProps` إذا لزم الأمر.
+
+إذا كنت تستخدم أيضًا `getStaticPaths`، فسيكون `context.params` متاحًا أيضًا.
+
+### جلب بيانات المعاينة
+
+يمكنك تحديث `getStaticProps` لجلب بيانات مختلفة بناءً على `context.preview` و/أو `context.previewData`.
+
+على سبيل المثال، قد يكون لنظام إدارة المحتوى الخاص بك نقطة نهاية API مختلفة للمنشورات المسودة. إذا كان الأمر كذلك، يمكنك استخدام `context.preview` لتعديل عنوان URL لنقطة نهاية API كما يلي:
+
+```js
+export async function getStaticProps(context) {
+  // إذا كان context.preview صحيحًا، أضف "/preview" إلى نقطة نهاية API
+  // لطلب بيانات المسودة بدلاً من البيانات المنشورة. سيختلف هذا
+  // بناءً على نظام إدارة المحتوى الذي تستخدمه.
+  const res = await fetch(`https://.../${context.preview ? 'preview' : ''}`)
+  // ...
+}
+```
+
+هذا كل شيء! إذا قمت بالوصول إلى مسار API للمعاينة (مع `secret` و `slug`) من نظام إدارة المحتوى الخاص بك أو يدويًا، يجب أن تكون قادرًا الآن على رؤية محتوى المعاينة. وإذا قمت بتحديث مسودتك دون نشرها، يجب أن تكون قادرًا على معاينة المسودة.
+
+قم بتعيين هذا كعنوان URL للمعاينة على نظام إدارة المحتوى الخاص بك أو قم بالوصول إليه يدويًا، ويجب أن تكون قادرًا على رؤية المعاينة.
+
+```bash filename="Terminal"
+https://<your-site>/api/preview?secret=<token>&slug=<path>
+```
+
+## المزيد من التفاصيل
+
+> **من الجيد معرفة**: أثناء العرض، يعرض `next/router` علامة `isPreview`، راجع [توثيق كائن الموجه](/docs/pages/api-reference/functions/use-router#router-object) لمزيد من المعلومات.
+
+### تحديد مدة وضع المعاينة
+
+يأخذ `setPreviewData` وسيطة ثانية اختيارية يجب أن تكون كائن خيارات. يقبل المفاتيح التالية:
+
+- `maxAge`: يحدد الرقم (بالثواني) لمدة جلسة المعاينة.
+- `path`: يحدد المسار الذي يجب تطبيق ملف تعريف الارتباط عليه. الافتراضي هو `/` مما يتيح وضع المعاينة لجميع المسارات.
+
+```js
+setPreviewData(data, {
+  maxAge: 60 * 60, // تنتهي صلاحية ملفات تعريف الارتباط لوضع المعاينة بعد ساعة واحدة
+  path: '/about', // تنطبق ملفات تعريف الارتباط لوضع المعاينة على المسارات مع /about
+})
+```
+
+### مسح ملفات تعريف الارتباط لوضع المعاينة
+
+بشكل افتراضي، لم يتم تعيين تاريخ انتهاء صلاحية لملفات تعريف الارتباط لوضع المعاينة، لذا تنتهي جلسة المعاينة عند إغلاق المتصفح.
+
+لمسح ملفات تعريف الارتباط لوضع المعاينة يدويًا، قم بإنشاء مسار API يستدعي `clearPreviewData()`:
+
+```js filename="pages/api/clear-preview-mode-cookies.js"
+export default function handler(req, res) {
+  res.clearPreviewData({})
+}
+```
+
+ثم، أرسل طلبًا إلى `/api/clear-preview-mode-cookies` لاستدعاء مسار API. إذا كنت تستدعي هذا المسار باستخدام [`next/link`](/docs/pages/api-reference/components/link)، فيجب عليك تمرير `prefetch={false}` لمنع استدعاء `clearPreviewData` أثناء الجلب المسبق للرابط.
+
+إذا تم تحديد مسار في استدعاء `setPreviewData`، يجب عليك تمرير نفس المسار إلى `clearPreviewData`:
+
+```js filename="pages/api/clear-preview-mode-cookies.js"
+export default function handler(req, res) {
+  const { path } = req.query
+
+  res.clearPreviewData({ path })
+}
+```
+
+### حدود حجم `previewData`
+
+يمكنك تمرير كائن إلى `setPreviewData` وجعله متاحًا في `getStaticProps`. ومع ذلك، نظرًا لأن البيانات سيتم تخزينها في ملف تعريف الارتباط، فهناك قيود على الحجم. حاليًا، بيانات المعاينة محدودة بـ 2 كيلوبايت.
+
+### يعمل مع `getServerSideProps`
+
+يعمل وضع المعاينة أيضًا مع `getServerSideProps`. سيكون متاحًا أيضًا في كائن `context` الذي يحتوي على `preview` و `previewData`.
+
+> **من الجيد معرفة**: لا يجب عليك تعيين رأس `Cache-Control` عند استخدام وضع المعاينة لأنه لا يمكن تجاوزه. بدلاً من ذلك، نوصي باستخدام [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+
+### يعمل مع مسارات API
+
+سيكون لمسارات API إمكانية الوصول إلى `preview` و `previewData` تحت كائن الطلب. على سبيل المثال:
+
+```js
+export default function myApiRoute(req, res) {
+  const isPreview = req.preview
+  const previewData = req.previewData
+  // ...
+}
+```
+
+### فريد لكل `next build`
+
+تتغير كل من قيمة ملف تعريف الارتباط للتحايل والمفتاح الخاص لتشفير `previewData` عند اكتمال `next build`.
+هذا يضمن أنه لا يمكن تخمين ملف تعريف الارتباط للتحايل.
+
+> **من الجيد معرفة**: لاختبار وضع المعاينة محليًا عبر HTTP، سيحتاج متصفحك إلى السماح بملفات تعريف الارتباط لجهات خارجية والوصول إلى التخزين المحلي.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/15-content-security-policy.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/15-content-security-policy.mdx
new file mode 100644
index 00000000..2d61ddd9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/15-content-security-policy.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:46.444Z
+title: سياسة أمان المحتوى (Content Security Policy)
+description: تعلم كيفية تعيين سياسة أمان المحتوى (CSP) لتطبيق Next.js الخاص بك.
+source: app/building-your-application/configuring/content-security-policy
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/index.mdx
new file mode 100644
index 00000000..10c81e32
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/06-configuring/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:44.948Z
+title: التهيئة
+description: تعلم كيفية تهيئة تطبيق Next.js الخاص بك.
+source: app/building-your-application/configuring
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/01-vitest.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/01-vitest.mdx
new file mode 100644
index 00000000..059cfc5f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/01-vitest.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:43.996Z
+title: إعداد Vitest مع Next.js
+nav_title: Vitest
+description: تعلم كيفية إعداد Next.js مع Vitest ومكتبة اختبار React (React Testing Library) - وهما مكتبتان شائعتان لاختبار الوحدات.
+source: app/building-your-application/testing/vitest
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/02-jest.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/02-jest.mdx
new file mode 100644
index 00000000..c940dca1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/02-jest.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:42.436Z
+title: إعداد Jest مع Next.js
+nav_title: Jest
+description: تعلم كيفية إعداد Next.js مع Jest لاختبار الوحدات (Unit Testing).
+source: app/building-your-application/testing/jest
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/03-playwright.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/03-playwright.mdx
new file mode 100644
index 00000000..105405c1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/03-playwright.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:36.821Z
+title: إعداد Playwright مع Next.js
+nav_title: Playwright
+description: تعلم كيفية إعداد Next.js مع Playwright لاختبارات من البداية إلى النهاية (E2E) واختبارات التكامل.
+source: app/building-your-application/testing/playwright
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/04-cypress.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/04-cypress.mdx
new file mode 100644
index 00000000..b5d427c2
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/04-cypress.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:36.939Z
+title: إعداد Cypress مع Next.js
+nav_title: Cypress
+description: تعلم كيفية إعداد Next.js مع Cypress لاختبارات نهاية إلى نهاية (E2E) واختبار المكونات.
+source: app/building-your-application/testing/cypress
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/index.mdx
new file mode 100644
index 00000000..394d8735
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/07-testing/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:36.548Z
+title: الاختبار
+description: تعلم كيفية إعداد Next.js مع ثلاث أدوات اختبار شائعة الاستخدام — Cypress و Playwright و Vitest و Jest.
+source: app/building-your-application/testing
+---
+
+{/* لا تقم بالتعديل. يتم توليد محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/08-authentication/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/08-authentication/index.mdx
new file mode 100644
index 00000000..0a6224fd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/08-authentication/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:33.907Z
+title: المصادقة
+description: تعلم كيفية تنفيذ المصادقة في Next.js، بما في ذلك أفضل الممارسات، تأمين المسارات، تقنيات التفويض، وإدارة الجلسات.
+source: app/building-your-application/authentication
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/01-production-checklist.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/01-production-checklist.mdx
new file mode 100644
index 00000000..198199e1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/01-production-checklist.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:34.816Z
+title: قائمة التحقق للإنتاج
+description: توصيات لضمان أفضل أداء وتجربة مستخدم قبل نشر تطبيق Next.js الخاص بك في مرحلة الإنتاج.
+source: app/building-your-application/deploying/production-checklist
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب أن لا يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/02-static-exports.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/02-static-exports.mdx
new file mode 100644
index 00000000..6df4052b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/02-static-exports.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:25.720Z
+title: التصدير الثابت (Static Exports)
+description: يتيح Next.js البدء كموقع ثابت أو تطبيق صفحة واحدة (SPA)، مع إمكانية الترقية لاحقًا لاستخدام ميزات تتطلب خادمًا.
+source: app/building-your-application/deploying/static-exports
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/03-multi-zones.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/03-multi-zones.mdx
new file mode 100644
index 00000000..b31f4493
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/03-multi-zones.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:24.345Z
+title: المناطق المتعددة (Multi-Zones)
+description: تعلم كيفية بناء واجهات أمامية مصغرة (micro-frontends) باستخدام ميزة المناطق المتعددة في Next.js لنشر تطبيقات Next.js متعددة تحت نطاق واحد.
+source: app/building-your-application/deploying/multi-zones
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/04-ci-build-caching.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/04-ci-build-caching.mdx
new file mode 100644
index 00000000..6394aa2d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/04-ci-build-caching.mdx
@@ -0,0 +1,170 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:16.586Z
+title: التكامل المستمر (CI) - تخزين البناء المؤقت
+description: تعلم كيفية تكوين التكامل المستمر (CI) لتخزين بناء Next.js مؤقتًا
+---
+
+لتحسين أداء البناء، يحفظ Next.js ذاكرة تخزين مؤقت في `.next/cache` يتم مشاركتها بين عمليات البناء المختلفة.
+
+للاستفادة من هذه الذاكرة المؤقتة في بيئات التكامل المستمر (CI)، ستحتاج إلى تكوين سير العمل في CI الخاص بك للحفاظ على الذاكرة المؤقتة بشكل صحيح بين عمليات البناء.
+
+> إذا لم يتم تكوين CI الخاص بك للحفاظ على `.next/cache` بين عمليات البناء، قد تظهر لك رسالة خطأ [No Cache Detected](/docs/messages/no-cache).
+
+فيما يلي بعض أمثلة تكوينات الذاكرة المؤقتة لمزودي CI الشائعين:
+
+## Vercel
+
+يتم تكوين ذاكرة التخزين المؤقت لـ Next.js تلقائيًا لك. لا يلزمك اتخاذ أي إجراء.
+
+## CircleCI
+
+قم بتحرير خطوة `save_cache` في ملف `.circleci/config.yml` لتشمل `.next/cache`:
+
+```yaml
+steps:
+  - save_cache:
+      key: dependency-cache-{{ checksum "yarn.lock" }}
+      paths:
+        - ./node_modules
+        - ./.next/cache
+```
+
+إذا لم يكن لديك مفتاح `save_cache`، يرجى اتباع [توثيق CircleCI حول إعداد ذاكرة التخزين المؤقت للبناء](https://circleci.com/docs/2.0/caching/).
+
+## Travis CI
+
+أضف أو ادمج ما يلي في ملف `.travis.yml`:
+
+```yaml
+cache:
+  directories:
+    - $HOME/.cache/yarn
+    - node_modules
+    - .next/cache
+```
+
+## GitLab CI
+
+أضف أو ادمج ما يلي في ملف `.gitlab-ci.yml`:
+
+```yaml
+cache:
+  key: ${CI_COMMIT_REF_SLUG}
+  paths:
+    - node_modules/
+    - .next/cache/
+```
+
+## Netlify CI
+
+استخدم [إضافات Netlify](https://www.netlify.com/products/build/plugins/) مع [`@netlify/plugin-nextjs`](https://www.npmjs.com/package/@netlify/plugin-nextjs).
+
+## AWS CodeBuild
+
+أضف (أو ادمج) ما يلي إلى ملف `buildspec.yml`:
+
+```yaml
+cache:
+  paths:
+    - 'node_modules/**/*' # تخزين `node_modules` مؤقتًا لـ `yarn` أو `npm i` أسرع
+    - '.next/cache/**/*' # تخزين Next.js مؤقتًا لإعادة بناء التطبيق بشكل أسرع
+```
+
+## GitHub Actions
+
+باستخدام [actions/cache](https://github.com/actions/cache) من GitHub، أضف الخطوة التالية في ملف سير العمل الخاص بك:
+
+```yaml
+uses: actions/cache@v4
+with:
+  # راجع هنا للتخزين المؤقت مع `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn أو يمكنك الاستفادة من التخزين المؤقت مع actions/setup-node https://github.com/actions/setup-node
+  path: |
+    ~/.npm
+    ${{ github.workspace }}/.next/cache
+  # إنشاء ذاكرة تخزين مؤقت جديدة عند تغيير الحزم أو ملفات المصدر.
+  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+  # إذا تغيرت ملفات المصدر ولكن الحزم لم تتغير، أعد البناء من ذاكرة تخزين مؤقت سابقة.
+  restore-keys: |
+    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+```
+
+## Bitbucket Pipelines
+
+أضف أو ادمج ما يلي في ملف `bitbucket-pipelines.yml` في المستوى العلوي (نفس مستوى `pipelines`):
+
+```yaml
+definitions:
+  caches:
+    nextcache: .next/cache
+```
+
+ثم أشر إليه في قسم `caches` من خطوة `step` في خط أنابيبك:
+
+```yaml
+- step:
+    name: your_step_name
+    caches:
+      - node
+      - nextcache
+```
+
+## Heroku
+
+باستخدام [ذاكرة التخزين المؤقت المخصصة](https://devcenter.heroku.com/articles/nodejs-support#custom-caching) من Heroku، أضف مصفوفة `cacheDirectories` في ملف package.json الرئيسي:
+
+```javascript
+"cacheDirectories": [".next/cache"]
+```
+
+## Azure Pipelines
+
+باستخدام [مهمة التخزين المؤقت](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/cache) من Azure Pipelines، أضف المهمة التالية إلى ملف خط الأنابيب yaml في مكان ما قبل المهمة التي تنفذ `next build`:
+
+```yaml
+- task: Cache@2
+  displayName: 'تخزين .next/cache مؤقتًا'
+  inputs:
+    key: next | $(Agent.OS) | yarn.lock
+    path: '$(System.DefaultWorkingDirectory)/.next/cache'
+```
+
+## Jenkins (Pipeline)
+
+باستخدام [إضافة Job Cacher](https://www.jenkins.io/doc/pipeline/steps/jobcacher/) لـ Jenkins، أضف خطوة البناء التالية إلى ملف `Jenkinsfile` حيث تقوم عادةً بتنفيذ `next build` أو `npm install`:
+
+```yaml
+stage("Restore npm packages") {
+    steps {
+        // كتابة ملف قفل في الذاكرة المؤقتة بناءً على تجزئة GIT_COMMIT
+        writeFile file: "next-lock.cache", text: "$GIT_COMMIT"
+
+        cache(caches: [
+            arbitraryFileCache(
+                path: "node_modules",
+                includes: "**/*",
+                cacheValidityDecidingFile: "package-lock.json"
+            )
+        ]) {
+            sh "npm install"
+        }
+    }
+}
+stage("Build") {
+    steps {
+        // كتابة ملف قفل في الذاكرة المؤقتة بناءً على تجزئة GIT_COMMIT
+        writeFile file: "next-lock.cache", text: "$GIT_COMMIT"
+
+        cache(caches: [
+            arbitraryFileCache(
+                path: ".next/cache",
+                includes: "**/*",
+                cacheValidityDecidingFile: "next-lock.cache"
+            )
+        ]) {
+            // أي `next build`
+            sh "npm run build"
+        }
+    }
+}
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/index.mdx
new file mode 100644
index 00000000..be291261
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/09-deploying/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:12.055Z
+title: النشر
+description: تعلم كيفية نشر تطبيق Next.js الخاص بك في بيئة الإنتاج، سواءً كان مُدارًا أو مضيفًا ذاتيًا.
+source: app/building-your-application/deploying
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/01-codemods.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/01-codemods.mdx
new file mode 100644
index 00000000..6cd06905
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/01-codemods.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:12.191Z
+title: تحويلات الكود (Codemods)
+description: استخدم تحويلات الكود لترقية قاعدة كود Next.js عند إصدار ميزات جديدة.
+source: app/building-your-application/upgrading/codemods
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/02-app-router-migration.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/02-app-router-migration.mdx
new file mode 100644
index 00000000..b0a7cee2
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/02-app-router-migration.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:02.946Z
+title: من Pages إلى App
+description: تعلم كيفية ترقية تطبيق Next.js الحالي من جهاز التوجيه Pages إلى جهاز التوجيه App.
+source: app/building-your-application/upgrading/app-router-migration
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/03-from-vite.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/03-from-vite.mdx
new file mode 100644
index 00000000..99989f6a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/03-from-vite.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:02.241Z
+title: الانتقال من Vite
+description: تعلم كيفية نقل تطبيق React الحالي من Vite إلى Next.js.
+source: app/building-your-application/upgrading/from-vite
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/04-from-create-react-app.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/04-from-create-react-app.mdx
new file mode 100644
index 00000000..49e4a36a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/04-from-create-react-app.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:54.538Z
+title: الانتقال من Create React App
+description: تعلم كيفية نقل تطبيق React الحالي من Create React App إلى Next.js.
+source: app/building-your-application/upgrading/from-create-react-app
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/05-version-14.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/05-version-14.mdx
new file mode 100644
index 00000000..5659e217
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/05-version-14.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:54.079Z
+title: الإصدار 14
+description: ترقية تطبيق Next.js من الإصدار 13 إلى الإصدار 14.
+source: app/building-your-application/upgrading/version-14
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/06-version-13.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/06-version-13.mdx
new file mode 100644
index 00000000..07289f22
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/06-version-13.mdx
@@ -0,0 +1,89 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:27.623Z
+title: الإصدار 13
+description: ترقية تطبيق Next.js من الإصدار 12 إلى الإصدار 13.
+---
+
+## الترقية من 12 إلى 13
+
+لتحديث Next.js إلى الإصدار 13، قم بتنفيذ الأمر التالي باستخدام مدير الحزم المفضل لديك:
+
+```bash filename="Terminal"
+npm i next@13 react@latest react-dom@latest eslint-config-next@13
+```
+
+```bash filename="Terminal"
+yarn add next@13 react@latest react-dom@latest eslint-config-next@13
+```
+
+```bash filename="Terminal"
+pnpm i next@13 react@latest react-dom@latest eslint-config-next@13
+```
+
+```bash filename="Terminal"
+bun add next@13 react@latest react-dom@latest eslint-config-next@13
+```
+
+> **معلومة مفيدة:** إذا كنت تستخدم TypeScript، تأكد من ترقية `@types/react` و `@types/react-dom` إلى أحدث إصداراتهم.
+
+### ملخص الإصدار 13
+
+- تم تغيير [المتصفحات المدعومة](/docs/architecture/supported-browsers) بحيث لم يعد Internet Explorer مدعومًا وتم استهداف المتصفحات الحديثة.
+- تم رفع الحد الأدنى لإصدار Node.js من 12.22.0 إلى 16.14.0، حيث أن الإصدارات 12.x و 14.x قد وصلت إلى نهاية دعمها.
+- تم رفع الحد الأدنى لإصدار React من 17.0.2 إلى 18.2.0.
+- تم تغيير خاصية التكوين `swcMinify` من `false` إلى `true`. راجع [مترجم Next.js](/docs/architecture/nextjs-compiler) للمزيد من المعلومات.
+- تم تغيير استيراد `next/image` إلى `next/legacy/image`. وتم تغيير استيراد `next/future/image` إلى `next/image`. يتوفر [أداة تحويل تلقائي](/docs/pages/building-your-application/upgrading/codemods#next-image-to-legacy-image) لإعادة تسمية الاستيرادات بشكل آلي وآمن.
+- لم يعد من الممكن أن يكون العنصر الفرعي لـ `next/link` هو `<a>`. أضف الخاصية `legacyBehavior` لاستخدام السلوك القديم أو احذف `<a>` للترقية. يتوفر [أداة تحويل تلقائي](/docs/pages/building-your-application/upgrading/codemods#new-link) لترقية الكود تلقائيًا.
+- تمت إزالة خاصية التكوين `target` واستبدالها بـ [تتبع ملفات الإخراج](/docs/pages/api-reference/next-config-js/output).
+
+## ترقية الميزات المشتركة
+
+يقدم Next.js 13 [دليل `app` جديد](/docs/app/building-your-application/routing) بميزات واتفاقيات جديدة. ومع ذلك، لا يتطلب الترقية إلى Next.js 13 استخدام [دليل `app` الجديد](/docs/app/building-your-application/routing#the-app-router).
+
+يمكنك الاستمرار في استخدام `pages` مع الميزات الجديدة التي تعمل في كلا الدليلين، مثل [مكون الصورة](#image-component) المحدث، [مكون الرابط](#link-component)، [مكون السكريبت](#script-component)، و [تحسين الخطوط](#font-optimization).
+
+### مكون `<Image/>`
+
+قدم Next.js 12 العديد من التحسينات على مكون الصورة باستيراد مؤقت: `next/future/image`. تضمنت هذه التحسينات كمية أقل من جافاسكريبت على جانب العميل، طرق أسهل لتوسيع وتنسيق الصور، تحسين إمكانية الوصول، وتحميل كسول متوافق مع المتصفحات.
+
+بدءًا من Next.js 13، أصبح هذا السلوك الجديد هو الافتراضي لـ `next/image`.
+
+يتوفر أداتان تحويل تلقائي لمساعدتك في الانتقال إلى مكون الصورة الجديد:
+
+- [next-image-to-legacy-image](/docs/pages/building-your-application/upgrading/codemods#next-image-to-legacy-image): ستقوم هذه الأداة بإعادة تسمية استيرادات `next/image` إلى `next/legacy/image` بشكل آمن وتلقائي للحفاظ على نفس سلوك Next.js 12. نوصي بتشغيل هذه الأداة لتحديث Next.js 13 بسرعة.
+- [next-image-experimental](/docs/pages/building-your-application/upgrading/codemods#next-image-experimental): بعد تشغيل الأداة السابقة، يمكنك تشغيل هذه الأداة التجريبية لترقية `next/legacy/image` إلى `next/image` الجديد، مما سيزيل الخصائص غير المستخدمة ويضيف أنماطًا مضمنة. لاحظ أن هذه الأداة تجريبية وتغطي فقط الاستخدام الثابت (مثل `<Image src={img} layout="responsive" />`) وليس الاستخدام الديناميكي (مثل `<Image {...props} />`).
+
+بدلاً من ذلك، يمكنك التحديث يدويًا باتباع [دليل الترقية](/docs/pages/building-your-application/upgrading/codemods#next-image-experimental) ورؤية [المقارنة مع الإصدار القديم](/docs/pages/api-reference/components/image-legacy#comparison).
+
+### مكون `<Link>`
+
+لم يعد مكون [`<Link>`](/docs/pages/api-reference/components/link) يتطلب إضافة علامة `<a>` يدويًا كعنصر فرعي. تمت إضافة هذا السلوك كخيار تجريبي في [الإصدار 12.2](https://nextjs.org/blog/next-12-2) وهو الآن الافتراضي. في Next.js 13، يقوم `<Link>` دائمًا بعرض `<a>` ويسمح لك بتمرير الخصائص إلى العلامة الأساسية.
+
+مثال:
+
+```jsx
+import Link from 'next/link'
+
+// Next.js 12: يجب تضمين `<a>` وإلا سيتم استبعاده
+<Link href="/about">
+  <a>About</a>
+</Link>
+
+// Next.js 13: يقوم `<Link>` دائمًا بعرض `<a>` تلقائيًا
+<Link href="/about">
+  About
+</Link>
+```
+
+لترقية روابطك إلى Next.js 13، يمكنك استخدام [أداة التحويل التلقائي `new-link`](/docs/pages/building-your-application/upgrading/codemods#new-link).
+
+### مكون `<Script>`
+
+تم تحديث سلوك [`next/script`](/docs/pages/api-reference/components/script) لدعم كل من `pages` و `app`. إذا كنت تتبنى `app` تدريجيًا، اقرأ [دليل الترقية](/docs/pages/building-your-application/upgrading).
+
+### تحسين الخطوط
+
+سابقًا، ساعدك Next.js في تحسين الخطوط عن طريق تضمين CSS الخطوط. يقدم الإصدار 13 وحدة [`next/font`](/docs/pages/building-your-application/optimizing/fonts) الجديدة التي تمنحك القدرة على تخصيص تجربة تحميل الخطوط مع ضمان أداء ممتاز وخصوصية.
+
+راجع [تحسين الخطوط](/docs/pages/building-your-application/optimizing/fonts) لمعرفة كيفية استخدام `next/font`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/07-version-12.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/07-version-12.mdx
new file mode 100644
index 00000000..69f10885
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/07-version-12.mdx
@@ -0,0 +1,154 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:46.482Z
+title: الإصدار 12
+description: ترقية تطبيق Next.js من الإصدار 11 إلى الإصدار 12.
+---
+
+لترقية إلى الإصدار 12، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm i next@12 react@17 react-dom@17 eslint-config-next@12
+```
+
+```bash filename="Terminal"
+yarn add next@12 react@17 react-dom@17 eslint-config-next@12
+```
+
+```bash filename="Terminal"
+pnpm up next@12 react@17 react-dom@17 eslint-config-next@12
+```
+
+```bash filename="Terminal"
+bun add next@12 react@17 react-dom@17 eslint-config-next@12
+```
+
+> **معلومة مفيدة:** إذا كنت تستخدم TypeScript، تأكد من ترقية `@types/react` و `@types/react-dom` إلى الإصدارات المقابلة.
+
+### الترقية إلى 12.2
+
+[البرمجية الوسيطة (Middleware)](/docs/messages/middleware-upgrade-guide) - إذا كنت تستخدم البرمجية الوسيطة قبل `12.2`، يرجى الاطلاع على [دليل الترقية](/docs/messages/middleware-upgrade-guide) لمزيد من المعلومات.
+
+### الترقية إلى 12.0
+
+[الحد الأدنى لإصدار Node.js](https://nodejs.org/en/) - تم رفع الحد الأدنى لإصدار Node.js من `12.0.0` إلى `12.22.0` وهو أول إصدار من Node.js يدعم وحدات ES بشكل أصلي.
+
+[الحد الأدنى لإصدار React](https://react.dev/learn/add-react-to-an-existing-project) - الحد الأدنى المطلوب لإصدار React هو `17.0.2`. للترقية يمكنك تنفيذ الأمر التالي في الطرفية:
+
+```bash filename="Terminal"
+npm install react@latest react-dom@latest
+
+yarn add react@latest react-dom@latest
+
+pnpm update react@latest react-dom@latest
+
+bun add react@latest react-dom@latest
+```
+
+#### استبدال Babel بـ SWC
+
+يستخدم Next.js الآن المترجم القائم على Rust [SWC](https://swc.rs/) لترجمة JavaScript/TypeScript. هذا المترجم الجديد أسرع بمقدار 17 مرة من Babel عند ترجمة الملفات الفردية وأسرع بمقدار 5 مرات في التحديث السريع (Fast Refresh).
+
+يوفر Next.js توافقًا كاملاً مع الإصدارات السابقة للتطبيقات التي تحتوي على [تكوين Babel مخصص](/docs/pages/building-your-application/configuring/babel). جميع التحويلات التي يتعامل معها Next.js افتراضيًا مثل styled-jsx وإزالة الأكواد غير المستخدمة (tree-shaking) لـ `getStaticProps` / `getStaticPaths` / `getServerSideProps` تم نقلها إلى Rust.
+
+عندما يحتوي التطبيق على تكوين Babel مخصص، سيتوقف Next.js تلقائيًا عن استخدام SWC لترجمة JavaScript/TypeScript وسيعود إلى استخدام Babel بنفس الطريقة التي كانت مستخدمة في Next.js 11.
+
+سيتم نقل العديد من عمليات التكامل مع المكتبات الخارجية التي تتطلب حاليًا تحويلات Babel مخصصة إلى تحويلات SWC القائمة على Rust في المستقبل القريب. وتشمل هذه على سبيل المثال لا الحصر:
+
+- Styled Components
+- Emotion
+- Relay
+
+من أجل تحديد أولويات التحويلات التي ستساعدك في اعتماد SWC، يرجى مشاركة ملف `.babelrc` الخاص بك في [موضوع الملاحظات هذا](https://github.com/vercel/next.js/discussions/30174).
+
+#### استبدال Terser بـ SWC للتصغير
+
+يمكنك اختيار استبدال Terser بـ SWC لتصغير JavaScript بسرعة تصل إلى 7 مرات باستخدام علم في `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  swcMinify: true,
+}
+```
+
+يعد تصغير الأكواد باستخدام SWC علمًا اختياريًا لضمان إمكانية اختباره ضد المزيد من تطبيقات Next.js الواقعية قبل أن يصبح الافتراضي في Next.js 12.1. إذا كانت لديك ملاحظات حول التصغير، يرجى مشاركتها في [موضوع الملاحظات هذا](https://github.com/vercel/next.js/discussions/30237).
+
+#### تحسينات في تحليل CSS لـ styled-jsx
+
+بالإضافة إلى المترجم القائم على Rust، قمنا بتنفيذ محلل CSS جديد يعتمد على المحلل المستخدم لتحويل Babel الخاص بـ styled-jsx. هذا المحلل الجديد لديه تحسينات في معالجة CSS ويظهر الآن أخطاء عند استخدام CSS غير صالح كان يتسلل سابقًا ويسبب سلوكًا غير متوقع.
+
+بسبب هذا التغيير، سيظهر خطأ أثناء التطوير و `next build` عند استخدام CSS غير صالح. يؤثر هذا التغيير فقط على استخدام styled-jsx.
+
+#### تغيير عنصر التغليف لـ `next/image`
+
+يقدم `next/image` الآن عنصر `<img>` داخل `<span>` بدلاً من `<div>`.
+
+إذا كان تطبيقك يحتوي على CSS يستهدف span مثل `.container span`، فإن الترقية إلى Next.js 12 قد تتطابق بشكل غير صحيح مع عنصر التغليف داخل مكون `<Image>`. يمكنك تجنب ذلك عن طريق تقييد المحدد إلى فئة معينة مثل `.container span.item` وتحديث المكون ذي الصلة بهذه الفئة، مثل `<span className="item" />`.
+
+إذا كان تطبيقك يحتوي على CSS يستهدف علامة `<div>` لـ `next/image`، مثل `.container div`، فقد لا يتطابق بعد الآن. يمكنك تحديث المحدد إلى `.container span`، أو preferably، إضافة `<div className="wrapper">` جديد يغلف مكون `<Image>` واستهدافه بدلاً من ذلك مثل `.container .wrapper`.
+
+لم يتغير دعم `className` وسيظل يمرر إلى عنصر `<img>` الأساسي.
+
+راجع [الوثائق](/docs/pages/building-your-application/optimizing/images#styling) لمزيد من المعلومات.
+
+#### اتصال HMR يستخدم الآن WebSocket
+
+سابقًا، كان Next.js يستخدم اتصال [أحداث مرسلة من الخادم (server-sent events)](https://developer.mozilla.org/docs/Web/API/Server-sent_events) لاستقبال أحداث HMR. يستخدم Next.js 12 الآن اتصال WebSocket.
+
+في بعض الحالات عند توجيه الطلبات إلى خادم تطوير Next.js، ستحتاج إلى التأكد من معالجة طلب الترقية بشكل صحيح. على سبيل المثال، في `nginx` ستحتاج إلى إضافة التكوين التالي:
+
+```nginx
+location /_next/webpack-hmr {
+    proxy_pass http://localhost:3000/_next/webpack-hmr;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+}
+```
+
+إذا كنت تستخدم Apache (2.x)، يمكنك إضافة التكوين التالي لتمكين WebSocket للخادم. راجع المنفذ واسم المضيف وأسماء الخادم.
+
+```
+<VirtualHost *:443>
+ # ServerName yourwebsite.local
+ ServerName "${WEBSITE_SERVER_NAME}"
+ ProxyPass / http://localhost:3000/
+ ProxyPassReverse / http://localhost:3000/
+ # Next.js 12 يستخدم websocket
+ <Location /_next/webpack-hmr>
+    RewriteEngine On
+    RewriteCond %{QUERY_STRING} transport=websocket [NC]
+    RewriteCond %{HTTP:Upgrade} websocket [NC]
+    RewriteCond %{HTTP:Connection} upgrade [NC]
+    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
+    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
+    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
+ </Location>
+</VirtualHost>
+```
+
+بالنسبة للخوادم المخصصة، مثل `express`، قد تحتاج إلى استخدام `app.all` لضمان تمرير الطلب بشكل صحيح، على سبيل المثال:
+
+```js
+app.all('/_next/webpack-hmr', (req, res) => {
+  nextjsRequestHandler(req, res)
+})
+```
+
+#### تمت إزالة دعم Webpack 4
+
+إذا كنت تستخدم بالفعل webpack 5 يمكنك تخطي هذا القسم.
+
+اعتمد Next.js webpack 5 كافتراضي للترجمة في Next.js 11. كما تم الإعلان في [وثائق ترقية webpack 5](/docs/messages/webpack5) فإن Next.js 12 يزيل دعم webpack 4.
+
+إذا كان تطبيقك لا يزال يستخدم webpack 4 باستخدام علم الإلغاء، فسترى الآن خطأ يشير إلى [وثائق ترقية webpack 5](/docs/messages/webpack5).
+
+#### خيار `target` أصبح قديمًا
+
+إذا لم يكن لديك `target` في `next.config.js` يمكنك تخطي هذا القسم.
+
+أصبح خيار target قديمًا لصالح الدعم المدمج لتتبع التبعيات المطلوبة لتشغيل صفحة.
+
+أثناء `next build`، سيتتبع Next.js تلقائيًا كل صفحة وتبعياتها لتحديد جميع الملفات المطلوبة لنشر نسخة إنتاجية من تطبيقك.
+
+إذا كنت تستخدم حاليًا خيار `target` مضبوطًا على `serverless`، يرجى قراءة [الوثائق حول كيفية الاستفادة من المخرجات الجديدة](/docs/pages/api-reference/next-config-js/output).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/08-version-11.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/08-version-11.mdx
new file mode 100644
index 00000000..b04eb07a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/08-version-11.mdx
@@ -0,0 +1,151 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:27.924Z
+title: الإصدار 11
+description: ترقية تطبيق Next.js من الإصدار 10 إلى الإصدار 11.
+---
+
+لترقية إلى الإصدار 11، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm i next@11 react@17 react-dom@17
+```
+
+```bash filename="Terminal"
+yarn add next@11 react@17 react-dom@17
+```
+
+```bash filename="Terminal"
+pnpm up next@11 react@17 react-dom@17
+```
+
+```bash filename="Terminal"
+bun add next@11 react@17 react-dom@17
+```
+
+> **معلومة مفيدة:** إذا كنت تستخدم TypeScript، تأكد من ترقية `@types/react` و `@types/react-dom` إلى الإصدارات المقابلة.
+
+### Webpack 5
+
+أصبح Webpack 5 الآن الخيار الافتراضي لجميع تطبيقات Next.js. إذا لم يكن لديك تكوين مخصص لـ webpack، فإن تطبيقك يستخدم بالفعل webpack 5. إذا كان لديك تكوين مخصص، يمكنك الرجوع إلى [توثيق Next.js لـ webpack 5](/docs/messages/webpack5) للحصول على إرشادات الترقية.
+
+### تنظيف `distDir` أصبح افتراضيًا
+
+دليل إخراج البناء (الافتراضي هو `.next`) يتم تنظيفه الآن افتراضيًا باستثناء ذاكرة التخزين المؤقت لـ Next.js. يمكنك الرجوع إلى [RFC تنظيف `distDir`](https://github.com/vercel/next.js/discussions/6009) لمزيد من المعلومات.
+
+إذا كان تطبيقك يعتمد على هذا السلوك سابقًا، يمكنك تعطيل السلوك الافتراضي الجديد عن طريق إضافة علامة `cleanDistDir: false` في `next.config.js`.
+
+### دعم متغير البيئة `PORT` لـ `next dev` و `next start`
+
+يدعم Next.js 11 متغير البيئة `PORT` لتعيين المنفذ الذي يعمل عليه التطبيق. لا يزال استخدام `-p`/`--port` موصى به، ولكن إذا كنت محظورًا من استخدام `-p` بأي طريقة، يمكنك الآن استخدام `PORT` كبديل:
+
+مثال:
+
+```
+PORT=4000 next start
+```
+
+### تخصيص `next.config.js` لاستيراد الصور
+
+يدعم Next.js 11 استيراد الصور الثابتة مع `next/image`. تعتمد هذه الميزة الجديدة على القدرة على معالجة استيراد الصور. إذا كنت قد أضفت سابقًا حزم `next-images` أو `next-optimized-images`، يمكنك إما الانتقال إلى الدعم المدمج الجديد باستخدام `next/image` أو تعطيل الميزة:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
+### إزالة `super.componentDidCatch()` من `pages/_app.js`
+
+تم إهمال `componentDidCatch` لمكون `next/app` في Next.js 9 حيث لم يعد هناك حاجة إليه وأصبح منذ ذلك الحين بلا تأثير. في Next.js 11، تمت إزالته.
+
+إذا كان لديك طريقة `componentDidCatch` مخصصة في `pages/_app.js`، يمكنك إزالة `super.componentDidCatch` حيث لم يعد هناك حاجة إليه.
+
+### إزالة `Container` من `pages/_app.js`
+
+تم إهمال هذا التصدير في Next.js 9 حيث لم يعد هناك حاجة إليه وأصبح منذ ذلك الحين بلا تأثير مع تحذير أثناء التطوير. في Next.js 11، تمت إزالته.
+
+إذا كان ملف `pages/_app.js` يستورد `Container` من `next/app`، يمكنك إزالته حيث تمت إزالته. تعلم المزيد في [التوثيق](/docs/messages/app-container-deprecated).
+
+### إزالة استخدام `props.url` من مكونات الصفحة
+
+تم إهمال هذه الخاصية في Next.js 4 وأظهرت منذ ذلك الحين تحذيرًا أثناء التطوير. مع إدخال `getStaticProps` / `getServerSideProps`، كانت هذه الطرق تمنع بالفعل استخدام `props.url`. في Next.js 11، تمت إزالتها تمامًا.
+
+يمكنك التعلم أكثر في [التوثيق](/docs/messages/url-deprecated).
+
+### إزالة الخاصية `unsized` في `next/image`
+
+تم إهمال الخاصية `unsized` في `next/image` في Next.js 10.0.1. يمكنك استخدام `layout="fill"` بدلاً من ذلك. في Next.js 11 تمت إزالة `unsized`.
+
+### إزالة الخاصية `modules` في `next/dynamic`
+
+تم إهمال خيارات `modules` و `render` لـ `next/dynamic` في Next.js 9.5. تم ذلك لجعل واجهة برمجة التطبيقات `next/dynamic` أقرب إلى `React.lazy`. في Next.js 11، تمت إزالة خيارات `modules` و `render`.
+
+لم يتم ذكر هذا الخيار في التوثيق منذ Next.js 8 لذا فمن غير المحتمل أن يكون تطبيقك يستخدمه.
+
+إذا كان تطبيقك يستخدم `modules` و `render`، يمكنك الرجوع إلى [التوثيق](/docs/messages/next-dynamic-modules).
+
+### إزالة `Head.rewind`
+
+أصبح `Head.rewind` بلا تأثير منذ Next.js 9.5، في Next.js 11 تمت إزالته. يمكنك إزالة استخدامك لـ `Head.rewind` بأمان.
+
+### استبعاد لغات Moment.js افتراضيًا
+
+تتضمن Moment.js ترجمات للعديد من اللغات افتراضيًا. يقوم Next.js الآن باستبعاد هذه اللغات تلقائيًا لتحسين حجم الحزمة للتطبيقات التي تستخدم Moment.js.
+
+لتحميل لغة محددة استخدم هذا المقتطف:
+
+```js
+import moment from 'moment'
+import 'moment/locale/ja'
+
+moment.locale('ja')
+```
+
+يمكنك تعطيل هذا السلوك الافتراضي الجديد عن طريق إضافة `excludeDefaultMomentLocales: false` إلى `next.config.js` إذا كنت لا تريد السلوك الجديد، لاحظ أنه موصى به بشدة عدم تعطيل هذا التحسين الجديد لأنه يقلل بشكل كبير من حجم Moment.js.
+
+### تحديث استخدام `router.events`
+
+في حال كنت تصل إلى `router.events` أثناء التصيير، في Next.js 11 لم يعد `router.events` متاحًا أثناء التصيير المسبق. تأكد من أنك تصل إلى `router.events` في `useEffect`:
+
+```js
+useEffect(() => {
+  const handleRouteChange = (url, { shallow }) => {
+    console.log(
+      `App is changing to ${url} ${
+        shallow ? 'with' : 'without'
+      } shallow routing`
+    )
+  }
+
+  router.events.on('routeChangeStart', handleRouteChange)
+
+  // إذا تم إلغاء تحميل المكون، قم بإلغاء الاشتراك
+  // من الحدث باستخدام طريقة `off`:
+  return () => {
+    router.events.off('routeChangeStart', handleRouteChange)
+  }
+}, [router])
+```
+
+إذا كان تطبيقك يستخدم `router.router.events` والتي كانت خاصية داخلية غير عامة، تأكد من استخدام `router.events` أيضًا.
+
+## الترقية من React 16 إلى 17
+
+أدخل React 17 [تحويل JSX جديد](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) الذي يجلب ميزة طويلة الأمد لـ Next.js إلى نظام React الأوسع: عدم الحاجة إلى `import React from 'react'` عند استخدام JSX. عند استخدام React 17 سيقوم Next.js تلقائيًا باستخدام التحويل الجديد. هذا التحويل لا يجعل المتغير `React` عامًا، والذي كان تأثيرًا جانبيًا غير مقصود للتنفيذ السابق لـ Next.js. يتوفر [أداة تحويل أكواد](/docs/pages/building-your-application/upgrading/codemods#add-missing-react-import) لإصلاح الحالات التي استخدمت فيها `React` دون استيراده عن طريق الخطأ.
+
+معظم التطبيقات تستخدم بالفعل أحدث إصدار من React، مع Next.js 11 تم تحديث الحد الأدنى لإصدار React إلى 17.0.2.
+
+لترقية يمكنك تنفيذ الأمر التالي:
+
+```
+npm install react@latest react-dom@latest
+```
+
+أو باستخدام `yarn`:
+
+```
+yarn add react@latest react-dom@latest
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/09-version-10.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/09-version-10.mdx
new file mode 100644
index 00000000..a0d7104a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/09-version-10.mdx
@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:15.082Z
+title: الإصدار 10
+description: ترقية تطبيق Next.js من الإصدار 9 إلى الإصدار 10.
+---
+
+لم تكن هناك تغييرات غير متوافقة بين الإصدارين 9 و10.
+
+لترقية إلى الإصدار 10، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm i next@10
+```
+
+```bash filename="Terminal"
+yarn add next@10
+```
+
+```bash filename="Terminal"
+pnpm up next@10
+```
+
+```bash filename="Terminal"
+bun add next@10
+```
+
+> **معلومة مفيدة:** إذا كنت تستخدم TypeScript، تأكد من ترقية `@types/react` و `@types/react-dom` إلى الإصدارات المقابلة لهما.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/10-version-9.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/10-version-9.mdx
new file mode 100644
index 00000000..43629f56
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/10-version-9.mdx
@@ -0,0 +1,236 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:14.968Z
+title: الترقية إلى الإصدار 9
+nav_title: الإصدار 9
+description: ترقية تطبيق Next.js من الإصدار 8 إلى الإصدار 9.
+---
+
+لترقية إلى الإصدار 9، قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm i next@9
+```
+
+```bash filename="Terminal"
+yarn add next@9
+```
+
+```bash filename="Terminal"
+pnpm up next@9
+```
+
+```bash filename="Terminal"
+bun add next@9
+```
+
+> **معلومة مفيدة:** إذا كنت تستخدم TypeScript، تأكد من ترقية `@types/react` و `@types/react-dom` إلى الإصدارات المقابلة.
+
+## النشر الإنتاجي على Vercel
+
+إذا كنت قد قمت بتكوين `routes` في ملف `vercel.json` سابقًا للطرق الديناميكية، يمكن إزالة هذه القواعد عند استخدام ميزة [التوجيه الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes) الجديدة في Next.js 9.
+
+طرق Next.js 9 الديناميكية **مكونة تلقائيًا على [Vercel](https://vercel.com/)** ولا تتطلب أي تخصيص في `vercel.json`.
+
+يمكنك قراءة المزيد عن [التوجيه الديناميكي هنا](/docs/pages/building-your-application/routing/dynamic-routes).
+
+## تحقق من ملف التطبيق المخصص (`pages/_app.js`)
+
+إذا كنت قد نسخت مثال [التطبيق المخصص `<App>`](/docs/pages/building-your-application/routing/custom-app) سابقًا، فقد تتمكن من إزالة `getInitialProps`.
+
+إزالة `getInitialProps` من `pages/_app.js` (عند الإمكان) مهم لتمكين ميزات Next.js الجديدة!
+
+الـ `getInitialProps` التالي لا يفعل شيئًا ويمكن إزالته:
+
+```js
+class MyApp extends App {
+  // أزلني، أنا لا أفعل شيئًا!
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  render() {
+    // ... إلخ
+  }
+}
+```
+
+## التغييرات غير المتوافقة مع الإصدارات السابقة
+
+### `@zeit/next-typescript` لم يعد ضروريًا
+
+Next.js سيتجاهل الآن استخدام `@zeit/next-typescript` وسيحذرك لإزالته. يرجى إزالة هذه الإضافة من ملف `next.config.js`.
+
+أزل الإشارات إلى `@zeit/next-typescript/babel` من ملف `.babelrc` المخصص (إذا كان موجودًا).
+
+يجب أيضًا إزالة استخدام [`fork-ts-checker-webpack-plugin`](https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues) من ملف `next.config.js`.
+
+يتم نشر تعريفات TypeScript مع حزمة `next`، لذا تحتاج إلى إلغاء تثبيت `@types/next` لأنها ستتعارض.
+
+الأنواع التالية مختلفة:
+
+> تم إنشاء هذه القائمة من قبل المجتمع لمساعدتك في الترقية، إذا وجدت اختلافات أخرى يرجى إرسال طلب سحب إلى هذه القائمة لمساعدة المستخدمين الآخرين.
+
+من:
+
+```tsx
+import { NextContext } from 'next'
+import { NextAppContext, DefaultAppIProps } from 'next/app'
+import { NextDocumentContext, DefaultDocumentIProps } from 'next/document'
+```
+
+إلى:
+
+```tsx
+import { NextPageContext } from 'next'
+import { AppContext, AppInitialProps } from 'next/app'
+import { DocumentContext, DocumentInitialProps } from 'next/document'
+```
+
+### مفتاح `config` أصبح تصديرًا في الصفحة
+
+لم يعد بإمكانك تصدير متغير مخصص باسم `config` من صفحة (مثل `export { config }` / `export const config ...`).
+هذا المتغير المصدر يستخدم الآن لتحديد تكوين Next.js على مستوى الصفحة مثل AMP الاختياري وميزات مسار API.
+
+يجب عليك إعادة تسمية تصدير `config` غير المخصص لـ Next.js إلى شيء مختلف.
+
+### `next/dynamic` لم يعد يعرض "تحميل..." افتراضيًا أثناء التحميل
+
+المكونات الديناميكية لن تعرض أي شيء افتراضيًا أثناء التحميل. لا يزال بإمكانك تخصيص هذا السلوك عن طريق تعيين خاصية `loading`:
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const DynamicComponentWithCustomLoading = dynamic(
+  () => import('../components/hello2'),
+  {
+    loading: () => <p>جار التحميل</p>,
+  }
+)
+```
+
+### تمت إزالة `withAmp` لصالح كائن تكوين مصدر
+
+Next.js لديه الآن مفهوم التكوين على مستوى الصفحة، لذا تمت إزالة مكون `withAmp` ذو الترتيب العالي للتناسق.
+
+يمكن **هجرة هذا التغيير تلقائيًا عن طريق تنفيذ الأوامر التالية في جذر مشروع Next.js الخاص بك:**
+
+```bash filename="Terminal"
+curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
+```
+
+لإجراء هذه الهجرة يدويًا، أو لعرض ما سينتجه التعديل البرمجي، انظر أدناه:
+
+**قبل**
+
+```jsx
+import { withAmp } from 'next/amp'
+
+function Home() {
+  return <h1>صفحة AMP الخاصة بي</h1>
+}
+
+export default withAmp(Home)
+// أو
+export default withAmp(Home, { hybrid: true })
+```
+
+**بعد**
+
+```jsx
+export default function Home() {
+  return <h1>صفحة AMP الخاصة بي</h1>
+}
+
+export const config = {
+  amp: true,
+  // أو
+  amp: 'hybrid',
+}
+```
+
+### `next export` لم يعد يصدر الصفحات كـ `index.html`
+
+سابقًا، تصدير `pages/about.js` كان ينتج `out/about/index.html`. تم تغيير هذا السلوك لينتج `out/about.html`.
+
+يمكنك العودة إلى السلوك السابق عن طريق إنشاء ملف `next.config.js` بالمحتوى التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  trailingSlash: true,
+}
+```
+
+### `pages/api/` يعامل بشكل مختلف
+
+الصفحات في `pages/api/` تعتبر الآن [مسارات API](https://nextjs.org/blog/next-9#api-routes).
+الصفحات في هذا الدليل لن تحتوي على حزمة جانب العميل.
+
+## الميزات المهملة
+
+### `next/dynamic` أهمل تحميل عدة وحدات مرة واحدة
+
+تم إهمال القدرة على تحميل عدة وحدات مرة واحدة في `next/dynamic` لتكون أقرب إلى تنفيذ React (`React.lazy` و `Suspense`).
+
+تحديث الكود الذي يعتمد على هذا السلوك سهل نسبيًا! لقد قدمنا مثالًا قبل/بعد لمساعدتك في هجرة تطبيقك:
+
+**قبل**
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const HelloBundle = dynamic({
+  modules: () => {
+    const components = {
+      Hello1: () => import('../components/hello1').then((m) => m.default),
+      Hello2: () => import('../components/hello2').then((m) => m.default),
+    }
+
+    return components
+  },
+  render: (props, { Hello1, Hello2 }) => (
+    <div>
+      <h1>{props.title}</h1>
+      <Hello1 />
+      <Hello2 />
+    </div>
+  ),
+})
+
+function DynamicBundle() {
+  return <HelloBundle title="حزمة ديناميكية" />
+}
+
+export default DynamicBundle
+```
+
+**بعد**
+
+```jsx
+import dynamic from 'next/dynamic'
+
+const Hello1 = dynamic(() => import('../components/hello1'))
+const Hello2 = dynamic(() => import('../components/hello2'))
+
+function HelloBundle({ title }) {
+  return (
+    <div>
+      <h1>{title}</h1>
+      <Hello1 />
+      <Hello2 />
+    </div>
+  )
+}
+
+function DynamicBundle() {
+  return <HelloBundle title="حزمة ديناميكية" />
+}
+
+export default DynamicBundle
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/index.mdx
new file mode 100644
index 00000000..c452e01e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/10-upgrading/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:55.829Z
+title: الترقية
+description: تعلم كيفية الترقية إلى أحدث إصدارات إطار العمل Next.js.
+source: app/building-your-application/upgrading
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/index.mdx b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/index.mdx
new file mode 100644
index 00000000..286cab19
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/01-building-your-application/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:45.786Z
+title: بناء تطبيقك
+description: تعلم كيفية استخدام ميزات Next.js لبناء تطبيقك.
+source: app/building-your-application
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/font.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/font.mdx
new file mode 100644
index 00000000..d828cbc4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/font.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:46.633Z
+title: وحدة الخطوط
+nav_title: الخط
+description: مرجع API لوحدة الخطوط
+source: app/api-reference/components/font
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/head.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/head.mdx
new file mode 100644
index 00000000..ba078e06
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/head.mdx
@@ -0,0 +1,75 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:01.919Z
+title: مكون <Head>
+description: أضف عناصر مخصصة إلى جزء `head` من صفحتك باستخدام مكون Head المدمج.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [عناصر Head](https://github.com/vercel/next.js/tree/canary/examples/head-elements)
+- [مكون التخطيط (Layout)](https://github.com/vercel/next.js/tree/canary/examples/layout-component)
+
+</details>
+
+نوفر مكونًا مدمجًا لإلحاق العناصر بجزء `head` من الصفحة:
+
+```jsx
+import Head from 'next/head'
+
+function IndexPage() {
+  return (
+    <div>
+      <Head>
+        <title>عنوان صفحتي</title>
+      </Head>
+      <p>مرحبًا بالعالم!</p>
+    </div>
+  )
+}
+
+export default IndexPage
+```
+
+## تجنب العلامات المكررة
+
+لتجنب العلامات المكررة في `head`، يمكنك استخدام خاصية `key` التي تضم عرض العلامة مرة واحدة فقط، كما في المثال التالي:
+
+```jsx
+import Head from 'next/head'
+
+function IndexPage() {
+  return (
+    <div>
+      <Head>
+        <title>عنوان صفحتي</title>
+        <meta property="og:title" content="عنوان صفحتي" key="title" />
+      </Head>
+      <Head>
+        <meta property="og:title" content="عنواني الجديد" key="title" />
+      </Head>
+      <p>مرحبًا بالعالم!</p>
+    </div>
+  )
+}
+
+export default IndexPage
+```
+
+في هذه الحالة، يتم عرض `<meta property="og:title" />` الثانية فقط. يتم التعامل تلقائيًا مع علامات `meta` التي تحتوي على سمات `key` مكررة.
+
+> يتم مسح محتويات `head` عند إلغاء تحميل المكون، لذا تأكد من أن كل صفحة تحدد بالكامل ما تحتاجه في `head` دون افتراضات حول ما أضافته الصفحات الأخرى.
+
+## استخدم تداخلًا بسيطًا
+
+يجب أن تكون العناصر مثل `title` أو `meta` أو أي عناصر أخرى (مثل `script`) **أبناء مباشرين** لعنصر `Head`،
+أو مغلفة في مستوى واحد كحد أقصى من `<React.Fragment>` أو المصفوفات - وإلا لن يتم التقاط العلامات بشكل صحيح أثناء التنقل من جانب العميل.
+
+## استخدم `next/script` للنصوص البرمجية
+
+نوصي باستخدام [`next/script`](/docs/pages/building-your-application/optimizing/scripts) في مكونك بدلاً من إنشاء `<script>` يدويًا في `next/head`.
+
+## لا تستخدم علامات `html` أو `body`
+
+لا يمكنك استخدام `<Head>` لتعيين سمات على علامات `<html>` أو `<body>`. سيؤدي هذا إلى خطأ `next-head-count is missing`. يمكن لـ `next/head` التعامل فقط مع العلامات داخل علامة `<head>` في HTML.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/image-legacy.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/image-legacy.mdx
new file mode 100644
index 00000000..bfee34f6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/image-legacy.mdx
@@ -0,0 +1,603 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:26:38.268Z
+title: مكون <Image> (القديم)
+description: تحسين الصور مع التوافق مع الإصدارات السابقة باستخدام مكون الصورة القديم.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [مكون الصورة القديم](https://github.com/vercel/next.js/tree/canary/examples/image-legacy-component)
+
+</details>
+
+بدءًا من Next.js 13، تمت إعادة كتابة مكون `next/image` لتحسين الأداء وتجربة المطور. لتوفير حل ترقية متوافق مع الإصدارات السابقة، تم تغيير اسم `next/image` القديم إلى `next/legacy/image`.
+
+عرض **الجديد** [مرجع API لـ `next/image`](/docs/pages/api-reference/components/image)
+
+## المقارنة
+
+مقارنة بـ `next/legacy/image`، يحتوي مكون `next/image` الجديد على التغييرات التالية:
+
+- إزالة `<span>` المغلف لـ `<img>` لصالح [نسبة الأبعاد المحسوبة أصلاً](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes)
+- إضافة دعم لخاصية `style` الأساسية
+  - إزالة خاصية `layout` لصالح `style` أو `className`
+  - إزالة خاصية `objectFit` لصالح `style` أو `className`
+  - إزالة خاصية `objectPosition` لصالح `style` أو `className`
+- إزالة تنفيذ `IntersectionObserver` لصالح [التحميل الكسول الأصلي](https://caniuse.com/loading-lazy-attr)
+  - إزالة خاصية `lazyBoundary` لأنه لا يوجد ما يعادلها أصليًا
+  - إزالة خاصية `lazyRoot` لأنه لا يوجد ما يعادلها أصليًا
+- إزالة تكوين `loader` لصالح خاصية [`loader`](#loader)
+- تغيير خاصية `alt` من اختيارية إلى مطلوبة
+- تغيير رد النداء `onLoadingComplete` لاستقبال مرجع لعنصر `<img>`
+
+## الخصائص المطلوبة
+
+يتطلب مكون `<Image />` الخصائص التالية.
+
+### src
+
+يجب أن يكون أحد الخيارات التالية:
+
+- ملف صورة [مستورد بشكل ثابت](/docs/pages/building-your-application/optimizing/images#local-images)
+- سلسلة مسار. يمكن أن يكون هذا إما عنوان URL خارجي مطلق، أو مسار داخلي اعتمادًا على خاصية [loader](#loader) أو [تكوين المحمل](#loader-configuration).
+
+عند استخدام عنوان URL خارجي، يجب إضافته إلى [remotePatterns](#remote-patterns) في `next.config.js`.
+
+### width
+
+يمكن أن تمثل خاصية `width` إما العرض _المعروض_ أو العرض _الأصلي_ بالبكسل، اعتمادًا على خصائص [`layout`](#layout) و [`sizes`](#sizes).
+
+عند استخدام `layout="intrinsic"` أو `layout="fixed"`، تمثل خاصية `width` العرض _المعروض_ بالبكسل، لذا ستؤثر على حجم الصورة الظاهر.
+
+عند استخدام `layout="responsive"`، `layout="fill"`، تمثل خاصية `width` العرض _الأصلي_ بالبكسل، لذا ستؤثر فقط على نسبة الأبعاد.
+
+خاصية `width` مطلوبة، باستثناء [الصور المستوردة بشكل ثابت](/docs/pages/building-your-application/optimizing/images#local-images)، أو تلك التي تحتوي على `layout="fill"`.
+
+### height
+
+يمكن أن تمثل خاصية `height` إما الارتفاع _المعروض_ أو الارتفاع _الأصلي_ بالبكسل، اعتمادًا على خصائص [`layout`](#layout) و [`sizes`](#sizes).
+
+عند استخدام `layout="intrinsic"` أو `layout="fixed"`، تمثل خاصية `height` الارتفاع _المعروض_ بالبكسل، لذا ستؤثر على حجم الصورة الظاهر.
+
+عند استخدام `layout="responsive"`، `layout="fill"`، تمثل خاصية `height` الارتفاع _الأصلي_ بالبكسل، لذا ستؤثر فقط على نسبة الأبعاد.
+
+خاصية `height` مطلوبة، باستثناء [الصور المستوردة بشكل ثابت](/docs/pages/building-your-application/optimizing/images#local-images)، أو تلك التي تحتوي على `layout="fill"`.
+
+## الخصائص الاختيارية
+
+يقبل مكون `<Image />` عددًا من الخصائص الإضافية بخلاف تلك المطلوبة. يصف هذا القسم الخصائص الأكثر استخدامًا لمكون الصورة. يمكن العثور على تفاصيل حول الخصائص الأقل استخدامًا في قسم [الخصائص المتقدمة](#advanced-props).
+
+### layout
+
+سلوك تخطيط الصورة مع تغير حجم نافذة العرض.
+
+| `layout`              | السلوك                                                 | `srcSet`                                                                                                    | `sizes` | هل يحتوي على غلاف ومحدد حجم |
+| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- | --------------------- |
+| `intrinsic` (افتراضي) | تصغير ليتناسب مع عرض الحاوية، حتى حجم الصورة الأصلي | `1x`, `2x` (بناءً على [imageSizes](#image-sizes))                                                            | N/A     | نعم                   |
+| `fixed`               | الحجم مضبوط تمامًا على `width` و `height`                    | `1x`, `2x` (بناءً على [imageSizes](#image-sizes))                                                            | N/A     | نعم                   |
+| `responsive`          | التكبير ليتناسب مع عرض الحاوية                          | `640w`, `750w`, ... `2048w`, `3840w` (بناءً على [imageSizes](#image-sizes) و [deviceSizes](#device-sizes)) | `100vw` | نعم                   |
+| `fill`                | النمو في كلا المحورين X و Y لملء الحاوية              | `640w`, `750w`, ... `2048w`, `3840w` (بناءً على [imageSizes](#image-sizes) و [deviceSizes](#device-sizes)) | `100vw` | نعم                   |
+
+- [عرض توضيحي لتخطيط `intrinsic` (افتراضي)](https://image-legacy-component.nextjs.gallery/layout-intrinsic)
+  - عند `intrinsic`، ستقوم الصورة بتصغير الأبعاد لنوافذ العرض الأصغر، ولكن تحتفظ بالأبعاد الأصلية لنوافذ العرض الأكبر.
+- [عرض توضيحي لتخطيط `fixed`](https://image-legacy-component.nextjs.gallery/layout-fixed)
+  - عند `fixed`، لن تتغير أبعاد الصورة مع تغير نافذة العرض (بدون استجابة) مشابه لعنصر `img` الأصلي.
+- [عرض توضيحي لتخطيط `responsive`](https://image-legacy-component.nextjs.gallery/layout-responsive)
+  - عند `responsive`، ستقوم الصورة بتصغير الأبعاد لنوافذ العرض الأصغر والتكبير للنوافذ الأكبر.
+  - تأكد من استخدام العنصر الأب لـ `display: block` في ورقة الأنماط الخاصة به.
+- [عرض توضيحي لتخطيط `fill`](https://image-legacy-component.nextjs.gallery/layout-fill)
+  - عند `fill`، ستمتد الصورة في كلا الاتجاهين العرض والارتفاع لملء أبعاد العنصر الأب، بشرط أن يكون العنصر الأب نسبيًا.
+  - عادة ما يتم إقران هذا مع خاصية [`objectFit`](#objectfit).
+  - تأكد من أن العنصر الأب يحتوي على `position: relative` في ورقة الأنماط الخاصة به.
+- [عرض توضيحي لصورة الخلفية](https://image-legacy-component.nextjs.gallery/background)
+
+### loader
+
+دالة مخصصة تستخدم لحل عناوين URL. تعيين المحمل كخاصية على مكون الصورة يتجاوز المحمل الافتراضي المحدد في [قسم `images` من `next.config.js`](#loader-configuration).
+
+المحمل هو دالة تُرجع سلسلة عنوان URL للصورة، مع الأخذ في الاعتبار المعلمات التالية:
+
+- [`src`](#src)
+- [`width`](#width)
+- [`quality`](#quality)
+
+إليك مثالاً على استخدام محمل مخصص:
+
+```js
+import Image from 'next/legacy/image'
+
+const myLoader = ({ src, width, quality }) => {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+
+const MyImage = (props) => {
+  return (
+    <Image
+      loader={myLoader}
+      src="me.png"
+      alt="Picture of the author"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+### sizes
+
+سلسلة توفر معلومات حول عرض الصورة عند نقاط التوقف المختلفة. ستؤثر قيمة `sizes` بشكل كبير على أداء الصور التي تستخدم `layout="responsive"` أو `layout="fill"`. سيتم تجاهلها للصور التي تستخدم `layout="intrinsic"` أو `layout="fixed"`.
+
+تخدم خاصية `sizes` غرضين مهمين يتعلقان بأداء الصورة:
+
+أولاً، تستخدم المتصفح قيمة `sizes` لتحديد حجم الصورة الذي يجب تنزيله، من مجموعة المصادر التي يتم إنشاؤها تلقائيًا بواسطة `next/legacy/image`. عندما يختار المتصفح، لا يعرف بعد حجم الصورة على الصفحة، لذا يختار صورة بنفس حجم نافذة العرض أو أكبر. تتيح لك خاصية `sizes` إخبار المتصفح أن الصورة ستكون في الواقع أصغر من عرض الشاشة بالكامل. إذا لم تحدد قيمة `sizes`، فسيتم استخدام القيمة الافتراضية `100vw` (عرض الشاشة بالكامل).
+
+ثانيًا، يتم تحليل قيمة `sizes` واستخدامها لقص القيم في مجموعة المصادر التي تم إنشاؤها تلقائيًا. إذا كانت خاصية `sizes` تحتوي على أحجام مثل `50vw`، التي تمثل نسبة من عرض نافذة العرض، فسيتم قص مجموعة المصادر لعدم تضمين أي قيم صغيرة جدًا بحيث لا تكون ضرورية أبدًا.
+
+على سبيل المثال، إذا كنت تعلم أن التنسيق الخاص بك سيجعل الصورة بعرض كامل على الأجهزة المحمولة، وتخطيط من عمودين على الأجهزة اللوحية، وتخطيط من ثلاثة أعمدة على شاشات سطح المكتب، فيجب عليك تضمين خاصية sizes مثل ما يلي:
+
+```js
+import Image from 'next/legacy/image'
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+    />
+  </div>
+)
+```
+
+يمكن أن يكون لهذا المثال من `sizes` تأثير كبير على مقاييس الأداء. بدون `33vw`، ستكون الصورة المختارة من الخادم أكبر بثلاث مرات مما يجب أن تكون. نظرًا لأن حجم الملف يتناسب مع مربع العرض، بدون `sizes`، سيقوم المستخدم بتنزيل صورة أكبر بتسع مرات مما هو ضروري.
+
+تعلم المزيد عن `srcset` و `sizes`:
+
+- [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
+- [mdn](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes)
+
+### quality
+
+جودة الصورة المحسنة، عدد صحيح بين `1` و `100` حيث `100` هو أفضل جودة. القيمة الافتراضية هي `75`.
+
+### priority
+
+عندما تكون `true`، ستعتبر الصورة ذات أولوية عالية وسيتم [تحميلها مسبقًا](https://web.dev/preload-responsive-images/). يتم تعطيل التحميل الكسول تلقائيًا للصور التي تستخدم `priority`.
+
+يجب استخدام خاصية `priority` على أي صورة تم اكتشافها كعنصر [أكبر محتوى مرئي (LCP)](https://nextjs.org/learn/seo/web-performance/lcp). قد يكون من المناسب وجود عدة صور ذات أولوية، حيث يمكن أن تكون صور مختلفة عنصر LCP لأحجام نوافذ عرض مختلفة.
+
+يجب استخدامها فقط عندما تكون الصورة مرئية فوق الطية. القيمة الافتراضية هي `false`.
+
+### placeholder
+
+عنصر نائب يستخدم أثناء تحميل الصورة. القيم الممكنة هي `blur` أو `empty`. القيمة الافتراضية هي `empty`.
+
+عند `blur`، سيتم استخدام خاصية [`blurDataURL`](#blurdataurl) كعنصر نائب. إذا كان `src` كائنًا من [استيراد ثابت](/docs/pages/building-your-application/optimizing/images#local-images) وكانت الصورة المستوردة من نوع `.jpg`، `.png`، `.webp`، أو `.avif`، فسيتم ملء `blurDataURL` تلقائيًا.
+
+للصور الديناميكية، يجب عليك توفير خاصية [`blurDataURL`](#blurdataurl). يمكن أن تساعد حلول مثل [Plaiceholder](https://github.com/joe-bell/plaiceholder) في إنشاء `base64`.
+
+عند `empty`، لن يكون هناك عنصر نائب أثناء تحميل الصورة، فقط مساحة فارغة.
+
+جربها:
+
+- [عرض توضيحي لعنصر النائب `blur`](https://image-legacy-component.nextjs.gallery/placeholder)
+- [عرض توضيحي لتأثير التموج مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/shimmer)
+- [عرض توضيحي لتأثير اللون مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/color)
+
+## الخصائص المتقدمة
+
+في بعض الحالات، قد تحتاج إلى استخدام متقدم. يقبل مكون `<Image />` الخصائص المتقدمة التالية اختياريًا.
+
+### style
+
+يسمح [بتمرير أنماط CSS](https://developer.mozilla.org/docs/Web/HTML/Element/style) إلى عنصر الصورة الأساسي.
+
+لاحظ أن جميع أوضاع `layout` تطبق أنماطها الخاصة على عنصر الصورة، وهذه الأنماط التلقائية لها الأسبقية على خاصية `style`.
+
+تذكر أيضًا أن خصائص `width` و `height` المطلوبة يمكن أن تتفاعل مع التنسيق الخاص بك. إذا استخدمت التنسيق لتعديل `width` للصورة، فيجب عليك أيضًا تعيين `height="auto"`، وإلا سيتم تشويه صورتك.
+
+### objectFit
+
+يحدد كيفية ملاءمة الصورة للحاوية الأب عند استخدام `layout="fill"`.
+
+يتم تمرير هذه القيمة إلى خاصية CSS [object-fit](https://developer.mozilla.org/docs/Web/CSS/object-fit) للصورة `src`.
+
+### objectPosition
+
+يحدد كيفية وضع الصورة داخل العنصر الأب عند استخدام `layout="fill"`.
+
+يتم تمرير هذه القيمة إلى خاصية CSS [object-position](https://developer.mozilla.org/docs/Web/CSS/object-position) المطبقة على الصورة.
+
+### onLoadingComplete
+
+دالة رد نداء يتم استدعاؤها بمجرد اكتمال تحميل الصورة وإزالة [العنصر النائب](#placeholder).
+
+تقبل دالة `onLoadingComplete` معلمة واحدة، كائن يحتوي على الخصائص التالية:
+
+- [`naturalWidth`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/naturalWidth)
+- [`naturalHeight`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/naturalHeight)
+
+### loading
+
+> **تنبيه**: هذه الخاصية مخصصة فقط للاستخدام المتقدم. تحويل صورة للتحميل باستخدام `eager` عادةً ما **يؤذي الأداء**.
+>
+> نوصي باستخدام خاصية [`priority`](#priority) بدلاً من ذلك، والتي تقوم بتحميل الصورة بفعالية لمعظم حالات الاستخدام.
+
+سلوك تحميل الصورة. القيمة الافتراضية هي `lazy`.
+
+عند `lazy`، يتم تأجيل تحميل الصورة حتى تصل إلى مسافة محسوبة من نافذة العرض.
+
+عند `eager`، يتم تحميل الصورة على الفور.
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-loading)
+
+### blurDataURL
+
+[عنوان URL للبيانات](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) لاستخدامها كصورة نائبة قبل تحميل صورة `src` بنجاح. يكون فعالاً فقط عند دمجه مع [`placeholder="blur"`](#placeholder).
+
+يجب أن تكون صورة مشفرة بـ base64. سيتم تكبيرها وطمسها، لذا يوصى باستخدام صورة صغيرة جدًا (10 بكسل أو أقل). قد يؤدي تضمين صور أكبر كعناصر نائبة إلى الإضرار بأداء تطبيقك.
+
+جربها:
+
+- [عرض توضيحي لخاصية `blurDataURL` الافتراضية](https://image-legacy-component.nextjs.gallery/placeholder)
+- [عرض توضيحي لتأثير التموج مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/shimmer)
+- [عرض توضيحي لتأثير اللون مع خاصية `blurDataURL`](https://image-legacy-component.nextjs.gallery/color)
+
+يمكنك أيضًا [إنشاء عنوان URL لبيانات بلون ثابت](https://png-pixel.com) لمطابقة الصورة.
+
+### lazyBoundary
+
+سلسلة (بصيغة مشابهة لخاصية margin) تعمل كصندوق محدد يستخدم للكشف عن تقاطع نافذة العرض مع الصورة وتشغيل التحميل [الكسول](#loading). القيمة الافتراضية هي `"200px"`.
+
+إذا كانت الصورة متداخلة داخل عنصر أب قابل للتمرير غير مستند الجذر، فستحتاج أيضًا إلى تعيين خاصية [lazyRoot](#lazyroot).
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)
+
+### lazyRoot
+
+مرجع React [Ref](https://react.dev/learn/referencing-values-with-refs) يشير إلى العنصر الأب القابل للتمرير. القيمة الافتراضية هي `null` (نافذة عرض المستند).
+
+يجب أن يشير المرجع إلى عنصر DOM أو مكون React يقوم [بتمرير المرجع](https://react.dev/reference/react/forwardRef) إلى عنصر DOM الأساسي.
+
+**مثال يشير إلى عنصر DOM**
+
+```jsx
+import Image from 'next/legacy/image'
+import React from 'react'
+
+const Example = () => {
+  const lazyRoot = React.useRef(null)
+
+  return (
+    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
+      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
+      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
+    </div>
+  )
+}
+```
+
+**مثال يشير إلى مكون React**
+
+```jsx
+import Image from 'next/legacy/image'
+import React from 'react'
+
+const Container = React.forwardRef((props, ref) => {
+  return (
+    <div ref={ref} style={{ overflowX: 'scroll', width: '500px' }}>
+      {props.children}
+    </div>
+  )
+})
+
+const Example = () => {
+  const lazyRoot = React.useRef(null)
+
+  return (
+    <Container ref={lazyRoot}>
+      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
+      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
+    </Container>
+  )
+}
+```
+
+[تعلم المزيد](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)
+
+### غير مُحسَّن (unoptimized)
+
+عندما يكون `true`، سيتم تقديم الصورة المصدر كما هي دون تغيير الجودة، الحجم، أو التنسيق. القيمة الافتراضية هي `false`.
+
+```js
+import Image from 'next/image'
+
+const UnoptimizedImage = (props) => {
+  return <Image {...props} unoptimized />
+}
+```
+
+بدءًا من Next.js 12.3.0، يمكن تعيين هذا الخيار لجميع الصور عن طريق تحديث ملف `next.config.js` بالإعداد التالي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    unoptimized: true,
+  },
+}
+```
+
+## خصائص أخرى
+
+سيتم تمرير جميع الخصائص الأخرى في مكون `<Image />` إلى عنصر `img` الأساسي باستثناء ما يلي:
+
+- `srcSet`. استخدم [أحجام الأجهزة (Device Sizes)](#device-sizes) بدلاً من ذلك.
+- `ref`. استخدم [`onLoadingComplete`](#onloadingcomplete) بدلاً من ذلك.
+- `decoding`. دائمًا ما تكون قيمته `"async"`.
+
+## خيارات التكوين
+
+### أنماط بعيدة (Remote Patterns)
+
+لحماية تطبيقك من المستخدمين الضارين، يلزم التكوين لاستخدام الصور الخارجية. هذا يضمن أن الصور الخارجية من حسابك فقط هي التي يمكن تقديمها من واجهة برمجة تطبيقات تحسين الصور في Next.js. يمكن تكوين هذه الصور الخارجية باستخدام خاصية `remotePatterns` في ملف `next.config.js` كما يلي:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'example.com',
+        port: '',
+        pathname: '/account123/**',
+        search: '',
+      },
+    ],
+  },
+}
+```
+
+> **معلومة مفيدة**: المثال أعلاه يضمن أن خاصية `src` في `next/legacy/image` يجب أن تبدأ بـ `https://example.com/account123/` ويجب ألا تحتوي على سلسلة استعلام. أي بروتوكول آخر، أو اسم مضيف، أو منفذ، أو مسار غير متطابق سيؤدي إلى استجابة 400 Bad Request.
+
+فيما يلي مثال لخاصية `remotePatterns` في ملف `next.config.js` باستخدام نمط حرف البدل `*` في `hostname`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.example.com',
+        port: '',
+        search: '',
+      },
+    ],
+  },
+}
+```
+
+> **معلومة مفيدة**: المثال أعلاه يضمن أن خاصية `src` في `next/legacy/image` يجب أن تبدأ بـ `https://img1.example.com` أو `https://me.avatar.example.com` أو أي عدد من النطاقات الفرعية. لا يمكن أن يحتوي على منفذ أو سلسلة استعلام. أي بروتوكول آخر أو اسم مضيف غير متطابق سيؤدي إلى استجابة 400 Bad Request.
+
+يمكن استخدام أنماط حرف البدل لكل من `pathname` و `hostname` ولها الصيغة التالية:
+
+- `*` تطابق مقطع مسار واحد أو نطاق فرعي
+- `**` تطابق أي عدد من مقاطع المسار في النهاية أو النطاقات الفرعية في البداية
+
+صيغة `**` لا تعمل في منتصف النمط.
+
+> **معلومة مفيدة**: عند حذف `protocol`، `port`، `pathname`، أو `search` فإن حرف البدل `**` يكون ضمنيًا. لا يُنصح بذلك لأنه قد يسمح لمستخدمين ضارين بتحسين عناوين URL لم تقصدها.
+
+فيما يلي مثال لخاصية `remotePatterns` في ملف `next.config.js` باستخدام `search`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'assets.example.com',
+        search: '?v=1727111025337',
+      },
+    ],
+  },
+}
+```
+
+> **معلومة مفيدة**: المثال أعلاه يضمن أن خاصية `src` في `next/legacy/image` يجب أن تبدأ بـ `https://assets.example.com` ويجب أن تحتوي على سلسلة الاستعلام المحددة `?v=1727111025337`. أي بروتوكول آخر أو سلسلة استعلام سيؤدي إلى استجابة 400 Bad Request.
+
+### النطاقات (Domains)
+
+> **تحذير**: أصبحت هذه الخاصية قديمة بدءًا من Next.js 14 لصالح [`remotePatterns`](#remote-patterns) الأكثر صرامة لحماية تطبيقك من المستخدمين الضارين. استخدم `domains` فقط إذا كنت تملك كل المحتوى المقدم من النطاق.
+
+على غرار [`remotePatterns`](#remote-patterns)، يمكن استخدام تكوين `domains` لتوفير قائمة بأسماء المضيفين المسموح بها للصور الخارجية.
+
+ومع ذلك، لا يدعم تكوين `domains` مطابقة أنماط حرف البدل ولا يمكنه تقييد البروتوكول أو المنفذ أو المسار.
+
+فيما يلي مثال لخاصية `domains` في ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    domains: ['assets.acme.com'],
+  },
+}
+```
+
+### تكوين المحمل (Loader Configuration)
+
+إذا كنت ترغب في استخدام موفر سحابي لتحسين الصور بدلاً من استخدام واجهة برمجة تطبيقات تحسين الصور المضمنة في Next.js، يمكنك تكوين `loader` و `path` في ملف `next.config.js`. هذا يسمح لك باستخدام عناوين URL نسبية لخاصية [`src`](#src) للصورة وتوليد عنوان URL المطلق الصحيح لموفرك تلقائيًا.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    loader: 'imgix',
+    path: 'https://example.com/myaccount/',
+  },
+}
+```
+
+### المحملات المضمنة (Built-in Loaders)
+
+يتم تضمين موفري تحسين الصور السحابيين التاليين:
+
+- الافتراضي: يعمل تلقائيًا مع `next dev`، `next start`، أو خادم مخصص
+- [Vercel](https://vercel.com): يعمل تلقائيًا عند النشر على Vercel، لا حاجة للتكوين. [معرفة المزيد](https://vercel.com/docs/concepts/image-optimization?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)
+- [Imgix](https://www.imgix.com): `loader: 'imgix'`
+- [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
+- [Akamai](https://www.akamai.com): `loader: 'akamai'`
+- مخصص: `loader: 'custom'` استخدم موفر سحابي مخصص عن طريق تنفيذ خاصية [`loader`](#loader) في مكون `next/legacy/image`
+
+إذا كنت بحاجة إلى موفر آخر، يمكنك استخدام خاصية [`loader`](#loader) مع `next/legacy/image`.
+
+> لا يمكن تحسين الصور في وقت البناء باستخدام [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports)، فقط عند الطلب. لاستخدام `next/legacy/image` مع `output: 'export'`، ستحتاج إلى استخدام محمل مختلف عن الافتراضي. [اقرأ المزيد في المناقشة.](https://github.com/vercel/next.js/discussions/19065)
+
+> يستخدم المحمل الافتراضي لمكون `next/legacy/image` [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) لأنه سريع التثبيت ومناسب لبيئة التطوير. عند استخدام `next start` في بيئة الإنتاج، يوصى بشدة بتثبيت [`sharp`](https://www.npmjs.com/package/sharp) عن طريق تشغيل `npm i sharp` في دليل مشروعك. هذا ليس ضروريًا لنشرات Vercel، حيث يتم تثبيت `sharp` تلقائيًا.
+
+## متقدم
+
+التكوين التالي مخصص لحالات الاستخدام المتقدمة وعادةً لا يكون ضروريًا. إذا اخترت تكوين الخصائص أدناه، فستتجاوز أي تغييرات على الإعدادات الافتراضية لـ Next.js في التحديثات المستقبلية.
+
+### أحجام الأجهزة (Device Sizes)
+
+إذا كنت تعرف أبعاد الأجهزة المتوقعة لمستخدميك، يمكنك تحديد قائمة بنقاط توقف عرض الجهاز باستخدام خاصية `deviceSizes` في `next.config.js`. تُستخدم هذه الأبعاد عندما يستخدم مكون `next/legacy/image` `layout="responsive"` أو `layout="fill"` لضمان تقديم الصورة الصحيحة لجهاز المستخدم.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي التالي.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  },
+}
+```
+
+### أحجام الصور (Image Sizes)
+
+يمكنك تحديد قائمة بعروض الصور باستخدام خاصية `images.imageSizes` في ملف `next.config.js`. يتم دمج هذه العروض مع مصفوفة [أحجام الأجهزة](#device-sizes) لتشكيل المصفوفة الكاملة للأحجام المستخدمة لإنشاء [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) للصور.
+
+السبب في وجود قائمتين منفصلتين هو أن `imageSizes` تُستخدم فقط للصور التي توفر خاصية [`sizes`](#sizes)، مما يشير إلى أن الصورة أصغر من العرض الكامل للشاشة. **لذلك، يجب أن تكون جميع الأحجام في `imageSizes` أصغر من أصغر حجم في `deviceSizes`.**
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي التالي.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+}
+```
+
+### التنسيقات المقبولة (Acceptable Formats)
+
+ستكتشف واجهة برمجة تطبيقات [تحسين الصور](#loader-configuration) الافتراضية تلقائيًا تنسيقات الصور المدعومة من المتصفح عبر رأس `Accept` للطلب.
+
+إذا تطابق رأس `Accept` مع أكثر من تنسيق واحد من التنسيقات المكونة، يتم استخدام أول تطابق في المصفوفة. لذلك، ترتيب المصفوفة مهم. إذا لم يكن هناك تطابق (أو إذا كانت الصورة المصدر [متحركة](#animated-images))، ستعود واجهة برمجة تطبيقات تحسين الصور إلى تنسيق الصورة الأصلي.
+
+إذا لم يتم توفير أي تكوين، يتم استخدام الإعداد الافتراضي التالي.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/webp'],
+  },
+}
+```
+
+يمكنك تمكين دعم AVIF بالتكوين التالي.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+  },
+}
+```
+
+> **معلومة مفيدة**: عادةً ما يستغرق ترميز AVIF وقتًا أطول بنسبة 20٪ ولكنه يضغط بنسبة 20٪ أصغر مقارنة بـ WebP. هذا يعني أن المرة الأولى التي يتم فيها طلب صورة، ستكون عادةً أبطأ ثم الطلبات اللاحقة التي يتم تخزينها مؤقتًا ستكون أسرع.
+
+## سلوك التخزين المؤقت (Caching Behavior)
+
+يصف ما يلي خوارزمية التخزين المؤقت للمحمل [الافتراضي](#loader). بالنسبة لجميع المحملات الأخرى، يرجى الرجوع إلى وثائق موفر السحابة الخاص بك.
+
+يتم تحسين الصور ديناميكيًا عند الطلب وتخزينها في دليل `<distDir>/cache/images`. سيتم تقديم ملف الصورة المحسن للطلبات اللاحقة حتى انتهاء الصلاحية. عند إجراء طلب يتطابق مع ملف مخزن مؤقتًا ولكن منتهي الصلاحية، يتم تقديم الصورة المنتهية الصلاحية على الفور. ثم يتم تحسين الصورة مرة أخرى في الخلفية (يُسمى أيضًا إعادة التحقق) وحفظها في ذاكرة التخزين المؤقت مع تاريخ انتهاء الصلاحية الجديد.
+
+يمكن تحديد حالة التخزين المؤقت للصورة عن طريق قراءة قيمة رأس الاستجابة `x-nextjs-cache` (`x-vercel-cache` عند النشر على Vercel). القيم الممكنة هي كما يلي:
+
+- `MISS` - المسار غير موجود في ذاكرة التخزين المؤقت (يحدث مرة واحدة على الأكثر، في الزيارة الأولى)
+- `STALE` - المسار موجود في ذاكرة التخزين المؤقت ولكن تجاوز وقت إعادة التحقق لذلك سيتم تحديثه في الخلفية
+- `HIT` - المسار موجود في ذاكرة التخزين المؤقت ولم يتجاوز وقت إعادة التحقق
+
+يتم تعريف انتهاء الصلاحية (أو بالأحرى الحد الأقصى للعمر) إما عن طريق تكوين [`minimumCacheTTL`](#minimum-cache-ttl) أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر. على وجه التحديد، يتم استخدام قيمة `max-age` لرأس `Cache-Control`. إذا تم العثور على كل من `s-maxage` و `max-age`، فإن `s-maxage` يكون مفضلًا. يتم أيضًا تمرير `max-age` إلى أي عملاء لاحقين بما في ذلك شبكات CDN والمتصفحات.
+
+- يمكنك تكوين [`minimumCacheTTL`](#minimum-cache-ttl) لزيادة مدة التخزين المؤقت عندما لا يتضمن رأس `Cache-Control` للصورة الأصلية أو كانت القيمة منخفضة جدًا.
+- يمكنك تكوين [`deviceSizes`](#device-sizes) و [`imageSizes`](#image-sizes) لتقليل العدد الإجمالي للصور الممكن إنشاؤها.
+- يمكنك تكوين [التنسيقات](#acceptable-formats) لتعطيل تنسيقات متعددة لصالح تنسيق صورة واحد.
+
+### الحد الأدنى لوقت التخزين المؤقت (Minimum Cache TTL)
+
+يمكنك تكوين وقت البقاء (TTL) بالثواني للصور المحسنة المخزنة مؤقتًا. في كثير من الحالات، من الأفضل استخدام [استيراد صورة ثابت (Static Image Import)](/docs/pages/building-your-application/optimizing/images#local-images) والذي سيقوم تلقائيًا بتجزئة محتويات الملف وتخزين الصورة مؤقتًا إلى الأبد مع رأس `Cache-Control` بقيمة `immutable`.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    minimumCacheTTL: 60,
+  },
+}
+```
+
+يتم تعريف انتهاء الصلاحية (أو الحد الأقصى للعمر) للصورة المحسنة إما عن طريق `minimumCacheTTL` أو رأس `Cache-Control` للصورة الأصلية، أيهما أكبر.
+
+إذا كنت بحاجة إلى تغيير سلوك التخزين المؤقت لكل صورة، يمكنك تكوين [`headers`](/docs/pages/api-reference/next-config-js/headers) لتعيين رأس `Cache-Control` على الصورة الأصلية (مثل `/some-asset.jpg`، وليس `/_next/image` نفسه).
+
+لا توجد آلية لإبطال التخزين المؤقت في هذا الوقت، لذا من الأفضل الحفاظ على `minimumCacheTTL` منخفضًا. وإلا قد تحتاج إلى تغيير خاصية [`src`](#src) يدويًا أو حذف `<distDir>/cache/images`.
+
+### تعطيل الاستيراد الثابت (Disable Static Imports)
+
+السلوك الافتراضي يسمح لك باستيراد ملفات ثابتة مثل `import icon from './icon.png'` ثم تمرير ذلك إلى خاصية `src`.
+
+في بعض الحالات، قد ترغب في تعطيل هذه الميزة إذا كانت تتعارض مع ملحقات أخرى تتوقع أن يكون الاستيراد مختلفًا.
+
+يمكنك تعطيل استيراد الصور الثابتة داخل ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
+### السماح بصيغة SVG بشكل خطير (Dangerously Allow SVG)
+
+لا يقوم المحمل [الافتراضي](#loader) بتحسين صور SVG لعدة أسباب. أولاً، SVG هو تنسيق متجه مما يعني أنه يمكن تغيير حجمه دون فقدان الجودة. ثانيًا، يحتوي SVG على العديد من الميزات نفسها مثل HTML/CSS، مما قد يؤدي إلى ثغرات أمنية بدون رؤوس [سياسة أمان المحتوى (CSP)](/docs/app/api-reference/next-config-js/headers#content-security-policy) المناسبة.
+
+لذلك، نوصي باستخدام خاصية [`unoptimized`](#unoptimized) عندما تكون خاصية [`src`](#src) معروفة بأنها SVG. يحدث هذا تلقائيًا عندما ينتهي `src` بـ `".svg"`.
+
+ومع ذلك، إذا كنت بحاجة إلى تقديم صور SVG باستخدام واجهة برمجة تطبيقات تحسين الصور الافتراضية، يمكنك تعيين `dangerouslyAllowSVG` داخل ملف `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    dangerouslyAllowSVG: true,
+    contentDispositionType: 'attachment',
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
+}
+```
+
+بالإضافة إلى ذلك، يوصى بشدة أيضًا بتعيين `contentDispositionType` لإجبار المتصفح على تنزيل الصورة، وكذلك `contentSecurityPolicy` لمنع تنفيذ البرامج النصية المضمنة في الصورة.
+
+### الصور المتحركة (Animated Images)
+
+سيقوم المحمل [الافتراضي](#loader) تلقائيًا بتجاوز تحسين الصور للصور المتحركة وتقديم الصورة كما هي.
+
+الكشف التلقائي عن الملفات المتحركة هو أفضل جهد ويدعم GIF وAPNG وWebP. إذا كنت ترغب في تجاوز تحسين الصور بشكل صريح لصورة متحركة معينة، استخدم خاصية [unoptimized](#unoptimized).
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                     |
+| --------- | ------------------------------------------- |
+| `v13.0.0` | تمت إعادة تسمية `next/image` إلى `next/legacy/image` |
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/image.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/image.mdx
new file mode 100644
index 00000000..5bf97f61
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/image.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:29.163Z
+title: مكون <Image>
+description: تحسين الصور في تطبيق Next.js الخاص بك باستخدام مكون `next/image` المدمج.
+source: app/api-reference/components/image
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/index.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/index.mdx
new file mode 100644
index 00000000..aa07d187
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:23.289Z
+title: المكونات
+description: مرجع API للمكونات المدمجة في Next.js باستخدام موجه الصفحات (Pages Router).
+source: app/api-reference/components
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/link.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/link.mdx
new file mode 100644
index 00000000..c08192ef
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/link.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:14.350Z
+title: مكون <Link>
+description: مرجع API لمكون <Link>.
+source: app/api-reference/components/link
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/script.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/script.mdx
new file mode 100644
index 00000000..92808a09
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/01-components/script.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:05.499Z
+title: <Script>
+description: تحسين البرامج النصية لجهات خارجية في تطبيق Next.js الخاص بك باستخدام مكون `next/script` المدمج.
+source: app/api-reference/components/script
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-initial-props.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-initial-props.mdx
new file mode 100644
index 00000000..b35efe94
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-initial-props.mdx
@@ -0,0 +1,60 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:38.858Z
+title: getInitialProps
+description: جلب بيانات ديناميكية من الخادم لمكون React الخاص بك باستخدام getInitialProps.
+---
+
+> **معلومة مفيدة**: `getInitialProps` هو واجهة برمجة تطبيقات قديمة. نوصي باستخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) بدلاً منها.
+
+`getInitialProps` هي دالة `async` يمكن إضافتها إلى مكون React المصدر الافتراضي للصفحة. ستعمل على جانب الخادم وعلى جانب العميل أثناء انتقالات الصفحة. سيتم تمرير نتيجة الدالة إلى مكون React كـ `props`.
+
+```tsx filename="pages/index.tsx" switcher
+import { NextPageContext } from 'next'
+
+Page.getInitialProps = async (ctx: NextPageContext) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const json = await res.json()
+  return { stars: json.stargazers_count }
+}
+
+export default function Page({ stars }: { stars: number }) {
+  return stars
+}
+```
+
+```jsx filename="pages/index.js" switcher
+Page.getInitialProps = async (ctx) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const json = await res.json()
+  return { stars: json.stargazers_count }
+}
+
+export default function Page({ stars }) {
+  return stars
+}
+```
+
+> **معلومة مفيدة**:
+>
+> - يتم تسلسل البيانات المرجعة من `getInitialProps` عند عرض الخادم. تأكد من أن الكائن المرتجع من `getInitialProps` هو كائن عادي `Object`، وليس باستخدام `Date` أو `Map` أو `Set`.
+> - بالنسبة لتحميل الصفحة الأولي، ستعمل `getInitialProps` على الخادم فقط. ثم ستعمل `getInitialProps` أيضًا على العميل عند الانتقال إلى مسار مختلف باستخدام مكون [`next/link`](/docs/pages/api-reference/components/link) أو باستخدام [`next/router`](/docs/pages/api-reference/functions/use-router).
+> - إذا تم استخدام `getInitialProps` في ملف `_app.js` مخصص، وكانت الصفحة التي يتم الانتقال إليها تستخدم `getServerSideProps`، فستعمل `getInitialProps` أيضًا على الخادم.
+
+## كائن Context
+
+تستقبل `getInitialProps` وسيطًا واحدًا يسمى `context`، وهو كائن يحتوي على الخصائص التالية:
+
+| الاسم       | الوصف                                                                                           |
+| ---------- | ----------------------------------------------------------------------------------------------------- |
+| `pathname` | المسار الحالي، مسار الصفحة في `/pages`                                                       |
+| `query`    | سلسلة استعلام URL، محللة ككائن                                                          |
+| `asPath`   | `String` للمسار الفعلي (بما في ذلك الاستعلام) المعروض في المتصفح                                |
+| `req`      | [كائن طلب HTTP](https://nodejs.org/api/http.html#http_class_http_incomingmessage) (على الخادم فقط) |
+| `res`      | [كائن استجابة HTTP](https://nodejs.org/api/http.html#http_class_http_serverresponse) (على الخادم فقط) |
+| `err`      | كائن خطأ في حالة حدوث أي خطأ أثناء العرض                                         |
+
+## محاذير
+
+- يمكن استخدام `getInitialProps` فقط في ملفات المستوى الأعلى في `pages/`، وليس في المكونات المتداخلة. لجلب بيانات متداخلة على مستوى المكون، يمكنك استكشاف [موجه التطبيق (App Router)](/docs/app/building-your-application/data-fetching).
+- بغض النظر عما إذا كان مسارك ثابتًا أو ديناميكيًا، يمكن فحص أي بيانات مرجعة من `getInitialProps` كـ `props` على جانب العميل في HTML الأولي. هذا للسماح للصفحة بأن يتم [ترطيبها (hydrate)](https://react.dev/reference/react-dom/hydrate) بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في `props`.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-server-side-props.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-server-side-props.mdx
new file mode 100644
index 00000000..632c1fed
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-server-side-props.mdx
@@ -0,0 +1,142 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:08.852Z
+title: getServerSideProps
+description: مرجع API لـ `getServerSideProps`. تعلم كيفية جلب البيانات في كل طلب باستخدام Next.js.
+---
+
+عند تصدير دالة تسمى `getServerSideProps` (العرض من جانب الخادم - SSR) من صفحة، سيقوم Next.js ببث هذه الصفحة مسبقًا في كل طلب باستخدام البيانات التي تُرجعها `getServerSideProps`. هذا مفيد إذا كنت تريد جلب بيانات تتغير بشكل متكرر، وتريد تحديث الصفحة لعرض أحدث البيانات.
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getServerSideProps = (async () => {
+  // جلب البيانات من API خارجي
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo: Repo = await res.json()
+  // تمرير البيانات إلى الصفحة عبر props
+  return { props: { repo } }
+}) satisfies GetServerSideProps<{ repo: Repo }>
+
+export default function Page({
+  repo,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getServerSideProps() {
+  // جلب البيانات من API خارجي
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  // تمرير البيانات إلى الصفحة عبر props
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return (
+    <main>
+      <p>{repo.stargazers_count}</p>
+    </main>
+  )
+}
+```
+
+يمكنك استيراد وحدات في النطاق العلوي لاستخدامها في `getServerSideProps`. الوحدات المستوردة لن **تُضمّن لجانب العميل**. هذا يعني أنه يمكنك كتابة **كود خاص بالخادم مباشرة في `getServerSideProps`**، بما في ذلك جلب البيانات من قاعدة البيانات الخاصة بك.
+
+## معامل Context
+
+معامل `context` هو كائن يحتوي على المفاتيح التالية:
+
+| الاسم            | الوصف                                                                                                                                                                                                           |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `params`        | إذا كانت هذه الصفحة تستخدم [مسار ديناميكي](/docs/pages/building-your-application/routing/dynamic-routes)، فإن `params` يحتوي على معلمات المسار. إذا كان اسم الصفحة `[id].js`، فإن `params` سيبدو مثل `{ id: ... }`. |
+| `req`           | [كائن `HTTP` IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage)، مع خاصية إضافية `cookies`، وهي كائن بمفاتيح نصية تقابل قيم نصية للكوكيز.    |
+| `res`           | [كائن استجابة `HTTP`](https://nodejs.org/api/http.html#http_class_http_serverresponse).                                                                                                                        |
+| `query`         | كائن يمثل سلسلة الاستعلام، بما في ذلك معلمات المسار الديناميكي.                                                                                                                                          |
+| `preview`       | (مهمل لصالح `draftMode`) `preview` يكون `true` إذا كانت الصفحة في [وضع المعاينة](/docs/pages/building-your-application/configuring/preview-mode) و`false` بخلاف ذلك.                                          |
+| `previewData`   | (مهمل لصالح `draftMode`) بيانات [المعاينة](/docs/pages/building-your-application/configuring/preview-mode) المحددة بواسطة `setPreviewData`.                                                                              |
+| `draftMode`     | `draftMode` يكون `true` إذا كانت الصفحة في [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode) و`false` بخلاف ذلك.                                                                         |
+| `resolvedUrl`   | نسخة طبيعية من `URL` الطلب التي تزيل بادئة `_next/data` للانتقالات من جانب العميل وتتضمن قيم الاستعلام الأصلية.                                                                              |
+| `locale`        | يحتوي على اللغة النشطة (إذا كانت ممكّنة).                                                                                                                                                                              |
+| `locales`       | يحتوي على جميع اللغات المدعومة (إذا كانت ممكّنة).                                                                                                                                                                          |
+| `defaultLocale` | يحتوي على اللغة الافتراضية المكونة (إذا كانت ممكّنة).                                                                                                                                                                  |
+
+## قيم إرجاع getServerSideProps
+
+يجب أن تُرجع دالة `getServerSideProps` كائنًا يحتوي على **أي من الخصائص التالية**:
+
+### `props`
+
+كائن `props` هو زوج مفتاح-قيمة، حيث يتم استقبال كل قيمة من قبل مكون الصفحة. يجب أن يكون [كائنًا قابلاً للتسلسل](https://developer.mozilla.org/docs/Glossary/Serialization) بحيث يمكن تسلسل أي props يتم تمريرها باستخدام [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+```jsx
+export async function getServerSideProps(context) {
+  return {
+    props: { message: `Next.js رائع` }, // سيتم تمريرها إلى مكون الصفحة كـ props
+  }
+}
+```
+
+### `notFound`
+
+القيمة المنطقية `notFound` تسمح للصفحة بإرجاع حالة `404` و[صفحة 404](/docs/pages/building-your-application/routing/custom-error#404-page). مع `notFound: true`، سترجع الصفحة `404` حتى لو كانت هناك صفحة تم إنشاؤها بنجاح من قبل. هذا مخصص لدعم حالات الاستخدام مثل المحتوى الذي ينشئه المستخدم ويتم إزالته من قبل المؤلف.
+
+```js
+export async function getServerSideProps(context) {
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: { data }, // سيتم تمريرها إلى مكون الصفحة كـ props
+  }
+}
+```
+
+### `redirect`
+
+كائن `redirect` يسمح بإعادة التوجيه إلى موارد داخلية وخارجية. يجب أن يتطابق مع الشكل `{ destination: string, permanent: boolean }`. في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء `HTTP` القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية `statusCode` بدلاً من خاصية `permanent`، ولكن ليس كلاهما.
+
+```js
+export async function getServerSideProps(context) {
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: {}, // سيتم تمريرها إلى مكون الصفحة كـ props
+  }
+}
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                     |
+| --------- | ----------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | [موجه التطبيق](/docs/app/building-your-application/data-fetching) أصبح الآن مستقرًا مع تبسيط جلب البيانات |
+| `v10.0.0` | تمت إضافة خيارات `locale`، `locales`، `defaultLocale`، و `notFound`.                                         |
+| `v9.3.0`  | تم تقديم `getServerSideProps`.                                                                            |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-static-paths.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-static-paths.mdx
new file mode 100644
index 00000000..d6d3e35c
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-static-paths.mdx
@@ -0,0 +1,261 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:22:23.764Z
+title: getStaticPaths
+description: مرجع API لـ `getStaticPaths`. تعلم كيفية جلب البيانات وإنشاء صفحات ثابتة باستخدام `getStaticPaths`.
+---
+
+عند تصدير دالة تسمى `getStaticPaths` من صفحة تستخدم [المسارات الديناميكية (Dynamic Routes)](/docs/pages/building-your-application/routing/dynamic-routes)، سيقوم Next.js بعرض جميع المسارات المحددة بواسطة `getStaticPaths` مسبقًا بشكل ثابت.
+
+```tsx filename="pages/repo/[name].tsx" switcher
+import type {
+  InferGetStaticPropsType,
+  GetStaticProps,
+  GetStaticPaths,
+} from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticPaths = (async () => {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/repo/[name].js" switcher
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: {
+          name: 'next.js',
+        },
+      }, // انظر قسم "paths" أدناه
+    ],
+    fallback: true, // false أو "blocking"
+  }
+}
+
+export async function getStaticProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+## قيم إرجاع getStaticPaths
+
+يجب أن ترجع الدالة `getStaticPaths` كائنًا يحتوي على الخصائص **المطلوبة** التالية:
+
+### `paths`
+
+يحدد مفتاح `paths` المسارات التي سيتم عرضها مسبقًا. على سبيل المثال، لنفترض أن لديك صفحة تستخدم [المسارات الديناميكية (Dynamic Routes)](/docs/pages/building-your-application/routing/dynamic-routes) باسم `pages/posts/[id].js`. إذا قمت بتصدير `getStaticPaths` من هذه الصفحة وأعدت ما يلي لـ `paths`:
+
+```js
+return {
+  paths: [
+    { params: { id: '1' }},
+    {
+      params: { id: '2' },
+      // مع تكوين i18n يمكن إرجاع اللغة للمسار أيضًا
+      locale: "en",
+    },
+  ],
+  fallback: ...
+}
+```
+
+عندها، سيقوم Next.js بإنشاء `/posts/1` و `/posts/2` بشكل ثابت أثناء `next build` باستخدام مكون الصفحة في `pages/posts/[id].js`.
+
+يجب أن تتطابق قيمة كل كائن `params` مع المعلمات المستخدمة في اسم الصفحة:
+
+- إذا كان اسم الصفحة هو `pages/posts/[postId]/[commentId]`، فيجب أن يحتوي `params` على `postId` و `commentId`.
+- إذا كان اسم الصفحة يستخدم [مسارات التقاط الكل (catch-all routes)](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) مثل `pages/[...slug]`، فيجب أن يحتوي `params` على `slug` (وهو مصفوفة). إذا كانت هذه المصفوفة هي `['hello', 'world']`، فسيقوم Next.js بإنشاء الصفحة بشكل ثابت في `/hello/world`.
+- إذا كانت الصفحة تستخدم [مسار التقاط اختياري (optional catch-all route)](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments)، استخدم `null` أو `[]` أو `undefined` أو `false` لعرض المسار الجذري. على سبيل المثال، إذا قمت بتوفير `slug: false` لـ `pages/[[...slug]]`، فسيقوم Next.js بإنشاء الصفحة `/` بشكل ثابت.
+
+إن سلاسل `params` **حساسة لحالة الأحرف** ومن الأفضل توحيدها لضمان إنشاء المسارات بشكل صحيح. على سبيل المثال، إذا تم إرجاع `WoRLD` لمعلمة، فسوف تتطابق فقط إذا كان `WoRLD` هو المسار الذي تمت زيارته بالفعل، وليس `world` أو `World`.
+
+بشكل منفصل عن كائن `params`، يمكن إرجاع حقل `locale` عند [تكوين i18n](/docs/pages/building-your-application/routing/internationalization)، والذي يحدد اللغة للمسار الذي يتم إنشاؤه.
+
+### `fallback: false`
+
+إذا كانت `fallback` هي `false`، فإن أي مسارات لم يتم إرجاعها بواسطة `getStaticPaths` ستؤدي إلى **صفحة 404**.
+
+عند تشغيل `next build`، سيتحقق Next.js مما إذا كانت `getStaticPaths` قد أعادت `fallback: false`، ثم سيقوم ببناء **فقط** المسارات التي تم إرجاعها بواسطة `getStaticPaths`. هذا الخيار مفيد إذا كان لديك عدد صغير من المسارات لإنشائها، أو إذا لم تتم إضافة بيانات صفحة جديدة بشكل متكرر. إذا وجدت أنك بحاجة إلى إضافة المزيد من المسارات، وكان لديك `fallback: false`، فسوف تحتاج إلى تشغيل `next build` مرة أخرى حتى يمكن إنشاء المسارات الجديدة.
+
+يقدم المثال التالي عرضًا مسبقًا لمقالة مدونة واحدة لكل صفحة تسمى `pages/posts/[id].js`. سيتم جلب قائمة مقالات المدونة من نظام إدارة المحتوى (CMS) وإعادتها بواسطة `getStaticPaths`. ثم، لكل صفحة، يتم جلب بيانات المقالة من نظام إدارة المحتوى باستخدام [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props).
+
+```jsx filename="pages/posts/[id].js"
+function Post({ post }) {
+  // عرض المقالة...
+}
+
+// يتم استدعاء هذه الدالة أثناء وقت البناء
+export async function getStaticPaths() {
+  // استدعاء نقطة نهاية API خارجية للحصول على المقالات
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  // الحصول على المسارات التي نريد عرضها مسبقًا بناءً على المقالات
+  const paths = posts.map((post) => ({
+    params: { id: post.id },
+  }))
+
+  // سنقوم بعرض هذه المسارات مسبقًا فقط أثناء وقت البناء.
+  // { fallback: false } تعني أن المسارات الأخرى يجب أن تعرض 404.
+  return { paths, fallback: false }
+}
+
+// يتم استدعاء هذا أيضًا أثناء وقت البناء
+export async function getStaticProps({ params }) {
+  // يحتوي params على معرّف المقالة `id`.
+  // إذا كان المسار مثل /posts/1، فإن params.id هو 1
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  // تمرير بيانات المقالة إلى الصفحة عبر props
+  return { props: { post } }
+}
+
+export default Post
+```
+
+### `fallback: true`
+
+<details>
+  <summary>أمثلة</summary>
+
+- [التوليد الثابت لعدد كبير من الصفحات](https://static-tweet.vercel.app)
+
+</details>
+
+إذا كانت `fallback` هي `true`، فإن سلوك `getStaticProps` يتغير بالطرق التالية:
+
+- سيتم عرض المسارات التي تم إرجاعها من `getStaticPaths` إلى `HTML` أثناء وقت البناء بواسطة `getStaticProps`.
+- لن تؤدي المسارات التي لم يتم إنشاؤها أثناء وقت البناء إلى صفحة 404. بدلاً من ذلك، سيقدم Next.js نسخة ["fallback"](#fallback-pages) من الصفحة عند الطلب الأول لمثل هذا المسار. لن يتم تقديم fallback لمحركات البحث مثل Google، وسيتصرف المسار كما في [`fallback: 'blocking'`](#fallback-blocking).
+- عند التنقل إلى صفحة بها `fallback: true` عبر `next/link` أو `next/router` (من جانب العميل)، لن يقدم Next.js fallback وسيتصرف الصفحة كما في [`fallback: 'blocking'`](#fallback-blocking).
+- في الخلفية، سيقوم Next.js بإنشاء `HTML` و `JSON` للمسار المطلوب بشكل ثابت. يشمل ذلك تشغيل `getStaticProps`.
+- عند الانتهاء، يتلقى المتصفح `JSON` للمسار الذي تم إنشاؤه. سيتم استخدام هذا لعرض الصفحة تلقائيًا مع الـ props المطلوبة. من وجهة نظر المستخدم، ستنتقل الصفحة من صفحة fallback إلى الصفحة الكاملة.
+- في نفس الوقت، يضيف Next.js هذا المسار إلى قائمة الصفحات التي تم عرضها مسبقًا. سيتم تقديم الصفحة التي تم إنشاؤها للطلبات اللاحقة لنفس المسار، مثل الصفحات الأخرى التي تم عرضها مسبقًا أثناء وقت البناء.
+
+> **معلومة جيدة**: لا يتم دعم `fallback: true` عند استخدام [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports).
+
+#### متى يكون `fallback: true` مفيدًا؟
+
+`fallback: true` مفيد إذا كان تطبيقك يحتوي على عدد كبير جدًا من الصفحات الثابتة التي تعتمد على البيانات (مثل موقع تجارة إلكترونية كبير جدًا). إذا كنت تريد عرض جميع صفحات المنتجات مسبقًا، فسيستغرق البناء وقتًا طويلاً جدًا.
+
+بدلاً من ذلك، يمكنك إنشاء مجموعة فرعية صغيرة من الصفحات بشكل ثابت واستخدام `fallback: true` للباقي. عندما يطلب شخص ما صفحة لم يتم إنشاؤها بعد، سيرى المستخدم الصفحة مع مؤشر تحميل أو مكون هيكل عظمي.
+
+بعد وقت قصير، ينتهي `getStaticProps` وسيتم عرض الصفحة بالبيانات المطلوبة. من الآن فصاعدًا، سيحصل كل من يطلب نفس الصفحة على الصفحة التي تم عرضها مسبقًا بشكل ثابت.
+
+هذا يضمن أن المستخدمين يحصلون دائمًا على تجربة سريعة مع الحفاظ على أوقات بناء سريعة وفوائد التوليد الثابت.
+
+لن تقوم `fallback: true` بـ _تحديث_ الصفحات التي تم إنشاؤها، لذلك يمكنك الاطلاع على [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+
+### `fallback: 'blocking'`
+
+إذا كانت `fallback` هي `'blocking'`، فإن المسارات الجديدة التي لم يتم إرجاعها بواسطة `getStaticPaths` ستنتظر إنشاء `HTML`، مماثل لـ SSR (ولهذا السبب تسمى _blocking_)، ثم يتم تخزينها مؤقتًا للطلبات المستقبلية بحيث تحدث مرة واحدة فقط لكل مسار.
+
+سيتصرف `getStaticProps` كما يلي:
+
+- سيتم عرض المسارات التي تم إرجاعها من `getStaticPaths` إلى `HTML` أثناء وقت البناء بواسطة `getStaticProps`.
+- لن تؤدي المسارات التي لم يتم إنشاؤها أثناء وقت البناء إلى صفحة 404. بدلاً من ذلك، سيقوم Next.js بعمل SSR عند الطلب الأول وإرجاع `HTML` الذي تم إنشاؤه.
+- عند الانتهاء، يتلقى المتصفح `HTML` للمسار الذي تم إنشاؤه. من وجهة نظر المستخدم، سينتقل من "المتصفح يطلب الصفحة" إلى "تم تحميل الصفحة بالكامل". لا يوجد وميض لحالة التحميل/fallback.
+- في نفس الوقت، يضيف Next.js هذا المسار إلى قائمة الصفحات التي تم عرضها مسبقًا. سيتم تقديم الصفحة التي تم إنشاؤها للطلبات اللاحقة لنفس المسار، مثل الصفحات الأخرى التي تم عرضها مسبقًا أثناء وقت البناء.
+
+لن تقوم `fallback: 'blocking'` بـ _تحديث_ الصفحات التي تم إنشاؤها افتراضيًا. لتحديث الصفحات التي تم إنشاؤها، استخدم [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) بالتزامن مع `fallback: 'blocking'`.
+
+> **معلومة جيدة**: لا يتم دعم `fallback: 'blocking'` عند استخدام [`output: 'export'`](/docs/pages/building-your-application/deploying/static-exports).
+
+### صفحات Fallback
+
+في نسخة "fallback" من الصفحة:
+
+- سيكون props الصفحة فارغًا.
+- باستخدام [الموجه (router)](/docs/pages/api-reference/functions/use-router)، يمكنك الكشف عما إذا كان يتم عرض fallback، حيث سيكون `router.isFallback` `true`.
+
+يعرض المثال التالي استخدام `isFallback`:
+
+```jsx filename="pages/posts/[id].js"
+import { useRouter } from 'next/router'
+
+function Post({ post }) {
+  const router = useRouter()
+
+  // إذا لم يتم إنشاء الصفحة بعد، سيتم عرض هذا
+  // في البداية حتى ينتهي تشغيل getStaticProps()
+  if (router.isFallback) {
+    return <div>جار التحميل...</div>
+  }
+
+  // عرض المقالة...
+}
+
+// يتم استدعاء هذه الدالة أثناء وقت البناء
+export async function getStaticPaths() {
+  return {
+    // فقط `/posts/1` و `/posts/2` يتم إنشاؤها أثناء وقت البناء
+    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
+    // تمكين إنشاء صفحات إضافية بشكل ثابت
+    // على سبيل المثال: `/posts/3`
+    fallback: true,
+  }
+}
+
+// يتم استدعاء هذا أيضًا أثناء وقت البناء
+export async function getStaticProps({ params }) {
+  // يحتوي params على معرّف المقالة `id`.
+  // إذا كان المسار مثل /posts/1، فإن params.id هو 1
+  const res = await fetch(`https://.../posts/${params.id}`)
+  const post = await res.json()
+
+  // تمرير بيانات المقالة إلى الصفحة عبر props
+  return {
+    props: { post },
+    // إعادة إنشاء المقالة مرة واحدة كحد أقصى كل ثانية
+    // إذا جاء طلب
+    revalidate: 1,
+  }
+}
+
+export default Post
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                                                                     |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | أصبح [موجه التطبيق (App Router)](/docs/app/building-your-application/data-fetching) مستقرًا مع جلب بيانات مبسط، بما في ذلك [`generateStaticParams()`](/docs/app/api-reference/functions/generate-static-params) |
+| `v12.2.0` | أصبح [التجديد الثابت التدريجي عند الطلب (On-Demand Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) مستقرًا.                                          |
+| `v12.1.0` | تمت إضافة [التجديد الثابت التدريجي عند الطلب (On-Demand Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) (بيتا).                                       |
+| `v9.5.0`  | أصبح [التجديد الثابت التدريجي (Incremental Static Regeneration)](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) مستقرًا                                                                               |
+| `v9.3.0`  | تم تقديم `getStaticPaths`.                                                                                                                                                                                |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-static-props.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-static-props.mdx
new file mode 100644
index 00000000..1cbada0e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/get-static-props.mdx
@@ -0,0 +1,231 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:21:45.858Z
+title: getStaticProps
+description: مرجع API لـ `getStaticProps`. تعلم كيفية استخدام `getStaticProps` لإنشاء صفحات ثابتة مع Next.js.
+---
+
+تصدير دالة تسمى `getStaticProps` سيقوم بعرض الصفحة مسبقًا أثناء البناء باستخدام الخصائص (props) التي تُرجعها الدالة:
+
+```tsx filename="pages/index.tsx" switcher
+import type { InferGetStaticPropsType, GetStaticProps } from 'next'
+
+type Repo = {
+  name: string
+  stargazers_count: number
+}
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
+
+export default function Page({
+  repo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return repo.stargazers_count
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export async function getStaticProps() {
+  const res = await fetch('https://api.github.com/repos/vercel/next.js')
+  const repo = await res.json()
+  return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+  return repo.stargazers_count
+}
+```
+
+يمكنك استيراد الوحدات (modules) في النطاق العلوي لاستخدامها في `getStaticProps`. الوحدات المستوردة **لن يتم تضمينها لجانب العميل**. هذا يعني أنه يمكنك كتابة **كود جانب الخادم مباشرة في `getStaticProps`**، بما في ذلك جلب البيانات من قاعدة البيانات الخاصة بك.
+
+## معامل Context
+
+معامل `context` هو كائن يحتوي على المفاتيح التالية:
+
+| الاسم               | الوصف                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `params`           | يحتوي على معلمات المسار للصفحات التي تستخدم [المسارات الديناميكية](/docs/pages/building-your-application/routing/dynamic-routes). على سبيل المثال، إذا كان اسم الصفحة هو `[id].js`، فإن `params` سيبدو مثل `{ id: ... }`. يجب استخدام هذا مع `getStaticPaths`، والذي سنشرحه لاحقًا.                                                                                                                                              |
+| `preview`          | (مهمل لصالح `draftMode`) `preview` يكون `true` إذا كانت الصفحة في [وضع المعاينة](/docs/pages/building-your-application/configuring/preview-mode) و `false` بخلاف ذلك.                                                                                                                                                                                                                                                                      |
+| `previewData`      | (مهمل لصالح `draftMode`) بيانات [المعاينة](/docs/pages/building-your-application/configuring/preview-mode) المحددة بواسطة `setPreviewData`.                                                                                                                                                                                                                                                                                                          |
+| `draftMode`        | `draftMode` يكون `true` إذا كانت الصفحة في [وضع المسودة](/docs/pages/building-your-application/configuring/draft-mode) و `false` بخلاف ذلك.                                                                                                                                                                                                                                                                                                     |
+| `locale`           | يحتوي على اللغة النشطة (إذا كانت ممكّنة).                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `locales`          | يحتوي على جميع اللغات المدعومة (إذا كانت ممكّنة).                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `defaultLocale`    | يحتوي على اللغة الافتراضية المكونة (إذا كانت ممكّنة).                                                                                                                                                                                                                                                                                                                                                                                              |
+| `revalidateReason` | يقدم سببًا لاستدعاء الدالة. يمكن أن يكون أحد: "build" (يعمل أثناء البناء)، "stale" (انتهت فترة إعادة التحقق، أو يعمل في [وضع التطوير](/docs/pages/building-your-application/data-fetching/get-static-props#runs-on-every-request-in-development))، "on-demand" (يتم تشغيله عبر [إعادة التحقق عند الطلب](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)) |
+
+## قيم إرجاع getStaticProps
+
+يجب أن تُرجع دالة `getStaticProps` كائنًا يحتوي إما على `props`، `redirect`، أو `notFound` متبوعًا بخاصية اختيارية `revalidate`.
+
+### `props`
+
+كائن `props` هو زوج مفتاح-قيمة، حيث يتم استقبال كل قيمة بواسطة مكون الصفحة. يجب أن يكون [كائنًا قابلاً للتسلسل](https://developer.mozilla.org/docs/Glossary/Serialization) بحيث يمكن تسلسل أي خصائص تمريرها باستخدام [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
+
+```jsx
+export async function getStaticProps(context) {
+  return {
+    props: { message: `Next.js is awesome` }, // سيتم تمريرها إلى مكون الصفحة كخصائص
+  }
+}
+```
+
+### `revalidate`
+
+خاصية `revalidate` هي المقدار بالثواني الذي بعدها يمكن أن يحدث إعادة إنشاء للصفحة (الافتراضي هو `false` أو بدون إعادة تحقق).
+
+```js
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// قد يتم استدعاؤها مرة أخرى، على دالة بدون خادم، إذا
+// تم تمكين إعادة التحقق وجاء طلب جديد
+export async function getStaticProps() {
+  const res = await fetch('https://.../posts')
+  const posts = await res.json()
+
+  return {
+    props: {
+      posts,
+    },
+    // ستحاول Next.js إعادة إنشاء الصفحة:
+    // - عند وصول طلب
+    // - على الأكثر مرة كل 10 ثوانٍ
+    revalidate: 10, // بالثواني
+  }
+}
+```
+
+تعلم المزيد عن [التجديد الثابت التدريجي](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+
+يمكن تحديد حالة التخزين المؤقت لصفحة تستخدم ISR عن طريق قراءة قيمة رأس الاستجابة `x-nextjs-cache`. القيم الممكنة هي التالية:
+
+- `MISS` - المسار غير موجود في التخزين المؤقت (يحدث مرة واحدة على الأكثر، في الزيارة الأولى)
+- `STALE` - المسار موجود في التخزين المؤقت ولكن انتهت فترة إعادة التحقق لذا سيتم تحديثه في الخلفية
+- `HIT` - المسار موجود في التخزين المؤقت ولم تنته فترة إعادة التحقق
+
+### `notFound`
+
+القيمة المنطقية `notFound` تسمح للصفحة بإرجاع حالة `404` و[صفحة 404](/docs/pages/building-your-application/routing/custom-error#404-page). مع `notFound: true`، سترجع الصفحة `404` حتى لو كان هناك صفحة تم إنشاؤها بنجاح من قبل. هذا مخصص لدعم حالات الاستخدام مثل المحتوى الذي ينشئه المستخدم ويتم إزالته من قبل المؤلف. ملاحظة، `notFound` يتبع نفس سلوك `revalidate` [الموضح هنا](#revalidate).
+
+```js
+export async function getStaticProps(context) {
+  const res = await fetch(`https://.../data`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: { data }, // سيتم تمريرها إلى مكون الصفحة كخصائص
+  }
+}
+```
+
+> **جيد للمعرفة**: `notFound` غير مطلوب لوضع [`fallback: false`](/docs/pages/api-reference/functions/get-static-paths#fallback-false) حيث سيتم فقط عرض المسارات التي تم إرجاعها من `getStaticPaths` مسبقًا.
+
+### `redirect`
+
+كائن `redirect` يسمح بإعادة التوجيه إلى موارد داخلية أو خارجية. يجب أن يتطابق مع الشكل `{ destination: string, permanent: boolean }`.
+
+في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء `HTTP` القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية `statusCode` بدلاً من خاصية `permanent`، **ولكن ليس كلاهما**. يمكنك أيضًا تعيين `basePath: false` مشابهًا لإعادة التوجيه في `next.config.js`.
+
+```js
+export async function getStaticProps(context) {
+  const res = await fetch(`https://...`)
+  const data = await res.json()
+
+  if (!data) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+        // statusCode: 301
+      },
+    }
+  }
+
+  return {
+    props: { data }, // سيتم تمريرها إلى مكون الصفحة كخصائص
+  }
+}
+```
+
+إذا كانت عمليات إعادة التوجيه معروفة أثناء البناء، فيجب إضافتها في [`next.config.js`](/docs/pages/api-reference/next-config-js/redirects) بدلاً من ذلك.
+
+## قراءة الملفات: استخدم `process.cwd()`
+
+يمكن قراءة الملفات مباشرة من نظام الملفات في `getStaticProps`.
+
+للقيام بذلك، يجب الحصول على المسار الكامل للملف.
+
+نظرًا لأن Next.js يقوم بتجميع الكود الخاص بك في دليل منفصل، لا يمكنك استخدام `__dirname` حيث أن المسار الذي سيعود به سيكون مختلفًا عن مسار الصفحات.
+
+بدلاً من ذلك، يمكنك استخدام `process.cwd()` الذي يعطيك الدليل حيث يتم تنفيذ Next.js.
+
+```jsx
+import { promises as fs } from 'fs'
+import path from 'path'
+
+// سيتم ملء posts أثناء البناء بواسطة getStaticProps()
+function Blog({ posts }) {
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li>
+          <h3>{post.filename}</h3>
+          <p>{post.content}</p>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+// يتم استدعاء هذه الدالة أثناء البناء على جانب الخادم.
+// لن يتم استدعاؤها على جانب العميل، لذا يمكنك حتى
+// إجراء استعلامات قاعدة بيانات مباشرة.
+export async function getStaticProps() {
+  const postsDirectory = path.join(process.cwd(), 'posts')
+  const filenames = await fs.readdir(postsDirectory)
+
+  const posts = filenames.map(async (filename) => {
+    const filePath = path.join(postsDirectory, filename)
+    const fileContents = await fs.readFile(filePath, 'utf8')
+
+    // بشكل عام ستقوم بتحليل/تحويل المحتويات
+    // على سبيل المثال يمكنك تحويل Markdown إلى HTML هنا
+
+    return {
+      filename,
+      content: fileContents,
+    }
+  })
+  // بإرجاع { props: { posts } }، سيستقبل مكون Blog
+  // `posts` كخاصية أثناء البناء
+  return {
+    props: {
+      posts: await Promise.all(posts),
+    },
+  }
+}
+
+export default Blog
+```
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                               |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching) أصبح الآن مستقرًا مع جلب بيانات مبسط                                                           |
+| `v12.2.0` | [التجديد الثابت التدريجي عند الطلب](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) أصبح مستقرًا.    |
+| `v12.1.0` | تمت إضافة [التجديد الثابت التدريجي عند الطلب](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) (بيتا). |
+| `v10.0.0` | تمت إضافة خيارات `locale`، `locales`، `defaultLocale`، و `notFound`.                                                                                                   |
+| `v10.0.0` | تمت إضافة خيار الإرجاع `fallback: 'blocking'`.                                                                                                                           |
+| `v9.5.0`  | أصبح [التجديد الثابت التدريجي](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) مستقرًا                                         |
+| `v9.3.0`  | تم تقديم `getStaticProps`.                                                                                                                                          |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/index.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/index.mdx
new file mode 100644
index 00000000..faaa6d35
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:55.567Z
+title: الدوال
+description: مرجع API للدوال والخطافات (Hooks) في موجه الصفحات (Pages Router).
+source: app/api-reference/functions
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/next-request.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/next-request.mdx
new file mode 100644
index 00000000..7fda0400
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/next-request.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:54.948Z
+title: NextRequest
+description: مرجع API لـ NextRequest.
+source: app/api-reference/functions/next-request
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/next-response.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/next-response.mdx
new file mode 100644
index 00000000..fd470a24
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/next-response.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:50.120Z
+title: NextResponse
+description: مرجع API لـ NextResponse.
+source: app/api-reference/functions/next-response
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-amp.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-amp.mdx
new file mode 100644
index 00000000..e15f031d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-amp.mdx
@@ -0,0 +1,88 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:20:18.435Z
+title: useAmp
+description: تمكين AMP في الصفحة والتحكم في طريقة إضافة Next.js لـ AMP إلى الصفحة باستخدام تكوين AMP.
+---
+
+<details>
+  <summary>أمثلة</summary>
+
+- [AMP](https://github.com/vercel/next.js/tree/canary/examples/amp)
+
+</details>
+
+> دعم AMP هو أحد ميزاتنا المتقدمة، يمكنك [قراءة المزيد عن AMP هنا](/docs/pages/building-your-application/configuring/amp).
+
+لتمكين AMP، أضف التكوين التالي إلى صفحتك:
+
+```jsx filename="pages/index.js"
+export const config = { amp: true }
+```
+
+يقبل تكوين `amp` القيم التالية:
+
+- `true` - ستكون الصفحة AMP فقط
+- `'hybrid'` - سيكون للصفحة نسختان، واحدة بـ AMP وأخرى بـ HTML
+
+للمزيد عن تكوين `amp`، اقرأ الأقسام أدناه.
+
+## صفحة AMP الأولى
+
+انظر إلى المثال التالي:
+
+```jsx filename="pages/about.js"
+export const config = { amp: true }
+
+function About(props) {
+  return <h3>صفحتي حول AMP!</h3>
+}
+
+export default About
+```
+
+الصفحة أعلاه هي صفحة AMP فقط، مما يعني:
+
+- لا تحتوي الصفحة على وقت تشغيل Next.js أو React من جانب العميل
+- يتم تحسين الصفحة تلقائيًا باستخدام [AMP Optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer)، وهو محسن يطبق نفس التحويلات مثل ذاكرة التخزين المؤقت لـ AMP (يحسن الأداء بنسبة تصل إلى 42٪)
+- تحتوي الصفحة على نسخة يمكن للمستخدم الوصول إليها (مُحسنة) ونسخة يمكن لمحركات البحث فهرستها (غير مُحسنة)
+
+## صفحة AMP الهجينة
+
+انظر إلى المثال التالي:
+
+```jsx filename="pages/about.js"
+import { useAmp } from 'next/amp'
+
+export const config = { amp: 'hybrid' }
+
+function About(props) {
+  const isAmp = useAmp()
+
+  return (
+    <div>
+      <h3>صفحتي حول AMP!</h3>
+      {isAmp ? (
+        <amp-img
+          width="300"
+          height="300"
+          src="/my-img.jpg"
+          alt="صورة رائعة"
+          layout="responsive"
+        />
+      ) : (
+        <img width="300" height="300" src="/my-img.jpg" alt="صورة رائعة" />
+      )}
+    </div>
+  )
+}
+
+export default About
+```
+
+الصفحة أعلاه هي صفحة AMP هجينة، مما يعني:
+
+- يتم عرض الصفحة كـ HTML تقليدي (افتراضي) وAMP HTML (بإضافة `?amp=1` إلى الرابط)
+- تحتوي نسخة AMP من الصفحة فقط على تحسينات صالحة تم تطبيقها باستخدام AMP Optimizer بحيث يمكن لمحركات البحث فهرستها
+
+تستخدم الصفحة `useAmp` للتمييز بين الوضعين، وهو [خطاف React](https://react.dev/reference/react) يُرجع `true` إذا كانت الصفحة تستخدم AMP، و`false` في الحالة الأخرى.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-report-web-vitals.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-report-web-vitals.mdx
new file mode 100644
index 00000000..28e359a6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-report-web-vitals.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:51.897Z
+title: useReportWebVitals
+description: useReportWebVitals
+source: app/api-reference/functions/use-report-web-vitals
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-router.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-router.mdx
new file mode 100644
index 00000000..5ed29af9
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/use-router.mdx
@@ -0,0 +1,518 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:23:13.791Z
+title: useRouter
+description: تعرف على المزيد حول واجهة برمجة التطبيقات (API) لموجه Next.js، وكيفية الوصول إلى نسخة الموجه في صفحتك باستخدام خطاف useRouter.
+---
+
+إذا كنت ترغب في الوصول إلى [كائن `router`](#router-object) داخل أي مكون وظيفي في تطبيقك، يمكنك استخدام خطاف `useRouter`. إليك المثال التالي:
+
+```jsx
+import { useRouter } from 'next/router'
+
+function ActiveLink({ children, href }) {
+  const router = useRouter()
+  const style = {
+    marginRight: 10,
+    color: router.asPath === href ? 'red' : 'black',
+  }
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    router.push(href)
+  }
+
+  return (
+    <a href={href} onClick={handleClick} style={style}>
+      {children}
+    </a>
+  )
+}
+
+export default ActiveLink
+```
+
+> `useRouter` هو [خطاف React](https://react.dev/learn#using-hooks)، مما يعني أنه لا يمكن استخدامه مع الفئات. يمكنك إما استخدام [withRouter](#withrouter) أو تغليف فئتك داخل مكون وظيفي.
+
+## كائن `router`
+
+فيما يلي تعريف كائن `router` الذي يتم إرجاعه بواسطة كل من [`useRouter`](#top) و [`withRouter`](#withrouter):
+
+- `pathname`: `String` - مسار ملف المسار الحالي الذي يأتي بعد `/pages`. لذلك، لا يتم تضمين `basePath` أو `locale` أو الشرطة المائلة الزائدة (`trailingSlash: true`).
+- `query`: `Object` - سلسلة الاستعلام المحللة إلى كائن، بما في ذلك معلمات [المسار الديناميكي](/docs/pages/building-your-application/routing/dynamic-routes). سيكون كائنًا فارغًا أثناء التصيير المسبق إذا لم تستخدم الصفحة [التصيير من جانب الخادم (SSR)](/docs/pages/building-your-application/data-fetching/get-server-side-props). القيمة الافتراضية هي `{}`.
+- `asPath`: `String` - المسار كما يظهر في متصفح المستخدم بما في ذلك معلمات البحث واحترام إعدادات `trailingSlash`. لا يتم تضمين `basePath` و `locale`.
+- `isFallback`: `boolean` - ما إذا كانت الصفحة الحالية في [وضع الاحتياطي (fallback mode)](/docs/pages/api-reference/functions/get-static-paths#fallback-true).
+- `basePath`: `String` - [basePath](/docs/app/api-reference/next-config-js/basePath) النشط (إذا تم تمكينه).
+- `locale`: `String` - اللغة النشطة (إذا تم تمكينها).
+- `locales`: `String[]` - جميع اللغات المدعومة (إذا تم تمكينها).
+- `defaultLocale`: `String` - اللغة الافتراضية الحالية (إذا تم تمكينها).
+- `domainLocales`: `Array<{domain, defaultLocale, locales}>` - أي لغات نطاق مهيأة.
+- `isReady`: `boolean` - ما إذا كانت حقول الموجه محدثة من جانب العميل وجاهزة للاستخدام. يجب استخدامها فقط داخل طرق `useEffect` وليس للتصيير الشرطي على الخادم. راجع الوثائق ذات الصلة لحالة الاستخدام مع [الصفحات المحسنة تلقائيًا بشكل ثابت](/docs/pages/building-your-application/rendering/automatic-static-optimization).
+- `isPreview`: `boolean` - ما إذا كان التطبيق حاليًا في [وضع المعاينة (preview mode)](/docs/pages/building-your-application/configuring/preview-mode).
+
+> استخدام حقل `asPath` قد يؤدي إلى عدم تطابق بين العميل والخادم إذا تم تصيير الصفحة باستخدام التصيير من جانب الخادم أو [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization). تجنب استخدام `asPath` حتى يصبح حقل `isReady` `true`.
+
+تتضمن الطرق التالية داخل `router`:
+
+### router.push
+
+يتحكم في الانتقالات من جانب العميل، هذه الطريقة مفيدة للحالات التي لا يكون فيها [`next/link`](/docs/pages/api-reference/components/link) كافيًا.
+
+```js
+router.push(url, as, options)
+```
+
+- `url`: `UrlObject | String` - عنوان URL للانتقال إليه (راجع [وثائق وحدة URL في Node.JS](https://nodejs.org/api/url.html#legacy-urlobject) لخصائص `UrlObject`).
+- `as`: `UrlObject | String` - مزخرف اختياري للمسار الذي سيظهر في شريط عنوان URL للمتصفح. قبل Next.js 9.5.3 كان هذا يستخدم للمسارات الديناميكية.
+- `options` - كائن اختياري مع خيارات التهيئة التالية:
+  - `scroll` - قيمة منطقية اختيارية، تتحكم في التمرير إلى أعلى الصفحة بعد التنقل. القيمة الافتراضية هي `true`.
+  - [`shallow`](/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing): تحديث مسار الصفحة الحالية دون إعادة تشغيل [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) أو [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) أو [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props). القيمة الافتراضية هي `false`.
+  - `locale` - سلسلة اختيارية، تشير إلى لغة الصفحة الجديدة.
+
+> لا تحتاج إلى استخدام `router.push` لعناوين URL الخارجية. [window.location](https://developer.mozilla.org/docs/Web/API/Window/location) أكثر ملاءمة لتلك الحالات.
+
+الانتقال إلى `pages/about.js`، وهو مسار محدد مسبقًا:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/about')}>
+      اضغط علي
+    </button>
+  )
+}
+```
+
+الانتقال إلى `pages/post/[pid].js`، وهو مسار ديناميكي:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.push('/post/abc')}>
+      اضغط علي
+    </button>
+  )
+}
+```
+
+تحويل المستخدم إلى `pages/login.js`، مفيد للصفحات خلف [المصادقة](/docs/pages/building-your-application/authentication):
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+// هنا يمكنك جلب وإرجاع المستخدم
+const useUser = () => ({ user: null, loading: false })
+
+export default function Page() {
+  const { user, loading } = useUser()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!(user || loading)) {
+      router.push('/login')
+    }
+  }, [user, loading])
+
+  return <p>جاري التحويل...</p>
+}
+```
+
+#### إعادة تعيين الحالة بعد التنقل
+
+عند الانتقال إلى نفس الصفحة في Next.js، لن يتم إعادة تعيين حالة الصفحة افتراضيًا لأن React لا يفك التحميل إلا إذا تغير المكون الأصلي.
+
+```jsx filename="pages/[slug].js"
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+  const [count, setCount] = useState(0)
+  return (
+    <div>
+      <h1>الصفحة: {router.query.slug}</h1>
+      <p>العدد: {count}</p>
+      <button onClick={() => setCount(count + 1)}>زيادة العدد</button>
+      <Link href="/one">واحد</Link> <Link href="/two">اثنان</Link>
+    </div>
+  )
+}
+```
+
+في المثال أعلاه، الانتقال بين `/one` و `/two` لن يعيد تعيين العدد. يتم الحفاظ على `useState` بين عمليات التصيير لأن مكون React الرئيسي، `Page`، هو نفسه.
+
+إذا كنت لا تريد هذا السلوك، لديك خياران:
+
+- تحديث كل حالة يدويًا باستخدام `useEffect`. في المثال أعلاه، يمكن أن يبدو كالتالي:
+
+  ```jsx
+  useEffect(() => {
+    setCount(0)
+  }, [router.query.slug])
+  ```
+
+- استخدم `key` في React [لإخبار React بإعادة تحميل المكون](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). للقيام بذلك لجميع الصفحات، يمكنك استخدام تطبيق مخصص:
+
+  ```jsx filename="pages/_app.js"
+  import { useRouter } from 'next/router'
+
+  export default function MyApp({ Component, pageProps }) {
+    const router = useRouter()
+    return <Component key={router.asPath} {...pageProps} />
+  }
+  ```
+
+#### مع كائن URL
+
+يمكنك استخدام كائن URL بنفس الطريقة التي يمكنك استخدامها مع [`next/link`](/docs/pages/api-reference/components/link#with-url-object). يعمل لكل من معلمتي `url` و `as`:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function ReadMore({ post }) {
+  const router = useRouter()
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        router.push({
+          pathname: '/post/[pid]',
+          query: { pid: post.id },
+        })
+      }}
+    >
+      اضغط هنا لقراءة المزيد
+    </button>
+  )
+}
+```
+
+### router.replace
+
+مشابه لخاصية `replace` في [`next/link`](/docs/pages/api-reference/components/link)، `router.replace` سيمنع إضافة إدخال URL جديد إلى سجل `history`.
+
+```js
+router.replace(url, as, options)
+```
+
+- واجهة برمجة التطبيقات (API) لـ `router.replace` هي نفسها تمامًا لواجهة برمجة التطبيقات لـ [`router.push`](#routerpush).
+
+انظر إلى المثال التالي:
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.replace('/home')}>
+      اضغط علي
+    </button>
+  )
+}
+```
+
+### router.prefetch
+
+جلب الصفحات مسبقًا لتحقيق انتقالات أسرع من جانب العميل. هذه الطريقة مفيدة فقط للتنقلات بدون [`next/link`](/docs/pages/api-reference/components/link)، حيث يتولى `next/link` جلب الصفحات مسبقًا تلقائيًا.
+
+> هذه ميزة للإنتاج فقط. لا يقوم Next.js بجلب الصفحات مسبقًا في وضع التطوير.
+
+```js
+router.prefetch(url, as, options)
+```
+
+- `url` - عنوان URL المطلوب جلبها مسبقًا، بما في ذلك المسارات الصريحة (مثل `/dashboard`) والمسارات الديناميكية (مثل `/product/[id]`).
+- `as` - مزخرف اختياري لـ `url`. قبل Next.js 9.5.3 كان هذا يستخدم لجلب المسارات الديناميكية مسبقًا.
+- `options` - كائن اختياري مع الحقول المسموح بها التالية:
+  - `locale` - يسمح بتوفير لغة مختلفة عن اللغة النشطة. إذا كانت `false`، يجب أن يتضمن `url` اللغة حيث لن يتم استخدام اللغة النشطة.
+
+لنفترض أن لديك صفحة تسجيل دخول، وبعد تسجيل الدخول، تقوم بتحويل المستخدم إلى لوحة التحكم. لتلك الحالة، يمكننا جلب لوحة التحكم مسبقًا لتحقيق انتقال أسرع، كما في المثال التالي:
+
+```jsx
+import { useCallback, useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function Login() {
+  const router = useRouter()
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault()
+
+    fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        /* بيانات النموذج */
+      }),
+    }).then((res) => {
+      // قم بالانتقال السريع من جانب العميل إلى صفحة لوحة التحكم التي تم جلبها مسبقًا
+      if (res.ok) router.push('/dashboard')
+    })
+  }, [])
+
+  useEffect(() => {
+    // جلب صفحة لوحة التحكم مسبقًا
+    router.prefetch('/dashboard')
+  }, [router])
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* حقول النموذج */}
+      <button type="submit">تسجيل الدخول</button>
+    </form>
+  )
+}
+```
+
+### router.beforePopState
+
+في بعض الحالات (على سبيل المثال، إذا كنت تستخدم [خادم مخصص](/docs/pages/building-your-application/configuring/custom-server))، قد ترغب في الاستماع إلى [popstate](https://developer.mozilla.org/docs/Web/Events/popstate) والقيام بشيء ما قبل أن يتصرف الموجه بناءً عليه.
+
+```js
+router.beforePopState(cb)
+```
+
+- `cb` - الوظيفة التي سيتم تشغيلها على أحداث `popstate` الواردة. تتلقى الوظيفة حالة الحدث ككائن مع الخصائص التالية:
+  - `url`: `String` - المسار للحالة الجديدة. هذا عادةً اسم `page`.
+  - `as`: `String` - عنوان URL الذي سيظهر في المتصفح.
+  - `options`: `Object` - خيارات إضافية مرسلة بواسطة [router.push](#routerpush).
+
+إذا أعادت `cb` `false`، فلن يتعامل موجه Next.js مع `popstate`، وسيكون مسؤوليتك التعامل معه في تلك الحالة. راجع [تعطيل توجيه نظام الملفات](/docs/pages/building-your-application/configuring/custom-server#disabling-file-system-routing).
+
+يمكنك استخدام `beforePopState` لمعالجة الطلب، أو فرض تحديث SSR، كما في المثال التالي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.beforePopState(({ url, as, options }) => {
+      // أريد فقط السماح بهذين المسارين!
+      if (as !== '/' && as !== '/other') {
+        // اجعل SSR يصيير المسارات السيئة كـ 404.
+        window.location.href = as
+        return false
+      }
+
+      return true
+    })
+  }, [router])
+
+  return <p>مرحبًا بك في الصفحة</p>
+}
+```
+
+### router.back
+
+الانتقال للخلف في السجل. يعادل النقر على زر الرجوع في المتصفح. ينفذ `window.history.back()`.
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.back()}>
+      اضغط هنا للعودة
+    </button>
+  )
+}
+```
+
+### router.reload
+
+إعادة تحميل عنوان URL الحالي. يعادل النقر على زر التحديث في المتصفح. ينفذ `window.location.reload()`.
+
+```jsx
+import { useRouter } from 'next/router'
+
+export default function Page() {
+  const router = useRouter()
+
+  return (
+    <button type="button" onClick={() => router.reload()}>
+      اضغط هنا لإعادة التحميل
+    </button>
+  )
+}
+```
+
+### router.events
+
+يمكنك الاستماع إلى أحداث مختلفة تحدث داخل موجه Next.js. إليك قائمة بالأحداث المدعومة:
+
+- `routeChangeStart(url, { shallow })` - يتم تشغيله عندما يبدأ المسار في التغيير.
+- `routeChangeComplete(url, { shallow })` - يتم تشغيله عندما يتغير المسار بالكامل.
+- `routeChangeError(err, url, { shallow })` - يتم تشغيله عند حدوث خطأ أثناء تغيير المسارات، أو إلغاء تحميل المسار.
+  - `err.cancelled` - يشير إلى ما إذا تم إلغاء التنقل.
+- `beforeHistoryChange(url, { shallow })` - يتم تشغيله قبل تغيير سجل المتصفح.
+- `hashChangeStart(url, { shallow })` - يتم تشغيله عندما يتغير الهاش ولكن ليس الصفحة.
+- `hashChangeComplete(url, { shallow })` - يتم تشغيله عندما يتغير الهاش ولكن ليس الصفحة.
+
+> **ملاحظة مهمة**: هنا `url` هو عنوان URL الذي يظهر في المتصفح، بما في ذلك [`basePath`](/docs/app/api-reference/next-config-js/basePath).
+
+على سبيل المثال، للاستماع إلى حدث الموجه `routeChangeStart`، افتح أو أنشئ `pages/_app.js` واشترك في الحدث، كما يلي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function MyApp({ Component, pageProps }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleRouteChange = (url, { shallow }) => {
+      console.log(
+        `التطبيق يتغير إلى ${url} ${
+          shallow ? 'مع' : 'بدون'
+        } التوجيه السطحي`
+      )
+    }
+
+    router.events.on('routeChangeStart', handleRouteChange)
+
+    // إذا تم فك تحميل المكون، قم بإلغاء الاشتراك
+    // من الحدث باستخدام طريقة `off`:
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange)
+    }
+  }, [router])
+
+  return <Component {...pageProps} />
+}
+```
+
+> نستخدم [تطبيقًا مخصصًا](/docs/pages/building-your-application/routing/custom-app) (`pages/_app.js`) لهذا المثال للاشتراك في الحدث لأنه لا يتم فك تحميله عند تنقلات الصفحة، ولكن يمكنك الاشتراك في أحداث الموجه في أي مكون في تطبيقك.
+
+يجب تسجيل أحداث الموجه عندما يتم تحميل مكون ([useEffect](https://react.dev/reference/react/useEffect) أو [componentDidMount](https://react.dev/reference/react/Component#componentdidmount) / [componentWillUnmount](https://react.dev/reference/react/Component#componentwillunmount)) أو بشكل إلزامي عند حدوث حدث.
+
+إذا تم إلغاء تحميل مسار (على سبيل المثال، بالنقر على رابطين بسرعة متتالية)، سيتم تشغيل `routeChangeError`. وسيحتوي `err` الممرر على خاصية `cancelled` مضبوطة على `true`، كما في المثال التالي:
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export default function MyApp({ Component, pageProps }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const handleRouteChangeError = (err, url) => {
+      if (err.cancelled) {
+        console.log(`تم إلغاء المسار إلى ${url}!`)
+      }
+    }
+
+    router.events.on('routeChangeError', handleRouteChangeError)
+
+    // إذا تم فك تحميل المكون، قم بإلغاء الاشتراك
+    // من الحدث باستخدام طريقة `off`:
+    return () => {
+      router.events.off('routeChangeError', handleRouteChangeError)
+    }
+  }, [router])
+
+  return <Component {...pageProps} />
+}
+```
+
+## أخطاء ESLint المحتملة
+
+بعض الطرق المتاحة على كائن `router` تُرجع Promise. إذا كان لديك قاعدة ESLint [no-floating-promises](https://typescript-eslint.io/rules/no-floating-promises) مفعّلة، يُنظر بتعطيلها إما بشكل عام، أو للأسطر المتأثرة.
+
+إذا كانت تطبيقك يحتاج هذه القاعدة، يجب إما استخدام `void` مع الـ Promise - أو استخدام دالة `async`، انتظار الـ Promise باستخدام `await`، ثم استخدام `void` مع استدعاء الدالة. **هذا لا ينطبق عندما يتم استدعاء الطريقة من داخل معالج حدث `onClick`**.
+
+الطرق المتأثرة هي:
+
+- `router.push`
+- `router.replace`
+- `router.prefetch`
+
+### حلول محتملة
+
+```jsx
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+// هنا يمكنك جلب وإعادة المستخدم
+const useUser = () => ({ user: null, loading: false })
+
+export default function Page() {
+  const { user, loading } = useUser()
+  const router = useRouter()
+
+  useEffect(() => {
+    // تعطيل التحقق من ESLint للسطر التالي - هذا هو الحل الأنظف
+    // eslint-disable-next-line no-floating-promises
+    router.push('/login')
+
+    // استخدام void مع الـ Promise المُعاد من router.push
+    if (!(user || loading)) {
+      void router.push('/login')
+    }
+    // أو استخدام دالة async، انتظار الـ Promise باستخدام await، ثم استخدام void مع استدعاء الدالة
+    async function handleRouteChange() {
+      if (!(user || loading)) {
+        await router.push('/login')
+      }
+    }
+    void handleRouteChange()
+  }, [user, loading])
+
+  return <p>جاري التوجيه...</p>
+}
+```
+
+## withRouter
+
+إذا لم يكن [`useRouter`](#router-object) مناسبًا لك، يمكن لـ `withRouter` أيضًا إضافة نفس [كائن `router`](#router-object) إلى أي مكون.
+
+### طريقة الاستخدام
+
+```jsx
+import { withRouter } from 'next/router'
+
+function Page({ router }) {
+  return <p>{router.pathname}</p>
+}
+
+export default withRouter(Page)
+```
+
+### TypeScript
+
+لاستخدام مكونات الفئة مع `withRouter`، يجب أن يقبل المكون خاصية router:
+
+```tsx
+import React from 'react'
+import { withRouter, NextRouter } from 'next/router'
+
+interface WithRouterProps {
+  router: NextRouter
+}
+
+interface MyComponentProps extends WithRouterProps {}
+
+class MyComponent extends React.Component<MyComponentProps> {
+  render() {
+    return <p>{this.props.router.pathname}</p>
+  }
+}
+
+export default withRouter(MyComponent)
+```
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/userAgent.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/userAgent.mdx
new file mode 100644
index 00000000..e183099a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/02-functions/userAgent.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:47.994Z
+title: وكيل المستخدم (userAgent)
+description: يمتد مساعد وكيل المستخدم (userAgent) من واجهة برمجة تطبيقات طلب الويب بخصائص وطرق إضافية للتفاعل مع كائن وكيل المستخدم من الطلب.
+source: app/api-reference/functions/userAgent
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/assetPrefix.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/assetPrefix.mdx
new file mode 100644
index 00000000..a5dab76d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/assetPrefix.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:44.851Z
+title: assetPrefix
+description: تعلم كيفية استخدام خيار التكوين `assetPrefix` لضبط شبكة توصيل المحتوى (CDN) الخاصة بك.
+source: app/api-reference/next-config-js/assetPrefix
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/basePath.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/basePath.mdx
new file mode 100644
index 00000000..52606e18
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/basePath.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:42.393Z
+title: basePath
+description: استخدام `basePath` لنشر تطبيق Next.js ضمن مسار فرعي من نطاق.
+source: app/api-reference/next-config-js/basePath
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/compress.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/compress.mdx
new file mode 100644
index 00000000..9c57e212
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/compress.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:43.597Z
+title: ضغط
+description: يوفر Next.js ضغط gzip لضغط المحتوى المعروض والملفات الثابتة، وهو يعمل فقط مع هدف الخادم. تعلم المزيد حول ذلك هنا.
+source: app/api-reference/next-config-js/compress
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/crossOrigin.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/crossOrigin.mdx
new file mode 100644
index 00000000..e5209a86
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/crossOrigin.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:42.991Z
+title: crossOrigin
+description: استخدم خيار `crossOrigin` لإضافة علامة crossOrigin على علامات `script` التي يتم إنشاؤها بواسطة `next/script` و `next/head`.
+source: app/api-reference/next-config-js/crossOrigin
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/devIndicators.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/devIndicators.mdx
new file mode 100644
index 00000000..31dc6e6e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/devIndicators.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:40.793Z
+title: مؤشرات التطوير (devIndicators)
+description: تتضمن الصفحات المُحسّنة مؤشرًا لإعلامك إذا كانت تخضع للتحسين الثابت. يمكنك تعطيل هذا المؤشر هنا.
+source: app/api-reference/next-config-js/devIndicators
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/distDir.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/distDir.mdx
new file mode 100644
index 00000000..b8e368b7
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/distDir.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:36.852Z
+title: distDir
+description: تعيين دليل بناء مخصص للاستخدام بدلاً من الدليل الافتراضي .next.
+source: app/api-reference/next-config-js/distDir
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/env.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/env.mdx
new file mode 100644
index 00000000..1a1f383a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/env.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:34.123Z
+title: متغيرات البيئة (env)
+description: تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js الخاص بك أثناء وقت البناء.
+source: app/api-reference/next-config-js/env
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/eslint.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/eslint.mdx
new file mode 100644
index 00000000..6555efda
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/eslint.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:34.355Z
+title: eslint
+description: يقوم Next.js بالإبلاغ عن أخطاء وتحذيرات ESLint تلقائيًا أثناء عمليات البناء. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+source: app/api-reference/next-config-js/eslint
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/exportPathMap.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/exportPathMap.mdx
new file mode 100644
index 00000000..f2969537
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/exportPathMap.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:33.586Z
+title: exportPathMap
+description: تخصيص الصفحات التي سيتم تصديرها كملفات HTML عند استخدام `next export`.
+source: app/api-reference/next-config-js/exportPathMap
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/generateBuildId.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/generateBuildId.mdx
new file mode 100644
index 00000000..a038433e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/generateBuildId.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:34.838Z
+title: generateBuildId
+description: تكوين معرف البناء (build id) الذي يستخدم لتحديد البناء الحالي الذي يتم تقديم التطبيق من خلاله.
+source: app/api-reference/next-config-js/generateBuildId
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/generateEtags.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/generateEtags.mdx
new file mode 100644
index 00000000..00243b92
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/generateEtags.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:34.455Z
+title: generateEtags
+description: يقوم Next.js بإنشاء علامات etags افتراضيًا لكل صفحة. تعلم المزيد حول كيفية تعطيل إنشاء etags هنا.
+source: app/api-reference/next-config-js/generateEtags
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/headers.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/headers.mdx
new file mode 100644
index 00000000..dfec5bda
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/headers.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:30.978Z
+title: رؤوس (headers)
+description: إضافة رؤوس HTTP مخصصة لتطبيق Next.js الخاص بك.
+source: app/api-reference/next-config-js/headers
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/httpAgentOptions.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/httpAgentOptions.mdx
new file mode 100644
index 00000000..0205ddf8
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/httpAgentOptions.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:28.149Z
+title: خيارات وكيل HTTP
+description: يستخدم Next.js HTTP Keep-Alive افتراضيًا بشكل تلقائي. تعلم المزيد حول كيفية تعطيل HTTP Keep-Alive هنا.
+source: app/api-reference/next-config-js/httpAgentOptions
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/images.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/images.mdx
new file mode 100644
index 00000000..18147641
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/images.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:24.813Z
+title: الصور
+description: التخصيص المتقدم لأداة تحميل `next/image`
+source: app/api-reference/next-config-js/images
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/index.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/index.mdx
new file mode 100644
index 00000000..17894933
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:23.398Z
+title: خيارات ملف next.config.js
+description: تعرف على الخيارات المتاحة في ملف next.config.js لموجه الصفحات (Pages Router).
+source: app/api-reference/next-config-js
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/instrumentationHook.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/instrumentationHook.mdx
new file mode 100644
index 00000000..1e2d9495
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/instrumentationHook.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:25.117Z
+title: instrumentationHook
+description: استخدم خيار instrumentationHook لإعداد أدوات القياس في تطبيق Next.js الخاص بك.
+source: app/api-reference/next-config-js/instrumentationHook
+---
+
+{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/onDemandEntries.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/onDemandEntries.mdx
new file mode 100644
index 00000000..317a796f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/onDemandEntries.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:22.341Z
+title: onDemandEntries
+description: تكوين كيفية تعامل Next.js مع التخلص من الصفحات والاحتفاظ بها في الذاكرة أثناء التطوير.
+source: app/api-reference/next-config-js/onDemandEntries
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/optimizePackageImports.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/optimizePackageImports.mdx
new file mode 100644
index 00000000..8d676e81
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/optimizePackageImports.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:18.651Z
+title: optimizePackageImports
+description: مرجع API لخيار تكوين `optimizePackageImports` في Next.js
+source: app/api-reference/next-config-js/compress
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/output.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/output.mdx
new file mode 100644
index 00000000..c072ec8c
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/output.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:15.667Z
+title: الإخراج (output)
+description: يتتبع Next.js تلقائيًا الملفات المطلوبة لكل صفحة لتسهيل نشر تطبيقك. تعرف على كيفية عمل هذه الميزة هنا.
+source: app/api-reference/next-config-js/output
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/pageExtensions.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/pageExtensions.mdx
new file mode 100644
index 00000000..d80db93e
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/pageExtensions.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:14.827Z
+title: امتدادات الصفحة (pageExtensions)
+description: توسيع امتدادات الصفحة الافتراضية التي يستخدمها Next.js عند تحليل الصفحات في موجه الصفحات (Pages Router).
+source: app/api-reference/next-config-js/pageExtensions
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/poweredByHeader.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/poweredByHeader.mdx
new file mode 100644
index 00000000..87eb378d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/poweredByHeader.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:10.192Z
+title: poweredByHeader
+description: بإضافة رأس `x-powered-by` افتراضيًا. تعلم كيفية إلغاء تفعيله هنا.
+source: app/api-reference/next-config-js/poweredByHeader
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/productionBrowserSourceMaps.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/productionBrowserSourceMaps.mdx
new file mode 100644
index 00000000..8ddb7c81
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/productionBrowserSourceMaps.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:08.691Z
+title: productionBrowserSourceMaps
+description: تمكين إنشاء خرائط المصدر (source maps) للمتصفح أثناء عملية البناء للإنتاج.
+source: app/api-reference/next-config-js/productionBrowserSourceMaps
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/reactStrictMode.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/reactStrictMode.mdx
new file mode 100644
index 00000000..82303bdd
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/reactStrictMode.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:13.194Z
+title: reactStrictMode
+description: بيئة تشغيل Next.js بالكامل متوافقة الآن مع الوضع الصارم (Strict Mode)، تعلم كيفية الاشتراك
+source: app/api-reference/next-config-js/reactStrictMode
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/redirects.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/redirects.mdx
new file mode 100644
index 00000000..a99de469
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/redirects.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:06.394Z
+title: إعادة التوجيه (redirects)
+description: إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.
+source: app/api-reference/next-config-js/redirects
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/rewrites.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/rewrites.mdx
new file mode 100644
index 00000000..ddf952e3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/rewrites.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:01.344Z
+title: إعادة التوجيه (rewrites)
+description: إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.
+source: app/api-reference/next-config-js/rewrites
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/runtime-configuration.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/runtime-configuration.mdx
new file mode 100644
index 00000000..5a45acd3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/runtime-configuration.mdx
@@ -0,0 +1,62 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:19:24.727Z
+title: تهيئة وقت التشغيل
+description: إضافة تهيئة وقت التشغيل للعميل والخادم إلى تطبيق Next.js الخاص بك.
+---
+
+> **تحذير:**
+>
+> - **هذه الميزة قد تم إهمالها.** نوصي باستخدام [متغيرات البيئة](/docs/pages/building-your-application/configuring/environment-variables) بدلاً من ذلك، والتي يمكنها أيضًا دعم قراءة قيم وقت التشغيل.
+> - يمكنك تشغيل التعليمات البرمجية عند بدء تشغيل الخادم باستخدام [دالة `register`](/docs/app/building-your-application/optimizing/instrumentation).
+> - هذه الميزة لا تعمل مع [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization)، أو [تتبع ملفات الإخراج](/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files)، أو [مكونات خادم React](/docs/app/building-your-application/rendering/server-components).
+
+لإضافة تهيئة وقت التشغيل إلى تطبيقك، افتح ملف `next.config.js` وأضف تهيئات `publicRuntimeConfig` و `serverRuntimeConfig`:
+
+```js filename="next.config.js"
+module.exports = {
+  serverRuntimeConfig: {
+    // ستكون متاحة فقط على جانب الخادم
+    mySecret: 'secret',
+    secondSecret: process.env.SECOND_SECRET, // تمرير عبر متغيرات البيئة
+  },
+  publicRuntimeConfig: {
+    // ستكون متاحة على كل من الخادم والعميل
+    staticFolder: '/static',
+  },
+}
+```
+
+ضع أي تهيئة وقت تشغيل خاصة بالخادم فقط تحت `serverRuntimeConfig`.
+
+أي شيء يمكن الوصول إليه من كود جانب العميل والخادم يجب وضعه تحت `publicRuntimeConfig`.
+
+> أي صفحة تعتمد على `publicRuntimeConfig` **يجب** أن تستخدم `getInitialProps` أو `getServerSideProps` أو يجب أن يحتوي تطبيقك على [تطبيق مخصص](/docs/pages/building-your-application/routing/custom-app) مع `getInitialProps` لعدم استخدام [التحسين الثابت التلقائي](/docs/pages/building-your-application/rendering/automatic-static-optimization). لن تكون تهيئة وقت التشغيل متاحة لأي صفحة (أو مكون في صفحة) بدون تقديمها من جانب الخادم.
+
+للوصول إلى تهيئات وقت التشغيل في تطبيقك، استخدم `next/config`، كما يلي:
+
+```jsx
+import getConfig from 'next/config'
+import Image from 'next/image'
+
+// تحتوي فقط على serverRuntimeConfig و publicRuntimeConfig
+const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+// ستكون متاحة فقط على جانب الخادم
+console.log(serverRuntimeConfig.mySecret)
+// ستكون متاحة على كل من جانب الخادم والعميل
+console.log(publicRuntimeConfig.staticFolder)
+
+function MyImage() {
+  return (
+    <div>
+      <Image
+        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
+        alt="logo"
+        layout="fill"
+      />
+    </div>
+  )
+}
+
+export default MyImage
+```
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/trailingSlash.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/trailingSlash.mdx
new file mode 100644
index 00000000..8bd727ed
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/trailingSlash.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:59.749Z
+title: trailingSlash
+description: تكوين صفحات Next.js للتحقق مع أو بدون شرطة مائلة في النهاية.
+source: app/api-reference/next-config-js/trailingSlash
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/transpilePackages.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/transpilePackages.mdx
new file mode 100644
index 00000000..8b6a0bb8
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/transpilePackages.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:59.899Z
+title: transpilePackages
+description: تحويل ودمج التبعيات تلقائيًا من الحزم المحلية (مثل مستودعات أحادية) أو من التبعيات الخارجية (`node_modules`).
+source: app/api-reference/next-config-js/transpilePackages
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى هذه الصفحة، انتقل إلى صفحة المصدر في محررك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/turbo.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/turbo.mdx
new file mode 100644
index 00000000..735c7435
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/turbo.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:55.938Z
+title: توربو (تجريبي)
+nav_title: توربو
+description: تكوين Next.js مع خيارات خاصة بـ Turbopack
+source: app/api-reference/next-config-js/turbo
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/typescript.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/typescript.mdx
new file mode 100644
index 00000000..83ce3aa4
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/typescript.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:52.545Z
+title: TypeScript
+description: يقدم Next.js تقارير أخطاء TypeScript بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.
+source: app/api-reference/next-config-js/typescript
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/urlImports.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/urlImports.mdx
new file mode 100644
index 00000000..c5aeafe3
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/urlImports.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:52.025Z
+title: استيراد من عناوين URL (urlImports)
+description: تكوين Next.js للسماح باستيراد وحدات من عناوين URL خارجية (تجريبي).
+source: app/api-reference/next-config-js/urlImports
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/webVitalsAttribution.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/webVitalsAttribution.mdx
new file mode 100644
index 00000000..a6f6ff3f
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/webVitalsAttribution.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:49.875Z
+title: webVitalsAttribution
+description: تعلم كيفية استخدام خيار webVitalsAttribution لتحديد مصدر مشكلات مؤشرات ويب الأساسية (Web Vitals).
+source: app/api-reference/next-config-js/webVitalsAttribution
+---
+
+{/* لا تقم بالتعديل. يتم إنشاء محتوى هذا المستند من المصدر أعلاه. لتعديل محتوى الصفحة، انتقل إلى صفحة المصدر في المحرر الخاص بك. يمكنك استخدام مكون `<PagesOnly>المحتوى</PagesOnly>` لإضافة محتوى خاص بموجه الصفحات (Pages Router). أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/webpack.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/webpack.mdx
new file mode 100644
index 00000000..2174d434
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/03-next-config-js/webpack.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:43.876Z
+title: تهيئة Webpack المخصصة
+nav_title: webpack
+description: تعلم كيفية تخصيص تهيئة webpack المستخدمة من قبل Next.js
+source: app/api-reference/next-config-js/webpack
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/05-edge.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/05-edge.mdx
new file mode 100644
index 00000000..400e6e71
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/05-edge.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:35.126Z
+title: وقت تشغيل الحافة (Edge Runtime)
+description: مرجع API لـ وقت تشغيل الحافة (Edge Runtime).
+source: app/api-reference/edge
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/create-next-app.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/create-next-app.mdx
new file mode 100644
index 00000000..9910a447
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/create-next-app.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:37.252Z
+title: واجهة سطر الأوامر (CLI)
+description: إنشاء تطبيقات Next.js باستخدام أمر واحد مع واجهة سطر الأوامر create-next-app.
+source: app/api-reference/cli/create-next-app
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/index.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/index.mdx
new file mode 100644
index 00000000..77041683
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/index.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:34.901Z
+title: واجهة سطر الأوامر (CLI)
+description: مرجع API لأدوات واجهة سطر الأوامر (CLI) في Next.js.
+source: app/api-reference/cli
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/next.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/next.mdx
new file mode 100644
index 00000000..d850a2a6
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/06-cli/next.mdx
@@ -0,0 +1,9 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:18:28.374Z
+title: واجهة سطر الأوامر (CLI) لـ Next.js
+description: تعلم كيفية تشغيل وبناء تطبيقك باستخدام واجهة سطر الأوامر (CLI) الخاصة بـ Next.js.
+source: app/api-reference/cli/next
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/02-api-reference/index.mdx b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/index.mdx
new file mode 100644
index 00000000..ffbb3a95
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/02-api-reference/index.mdx
@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:23.895Z
+title: مرجع API
+description: مرجع API لـ Next.js لموجه الصفحات (Pages Router).
+---
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/03-pages/index.mdx b/apps/docs/content/ar/docs/14/03-pages/index.mdx
new file mode 100644
index 00000000..47603eff
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/03-pages/index.mdx
@@ -0,0 +1,10 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:29.583Z
+title: جهاز التوجيه للصفحات (Pages Router)
+description: قبل Next.js 13، كان جهاز التوجيه للصفحات (Pages Router) هو الطريقة الرئيسية لإنشاء مسارات في Next.js باستخدام جهاز توجيه نظام ملفات بديهي.
+---
+
+قبل Next.js 13، كان جهاز التوجيه للصفحات (Pages Router) هو الطريقة الرئيسية لإنشاء مسارات في Next.js. حيث كان يستخدم جهاز توجيه نظام ملفات بديهي لتعيين كل ملف إلى مسار معين. لا يزال جهاز التوجيه للصفحات مدعومًا في الإصدارات الأحدث من Next.js، ولكننا نوصي بالانتقال إلى [جهاز التوجيه للتطبيق (App Router)](/docs/app) الجديد للاستفادة من أحدث ميزات React.
+
+استخدم هذا القسم من الوثائق للتطبيقات الحالية التي تستخدم جهاز التوجيه للصفحات (Pages Router).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/04-architecture/accessibility.mdx b/apps/docs/content/ar/docs/14/04-architecture/accessibility.mdx
new file mode 100644
index 00000000..1cab87c1
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/04-architecture/accessibility.mdx
@@ -0,0 +1,36 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:55.891Z
+title: إمكانية الوصول
+description: ميزات إمكانية الوصول المدمجة في Next.js.
+---
+
+فريق Next.js ملتزم بجعل الإطار متاحًا لجميع المطورين (ومستخدميهم النهائيين). من خلال إضافة ميزات إمكانية الوصول إلى Next.js افتراضيًا، نهدف إلى جعل الويب أكثر شمولاً للجميع.
+
+## إعلانات المسار
+
+عند الانتقال بين الصفحات المعروضة على الخادم (مثل استخدام وسم `<a href>`)، تقوم قارئات الشاشة وغيرها من التقنيات المساعدة بإعلان عنوان الصفحة عند تحميلها حتى يفهم المستخدمون أن الصفحة قد تغيرت.
+
+بالإضافة إلى التنقل التقليدي بين الصفحات، يدعم Next.js أيضًا التحويلات من جانب العميل لتحسين الأداء (باستخدام `next/link`). لضمان إعلان تحويلات جانب العميل أيضًا لتقنيات المساعدة، يتضمن Next.js مُعلن مسار افتراضيًا.
+
+يبحث مُعلن مسار Next.js عن اسم الصفحة للإعلان عنه عن طريق فحص `document.title` أولاً، ثم عنصر `<h1>`، وأخيرًا مسار URL. لتجربة المستخدم الأكثر سهولة، تأكد من أن كل صفحة في تطبيقك لها عنوان فريد ووصفي.
+
+## التدقيق اللغوي
+
+يوفر Next.js [تجربة ESLint متكاملة](/docs/pages/building-your-application/configuring/eslint) جاهزة للاستخدام، بما في ذلك قواعد مخصصة لـ Next.js. افتراضيًا، يتضمن Next.js `eslint-plugin-jsx-a11y` للمساعدة في اكتشاف مشكلات إمكانية الوصول مبكرًا، بما في ذلك التحذير من:
+
+- [aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [aria-proptypes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-proptypes.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [aria-unsupported-elements](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-unsupported-elements.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [role-has-required-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-has-required-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+- [role-supports-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-supports-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
+
+على سبيل المثال، تساعد هذه الإضافة في ضمان إضافة نص بديل لوسوم `img`، واستخدام سمات `aria-*` الصحيحة، واستخدام سمات `role` الصحيحة، والمزيد.
+
+## موارد إمكانية الوصول
+
+- [قائمة التحقق من WCAG من WebAIM](https://webaim.org/standards/wcag/checklist)
+- [إرشادات WCAG 2.2](https://www.w3.org/TR/WCAG22/)
+- [مشروع A11y](https://www.a11yproject.com/)
+- تحقق من [نسب تباين الألوان](https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) بين العناصر الأمامية والخلفية
+- استخدم [`prefers-reduced-motion`](https://web.dev/prefers-reduced-motion/) عند العمل مع الرسوم المتحركة
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/04-architecture/fast-refresh.mdx b/apps/docs/content/ar/docs/14/04-architecture/fast-refresh.mdx
new file mode 100644
index 00000000..76908162
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/04-architecture/fast-refresh.mdx
@@ -0,0 +1,59 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:15:12.804Z
+title: التحديث السريع (Fast Refresh)
+description: التحديث السريع هو تجربة إعادة تحميل الوحدات الساخنة التي تمنحك ملاحظات فورية على التعديلات التي تجريها على مكونات React.
+---
+
+التحديث السريع هو ميزة في Next.js تمنحك ملاحظات فورية على التعديلات التي تجريها على مكونات React. التحديث السريع مفعل افتراضيًا في جميع تطبيقات Next.js على الإصدار **9.4 أو الأحدث**. مع تفعيل التحديث السريع في Next.js، يجب أن تكون معظم التعديلات مرئية في غضون ثانية، **دون فقدان حالة المكون**.
+
+## كيفية العمل
+
+- إذا قمت بتحرير ملف **يصدّر فقط مكون(ات) React**، فسيقوم التحديث السريع بتحديث الكود لهذا الملف فقط، وإعادة عرض مكونك. يمكنك تحرير أي شيء في هذا الملف، بما في ذلك الأنماط، منطق العرض، معالجات الأحداث، أو التأثيرات.
+- إذا قمت بتحرير ملف يحتوي على تصديرات ليست مكونات React، فسيعيد التحديث السريع تشغيل ذلك الملف والملفات الأخرى التي تستورده. لذا إذا كان كل من `Button.js` و `Modal.js` يستوردان `theme.js`، فإن تحرير `theme.js` سيحدث كلا المكونين.
+- أخيرًا، إذا قمت **بتحرير ملف** يتم **استيراده بواسطة ملفات خارج شجرة React**، فسيلجأ التحديث السريع إلى **إعادة تحميل كاملة**. قد يكون لديك ملف يعرض مكون React ولكنه أيضًا يصدر قيمة يتم استيرادها بواسطة **مكون غير React**. على سبيل المثال، ربما يصدر مكونك أيضًا ثابتًا، ويستورده ملف خدمة غير React. في هذه الحالة، فكر في نقل الثابت إلى ملف منفصل واستيراده في كلا الملفين. هذا سيعيد تفعيل عمل التحديث السريع. يمكن عادةً حل الحالات الأخرى بطريقة مماثلة.
+
+## مرونة الأخطاء
+
+### أخطاء الصياغة (Syntax Errors)
+
+إذا قمت بخطأ في الصياغة أثناء التطوير، يمكنك إصلاحه وحفظ الملف مرة أخرى. سيختفي الخطأ تلقائيًا، لذا لن تحتاج إلى إعادة تحميل التطبيق. **لن تفقد حالة المكون**.
+
+### أخطاء التشغيل (Runtime Errors)
+
+إذا ارتكبت خطأ يؤدي إلى حدوث خطأ أثناء التشغيل داخل مكونك، فستستقبلك نافذة سياقية. سيؤدي إصلاح الخطأ إلى إغلاق النافذة تلقائيًا دون إعادة تحميل التطبيق.
+
+سيتم الاحتفاظ بحالة المكون إذا لم يحدث الخطأ أثناء العرض. إذا حدث الخطأ أثناء العرض، سيعيد React تحميل تطبيقك باستخدام الكود المحدث.
+
+إذا كان لديك [حدود أخطاء (error boundaries)](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) في تطبيقك (وهو أمر جيد لفشل أنيق في الإنتاج)، فستحاول إعادة العرض عند التحرير التالي بعد خطأ في العرض. هذا يعني أن وجود حدود أخطاء يمكن أن يمنعك من العودة دائمًا إلى حالة التطبيق الجذرية. ومع ذلك، تذكر أن حدود الأخطاء لا يجب أن تكون _مفرطة في التجزئة_. يتم استخدامها بواسطة React في الإنتاج، ويجب دائمًا تصميمها عن قصد.
+
+## القيود
+
+يحاول التحديث السريع الحفاظ على حالة React المحلية في المكون الذي تقوم بتحريره، ولكن فقط إذا كان ذلك آمنًا. فيما يلي بعض الأسباب التي قد تجعلك ترى إعادة تعيين الحالة المحلية في كل تحرير للملف:
+
+- لا يتم الحفاظ على الحالة المحلية لمكونات الفئة (فقط مكونات الدالة و Hook تحافظ على الحالة).
+- قد يكون الملف الذي تقوم بتحريره يحتوي على تصديرات _أخرى_ بالإضافة إلى مكون React.
+- في بعض الأحيان، قد يصدر الملف نتيجة استدعاء مكون ذو ترتيب أعلى مثل `HOC(WrappedComponent)`. إذا كان المكون المرجع فئة، فسيتم إعادة تعيين حالته.
+- وظائف السهم المجهولة مثل `export default () => <div />;` تسبب عدم حفظ التحديث السريع للحالة المحلية للمكون. بالنسبة لقواعد التعليمات البرمجية الكبيرة، يمكنك استخدام [تحويل الكود `name-default-component`](/docs/pages/building-your-application/upgrading/codemods#name-default-component).
+
+كلما تحولت قاعدة التعليمات البرمجية الخاصة بك إلى مكونات دالة و Hook، يمكنك توقع الحفاظ على الحالة في المزيد من الحالات.
+
+## نصائح
+
+- يحفظ التحديث السريع حالة React المحلية في مكونات الدالة (و Hook) افتراضيًا.
+- في بعض الأحيان قد ترغب في _إجبار_ إعادة تعيين الحالة، وإعادة تحميل المكون. على سبيل المثال، قد يكون هذا مفيدًا إذا كنت تضبط حركة تحدث فقط عند التحميل. للقيام بذلك، يمكنك إضافة `// @refresh reset` في أي مكان في الملف الذي تقوم بتحريره. هذا التوجيه محلي للملف، ويوجه التحديث السريع لإعادة تحميل المكونات المعرفة في ذلك الملف في كل تحرير.
+- يمكنك وضع `console.log` أو `debugger;` في المكونات التي تقوم بتحريرها أثناء التطوير.
+- تذكر أن عمليات الاستيراد حساسة لحالة الأحرف. يمكن أن يفشل كل من التحديث السريع والكامل، عندما لا يتطابق الاستيراد مع اسم الملف الفعلي.
+  على سبيل المثال، `'./header'` مقابل `'./Header'`.
+
+## التحديث السريع و Hook
+
+عندما يكون ذلك ممكنًا، يحاول التحديث السريع الحفاظ على حالة مكونك بين التعديلات. على وجه الخصوص، تحتفظ `useState` و `useRef` بقيمها السابقة طالما لم تقم بتغيير وسائطها أو ترتيب استدعاءات Hook.
+
+الـ Hooks ذات التبعيات - مثل `useEffect`، `useMemo`، و `useCallback` - ستقوم _دائمًا_ بالتحديث أثناء التحديث السريع. سيتم تجاهل قائمة التبعيات الخاصة بها أثناء حدوث التحديث السريع.
+
+على سبيل المثال، عند تحرير `useMemo(() => x * 2, [x])` إلى `useMemo(() => x * 10, [x])`، سيعيد التشغيل حتى لو لم يتغير `x` (التبعية). إذا لم يفعل React ذلك، فلن ينعكس تعديلك على الشاشة!
+
+في بعض الأحيان، يمكن أن يؤدي هذا إلى نتائج غير متوقعة. على سبيل المثال، حتى `useEffect` مع مصفوفة فارغة من التبعيات ستظل تعيد التشغيل مرة واحدة أثناء التحديث السريع.
+
+ومع ذلك، فإن كتابة كود مرن لإعادة تشغيل `useEffect` العرضية هو ممارسة جيدة حتى بدون التحديث السريع. سيجعل من السهل عليك إدخال تبعيات جديدة له لاحقًا وهو مفعل بواسطة [وضع React الصارم (React Strict Mode)](/docs/pages/api-reference/next-config-js/reactStrictMode)، والذي نوصي بشدة بتفعيله.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/04-architecture/index.mdx b/apps/docs/content/ar/docs/14/04-architecture/index.mdx
new file mode 100644
index 00000000..e242971d
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/04-architecture/index.mdx
@@ -0,0 +1,8 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:13:53.469Z
+title: البنية (Architecture)
+description: كيفية عمل Next.js
+---
+
+تعرف على بنية Next.js وكيفية عملها تحت الغطاء.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/04-architecture/nextjs-compiler.mdx b/apps/docs/content/ar/docs/14/04-architecture/nextjs-compiler.mdx
new file mode 100644
index 00000000..59822d8b
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/04-architecture/nextjs-compiler.mdx
@@ -0,0 +1,323 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:16:15.965Z
+title: مترجم Next.js
+description: مترجم Next.js، مكتوب بلغة Rust، يقوم بتحويل وتصغير تطبيق Next.js الخاص بك.
+---
+
+مترجم Next.js، المكتوب بلغة Rust باستخدام [SWC](https://swc.rs/)، يسمح لـ Next.js بتحويل وتصغير كود JavaScript الخاص بك للإنتاج. هذا يحل محل Babel للملفات الفردية و Terser لتصغير حزم الإخراج.
+
+التجميع باستخدام مترجم Next.js أسرع بـ 17 مرة من Babel ومفعل افتراضيًا منذ إصدار Next.js 12. إذا كان لديك تكوين Babel موجود أو كنت تستخدم [ميزات غير مدعومة](#unsupported-features)، فسيتم استبعاد تطبيقك من مترجم Next.js وسيستمر في استخدام Babel.
+
+## لماذا SWC؟
+
+[SWC](https://swc.rs/) هو منصة قابلة للتوسيع مبنية على Rust لأدوات المطورين السريعة من الجيل التالي.
+
+يمكن استخدام SWC للتجميع والتصغير والتعبئة والمزيد - وهو مصمم ليكون قابلًا للتوسيع. إنه شيء يمكنك استدعاؤه لتنفيذ تحويلات الكود (سواء كانت مدمجة أو مخصصة). يتم تنفيذ هذه التحويلات من خلال أدوات عالية المستوى مثل Next.js.
+
+اخترنا البناء على SWC لعدة أسباب:
+
+- **القابلية للتوسيع:** يمكن استخدام SWC كـ Crate داخل Next.js، دون الحاجة إلى تفرع المكتبة أو حلول بديلة لقيود التصميم.
+- **الأداء:** تمكنا من تحقيق تحديث أسرع بـ ~3 مرات وبناء أسرع بـ ~5 مرات في Next.js عن طريق التحول إلى SWC، مع وجود مجال لمزيد من التحسينات قيد التقدم.
+- **WebAssembly:** دعم Rust لـ WASM ضروري لدعم جميع المنصات الممكنة وجعل تطوير Next.js متاحًا في كل مكان.
+- **المجتمع:** مجتمع Rust والنظام البيئي رائعون ولا يزالان في نمو.
+
+## الميزات المدعومة
+
+### Styled Components
+
+نعمل على نقل `babel-plugin-styled-components` إلى مترجم Next.js.
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم، قم بتحديث ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    styledComponents: true,
+  },
+}
+```
+
+للحالات المتقدمة، يمكنك تكوين خصائص فردية لتجميع styled-components.
+
+> ملاحظة: `minify`، `transpileTemplateLiterals` و `pure` لم يتم تنفيذها بعد. يمكنك متابعة التقدم [هنا](https://github.com/vercel/next.js/issues/30802). تحويلات `ssr` و `displayName` هي المتطلبات الرئيسية لاستخدام `styled-components` في Next.js.
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    // انظر https://styled-components.com/docs/tooling#babel-plugin لمزيد من المعلومات حول الخيارات.
+    styledComponents: {
+      // مفعل افتراضيًا في التطوير، معطل في الإنتاج لتقليل حجم الملف،
+      // تعيين هذا سيتجاوز الافتراضي لجميع البيئات.
+      displayName?: boolean,
+      // مفعل افتراضيًا.
+      ssr?: boolean,
+      // مفعل افتراضيًا.
+      fileName?: boolean,
+      // فارغ افتراضيًا.
+      topLevelImportPaths?: string[],
+      // الافتراضي هو ["index"].
+      meaninglessFileNames?: string[],
+      // مفعل افتراضيًا.
+      cssProp?: boolean,
+      // فارغ افتراضيًا.
+      namespace?: string,
+      // غير مدعوم بعد.
+      minify?: boolean,
+      // غير مدعوم بعد.
+      transpileTemplateLiterals?: boolean,
+      // غير مدعوم بعد.
+      pure?: boolean,
+    },
+  },
+}
+```
+
+### Jest
+
+يقوم مترجم Next.js بتحويل اختباراتك وتبسيط تكوين Jest مع Next.js بما في ذلك:
+
+- المحاكاة التلقائية لـ `.css`، `.module.css` (والمتغيرات `.scss` الخاصة بهم)، واستيراد الصور
+- إعداد `transform` تلقائيًا باستخدام SWC
+- تحميل `.env` (وجميع المتغيرات) إلى `process.env`
+- تجاهل `node_modules` من تحويلات الاختبار
+- تجاهل `.next` من تحويلات الاختبار
+- تحميل `next.config.js` للإشارات التي تمكن تحويلات SWC التجريبية
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم، قم بتحديث ملف `jest.config.js` الخاص بك:
+
+```js filename="jest.config.js"
+const nextJest = require('next/jest')
+
+// توفير المسار إلى تطبيق Next.js الخاص بك مما سيمكن تحميل next.config.js وملفات .env
+const createJestConfig = nextJest({ dir: './' })
+
+// أي تكوين مخصص تريد تمريره إلى Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+}
+
+// يتم تصدير createJestConfig بهذه الطريقة لضمان أن next/jest يمكنه تحميل تكوين Next.js، وهو غير متزامن
+module.exports = createJestConfig(customJestConfig)
+```
+
+### Relay
+
+لتمكين دعم [Relay](https://relay.dev/):
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    relay: {
+      // يجب أن يتطابق هذا مع relay.config.js
+      src: './',
+      artifactDirectory: './__generated__',
+      language: 'typescript',
+      eagerEsModules: false,
+    },
+  },
+}
+```
+
+> **جيد للمعرفة**: في Next.js، جميع ملفات JavaScript في دليل `pages` تعتبر مسارات. لذا، بالنسبة لـ `relay-compiler` ستحتاج إلى تحديد إعدادات تكوين `artifactDirectory` خارج `pages`، وإلا فإن `relay-compiler` سينشئ ملفات بجانب الملف المصدر في دليل `__generated__`، وسيعتبر هذا الملف مسارًا، مما سيكسر بناء الإنتاج.
+
+### إزالة خصائص React
+
+يسمح بإزالة خصائص JSX. هذا يستخدم غالبًا للاختبار. مشابه لـ `babel-plugin-react-remove-properties`.
+
+لإزالة الخصائص التي تطابق التعبير العادي الافتراضي `^data-test`:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    reactRemoveProperties: true,
+  },
+}
+```
+
+لإزالة خصائص مخصصة:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    // التعبيرات العادية المعرفة هنا تتم معالجتها في Rust لذا فإن التركيب مختلف عن
+    // JavaScript `RegExp`s. انظر https://docs.rs/regex.
+    reactRemoveProperties: { properties: ['^data-custom$'] },
+  },
+}
+```
+
+### إزالة Console
+
+هذا التحويل يسمح بإزالة جميع استدعاءات `console.*` في كود التطبيق (وليس `node_modules`). مشابه لـ `babel-plugin-transform-remove-console`.
+
+إزالة جميع استدعاءات `console.*`:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    removeConsole: true,
+  },
+}
+```
+
+إزالة إخراج `console.*` باستثناء `console.error`:
+
+```js filename="next.config.js"
+module.exports = {
+  compiler: {
+    removeConsole: {
+      exclude: ['error'],
+    },
+  },
+}
+```
+
+### Legacy Decorators
+
+سيكتشف Next.js تلقائيًا `experimentalDecorators` في `jsconfig.json` أو `tsconfig.json`. تُستخدم الديكورات القديمة بشكل شائع مع إصدارات أقدم من المكتبات مثل `mobx`.
+
+هذه العلامة مدعومة فقط لتوافق مع التطبيقات الموجودة. لا نوصي باستخدام الديكورات القديمة في التطبيقات الجديدة.
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم، قم بتحديث ملف `jsconfig.json` أو `tsconfig.json` الخاص بك:
+
+```js
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}
+```
+
+### importSource
+
+سيكتشف Next.js تلقائيًا `jsxImportSource` في `jsconfig.json` أو `tsconfig.json` وسيطبق ذلك. هذا يستخدم بشكل شائع مع مكتبات مثل [Theme UI](https://theme-ui.com).
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم، قم بتحديث ملف `jsconfig.json` أو `tsconfig.json` الخاص بك:
+
+```js
+{
+  "compilerOptions": {
+    "jsxImportSource": "theme-ui"
+  }
+}
+```
+
+### Emotion
+
+نعمل على نقل `@emotion/babel-plugin` إلى مترجم Next.js.
+
+أولاً، قم بالتحديث إلى أحدث إصدار من Next.js: `npm install next@latest`. ثم، قم بتحديث ملف `next.config.js` الخاص بك:
+
+```js filename="next.config.js"
+
+module.exports = {
+  compiler: {
+    emotion: boolean | {
+      // الافتراضي هو true. سيتم تعطيله عندما يكون نوع البناء إنتاج.
+      sourceMap?: boolean,
+      // الافتراضي هو 'dev-only'.
+      autoLabel?: 'never' | 'dev-only' | 'always',
+      // الافتراضي هو '[local]'.
+      // القيم المسموح بها: `[local]` `[filename]` و `[dirname]`
+      // هذا الخيار يعمل فقط عندما يكون autoLabel مضبوطًا على 'dev-only' أو 'always'.
+      // يسمح لك بتحديد تنسيق التسمية الناتجة.
+      // يتم تعريف التنسيق عبر سلسلة حيث يتم إحاطة الأجزاء المتغيرة بأقواس مربعة [].
+      // على سبيل المثال labelFormat: "my-classname--[local]"، حيث سيتم استبدال [local] باسم المتغير الذي يتم تعيين النتيجة إليه.
+      labelFormat?: string,
+      // الافتراضي هو undefined.
+      // هذا الخيار يسمح لك بإخبار المترجم بالواردات التي يجب
+      // أن ينظر إليها لتحديد ما يجب تحويله حتى إذا كنت تعيد تصدير
+      // صادرات Emotion، يمكنك仍然 استخدام التحويلات.
+      importMap?: {
+        [packageName: string]: {
+          [exportName: string]: {
+            canonicalImport?: [string, string],
+            styledBaseImport?: [string, string],
+          }
+        }
+      },
+    },
+  },
+}
+```
+
+### التصغير
+
+يتم استخدام مترجم swc الخاص بـ Next.js للتصغير افتراضيًا منذ الإصدار v13. هذا أسرع بـ 7 مرات من Terser.
+
+إذا كان Terser لا يزال مطلوبًا لأي سبب يمكن تكوين ذلك.
+
+```js filename="next.config.js"
+module.exports = {
+  swcMinify: false,
+}
+```
+
+### تحويل الوحدات
+
+يمكن لـ Next.js تحويل وتعبئة التبعيات تلقائيًا من الحزم المحلية (مثل monorepos) أو من التبعيات الخارجية (`node_modules`). هذا يحل محل حزمة `next-transpile-modules`.
+
+```js filename="next.config.js"
+module.exports = {
+  transpilePackages: ['@acme/ui', 'lodash-es'],
+}
+```
+
+### Modularize Imports
+
+تم استبدال هذا الخيار بـ [`optimizePackageImports`](/docs/app/api-reference/next-config-js/optimizePackageImports) في Next.js 13.5. نوصي بالترقية لاستخدام الخيار الجديد الذي لا يتطلب تكوينًا يدويًا لمسارات الاستيراد.
+
+## الميزات التجريبية
+
+### تتبع أداء SWC
+
+يمكنك إنشاء تتبع التحويلات الداخلية لـ SWC كتنسيق [trace event](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview?mode=html#%21=) لـ chromium.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    swcTraceProfiling: true,
+  },
+}
+```
+
+بمجرد التمكين، سينشئ swc تتبعًا باسم `swc-trace-profile-${timestamp}.json` تحت `.next/`. يمكن لمشاهد تتبع chromium (chrome://tracing/, https://ui.perfetto.dev/)، أو مشاهد flamegraph المتوافقة (https://www.speedscope.app/) تحميل وتصور التتبعات المولدة.
+
+### إضافات SWC (تجريبي)
+
+يمكنك تكوين تحويل swc لاستخدام دعم الإضافات التجريبي لـ SWC المكتوب بـ wasm لتخصيص سلوك التحويل.
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    swcPlugins: [
+      [
+        'plugin',
+        {
+          ...pluginOptions,
+        },
+      ],
+    ],
+  },
+}
+```
+
+يقبل `swcPlugins` مصفوفة من tuples لتكوين الإضافات. يحتوي tuple للإضافة على مسار الإضافة وكائن لتكوين الإضافة. يمكن أن يكون مسار الإضافة اسم حزمة npm أو مسارًا مطلقًا إلى الملف الثنائي `.wasm` نفسه.
+
+## الميزات غير المدعومة
+
+عندما يحتوي تطبيقك على ملف `.babelrc`، سيعود Next.js تلقائيًا إلى استخدام Babel لتحويل الملفات الفردية. هذا يضمن التوافق مع التطبيقات الحالية التي تستخدم إضافات Babel المخصصة.
+
+إذا كنت تستخدم إعداد Babel مخصصًا، [يرجى مشاركة تكوينك](https://github.com/vercel/next.js/discussions/30174). نحن نعمل على نقل أكبر عدد ممكن من تحويلات Babel الشائعة، وكذلك دعم الإضافات في المستقبل.
+
+## سجل الإصدارات
+
+| الإصدار   | التغييرات                                                                                                                                                                                                  |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.1.0` | [تحويل الوحدات](https://nextjs.org/blog/next-13-1#built-in-module-transpilation-stable) و [Modularize Imports](https://nextjs.org/blog/next-13-1#import-resolution-for-smaller-bundles) أصبحا مستقرين. |
+| `v13.0.0` | تم تفعيل مصغر SWC افتراضيًا.                                                                                                                                                                         |
+| `v12.3.0` | مصغر SWC [مستقر](https://nextjs.org/blog/next-12-3#swc-minifier-stable).                                                                                                                            |
+| `v12.2.0` | تمت إضافة دعم تجريبي لـ [إضافات SWC](#swc-plugins-experimental).                                                                                                                                     |
+| `v12.1.0` | تمت إضافة دعم لـ Styled Components، Jest، Relay، إزالة خصائص React، الديكورات القديمة، إزالة Console، و jsxImportSource.                                                                       |
+| `v12.0.0` | تم [تقديم](https://nextjs.org/blog/next-12) مترجم Next.js.                                                                                                                                          |
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/04-architecture/supported-browsers.mdx b/apps/docs/content/ar/docs/14/04-architecture/supported-browsers.mdx
new file mode 100644
index 00000000..4e530fdb
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/04-architecture/supported-browsers.mdx
@@ -0,0 +1,68 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:30.115Z
+title: المتصفحات المدعومة
+description: دعم المتصفحات وميزات JavaScript المدعومة من قبل Next.js.
+---
+
+يدعم Next.js **المتصفحات الحديثة** بدون أي تكوين إضافي.
+
+- Chrome 64+
+- Edge 79+
+- Firefox 67+
+- Opera 51+
+- Safari 12+
+
+## Browserslist
+
+إذا كنت ترغب في استهداف متصفحات أو ميزات محددة، يدعم Next.js تكوين [Browserslist](https://browsersl.ist) في ملف `package.json`. يستخدم Next.js تكوين Browserslist التالي افتراضيًا:
+
+```json filename="package.json"
+{
+  "browserslist": [
+    "chrome 64",
+    "edge 79",
+    "firefox 67",
+    "opera 51",
+    "safari 12"
+  ]
+}
+```
+
+## Polyfills
+
+نقوم بحقن [polyfills شائعة الاستخدام](https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js)، بما في ذلك:
+
+- [**fetch()**](https://developer.mozilla.org/docs/Web/API/Fetch_API) — بديل عن: `whatwg-fetch` و `unfetch`.
+- [**URL**](https://developer.mozilla.org/docs/Web/API/URL) — بديل عن: [حزمة `url` (واجهة برمجة تطبيقات Node.js)](https://nodejs.org/api/url.html).
+- [**Object.assign()**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) — بديل عن: `object-assign` و `object.assign` و `core-js/object/assign`.
+
+إذا كانت أي من التبعيات الخاصة بك تتضمن هذه الـ polyfills، فسيتم إزالتها تلقائيًا من بناء الإنتاج لتجنب التكرار.
+
+بالإضافة إلى ذلك، لتقليل حجم الحزمة، سيقوم Next.js بتحميل هذه الـ polyfills فقط للمتصفحات التي تتطلبها. غالبية حركة المرور على الويب عالميًا لن تقوم بتنزيل هذه الـ polyfills.
+
+### Polyfills مخصصة
+
+إذا كان الكود الخاص بك أو أي تبعيات npm خارجية تتطلب ميزات غير مدعومة من قبل المتصفحات المستهدفة (مثل IE 11)، فستحتاج إلى إضافة الـ polyfills بنفسك.
+
+في هذه الحالة، يجب عليك إضافة استيراد على مستوى أعلى لـ **polyfill محدد** تحتاجه في [مكون `<App>` المخصص](/docs/pages/building-your-application/routing/custom-app) أو المكون الفردي.
+
+## ميزات لغة JavaScript
+
+يسمح لك Next.js باستخدام أحدث ميزات JavaScript مباشرةً. بالإضافة إلى [ميزات ES6](https://github.com/lukehoban/es6features)، يدعم Next.js أيضًا:
+
+- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017)
+- [خاصية Rest/Spread للكائنات](https://github.com/tc39/proposal-object-rest-spread) (ES2018)
+- [استيراد ديناميكي `import()`](https://github.com/tc39/proposal-dynamic-import) (ES2020)
+- [سلسلة اختيارية Optional Chaining](https://github.com/tc39/proposal-optional-chaining) (ES2020)
+- [الدمج الصفري Nullish Coalescing](https://github.com/tc39/proposal-nullish-coalescing) (ES2020)
+- [حقول الفئة Class Fields](https://github.com/tc39/proposal-class-fields) و [الخصائص الثابتة Static Properties](https://github.com/tc39/proposal-static-class-features) (ES2022)
+- والمزيد!
+
+### ميزات TypeScript
+
+يحتوي Next.js على دعم مدمج لـ TypeScript. [تعلم المزيد هنا](/docs/pages/building-your-application/configuring/typescript).
+
+### تخصيص تكوين Babel (متقدم)
+
+يمكنك تخصيص تكوين babel. [تعلم المزيد هنا](/docs/pages/building-your-application/configuring/babel).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/04-architecture/turbopack.mdx b/apps/docs/content/ar/docs/14/04-architecture/turbopack.mdx
new file mode 100644
index 00000000..ea456236
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/04-architecture/turbopack.mdx
@@ -0,0 +1,64 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:37.497Z
+title: Turbopack
+description: Turbopack هو حزمة تجميع تدريجية مُحسنة لجافاسكريبت وتايبسكريبت، مكتوبة بلغة Rust ومدمجة في Next.js.
+---
+
+[Turbopack](https://turbo.build/pack) (بيتا) هو حزمة تجميع تدريجية مُحسنة لجافاسكريبت وتايبسكريبت، مكتوبة بلغة Rust ومدمجة في Next.js.
+
+## الاستخدام
+
+يمكن استخدام Turbopack في Next.js ضمن كل من دليل `pages` و`app` لتسريع التطوير المحلي. لتفعيل Turbopack، استخدم العلامة `--turbo` عند تشغيل خادم التطوير في Next.js.
+
+```json filename="package.json" highlight={3}
+{
+  "scripts": {
+    "dev": "next dev --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
+```
+
+## الميزات المدعومة
+
+لا يحتاج Turbopack في Next.js إلى أي تكوين لمعظم المستخدمين ويمكن توسيعه لحالات استخدام أكثر تقدمًا. لمعرفة المزيد عن الميزات المدعومة حاليًا في Turbopack، راجع [مرجع API](/docs/app/api-reference/next-config-js/turbo).
+
+## الميزات غير المدعومة
+
+يدعم Turbopack حاليًا فقط `next dev` ولا يدعم `next build`. نحن نعمل حاليًا على دعم عمليات البناء مع اقترابنا من الاستقرار.
+
+هذه الميزات غير مدعومة حاليًا:
+
+- تكوين [`webpack()`](/docs/app/api-reference/next-config-js/webpack) في `next.config.js`
+  - يحل Turbopack محل Webpack، مما يعني أن تكوين Webpack غير مدعوم.
+  - لتكوين Turbopack، [راجع الوثائق](/docs/app/api-reference/next-config-js/turbo).
+  - مجموعة فرعية من [حَمّالات Webpack](/docs/app/api-reference/next-config-js/turbo#webpack-loaders) مدعومة في Turbopack.
+- Babel (`.babelrc`)
+  - يستخدم Turbopack مترجم [SWC](/docs/architecture/nextjs-compiler#why-swc) لجميع عمليات التحويل والتحسينات. هذا يعني أن Babel غير مضمن افتراضيًا.
+  - إذا كان لديك ملف `.babelrc`، فقد لا تحتاج إليه بعد الآن لأن Next.js يتضمن إضافات Babel الشائعة كتحويلات SWC يمكن تفعيلها. يمكنك قراءة المزيد عن هذا في [وثائق المترجم](docs/architecture/nextjs-compiler#supported-features).
+  - إذا كنت لا تزال بحاجة إلى استخدام Babel بعد التحقق من أن حالة استخدامك غير مغطاة، يمكنك الاستفادة من [دعم Turbopack لحَمّالات Webpack المخصصة](/docs/app/api-reference/next-config-js/turbo#webpack-loaders) لتضمين `babel-loader`.
+- إنشاء تخطيط جذر تلقائيًا في App Router.
+  - هذا السلوك غير مدعوم حاليًا لأنه يغير ملفات الإدخال، بدلاً من ذلك، سيظهر خطأ يطلب منك إضافة تخطيط جذر يدويًا في الموقع المطلوب.
+- `@next/font` (دعم الخطوط القديم).
+  - `@next/font` لم يعد مدعومًا ويُفضل استخدام `next/font`. [`next/font`](/docs/app/building-your-application/optimizing/fonts) مدعوم بالكامل مع Turbopack.
+- `new Worker('file', import.meta.url)`.
+  - نخطط لتنفيذ هذه الميزة في المستقبل.
+- [تحويلات Relay](/docs/architecture/nextjs-compiler#relay)
+  - نخطط لتنفيذ هذه الميزة في المستقبل.
+- `experimental.nextScriptWorkers`
+  - نخطط لتنفيذ هذه الميزة في المستقبل.
+- [AMP](/docs/pages/building-your-application/configuring/amp).
+  - لا نخطط حاليًا لدعم AMP في Next.js مع Turbopack.
+- Yarn PnP
+  - لا نخطط حاليًا لدعم Yarn PnP في Next.js مع Turbopack.
+- [`experimental.urlImports`](/docs/app/api-reference/next-config-js/urlImports)
+  - لا نخطط حاليًا لدعم `experimental.urlImports` في Next.js مع Turbopack.
+
+## إنشاء ملفات التتبع
+
+تسمح ملفات التتبع لفريق Next.js بالتحقيق في مقاييس الأداء وتحسينها. لإنشاء ملف تتبع، أضف `NEXT_TURBOPACK_TRACING=1` إلى أمر `next dev --turbo`، وسيتم إنشاء ملف `.next/trace.log`.
+
+عند الإبلاغ عن مشكلات تتعلق بأداء Turbopack واستخدام الذاكرة، يرجى تضمين ملف التتبع في [إصدار GitHub](https://github.com/vercel/next.js).
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/05-community/01-contribution-guide.mdx b/apps/docs/content/ar/docs/14/05-community/01-contribution-guide.mdx
new file mode 100644
index 00000000..16e55dc2
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/05-community/01-contribution-guide.mdx
@@ -0,0 +1,411 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:17:38.863Z
+title: دليل المساهمة في التوثيق
+nav_title: دليل المساهمة
+description: تعلم كيفية المساهمة في توثيق Next.js
+---
+
+مرحبًا بك في دليل المساهمة في توثيق Next.js! نحن متحمسون لوجودك هنا.
+
+توفر هذه الصفحة تعليمات حول كيفية تحرير توثيق Next.js. هدفنا هو تمكين كل فرد في المجتمع من المساهمة وتحسين التوثيق.
+
+## لماذا تشارك؟
+
+العمل مفتوح المصدر لا ينتهي أبدًا، وكذلك التوثيق. تعد المساهمة في التوثيق طريقة جيدة للمبتدئين للانخراط في المصادر المفتوحة وللمطورين ذوي الخبرة لتوضيح المواضيع الأكثر تعقيدًا أثناء مشاركة معرفتهم مع المجتمع.
+
+من خلال المساهمة في توثيق Next.js، أنت تساعدنا في بناء مصدر تعليمي أكثر قوة لجميع المطورين. سواء وجدت خطأً مطبعيًا، أو قسمًا غير واضح، أو لاحظت أن موضوعًا معينًا مفقود، فإن مساهماتك مرحب بها ومقدرة.
+
+## كيفية المساهمة
+
+يمكن العثور على محتوى التوثيق في [مستودع Next.js](https://github.com/vercel/next.js/tree/canary/docs). للمساهمة، يمكنك تحرير الملفات مباشرة على GitHub أو استنساخ المستودع وتحرير الملفات محليًا.
+
+### سير العمل على GitHub
+
+إذا كنت جديدًا على GitHub، نوصي بقراءة [دليل المصادر المفتوحة على GitHub](https://opensource.guide/how-to-contribute/#opening-a-pull-request) لتعلم كيفية تفرع مستودع، وإنشاء فرع، وإرسال طلب سحب.
+
+> **معلومة مفيدة**: يعيش كود التوثيق الأساسي في قاعدة كود خاصة تتم مزامنتها مع المستودع العام لـ Next.js. هذا يعني أنه لا يمكنك معاينة التوثيق محليًا. ومع ذلك، ستشاهد تغييراتك على [nextjs.org](https://nextjs.org/docs) بعد دمج طلب السحب.
+
+### كتابة MDX
+
+يتم كتابة التوثيق باستخدام [MDX](https://mdxjs.com/)، وهو تنسيق ماركداون يدعم تركيب JSX. هذا يسمح لنا بتضمين مكونات React في التوثيق. راجع [دليل ماركداون على GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) للحصول على نظرة سريعة على تركيب ماركداون.
+
+### VSCode
+
+#### معاينة التغييرات محليًا
+
+يحتوي VSCode على معاين مدمج لملفات ماركداون يمكنك استخدامه لرؤية تحريراتك محليًا. لتمكين المعاين لملفات MDX، ستحتاج إلى إضافة خيار تكوين إلى إعدادات المستخدم.
+
+افتح لوحة الأوامر (`⌘ + ⇧ + P` على Mac أو `Ctrl + Shift + P` على Windows) وابحث عن `Preferences: Open User Settings (JSON)`.
+
+ثم أضف السطر التالي إلى ملف `settings.json`:
+
+```json filename="settings.json"
+{
+  "files.associations": {
+    "*.mdx": "markdown"
+  }
+}
+```
+
+بعد ذلك، افتح لوحة الأوامر مرة أخرى، وابحث عن `Markdown: Preview File` أو `Markdown: Open Preview to the Side`. سيؤدي هذا إلى فتح نافذة معاينة حيث يمكنك رؤية التغييرات المنسقة.
+
+#### الامتدادات
+
+نوصي أيضًا بالامتدادات التالية لمستخدمي VSCode:
+
+- [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx): ذكاء اصطناعي وتمييز تركيب لـ MDX.
+- [Grammarly](https://marketplace.visualstudio.com/items?itemName=znck.grammarly): مدقق قواعد وإملاء.
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): تنسيق ملفات MDX عند الحفظ.
+
+### عملية المراجعة
+
+بمجرد إرسال مساهمتك، سيقوم فريق Next.js أو فريق تجربة المطورين بمراجعة تغييراتك، وتقديم ملاحظات، ودمج طلب السحب عندما يكون جاهزًا.
+
+يرجى إعلامنا إذا كان لديك أي أسئلة أو تحتاج إلى مزيد من المساعدة في تعليقات طلب السحب الخاص بك. شكرًا لك على المساهمة في توثيق Next.js وعلى كونك جزءًا من مجتمعنا!
+
+> **نصيحة**: قم بتشغيل `pnpm prettier-fix` لتشغيل Prettier قبل إرسال طلب السحب الخاص بك.
+
+## هيكل الملفات
+
+يستخدم التوثيق **توجيه نظام الملفات**. يمثل كل مجلد وملف داخل [`/docs`](https://github.com/vercel/next.js/tree/canary/docs) مقطع مسار. تستخدم هذه المقاطع لتوليد مسارات URL، والتنقل، وفتات الخبز.
+
+يعكس هيكل الملفات التنقل الذي تراه على الموقع، وبشكل افتراضي، يتم فرز عناصر التنقل أبجديًا. ومع ذلك، يمكننا تغيير ترتيب العناصر عن طريق إضافة رقم مكون من خانتين (`00-`) إلى اسم المجلد أو الملف.
+
+على سبيل المثال، في [مرجع واجهة برمجة التطبيقات للوظائف](/docs/app/api-reference/functions)، يتم فرز الصفحات أبجديًا لأنه يسهل على المطورين العثور على وظيفة محددة:
+
+```txt
+03-functions
+├── cookies.mdx
+├── draft-mode.mdx
+├── fetch.mdx
+└── ...
+```
+
+ولكن في قسم [التوجيه](/docs/app/building-your-application/routing)، يتم إضافة رقم مكون من خانتين كبادئة للملفات، مرتبة بالترتيب الذي يجب أن يتعلم فيه المطورون هذه المفاهيم:
+
+```txt
+02-routing
+├── 01-defining-routes.mdx
+├── 02-pages-and-layouts.mdx
+├── 03-linking-and-navigating.mdx
+└── ...
+```
+
+للعثور بسرعة على صفحة، يمكنك استخدام `⌘ + P` (Mac) أو `Ctrl + P` (Windows) لفتح شريط البحث في VSCode. ثم اكتب slug الخاص بالصفحة التي تبحث عنها. على سبيل المثال `defining-routes`
+
+> **لماذا لا نستخدم ملف تعريف؟**
+>
+> لقد نظرنا في استخدام ملف تعريف (طريقة أخرى شائعة لتوليد تنقل التوثيق)، لكننا وجدنا أن ملف التعريف سيفقد التزامن بسرعة مع الملفات. يجبرنا توجيه نظام الملفات على التفكير في هيكل التوثيق ويبدو أكثر أصالة لـ Next.js.
+
+## البيانات الوصفية
+
+تحتوي كل صفحة على كتلة بيانات وصفية في أعلى الملف مفصولة بثلاثة شرطات.
+
+### الحقول المطلوبة
+
+الحقول التالية **مطلوبة**:
+
+| الحقل         | الوصف                                                                  |
+| ------------- | ---------------------------------------------------------------------------- |
+| `title`       | عنوان `<h1>` للصفحة، يستخدم لتحسين محركات البحث (SEO) وصور OG.              |
+| `description` | وصف الصفحة، يستخدم في وسم `<meta name="description">` لتحسين محركات البحث.  |
+
+```yaml filename="required-fields.mdx"
+---
+title: عنوان الصفحة
+description: وصف الصفحة
+---
+```
+
+من الجيد تحديد عنوان الصفحة إلى 2-3 كلمات (مثل تحسين الصور) والوصف إلى 1-2 جملة (مثل تعلم كيفية تحسين الصور في Next.js).
+
+### الحقول الاختيارية
+
+الحقول التالية **اختيارية**:
+
+| الحقل       | الوصف                                                                                                                                        |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `nav_title` | يتجاوز عنوان الصفحة في التنقل. هذا مفيد عندما يكون عنوان الصفحة طويلًا جدًا ليتناسب. إذا لم يتم توفيره، يتم استخدام حقل `title`.                |
+| `source`    | يسحب المحتوى إلى صفحة مشتركة. راجع [الصفحات المشتركة](#shared-pages).                                                                             |
+| `related`   | قائمة بالصفحات ذات الصلة في أسفل المستند. سيتم تحويلها تلقائيًا إلى بطاقات. راجع [الروابط ذات الصلة](#related-links).                             |
+
+```yaml filename="optional-fields.mdx"
+---
+nav_title: عنوان عنصر التنقل
+source: app/building-your-application/optimizing/images
+related:
+  description: راجع مرجع واجهة برمجة التطبيقات لمكون الصورة.
+  links:
+    - app/api-reference/components/image
+---
+```
+
+## توثيق `App` و `Pages`
+
+نظرًا لأن معظم الميزات في **موجه التطبيق (App Router)** و **موجه الصفحات (Pages Router)** مختلفة تمامًا، يتم الاحتفاظ بتوثيق كل منها في أقسام منفصلة (`02-app` و `03-pages`). ومع ذلك، هناك بعض الميزات المشتركة بينهما.
+
+### الصفحات المشتركة
+
+لتجنب تكرار المحتوى وخطر عدم التزامن، نستخدم حقل `source` لسحب المحتوى من صفحة إلى أخرى. على سبيل المثال، يتصرف مكون `<Link>` بشكل متشابه إلى حد كبير في **التطبيق** و **الصفحات**. بدلاً من تكرار المحتوى، يمكننا سحب المحتوى من `app/.../link.mdx` إلى `pages/.../link.mdx`:
+
+```mdx filename="app/.../link.mdx"
+---
+title: <Link>
+description: مرجع واجهة برمجة التطبيقات لمكون <Link>.
+---
+
+سيساعدك مرجع واجهة برمجة التطبيقات هذا في فهم كيفية استخدام الخصائص
+وخيارات التكوين المتاحة لمكون Link.
+```
+
+```mdx filename="pages/.../link.mdx"
+---
+title: <Link>
+description: مرجع واجهة برمجة التطبيقات لمكون <Link>.
+source: app/api-reference/components/link
+---
+
+{/* لا تقم بتحرير هذه الصفحة. */}
+{/* يتم سحب محتوى هذه الصفحة من المصدر أعلاه. */}
+```
+
+يمكننا therefore تحرير المحتوى في مكان واحد وينعكس في كلا القسمين.
+
+### المحتوى المشترك
+
+في الصفحات المشتركة، قد يكون هناك أحيانًا محتوى خاص بـ **موجه التطبيق** أو **موجه الصفحات**. على سبيل المثال، يحتوي مكون `<Link>` على خاصية `shallow` متاحة فقط في **الصفحات** وليس في **التطبيق**.
+
+للتأكد من ظهور المحتوى فقط في الموجه الصحيح، يمكننا لف كتل المحتوى في مكونات `<AppOnly>` أو `<PagesOnly>`:
+
+```mdx filename="app/.../link.mdx"
+هذا المحتوى مشترك بين التطبيق والصفحات.
+
+<PagesOnly>
+
+هذا المحتوى سيظهر فقط في توثيق الصفحات.
+
+</PagesOnly>
+
+هذا المحتوى مشترك بين التطبيق والصفحات.
+```
+
+من المحتمل أن تستخدم هذه المكونات للأمثلة وكتل الكود.
+
+## كتل الكود
+
+يجب أن تحتوي كتل الكود على مثال عمل أدنى يمكن نسخه ولصقه. هذا يعني أن الكود يجب أن يعمل دون أي تكوين إضافي.
+
+على سبيل المثال، إذا كنت تظهر كيفية استخدام مكون `<Link>`، يجب أن تتضمن عبارة `import` والمكون `<Link>` نفسه.
+
+```tsx filename="app/page.tsx"
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+قم دائمًا بتشغيل الأمثلة محليًا قبل إرسالها. هذا سيضمن أن الكود محدث ويعمل.
+
+### اللغة واسم الملف
+
+يجب أن تحتوي كتل الكود على رأس يتضمن اللغة و `filename`. أضف خاصية `filename` لعرض أيقونة Terminal خاصة تساعد المستخدمين في معرفة مكان إدخال الأمر. على سبيل المثال:
+
+````mdx filename="code-example.mdx"
+```bash filename="Terminal"
+npx create-next-app
+```
+````
+
+معظم الأمثلة في التوثيق مكتوبة بـ `tsx` و `jsx`، وبعضها بـ `bash`. ومع ذلك، يمكنك استخدام أي لغة مدعومة، إليك [القائمة الكاملة](https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages).
+
+عند كتابة كتل كود JavaScript، نستخدم مجموعات اللغة والامتداد التالية.
+
+|                                | اللغة | الامتداد |
+| ------------------------------ | -------- | --------- |
+| ملفات JavaScript مع كود JSX | ```jsx   | .js       |
+| ملفات JavaScript بدون JSX   | ```js    | .js       |
+| ملفات TypeScript مع JSX      | ```tsx   | .tsx      |
+| ملفات TypeScript بدون JSX   | ```ts    | .ts       |
+
+### مبدل TS و JS
+
+أضف مبدل لغة للتبديل بين TypeScript و JavaScript. يجب أن تكون كتل الكود TypeScript أولاً مع نسخة JavaScript لاستيعاب المستخدمين.
+
+حاليًا، نكتب أمثلة TS و JS واحدًا تلو الآخر، ونربطها بخاصية `switcher`:
+
+````mdx filename="code-example.mdx"
+```tsx filename="app/page.tsx" switcher
+
+```
+
+```jsx filename="app/page.js" switcher
+
+```
+````
+
+> **معلومة مفيدة**: نخطط لتجميع مقاطع TypeScript تلقائيًا إلى JavaScript في المستقبل. في الوقت الحالي، يمكنك استخدام [transform.tools](https://transform.tools/typescript-to-javascript).
+
+### تمييز الأسطر
+
+يمكن تمييز أسطر الكود. هذا مفيد عندما تريد جذب الانتباه إلى جزء معين من الكود. يمكنك تمييز الأسطر عن طريق تمرير رقم إلى خاصية `highlight`.
+
+**سطر واحد:** `highlight={1}`
+
+```tsx filename="app/page.tsx" {1}
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+**أسطر متعددة:** `highlight={1,3}`
+
+```tsx filename="app/page.tsx" highlight={1,3}
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+**نطاق الأسطر:** `highlight={1-5}`
+
+```tsx filename="app/page.tsx" highlight={1-5}
+import Link from 'next/link'
+
+export default function Page() {
+  return <Link href="/about">About</Link>
+}
+```
+
+## الأيقونات
+
+الأيقونات التالية متاحة للاستخدام في التوثيق:
+
+```mdx filename="mdx-icon.mdx"
+<Check size={18} />
+<Cross size={18} />
+```
+
+**المخرجات:**
+
+<Check size={18} />
+<Cross size={18} />
+
+نحن لا نستخدم الرموز التعبيرية في التوثيق.
+
+## الملاحظات
+
+للمعلومات المهمة ولكن غير الحرجة، استخدم الملاحظات. الملاحظات طريقة جيدة لإضافة معلومات دون تشتيت المستخدم عن المحتوى الرئيسي.
+
+```mdx filename="notes.mdx"
+> **معلومة مفيدة**: هذه ملاحظة بسطر واحد.
+
+> **معلومة مفيدة**:
+>
+> - نستخدم أيضًا هذا التنسيق للملاحظات متعددة الأسطر.
+> - هناك أحيانًا عناصر متعددة تستحق المعرفة أو تذكرها.
+```
+
+**المخرجات:**
+
+> **معلومة مفيدة**: هذه ملاحظة بسطر واحد.
+
+> **معلومة مفيدة**:
+>
+> - نستخدم أيضًا هذا التنسيق للملاحظات متعددة الأسطر.
+> - هناك أحيانًا عناصر متعددة تستحق المعرفة أو تذكرها.
+
+## الروابط ذات الصلة
+
+توجه الروابط ذات الصلة رحلة تعلم المستخدم عن طريق إضافة روابط للخطوات التالية المنطقية.
+
+- ستظهر الروابط في بطاقات أسفل المحتوى الرئيسي للصفحة.
+- سيتم إنشاء الروابط تلقائيًا للصفحات التي تحتوي على صفحات فرعية. على سبيل المثال، يحتوي قسم [التحسين](/docs/app/building-your-application/optimizing) على روابط لجميع صفحاته الفرعية.
+
+قم بإنشاء روابط ذات صلة باستخدام حقل `related` في البيانات الوصفية للصفحة.
+
+```yaml filename="example.mdx"
+---
+related:
+  description: تعلم كيفية البدء بسرعة بتطبيقك الأول.
+  links:
+    - app/building-your-application/routing/defining-routes
+    - app/building-your-application/data-fetching
+    - app/api-reference/file-conventions/page
+---
+```
+
+### الحقول المتداخلة
+
+| الحقل         | مطلوب؟ | الوصف                                                                                                                                               |
+| ------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`       | اختياري  | عنوان قائمة البطاقات. الافتراضي هو **الخطوات التالية**.                                                                                                   |
+| `description` | اختياري  | وصف قائمة البطاقات.                                                                                                                         |
+| `links`       | مطلوب  | قائمة بالروابط لصفحات توثيق أخرى. يجب أن يكون كل عنصر في القائمة مسار URL نسبي (بدون شرطة مائلة في البداية) مثل `app/api-reference/file-conventions/page` |
+
+## المخططات
+
+المخططات طريقة رائعة لشرح المفاهيم المعقدة. نستخدم [Figma](https://www.figma.com/) لإنشاء مخططات، باتباع دليل تصميم Vercel.
+
+توجد المخططات حاليًا في مجلد `/public` في موقع Next.js الخاص بنا. إذا كنت ترغب في تحديث أو إضافة مخطط، يرجى فتح [مشكلة على GitHub](https://github.com/vercel/next.js/issues/new?assignees=&labels=template%3A+documentation&projects=&template=4.docs_request.yml&title=Docs%3A+) مع أفكارك.
+
+## المكونات المخصصة و HTML
+
+هذه هي مكونات React المتاحة للتوثيق: `<Image />` (next/image)، `<PagesOnly />`، `<AppOnly />`، `<Cross />`، و `<Check />`. لا نسمح بـ HTML خام في التوثيق بخلاف وسم `<details>`.
+
+إذا كانت لديك أفكار لمكونات جديدة، يرجى فتح [مشكلة على GitHub](https://github.com/vercel/next.js/issues/new/choose).
+
+## دليل الأسلوب
+
+يحتوي هذا القسم على إرشادات لكتابة التوثيق لأولئك الجدد في الكتابة التقنية.
+
+### قوالب الصفحات
+
+بينما ليس لدينا قالب صارم للصفحات، هناك أقسام صفحات ستشاهدها متكررة عبر التوثيق:
+
+- **نظرة عامة:** يجب أن تخبر الفقرة الأولى من الصفحة المستخدم بماهية الميزة وما تستخدم له. متبوعة بمثال عمل أدنى أو مرجع واجهة برمجة التطبيقات الخاصة بها.
+- **الاتفاقية:** إذا كانت الميزة لها اتفاقية، يجب شرحها هنا.
+- **أمثلة**: عرض كيفية استخدام الميزة مع حالات استخدام مختلفة.
+- **جداول واجهة برمجة التطبيقات**: يجب أن تحتوي صفحات واجهة برمجة التطبيقات على جدول نظرة عامة في أسفل الصفحة مع روابط القفز إلى الأقسام (عند الإمكان).
+- **الخطوات التالية (الروابط ذات الصلة)**: أضف روابط للصفحات ذات الصلة لتوجيه رحلة تعلم المستخدم.
+
+لا تتردد في إضافة هذه الأقسام حسب الحاجة.
+
+### أنواع الصفحات
+
+تنقسم صفحات التوثيق إلى فئتين: المفاهيمية والمرجعية.
+
+- **الصفحات المفاهيمية**: تُستخدم لشرح مفهوم أو ميزة. عادةً ما تكون أطول وتحتوي على معلومات أكثر من الصفحات المرجعية. في توثيق Next.js، توجد الصفحات المفاهيمية في قسم **بناء تطبيقك**.
+- **الصفحات المرجعية**: تُستخدم لشرح واجهة برمجة تطبيقات (API) محددة. عادةً ما تكون أقصر وأكثر تركيزًا. في توثيق Next.js، توجد الصفحات المرجعية في قسم **مرجع API**.
+
+> **من الجيد معرفة**: اعتمادًا على الصفحة التي تساهم فيها، قد تحتاج إلى اتباع أسلوب وصوت مختلف. على سبيل المثال، الصفحات المفاهيمية أكثر إرشادية وتستخدم كلمة _أنت_ لخطاب المستخدم. بينما الصفحات المرجعية أكثر تقنية، تستخدم كلمات أمرية مثل "أنشئ، حدّث، اقبل" وتميل إلى حذف كلمة _أنت_.
+
+### الصوت والأسلوب
+
+إليك بعض الإرشادات للحفاظ على أسلوب وصوت متسق عبر التوثيق:
+
+- اكتب جملًا واضحة وموجزة. تجنب الاستطراد.
+  - إذا وجدت نفسك تستخدم الكثير من الفواصل، فكر في تقسيم الجملة إلى جمل متعددة أو استخدام قائمة.
+  - استبدل الكلمات المعقدة بأخرى أبسط. على سبيل المثال، _استخدم_ بدلاً من _استغل_.
+- كن حذرًا مع كلمة _هذا_. يمكن أن تكون غامضة ومربكة، لا تتردد في تكرار موضوع الجملة إذا كان غير واضح.
+  - على سبيل المثال، _"Next.js يستخدم React"_ بدلاً من _"Next.js يستخدم هذا"_.
+- استخدم الصوت الفاعل بدلاً من المبني للمجهول. الجملة الفاعلة أسهل في القراءة.
+  - على سبيل المثال، _"Next.js يستخدم React"_ بدلاً من _"React يُستخدم بواسطة Next.js"_. إذا وجدت نفسك تستخدم كلمات مثل _تم_ و_بواسطة_ فقد تكون تستخدم صوتًا مبنيًا للمجهول.
+- تجنب استخدام كلمات مثل _سهل_، _سريع_، _بسيط_، _فقط_، إلخ. هذه مصطلحات ذاتية ويمكن أن تكون محبطة للمستخدمين.
+- تجنب الكلمات السلبية مثل _لا_، _لا يمكن_، _لن_، إلخ. يمكن أن تكون محبطة للقراء.
+  - على سبيل المثال، _"يمكنك استخدام مكون `Link` لإنشاء روابط بين الصفحات"_ بدلاً من _"لا تستخدم وسم `<a>` لإنشاء روابط بين الصفحات"_.
+- اكتب بصيغة المخاطب (أنت/لك). هذا أكثر شخصية وجذبًا.
+- استخدم لغة محايدة جندريًا. استخدم _المطورون_، _المستخدمون_، أو _القراء_ عند الإشارة إلى الجمهور.
+- إذا كنت تضيف أمثلة برمجية، تأكد من تنسيقها بشكل صحيح وأنها تعمل.
+
+بينما هذه الإرشادات ليست شاملة، إلا أنها يجب أن تساعدك على البدء. إذا كنت ترغب في التعمق أكثر في الكتابة التقنية، تحقق من [دورة الكتابة التقنية من جوجل](https://developers.google.com/tech-writing/overview).
+
+---
+
+شكرًا لك على المساهمة في التوثيق وكونك جزءًا من مجتمع Next.js!
+
+{/* للمراجعة: مكون أحدث المساهمين */}
diff --git a/apps/docs/content/ar/docs/14/05-community/index.mdx b/apps/docs/content/ar/docs/14/05-community/index.mdx
new file mode 100644
index 00000000..934fb859
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/05-community/index.mdx
@@ -0,0 +1,33 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:12.356Z
+title: مجتمع Next.js
+nav_title: المجتمع
+description: انضم إلى مجتمع Next.js وساهم فيه.
+---
+
+مع أكثر من 5 ملايين تحميل أسبوعيًا، يمتلك Next.js مجتمعًا كبيرًا ونشطًا من المطورين حول العالم. إليك كيف يمكنك المشاركة في مجتمعنا:
+
+## المساهمة
+
+هناك عدة طرق يمكنك من خلالها المساهمة في تطوير Next.js:
+
+- [التوثيق](/docs/community/contribution-guide): اقترح تحسينات أو حتى اكتب أقسامًا جديدة لمساعدة المستخدمين على فهم كيفية استخدام Next.js.
+- [الأمثلة](https://github.com/vercel/next.js/tree/canary/contributing/examples): ساعد المطورين على دمج Next.js مع أدوات وخدمات أخرى عن طريق إنشاء مثال جديد أو تحسين مثال موجود.
+- [قاعدة الكود](https://github.com/vercel/next.js/tree/canary/contributing/core): تعرف أكثر على البنية التحتية، وساهم في إصلاح الأخطاء، واقترح ميزات جديدة.
+
+## المناقشات
+
+إذا كان لديك سؤال حول Next.js، أو تريد مساعدة الآخرين، فأنت مرحب بك دائمًا في الانضمام إلى النقاش:
+
+- [مناقشات GitHub](https://github.com/vercel/next.js/discussions)
+- [Discord](https://discord.com/invite/bUG2bvbtHy)
+- [Reddit](https://www.reddit.com/r/nextjs)
+
+## وسائل التواصل الاجتماعي
+
+تابع Next.js على [تويتر](https://twitter.com/nextjs) للحصول على آخر التحديثات، واشترك في [قناة Vercel على YouTube](https://www.youtube.com/@VercelHQ) لمشاهدة مقاطع الفيديو الخاصة بـ Next.js.
+
+## مدونة السلوك
+
+نؤمن بخلق مجتمع شامل ومرحب. لذلك، نطلب من جميع الأعضاء الالتزام بـ [مدونة السلوك](https://github.com/vercel/next.js/blob/canary/CODE_OF_CONDUCT.md). يوضح هذا المستند توقعاتنا بشأن سلوك المشاركين. ندعوك لقراءته ومساعدتنا في الحفاظ على بيئة آمنة ومحترمة.
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/14/index.mdx b/apps/docs/content/ar/docs/14/index.mdx
new file mode 100644
index 00000000..2c3db76a
--- /dev/null
+++ b/apps/docs/content/ar/docs/14/index.mdx
@@ -0,0 +1,59 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:14:50.651Z
+title: مقدمة
+description: مرحبًا بكم في وثائق Next.js.
+---
+
+مرحبًا بكم في وثائق Next.js!
+
+## ما هو Next.js؟
+
+Next.js هو إطار عمل React لبناء تطبيقات ويب كاملة المكدس. تستخدم مكونات React لبناء واجهات المستخدم، بينما يوفر Next.js ميزات وتحسينات إضافية.
+
+تحت الغطاء، يقوم Next.js أيضًا بتجريد وتكوين الأدوات المطلوبة لـ React تلقائيًا، مثل التجميع والتحويل وغير ذلك. وهذا يتيح لك التركيز على بناء تطبيقك بدلاً من قضاء الوقت في التهيئة.
+
+سواء كنت مطورًا فرديًا أو جزءًا من فريق أكبر، يمكن لـ Next.js مساعدتك في بناء تطبيقات React تفاعلية وديناميكية وسريعة.
+
+## الميزات الرئيسية
+
+بعض الميزات الرئيسية في Next.js تشمل:
+
+| الميزة                                                                  | الوصف                                                                                                                                                                                      |
+| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [التوجيه (Routing)](/docs/app/building-your-application/routing)                   | نظام توجيه يعتمد على نظام الملفات مبني على مكونات الخادم (Server Components) يدعم التخطيطات، التوجيه المتداخل، حالات التحميل، معالجة الأخطاء، والمزيد.                                                    |
+| [التصيير (Rendering)](/docs/app/building-your-application/rendering)               | تصيير من جانب العميل (Client-side) ومن جانب الخادم (Server-side) مع مكونات العميل والخادم. مع تحسين إضافي عبر التصيير الثابت (Static) والديناميكي (Dynamic) على الخادم باستخدام Next.js. دفق البيانات على بيئات Edge و Node.js. |
+| [جلب البيانات (Data Fetching)](/docs/app/building-your-application/data-fetching)       | تبسيط جلب البيانات باستخدام async/await في مكونات الخادم، مع واجهة `fetch` موسعة لتخزين الطلبات، تخزين البيانات المؤقت وإعادة التحقق.                                              |
+| [التنسيق (Styling)](/docs/app/building-your-application/styling)                   | دعم لطرق التنسيق المفضلة لديك، بما في ذلك وحدات CSS، Tailwind CSS، و CSS-in-JS                                                                                                   |
+| [التحسينات (Optimizations)](/docs/app/building-your-application/optimizing)          | تحسينات الصور، الخطوط، والنصوص البرمجية لتحسين مؤشرات Core Web Vitals وتجربة المستخدم لتطبيقك.                                                                                        |
+| [TypeScript](/docs/app/building-your-application/configuring/typescript) | دعم محسن لـ TypeScript، مع فحص أنواع أفضل وتجميع أكثر كفاءة، بالإضافة إلى إضافات TypeScript المخصصة ومدقق الأنواع.                                                 |
+
+## كيفية استخدام هذه الوثائق
+
+على الجانب الأيسر من الشاشة، ستجد شريط التنقل للوثائق. تم تنظيم صفحات الوثائق بشكل تسلسلي، من الأساسي إلى المتقدم، حتى تتمكن من متابعتها خطوة بخطوة أثناء بناء تطبيقك. ومع ذلك، يمكنك قراءتها بأي ترتيب أو الانتقال مباشرة إلى الصفحات التي تناسب حالتك الاستخدامية.
+
+على الجانب الأيمن من الشاشة، ستجد جدول محتويات يسهل التنقل بين أقسام الصفحة. إذا كنت بحاجة إلى العثور على صفحة بسرعة، يمكنك استخدام شريط البحث في الأعلى، أو اختصار البحث (`Ctrl+K` أو `Cmd+K`).
+
+للبدء، يمكنك الاطلاع على دليل [التثبيت](/docs/getting-started/installation).
+
+## موجه التطبيق (App Router) مقابل موجه الصفحات (Pages Router)
+
+يحتوي Next.js على نظامي توجيه مختلفين: موجه التطبيق (App Router) وموجه الصفحات (Pages Router). موجه التطبيق هو نظام توجيه أحدث يسمح لك باستخدام أحدث ميزات React، مثل مكونات الخادم (Server Components) والدفق (Streaming). بينما موجه الصفحات هو نظام التوجيه الأصلي لـ Next.js، والذي يسمح لك ببناء تطبيقات React مع تصيير من الخادم وما زال مدعومًا للتطبيقات القديمة.
+
+في أعلى الشريط الجانبي، ستلاحظ قائمة منسدلة تتيح لك التبديل بين ميزات **موجه التطبيق** و **موجه الصفحات**. نظرًا لوجود ميزات فريدة لكل نظام توجيه، من المهم تتبع أي علامة تبويب محددة.
+
+كما أن مسار التنقل (breadcrumbs) في أعلى الصفحة سيحدد ما إذا كنت تشاهد وثائق موجه التطبيق أو موجه الصفحات.
+
+## المعرفة المسبقة المطلوبة
+
+على الرغم من أن وثائقنا مصممة لتكون سهلة للمبتدئين، إلا أننا نحتاج إلى تحديد مستوى أساسي حتى تظل الوثائق مركزة على وظائف Next.js. سنحرص على توفير روابط للوثائق ذات الصلة كلما قدمنا مفهومًا جديدًا.
+
+للحصول على أقصى استفادة من وثائقنا، يُنصح بأن يكون لديك فهم أساسي لـ HTML و CSS و React. إذا كنت بحاجة إلى تحسين مهاراتك في React، يمكنك الاطلاع على [دورة أساسيات React](/learn/react-foundations)، والتي ستقدمك إلى الأساسيات. ثم تعلم المزيد عن Next.js من خلال [بناء تطبيق لوحة تحكم](/learn/dashboard-app).
+
+## إمكانية الوصول
+
+لتحقيق أفضل إمكانية وصول عند استخدام قارئ شاشة أثناء قراءة الوثائق، نوصي باستخدام Firefox مع NVDA، أو Safari مع VoiceOver.
+
+## انضم إلى مجتمعنا
+
+إذا كانت لديك أي أسئلة حول Next.js، فأنت دائمًا مرحب بك في طرحها على مجتمعنا عبر [مناقشات GitHub](https://github.com/vercel/next.js/discussions)، [Discord](https://discord.com/invite/bUG2bvbtHy)، [Twitter](https://twitter.com/nextjs)، و [Reddit](https://www.reddit.com/r/nextjs).
\ No newline at end of file