Dinamik ürün sayfası

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.

Örnek çözümü göster

// 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 });
}

Kendini test et

Sepet API'si hangi dosyada?
- app/api/cart/route.js
- app/cart/page.js
- app/api/cart.js
- cart/api.js
Cevabı göster

app/api/cart/route.js — Sepet API = app/api/cart/route.js.

POST fetch

fetch("/api/cart", {
  method: "____",
  body: JSON.stringify({ id: 1 })
});

Cevabı göster

fetch("/api/cart", {
  method: "POST",
  body: JSON.stringify({ id: 1 })
});

Dinamik ürün sayfası: kavramları eşleştir

POST

Ekleme
GET

Okuma
JSON.stringify

Gövde hazırlama
await request.json

Gövde okuma

Sıradaki ders: Sepet API'si

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler