التخطيطات المتداخلة

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 13 من 47.

التصميم الجذري (root layout) ليس الوحيد. يمكنك إضافة ملف layout.jsx إلى أي مجلد وسوف يغلف (wraps) مسارات ذلك المجلد فقط دون غيرها.

app/
    layout.jsx          wraps EVERYTHING
    page.jsx            /
    menu/
        layout.jsx      wraps /menu and everything under it
        page.jsx        /menu
        pizza/
            page.jsx    /menu/pizza

قم بزيارة /menu/pizza وسيقوم Next.js بتضمينها من الخارجي إلى الداخلي:

RootLayout
    MenuLayout
        PizzaPage

قم بزيارة / وسيعمل مخطط Root الأساسي فقط: مخطط menu ليس في مسار هذا العنوان URL، لذلك لن يظهر أبدًا.

يتم كتابة المخطط المتداخل (nested layout) تمامًا مثل المخطط الرئيسي (root)، باستثناء الهيكل الخارجي: لا يوجد <html>، ولا يوجد <body>. مجرد مكون يأخذ children.

هذه هي الطريقة التي يحصل بها قسم واحد من الموقع على شريطه الجانبي الخاص، وتبويباته الخاصة، وعنوانه الخاص، دون الحاجة إلى عبارة if واحدة حول عنوان URL الحالي.

التحدي

سهل

يحتاج قسم الـ menu إلى عنوان خاص به: في /menu وصفحات الـ dish التابعة له، ولكن ليس في أي مكان آخر.

الملف app/menu/layout.jsx موجود بالفعل ويقوم بتمرير children مباشرة. داخل عنصر <section> الخاص به، أعلى {children}، أضف:

عنصر <h2> يحتوي على id="menu-header" والنص Menu

تتحقق الاختبارات من ظهور العنوان في /menu وفي /menu/pizza، وأنه غير موجود عند العودة إلى /.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}