Rota Parametrelerini Bekleme

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 24 / 47.

Dinamik bir rota, params aracılığıyla sayfanıza URL segmentini aktarır. Next 15'te ezberlemeye değer bir püf nokta vardır:

params bir promise'dir.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

await kullanmayı unutursanız hiçbir şey çökmez, bunu sinsi kılan da tam olarak budur. Bir sözü (promise) yıkıma uğratmak (destructuring) size yalnızca undefined verir:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // hiçbir şey aramaz

Sayfa hâlâ işlenir. Sadece boş veya yedek değerlerle doludur ve siz hiçbir zaman var olmamış bir hata için veri katmanınızı aramaya koyulursunuz.

Aynı kural searchParams için de geçerlidir. Her ikisi de promise'dir, her ikisinin de await edilmesi gerekir ve her ikisi de yalnızca async sunucu bileşenlerinde kullanılabilir; az önce yazdığınız sayfanın async olması gerekmesinin bir diğer nedeni de budur.

Neden sözleşmeler (promises)? Çünkü Next.js, sayfanızın URL'ye bağımlı olmayan kısımlarını, bağımlı olan kısımları çözmeyi henüz bitirmeden önce işlemeye (rendering) başlayabilir.

Görev

Kolay

app/menu/[slug]/page.jsx neredeyse doğru, ancak params değerini hiçbir zaman await etmiyor, bu yüzden her yemek Unknown dish olarak geri dönüyor.

Destructuring yapmadan önce params yapısını await edin: const { slug } = await params;

lib/data.js ve ana sayfa kilitlidir. /menu/carbonara adresini ziyaret etmek, #dish-name içinde Carbonara ve #dish-price içinde fiyatını göstermelidir.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}