React
Sepet API'si
Sepete ürün ekleyen bir POST API rotası yazarsın.
Proje sonucu
Bu projede Next.js ile bir mağaza kurduk: statik ana sayfa, dinamik ürün sayfası ve sepet API'si. Üç temel App Router özelliğini (SSG, dinamik rota, API rotası) birleştirdik.
Statik ana sayfa build sırasında, dinamik ürün generateStaticParams ile, sepet API'si route.js ile çalışır.
Proje sonunda gerçek bir mağazanın iskeletine sahipsin: ürün listele, detay gör, sepete ekle.
Son adım: birleştir
Şimdi tüm parçaları tek bir akışta birleştireceksin. products dizisini, Home, generateStaticParams ve Page bileşenlerini birlikte yazacaksın.
Home ürün listesini, Page ise seçili ürünün detayını göstersin. generateStaticParams build sırasında hangi ürün sayfalarının üretileceğini söyler.
Bu yapı, gerçek e-ticaret sitelerinin temelidir; SEO dostu ve hızlıdır.
Uygulama Mağaza final
Tüm parçaları birleştir: Home bileşeni yaz (products dizisi, <ul> içinde <li>{product.name}</li> bas). generateStaticParams yaz (products.map(p => ({ params: { id: String(p.id) } }))). Page bileşeni yaz ({ params } destructure, find ile ürünü bul, <h1>{product.name}</h1>). const products = [{ id: 1, name: "Kalem" }, { id: 2, name: "Defter" }] tanımla. export default Home ve export default Page.
Ö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>
);
}
// app/product/[id]/page.js
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>;
}
Kendini test et
-
Bu projede olmayan özellik?
- Dinamik ürün sayfası
- Statik ana sayfa
- Kimlik doğrulama
- Sepet API'si
Cevabı göster
Kimlik doğrulama — Proje kapsamı = statik + dinamik + API.
-
generateStaticParams return
export async function generateStaticParams() {
return products.map((p) => ({
____: { id: String(p.id) }
}));
}
Cevabı göster
export async function generateStaticParams() {
return products.map((p) => ({
params: { id: String(p.id) }
}));
}
-
Sepet API'si: kavramları eşleştir
- app/page.js
- Statik ana
- [id]/page.js
- Dinamik ürün
- api/cart/route.js
- Sepet API
- generateStaticParams
- Statik üretim
Sıradaki ders: SWR ile veri çekme
