GET ve POST
- React kursu
- İleri seviye
- Ders 10/56
- 4 dk
GET ve POST isteklerini yanıtlamayı öğrenirsin.
GET ve POST
API rotasında hem GET hem POST tanımlayabilirsin. GET genelde veri okur, POST yeni veri yazar. Aynı dosyada iki ayrı export async function olur.
POST fonksiyonu await request.json() ile gövdeyi okur. GET ise request.url veya searchParams üzerinden parametre alır.
Doğru durum kodları dönmek iyi bir uygulamadır: 200 başarılı, 201 oluşturuldu, 400 hatalı istek.
Yanıt tipleri
Next.js App Router'da API rotaları Response, NextResponse.json() veya NextResponse.redirect() döndürebilir. NextResponse.json otomatik olarak JSON header'larını ekler.
Örnek: return NextResponse.json({ ok: true }). Durum kodu eklemek için ikinci parametre: { status: 201 }.
Ham metin için new Response("...") yeterlidir.
Uygulama POST rotası
POST fonksiyonu yaz: request parametresi alsın, await request.json() ile gövdeyi oku, NextResponse.json({ ok: true, received: data }, { status: 201 }) döndür. import { NextResponse } from "next/server" ifadesini de yaz. export async olsun.
Başlangıç kodu
// app/api/items/route.js
// import NextResponse ve POST fonksiyonunu yazÖrnek çözüm
// app/api/items/route.js
import { NextResponse } from "next/server";
export async function POST(request) {
const data = await request.json();
return NextResponse.json({ ok: true, received: data }, { status: 201 });
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 POST gövdesini okumak için?
- fetch()
- request.body
- useState
- await request.json() Doğru cevap
Açıklama: POST gövdesi = await request.json().
2 NextResponse json
import { NextResponse } from "next/server";
export async function POST(request) {
const data = await request.json();
return NextResponse.____({ ok: true, data });
}import { NextResponse } from "next/server";
export async function POST(request) {
const data = await request.json();
return NextResponse.json({ ok: true, data });
}Açıklama: NextResponse.json JSON yanıtı döndürür.
3 GET ve POST: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Response |
Ham yanıt |
NextResponse.json |
JSON yanıt |
status 201 |
Oluşturuldu |
await request.json |
Gövde okuma |