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 sayfaya params adında bir prop olarak iletir:

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

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

O 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 tutar.
Next 15'te params bir Promise'dir, bu yüzden onu await ile beklersiniz. Bileşenin async olmasının nedeni budur. Bölüm 5, sayfaların neden böyle olmasına izin verildiğini açıklar.
Destructuring (yapı söküm), adını doğrudan [slug] klasöründen alan slug değerini çı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>
    );
}