diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/08-server-and-client-components.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/05-server-and-client-components.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/08-server-and-client-components.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/05-server-and-client-components.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/13-partial-prerendering.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/06-partial-prerendering.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/13-partial-prerendering.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/06-partial-prerendering.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/09-fetching-data.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/07-fetching-data.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/09-fetching-data.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/07-fetching-data.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/11-updating-data.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/08-updating-data.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/11-updating-data.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/08-updating-data.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/10-caching-and-revalidating.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/09-caching-and-revalidating.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/10-caching-and-revalidating.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/09-caching-and-revalidating.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/12-error-handling.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/10-error-handling.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/12-error-handling.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/10-error-handling.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/07-css.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/11-css.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/07-css.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/11-css.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/05-images.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/12-images.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/05-images.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/12-images.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/06-fonts.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/13-fonts.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/06-fonts.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/13-fonts.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/15-deploying.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/16-deploying.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/15-deploying.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/16-deploying.mdx diff --git a/apps/docs/content/ar/docs/01-app/01-getting-started/16-upgrading.mdx b/apps/docs/content/ar/docs/01-app/01-getting-started/17-upgrading.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/01-getting-started/16-upgrading.mdx rename to apps/docs/content/ar/docs/01-app/01-getting-started/17-upgrading.mdx diff --git a/apps/docs/content/ar/docs/01-app/04-deep-dive/caching.mdx b/apps/docs/content/ar/docs/01-app/02-guides/caching.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/04-deep-dive/caching.mdx rename to apps/docs/content/ar/docs/01-app/02-guides/caching.mdx diff --git a/apps/docs/content/ar/docs/01-app/02-guides/tailwind-css.mdx b/apps/docs/content/ar/docs/01-app/02-guides/tailwind-css.mdx deleted file mode 100644 index d9d8c2b6..00000000 --- a/apps/docs/content/ar/docs/01-app/02-guides/tailwind-css.mdx +++ /dev/null @@ -1,163 +0,0 @@ ---- -source-updated-at: 2025-06-01T01:32:20.000Z -translation-updated-at: 2025-06-02T19:57:47.341Z -title: كيفية تثبيت Tailwind CSS في تطبيق Next.js الخاص بك -nav_title: Tailwind CSS -description: قم بتنسيق تطبيق Next.js الخاص بك باستخدام Tailwind CSS. ---- - -{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */} - -[Tailwind CSS](https://tailwindcss.com/) هو إطار عمل CSS يعتمد على الأدوات (utility-first) وهو متوافق بالكامل مع Next.js. سيرشدك هذا الدليل حول كيفية تثبيت Tailwind CSS في تطبيق Next.js الخاص بك. - -## تثبيت Tailwind - -قم بتثبيت حزم Tailwind CSS اللازمة: - -```bash filename="Terminal" -npm install -D tailwindcss @tailwindcss/postcss postcss -``` - -> **معلومة مفيدة**: إذا كنت تستخدم واجهة سطر الأوامر `create-next-app` لإنشاء مشروعك، سيسألك Next.js عما إذا كنت ترغب في تثبيت Tailwind وسيقوم تلقائيًا بتكوين المشروع. - -## تكوين Tailwind - -قم بإنشاء ملف `postcss.config.mjs` في جذر مشروعك وأضف ملحق `@tailwindcss/postcss` إلى تكوين PostCSS الخاص بك: - -```js filename="postcss.config.mjs" highlight={4} -/** @type {import('tailwindcss').Config} */ -export default { - plugins: { - '@tailwindcss/postcss': {}, - }, -} -``` - -بدءًا من [Tailwind v4](https://tailwindcss.com/blog/tailwindcss-v4)، لا يوجد حاجة إلى أي تكوين افتراضيًا. إذا كنت بحاجة إلى تكوين Tailwind، يمكنك اتباع [التوثيق الرسمي](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration) لتكوين ملف CSS العام. - -هناك أيضًا [واجهة سطر أوامر للترقية](https://tailwindcss.com/docs/upgrade-guide) و[دليل](https://tailwindcss.com/docs/upgrade-guide) إذا كان لديك مشروع يعمل بـ Tailwind v3. - - - -## استيراد الأنماط - -أضف [توجيهات Tailwind CSS](https://tailwindcss.com/docs/functions-and-directives#directives) التي سيستخدمها Tailwind لحقن الأنماط التي تم إنشاؤها إلى [ملف الأنماط العام](/docs/app/getting-started/css#global-css) في تطبيقك، على سبيل المثال: - -```css filename="app/globals.css" -@import 'tailwindcss'; -``` - -داخل [تخطيط الجذر](/docs/app/api-reference/file-conventions/layout#root-layout) (`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 ( - - {children} - - ) -} -``` - -```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 ( - - {children} - - ) -} -``` - -## استخدام الفئات - -بعد تثبيت Tailwind CSS وإضافة الأنماط العامة، يمكنك استخدام فئات الأدوات الخاصة بـ Tailwind في تطبيقك. - -```tsx filename="app/page.tsx" switcher -export default function Page() { - return

Hello, Next.js!

-} -``` - -```jsx filename="app/page.js" switcher -export default function Page() { - return

Hello, Next.js!

-} -``` - -
- - - -## استيراد الأنماط - -أضف [توجيهات Tailwind CSS](https://tailwindcss.com/docs/functions-and-directives#directives) التي سيستخدمها Tailwind لحقن الأنماط التي تم إنشاؤها إلى [ملف الأنماط العام](/docs/app/getting-started/css#global-css) في تطبيقك، على سبيل المثال: - -```css filename="styles/globals.css" -@import 'tailwindcss'; -``` - -داخل [ملف التطبيق المخصص](/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 -} -``` - -```jsx filename="pages/_app.js" switcher -// هذه الأنماط تنطبق على كل مسار في التطبيق -import '@/styles/globals.css' - -export default function App({ Component, pageProps }) { - return -} -``` - -## استخدام الفئات - -بعد تثبيت Tailwind CSS وإضافة الأنماط العامة، يمكنك استخدام فئات الأدوات الخاصة بـ Tailwind في تطبيقك. - -```tsx filename="pages/index.tsx" switcher -export default function Page() { - return

Hello, Next.js!

-} -``` - -```jsx filename="pages/index.js" switcher -export default function Page() { - return

Hello, Next.js!

-} -``` - -
- -## الاستخدام مع 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/01-app/03-api-reference/01-directives/index.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/index.mdx new file mode 100644 index 00000000..08f5670f --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/index.mdx @@ -0,0 +1,8 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: التوجيهات (Directives) +description: تُستخدم التوجيهات (Directives) لتعديل سلوك تطبيق Next.js الخاص بك. +--- + +التوجيهات المتاحة هي: \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/01-directives/use-cache.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-cache.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/01-directives/use-cache.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-cache.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-client.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-client.mdx new file mode 100644 index 00000000..bfc57fc3 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-client.mdx @@ -0,0 +1,125 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: استخدام use client +description: تعلم كيفية استخدام توجيه use client لعرض مكون على جانب العميل. +--- + +يعلن توجيه `'use client'` عن نقطة دخول للمكونات التي سيتم عرضها على **جانب العميل** ويجب استخدامه عند إنشاء واجهات مستخدم تفاعلية (UI) تتطلب إمكانيات جافا سكريبت من جانب العميل، مثل إدارة الحالة، ومعالجة الأحداث، والوصول إلى واجهات برمجة تطبيقات المتصفح. هذه ميزة من ميزات React. + +> **معلومة مفيدة:** +> +> لا تحتاج إلى إضافة توجيه `'use client'` إلى كل ملف يحتوي على مكونات العميل. تحتاج فقط إلى إضافته إلى الملفات التي تريد عرض مكوناتها مباشرة داخل مكونات الخادم. يحدد توجيه `'use client'` [حدود](https://nextjs.org/docs/app/building-your-application/rendering#network-boundary) الخادم والعميل، وتعمل المكونات المصدرة من مثل هذا الملف كنقاط دخول إلى العميل. + +## الاستخدام + +لتعريف نقطة دخول لمكونات العميل، أضف توجيه `'use client'` **في أعلى الملف**، قبل أي استيرادات: + +```tsx filename="app/components/counter.tsx" highlight={1} switcher +'use client' + +import { useState } from 'react' + +export default function Counter() { + const [count, setCount] = useState(0) + + return ( +
+

Count: {count}

+ +
+ ) +} +``` + +```jsx filename="app/components/counter.js" highlight={1} switcher +'use client' + +import { useState } from 'react' + +export default function Counter() { + const [count, setCount] = useState(0) + + return ( +
+

Count: {count}

+ +
+ ) +} +``` + +عند استخدام توجيه `'use client'`، يجب أن تكون خصائص مكونات العميل [قابلة للتسلسل](https://react.dev/reference/rsc/use-client#serializable-types). هذا يعني أن الخصائص يجب أن تكون بتنسيق يمكن لـ React تسلسله عند إرسال البيانات من الخادم إلى العميل. + +```tsx filename="app/components/counter.tsx" highlight={4} switcher +'use client' + +export default function Counter({ + onClick /* ❌ الدالة غير قابلة للتسلسل */, +}) { + return ( +
+ +
+ ) +} +``` + +```jsx filename="app/components/counter.js" highlight={4} switcher +'use client' + +export default function Counter({ + onClick /* ❌ الدالة غير قابلة للتسلسل */, +}) { + return ( +
+ +
+ ) +} +``` + +## تداخل مكونات العميل داخل مكونات الخادم + +يسمح لك دمج مكونات الخادم والعميل ببناء تطبيقات تكون سريعة الأداء وتفاعلية في نفس الوقت: + +1. **مكونات الخادم**: استخدمها للمحتوى الثابت، جلب البيانات، والعناصر الصديقة لمحركات البحث. +2. **مكونات العميل**: استخدمها للعناصر التفاعلية التي تتطلب حالة، تأثيرات، أو واجهات برمجة تطبيقات المتصفح. +3. **تكوين المكونات**: قم بتداخل مكونات العميل داخل مكونات الخادم حسب الحاجة لفصل واضح بين منطق الخادم والعميل. + +في المثال التالي: + +- `Header` هو مكون خادم يعالج المحتوى الثابت. +- `Counter` هو مكون عميل يمكّن التفاعل داخل الصفحة. + +```tsx filename="app/page.tsx" highlight={2,8} switcher +import Header from './header' +import Counter from './counter' // هذا مكون عميل + +export default function Page() { + return ( +
+
+ +
+ ) +} +``` + +```jsx filename="app/page.js" highlight={2,8} switcher +import Header from './header' +import Counter from './counter' // هذا مكون عميل + +export default function Page() { + return ( +
+
+ +
+ ) +} +``` + +## المراجع + +راجع [وثائق React](https://react.dev/reference/rsc/use-client) لمزيد من المعلومات حول `'use client'`. \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-server.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-server.mdx new file mode 100644 index 00000000..8cc2f90a --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/01-directives/use-server.mdx @@ -0,0 +1,163 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: استخدام use server +description: تعلم كيفية استخدام توجيه use server لتنفيذ التعليمات البرمجية على الخادم. +--- + +يحدد توجيه `use server` وظيفة أو ملفًا ليتم تنفيذه على **جانب الخادم**. يمكن استخدامه في أعلى الملف للإشارة إلى أن جميع الوظائف في الملف تعمل على جانب الخادم، أو مضمنًا في أعلى الوظيفة لوضع علامة على الوظيفة كـ [وظيفة خادم (Server Function)](https://19.react.dev/reference/rsc/server-functions). هذه ميزة من ميزات React. + +## استخدام `use server` في أعلى الملف + +يوضح المثال التالي ملفًا يحتوي على توجيه `use server` في الأعلى. يتم تنفيذ جميع الوظائف في الملف على الخادم. + +```tsx filename="app/actions.ts" highlight={1} switcher +'use server' +import { db } from '@/lib/db' // عميل قاعدة البيانات الخاص بك + +export async function createUser(data: { name: string; email: string }) { + const user = await db.user.create({ data }) + return user +} +``` + +```jsx filename="app/actions.js" highlight={1} switcher +'use server' +import { db } from '@/lib/db' // عميل قاعدة البيانات الخاص بك + +export async function createUser(data) { + const user = await db.user.create({ data }) + return user +} +``` + +### استخدام وظائف الخادم في مكون العميل + +لاستخدام وظائف الخادم في مكونات العميل، تحتاج إلى إنشاء وظائف الخادم الخاصة بك في ملف مخصص باستخدام توجيه `use server` في أعلى الملف. يمكن بعد ذلك استيراد هذه الوظائف إلى مكونات العميل والخادم وتنفيذها. + +بافتراض أن لديك وظيفة خادم `fetchUsers` في `actions.ts`: + +```tsx filename="app/actions.ts" highlight={1} switcher +'use server' +import { db } from '@/lib/db' // عميل قاعدة البيانات الخاص بك + +export async function fetchUsers() { + const users = await db.user.findMany() + return users +} +``` + +```jsx filename="app/actions.js" highlight={1} switcher +'use server' +import { db } from '@/lib/db' // عميل قاعدة البيانات الخاص بك + +export async function fetchUsers() { + const users = await db.user.findMany() + return users +} +``` + +ثم يمكنك استيراد وظيفة الخادم `fetchUsers` إلى مكون العميل وتنفيذها على جانب العميل. + +```tsx filename="app/components/my-button.tsx" highlight={1,2,8} switcher +'use client' +import { fetchUsers } from '../actions' + +export default function MyButton() { + return +} +``` + +```jsx filename="app/components/my-button.js" highlight={1,2,8} switcher +'use client' +import { fetchUsers } from '../actions' + +export default function MyButton() { + return +} +``` + +## استخدام `use server` مضمنًا + +في المثال التالي، يتم استخدام `use server` مضمنًا في أعلى الوظيفة لوضع علامة عليها كـ [وظيفة خادم (Server Function)](https://19.react.dev/reference/rsc/server-functions): + +```tsx filename="app/posts/[id]/page.tsx" switcher highlight={8} +import { EditPost } from './edit-post' +import { revalidatePath } from 'next/cache' + +export default async function PostPage({ params }: { params: { id: string } }) { + const post = await getPost(params.id) + + async function updatePost(formData: FormData) { + 'use server' + await savePost(params.id, formData) + revalidatePath(`/posts/${params.id}`) + } + + return +} +``` + +```jsx filename="app/posts/[id]/page.js" switcher highlight={8} +import { EditPost } from './edit-post' +import { revalidatePath } from 'next/cache' + +export default async function PostPage({ params }) { + const post = await getPost(params.id) + + async function updatePost(formData) { + 'use server' + await savePost(params.id, formData) + revalidatePath(`/posts/${params.id}`) + } + + return +} +``` + +## اعتبارات الأمان + +عند استخدام توجيه `use server`، من المهم التأكد من أن جميع منطق جانب الخادم آمن وأن البيانات الحساسة تظل محمية. + +### المصادقة والتفويض + +قم دائمًا بمصادقة المستخدمين والتحقق من صلاحياتهم قبل تنفيذ العمليات الحساسة على جانب الخادم. + +```tsx filename="app/actions.ts" highlight={1,7,8,9,10} switcher +'use server' + +import { db } from '@/lib/db' // عميل قاعدة البيانات الخاص بك +import { authenticate } from '@/lib/auth' // مكتبة المصادقة الخاصة بك + +export async function createUser( + data: { name: string; email: string }, + token: string +) { + const user = authenticate(token) + if (!user) { + throw new Error('غير مصرح به') + } + const newUser = await db.user.create({ data }) + return newUser +} +``` + +```jsx filename="app/actions.js" highlight={1,7,8,9,10} switcher +'use server' + +import { db } from '@/lib/db' // عميل قاعدة البيانات الخاص بك +import { authenticate } from '@/lib/auth' // مكتبة المصادقة الخاصة بك + +export async function createUser(data, token) { + const user = authenticate(token) + if (!user) { + throw new Error('غير مصرح به') + } + const newUser = await db.user.create({ data }) + return newUser +} +``` + +## مرجع + +راجع [وثائق React](https://react.dev/reference/rsc/use-server) لمزيد من المعلومات حول `use server`. \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/02-components/font.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/font.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/02-components/font.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/02-components/font.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/02-components/form.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/form.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/02-components/form.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/02-components/form.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/02-components/image.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/image.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/02-components/image.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/02-components/image.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/index.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/index.mdx new file mode 100644 index 00000000..159edb11 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/index.mdx @@ -0,0 +1,8 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: المكونات +description: مرجع API لمكونات Next.js المضمنة. +--- + +{/* يتم مشاركة محتوى هذا المستند بين جهاز التوجيه للتطبيق والصفحات. يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بجهاز توجيه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */} \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/02-components/link.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/link.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/02-components/link.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/02-components/link.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/02-components/script.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/02-components/script.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/02-components/script.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/02-components/script.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/app-icons.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/app-icons.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/index.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/index.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/manifest.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/manifest.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/manifest.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/manifest.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/robots.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/robots.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/robots.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/robots.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/sitemap.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/sitemap.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/01-metadata/sitemap.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/01-metadata/sitemap.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/default.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/default.mdx new file mode 100644 index 00000000..5fca6a53 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/default.mdx @@ -0,0 +1,60 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: default.js +description: مرجع API لملف default.js. +related: + title: تعلم المزيد عن المسارات المتوازية (Parallel Routes) + links: + - app/api-reference/file-conventions/parallel-routes +--- + +يُستخدم ملف `default.js` لعرض بديل احتياطي داخل [المسارات المتوازية (Parallel Routes)](/docs/app/api-reference/file-conventions/parallel-routes) عندما لا يتمكن Next.js من استعادة الحالة النشطة [للفتحة (slot)](/docs/app/api-reference/file-conventions/parallel-routes#slots) بعد تحميل الصفحة بالكامل. + +أثناء [التنقل الناعم (soft navigation)](/docs/app/getting-started/linking-and-navigating#client-side-transitions)، يحتفظ Next.js بتتبع الحالة _النشطة_ (الصفحة الفرعية) لكل فتحة. ومع ذلك، بالنسبة للتنقلات الصلبة (تحميل الصفحة بالكامل)، لا يمكن لـ Next.js استعادة الحالة النشطة. في هذه الحالة، يمكن عرض ملف `default.js` للصفحات الفرعية التي لا تتطابق مع عنوان URL الحالي. + +خذ بعين الاعتبار هيكل المجلدات التالي. تحتوي فتحة `@team` على صفحة `settings`، بينما لا تحتوي فتحة `@analytics` على ذلك. + +المسارات المتوازية - مسارات غير متطابقة + +عند التنقل إلى `/settings`، ستعرض فتحة `@team` صفحة `settings` مع الحفاظ على الصفحة النشطة الحالية لفتحة `@analytics`. + +عند التحديث، سيعرض Next.js ملف `default.js` لـ `@analytics`. إذا لم يكن `default.js` موجودًا، فسيتم عرض خطأ `404` بدلاً من ذلك. + +بالإضافة إلى ذلك، نظرًا لأن `children` هي فتحة ضمنية، فأنت بحاجة أيضًا إلى إنشاء ملف `default.js` لعرض بديل احتياطي لـ `children` عندما لا يتمكن Next.js من استعادة الحالة النشطة للصفحة الأصلية. + +## المرجع + +### `params` (اختياري) + +وعد (promise) يحل إلى كائن يحتوي على [معلمات المسار الديناميكي (dynamic route parameters)](/docs/app/api-reference/file-conventions/dynamic-routes) من الجزء الجذري وصولاً إلى الصفحات الفرعية للفتحة. على سبيل المثال: + +```tsx filename="app/[artist]/@sidebar/default.js" switcher +export default async function Default({ + params, +}: { + params: Promise<{ artist: string }> +}) { + const { artist } = await params +} +``` + +```jsx filename="app/[artist]/@sidebar/default.js" switcher +export default async function Default({ params }) { + const { artist } = await params +} +``` + +| المثال | عنوان URL | `params` | +| ------------------------------------------ | ------------ | -------------------------------------------- | +| `app/[artist]/@sidebar/default.js` | `/zack` | `Promise<{ artist: 'zack' }>` | +| `app/[artist]/[album]/@sidebar/default.js` | `/zack/next` | `Promise<{ artist: 'zack', album: 'next' }>` | + +- نظرًا لأن الخاصية `params` هي وعد (promise)، يجب عليك استخدام `async/await` أو دالة [`use`](https://react.dev/reference/react/use) في React للوصول إلى القيم. + - في الإصدار 14 وما قبله، كانت `params` خاصية متزامنة (synchronous). للمساعدة في التوافق مع الإصدارات السابقة، لا يزال بإمكانك الوصول إليها بشكل متزامن في Next.js 15، ولكن هذا السلوك سيتم إهماله في المستقبل. \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/dynamic-routes.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/dynamic-routes.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/dynamic-routes.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/dynamic-routes.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/error.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/error.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/error.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/error.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/forbidden.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/forbidden.mdx new file mode 100644 index 00000000..4ea12638 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/forbidden.mdx @@ -0,0 +1,52 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: forbidden.js +description: مرجع API لملف forbidden.js الخاص. +related: + links: + - app/api-reference/functions/forbidden +version: experimental +--- + +يستخدم ملف **forbidden** لعرض واجهة المستخدم عند استدعاء [دالة `forbidden`](/docs/app/api-reference/functions/forbidden) أثناء المصادقة. بالإضافة إلى السماح لك بتخصيص الواجهة، سيقوم Next.js بإرجاع رمز حالة `403`. + +```tsx filename="app/forbidden.tsx" switcher +import Link from 'next/link' + +export default function Forbidden() { + return ( +
+

Forbidden

+

You are not authorized to access this resource.

+ Return Home +
+ ) +} +``` + +```jsx filename="app/forbidden.jsx" switcher +import Link from 'next/link' + +export default function Forbidden() { + return ( +
+

Forbidden

+

You are not authorized to access this resource.

+ Return Home +
+ ) +} +``` + +## المرجع + +### الخصائص (Props) + +لا تقبل مكونات `forbidden.js` أي خصائص. + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ------------------------- | +| `v15.1.0` | تم تقديم `forbidden.js`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/index.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/index.mdx new file mode 100644 index 00000000..fcefba8d --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/index.mdx @@ -0,0 +1,6 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: اصطلاحات نظام الملفات +description: مرجع API لاصطلاحات نظام الملفات في Next.js. +--- \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/instrumentation.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/instrumentation.mdx new file mode 100644 index 00000000..84f94ca3 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/instrumentation.mdx @@ -0,0 +1,141 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: ملف instrumentation.js +description: مرجع API لملف instrumentation.js. +related: + title: تعرف على المزيد حول الأداة (Instrumentation) + links: + - app/guides/instrumentation +--- + +يُستخدم ملف `instrumentation.js|ts` لدمج أدوات المراقبة (observability) في تطبيقك، مما يسمح لك بتتبع الأداء والسلوك، وتصحيح الأخطاء في بيئة الإنتاج. + +لاستخدامه، ضع الملف في **الجذر** لتطبيقك أو داخل مجلد [`src`](/docs/app/api-reference/file-conventions/src-folder) إذا كنت تستخدم واحدًا. + +## التصديرات + +### `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') +} +``` + +### `onRequestError` (اختياري) + +يمكنك تصدير دالة `onRequestError` بشكل اختياري لتتبع أخطاء **الخادم** لأي مزود مراقبة مخصص. + +- إذا كنت تقوم بتشغيل أي مهام غير متزامنة في `onRequestError`، تأكد من انتظارها (await). سيتم تشغيل `onRequestError` عندما يلتقط خادم Next.js الخطأ. +- قد لا يكون مثيل `error` هو مثيل الخطأ الأصلي الذي تم طرحه، حيث قد يتم معالجته بواسطة React إذا حدث أثناء عرض مكونات الخادم (Server Components). إذا حدث هذا، يمكنك استخدام خاصية `digest` على الخطأ لتحديد نوع الخطأ الفعلي. + +```ts filename="instrumentation.ts" switcher +import { type Instrumentation } from 'next' + +export const onRequestError: Instrumentation.onRequestError = async ( + err, + request, + context +) => { + await fetch('https://.../report-error', { + method: 'POST', + body: JSON.stringify({ + message: err.message, + request, + context, + }), + headers: { + 'Content-Type': 'application/json', + }, + }) +} +``` + +```js filename="instrumentation.js" switcher +export async function onRequestError(err, request, context) { + await fetch('https://.../report-error', { + method: 'POST', + body: JSON.stringify({ + message: err.message, + request, + context, + }), + headers: { + 'Content-Type': 'application/json', + }, + }) +} +``` + +#### المعاملات (Parameters) + +تقبل الدالة ثلاثة معاملات: `error`، `request`، و `context`. + +```ts filename="Types" +export function onRequestError( + error: { digest: string } & Error, + request: { + path: string // مسار المورد، مثل /blog?name=foo + method: string // طريقة الطلب، مثل GET, POST، إلخ + headers: { [key: string]: string } + }, + context: { + routerKind: 'Pages Router' | 'App Router' // نوع الموجه + routePath: string // مسار ملف المسار، مثل /app/blog/[dynamic] + routeType: 'render' | 'route' | 'action' | 'middleware' // السياق الذي حدث فيه الخطأ + renderSource: + | 'react-server-components' + | 'react-server-components-payload' + | 'server-rendering' + revalidateReason: 'on-demand' | 'stale' | undefined // undefined يعني طلبًا عاديًا بدون إعادة التحقق + renderType: 'dynamic' | 'dynamic-resume' // 'dynamic-resume' لـ PPR + } +): void | Promise +``` + +- `error`: الخطأ الذي تم التقاطه (النوع دائمًا `Error`)، وخاصية `digest` وهي المعرف الفريد للخطأ. +- `request`: معلومات الطلب المقروءة فقط المرتبطة بالخطأ. +- `context`: السياق الذي حدث فيه الخطأ. يمكن أن يكون نوع الموجه (App أو Pages Router)، و/أو (مكونات الخادم (`'render'`)، معالجات المسار (`'route'`)، إجراءات الخادم (`'action'`)، أو Middleware (`'middleware'`)). + +### تحديد بيئة التشغيل (Runtime) + +يعمل ملف `instrumentation.js` في كل من بيئة تشغيل Node.js و Edge، ولكن يمكنك استخدام `process.env.NEXT_RUNTIME` لاستهداف بيئة تشغيل محددة. + +```js filename="instrumentation.js" +export function register() { + if (process.env.NEXT_RUNTIME === 'edge') { + return require('./register.edge') + } else { + return require('./register.node') + } +} + +export function onRequestError() { + if (process.env.NEXT_RUNTIME === 'edge') { + return require('./on-request-error.edge') + } else { + return require('./on-request-error.node') + } +} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ------------------------------------------------------- | +| `v15.0.0` | إدخال `onRequestError`، تثبيت `instrumentation` | +| `v14.0.4` | دعم Turbopack لـ `instrumentation` | +| `v13.2.0` | إدخال `instrumentation` كخاصية تجريبية | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/intercepting-routes.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/intercepting-routes.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/layout.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/layout.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/layout.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/layout.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/loading.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/loading.mdx new file mode 100644 index 00000000..86dc6cda --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/loading.mdx @@ -0,0 +1,169 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: ملف loading.js +description: مرجع API لملف loading.js. +--- + +يساعدك الملف الخاص `loading.js` في إنشاء واجهة تحميل ذات معنى باستخدام [React Suspense](https://react.dev/reference/react/Suspense). باستخدام هذه الاتفاقية، يمكنك عرض [حالة تحميل فورية](#instant-loading-states) من الخادم أثناء بث محتوى جزء المسار. يتم تبديل المحتوى الجديد تلقائيًا بمجرد اكتماله. + +واجهة التحميل + +```tsx filename="app/feed/loading.tsx" switcher +export default function Loading() { + // أو مكون هيكل تحميل مخصص + return

جاري التحميل...

+} +``` + +```jsx filename="app/feed/loading.js" switcher +export default function Loading() { + // أو مكون هيكل تحميل مخصص + return

جاري التحميل...

+} +``` + +داخل ملف `loading.js`، يمكنك إضافة أي واجهة تحميل خفيفة الوزن. قد تجد أنه من المفيد استخدام [أدوات مطوري React](https://react.dev/learn/react-developer-tools) لتبديل حدود Suspense يدويًا. + +بشكل افتراضي، هذا الملف هو [مكون خادم](/docs/app/getting-started/server-and-client-components) - ولكن يمكن أيضًا استخدامه كمكون عميل من خلال التوجيه `"use client"`. + +## المرجع + +### المعاملات + +لا تقبل مكونات واجهة التحميل أي معاملات. + +## السلوك + +### التنقل + +- يتم [جلب واجهة Fallback مسبقًا](/docs/app/getting-started/linking-and-navigating#prefetching)، مما يجعل التنقل فوريًا ما لم يكتمل الجلب المسبق. +- التنقل قابل للمقاطعة، مما يعني أن تغيير المسارات لا يحتاج إلى انتظار تحميل محتوى المسار بالكامل قبل الانتقال إلى مسار آخر. +- تبقى التخطيطات المشتركة قابلة للتفاعل أثناء تحميل أجزاء المسار الجديدة. + +### حالات التحميل الفورية + +حالة التحميل الفورية هي واجهة Fallback التي تظهر فورًا عند التنقل. يمكنك تقديم مؤشرات تحميل مثل الهياكل العظمية والدوائر الدوارة، أو جزء صغير ولكن ذو معنى من الشاشات المستقبلية مثل صورة الغلاف والعنوان، إلخ. يساعد ذلك المستخدمين على فهم أن التطبيق يستجيب ويوفر تجربة مستخدم أفضل. + +قم بإنشاء حالة تحميل عن طريق إضافة ملف `loading.js` داخل مجلد. + +ملف loading.js الخاص + +```tsx filename="app/dashboard/loading.tsx" switcher +export default function Loading() { + // يمكنك إضافة أي واجهة داخل Loading، بما في ذلك هيكل عظمي. + return +} +``` + +```jsx filename="app/dashboard/loading.js" switcher +export default function Loading() { + // يمكنك إضافة أي واجهة داخل Loading، بما في ذلك هيكل عظمي. + return +} +``` + +في نفس المجلد، سيتم تداخل `loading.js` داخل `layout.js`. سيقوم تلقائيًا بلف ملف `page.js` وأي أطفال أدناه في حد ``. + +نظرة عامة على loading.js + +### تحسين محركات البحث (SEO) + +- سينتظر Next.js اكتمال جلب البيانات داخل [`generateMetadata`](/docs/app/api-reference/functions/generate-metadata) قبل بث الواجهة إلى العميل. يضمن هذا أن الجزء الأول من الاستجابة المبثوثة يتضمن علامات ``. +- نظرًا لأن البث يتم تقديمه من الخادم، فإنه لا يؤثر على تحسين محركات البحث. يمكنك استخدام أداة [Rich Results Test](https://search.google.com/test/rich-results) من 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). نظرًا لأنه تم إرسال رؤوس الاستجابة بالفعل إلى العميل، لا يمكن تحديث رمز حالة الاستجابة. هذا لا يؤثر على تحسين محركات البحث. + +### حدود المتصفح + +[بعض المتصفحات](https://bugs.webkit.org/show_bug.cgi?id=252413) تقوم بتخزين مؤقت لاستجابة البث. قد لا ترى استجابة البث حتى تتجاوز الاستجابة 1024 بايت. هذا يؤثر عادةً فقط على تطبيقات "hello world"، وليس التطبيقات الحقيقية. + +## دعم المنصة + +| خيار النشر | مدعوم | +| ------------------------------------------------------------------- | ----------------- | +| [خادم Node.js](/docs/app/getting-started/deploying#nodejs-server) | نعم | +| [حاوية Docker](/docs/app/getting-started/deploying#docker) | نعم | +| [تصدير ثابت](/docs/app/getting-started/deploying#static-export) | لا | +| [المحولات](/docs/app/getting-started/deploying#adapters) | حسب المنصة | + +تعلم كيفية [تكوين البث](/docs/app/guides/self-hosting#streaming-and-suspense) عند استضافة Next.js ذاتيًا. + +## أمثلة + +### البث مع Suspense + +بالإضافة إلى `loading.js`، يمكنك أيضًا إنشاء حدود Suspense يدويًا لمكونات الواجهة الخاصة بك. يدعم موجه التطبيق البث باستخدام [Suspense](https://react.dev/reference/react/Suspense). + +يعمل `` عن طريق لف مكون يقوم بإجراء عمل غير متزامن (مثل جلب البيانات)، وعرض واجهة Fallback (مثل هيكل عظمي، دوارة) أثناء حدوثه، ثم استبدال مكونك بمجرد اكتمال الإجراء. + +```tsx filename="app/dashboard/page.tsx" switcher +import { Suspense } from 'react' +import { PostFeed, Weather } from './Components' + +export default function Posts() { + return ( +
+ جاري تحميل التغذية...

}> + +
+ جاري تحميل الطقس...

}> + +
+
+ ) +} +``` + +```jsx filename="app/dashboard/page.js" switcher +import { Suspense } from 'react' +import { PostFeed, Weather } from './Components' + +export default function Posts() { + return ( +
+ جاري تحميل التغذية...

}> + +
+ جاري تحميل الطقس...

}> + +
+
+ ) +} +``` + +باستخدام Suspense، تحصل على فوائد: + +1. **عرض الخادم التدريجي** - عرض HTML تدريجيًا من الخادم إلى العميل. +2. **الترطيب الانتقائي** - يعطي React الأولوية للمكونات التي يجب جعلها تفاعلية أولاً بناءً على تفاعل المستخدم. + +لمزيد من أمثلة Suspense وحالات الاستخدام، يرجى الاطلاع على [توثيق React](https://react.dev/reference/react/Suspense). + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | --------------------- | +| `v13.0.0` | تم تقديم `loading`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/mdx-components.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/mdx-components.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/mdx-components.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/mdx-components.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-building-your-application/01-routing/14-middleware.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/middleware.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/03-building-your-application/01-routing/14-middleware.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/middleware.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/page.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/page.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/page.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/page.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/parallel-routes.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/parallel-routes.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/public-folder.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/public-folder.mdx new file mode 100644 index 00000000..8fda3e5c --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/public-folder.mdx @@ -0,0 +1,47 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: مجلد public +nav_title: public +description: يتيح لك Next.js تقديم ملفات ثابتة مثل الصور في مجلد public. يمكنك معرفة كيفية عمل ذلك هنا. +--- + +{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `Content` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا في مكون. */} + +يمكن لـ 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 {alt} +} + +export function AvatarOfMe() { + return +} +``` + +## التخزين المؤقت (Caching) + +لا يمكن لـ Next.js تخزين الأصول في مجلد `public` بشكل آمن لأنها قد تتغير. رؤوس التخزين المؤقت الافتراضية المطبقة هي: + +```jsx +Cache-Control: public, max-age=0 +``` + +## ملفات الروبوتات والأيقونات وغيرها + + + +المجلد مفيد أيضًا لملفات مثل `robots.txt`، `favicon.ico`، التحقق من موقع جوجل، وأي ملفات ثابتة أخرى (بما في ذلك `.html`). ولكن تأكد من عدم وجود ملف ثابت بنفس اسم ملف في مجلد `pages/`، لأن هذا سيؤدي إلى حدوث خطأ. [اقرأ المزيد](/docs/messages/conflicting-public-file-page). + + + + + +بالنسبة لملفات البيانات الوصفية الثابتة مثل `robots.txt`، `favicon.ico`، إلخ، يجب عليك استخدام [ملفات بيانات وصفية خاصة](/docs/app/api-reference/file-conventions/metadata) داخل مجلد `app`. + + \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/route-groups.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/route-groups.mdx new file mode 100644 index 00000000..2d796e57 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/route-groups.mdx @@ -0,0 +1,34 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: مجموعات المسارات (Route Groups) +description: يمكن استخدام مجموعات المسارات لتقسيم تطبيق Next.js الخاص بك إلى أقسام مختلفة. +--- + +مجموعات المسارات هي اصطلاح مجلدات يسمح لك بتنظيم المسارات حسب الفئة أو الفريق. + +## الاصطلاح + +يمكن إنشاء مجموعة مسارات عن طريق وضع اسم المجلد بين قوسين: `(اسم_المجلد)`. + +يشير هذا الاصطلاح إلى أن المجلد مخصص لأغراض تنظيمية ويجب **ألا يتم تضمينه** في مسار URL للمسار. + +مثال على هيكل المجلدات باستخدام مجموعات المسارات + +## حالات الاستخدام + +- تنظيم المسارات حسب الفريق أو الاهتمام أو الميزة. +- تعريف عدة [تخطيطات جذرية](/docs/app/api-reference/file-conventions/layout#root-layout). +- اختيار أجزاء مسار محددة لمشاركة تخطيط معين، مع استبعاد أجزاء أخرى. + +## محاذير + +- **تحميل الصفحة بالكامل**: إذا انتقلت بين مسارات تستخدم تخطيطات جذرية مختلفة، فسيؤدي ذلك إلى إعادة تحميل الصفحة بالكامل. على سبيل المثال، الانتقال من `/cart` الذي يستخدم `app/(shop)/layout.js` إلى `/blog` الذي يستخدم `app/(marketing)/layout.js`. هذا **ينطبق فقط** على تخطيطات الجذر المتعددة. +- **مسارات متضاربة**: لا ينبغي أن تحل المسارات في مجموعات مختلفة إلى نفس مسار URL. على سبيل المثال، `(marketing)/about/page.js` و `(shop)/about/page.js` سيحلان إلى `/about` مما سيسبب خطأ. +- **تخطيط الجذر الأساسي**: إذا كنت تستخدم عدة تخطيطات جذرية دون وجود ملف `layout.js` أساسي، تأكد من تعريف مسار الصفحة الرئيسية (/) ضمن إحدى مجموعات المسارات، مثل `app/(marketing)/page.js`. \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/route-segment-config.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/route-segment-config.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/route.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/route.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/src-folder.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/src-folder.mdx new file mode 100644 index 00000000..c2ec92af --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/src-folder.mdx @@ -0,0 +1,37 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: مجلد src +nav_title: src +description: يمكنك حفظ الصفحات في مجلد `src` كبديل عن مجلد `pages` الرئيسي. +related: + links: + - app/getting-started/project-structure +--- + +{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام المكون `المحتوى` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */} + +كبديل لوجود مجلدات `app` أو `pages` الخاصة بـ Next.js في جذر المشروع، يدعم Next.js أيضًا النمط الشائع لوضع كود التطبيق تحت مجلد `src`. + +هذا يفصل كود التطبيق عن ملفات إعدادات المشروع التي توجد غالبًا في جذر المشروع، وهو ما يفضله بعض الأفراد والفرق. + +لاستخدام مجلد `src`، انقل مجلد موجه التطبيق `app` أو مجلد موجه الصفحات `pages` إلى `src/app` أو `src/pages` على التوالي. + +مثال على هيكل المجلدات مع مجلد `src` + +> **معلومة مفيدة**: +> +> - يجب أن يبقى مجلد `/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` في [قسم content](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/01-app/03-api-reference/03-file-conventions/template.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/template.mdx new file mode 100644 index 00000000..cde5eef9 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/template.mdx @@ -0,0 +1,74 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: ملف template.js +description: مرجع API لملف template.js. +--- + +ملف **القالب (template)** يشبه [التخطيط (layout)](/docs/app/getting-started/layouts-and-pages#creating-a-layout) من حيث أنه يلف التخطيط أو الصفحة. على عكس التخطيطات التي تظل ثابتة عبر المسارات وتحافظ على الحالة، فإن القوالب تحصل على مفتاح فريد، مما يعني أن مكونات العميل (Client Components) التابعة لها تعيد تعيين حالتها عند التنقل. + +هي مفيدة عندما تحتاج إلى: + +- إعادة مزامنة `useEffect` عند التنقل. +- إعادة تعيين حالة مكونات العميل التابعة عند التنقل. على سبيل المثال، حقل إدخال. +- تغيير السلوك الافتراضي للإطار. على سبيل المثال، حدود Suspense داخل التخطيطات تظهر حالة الانتظار فقط عند التحميل الأول، بينما القوالب تظهرها في كل عملية تنقل. + +## الاصطلاح + +يمكن تعريف القالب عن طريق تصدير مكون React افتراضي من ملف `template.js`. يجب أن يقبل المكون خاصية `children`. + +ملف template.js الخاص + +```tsx filename="app/template.tsx" switcher +export default function Template({ children }: { children: React.ReactNode }) { + return
{children}
+} +``` + +```jsx filename="app/template.js" switcher +export default function Template({ children }) { + return
{children}
+} +``` + +من حيث التداخل، يتم عرض `template.js` بين التخطيط وأطفاله. إليك المخرجات المبسطة: + +```jsx filename="المخرجات" + + {/* لاحظ أن القالب يحصل على مفتاح فريد. */} + + +``` + +## الخصائص + +### `children` (مطلوبة) + +يقبل القالب خاصية `children`. + +```jsx filename="المخرجات" + + {/* لاحظ أن القالب يحصل تلقائيًا على مفتاح فريد. */} + + +``` + +## السلوك + +- **مكونات الخادم (Server Components)**: بشكل افتراضي، القوالب هي مكونات خادم. +- **إعادة التركيب عند التنقل**: تحصل القوالب على مفتاح فريد تلقائيًا. التنقل إلى مسار جديد يتسبب في إعادة تركيب القالب وأطفاله. +- **إعادة تعيين الحالة**: أي مكون عميل داخل القالب سيعيد تعيين حالته عند التنقل. +- **إعادة تشغيل التأثير (Effect)**: التأثيرات مثل `useEffect` ستتم مزامنتها مرة أخرى عند إعادة تركيب المكون. +- **إعادة إنشاء DOM**: يتم إعادة إنشاء عناصر DOM داخل القالب بالكامل. + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ---------------------- | +| `v13.0.0` | تم تقديم `template`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/unauthorized.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/unauthorized.mdx new file mode 100644 index 00000000..85d20949 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/03-file-conventions/unauthorized.mdx @@ -0,0 +1,116 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: unauthorized.js +description: مرجع API لملف unauthorized.js الخاص. +related: + links: + - app/api-reference/functions/unauthorized +version: experimental +--- + +يستخدم ملف **unauthorized** لعرض واجهة المستخدم عند استدعاء [دالة `unauthorized`](/docs/app/api-reference/functions/unauthorized) أثناء المصادقة. بالإضافة إلى السماح لك بتخصيص الواجهة، سيقوم Next.js بإرجاع رمز حالة `401`. + +```tsx filename="app/unauthorized.tsx" switcher +import Login from '@/app/components/Login' + +export default function Unauthorized() { + return ( +
+

401 - Unauthorized

+

Please log in to access this page.

+ +
+ ) +} +``` + +```jsx filename="app/unauthorized.js" switcher +import Login from '@/app/components/Login' + +export default function Unauthorized() { + return ( +
+

401 - Unauthorized

+

Please log in to access this page.

+ +
+ ) +} +``` + +## المرجع + +### الخصائص (Props) + +مكونات `unauthorized.js` لا تقبل أي خصائص. + +## أمثلة + +### عرض واجهة تسجيل الدخول للمستخدمين غير المصادق عليهم + +يمكنك استخدام [دالة `unauthorized`](/docs/app/api-reference/functions/unauthorized) لعرض ملف `unauthorized.js` مع واجهة تسجيل الدخول. + +```tsx filename="app/dashboard/page.tsx" switcher +import { verifySession } from '@/app/lib/dal' +import { unauthorized } from 'next/navigation' + +export default async function DashboardPage() { + const session = await verifySession() + + if (!session) { + unauthorized() + } + + return
Dashboard
+} +``` + +```jsx filename="app/dashboard/page.js" switcher +import { verifySession } from '@/app/lib/dal' +import { unauthorized } from 'next/navigation' + +export default async function DashboardPage() { + const session = await verifySession() + + if (!session) { + unauthorized() + } + + return
Dashboard
+} +``` + +```tsx filename="app/unauthorized.tsx" switcher +import Login from '@/app/components/Login' + +export default function UnauthorizedPage() { + return ( +
+

401 - Unauthorized

+

Please log in to access this page.

+ +
+ ) +} +``` + +```jsx filename="app/unauthorized.js" switcher +import Login from '@/app/components/Login' + +export default function UnauthorizedPage() { + return ( +
+

401 - Unauthorized

+

Please log in to access this page.

+ +
+ ) +} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ----------------------------- | +| `v15.1.0` | تم إدخال `unauthorized.js`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/after.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/after.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/after.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/after.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/cacheLife.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/cacheLife.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/cacheLife.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/cacheLife.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/cacheTag.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/cacheTag.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/cacheTag.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/cacheTag.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/connection.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/connection.mdx new file mode 100644 index 00000000..b63204df --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/connection.mdx @@ -0,0 +1,60 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: اتصال +description: مرجع API لوظيفة الاتصال (connection). +--- + +تتيح لك وظيفة `connection()` الإشارة إلى أن العرض يجب أن ينتظر طلبًا واردا من المستخدم قبل المتابعة. + +هذه الوظيفة مفيدة عندما لا يستخدم المكون [واجهات برمجة التطبيقات الديناميكية](/docs/app/getting-started/partial-prerendering#dynamic-rendering)، ولكنك تريد أن يتم عرضه ديناميكيًا أثناء التشغيل وليس بشكل ثابت أثناء وقت البناء. يحدث هذا عادةً عندما تصل إلى معلومات خارجية تريد عمدًا أن تغير نتيجة العرض، مثل `Math.random()` أو `new Date()`. + +```ts filename="app/page.tsx" switcher +import { connection } from 'next/server' + +export default async function Page() { + await connection() + // كل ما يلي سيتم استبعاده من العرض المسبق + const rand = Math.random() + return {rand} +} +``` + +```jsx filename="app/page.js" switcher +import { connection } from 'next/server' + +export default async function Page() { + await connection() + // كل ما يلي سيتم استبعاده من العرض المسبق + const rand = Math.random() + return {rand} +} +``` + +## المرجع + +### النوع + +```jsx +function connection(): Promise +``` + +### المعاملات + +- لا تقبل الوظيفة أي معاملات. + +### القيم المُرجعة + +- تُرجع الوظيفة وعدًا (Promise) من النوع `void`. ليس المقصود استهلاك هذه القيمة. + +## معلومات مفيدة + +- تحل `connection` محل [`unstable_noStore`](/docs/app/api-reference/functions/unstable_noStore) لتصبح أكثر توافقًا مع مستقبل Next.js. +- تكون الوظيفة ضرورية فقط عندما يكون العرض الديناميكي مطلوبًا ولا تُستخدم واجهات برمجة التطبيقات الديناميكية الشائعة. + +### سجل الإصدارات + +| الإصدار | التغييرات | +| ------------ | ------------------------ | +| `v15.0.0` | أصبحت `connection` مستقرة. | +| `v15.0.0-RC` | تم تقديم `connection`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/cookies.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/cookies.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/cookies.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/cookies.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/draft-mode.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/draft-mode.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/draft-mode.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/draft-mode.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/fetch.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/fetch.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/fetch.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/fetch.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/forbidden.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/forbidden.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/forbidden.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/forbidden.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-image-metadata.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-image-metadata.mdx new file mode 100644 index 00000000..26ded1b0 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-image-metadata.mdx @@ -0,0 +1,228 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: generateImageMetadata +description: تعلم كيفية إنشاء صور متعددة في ملف خاص واحد لواجهة برمجة تطبيقات البيانات الوصفية (Metadata API). +related: + title: الخطوات التالية + description: عرض جميع خيارات واجهة برمجة تطبيقات البيانات الوصفية. + links: + - app/api-reference/file-conventions/metadata +--- + +يمكنك استخدام `generateImageMetadata` لإنشاء إصدارات مختلفة من صورة واحدة أو إرجاع صور متعددة لقطاع مسار واحد. هذا مفيد عندما تريد تجنب ترميز قيم البيانات الوصفية بشكل ثابت، مثل الأيقونات. + +## المعاملات + +تقبل دالة `generateImageMetadata` المعاملات التالية: + +#### `params` (اختياري) + +كائن يحتوي على [معاملات المسار الديناميكي](/docs/app/api-reference/file-conventions/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' }` | + +## القيم المُرجعة + +يجب أن ترجع دالة `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( + ( +
+ Icon {id} +
+ ) + ) +} +``` + +```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( + ( +
+ Icon {id} +
+ ) + ) +} +``` + +### أمثلة + +#### استخدام بيانات خارجية + +يستخدم هذا المثال كائن `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/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 = (await params).id + const imageId = id + const text = await getCaptionForImage(productId, imageId) + + return new ImageResponse( + ( +
+ {text} +
+ ) + ) +} +``` + +```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 = (await params).id + const imageId = id + const text = await getCaptionForImage(productId, imageId) + + return new ImageResponse( + ( +
+ {text} +
+ ) + ) +} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ----------------------------------- | +| `v13.3.0` | تم تقديم `generateImageMetadata`. | \ 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/03-api-reference/04-functions/generate-metadata.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-metadata.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-sitemaps.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-sitemaps.mdx new file mode 100644 index 00000000..088ae39f --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-sitemaps.mdx @@ -0,0 +1,81 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +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`. + +## مثال + +على سبيل المثال، لتقسيم خريطة موقع باستخدام `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 { + // الحد الأقصى لـ 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, + })) +} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| `v15.0.0` | تقوم `generateSitemaps` الآن بإنشاء عناوين URL متسقة بين بيئة التطوير والإنتاج | +| `v13.3.2` | تم تقديم `generateSitemaps`. في بيئة التطوير، يمكنك عرض خريطة الموقع التي تم إنشاؤها على `/.../sitemap.xml/[id]`. على سبيل المثال، `/product/sitemap.xml/1`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/generate-static-params.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-static-params.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/generate-static-params.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-static-params.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-viewport.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-viewport.mdx new file mode 100644 index 00000000..c80fef59 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/generate-viewport.mdx @@ -0,0 +1,239 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: generateViewport +description: مرجع API لوظيفة generateViewport. +related: + title: الخطوات التالية + description: عرض جميع خيارات Metadata API. + links: + - app/api-reference/file-conventions/metadata +--- + +يمكنك تخصيص منفذ العرض الأولي للصفحة باستخدام كائن `viewport` الثابت أو وظيفة `generateViewport` الديناميكية. + +> **معلومة مفيدة**: +> +> - تصديرات كائن `viewport` ووظيفة `generateViewport` **مدعومة فقط في مكونات الخادم (Server Components)**. +> - لا يمكنك تصدير كائن `viewport` ووظيفة `generateViewport` من نفس مقطع المسار. +> - إذا كنت تقوم بالترحيل من تصديرات `metadata`، يمكنك استخدام [أداة metadata-to-viewport-export codemod](/docs/app/guides/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) بدلاً من `generateViewport`. + +## حقول منفذ العرض + +### `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=" output" hideLineNumbers + +``` + +**مع سمة 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=" output" hideLineNumbers + + +``` + +### `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=" output" hideLineNumbers + +``` + +### `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=" output" hideLineNumbers + +``` + +## الأنواع + +يمكنك إضافة أمان النوع إلى كائن منفذ العرض الخاص بك باستخدام النوع `Viewport`. إذا كنت تستخدم [الإضافة المدمجة لـ TypeScript](/docs/app/api-reference/config/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', + } +} +``` + +#### مع خصائص المقطع + +```tsx +import type { Viewport } from 'next' + +type Props = { + params: Promise<{ id: string }> + searchParams: Promise<{ [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/01-app/03-api-reference/04-functions/headers.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/headers.mdx new file mode 100644 index 00000000..a2819ccf --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/headers.mdx @@ -0,0 +1,75 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: headers +description: مرجع API لوظيفة `headers`. +--- + +`headers` هي وظيفة **غير متزامنة (async)** تتيح لك **قراءة** رؤوس طلب HTTP الواردة من [مكون الخادم (Server Component)](/docs/app/getting-started/server-and-client-components). + +```tsx filename="app/page.tsx" switcher +import { headers } from 'next/headers' + +export default async function Page() { + const headersList = await headers() + const userAgent = headersList.get('user-agent') +} +``` + +```jsx filename="app/page.js" switcher +import { headers } from 'next/headers' + +export default async function Page() { + const headersList = await headers() + const userAgent = headersList.get('user-agent') +} +``` + +## المرجع + +### المعاملات + +لا تأخذ `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` هي وظيفة **غير متزامنة (async)** تُرجع promise. يجب استخدام `async/await` أو دالة [`use`](https://react.dev/reference/react/use) في React. + - في الإصدار 14 وما قبله، كانت `headers` وظيفة متزامنة. لدعم التوافق مع الإصدارات السابقة، لا يزال يمكن الوصول إليها بشكل متزامن في Next.js 15، ولكن هذا السلوك سيتم إهماله في المستقبل. +- نظرًا لأن `headers` للقراءة فقط، لا يمكنك `set` أو `delete` رؤوس الطلب الصادرة. +- `headers` هي [واجهة برمجة تطبيقات ديناميكية (Dynamic API)](/docs/app/getting-started/partial-prerendering#dynamic-rendering#dynamic-apis) لا يمكن معرفة قيمها مسبقًا. استخدامها سيؤدي إلى تحويل المسار إلى **[عرض ديناميكي (dynamic rendering)](/docs/app/getting-started/partial-prerendering#dynamic-rendering)**. + +## أمثلة + +### استخدام رأس Authorization + +```jsx filename="app/page.js" +import { headers } from 'next/headers' + +export default async function Page() { + const authorization = (await headers()).get('authorization') + const res = await fetch('...', { + headers: { authorization }, // تمرير رأس Authorization + }) + const user = await res.json() + + return

{user.name}

+} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| ------------ | ------------------------------------------------------------------------------------------------------ | +| `v15.0.0-RC` | أصبحت `headers` وظيفة غير متزامنة. يتوفر [أداة تحويل الشفرة (codemod)](/docs/app/guides/upgrading/codemods#150). | +| `v13.0.0` | تم تقديم `headers`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/image-response.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/image-response.mdx new file mode 100644 index 00000000..7cd0f2fb --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/image-response.mdx @@ -0,0 +1,214 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +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 + }, +) +``` + +> تتوفر أمثلة في [Vercel OG Playground](https://og-playground.vercel.app/). + +### ميزات HTML وCSS المدعومة + +يدعم `ImageResponse` خصائص CSS الشائعة بما في ذلك flexbox والموضع المطلق، والخطوط المخصصة، ولف النص، والمركزة، والصور المتداخلة. + +يرجى الرجوع إلى [توثيق Satori](https://github.com/vercel/satori#css) للحصول على قائمة بميزات HTML وCSS المدعومة. + +## السلوك + +- يستخدم `ImageResponse` [@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)، [Satori](https://github.com/vercel/satori)، وResvg لتحويل HTML وCSS إلى PNG. +- فقط flexbox ومجموعة فرعية من خصائص CSS مدعومة. التخطيطات المتقدمة (مثل `display: grid`) لن تعمل. +- الحد الأقصى لحجم الحزمة هو `500KB`. يشمل حجم الحزمة JSX الخاص بك، وCSS، والخطوط، والصور، وأي أصول أخرى. إذا تجاوزت الحد، فكر في تقليل حجم أي أصول أو جلبها أثناء التشغيل. +- فقط تنسيقات الخطوط `ttf`، `otf`، و`woff` مدعومة. لتعظيم سرعة تحليل الخط، يُفضل استخدام `ttf` أو `otf` بدلاً من `woff`. + +## أمثلة + +### معالجات المسار + +يمكن استخدام `ImageResponse` في معالجات المسار لإنشاء الصور ديناميكيًا في وقت الطلب. + +```js filename="app/api/route.js" +import { ImageResponse } from 'next/og' + +export async function GET() { + try { + return new ImageResponse( + ( +
+
+ Welcome to My Site +
+
+ Generated with Next.js ImageResponse +
+
+ ), + { + width: 1200, + height: 630, + } + ) + } catch (e) { + console.log(`${e.message}`) + return new Response(`Failed to generate the image`, { + status: 500, + }) + } +} +``` + +### البيانات الوصفية المستندة إلى الملف + +يمكنك استخدام `ImageResponse` في ملف [`opengraph-image.tsx`](/docs/app/api-reference/file-conventions/metadata/opengraph-image) لإنشاء صور Open Graph في وقت البناء أو ديناميكيًا في وقت الطلب. + +```tsx filename="app/opengraph-image.tsx" +import { ImageResponse } from 'next/og' + +// بيانات وصفية للصورة +export const alt = 'My site' +export const size = { + width: 1200, + height: 630, +} + +export const contentType = 'image/png' + +// إنشاء الصورة +export default async function Image() { + return new ImageResponse( + ( + // عنصر JSX لـ ImageResponse +
+ My site +
+ ), + // خيارات ImageResponse + { + // للراحة، يمكننا إعادة استخدام إعدادات حجم opengraph-image + // المصدرة لتعيين عرض وارتفاع ImageResponse أيضًا. + ...size, + } + ) +} +``` + +### خطوط مخصصة + +يمكنك استخدام خطوط مخصصة في `ImageResponse` الخاص بك عن طريق توفير مصفوفة `fonts` في الخيارات. + +```tsx filename="app/opengraph-image.tsx" +import { ImageResponse } from 'next/og' +import { readFile } from 'node:fs/promises' +import { join } from 'node:path' + +// بيانات وصفية للصورة +export const alt = 'My site' +export const size = { + width: 1200, + height: 630, +} + +export const contentType = 'image/png' + +// إنشاء الصورة +export default async function Image() { + // تحميل الخط، process.cwd() هو دليل مشروع Next.js + const interSemiBold = await readFile( + join(process.cwd(), 'assets/Inter-SemiBold.ttf') + ) + + return new ImageResponse( + ( + // ... + ), + // خيارات ImageResponse + { + // للراحة، يمكننا إعادة استخدام إعدادات حجم opengraph-image + // المصدرة لتعيين عرض وارتفاع ImageResponse أيضًا. + ...size, + fonts: [ + { + name: 'Inter', + data: interSemiBold, + style: 'normal', + weight: 400, + }, + ], + } + ) +} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ----------------------------------------------------- | +| `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/01-app/03-api-reference/04-functions/index.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/index.mdx new file mode 100644 index 00000000..c4a695ac --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/index.mdx @@ -0,0 +1,8 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: الدوال +description: مرجع API لدوال وخطافات (Hooks) Next.js. +--- + +{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */} \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/next-request.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/next-request.mdx new file mode 100644 index 00000000..c6fc3bfe --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/next-request.mdx @@ -0,0 +1,125 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +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)` + +بالنظر إلى اسم، يتم تعيين ملف تعريف الارتباط (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 +``` + +الخيارات التالية متاحة: + + + +| الخاصية | النوع | الوصف | +| ----------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `basePath` | `string` | [المسار الأساسي](/docs/pages/api-reference/config/next-config-js/basePath) لـ URL. | +| `buildId` | `string` \| `undefined` | معرّف بناء تطبيق Next.js. يمكن [تخصيصه](/docs/pages/api-reference/config/next-config-js/generateBuildId). | +| `defaultLocale` | `string` \| `undefined` | اللغة الافتراضية لـ [التدويل](/docs/pages/guides/internationalization). | +| `domainLocale` | | | +| - `defaultLocale` | `string` | اللغة الافتراضية داخل النطاق. | +| - `domain` | `string` | النطاق المرتبط بلغة محددة. | +| - `http` | `boolean` \| `undefined` | يشير إلى ما إذا كان النطاق يستخدم HTTP. | +| `locales` | `string[]` \| `undefined` | مصفوفة اللغات المتاحة. | +| `locale` | `string` \| `undefined` | اللغة النشطة حاليًا. | +| `url` | `URL` | كائن URL. | + + + + + +| الخاصية | النوع | الوصف | +| -------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| `basePath` | `string` | [المسار الأساسي](/docs/app/api-reference/config/next-config-js/basePath) لـ URL. | +| `buildId` | `string` \| `undefined` | معرّف بناء تطبيق Next.js. يمكن [تخصيصه](/docs/app/api-reference/config/next-config-js/generateBuildId). | +| `pathname` | `string` | مسار URL. | +| `searchParams` | `Object` | معلمات البحث لـ URL. | + +> **ملاحظة:** خصائص التدويل من موجه الصفحات غير متاحة للاستخدام في موجه التطبيق. تعلم المزيد عن [التدويل مع موجه التطبيق](/docs/app/guides/internationalization). + + + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ----------------------- | +| `v15.0.0` | تم إزالة `ip` و `geo`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/next-response.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/next-response.mdx new file mode 100644 index 00000000..fd325a56 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/next-response.mdx @@ -0,0 +1,148 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +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)` + +بالنظر إلى اسم، يتم تعيين ملف تعريف الارتباط (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/01-app/03-api-reference/04-functions/not-found.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/not-found.mdx new file mode 100644 index 00000000..96a40079 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/not-found.mdx @@ -0,0 +1,41 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: notFound +description: مرجع API لوظيفة `notFound`. +--- + +تتيح لك وظيفة `notFound` عرض [ملف `not-found`](/docs/app/api-reference/file-conventions/not-found) داخل مقطع مسار بالإضافة إلى حقن وسم ``. + +## `notFound()` + +استدعاء الدالة `notFound()` يرمي خطأ `NEXT_HTTP_ERROR_FALLBACK;404` ويوقف عرض مقطع المسار الذي تم رمي الخطأ فيه. يتيح لك تحديد [ملف **not-found**](/docs/app/api-reference/file-conventions/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 { id } = await params + const user = await fetchUser(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/01-app/05-api-reference/04-functions/permanentRedirect.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/permanentRedirect.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/permanentRedirect.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/permanentRedirect.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/redirect.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/redirect.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/redirect.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/redirect.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/unauthorized.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unauthorized.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/unauthorized.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unauthorized.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/unstable_cache.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unstable_cache.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/unstable_cache.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unstable_cache.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unstable_noStore.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unstable_noStore.mdx new file mode 100644 index 00000000..2aa5c321 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unstable_noStore.mdx @@ -0,0 +1,49 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: unstable_noStore +description: مرجع API لوظيفة unstable_noStore. +version: legacy +--- + +**في الإصدار 15، نوصي باستخدام [`connection`](/docs/app/api-reference/functions/connection) بدلاً من `unstable_noStore`.** + +يمكن استخدام `unstable_noStore` للانسحاب بشكل تصريحي من التصيير الثابت (static rendering) والإشارة إلى أن مكونًا معينًا لا يجب تخزينه مؤقتًا. + +```jsx +import { unstable_noStore as noStore } from 'next/cache'; + +export default async function ServerComponent() { + 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) لن يؤدي إلى الانسحاب من التوليد الثابت (static generation). بدلاً من ذلك، سيعتمد على تكوين الذاكرة المؤقتة لتحديد ما إذا كان سيتم تخزين النتيجة مؤقتًا أم لا. + +## الاستخدام + +إذا كنت تفضل عدم تمرير خيارات إضافية إلى `fetch`، مثل `cache: 'no-store'` أو `next: { revalidate: 0 }` أو في الحالات التي لا يكون فيها `fetch` متاحًا، يمكنك استخدام `noStore()` كبديل لكل هذه الحالات. + +```jsx +import { unstable_noStore as noStore } from 'next/cache'; + +export default async function ServerComponent() { + noStore(); + const result = await db.query(...); + ... +} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | ----------------------------------------------- | +| `v15.0.0` | تم إهمال `unstable_noStore` لصالح `connection`. | +| `v14.0.0` | تم تقديم `unstable_noStore`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/unstable_rethrow.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unstable_rethrow.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/unstable_rethrow.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/unstable_rethrow.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-link-status.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-link-status.mdx new file mode 100644 index 00000000..c42019f0 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-link-status.mdx @@ -0,0 +1,228 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: useLinkStatus +description: مرجع API لخطاف `useLinkStatus`. +related: + title: الخطوات التالية + description: تعلم المزيد عن الميزات المذكورة في هذه الصفحة من خلال قراءة مرجع API. + links: + - app/api-reference/components/link + - app/api-reference/file-conventions/loading +--- + +يتيح لك خطاف `useLinkStatus` تتبع الحالة **المعلقة** لمكون ``. يمكنك استخدامه لعرض ملاحظات بصرية مضمنة للمستخدم (مثل دوارات التحميل أو توهج النص) أثناء اكتمال الانتقال إلى مسار جديد. + +يكون `useLinkStatus` مفيدًا عندما: + +- يكون [الجلب المسبق](/docs/app/getting-started/linking-and-navigating#prefetching) معطلاً أو قيد التقدم مما يعني أن الانتقال محظور. +- يكون مسار الوجهة ديناميكيًا **ولا** يتضمن ملف [`loading.js`](/docs/app/api-reference/file-conventions/loading) الذي يسمح بالانتقال الفوري. + +```tsx filename="app/loading-indicator.tsx" switcher +'use client' + +import { useLinkStatus } from 'next/link' + +export default function LoadingIndicator() { + const { pending } = useLinkStatus() + return pending ? ( +
+ ) : null +} +``` + +```jsx filename="app/loading-indicator.js" switcher +'use client' + +import { useLinkStatus } from 'next/link' + +export default function LoadingIndicator() { + const { pending } = useLinkStatus() + return pending ? ( +
+ ) : null +} +``` + +```tsx filename="app/header.tsx" switcher +import Link from 'next/link' +import LoadingIndicator from './loading-indicator' + +export default function Header() { + return ( +
+ + Dashboard + +
+ ) +} +``` + +```jsx filename="app/header.js" switcher +import Link from 'next/link' +import LoadingIndicator from './loading-indicator' + +export default function Header() { + return ( +
+ + Dashboard + +
+ ) +} +``` + +> **معلومة مفيدة**: +> +> - يجب استخدام `useLinkStatus` داخل مكون فرعي لمكون `Link` +> - يكون الخطاف أكثر فائدة عند تعيين `prefetch={false}` على مكون `Link` +> - إذا تم جلب المسار المرتبط مسبقًا، سيتم تخطي الحالة المعلقة +> - عند النقر على عدة روابط بسرعة متتالية، يتم عرض الحالة المعلقة للرابط الأخير فقط +> - لا يتم دعم هذا الخطاف في موجه الصفحات وسيعود دائمًا بقيمة `{ pending: false }` + +## المعاملات + +```tsx +const { pending } = useLinkStatus() +``` + +لا يأخذ `useLinkStatus` أي معاملات. + +## القيم المعادة + +يُرجع `useLinkStatus` كائنًا يحتوي على خاصية واحدة: + +| الخاصية | النوع | الوصف | +| -------- | ------- | --------------------------------------- | +| pending | boolean | `true` قبل تحديث السجل، `false` بعده | + +## مثال + +### مؤشر تحميل مضمن + +من المفيد إضافة ملاحظات بصرية تشير إلى حدوث الانتقال في حال نقر المستخدم على رابط قبل اكتمال الجلب المسبق. + +```tsx filename="app/components/loading-indicator.tsx" switcher +'use client' + +import { useLinkStatus } from 'next/link' + +export default function LoadingIndicator() { + const { pending } = useLinkStatus() + return pending ? ( +
+ ) : null +} +``` + +```jsx filename="app/components/loading-indicator.js" switcher +'use client' + +import { useLinkStatus } from 'next/link' + +export default function LoadingIndicator() { + const { pending } = useLinkStatus() + return pending ? ( +
+ ) : null +} +``` + +```tsx filename="app/shop/layout.tsx" switcher +import Link from 'next/link' +import LoadingIndicator from './components/loading-indicator' + +const links = [ + { href: '/shop/electronics', label: 'Electronics' }, + { href: '/shop/clothing', label: 'Clothing' }, + { href: '/shop/books', label: 'Books' }, +] + +function Menubar() { + return ( +
+ {links.map((link) => ( + + {link.label} + + ))} +
+ ) +} + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( +
+ + {children} +
+ ) +} +``` + +```jsx filename="app/shop/layout.js" switcher +import Link from 'next/link' +import LoadingIndicator from './components/loading-indicator' + +const links = [ + { href: '/shop/electronics', label: 'Electronics' }, + { href: '/shop/clothing', label: 'Clothing' }, + { href: '/shop/books', label: 'Books' }, +] + +function Menubar() { + return ( +
+ {links.map((link) => ( + + {link.label} + + ))} +
+ ) +} + +export default function Layout({ children }) { + return ( +
+ + {children} +
+ ) +} +``` + +## التعامل السلس مع الانتقال السريع + +إذا كان الانتقال إلى مسار جديد سريعًا، فقد يرى المستخدم وميضًا غير ضروري لمؤشر التحميل. إحدى طرق تحسين تجربة المستخدم وعرض مؤشر التحميل فقط عندما يستغرق الانتقال وقتًا أطول لإكماله هي إضافة تأخير أولي للرسوم المتحركة (مثل 100 مللي ثانية) وبدء الرسوم المتحركة كخفي (مثل `opacity: 0`). + +```css filename="app/styles/global.css" +.spinner { + /* ... */ + opacity: 0; + animation: + fadeIn 500ms 100ms forwards, + rotate 1s linear infinite; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes rotate { + to { + transform: rotate(360deg); + } +} +``` + +| الإصدار | التغييرات | +| --------- | --------------------------- | +| `v15.3.0` | تم تقديم `useLinkStatus`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-params.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-params.mdx new file mode 100644 index 00000000..fb1bc874 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-params.mdx @@ -0,0 +1,75 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: useParams +description: مرجع API لـ هوك `useParams`. +--- + +`useParams` هو هوك **مكون العميل (Client Component)** يسمح لك بقراءة [المعاملات الديناميكية (dynamic params)](/docs/app/api-reference/file-conventions/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` كائنًا يحتوي على [المعاملات الديناميكية (dynamic parameters)](/docs/app/api-reference/file-conventions/dynamic-routes) المملوءة للطريق الحالي. + +- كل خاصية في الكائن تمثل مقطعًا ديناميكيًا نشطًا. +- اسم الخاصية هو اسم المقطع، وقيمة الخاصية هي ما تم ملء المقطع به. +- ستكون قيمة الخاصية إما `string` أو مصفوفة من `string` اعتمادًا على [نوع المقطع الديناميكي](/docs/app/api-reference/file-conventions/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/01-app/05-api-reference/04-functions/use-pathname.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-pathname.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/use-pathname.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-pathname.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-report-web-vitals.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-report-web-vitals.mdx new file mode 100644 index 00000000..dc2440dd --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-report-web-vitals.mdx @@ -0,0 +1,246 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: استخدام useReportWebVitals +description: مرجع API لوظيفة useReportWebVitals. +--- + +{/* يتم مشاركة محتوى هذه الوثيقة بين موجّه التطبيق وموجّه الصفحات. يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بموجّه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */} + +يتيح لك خطاف `useReportWebVitals` الإبلاغ عن [مؤشرات ويب الأساسية (Core Web Vitals)](https://web.dev/vitals/)، ويمكن استخدامه بالاشتراك مع خدمة التحليلات الخاصة بك. + +يتم استدعاء الوظائف الجديدة الممررة إلى `useReportWebVitals` مع المقاييس المتاحة حتى تلك اللحظة. لمنع الإبلاغ عن بيانات مكررة، تأكد من أن مرجع دالة رد الاتصال لا يتغير (كما هو موضح في أمثلة الكود أدناه). + + + +```jsx filename="pages/_app.js" +import { useReportWebVitals } from 'next/web-vitals' + +const logWebVitals = (metric) => { + console.log(metric) +} + +function MyApp({ Component, pageProps }) { + useReportWebVitals(logWebVitals) + + return +} +``` + + + + + +```jsx filename="app/_components/web-vitals.js" +'use client' + +import { useReportWebVitals } from 'next/web-vitals' + +const logWebVitals = (metric) => { + console.log(metric) +} + +export function WebVitals() { + useReportWebVitals(logWebVitals) + + return null +} +``` + +```jsx filename="app/layout.js" +import { WebVitals } from './_components/web-vitals' + +export default function Layout({ children }) { + return ( + + + + {children} + + + ) +} +``` + +> نظرًا لأن خطاف `useReportWebVitals` يتطلب توجيه `'use client'`، فإن النهج الأكثر كفاءة هو إنشاء مكون منفصل يستورده التخطيط الجذري. هذا يحصر حدود العميل حصريًا على مكون `WebVitals`. + + + +## 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`. + + + +```jsx filename="pages/_app.js" +import { useReportWebVitals } from 'next/web-vitals' + +const handleWebVitals = (metric) => { + switch (metric.name) { + case 'FCP': { + // التعامل مع نتائج FCP + } + case 'LCP': { + // التعامل مع نتائج LCP + } + // ... + } +} + +function MyApp({ Component, pageProps }) { + useReportWebVitals(handleWebVitals) + + return +} +``` + + + + + +```tsx filename="app/components/web-vitals.tsx" switcher +'use client' + +import { useReportWebVitals } from 'next/web-vitals' + +type ReportWebVitalsCallback = Parameters[0] + +const handleWebVitals: ReportWebVitalsCallback = (metric) => { + switch (metric.name) { + case 'FCP': { + // التعامل مع نتائج FCP + } + case 'LCP': { + // التعامل مع نتائج LCP + } + // ... + } +} + +export function WebVitals() { + useReportWebVitals(handleWebVitals) +} +``` + +```jsx filename="app/components/web-vitals.js" switcher +'use client' + +import { useReportWebVitals } from 'next/web-vitals' + +const handleWebVitals = (metric) => { + switch (metric.name) { + case 'FCP': { + // التعامل مع نتائج FCP + } + case 'LCP': { + // التعامل مع نتائج LCP + } + // ... + } +} + +export function WebVitals() { + useReportWebVitals(handleWebVitals) +} +``` + + + + + +## مقاييس مخصصة + +بالإضافة إلى المقاييس الأساسية المذكورة أعلاه، هناك بعض المقاييس المخصصة الإضافية التي تقيس الوقت الذي تستغرقه الصفحة للترطيب (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 handleCustomMetrics(metrics) { + switch (metric.name) { + case 'Next.js-hydration': + // التعامل مع نتائج الترطيب + break + case 'Next.js-route-change-to-render': + // التعامل مع نتائج تغيير المسار إلى الرسم + break + case 'Next.js-render': + // التعامل مع نتائج الرسم + break + default: + break + } +} + +function MyApp({ Component, pageProps }) { + useReportWebVitals(handleCustomMetrics) + + return +} +``` + +تعمل هذه المقاييس في جميع المتصفحات التي تدعم [واجهة برمجة تطبيقات توقيت المستخدم (User Timing API)](https://caniuse.com/#feat=user-timing). + + + +## إرسال النتائج إلى أنظمة خارجية + +يمكنك إرسال النتائج إلى أي نقطة نهاية لقياس وتتبع أداء المستخدم الحقيقي على موقعك. على سبيل المثال: + +```js +function postWebVitals(metrics) { + 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 }) + } +} + +useReportWebVitals(postWebVitals) +``` + +> **من الجيد معرفة**: إذا كنت تستخدم [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 +> 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/01-app/05-api-reference/04-functions/use-router.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-router.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/use-router.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-router.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/use-search-params.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-search-params.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/04-functions/use-search-params.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-search-params.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-selected-layout-segment.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-selected-layout-segment.mdx new file mode 100644 index 00000000..9ba6b3be --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-selected-layout-segment.mdx @@ -0,0 +1,174 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: useSelectedLayoutSegment +description: مرجع API لـ hook استخدام useSelectedLayoutSegment. +--- + +`useSelectedLayoutSegment` هو hook **مكون العميل (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

Active segment: {segment}

+} +``` + +```jsx filename="app/example-client-component.js" switcher +'use client' + +import { useSelectedLayoutSegment } from 'next/navigation' + +export default function ExampleClientComponent() { + const segment = useSelectedLayoutSegment() + + return

Active segment: {segment}

+} +``` + +> **معلومة مفيدة**: +> +> - بما أن `useSelectedLayoutSegment` هو hook [مكون العميل (Client Component)](/docs/app/getting-started/server-and-client-components)، والتخطيطات هي [مكونات الخادم (Server Components)](/docs/app/getting-started/server-and-client-components) افتراضيًا، فإن `useSelectedLayoutSegment` عادةً ما يتم استدعاؤه عبر مكون عميل يتم استيراده إلى التخطيط. +> - `useSelectedLayoutSegment` يُرجع فقط المقطع مستوى واحد أسفل. لاسترجاع جميع المقاطع النشطة، راجع [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) + +## المعاملات + +```tsx +const segment = useSelectedLayoutSegment(parallelRoutesKey?: string) +``` + +`useSelectedLayoutSegment` يقبل *اختياريًا* [`parallelRoutesKey`](/docs/app/api-reference/file-conventions/parallel-routes#with-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 ( + + {children} + + ) +} +``` + +```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 ( + + {children} + + ) +} +``` + +```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 ( +
+ {featuredPosts.map((post) => ( +
+ {post.title} +
+ ))} +
{children}
+
+ ) +} +``` + +```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 ( +
+ {featuredPosts.map((post) => ( +
+ {post.title} +
+ ))} +
{children}
+
+ ) +} +``` + +## سجل الإصدارات + +| الإصدار | التغييرات | +| --------- | -------------------------------------- | +| `v13.0.0` | تم تقديم `useSelectedLayoutSegment`. | \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-selected-layout-segments.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-selected-layout-segments.mdx new file mode 100644 index 00000000..f3d0396b --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/use-selected-layout-segments.mdx @@ -0,0 +1,79 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: useSelectedLayoutSegments +description: مرجع API لـ Hook استخدام useSelectedLayoutSegments. +--- + +`useSelectedLayoutSegments` هو **Hook لمكون العميل (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 ( +
    + {segments.map((segment, index) => ( +
  • {segment}
  • + ))} +
+ ) +} +``` + +```jsx filename="app/example-client-component.js" switcher +'use client' + +import { useSelectedLayoutSegments } from 'next/navigation' + +export default function ExampleClientComponent() { + const segments = useSelectedLayoutSegments() + + return ( +
    + {segments.map((segment, index) => ( +
  • {segment}
  • + ))} +
+ ) +} +``` + +> **معلومة مفيدة**: +> +> - بما أن `useSelectedLayoutSegments` هو Hook لمكون العميل [Client Component](/docs/app/getting-started/server-and-client-components)، والتخطيطات هي [مكونات الخادم (Server Components)](/docs/app/getting-started/server-and-client-components) افتراضيًا، فإن `useSelectedLayoutSegments` عادةً ما يتم استدعاؤه عبر مكون عميل يتم استيراده إلى التخطيط. +> - المقاطع المُرجعة تتضمن [مجموعات المسار (Route Groups)](/docs/app/api-reference/file-conventions/route-groups)، والتي قد لا ترغب في تضمينها في واجهة المستخدم. يمكنك استخدام طريقة [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) للمصفوفات لإزالة العناصر التي تبدأ بقوس. + +## المعاملات + +```tsx +const segments = useSelectedLayoutSegments(parallelRoutesKey?: string) +``` + +يقبل `useSelectedLayoutSegments` اختياريًا [`parallelRoutesKey`](/docs/app/api-reference/file-conventions/parallel-routes#with-useselectedlayoutsegments)، مما يسمح لك بقراءة مقطع المسار النشط داخل تلك الفتحة. + +## القيم المُرجعة + +يُرجع `useSelectedLayoutSegments` مصفوفة من السلاسل تحتوي على المقاطع النشطة بمستوى واحد أسفل التخطيط الذي تم استدعاء الـ Hook منه. أو مصفوفة فارغة إذا لم توجد أي مقاطع. + +على سبيل المثال، بالنظر إلى التخطيطات وعناوين 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/01-app/03-api-reference/04-functions/userAgent.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/userAgent.mdx new file mode 100644 index 00000000..156703d0 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/04-functions/userAgent.mdx @@ -0,0 +1,81 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: userAgent +description: أداة `userAgent` تمد واجهة برمجة تطبيقات الويب (Web Request API) بخصائص وطرق إضافية للتفاعل مع كائن وكيل المستخدم من الطلب. +--- + +{/* محتوى هذه الوثيقة مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `محتوى` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا في مكون. */} + +أداة `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) + + // device.type يمكن أن يكون: 'mobile', 'tablet', 'console', 'smarttv', + // 'wearable', 'embedded', أو غير محدد (لمتصفحات سطح المكتب) + const viewport = device.type || '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) + + // device.type يمكن أن يكون: 'mobile', 'tablet', 'console', 'smarttv', + // 'wearable', 'embedded', أو غير محدد (لمتصفحات سطح المكتب) + const viewport = device.type || '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/01-app/03-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx new file mode 100644 index 00000000..a1e7a9f4 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx @@ -0,0 +1,20 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: allowedDevOrigins +description: استخدم `allowedDevOrigins` لتكوين أصول إضافية يمكنها طلب خادم التطوير. +--- + +{/* يتم مشاركة محتوى هذا المستند بين موجِّه التطبيق وموجِّه الصفحات. يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بموجِّه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */} + +لا يقوم Next.js بحظر طلبات الأصول المتقاطعة (cross-origin) تلقائيًا أثناء التطوير، ولكنه سيقوم بالحظر افتراضيًا في إصدار رئيسي مستقبلي من Next.js لمنع الطلبات غير المصرح بها للأصول/النقاط الطرفية الداخلية المتاحة في وضع التطوير. + +لتكوين تطبيق Next.js للسماح بطلبات من أصول أخرى غير اسم المضيف الذي تم تهيئة الخادم به (`localhost` افتراضيًا)، يمكنك استخدام خيار التكوين `allowedDevOrigins`. + +يسمح لك `allowedDevOrigins` بتعيين أصول إضافية يمكن استخدامها في وضع التطوير. على سبيل المثال، لاستخدام `local-origin.dev` بدلاً من `localhost` فقط، افتح ملف `next.config.js` وأضف تكوين `allowedDevOrigins`: + +```js filename="next.config.js" +module.exports = { + allowedDevOrigins: ['local-origin.dev', '*.local-origin.dev'], +} +``` \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/appDir.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/appDir.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/assetPrefix.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/assetPrefix.mdx new file mode 100644 index 00000000..93aaaadc --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/assetPrefix.mdx @@ -0,0 +1,77 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: assetPrefix +description: تعرف على كيفية استخدام خيار التكوين assetPrefix لضبط شبكة توصيل المحتوى (CDN) الخاصة بك. +--- + +{/* المحتوى في هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك يجب ألا يكون مغلفًا داخل مكون. */} + + + +> **ملاحظة**: [النشر على Vercel](/docs/app/getting-started/deploying) يقوم تلقائيًا بضبط شبكة توصيل محتوى (CDN) عالمية لمشروع Next.js الخاص بك. +> لا تحتاج إلى إعداد بادئة الأصول (Asset Prefix) يدويًا. + + + + + +> **ملاحظة**: [النشر على Vercel](/docs/pages/getting-started/deploying) يقوم تلقائيًا بضبط شبكة توصيل محتوى (CDN) عالمية لمشروع Next.js الخاص بك. +> لا تحتاج إلى إعداد بادئة الأصول (Asset Prefix) يدويًا. + + + +> **معلومة مفيدة**: بدءًا من Next.js 9.5+ تمت إضافة دعم لـ [مسار الأساس (Base Path)](/docs/app/api-reference/config/next-config-js/basePath) القابل للتخصيص، والذي يكون أكثر ملاءمة لاستضافة تطبيقك على مسار فرعي مثل `/docs`. +> لا ننصح باستخدام بادئة أصول مخصصة لهذا الغرض. + +## إعداد شبكة توصيل المحتوى (CDN) + +لإعداد [شبكة توصيل المحتوى (CDN)](https://en.wikipedia.org/wiki/Content_delivery_network)، يمكنك ضبط بادئة الأصول وتكوين أصل CDN الخاص بك ليحل إلى النطاق الذي يستضيف Next.js. + +افتح ملف `next.config.mjs` وأضف تكوين `assetPrefix` بناءً على [المرحلة](/docs/app/api-reference/config/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`، إلا أنها لا تؤثر على المسارات التالية: + + + +- الملفات في مجلد [public](/docs/app/api-reference/file-conventions/public-folder)؛ إذا كنت تريد تقديم هذه الأصول عبر CDN، فسيتعين عليك إضافة البادئة بنفسك + + + + + +- الملفات في مجلد [public](/docs/pages/api-reference/file-conventions/public-folder)؛ إذا كنت تريد تقديم هذه الأصول عبر CDN، فسيتعين عليك إضافة البادئة بنفسك +- طلبات `/_next/data/` لصفحات `getServerSideProps`. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لأنها ليست ثابتة. +- طلبات `/_next/data/` لصفحات `getStaticProps`. هذه الطلبات ستتم دائمًا ضد النطاق الرئيسي لدعم [التوليد الثابت التدريجي (Incremental Static Generation)](/docs/pages/guides/incremental-static-regeneration)، حتى إذا لم تكن تستخدمه (لضمان الاتساق). + + \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/authInterrupts.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/authInterrupts.mdx new file mode 100644 index 00000000..f53ca19f --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/authInterrupts.mdx @@ -0,0 +1,35 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: authInterrupts +description: تعرف على كيفية تمكين خيار التكوين التجريبي `authInterrupts` لاستخدام `forbidden` و `unauthorized`. +version: canary +related: + links: + - app/api-reference/functions/forbidden + - app/api-reference/functions/unauthorized + - app/api-reference/file-conventions/forbidden + - app/api-reference/file-conventions/unauthorized +--- + +يتيح لك خيار التكوين `authInterrupts` استخدام واجهات برمجة التطبيقات [`forbidden`](/docs/app/api-reference/functions/forbidden) و [`unauthorized`](/docs/app/api-reference/functions/unauthorized) في تطبيقك. بينما تعتبر هذه الوظائف تجريبية، يجب عليك تمكين خيار `authInterrupts` في ملف `next.config.js` الخاص بك لاستخدامها: + +```ts filename="next.config.ts" switcher +import type { NextConfig } from 'next' + +const nextConfig: NextConfig = { + experimental: { + authInterrupts: true, + }, +} + +export default nextConfig +``` + +```js filename="next.config.js" switcher +module.exports = { + experimental: { + authInterrupts: true, + }, +} +``` \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/basePath.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/basePath.mdx new file mode 100644 index 00000000..916cb07c --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/basePath.mdx @@ -0,0 +1,81 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: basePath +description: استخدم `basePath` لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق. +--- + +{/* يتم مشاركة محتوى هذه الوثيقة بين موجه التطبيق وموجه الصفحات. يمكنك استخدام المكون `المحتوى` لإضافة محتوى محدد لموجه الصفحات. أي محتوى مشترك يجب عدم تضمينه في مكون. */} + +لنشر تطبيق 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 ( + <> + صفحة حول + + ) +} +``` + +إخراج HTML: + +```html +صفحة حول +``` + +هذا يضمن أنك لست بحاجة لتغيير جميع الروابط في تطبيقك عند تغيير قيمة `basePath`. + +### الصور + + + +عند استخدام مكون [`next/image`](/docs/app/api-reference/components/image)، ستحتاج إلى إضافة `basePath` قبل `src`. + + + + + +عند استخدام مكون [`next/image`](/docs/pages/api-reference/components/image)، ستحتاج إلى إضافة `basePath` قبل `src`. + + + +على سبيل المثال، استخدام `/docs/me.png` سيخدم صورتك بشكل صحيح عندما يتم تعيين `basePath` إلى `/docs`. + +```jsx +import Image from 'next/image' + +function Home() { + return ( + <> +

صفحتي الرئيسية

+ صورة المؤلف +

مرحبًا بكم في صفحتي الرئيسية!

+ + ) +} + +export default Home +``` \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/dynamicIO.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/cacheComponents.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/dynamicIO.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/cacheComponents.mdx diff --git a/apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/cacheLife.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/cacheLife.mdx similarity index 100% rename from apps/docs/content/ar/docs/01-app/05-api-reference/05-config/01-next-config-js/cacheLife.mdx rename to apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/cacheLife.mdx diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/compress.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/compress.mdx new file mode 100644 index 00000000..4db3260e --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/compress.mdx @@ -0,0 +1,24 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: ضغط الملفات (compress) +description: يوفر Next.js ضغطًا باستخدام gzip لضغط المحتوى المُصيَّر والملفات الثابتة، وهو يعمل فقط مع هدف الخادم. تعرّف على المزيد حول ذلك هنا. +--- + +{/* يتم مشاركة محتوى هذا المستند بين موجه التطبيق (app router) وموجه الصفحات (pages router). يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا داخل مكون. */} + +بشكل افتراضي، يستخدم Next.js `gzip` لضغط المحتوى المُصيَّر والملفات الثابتة عند استخدام `next start` أو خادم مخصص. هذه تحسين للتطبيقات التي لا تحتوي على ضغط مُهيأ. إذا كان الضغط _مُهيأ بالفعل_ في تطبيقك عبر خادم مخصص، فلن يقوم Next.js بإضافة الضغط. + +يمكنك التحقق مما إذا كان الضغط مفعلًا وأي خوارزمية مستخدمة من خلال النظر إلى رؤوس [`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, +} +``` + +**لا نوصي بتعطيل الضغط** إلا إذا كان لديك ضغط مُهيأ على خادمك، حيث أن الضغط يقلل من استخدام النطاق الترددي ويحسن أداء تطبيقك. على سبيل المثال، إذا كنت تستخدم [nginx](https://nginx.org/) وتريد التبديل إلى `brotli`، فعيّن خيار `compress` إلى `false` للسماح لـ nginx بالتعامل مع الضغط. \ No newline at end of file diff --git a/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/crossOrigin.mdx b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/crossOrigin.mdx new file mode 100644 index 00000000..4f3ac2c8 --- /dev/null +++ b/apps/docs/content/ar/docs/01-app/03-api-reference/05-config/01-next-config-js/crossOrigin.mdx @@ -0,0 +1,21 @@ +--- +source-updated-at: 2025-08-09T22:43:46.028Z +translation-updated-at: 2025-08-09T22:43:46.028Z +title: crossOrigin +description: استخدم خيار `crossOrigin` لإضافة سمة crossOrigin في علامات `script` التي يتم إنشاؤها بواسطة `next/script`. +--- + +{/* محتوى هذا المستند مشترك بين موجه التطبيق وموجه الصفحات. يمكنك استخدام مكون `المحتوى` لإضافة محتوى خاص بموجه الصفحات. أي محتوى مشترك لا يجب أن يكون مغلفًا بمكون. */} + +استخدم خيار `crossOrigin` لإضافة [سمة `crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) في جميع علامات ` diff --git a/apps/docs/content/en/learn/01-react-foundations/05-building-ui-with-components.mdx b/apps/docs/content/en/learn/01-react-foundations/05-building-ui-with-components.mdx index 745b44cd..08da3594 100644 --- a/apps/docs/content/en/learn/01-react-foundations/05-building-ui-with-components.mdx +++ b/apps/docs/content/en/learn/01-react-foundations/05-building-ui-with-components.mdx @@ -42,10 +42,9 @@ In React, components are **functions.** Inside your `script` tag, create a new f ```html {4,5} filename="index.html"