Product Detail

Complete a product detail page on a Next.js app-router dynamic route. Visiting /products/[id] shows that product's name, price, and description. The data is a static product module (lib/products) with 3 items, used as is, and the display logic lives in app/products/[id]/page.tsx.

A dynamic route in the Next.js app router takes one segment of the URL ([id]) and renders a page from it. This problem is about a /products/[id] detail page that reads the [id] from the URL and renders that product's name, price, and description. The habit that matters is verifying the page actually renders correctly for the catalog products.

How does a dynamic route [id] work in the Next.js app router?

One segment of the URL is passed to the page as a parameter. The /products/[id] page receives that [id] value and decides which product to show.

How do I verify the detail page?

Run npm test with @testing-library/react, then use npm run dev and visit /products/1 and confirm the name, price, and description appear on screen.

Where does the product data come from?

From the static catalog (3 items) in lib/products.ts. That module is complete and needs no changes; there are no DB or API calls.