From components to an app
Next.js turns your components into a real site: every dish gets its own URL, its HTML is rendered on the server with the data already in it (great for speed and search engines), and only the interactive bit — the Add button using your cart context — ships as a client component.
app/menu/[slug]/page.jsx
import Link from "next/link";
import { notFound } from "next/navigation";
import { getDish } from "@/lib/data";
import AddButton from "@/app/AddButton";
export async function generateMetadata({ params }) {
const { slug } = await params;
const dish = await getDish(slug);
return { title: dish ? dish.name : "Not found" };
}
export default async function DishPage({ params }) {
const { slug } = await params;
const dish = await getDish(slug);
if (!dish) notFound();
return (
<article>
<Link href="/menu">← Menu</Link>
<h1>{dish.name}</h1>
<p className="price">Rs {dish.price}</p>
<p>{dish.description}</p>
<AddButton name={dish.name} />
</article>
);
}