title: "Toko Kue: Halaman Daftar Produk" # Judul Pendek

seotitle: "Studi Kasus Toko Kue (Next.js+TS): Menampilkan Daftar Produk dengan Server Component & Fetch" # Judul panjang deskriptif

description: "Saatnya menampilkan produk kue! Pelajari cara membuat halaman utama Toko Kue kita di Next.js App Router, mengambil data dari API Route menggunakan Server Component dan fetch, lalu merendernya sebagai daftar kartu produk."

order: 7 # Setelah Studi Kasus Toko Kue: API Produk

quiz: "./kuis/nextjs-07-studi-kasus-daftar-produk-kuis.yml" # Path ke file kuis

Etalase Toko Kue Dibuka: Nampilin Produk Pake Server Component & Fetch!

Udah punya "dapur" API yang siap nyajiin data produk kue kita? Mantap! Sekarang, saatnya kita "nge-display" semua kue enak itu di "etalase" utama toko kita, yaitu halaman beranda.

Kita bakal ngoprek file src/app/page.tsx (yang jadi halaman utama / di App Router) buat:

1. Ngambil (fetch) data semua kue dari API endpoint /api/kue yang udah kita bikin.

2. Karena page.tsx di App Router itu Server Component secara default, kita bisa ngelakuin fetch data ini langsung di server pake async/await!

3. Nampilin data kue itu jadi daftar kartu produk yang menarik.

Langkah 1: Menyiapkan Komponen Kartu Produk (kartu-kue.tsx)

Sebelum kita nampilin banyak kue, kita bikin dulu "cetakan" buat nampilin satu item kue. Ini bakal jadi komponen React reusable kita.