Proje: Next.js mağaza
- React kursu
- İleri seviye
- Ders 13/56
- 4 dk
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.
Başlangıç kodu
// app/page.js
// Home bileşenini buraya yazÖrnek çözüm
// 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>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Projenin ilk adımı ne?
- Statik ana sayfa Doğru cevap
- Sepet API'si
- Kullanıcı girişi
- Ödeme entegrasyonu
Açıklama: Statik ana sayfa ile başlarız.
2 Dinamik ürün yolu
// 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>;
}Açıklama: [id] dinamik bir rota parametresidir.
3 Proje: Next.js mağaza: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
app/page.js |
Statik ana |
[id]/page.js |
Dinamik ürün |
api/cart/route.js |
Sepet API |
SSG |
Build sırasında |