Metadata Halaman
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 14 dari 47.
Tab browser, bookmark, hasil Google, dan pratinjau tautan di chat: semuanya membaca tag <title> dan <meta> halaman. Kamu tidak pernah menulis tag tersebut secara manual di Next.js.
Sebagai gantinya, halaman atau layout mengekspor object yang disebut metadata:
// app/menu/page.jsx
export const metadata = {
title: 'Our Menu',
description: 'Everything we cook.',
};
export default function Menu() {
return <h1>Our Menu</h1>;
}Namanya penting: harus tepat metadata, diekspor dari file route. Next.js membacanya saat merender dan menulis head untukmu.
Metadata digabungkan ke bawah sepanjang hierarki, dengan urutan dari luar ke dalam yang sama seperti layout: layout root menetapkan nilai default, dan halaman mana pun dapat menimpanya. Halaman yang tidak mengekspor metadata hanya mewarisi apa pun yang ditetapkan layout, itulah sebabnya setiap halaman sejauh ini dipanggil setelah layout root.
Tantangan
PemulaSaat ini, setiap tab Coddy Eats menampilkan Coddy Eats, karena itulah yang ditetapkan oleh layout root. Halaman menu perlu memiliki judul sendiri.
- Di
app/menu/page.jsx, ekspor objectmetadatadi atas komponen. - Isi properti
titledengan nilai persisOur Menu.
Pengujian membaca judul dokumen di /, lalu membuka /menu dan membacanya lagi.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar Next.js
2Routing dan Tautan
Folder Menjadi RuteRute BertingkatMenautkan HalamanRute DinamisHalaman Tidak DitemukanRekap: Routing
3Tata Letak dan Metadata
Tata Letak UtamaNavigasi BersamaTata Letak BersarangMetadata HalamanMetadata DinamisUlasan: Tata Letak