Merhaba arkadaşlar, bugün başımı çok ağrıtan bir sorunu paylaşmak istiyorum. Next.js ile API route yazarken, gelen isteklerin req.query veya req.body kısımlarını okumaya çalıştığımda sık sık undefined veya boş obje alıyordum. Özellikle POST isteklerinde body'yi parse edemeyince, "Acaba endpoint yanlış mı?" diye kafayı yemiştim. İşin temelinde, bu verilerin otomatik olarak hazır olmadığı ve doğru şekilde işlenmesi gerektiği yatıyormuş.
Karşılaştığım Sorun ve Nedenleri
Sorun genellikle şu iki senaryoda ortaya çıkıyordu: Birincisi, req.query ile gelen query parametrelerini okurken, bazen string bazen de string dizisi gelmesi ve bunu kontrol etmemek. İkincisi ve daha can sıkıcı olanı, req.body'nin doğrudan okunamaması. Next.js, body'yi otomatik olarak parse etmez. Eğer Content-Type header'ı doğru ayarlanmamışsa veya body okunmadan önce bir işlem yapılmaya çalışılırsa, veriye ulaşamazsınız.
req.query için Sağlam Çözüm
Query parametrelerini güvenle okumak için, gelen değerin tipini kontrol eden basit bir yardımcı fonksiyon kullanmak en temiz çözüm. Çünkü `?id=5` gönderirseniz `string`, `?id=5&id=6` gönderirseniz `string[]` alırsınız.
req.body için Doğru Parse Yöntemleri
Body'yi okumak için öncelikle isteğin Content-Type header'ına bakmalıyız. En yaygın tipler `application/json` ve `application/x-www-form-urlencoded`. Next.js 13+ ve App Router ile biraz değişiklikler olsa da, temel mantık aynı.
App Router (Next.js 13+) kullanıyorsanız, işler biraz daha kolay. `request.json()` veya `request.formData()` metodlarını doğrudan kullanabilirsiniz.
Özet ve Tavsiyelerim
Özetle, Next.js API route'larında veri okurken asla güvenmeyin, her zaman kontrol edin. Query için tip kontrolü yapın, body için ise Content-Type'ı kontrol edip uygun parse metodunu (JSON.parse, request.json(), formData()) kullanın. Ayrıca, App Router'ın yeni metodları işinizi büyük ölçüde kolaylaştırıyor, mümkünse projenizi bu yapıya taşımanızı öneririm.
Siz Next.js API'lerinde benzer bir hatayı yaşadınız mı? Yaşadıysanız, sizin kullandığınız farklı bir çözüm veya pratik bir middleware öneriniz var mı? Yorumlarda paylaşalım!
Karşılaştığım Sorun ve NedenleriSorun genellikle şu iki senaryoda ortaya çıkıyordu: Birincisi, req.query ile gelen query parametrelerini okurken, bazen string bazen de string dizisi gelmesi ve bunu kontrol etmemek. İkincisi ve daha can sıkıcı olanı, req.body'nin doğrudan okunamaması. Next.js, body'yi otomatik olarak parse etmez. Eğer Content-Type header'ı doğru ayarlanmamışsa veya body okunmadan önce bir işlem yapılmaya çalışılırsa, veriye ulaşamazsınız.
req.query için Sağlam ÇözümQuery parametrelerini güvenle okumak için, gelen değerin tipini kontrol eden basit bir yardımcı fonksiyon kullanmak en temiz çözüm. Çünkü `?id=5` gönderirseniz `string`, `?id=5&id=6` gönderirseniz `string[]` alırsınız.
JavaScript:
// pages/api/user.js veya app/api/user/route.js
export default async function handler(req, res) {
// Query'den tek bir değer almanın güvenli yolu
const getQueryParam = (param) => {
const value = req.query[param];
if (Array.isArray(value)) {
// Eğer dizi gelirse, ilk elemanı al veya join'le
return value[0] || null;
}
return value || null;
};
const userId = getQueryParam('id');
const userName = getQueryParam('name');
if (!userId) {
return res.status(400).json({ error: 'ID parametresi gereklidir.' });
}
// ... işlemleriniz
res.status(200).json({ userId, userName });
}Body'yi okumak için öncelikle isteğin Content-Type header'ına bakmalıyız. En yaygın tipler `application/json` ve `application/x-www-form-urlencoded`. Next.js 13+ ve App Router ile biraz değişiklikler olsa da, temel mantık aynı.
JavaScript:
// pages/api/submit.js Örneği (JSON body)
export default async function handler(req, res) {
// 1. Sadece POST isteğine izin ver
if (req.method !== 'POST') {
return res.status(405).json({ message: 'Method Not Allowed' });
}
// 2. Body'yi okumadan önce tipi kontrol et (Opsiyonel ama iyi)
const contentType = req.headers['content-type'];
if (!contentType || !contentType.includes('application/json')) {
return res.status(400).json({ error: 'Content-Type must be application/json' });
}
// 3. Body'yi parse et. Next.js bazen otomatik yapar, bazen yapmaz.
// Burada kesin çözüm için body'yi string olarak okuyup JSON.parse kullanmak.
let body;
try {
// req.body doğrudan kullanılabilir olabilir, değilse buffer'dan okuruz.
if (typeof req.body === 'string') {
body = JSON.parse(req.body);
} else if (req.body) {
// Eğer Next.js veya bir middleware önceden parse ettiyse
body = req.body;
} else {
// Fallback: Node.js'in native stream okuma yöntemi
const buffers = [];
for await (const chunk of req) {
buffers.push(chunk);
}
const data = Buffer.concat(buffers).toString();
body = JSON.parse(data);
}
} catch (error) {
return res.status(400).json({ error: 'Geçersiz JSON formatı' });
}
// 4. Artık body değişkenini güvenle kullanabiliriz.
const { email, message } = body;
console.log(`Gelen veri: ${email}, ${message}`);
res.status(200).json({ success: true, received: body });
}App Router (Next.js 13+) kullanıyorsanız, işler biraz daha kolay. `request.json()` veya `request.formData()` metodlarını doğrudan kullanabilirsiniz.
JavaScript:
// app/api/submit/route.js (App Router)
export async function POST(request) {
try {
// JSON istekleri için
const body = await request.json();
const { email, message } = body;
// ... işlemler
return Response.json({ success: true, data: body });
} catch (error) {
// FormData istekleri için
const formData = await request.formData();
const email = formData.get('email');
const file = formData.get('file');
// ... işlemler
return Response.json({ success: true });
}
}Özetle, Next.js API route'larında veri okurken asla güvenmeyin, her zaman kontrol edin. Query için tip kontrolü yapın, body için ise Content-Type'ı kontrol edip uygun parse metodunu (JSON.parse, request.json(), formData()) kullanın. Ayrıca, App Router'ın yeni metodları işinizi büyük ölçüde kolaylaştırıyor, mümkünse projenizi bu yapıya taşımanızı öneririm.
Siz Next.js API'lerinde benzer bir hatayı yaşadınız mı? Yaşadıysanız, sizin kullandığınız farklı bir çözüm veya pratik bir middleware öneriniz var mı? Yorumlarda paylaşalım!