פריסת השורש

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

בכל אפליקציה יש חלקים שאינם משתנים לעולם: מעטפת הדף, כותרת עליונה וכותרת תחתונה. ב-Next.js הם נמצאים ב-פריסה, והחיצונית ביותר נקראת פריסת השורש.

זה הקובץ שהיה נעול מולך כל הזמן:

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

שלושה דברים מבדילים אותו מדף:

הוא נדרש, והוא הקובץ היחיד שמרנדר את <html> ואת <body>
הוא מקבל את children, כלומר את הדף שאליו כתובת ה-URL התאימה. אם תשכחו לרנדר את {children}, האפליקציה שלכם תציג רק את המעטפת.
הוא עוטף כל נתיב באפליקציה, בלי שאף דף ייבא אותו

הוא נשמר

הנה החלק שמפתיע אנשים. כשהמשתמש עובר מ־/ אל /menu, הפריסה לא נוצרת מחדש. Next.js מחליף את הדף שבתוכה ומשאיר את הפריסה ללא שינוי.

כך הכותרת המשותפת לא מהבהבת, סרטון בסרגל הצד ממשיך להתנגן, וכל מצב שמתקיים בפריסה שורד את הניווט: תפריט פתוח נשאר פתוח, ומיקום הגלילה נשאר במקומו. פריסה היא מסגרת ארוכת־חיים; דפים באים והולכים בתוכה.

כדאי לזכור תוצאה אחת: מכיוון שפריסה אינה מופעלת מחדש במהלך הניווט, היא אינה יכולה לקרוא את searchParams של העמוד הנוכחי. היא אינה מאזינה לשינוי.

נסו בעצמכם

השיעור הזה לא כולל אתגר קוד.