Sayfa Üst Verileri

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

Tarayıcı sekmesi, yer imi, Google sonucu, bir sohbet içindeki bağlantı önizlemesi: hepsi sayfanın <title> ve <meta> etiketlerini okur. Next.js içinde bu etiketleri hiçbir zaman elle yazmazsınız.

Bunun yerine bir sayfa veya düzen, metadata adlı bir nesneyi dışa aktarır:

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

Adı önemlidir: yol dosyasından dışa aktarılan ad tam olarak metadata olmalıdır. Next.js bunu oluşturma sırasında okur ve head bölümünü sizin için yazar.

Meta veriler, düzenlerle aynı dıştan içe sırayla ağaç boyunca aşağı doğru birleştirilir: kök düzen varsayılanları belirler ve herhangi bir sayfa bunları geçersiz kılabilir. metadata dışa aktarımı olmayan bir sayfa, düzenin belirlediği her şeyi devralır; bu nedenle şimdiye kadar her sayfa kök düzeninizden sonra çağrılmıştır.

Görev

Başlangıç

Şu anda Coddy Eats'in her sekmesinde Coddy Eats yazıyor, çünkü kök düzen bunu ayarlıyor. Menü sayfası kendine ait bir başlığı hak ediyor.

app/menu/page.jsx içinde, bileşenin üstünde bir metadata nesnesi dışa aktarın.
Bu nesneye tam olarak title değerine sahip bir Our Menu verin.

Testler / üzerindeki belge başlığını okur, ardından /menu adresine gider ve başlığı tekrar okur.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'Coddy Eats',
};

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