Everything together
Finish the café front end: the menu page renders on the server, its filters live in the URL (so they can be shared and bookmarked), every dish links to the page you built yesterday, and the Add buttons share one cart across the whole app.
Filters in the URL
This last step is where the two courses meet: React's component and state skills, delivered through Next.js's routing and server rendering. It's the architecture most new React projects use today.
On Day 1 the veg filter lived in useState. In the final app it moves into the URL: /menu?veg=1&q=momo. The menu page reads searchParams on the server, filters the dishes and renders HTML. Links (or a small client form) change the URL. Now a filtered menu survives a refresh, works with the back button and can be shared with a friend.
export default async function MenuPage({ searchParams }) {
const { veg, q = "" } = await searchParams;
const term = q.trim().toLowerCase();
const dishes = (await getDishes())
.filter((d) => veg !== "1" || d.veg)
.filter((d) => d.name.toLowerCase().includes(term));
return (
<>
<Link href={veg === "1" ? "/menu" : "/menu?veg=1"}>{veg === "1" ? "All dishes" : "Veg only"}</Link>
<ul>{dishes.map((d) => <li key={d.slug}><Link href={`/menu/${d.slug}`}>{d.name}</Link> <AddButton slug={d.slug} /></li>)}</ul>
</>
);
}