פריסות מקוננות

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 13 מתוך 47.

הפריסה הראשית אינה היחידה. הוסיפו layout.jsx לכל תיקייה, והוא יעטוף את הנתיבים של אותה תיקייה, ורק אותם.

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

בקרו ב-/, ורק פריסת השורש מופעלת: פריסת התפריט אינה נמצאת בנתיב של כתובת ה-URL הזו, ולכן היא לעולם אינה מופיעה.

פריסה מקוננת נכתבת בדיוק כמו פריסת השורש, בלי המעטפת: ללא <html>, ללא <body>. רק רכיב שמקבל children.

כך יחידה אחת באתר מקבלת סרגל צד משלה, כרטיסיות משלה וכותרת משלה, בלי אפילו משפט if אחד לגבי כתובת ה-URL הנוכחית.

אתגר

קל

ליחידת התפריט דרושה כותרת משלה: ב־/menu ובעמודי המנות שלה, אבל בשום מקום אחר.

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>
    );
}