Static home page

Write a home page that fetches products with SSG.

Dynamic product page

In this lesson we write app/product/[id]/page.js. The params.id comes from the URL; we find the product with products.find.

generateStaticParams tells Next.js which ids to pre-render at build time. This gives fast, SEO-friendly pages.

The previous lesson's products array is reused here; no code duplication. Each product gets its own URL and users can link directly.

Using generateStaticParams

In a store we want a static page per product. The generateStaticParams function returns a list of product ids; Next.js builds one HTML per id.

The first request gets ready HTML; the server does no extra work. This is ideal for e-commerce.

The list is built as products.map(p => ({ params: { id: String(p.id) } })).

Exercise Write product page

Write generateStaticParams that returns products.map(p => ({ params: { id: String(p.id) } })). Write a Page component: destructure { params }, find the product with products.find(p => p.id === Number(params.id)), render <h1>{product.name}</h1>. export default Page. Also define const products = [{ id: 1, name: "Pen" }, { id: 2, name: "Notebook" }].

Show example solution

// app/product/[id]/page.js
const products = [{ id: 1, name: "Pen" }, { id: 2, name: "Notebook" }];

export async function generateStaticParams() {
  return products.map((p) => ({ params: { id: String(p.id) } }));
}

export default function Page({ params }) {
  const product = products.find((p) => p.id === Number(params.id));
  return <h1>{product.name}</h1>;
}

Test yourself

Which prop carries the id from the URL?
- route
- search
- query
- params
Show answer

params — params.id comes from the URL.

find product

const product = products.find((p) => p.id === Number(____));

Show answer

const product = products.find((p) => p.id === Number(params.id));

Static home page: match the terms

[id]

Dynamic parameter
params.id

URL value
products.find

Find product
generateStaticParams

Static build

Next lesson: Dynamic product page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies