מטא־נתונים של הדף

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

לשונית הדפדפן, הסימנייה, התוצאה ב-Google, התצוגה המקדימה של הקישור בצ'אט: כולם קוראים את תגיות <title> ו-<meta> של הדף. ב-Next.js אף פעם לא כותבים את התגיות האלה ידנית.

במקום זאת, דף או פריסה מייצאים אובייקט שנקרא metadata:

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

השם חשוב: הוא חייב להיות בדיוק metadata, ומיוצא מקובץ הנתיב. Next.js קורא אותו במהלך הרינדור וכותב עבורך את ה-head.

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

אתגר

מתחילים

כרגע, כל לשונית של Coddy Eats מציגה את Coddy Eats, כי זה מה שמוגדר בפריסת הבסיס. לעמוד התפריט מגיעה כותרת משלו.

ב־app/menu/page.jsx, ייצאו אובייקט metadata מעל הרכיב.
תנו לו title שערכו בדיוק Our Menu.

הבדיקות קוראות את כותרת המסמך ב־/, ואז מנווטות אל /menu וקוראות אותה שוב.

נסו בעצמכם

import './globals.css';

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

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