ملف layout.js
التنسيق (Layout) هو واجهة مستخدم مشتركة بين المسارات.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return <section>{children}</section>
}export default function DashboardLayout({ children }) {
return <section>{children}</section>
}تنسيق الجذر (Root Layout) هو أعلى تنسيق في دليل الجذر app. يُستخدم لتعريف علامات <html> و <body> وواجهات المستخدم المشتركة عالميًا.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}الخصائص (Props)
children (مطلوب)
يجب أن تقبل مكونات التنسيق وتستخدم خاصية children. أثناء التقديم، سيتم ملء children بمقاطع المسار التي يحيط بها التنسيق. ستكون هذه في الغالب مكون التنسيق الفرعي (إذا وجد) أو الصفحة، ولكن يمكن أن تكون أيضًا ملفات خاصة أخرى مثل التحميل أو الخطأ عند الاقتضاء.
params (اختياري)
كائن معلمات المسار الديناميكي من مقطع الجذر وصولاً إلى ذلك التنسيق.
| مثال | URL | params |
|---|---|---|
app/dashboard/[team]/layout.js | /dashboard/1 | { team: '1' } |
app/shop/[tag]/[item]/layout.js | /shop/1/2 | { tag: '1', item: '2' } |
app/blog/[...slug]/layout.js | /blog/1/2 | { slug: ['1', '2'] } |
مثال:
export default function ShopLayout({
children,
params,
}: {
children: React.ReactNode
params: {
tag: string
item: string
}
}) {
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
return <section>{children}</section>
}export default function ShopLayout({ children, params }) {
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
return <section>{children}</section>
}معلومات مفيدة
التنسيقات لا تستقبل searchParams
على عكس الصفحات، مكونات التنسيق لا تستقبل خاصية searchParams. هذا لأن التنسيق المشترك لا يتم إعادة تقديمه أثناء التنقل مما قد يؤدي إلى searchParams قديمة بين عمليات التنقل.
عند استخدام التنقل من جانب العميل، يقوم Next.js تلقائيًا بتقديم جزء الصفحة أسفل التنسيق المشترك بين مسارين فقط.
على سبيل المثال، في هيكل الدليل التالي، dashboard/layout.tsx هو التنسيق المشترك لكل من /dashboard/settings و /dashboard/analytics:
app
└── dashboard
├── layout.tsx
├── settings
│ └── page.tsx
└── analytics
└── page.jsعند التنقل من /dashboard/settings إلى /dashboard/analytics، سيتم تقديم page.tsx في /dashboard/analytics على الخادم لأنه واجهة المستخدم التي تغيرت، بينما لن يتم إعادة تقديم dashboard/layout.tsx لأنه واجهة مستخدم مشتركة بين المسارين.
يسمح هذا التحسين للأداء بالتنقل بين الصفحات التي تشترك في تنسيق أن يكون أسرع حيث يتعين فقط تشغيل جلب البيانات وتقديم الصفحة، بدلاً من المسار بالكامل الذي قد يتضمن تنسيقات مشتركة تجلب بياناتها الخاصة.
نظرًا لأن dashboard/layout.tsx لا يعاد تقديمه، قد تصبح خاصية searchParams في مكون الخادم للتنسيق قديمة بعد التنقل.
- بدلاً من ذلك، استخدم خاصية
searchParamsللصفحة أو خطافuseSearchParamsفي مكون العميل، والذي يعاد تقديمه على العميل بأحدثsearchParams.
تنسيقات الجذر
- يجب أن يتضمن دليل
appملفapp/layout.jsللجذر. - يجب أن يحدد تنسيق الجذر علامات
<html>و<body>.- لا يجب إضافة علامات
<head>يدويًا مثل<title>و<meta>إلى تنسيقات الجذر. بدلاً من ذلك، يجب استخدام واجهة برمجة تطبيقات البيانات الوصفية (Metadata API) التي تتعامل تلقائيًا مع المتطلبات المتقدمة مثل البث وإزالة تكرار عناصر<head>.
- لا يجب إضافة علامات
- يمكنك استخدام مجموعات المسارات (route groups) لإنشاء تنسيقات جذر متعددة.
- التنقل بين تنسيقات جذر متعددة سيؤدي إلى تحميل كامل للصفحة (على عكس التنقل من جانب العميل). على سبيل المثال، التنقل من
/cartالذي يستخدمapp/(shop)/layout.jsإلى/blogالذي يستخدمapp/(marketing)/layout.jsسيؤدي إلى تحميل كامل للصفحة. هذا ينطبق فقط على تنسيقات الجذر المتعددة.
- التنقل بين تنسيقات جذر متعددة سيؤدي إلى تحميل كامل للصفحة (على عكس التنقل من جانب العميل). على سبيل المثال، التنقل من
سجل الإصدارات
| الإصدار | التغييرات |
|---|---|
v13.0.0 | تم تقديم layout. |