Dinamik Üst Veriler

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

Bir metadata nesnesi sabittir, bu nedenle dinamik bir rota için yardımcı olamaz: app/dishes/[slug]/page.jsx her URL'de farklı bir yemek sunar ve her birinin kendi başlığına ihtiyacı vardır.

Bunun için bunun yerine bir function dışa aktarın:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

Sayfanın aldığı params ile aynısını alır (bir promise'dir, bu yüzden onu await edersiniz) ve metadata nesnesinin sahip olduğu aynı yapıyı döndürür. Birini veya diğerini kullanın, asla aynı dosyada ikisini birden kullanmayın.

Title şablonları

Site adını her sayfanın başlığında tekrarlamak sıkar. Bir layout, düz bir dize yerine bir kalıp aktarabilir:

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: başlık belirlemeyen sayfalar için kullanılacak başlık
template: başlık belirleyen sayfalar için kalıp; kendi başlıkları %s olan yere yerleştirilir

Böylece title: 'Margherita' dönen bir sayfa sekmede Margherita | Coddy Eats olarak görünür, hiçbir şey ayarlamayan ana sayfa ise Coddy Eats olarak kalır. Marka adını düzen (layout) içinde bir kez yazın.

Görev

Orta

Her yemek sayfası şu anda sekmede Coddy Eats olarak görünüyor. Her birine kendi başlığını verin.

app/dishes/[slug]/page.jsx dosyasında, şunları yapan, dışa aktarılmış bir async generateMetadata fonksiyonu ekleyin:

{ params } alır ve slug değerini elde etmek için bunu await eder
{ title: DISHES[slug].name } döndürür

app/layout.jsx zaten '%s | Coddy Eats' şablonunu taşımaktadır, bu nedenle /dishes/margherita başlığı Margherita | Coddy Eats olarak görünmelidir. Düzen dosyasına göz atın: onu değiştirmenize gerek yok.

Kendin dene

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

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