Static home page
- React course
- Advanced
- Lesson 14/56
- 5 min
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) } })).
Practice 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" }].
Starter code
// app/product/[id]/page.js
// products dizisi, generateStaticParams ve Page buraya yazSample 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>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which prop carries the id from the URL?
- route
- search
- query
- params Correct answer
Explanation: params.id comes from the URL.
2 find product
const product = products.find((p) => p.id === Number(____));const product = products.find((p) => p.id === Number(params.id));Explanation: products.find uses params.id to find the product.
3 Static home page: match the terms
| Term | Meaning |
|---|---|
[id] |
Dynamic parameter |
params.id |
URL value |
products.find |
Find product |
generateStaticParams |
Static build |