Next.js 16'da params Neden Artık Bir Promise?
Blog bölümünü kurarken /blog/[slug] sayfası derleniyor, ama tarayıcıda
açınca 404 dönüyordu. Terminal'de şu uyarı vardı:
Error: Route "/blog/[slug]" used `params.slug`. `params` is a Promise
and must be unwrapped with `await` or `React.use()` before accessing
its properties.
Ne değişti
Next.js 15'ten itibaren (16'da da geçerli), dinamik route'larda
params ve searchParams artık senkron bir obje değil, bir
Promise. Yani eskiden çalışan şu kod:
export default function Page({ params }: { params: { slug: string } }) {
const { slug } = params; // artık çalışmıyor
}
artık şöyle olmalı:
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
}
Aynı şey generateMetadata için de geçerli — o da params'ı await
ile çözmeli.
Neden bu değişiklik yapıldı
Next.js'in App Router'ı, sayfa render edilmeden önce paralel olarak
birden fazla iş yapabiliyor (streaming, partial prerendering gibi).
params'ı Promise yapmak, Next.js'e bu değeri gerçekten gerektiği
ana kadar ertelemesi için esneklik veriyor — sayfanın geri kalanı
params'a ihtiyaç duymadan render olmaya başlayabiliyor.
Pratik çıkarım
Yeni bir Next.js projesinde (özellikle major sürüm atlarken) "neden 404 alıyorum" tarzı sessiz hatalarla karşılaşırsan, önce terminal/server loglarına bak — App Router bu tür breaking change'leri genelde açık bir hata mesajıyla bildiriyor, sadece tarayıcı konsoluna değil.