Sepet API'si
- React kursu
- İleri seviye
- Ders 16/56
- 5 dk
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.
Başlangıç kodu
// app/page.js ve app/product/[id]/page.js
// products dizisi, Home, generateStaticParams ve Page 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>
);
}
// 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>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu projede olmayan özellik?
- Dinamik ürün sayfası
- Statik ana sayfa
- Kimlik doğrulama Doğru cevap
- Sepet API'si
Açıklama: Proje kapsamı = statik + dinamik + API.
2 generateStaticParams return
export async function generateStaticParams() {
return products.map((p) => ({
____: { id: String(p.id) }
}));
}export async function generateStaticParams() {
return products.map((p) => ({
params: { id: String(p.id) }
}));
}Açıklama: params id'yi URL'e bağlar.
3 Sepet API'si: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
app/page.js |
Statik ana |
[id]/page.js |
Dinamik ürün |
api/cart/route.js |
Sepet API |
generateStaticParams |
Statik üretim |