Proje: Next.js mağaza

Next.js mağaza projesinin amacını ve adımlarını gözden geçirirsin.

Proje: Next.js mağaza

Bu projede Next.js ile küçük bir mağaza kuracaksın. Statik ana sayfa, dinamik ürün sayfası ve sepet API'si olacak. Her ders bir parça ekler.

Statik ana sayfa build sırasında üretilir; dinamik ürün sayfası [id] parametresiyle; sepet API'si ise app/api/cart/route.js'de.

Proje sonunda ürün listele, ürün detay gör, sepete ekle adımlarını tamamlayan bir uygulaman olacak.

Mağaza yapısı

Mağaza üç parçadan oluşur: app/page.js (statik ana sayfa), app/product/[id]/page.js (dinamik ürün), app/api/cart/route.js (sepet API'si).

Her parça farklı bir Next.js özelliği kullanır: SSG, dinamik rota, API rotası. Bu proje, App Router'ın tüm temel yeteneklerini birleştirir.

Ürün verisi basit bir dizi olarak tutulur; gerçek bir veritabanı gerekmez.

Uygulama Statik ana sayfa

Home bileşeni yaz: products dizisini alsın (örn. const products = [{ id: 1, name: "Kalem" }, { id: 2, name: "Defter" }]). <ul> içinde her ürün için <li>{product.name}</li> bas. export default Home.

Örnek çözümü göster

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

export default function Home() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Kendini test et

Projenin ilk adımı ne?
- Statik ana sayfa
- Sepet API'si
- Kullanıcı girişi
- Ödeme entegrasyonu
Cevabı göster

Statik ana sayfa — Statik ana sayfa ile başlarız.

Dinamik ürün yolu

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

Cevabı göster

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

Proje: Next.js mağaza: kavramları eşleştir

app/page.js

Statik ana
[id]/page.js

Dinamik ürün
api/cart/route.js

Sepet API
SSG

Build sırasında

Sıradaki ders: Statik ana sayfa

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler