Recap: Data Fetching

Part of the Next.js Essentials section of Coddy's React journey — lesson 28 of 47.

Challenge

Medium

Chapter recap: a menu that loads everything on the server.

lib/data.js is provided and locked: getDishes() returns a promise for an array of { id, name, price } objects, and getDish(slug) looks a single one up.

In app/page.jsx, make Home an async function and await getDishes() into a dishes variable.
Inside <ul id="dish-list">, render one <li> per dish, with key={dish.id}, id={dish.id} and the dish's name as its text.
app/menu/[slug]/page.jsx shows Unknown dish for every URL: it destructures params without awaiting it. Await params so the lookup gets a real slug. Visiting /menu/carbonara must show Carbonara in #dish-name and its price in #dish-price.

Try it yourself

import './globals.css';

export const metadata = {
    title: 'My App',
};

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