שלב 5: כותרות העמודים

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

אתגר

קל

תן לכל מנה כותרת לשונית משלה.

ב־app/menu/[slug]/page.jsx, ייצא את async function generateMetadata({ params }).
המתן ל־params כדי לקבל את ה־slug, ואז המתן ל־await getDish(slug).
אם אין מנה, החזר { title: 'Not on the menu' }.
אחרת, החזר את ה־name של המנה בתור title, ואת ה־description שלה בתור description.

נסו בעצמכם

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

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

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav className="nav">
                    <Link className="brand" href="/">Coddy Eats</Link>
                    <Link id="nav-menu" href="/">Menu</Link>
                    <Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
                </nav>
                <div className="container">
                    {children}
                </div>
            </body>
        </html>
    );
}

כל השיעורים ביחידה היסודות של Next.js

1למה Next.js

מה Next.js מוסיף תיקיית app הדף הראשון שלך סיכום: למה Next.js

4שרת ולקוח

שני סוגי רכיבים קריאת השגיאה השורה 'use client'שמרו על חלקי הלקוח קטנים שרת בתוך לקוח סיכום: שרת ולקוח

7ניווט בצד הלקוח

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

3פריסות ומטא־נתונים

פריסת השורש ניווט משותף פריסות מקוננות מטא־נתונים של הדף מטא־נתונים דינמיים סיכום: פריסות

6פעולות שרת

מהי פעולת שרת טפסים שפועלים קריאת נתוני טופס רענון הדף סיכום: פעולות שרת