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 page veya layout metadata adında bir nesne export eder:

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

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

İsim önemlidir: Rota dosyasından `export` edilen adın tam olarak metadata olması gerekir. Next.js render ederken bunu okur ve head bölümünü sizin için yazar.

Metadata, düzenlerle aynı dıştan içe sırada ağaç boyunca aşağı doğru birleşir: kök düzen varsayılanları ayarlar ve herhangi bir sayfa bunları geçersiz kılabilir. metadata export'u olmayan bir sayfa, düzenin ayarladığı her şeyi doğrudan devralır; şu ana kadar her sayfanın kök düzeninizden sonra adlandırılmasının nedeni de budur.

Görev

Başlangıç

Şu anda Coddy Eats'in her sekmesinde Coddy Eats yazıyor, çünkü kök düzenin belirlediği şey bu. Menü sayfası kendininkini hak ediyor.

app/menu/page.jsx dosyasında, bileşenin üzerinde bir metadata nesnesi dışa aktarın (export).
Buna tam olarak Our Menu şeklinde bir title verin.

Testler / üzerindeki belge başlığını okur, ardından /menu adresine gidip 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>
    );
}