ملف layout.js
التنسيق (Layout) هو واجهة مستخدم مشتركة بين المسارات (routes).
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
}
}) {
// الرابط -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
return <section>{children}</section>
}export default function ShopLayout({ children, params }) {
// الرابط -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
return <section>{children}</section>
}معلومات مفيدة
التنسيقات لا تتلقى searchParams
على عكس الصفحات، مكونات التنسيق لا تتلقى خاصية searchParams. وذلك لأن التنسيق المشترك لا يتم إعادة تصييره أثناء التنقل مما قد يؤدي إلى searchParams قديمة بين عمليات التنقل.
عند استخدام التنقل من جانب العميل، يقوم Next.js تلقائيًا بتصيير جزء الصفحة الموجود أسفل التنسيق المشترك بين مسارين فقط.
على سبيل المثال، في هيكل الدليل التالي، dashboard/layout.tsx هو التنسيق المشترك لكل من /dashboard/settings و /dashboard/analytics:
عند التنقل من /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) التي تتعامل تلقائيًا مع المتطلبات المتقدمة مثل البث (streaming) وإزالة تكرار عناصر<head>.
- لا يجب إضافة علامات
- يمكنك استخدام مجموعات المسارات (route groups) لإنشاء تنسيقات جذر متعددة.
- التنقل بين تنسيقات جذر متعددة سيؤدي إلى تحميل كامل للصفحة (بدلاً من التنقل من جانب العميل). على سبيل المثال، التنقل من
/cartالذي يستخدمapp/(shop)/layout.jsإلى/blogالذي يستخدمapp/(marketing)/layout.jsسيؤدي إلى تحميل كامل للصفحة. هذا ينطبق فقط على تنسيقات الجذر المتعددة.
- التنقل بين تنسيقات جذر متعددة سيؤدي إلى تحميل كامل للصفحة (بدلاً من التنقل من جانب العميل). على سبيل المثال، التنقل من
سجل الإصدارات
| الإصدار | التغييرات |
|---|---|
v13.0.0 | تم تقديم layout. |