סיכום: שליפת נתונים
חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 28 מתוך 47.
אתגר
בינוניסיכום הפרק: תפריט שטוען הכול בשרת.
lib/data.js מסופק ונעול: getDishes() מחזירה הבטחה למערך של אובייקטים מסוג { id, name, price }, ו־getDish(slug) מחפשת אחד מהם.
- ב־
app/page.jsx, הפכו אתHomeלפונקצייתasyncוהשתמשו ב־await getDishes()כדי להציב את התוצאה במשתנהdishes. - בתוך
<ul id="dish-list">, הציגו<li>אחד לכל מנה, עםkey={dish.id},id={dish.id}ועם ה־nameשל המנה כטקסט שלה. app/menu/[slug]/page.jsxמציגUnknown dishעבור כל כתובת URL: הוא מחלץ אתparamsבלי להמתין לו. המתינו ל־paramsכדי שהחיפוש יקבל slug אמיתי. בביקור ב־/menu/carbonaraיש להציג אתCarbonaraבתוך#dish-nameואת המחיר שלה בתוך#dish-price.
נסו בעצמכם
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}