Dinamik Yollar

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

Kırk yemeğin bulunduğu bir menu için kırk ayrı klasör oluşturulmaz. /menu/pizza, /menu/pasta ve /menu/tiramisu adreslerinin farklı verileri gösteren aynı sayfa olmasını istersiniz.

Bir klasör adındaki köşeli parantezlerin anlamı şudur:

app/
    menu/
        [slug]/
            page.jsx     ->  /menu/pizza
                         ->  /menu/pasta
                         ->  /menu/anything-at-all

Normal bir klasör kendi adıyla eşleşir. [bracketed] (köşeli parantezli) bir klasör herhangi bir segment ile eşleşir ve neyle eşleştiğini hatırlar. Parantez içindeki kelime, geri okurken kullanacağınız addır: [slug] size slug verir, [id] size id verir.

Next, bu değeri params adlı bir prop olarak sayfaya iletir:

// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
    const { slug } = await params;

    return <h1>{slug}</h1>;
}

Bu küçük dosyada üç şey gerçekleşir:

Sayfa bir params prop'u alır. Her sayfa bir tane alır ve dinamik bir rota için bu prop, eşleşen segmentleri içerir.
params, Next 15'te bir Promise olduğundan, onu await edersin. Bileşenin async olmasının nedeni budur. Bölüm 5, sayfaların neden böyle olabildiğini açıklar.
Yapılandırma açma işlemi, adı doğrudan [slug] klasöründen gelen slug'ı çıkarır.

/menu/pasta adresini ziyaret edin ve slug değeri "pasta" olur. Tek bir dosya, her dish için.

Görev

Kolay

Dinamik klasör halihazırda orada: app/menu/[slug]/page.jsx, /menu altındaki her URL'ye yanıt verir. Sorun şu ki, hangi yemeği isterseniz isteyin pizza diyor.

Bileşeni async yapın.
Eşleşen segmenti const { slug } = await params; ile okuyun.
Sabit yazılmış metin yerine slug değerini <h1 id="dish"> içinde render edin.

Testler iki farklı yemeği ziyaret eder ve iki farklı başlık bekler.

Kendin dene

import './globals.css';

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

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