FluentStack

Menambahkan Metadata

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 10: Next.js App RouterAdvanced45 menitBahasa Indonesia

Menambahkan Metadata

Menambahkan metadata title dan description pada route courses di local Next.js project.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menambahkan metadata statis pada Server Component page
  • Memeriksa title route di browser lokal
  • Menulis description yang menjelaskan tujuan route
Next.jsMetadataSEO BasicsLocal Workflow

Isi lesson

5 blok
  1. 1.
    Beri nama yang jelas pada setiap routeBelum selesaiWajib
  2. 2.
    Metadata untuk route courses lokalBelum selesaiWajib
  3. 3.
    Tambahkan metadata dan cek di browserBelum selesaiWajib
  4. 4.
    Metadata tidak berubah atau page memakai use clientBelum selesaiOpsional
  5. 5.
    RingkasanBelum selesaiWajib

Beri nama yang jelas pada setiap route

Wajib

Metadata membuat route lebih mudah dikenali di tab browser dan saat dibagikan. Pada project lokal ini, tambahkan metadata statis pada page courses. Gunakan title yang menyebut konteks project dan description yang menjelaskan apa yang user lihat di route.

Metadata tetap diletakkan pada Server Component page. Jangan menjadikan page client hanya untuk title. Jika route courses memiliki interaksi, pertahankan interaksi itu pada Client Component kecil dan biarkan page mengekspor metadata.

Bagian ini memengaruhi progres lesson.

Metadata untuk route courses lokal

Wajib
tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Courses | Fluent Next Dashboard",
  description: "Daftar course dan lesson yang sedang dipelajari.",
};

export default function CoursesPage() {
  return <h1>Courses</h1>;
}

metadata object berada di luar component. Type Metadata memberi bentuk yang jelas untuk title dan description. Setelah file disimpan, lihat title tab browser pada URL courses untuk memastikan local app benar-benar memakai metadata.

Bagian ini memengaruhi progres lesson.

Tambahkan metadata dan cek di browser

Wajib

Kerjakan di perangkat kamu:

  • Buka `app/dashboard/courses/page.tsx`.
  • Import type `Metadata` dari `next`.
  • Tambahkan metadata title dan description sesuai project kamu.
  • Simpan file ketika dev server berjalan.
  • Buka `/dashboard/courses` dan cek title tab browser.
  • Pastikan title tidak lagi memakai title starter project yang umum.

FluentStack tidak dapat membaca head tag browser lokalmu. Tandai selesai setelah title yang kamu tulis benar-benar terlihat.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Metadata tidak berubah atau page memakai use client

Cek bahwa metadata diexport dari page Server Component dan dev server menjalankan project yang sama. Reload browser bila title lama terlihat. Jika page punya "use client", pindahkan interaksi ke child Client Component lalu hapus directive dari page sebelum memakai metadata export.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Metadata title dan description memberi konteks pada route.
  • metadata export berada pada Server Component page.
  • Cek title tab browser sebagai verifikasi lokal sederhana.
  • Berikutnya, kamu akan menyimpan project dan mengirimnya ke repository GitHub.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Beri nama yang jelas pada setiap route.

Memuat progresReview module