Skip to content

Update translations #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 9, 2025
Merged

Update translations #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 54 additions & 54 deletions apps/docs/content/ar/docs/01-app/01-getting-started/02-project-structure.mdx
View file
Open in desktop

Large diffs are not rendered by default.

43 changes: 22 additions & 21 deletions apps/docs/content/ar/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
---
source-updated-at: 2025-06-01T01:32:20.000Z
translation-updated-at: 2025-06-02T20:03:36.299Z
source-updated-at: 2025-06-08T05:18:05.000Z
translation-updated-at: 2025-06-08T22:13:50.198Z
title: كيفية إنشاء التخطيطات والصفحات
nav_title: التخطيطات والصفحات
description: إنشاء أول صفحاتك وتخطيطاتك، والربط بينها.
related:
title: مرجع API
description: تعلم المزيد عن الميزات المذكورة في هذه الصفحة من خلال قراءة مرجع API.
links:
- app/getting-started/linking-and-navigating
- app/api-reference/file-conventions/layout
- app/api-reference/file-conventions/page
- app/api-reference/components/link
- app/api-reference/file-conventions/dynamic-routes
---

يستخدم Next.js **التوجيه القائم على نظام الملفات**، مما يعني أنه يمكنك استخدام المجلدات والملفات لتحديد المسارات. سترشدك هذه الصفحة حول كيفية إنشاء التخطيطات والصفحات، والربط بينها.
يستخدم Next.js **التوجيه القائم على نظام الملفات**، مما يعني أنه يمكنك استخدام المجلدات والملفات لتحديد المسارات. سيرشدك هذه الصفحة حول كيفية إنشاء التخطيطات والصفحات، والربط بينها.

## إنشاء صفحة

**الصفحة** هي واجهة مستخدم يتم عرضها على مسار معين. لإنشاء صفحة، أضف ملف [`page`](/docs/app/api-reference/file-conventions/page) داخل مجلد `app` وقم بتصدير مكون React افتراضيًا. على سبيل المثال، لإنشاء صفحة رئيسية (`/`):
**الصفحة** هي واجهة مستخدم يتم عرضها على مسار معين. لإنشاء صفحة، أضف ملف [`page`](/docs/app/api-reference/file-conventions/page) داخل دليل `app` وقم بتصدير مكون React افتراضيًا. على سبيل المثال، لإنشاء صفحة رئيسية (`/`):

<Image
alt="ملف page.js الخاص"
Expand All @@ -42,11 +43,11 @@ export default function Page() {

## إنشاء تخطيط

التخطيط هو واجهة مستخدم **مشتركة** بين عدة صفحات. أثناء التنقل، تحافظ التخطيطات على الحالة، تبقى تفاعلية، ولا يتم إعادة عرضها.
التخطيط هو واجهة مستخدم **مشتركة** بين عدة صفحات. عند التنقل، تحافظ التخطيطات على الحالة، تبقى تفاعلية، ولا يتم إعادة عرضها.

يمكنك تعريف تخطيط عن طريق تصدير مكون React افتراضيًا من ملف [`layout`](/docs/app/api-reference/file-conventions/layout). يجب أن يقبل المكون خاصية `children` والتي يمكن أن تكون صفحة أو [تخطيط آخر](#nesting-layouts).
يمكنك تحديد تخطيط عن طريق تصدير مكون React افتراضيًا من ملف [`layout`](/docs/app/api-reference/file-conventions/layout). يجب أن يقبل المكون خاصية `children` والتي يمكن أن تكون صفحة أو [تخطيط آخر](#nesting-layouts).

على سبيل المثال، لإنشاء تخطيط يقبل صفحتك الرئيسية كطفل، أضف ملف `layout` داخل مجلد `app`:
على سبيل المثال، لإنشاء تخطيط يقبل صفحتك الرئيسية كطفل، أضف ملف `layout` داخل دليل `app`:

<Image
alt="ملف layout.js الخاص"
Expand Down Expand Up @@ -88,7 +89,7 @@ export default function DashboardLayout({ children }) {
}
```

يسمى التخطيط أعلاه [تخطيط الجذر](/docs/app/api-reference/file-conventions/layout#root-layout) لأنه محدد في جذر مجلد `app`. تخطيط الجذر **مطلوب** ويجب أن يحتوي على علامات `html` و `body`.
يسمى التخطيط أعلاه [تخطيط الجذر](/docs/app/api-reference/file-conventions/layout#root-layout) لأنه محدد في جذر دليل `app`. تخطيط الجذر **مطلوب** ويجب أن يحتوي على علامات `html` و `body`.

## إنشاء مسار متداخل

Expand All @@ -100,13 +101,13 @@ export default function DashboardLayout({ children }) {

في Next.js:

- تُستخدم **المجلدات** لتحديد أجزاء المسار التي تعين إلى أجزاء URL.
- تُستخدم **الملفات** (مثل `page` و `layout`) لإنشاء واجهة مستخدم تعرض لجزء معين.
- **المجلدات** تستخدم لتحديد أجزاء المسار التي تعين إلى أجزاء URL.
- **الملفات** (مثل `page` و `layout`) تستخدم لإنشاء واجهة مستخدم تعرض لجزء.

لإنشاء مسارات متداخلة، يمكنك تداخل المجلدات داخل بعضها البعض. على سبيل المثال، لإضافة مسار لـ `/blog`، أنشئ مجلدًا يسمى `blog` في مجلد `app`. ثم، لجعل `/blog` متاحًا للجمهور، أضف ملف `page.tsx`:
لإنشاء مسارات متداخلة، يمكنك تداخل المجلدات داخل بعضها البعض. على سبيل المثال، لإضافة مسار لـ `/blog`، أنشئ مجلدًا يسمى `blog` في دليل `app`. ثم، لجعل `/blog` متاحًا للجمهور، أضف ملف `page.tsx`:

<Image
alt="تسلسل هرمي للملفات يظهر مجلد blog وملف page.js"
alt="تسلسل الملفات يظهر مجلد blog وملف page.js"
srcLight="/docs/light/blog-nested-route.png"
srcDark="/docs/dark/blog-nested-route.png"
width="1600"
Expand Down Expand Up @@ -149,10 +150,10 @@ export default async function Page() {
}
```

يمكنك الاستمرار في تداخل المجلدات لإنشاء مسارات متداخلة. على سبيل المثال، لإنشاء مسار لمنشور مدونة معين، أنشئ مجلد `[slug]` جديد داخل `blog` وأضف ملف `page`:
يمكنك مواصلة تداخل المجلدات لإنشاء مسارات متداخلة. على سبيل المثال، لإنشاء مسار لمنشور مدونة معين، أنشئ مجلد `[slug]` جديد داخل `blog` وأضف ملف `page`:

<Image
alt="تسلسل هرمي للملفات يظهر مجلد blog مع مجلد slug متداخل وملف page.js"
alt="تسلسل الملفات يظهر مجلد blog مع مجلد slug متداخل وملف page.js"
srcLight="/docs/light/blog-post-nested-route.png"
srcDark="/docs/dark/blog-post-nested-route.png"
width="1600"
Expand All @@ -175,16 +176,16 @@ export default function Page() {
}
```

يؤدي تغليف اسم مجلد بين أقواس مربعة (مثل `[slug]`) إلى إنشاء [جزء مسار ديناميكي](/docs/app/api-reference/file-conventions/dynamic-routes) يُستخدم لإنشاء صفحات متعددة من البيانات. مثل منشورات المدونة، صفحات المنتجات، إلخ.
لف اسم المجلد بين أقواس مربعة (مثل `[slug]`) ينشئ [جزء مسار ديناميكي](/docs/app/api-reference/file-conventions/dynamic-routes) يستخدم لإنشاء صفحات متعددة من البيانات. مثل منشورات المدونة، صفحات المنتجات، إلخ.

## تداخل التخطيطات

بشكل افتراضي، تكون التخطيطات في التسلسل الهرمي للمجلدات متداخلة أيضًا، مما يعني أنها تغلف التخطيطات الفرعية عبر خاصية `children`. يمكنك تداخل التخطيطات عن طريق إضافة `layout` داخل أجزاء مسار معينة (مجلدات).
افتراضيًا، التخطيطات في تسلسل المجلدات متداخلة أيضًا، مما يعني أنها تغلف التخطيطات الفرعية عبر خاصية `children`. يمكنك تداخل التخطيطات عن طريق إضافة `layout` داخل أجزاء مسار معينة (مجلدات).

على سبيل المثال، لإنشاء تخطيط لمسار `/blog`، أضف ملف `layout` جديد داخل مجلد `blog`.

<Image
alt="تسلسل هرمي للملفات يظهر تخطيط الجذر يغلف تخطيط المدونة"
alt="تسلسل الملفات يظهر تخطيط الجذر يغلف تخطيط المدونة"
srcLight="/docs/light/nested-layouts.png"
srcDark="/docs/dark/nested-layouts.png"
width="1600"
Expand All @@ -211,9 +212,9 @@ export default function BlogLayout({ children }) {

## إنشاء جزء ديناميكي

تسمح لك [الأجزاء الديناميكية](/docs/app/api-reference/file-conventions/dynamic-routes) بإنشاء مسارات يتم إنشاؤها من البيانات. على سبيل المثال، بدلاً من إنشاء مسار يدويًا لكل منشور مدونة فردي، يمكنك إنشاء جزء ديناميكي لإنشاء المسارات بناءً على بيانات منشور المدونة.
[الأجزاء الديناميكية](/docs/app/api-reference/file-conventions/dynamic-routes) تتيح لك إنشاء مسارات يتم إنشاؤها من البيانات. على سبيل المثال، بدلاً من إنشاء مسار يدويًا لكل منشور مدونة فردي، يمكنك إنشاء جزء ديناميكي لإنشاء المسارات بناءً على بيانات منشور المدونة.

لإنشاء جزء ديناميكي، قم بتغليف اسم الجزء (المجلد) بين أقواس مربعة: `[segmentName]`. على سبيل المثال، في مسار `app/blog/[slug]/page.tsx`، `[slug]` هو الجزء الديناميكي.
لإنشاء جزء ديناميكي، لف اسم الجزء (المجلد) بين أقواس مربعة: `[segmentName]`. على سبيل المثال، في مسار `app/blog/[slug]/page.tsx`، `[slug]` هو الجزء الديناميكي.

```tsx filename="app/blog/[slug]/page.tsx" switcher
export default async function BlogPostPage({
Expand Down Expand Up @@ -251,7 +252,7 @@ export default async function BlogPostPage({ params }) {

## الربط بين الصفحات

يمكنك استخدام مكون [`<Link>`](/docs/app/api-reference/components/link) للتنقل بين المسارات. `<Link>` هو مكون مضمن في Next.js يمتد علامة HTML `<a>` لتوفير [الجلب المسبق](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) و[التنقل من جانب العميل](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation).
يمكنك استخدام مكون [`<Link>`](/docs/app/api-reference/components/link) للتنقل بين المسارات. `<Link>` هو مكون مضمن في Next.js يمتد علامة HTML `<a>` لتوفير [الجلب المسبق](/docs/app/getting-started/linking-and-navigating#prefetching) و[التنقل من جانب العميل](/docs/app/getting-started/linking-and-navigating#client-side-transitions).

على سبيل المثال، لإنشاء قائمة بمنشورات المدونة، استورد `<Link>` من `next/link` ومرر خاصية `href` إلى المكون:

Expand Down Expand Up @@ -291,4 +292,4 @@ export default async function Post({ post }) {
}
```

`<Link>` هو الطريقة الأساسية والمفضلة للتنقل بين المسارات في تطبيق Next.js الخاص بك. ومع ذلك، يمكنك أيضًا استخدام [خطاف `useRouter`](/docs/app/api-reference/functions/use-router) للتنقل المتقدم.
> **جيد أن تعرف**: `<Link>` هو الطريقة الأساسية للتنقل بين المسارات في Next.js. يمكنك أيضًا استخدام [خطاف `useRouter`](/docs/app/api-reference/functions/use-router) للتنقل المتقدم.
Loading