Metadata
Menambahkan title dan description route dengan export metadata statis pada Server Component.
Tujuan belajar
- Menjelaskan fungsi metadata title dan description pada route
- Membuat export metadata statis dengan type Metadata
- Membedakan Metadata API dari JSX content page
Isi lesson
5 blok- 1.Metadata memberi konteks sebelum user membaca content pageBelum selesaiWajib
- 2.Metadata statis untuk halaman coursesBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Metadata bukan alasan untuk mengubah page menjadi Client ComponentBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Metadata memberi konteks sebelum user membaca content page
WajibMetadata adalah informasi route yang Next.js gunakan untuk menghasilkan head tags seperti title dan description. Untuk page statis, mulai dari export metadata object yang kecil. Title membantu membedakan tab browser dan hasil share, sedangkan description merangkum tujuan route dengan kalimat yang relevan.
Metadata API hanya didukung pada Server Components. Jangan menambahkan "use client" pada page hanya untuk metadata. Jika satu bagian page membutuhkan interaksi, pisahkan bagian tersebut menjadi Client Component seperti yang kamu pelajari pada module sebelumnya, sementara page tetap dapat mengekspor metadata.
Bagian ini memengaruhi progres lesson.
Metadata statis untuk halaman courses
Wajib// app/courses/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Course | FluentStack",
description: "Pilih lesson dan lanjutkan progres belajar frontend.",
};
export default function CoursesPage() {
return (
<main>
<h1>Course</h1>
<p>Pilih lesson yang ingin kamu lanjutkan.</p>
</main>
);
}metadata berada di level module, terpisah dari JSX yang dirender ke halaman. Type Metadata membantu menjaga bentuk object tetap jelas. Contoh ini sengaja memakai metadata statis; generateMetadata, metadata dinamis, Open Graph image, dan detail SEO lebih lanjut belum diperlukan sekarang.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususAdd course route metadata
Lengkapi app/courses/page.tsx agar mengekspor metadata title dan description sambil tetap menjadi Server Component route page.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Catatan penting
WajibMetadata bukan alasan untuk mengubah page menjadi Client Component
Jika page membutuhkan title dan description, pertahankan page sebagai Server Component. Bila ada filter atau button interaktif di dalamnya, ekstrak bagian itu ke Client Component kecil. Dengan begitu, metadata tetap valid dan boundary client tidak melebar tanpa alasan.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- metadata object menambahkan informasi route seperti title dan description.
- Metadata API didukung pada Server Components.
- Mulai dengan metadata statis yang menjelaskan tujuan route secara spesifik.
- Berikutnya, kamu akan membedakan value environment yang aman untuk server dari value yang sengaja diekspos ke browser.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Metadata memberi konteks sebelum user membaca content page.