Dinamik ürün sayfası
- React kursu
- İleri seviye
- Ders 15/56
- 5 dk
URL parametresiyle ürün detayı gösteren bir sayfa yazarsın.
Sepet API'si
Bu derste app/api/cart/route.js yazacağız. POST isteği ürün id'sini alır ve sepete ekler; GET ise sepeti döndürür.
Basitlik için sepeti bir module-level dizi olarak tutacağız. Üretimde bunun yerine veritabanı veya Redis kullanılır.
API rotaları sunucuda çalışır; istemciye JavaScript gönderilmez. Bu, kimlik bilgilerinin güvende kalmasını sağlar.
POST ile ekleme
İstemci fetch('/api/cart', { method: 'POST', body: JSON.stringify({ id: 1 }) }) çağırır. Sunucu await request.json() ile gövdeyi okur, id'yi sepete push eder.
Yanıt NextResponse.json({ ok: true, cart }) olur; istemci güncel sepeti görür.
Bu kalıp, REST API'lerin temelidir. GET okuma, POST yazma, PUT güncelleme, DELETE silme için kullanılır.
Uygulama Sepet API'si yaz
cart adında boş bir dizi tanımla. GET fonksiyonu yaz: NextResponse.json({ cart }) döndürsün. POST fonksiyonu yaz: await request.json() ile gövdeyi oku, cart.push(data.id) yap, NextResponse.json({ ok: true, cart }, { status: 201 }) döndür. import { NextResponse } from "next/server". İki fonksiyon da export async olsun.
Başlangıç kodu
// app/api/cart/route.js
// import NextResponse, cart dizisi, GET ve POST fonksiyonlarını yazÖrnek çözüm
// app/api/cart/route.js
import { NextResponse } from "next/server";
const cart = [];
export async function GET() {
return NextResponse.json({ cart });
}
export async function POST(request) {
const data = await request.json();
cart.push(data.id);
return NextResponse.json({ ok: true, cart }, { status: 201 });
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sepet API'si hangi dosyada?
- app/api/cart/route.js Doğru cevap
- app/cart/page.js
- app/api/cart.js
- cart/api.js
Açıklama: Sepet API = app/api/cart/route.js.
2 POST fetch
fetch("/api/cart", {
method: "____",
body: JSON.stringify({ id: 1 })
});fetch("/api/cart", {
method: "POST",
body: JSON.stringify({ id: 1 })
});Açıklama: POST yeni veri eklemek için kullanılır.
3 Dinamik ürün sayfası: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
POST |
Ekleme |
GET |
Okuma |
JSON.stringify |
Gövde hazırlama |
await request.json |
Gövde okuma |