מטא־נתונים דינמיים

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

אובייקט metadata הוא קבוע, ולכן הוא לא יכול לעזור בנתיב דינמי: app/dishes/[slug]/page.jsx מציג מנה אחרת בכל כתובת URL, ולכל אחת מהן דרושה כותרת משלה.

לשם כך, ייצאו פונקציה במקום זאת:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

היא מקבלת את אותם params שהדף מקבל (הבטחה, ולכן יש לבצע לה await) ומחזירה מבנה זהה לזה שהיה לאובייקט metadata. יש להשתמש באחת מהאפשרויות או באחרת, לעולם לא בשתיהן באותו קובץ.

תבניות כותרת

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

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: הכותרת לעמודים שלא מגדירים כותרת
template: התבנית לעמודים שכן מגדירים כותרת; הכותרת שלהם מוכנסת במקום שבו מופיע %s

לכן דף שמחזיר title: 'Margherita' מופיע בלשונית בתור Margherita | Coddy Eats, ודף הבית, שלא מגדיר דבר, נשאר Coddy Eats. כותבים את המיתוג פעם אחת, בפריסה.

אתגר

בינוני

הכותרת של כל עמוד מנה שמוצגת כרגע בלשונית היא Coddy Eats. תן לכל אחד מהם כותרת משלו.

ב־app/dishes/[slug]/page.jsx, הוסף פונקציה מיוצאת async בשם generateMetadata ש:

מקבלת את { params } ומבצעת לה await כדי לקבל את slug
מחזירה את { title: DISHES[slug].name }

התבנית '%s | Coddy Eats' כבר נמצאת ב־app/layout.jsx, לכן הכותרת של /dishes/margherita אמורה להיות Margherita | Coddy Eats. בדוק את קובץ ה־layout: אין צורך לשנות אותו.

נסו בעצמכם

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

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