Metadata Dinamis
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 15 dari 47.
Object metadata bersifat konstan, jadi tidak bisa membantu rute dinamis: app/dishes/[slug]/page.jsx menyajikan hidangan yang berbeda di setiap URL, dan masing-masing membutuhkan judulnya sendiri.
Untuk itu, ekspor fungsi saja:
export async function generateMetadata({ params }) {
const { slug } = await params;
return { title: DISHES[slug].name };
}Fungsi ini mendapatkan params yang sama dengan yang didapat halaman (berupa promise, jadi kamu await) dan mengembalikan bentuk yang sama seperti object metadata. Gunakan salah satunya, jangan pernah keduanya dalam file yang sama.
Template judul
Mengulang nama situs di judul setiap halaman akan terasa membosankan. Layout dapat meneruskan pola, bukan string biasa:
// app/layout.jsx
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};default: judul untuk halaman yang tidak menetapkan judultemplate: pola untuk halaman yang menetapkan judul; judulnya disisipkan di bagian%s
Jadi, halaman yang mengembalikan title: 'Margherita' akan menampilkan Margherita | Coddy Eats di tab, sedangkan halaman beranda, yang tidak menetapkan apa pun, tetap menampilkan Coddy Eats. Tulis branding sekali saja di layout.
Tantangan
SedangSaat ini, setiap halaman hidangan menampilkan Coddy Eats di tab. Beri setiap halaman judulnya sendiri.
Di app/dishes/[slug]/page.jsx, tambahkan fungsi async yang diekspor bernama generateMetadata yang:
- Menerima
{ params }dan menunggunya selesai untuk mendapatkanslug - Mengembalikan
{ title: DISHES[slug].name }
app/layout.jsx sudah memiliki template '%s | Coddy Eats', jadi judul /dishes/margherita seharusnya menjadi Margherita | Coddy Eats. Periksa layout-nya: kamu tidak perlu mengubahnya.
Coba sendiri
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>
);
}
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