التخطيط عبارة عن واجهة مستخدم مشتركة تغلف عدة صفحات وتستمر عبر الملاحة — فهي لا تعاد عرضها أو تفقد الحالة عند الانتقال بين المسارات الفرعية. يمكنك تعريفها بملف layout.tsx.
التخطيط الجذري (مطلوب)
tsx
() {
(
);
}
كل تطبيق App Router يجب أن يحتوي على تخطيط جذري — فهو يحل محل _app.tsx/_document.tsx القديم.
تتداخل التخطيطات مع هيكل المجلد، لذا يمكن لكل قسم إضافة غلافه الخاص به المستمر:
app/layout.tsx → wraps everything (header/footer)
app/dashboard/layout.tsx → wraps all /dashboard/* pages (adds a sidebar)
app/dashboard/settings/page.tsx → rendered inside BOTH layouts
// app/dashboard/layout.tsx — only wraps dashboard routes
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* stays mounted as you move within /dashboard */}
<main>{children}</main>
</div>
);
}
عند الملاحة من /dashboard/settings إلى /dashboard/billing، يبقى تخطيط لوحة التحكم (و<Sidebar> الخاص به) مثبتاً — تُحفظ حالته (موضع التمرير، القوائم المفتوحة، إدخال النموذج)، ويتم استبدال محتوى الصفحة فقط. هذا أكثر كفاءة ويوفر تجربة مستخدم أكثر سلاسة من إعادة عرض الغلاف بأكمله.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
استخدم template.tsx بدلاً من layout.tsx في الحالات النادرة التي تريد فيها إعادة تعيين الغلاف عند كل ملاحة.
التخطيطات هي الطريقة التي يمثل بها App Router واجهة المستخدم المشتركة والمستمرة (الرؤوس، الأشرطة الجانبية، القوائم) على أي مستوى من مستويات شجرة المسارات.
إن مثابرتها عبر الملاحة — الحفاظ على الحالة وتجنب إعادة عرض الغلاف — هي ميزة أساسية في App Router، والتخطيطات المتداخلة تسمح لكل قسم بتكوين هيكله الخاص بطريقة نظيفة.