A whole site
Build the menu page of the café site: an async page that loads every dish, lists them with links to their own pages, and marks vegetarian ones.
The site's structure
This small site already has the shape of a production Next.js app: a shared layout, a data-driven list, dynamic detail pages and proper 404s. Bigger sites mostly add more of the same pieces, just many more of them.
The café site uses every idea from the unit. The root layout holds the header, navigation links and footer, plus a title template so every page's title ends in "· Himalayan Café". The menu page is an async Server Component that loads all dishes and links to each one. Each dish page is a dynamic route that loads one dish or shows a 404.
app/
├── layout.jsx ← header, <nav> with Links, footer, title template
├── page.jsx → /
└── menu/
├── page.jsx → /menu (async: await getDishes())
└── [slug]/page.jsx → /menu/momo (await params, getDish, notFound)The menu page can simply await getDishes() at the top because it's a Server Component — no useEffect, no loading state for the first view. The HTML arrives with the dish list already in it.