İçeriğe geç
Ali Osman Ilık
1 dk okuma

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.