Proyek Akhir: Blog Mini

Menggabungkan routing, Link, data, dan key menjadi daftar blog.

Part 16 dari 16 ± 35 menit Gratis

Yang akan kita buat

Halaman /blog berisi daftar artikel. Klik judul → pindah ke /blog/belajar-next.

Struktur foldernya

app/
├── layout.js              ← header & footer
├── blog/
│   ├── page.js            ← daftar artikel (latihan kita)
│   └── [slug]/
│       └── page.js        ← isi satu artikel

Konsep yang dipakai

Konsep	Dipakai untuk
Routing folder	`/blog`
Rute dinamis	`/blog/[slug]`
Data + map + key	Daftar artikel
Link	Pindah ke artikel tanpa reload
Metadata	Judul tab & SEO

Merangkai alamat dengan template string

Alamat tiap artikel dibuat dari slug-nya, memakai tanda backtick (`):

href={`/blog/${p.slug}`}   // → "/blog/belajar-next"

Bagian ${...} menyisipkan nilai ke dalam teks.

Setelah ini

Lanjutkan dengan menyambungkan data ke database, menambah login, dan mengeksplorasi Server Actions. Fondasi yang kamu pelajari sudah cukup untuk itu semua. Selamat! 🎉