ניווט משותף

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

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

// app/layout.jsx
import Link from 'next/link';

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

שימו לב למיקום של {children}: אחרי הניווט. כל דבר שתציבו לפניו יופיע מעל הדף, וכל דבר שאחריו יופיע מתחתיו. הפריסה היא פשוט JSX. הכלל היחיד הוא ש־{children} חייב להופיע איפשהו בתוכה.

עכשיו הפריסה היא הקובץ שלך, ולא קובץ נעול. הוסף את הניווט, ואז ראה איך הוא נשאר במקומו בזמן שהתוכן שמתחתיו משתנה.

אתגר

קל

הוסף ל-Coddy Eats סרגל ניווט שמופיע בכל עמוד.

בתוך app/layout.jsx, בתוך <body> ומעל ל-{children}, הוסף:

<nav> עם id="nav"
בתוכו, <Link> אל / עם id="home-link" והטקסט Home
וגם <Link> אל /menu עם id="menu-link" והטקסט Menu

העמודים נעולים: יש לגעת רק בפריסה. הבדיקות מבקרות אחר כך ב-/menu ובודקות שסרגל הניווט עדיין מוצג.

נסו בעצמכם

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'Coddy Eats',
};

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