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, URL segmentini params aracılığıyla sayfanıza iletir. Next 15'te akılda tutmaya değer bir ayrıntı var:

params bir promise'tir.

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

await ifadesini unutursanız hiçbir şey çökmez; sinsi olmasını sağlayan da tam olarak budur. Bir promise'i destructuring ile ayırmak 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. İkisi de promise'tir, ikisi için de await kullanılması gerekir ve ikisine de yalnızca async sunucu bileşenlerinde erişilebilir; bu da az önce yazdığın sayfanın neden async olması gerektiğine dair bir başka nedendir.

Neden promise'ler? Böylece Next.js, URL'ye bağlı olmayan sayfanızın bölümlerini, URL'ye bağlı bölümleri hesaplamayı tamamlamadan önce oluşturmaya başlayabilir.

Görev

Kolay

app/menu/[slug]/page.jsx neredeyse doğru, ancak params için hiçbir zaman await kullanmıyor; bu nedenle her yemek Unknown dish olarak geliyor.

Destructuring işleminden önce params için await kullanın: const { slug } = await params;

lib/data.js ve ana sayfa kilitli. /menu/carbonara adresini ziyaret etmek, #dish-name içinde Carbonara değerini ve fiyatını #dish-price içinde 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>
    );
}