-
+ {posts.map((post) => (
+
- + {post.title} + + ))} +
-
+ {posts.map((post) => (
+
- + {post.title} + + ))} +
+
+
+
+ )
+}
+```
+
+
+
+
+
+ )
+}
+```
+
+```jsx filename="app/[id]/page.js" highlight={1,12} switcher
+import LikeButton from '@/app/ui/like-button'
+import { getPost } from '@/lib/data'
+
+export default async function Page({ params }) {
+ const post = await getPost(params.id)
+
+ return (
+ {post.title}
+ {/* ... */} +
+
+
+
+ )
+}
+```
+
+```tsx filename="app/ui/like-button.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function LikeButton({ likes }: { likes: number }) {
+ // ...
+}
+```
+
+```jsx filename="app/ui/like-button.js" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function LikeButton({ likes }) {
+ // ...
+}
+```
+
+## كيف تعمل مكونات الخادم والعميل في Next.js؟
+
+### على الخادم
+
+على الخادم، يستخدم Next.js واجهات برمجة تطبيقات React لتنسيق العرض. يتم تقسيم عمل العرض إلى أجزاء، حسب أجزاء المسار الفردية ([التخطيطات والصفحات](/docs/app/getting-started/layouts-and-pages)):
+
+- يتم عرض **مكونات الخادم** بتنسيق بيانات خاص يسمى حمولة مكون خادم React (RSC Payload).
+- تُستخدم **مكونات العميل** وحمولة RSC لـ[التقديم المسبق (Prerender)](/docs/app/getting-started/partial-prerendering#how-does-partial-prerendering-work) HTML.
+
+> **ما هي حمولة مكون خادم React (RSC)؟**
+>
+> حمولة RSC هي تمثيل ثنائي مضغوط لشجرة مكونات خادم React المعروضة. يستخدمها React على العميل لتحديث نموذج كائن المستند (DOM) للمتصفح. تحتوي حمولة RSC على:
+>
+> - نتيجة عرض مكونات الخادم
+> - عناصر نائبة لمكان عرض مكونات العميل ومراجع لملفات JavaScript الخاصة بها
+> - أي خصائص تم تمريرها من مكون خادم إلى مكون عميل
+
+### على العميل (أول تحميل)
+
+ثم على العميل:
+
+1. يتم استخدام **HTML** لعرض معاينة سريعة غير تفاعلية للمسار للمستخدم فورًا.
+2. تُستخدم **حمولة RSC** لتوفيق أشجار مكونات العميل والخادم.
+3. يُستخدم **JavaScript** لترطيب (Hydrate) مكونات العميل وجعل التطبيق تفاعليًا.
+
+> **ما هو الترطيب (Hydration)؟**
+>
+> الترطيب هو عملية React لإرفاق [معالجات الأحداث (Event Handlers)](https://react.dev/learn/responding-to-events) بنموذج كائن المستند (DOM)، لجعل HTML الثابت تفاعليًا.
+
+### التنقلات اللاحقة
+
+في التنقلات اللاحقة:
+
+- يتم جلب **حمولة RSC** مسبقًا وتخزينها مؤقتًا للتنقل الفوري.
+- يتم عرض **مكونات العميل** بالكامل على العميل، دون HTML المعروض من الخادم.
+
+## أمثلة
+
+### استخدام مكونات العميل
+
+يمكنك إنشاء مكون عميل عن طريق إضافة التوجيه [`"use client"`](https://react.dev/reference/react/use-client) في أعلى الملف، قبل الاستيرادات.
+
+```tsx filename="app/ui/counter.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+ const [count, setCount] = useState(0)
+
+ return (
+ {post.title}
+ {/* ... */} +
+
+ )
+}
+```
+
+```jsx filename="app/ui/counter.tsx" highlight={1} switcher
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+ const [count, setCount] = useState(0)
+
+ return (
+ {count} likes
+ +
+
+ )
+}
+```
+
+يُستخدم `"use client"` للإعلان عن **حدود** بين الرسوم البيانية (الأشجار) لوحدات الخادم والعميل.
+
+بمجرد وضع علامة على ملف بـ `"use client"`، تعتبر **جميع استيراداته والمكونات الفرعية جزءًا من حزمة العميل**. هذا يعني أنك لست بحاجة إلى إضافة التوجيه إلى كل مكون مخصص للعميل.
+
+### تقليل حجم حزمة JS
+
+لتقليل حجم حزم JavaScript الخاصة بالعميل، أضف `'use client'` إلى مكونات تفاعلية محددة بدلاً من وضع علامة على أجزاء كبيرة من واجهة المستخدم كمكونات عميل.
+
+على سبيل المثال، يحتوي مكون `{count} likes
+ +{children}
+}
+```
+
+```jsx filename="app/ui/modal.js" switcher
+'use client'
+
+export default function Modal({ children }) {
+ return {children}
+}
+```
+
+ثم، في مكون خادم أصل (مثل `
+
+ {/* يعمل، لأن Carousel مستخدم داخل مكون عميل */}
+ {isOpen &&
+ )
+}
+```
+
+```jsx filename="app/gallery.js" switcher
+'use client'
+
+import { useState } from 'react'
+import { Carousel } from 'acme-carousel'
+
+export default function Gallery() {
+ const [isOpen, setIsOpen] = useState(false)
+
+ return (
+
+
+ {/* يعمل، لأن Carousel مستخدم داخل مكون عميل */}
+ {isOpen &&
+ )
+}
+```
+
+ومع ذلك، إذا حاولت استخدامه مباشرة داخل مكون خادم، فسترى خطأ. هذا لأن Next.js لا يعرف أن `
+
+ )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Carousel from './carousel'
+
+export default function Page() {
+ return (
+ View pictures
+ {/* يعمل، لأن Carousel هو مكون عميل */} +
+
+ )
+}
+```
+
+> **نصيحة لمؤلفي المكتبات**
+>
+> إذا كنت تبني مكتبة مكونات، أضف توجيه `"use client"` إلى نقاط الدخول التي تعتمد على ميزات العميل فقط. هذا يسمح لمستخدميك باستيراد المكونات في مكونات الخادم دون الحاجة إلى إنشاء أغلفة.
+>
+> من الجدير بالذكر أن بعض أدوات الحزم قد تحذف توجيهات `"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).
+
+### منع تلويث البيئة (Environment poisoning)
+
+يمكن مشاركة وحدات جافا سريبت (JavaScript modules) بين وحدات مكونات الخادم والعميل (Server and Client Components). وهذا يعني أنه من الممكن استيراد كود مخصص للخادم فقط (server-only) إلى العميل عن طريق الخطأ. على سبيل المثال، ضع في الاعتبار الدالة التالية:
+
+```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()
+}
+```
+
+تحتوي هذه الدالة على `API_KEY` التي لا يجب أن تصل إلى العميل أبدًا.
+
+في Next.js، فقط متغيرات البيئة (environment variables) المسبوقة بـ `NEXT_PUBLIC_` يتم تضمينها في حزمة العميل (client bundle). إذا لم تكن المتغيرات مسبوقة بهذا البادئة، يقوم Next.js باستبدالها بسلسلة فارغة.
+
+نتيجة لذلك، على الرغم من أنه يمكن استيراد وتنفيذ `getData()` على العميل، إلا أنها لن تعمل كما هو متوقع.
+
+لمنع الاستخدام العرضي في مكونات العميل (Client Components)، يمكنك استخدام حزمة [`server-only`](https://www.npmjs.com/package/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()
+}
+```
+
+الآن، إذا حاولت استيراد الوحدة إلى مكون عميل (Client Component)، سيظهر خطأ أثناء وقت البناء (build-time error).
+
+> **معلومة مفيدة**: يمكن استخدام الحزمة المقابلة [`client-only`](https://www.npmjs.com/package/client-only) لوضع علامة على الوحدات التي تحتوي على منطق مخصص للعميل فقط (client-only logic) مثل الكود الذي يصل إلى كائن `window`.
diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/08-fetching-data.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/08-fetching-data.mdx
new file mode 100644
index 00000000..3550312f
--- /dev/null
+++ b/apps/docs/content/ar/docs/01-app/01-getting-started/08-fetching-data.mdx
@@ -0,0 +1,658 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T20:05:12.523Z
+title: كيفية جلب البيانات والتدفق
+nav_title: جلب البيانات
+description: ابدأ بجلب البيانات وتدفق المحتوى في تطبيقك.
+related:
+ title: مرجع API
+ description: تعلم المزيد عن الميزات المذكورة في هذه الصفحة من خلال قراءة مرجع API.
+ links:
+ - app/api-reference/functions/fetch
+ - app/api-reference/file-conventions/loading
+ - app/api-reference/config/next-config-js/logging
+ - app/api-reference/config/next-config-js/taint
+---
+
+سترشدك هذه الصفحة حول كيفية جلب البيانات في [مكونات الخادم والعميل](/docs/app/getting-started/server-and-client-components)، وكيفية [تدفق](#streaming) المكونات التي تعتمد على البيانات.
+
+## جلب البيانات
+
+### مكونات الخادم
+
+يمكنك جلب البيانات في مكونات الخادم باستخدام:
+
+1. [واجهة `fetch` API](#with-the-fetch-api)
+2. [ORM أو قاعدة بيانات](#with-an-orm-or-database)
+
+#### باستخدام `fetch` API
+
+لجلب البيانات باستخدام `fetch` API، حول مكونك إلى دالة غير متزامنة، واستخدم await مع استدعاء `fetch`. على سبيل المثال:
+
+```tsx filename="app/blog/page.tsx" switcher
+export default async function Page() {
+ const data = await fetch('https://api.vercel.app/blog')
+ const posts = await data.json()
+ return (
+ View pictures
+ {/* يعمل، لأن Carousel هو مكون عميل */} +-
+ {posts.map((post) => (
+
- {post.title} + ))} +
-
+ {posts.map((post) => (
+
- {post.title} + ))} +
-
+ {allPosts.map((post) => (
+
- {post.title} + ))} +
-
+ {allPosts.map((post) => (
+
- {post.title} + ))} +
-
+ {allPosts.map((post) => (
+
- {post.title} + ))} +
-
+ {posts.map((post) => (
+
- {post.title} + ))} +
Loading...
+ if (error) return Error: {error.message}
+
+ return (
+ -
+ {data.map((post: { id: string; title: string }) => (
+
- {post.title} + ))} +
Loading...
+ if (error) return Error: {error.message}
+
+ return (
+ -
+ {data.map((post) => (
+
- {post.title} + ))} +
Loading...
+}
+```
+
+```jsx filename="app/blog/loading.js" switcher
+export default function Loading() {
+ // حدد واجهة المستخدم للتحميل هنا
+ return Loading...
+}
+```
+
+عند التنقل، سيرى المستخدم على الفور التخطيط وحالة [التحميل](#creating-meaningful-loading-states) أثناء تقديم الصفحة. سيتم بعد ذلك تبديل المحتوى الجديد تلقائيًا بمجرد اكتمال التقديم.
+
+
+ {/* سيتم إرسال هذا المحتوى إلى العميل على الفور */}
+
+
+
+ {/* أي محتوى مغلف داخل حدود سيتم تدفقه */}
+
+
+
+ )
+}
+```
+
+```jsx filename="app/blog/page.js" switcher
+import { Suspense } from 'react'
+import BlogList from '@/components/BlogList'
+import BlogListSkeleton from '@/components/BlogListSkeleton'
+
+export default function BlogPage() {
+ return (
+ مرحبًا بكم في المدونة
+اقرأ أحدث المنشورات أدناه.
+
+ {/* سيتم إرسال هذا المحتوى إلى العميل على الفور */}
+
+
+
+ {/* أي محتوى مغلف داخل حدود سيتم تدفقه */}
+
+
+
+ )
+}
+```
+
+### إنشاء حالات تحميل ذات معنى
+
+حالة التحميل الفورية هي واجهة المستخدم الاحتياطية التي يتم عرضها للمستخدم فورًا بعد التنقل. للحصول على أفضل تجربة مستخدم، نوصي بتصميم حالات التحميل التي تكون ذات معنى وتساعد المستخدمين على فهم أن التطبيق يستجيب. على سبيل المثال، يمكنك استخدام الهياكل العظمية والمؤشرات الدوارة، أو جزء صغير ولكن ذو معنى من الشاشات المستقبلية مثل صورة الغلاف والعنوان وما إلى ذلك.
+
+في التطوير، يمكنك معاينة وفحص حالة التحميل لمكوناتك باستخدام [أدوات مطوري React](https://react.dev/learn/react-developer-tools).
+
+## أمثلة
+
+### جلب البيانات المتسلسل
+
+يحدث جلب البيانات المتسلسل عندما تقوم المكونات المتداخلة في شجرة كل منها بجلب بياناتها الخاصة ولا يتم [منع تكرارها](/docs/app/deep-dive/caching#request-memoization)، مما يؤدي إلى أوقات استجابة أطول.
+
+مرحبًا بكم في المدونة
+اقرأ أحدث المنشورات أدناه.
+{artist.name}
+ {/* عرض واجهة المستخدم الاحتياطية أثناء تحميل مكون Playlists */} +-
+ {playlists.map((playlist) => (
+
- {playlist.name} + ))} +
{artist.name}
+ {/* عرض واجهة المستخدم الاحتياطية أثناء تحميل مكون Playlists */} +-
+ {playlists.map((playlist) => (
+
- {playlist.name} + ))} +
{artist.name}
+}
+```
+
+يمكنك بدء الطلبات بشكل متوازي عن طريق تعريفها خارج المكونات التي تستخدم البيانات، وحلها معًا، على سبيل المثال، باستخدام [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all):
+
+```tsx filename="app/artist/[username]/page.tsx" highlight={3,8,23} 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 getAlbums(username: string) {
+ const res = await fetch(`https://api.example.com/artist/${username}/albums`)
+ return res.json()
+}
+
+export default async function Page({
+ params,
+}: {
+ params: Promise<{ username: string }>
+}) {
+ const { username } = await params
+ const artistData = getArtist(username)
+ const albumsData = getAlbums(username)
+
+ // Initiate both requests in parallel
+ const [artist, albums] = await Promise.all([artistData, albumsData])
+
+ return (
+ <>
+ {artist.name}
+{artist.name}
+سيتم تصيير هذا مسبقًا
+سيتم تصيير هذا مسبقًا
+سيتم تصيير هذا مسبقًا
+سيتم تصيير هذا مسبقًا
+{post.title}
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+import { getPost } from '@/app/lib/data'
+
+export async function generateMetadata({ params }) {
+ const post = await getPost(params.slug)
+ return {
+ title: post.title,
+ description: post.description,
+ }
+}
+
+export default async function Page({ params }) {
+ const post = await getPost(params.slug)
+ return {post.title}
+}
+```
+
+## البيانات الوصفية المستندة إلى الملفات
+
+الملفات الخاصة التالية متاحة للبيانات الوصفية:
+
+- [favicon.ico، apple-icon.jpg، و icon.jpg](/docs/app/api-reference/file-conventions/metadata/app-icons)
+- [opengraph-image.jpg و 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)
+
+يمكنك استخدام هذه لبيانات وصفية ثابتة، أو يمكنك إنشاء هذه الملفات برمجيًا باستخدام الكود.
+
+## أيقونات المفضلة (Favicons)
+
+أيقونات المفضلة هي أيقونات صغيرة تمثل موقعك في الإشارات المرجعية ونتائج البحث. لإضافة أيقونة مفضلة إلى تطبيقك، أنشئ ملف `favicon.ico` وأضفه إلى مجلد التطبيق الجذر.
+
+
+ {post.title}
+
+ )
+ )
+}
+```
+
+```jsx filename="app/blog/[slug]/opengraph-image.js" switcher
+import { ImageResponse } from 'next/og'
+import { getPost } from '@/app/lib/data'
+
+// بيانات الصورة
+export const size = {
+ width: 1200,
+ height: 630,
+}
+
+export const contentType = 'image/png'
+
+// إنشاء الصورة
+export default async function Image({ params }) {
+ const post = await getPost(params.slug)
+
+ return new ImageResponse(
+ (
+ // عنصر JSX لـ ImageResponse
+
+ {post.title}
+
+ )
+ )
+}
+```
+
+يدعم `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/og-image-generation)، و[`satori`](https://github.com/vercel/satori)، و `resvg` لتحويل HTML و CSS إلى PNG.
+> - يتم دعم flexbox ومجموعة فرعية من خصائص CSS فقط. التخطيطات المتقدمة (مثل `display: grid`) لن تعمل.
\ No newline at end of file
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
new file mode 100644
index 00000000..70a635ca
--- /dev/null
+++ b/apps/docs/content/ar/docs/01-app/01-getting-started/14-deploying.mdx
@@ -0,0 +1,82 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T20:01:29.181Z
+title: كيفية نشر تطبيق Next.js الخاص بك
+nav_title: النشر
+description: تعلم كيفية نشر تطبيق Next.js الخاص بك.
+---
+
+يمكن نشر Next.js كخادم Node.js، أو حاوية Docker، أو تصدير ثابت، أو تكييفه للعمل على منصات مختلفة.
+
+| خيار النشر | دعم الميزات |
+| ----------------------------- | ---------------- |
+| [خادم Node.js](#nodejs-server) | الكل |
+| [حاوية Docker](#docker) | الكل |
+| [تصدير ثابت](#static-export) | محدود |
+| [المحولات](#adapters) | حسب المنصة |
+
+## خادم 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. إذا لزم الأمر، يمكنك أيضًا الانتقال إلى [خادم مخصص](/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)
+- [Replit](https://github.com/nextjs/deploy-replit)
+
+## Docker
+
+يمكن نشر Next.js على أي مزود يدعم حاويات [Docker](https://www.docker.com/). وهذا يشمل منظمات الحاويات مثل Kubernetes أو مزود سحابي يعمل بـ Docker.
+
+تدعم عمليات النشر باستخدام Docker جميع ميزات Next.js. تعلم كيفية [تكوينها](/docs/app/guides/self-hosting) للبنية التحتية الخاصة بك.
+
+### القوالب
+
+- [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)
+- [DigitalOcean](https://github.com/nextjs/deploy-digitalocean)
+- [Fly.io](https://github.com/nextjs/deploy-fly)
+- [Google Cloud Run](https://github.com/nextjs/deploy-google-cloud-run)
+- [Render](https://github.com/nextjs/deploy-render)
+- [SST](https://github.com/nextjs/deploy-sst)
+
+## التصدير الثابت
+
+يتيح Next.js البدء كموقع ثابت أو [تطبيق صفحة واحدة (SPA)](/docs/app/guides/single-page-applications)، ثم الترقية لاحقًا لاستخدام الميزات التي تتطلب خادمًا.
+
+بما أن 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).
+
+### القوالب
+
+- [GitHub Pages](https://github.com/nextjs/deploy-github-pages)
+
+## المحولات
+
+يمكن تكييف Next.js للعمل على منصات مختلفة لدعم قدرات بنيتها التحتية.
+
+راجع وثائق كل مزود للحصول على معلومات حول ميزات Next.js المدعومة:
+
+- [AWS Amplify Hosting](https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components)
+- [Cloudflare](https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs)
+- [Deno Deploy](https://docs.deno.com/examples/next_tutorial)
+- [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
diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/15-upgrading.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/15-upgrading.mdx
new file mode 100644
index 00000000..80da2c2d
--- /dev/null
+++ b/apps/docs/content/ar/docs/01-app/01-getting-started/15-upgrading.mdx
@@ -0,0 +1,54 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T20:00:52.683Z
+title: كيفية ترقية تطبيق Next.js الخاص بك
+nav_title: الترقية
+description: تعلم كيفية ترقية تطبيق Next.js إلى أحدث إصدار.
+related:
+ title: أدلة الإصدارات
+ description: راجع أدلة الإصدارات للحصول على تعليمات ترقية مفصلة.
+ links:
+ - app/guides/upgrading/version-15
+ - app/guides/upgrading/version-14
+---
+
+## أحدث إصدار
+
+للتحديث إلى أحدث إصدار من Next.js، يمكنك استخدام أداة `upgrade` codemod:
+
+```bash filename="Terminal"
+npx @next/codemod@canary upgrade latest
+```
+
+إذا كنت تفضل الترقية يدويًا، قم بتثبيت أحدث إصدارات Next.js وReact:
+
+```bash filename="Terminal"
+npm i next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
+## إصدار Canary
+
+للتحديث إلى أحدث إصدار canary، تأكد من أنك تستخدم أحدث إصدار من Next.js وأن كل شيء يعمل كما هو متوقع. ثم قم بتنفيذ الأمر التالي:
+
+```bash filename="Terminal"
+npm i next@canary
+```
+
+### الميزات المتاحة في إصدار canary
+
+الميزات التالية متاحة حاليًا في إصدار canary:
+
+**التخزين المؤقت**:
+
+- [`"use cache"`](/docs/app/api-reference/directives/use-cache)
+- [`cacheLife`](/docs/app/api-reference/functions/cacheLife)
+- [`cacheTag`](/docs/app/api-reference/functions/cacheTag)
+- [`dynamicIO`](/docs/app/api-reference/config/next-config-js/dynamicIO)
+
+**المصادقة**:
+
+- [`forbidden`](/docs/app/api-reference/functions/forbidden)
+- [`unauthorized`](/docs/app/api-reference/functions/unauthorized)
+- [`forbidden.js`](/docs/app/api-reference/file-conventions/forbidden)
+- [`unauthorized.js`](/docs/app/api-reference/file-conventions/unauthorized)
+- [`authInterrupts`](/docs/app/api-reference/config/next-config-js/authInterrupts)
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/index.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/index.mdx
new file mode 100644
index 00000000..59e06eda
--- /dev/null
+++ b/apps/docs/content/ar/docs/01-app/01-getting-started/index.mdx
@@ -0,0 +1,23 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-02T20:00:39.322Z
+title: البدء
+description: تعرف على كيفية إنشاء تطبيقات ويب كاملة المكدس باستخدام موجه تطبيق Next.js.
+---
+
+مرحبًا بكم في وثائق Next.js!
+
+سيساعدك قسم **البدء** هذا في إنشاء أول تطبيق Next.js الخاص بك وتعلم الميزات الأساسية التي ستستخدمها في كل مشروع.
+
+## المعرفة المسبقة
+
+تفترض وثائقنا بعض الإلمام بتطوير الويب. قبل البدء، سيكون من المفيد أن تكون على دراية بـ:
+
+- HTML
+- CSS
+- JavaScript
+- React
+
+إذا كنت جديدًا على React أو تحتاج إلى تحديث معلوماتك، نوصي بالبدء مع [دورة أساسيات React](/learn/react-foundations)، ودورة [أساسيات Next.js](/learn/dashboard-app) التي تمكنك من بناء تطبيق أثناء التعلم.
+
+## الخطوات التالية
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/01-app/02-guides/analytics.mdx b/apps/docs/content/ar/docs/01-app/02-guides/analytics.mdx
new file mode 100644
index 00000000..08aacd53
--- /dev/null
+++ b/apps/docs/content/ar/docs/01-app/02-guides/analytics.mdx
@@ -0,0 +1,234 @@
+---
+source-updated-at: 2025-05-19T22:31:51.000Z
+translation-updated-at: 2025-06-02T20:01:52.129Z
+title: كيفية إضافة التحليلات إلى تطبيق Next.js الخاص بك
+nav_title: التحليلات
+description: قياس وتتبع أداء الصفحة باستخدام Next.js Speed Insights
+---
+
+{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `
+
+
+## Nonces
+
+[Nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) هو سلسلة فريدة وعشوائية من الأحرف تم إنشاؤها لاستخدام لمرة واحدة. يتم استخدامه مع CSP للسماح بشكل انتقائي بتنفيذ نصوص برمجية أو أنماط مضمنة معينة، متجاوزًا توجيهات CSP الصارمة.
+
+### لماذا تستخدم Nonce؟
+
+على الرغم من أن سياسات CSP مصممة لحظر النصوص البرمجية الضارة، إلا أن هناك سيناريوهات مشروعة حيث تكون النصوص البرمجية المضمنة ضرورية. في مثل هذه الحالات، توفر Nonces طريقة للسماح بتنفيذ هذه النصوص البرمجية إذا كانت تحتوي على Nonce صحيح.
+
+### إضافة Nonce باستخدام Middleware
+
+[الوسيط (Middleware)](/docs/app/building-your-application/routing/middleware) يتيح لك إضافة رؤوس وإنشاء Nonces قبل عرض الصفحة.
+
+في كل مرة يتم فيها عرض صفحة، يجب إنشاء Nonce جديد. هذا يعني أنه **يجب عليك استخدام العرض الديناميكي لإضافة Nonces**.
+
+على سبيل المثال:
+
+```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
+}
+```
+
+بشكل افتراضي، يعمل الوسيط (Middleware) على جميع الطلبات. يمكنك تصفية الوسيط ليعمل على مسارات محددة باستخدام [`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' },
+ ],
+ },
+ ],
+}
+```
+
+### قراءة Nonce
+
+أمثلة
+ +- [CSP صارم](https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp) + +
+
+
+من الممكن استخدام أي حل CSS-in-JS موجود. أبسطها هو الأنماط المضمنة:
+
+```jsx
+function HiThere() {
+ return أمثلة
+ +- [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) + +مرحبًا
+} + +export default HiThere +``` + +نحن نضمّن [styled-jsx](https://github.com/vercel/styled-jsx) لتوفير دعم لأنماط CSS معزولة محدودة النطاق. +الهدف هو دعم "ظل CSS" مشابه لمكونات الويب، والتي للأسف [لا تدعم التصيير من جانب الخادم وهي تعمل فقط مع JavaScript](https://github.com/w3c/webcomponents/issues/71). + +راجع الأمثلة أعلاه للحلول الشائعة الأخرى لـ CSS-in-JS (مثل Styled Components). + +يبدو المكون الذي يستخدم `styled-jsx` كالتالي: + +```jsx +function HelloWorld() { + return ( +
+ مرحبًا بالعالم
+
+ )
+}
+
+export default HelloWorld
+```
+
+يرجى مراجعة [وثائق styled-jsx](https://github.com/vercel/styled-jsx) لمزيد من الأمثلة.
+
+### تعطيل JavaScript
+
+نعم، إذا قمت بتعطيل JavaScript، سيتم تحميل CSS في بناء الإنتاج (`next start`). أثناء التطوير، نطلب تمكين JavaScript لتوفير أفضل تجربة مطور مع [التحديث السريع (Fast Refresh)](https://nextjs.org/blog/next-9-4#fast-refresh).
+
+محدود النطاق!
+ + +{title}
+{desc}
+{title}
+{desc}
+Hello World
+} + +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`. + +
+ {optimisticMessages.map((m, i) => (
+
+ )
+}
+```
+
+```jsx filename="app/page.js" 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 }]
+ )
+
+ const formAction = async (formData) => {
+ const message = formData.get('message')
+ addOptimisticMessage(message)
+ await send(message)
+ }
+
+ return (
+ {m.message}
+ ))}
+
+
+ {optimisticMessages.map((m) => (
+
+ )
+}
+```
+
+## عناصر النموذج المتداخلة
+
+يمكنك استدعاء إجراءات الخادم في عناصر متداخلة داخل `{m.message}
+ ))}
+
+