Project: Next.js store
- React course
- Advanced
- Lesson 13/56
- 4 min
Review the goal and steps of the Next.js store project.
Project: Next.js store
In this project you build a small store with Next.js. A static home page, a dynamic product page and a cart API. Each lesson adds a piece.
The static home page is built at build time; the dynamic product page uses the [id] parameter; the cart API sits in app/api/cart/route.js.
At the end you have an app that lists products, shows product details and adds to cart.
Store structure
The store has three pieces: app/page.js (static home), app/product/[id]/page.js (dynamic product), app/api/cart/route.js (cart API).
Each piece uses a different Next.js feature: SSG, dynamic route, API route. This project combines all basic App Router capabilities.
Product data lives in a simple array; no real database is needed.
Practice Static home page
Write a Home component: define a products array (e.g. const products = [{ id: 1, name: "Pen" }, { id: 2, name: "Notebook" }]). Render a <ul> with an <li>{product.name}</li> per product. export default Home.
Starter code
// app/page.js
// Home bileşenini buraya yazSample solution
// app/page.js
const products = [{ id: 1, name: "Pen" }, { id: 2, name: "Notebook" }];
export default function Home() {
return (
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the first step?
- Static home page Correct answer
- Cart API
- User login
- Payment integration
Explanation: We start with the static home page.
2 Dynamic product path
// app/product/[____]/page.js
export default function Page({ params }) {
return <h1>{params.id}</h1>;
}// app/product/[id]/page.js
export default function Page({ params }) {
return <h1>{params.id}</h1>;
}Explanation: [id] is a dynamic route parameter.
3 Project: Next.js store: match the terms
| Term | Meaning |
|---|---|
app/page.js |
Static home |
[id]/page.js |
Dynamic product |
api/cart/route.js |
Cart API |
SSG |
At build |