Project: Next.js store

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.

Exercise 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.

Show example 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>
  );
}

Test yourself

What is the first step?
- Static home page
- Cart API
- User login
- Payment integration
Show answer

Static home page — We start with the static home page.

Dynamic product path

// app/product/[____]/page.js
export default function Page({ params }) {
  return <h1>{params.id}</h1>;
}

Show answer

// app/product/[id]/page.js
export default function Page({ params }) {
  return <h1>{params.id}</h1>;
}

Project: Next.js store: match the terms

app/page.js

Static home
[id]/page.js

Dynamic product
api/cart/route.js

Cart API
SSG

At build

Next lesson: Static home page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies