Bangun route /campaigns/[slug] sebagai halaman detail campaign yang membaca data published, memakai notFound untuk slug/draft, dan memberi CTA donasi yang benar.
Homepage memberi daftar. Tapi sebelum donasi, pengunjung sering butuh membaca detail campaign: programnya apa, targetnya berapa, dan langkah berikutnya apa.
Di starter awal, route yang sudah ada adalah halaman donasi:
textsrc/app/campaigns/[slug]/donate/page.tsxRoute detail belum ada:
textsrc/app/campaigns/[slug]/page.tsxKita akan membuat route detail, tetapi dengan aturan penting: slug yang benar belum tentu boleh tampil. Campaign harus published. Draft tidak boleh dibaca publik walaupun slug-nya diketahui.
Buka file:
textsrc/app/campaigns/[slug]/donate/page.tsxPola pentingnya:
tsxconst { slug } = await params;
const supabase = await createClient();
const { data: campaign, error } = await supabase
.from('campaigns')
.select('id, title, slug, target_amount, status')
.eq('slug', slug)
.eq('status', 'published')
.maybeSingle();
if (error || !campaign) notFound();Ada beberapa pelajaran di sini:
params di route ini berbentuk Promise, jadi di-await;slug dan status;.maybeSingle() cocok untuk slug yang mungkin tidak ada;notFound() menyembunyikan detail internal. Slug salah dan campaign draft sama-sama 404.Halaman detail harus mengikuti pola yang sama.
File target:
textsrc/app/campaigns/[slug]/page.tsxData yang perlu dipilih:
textid, title, slug, summary, description, target_amount, statusKenapa status tetap dipilih padahal query sudah filter published? Karena UI boleh menampilkan badge “Published” atau setidaknya kamu bisa memverifikasi data yang dirender memang dari state yang tepat.
Render minimal:
/campaigns/{slug}/donate.Jangan tambah cover image, progress terkumpul, share button, atau komentar di tahap ini. Itu bisa jadi fitur lain, tapi bukan tugas detail route pertama.
textMulai dari AGENTS.md, DESIGN.md, dan docs/README.md.
Tugas: buat halaman detail campaign baru.
Baca:
- src/app/campaigns/[slug]/donate/page.tsx
- docs/project-rules.md
- docs/data-contract.md
Buat file:
- src/app/campaigns/[slug]/page.tsx
Requirement:
1. Gunakan Server Component.
2. Ikuti pola params async seperti halaman donate.
3. Query tabel campaigns berdasarkan slug dan status published.
4. Gunakan .maybeSingle().
5. Jika error atau data tidak ada, panggil notFound().
6. Render title, summary, description, target_amount berformat Rupiah, status published, dan CTA "Donasi sekarang" ke /campaigns/{slug}/donate.
7. Jangan mengubah homepage, donation form, server action donasi, migration, atau file auth.
8. Jangan memakai data placeholder.
Acceptance criteria:
- /campaigns/paket-pangan-keluarga menampilkan detail campaign dari database.
- /campaigns/slug-tidak-ada menghasilkan 404.
- Draft campaign tidak tampil publik jika slug-nya diakses langsung.
- CTA mengarah ke /campaigns/paket-pangan-keluarga/donate.
- npm run lint dan npm run build berhasil.
Laporkan file yang dibuat dan cara verifikasinya.Perhatikan bagian “jangan memakai data placeholder”. Ini penting. Halaman yang terlihat bagus tapi memakai data statis adalah hasil yang salah.
Jalankan:
bashgit status --short
git diffHarus ada file baru:
textsrc/app/campaigns/[slug]/page.tsxLalu cek isi file:
bashgrep -n "maybeSingle\|notFound\|published\|/donate" "src/app/campaigns/[slug]/page.tsx"Yang harus ada:
.maybeSingle();notFound();published;/donate.Jalankan dev server:
bashnpm run devUji URL:
texthttp://localhost:3000/campaigns/paket-pangan-keluarga
http://localhost:3000/campaigns/slug-tidak-adaYang pertama harus tampil. Yang kedua harus 404.
Kalau kamu punya campaign draft di database, uji juga slug draft. Ia harus 404 di halaman publik.
Mungkin kamu berpikir: kenapa tidak tampilkan pesan “campaign belum dipublish”?
Untuk halaman publik, 404 lebih aman. Ia tidak memberi tahu pengunjung bahwa ada draft internal dengan slug tertentu. Ini bukan keamanan besar seperti authorization admin, tapi kebiasaan baik: jangan bocorkan state internal yang tidak perlu.
Admin nanti boleh melihat draft lewat jalur admin. Publik tidak.
Dynamic route bukan sekadar folder [slug]. Ia adalah kontrak antara URL, database, dan state.
Untuk halaman publik berbasis slug:
notFound() dipakai untuk state yang tidak boleh dibuka;Kalau agent membuat halaman yang tampil tapi tidak memfilter status, itu belum benar.
src/app/campaigns/[slug]/page.tsx ada.status = published.notFound()./campaigns/{slug}/donate.npm run lint dan npm run build berhasil.Nah, detail campaign sekarang punya pagar yang lebih jelas: bukan cuma “slug ada”, tapi “slug ada dan layak tampil publik”. Pola ini nanti kepakai terus setiap kamu membuat halaman yang datanya punya status atau visibility.
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
Ajukan pertanyaan, beri solusi, atau diskusikan materi pelajaran ini.
Belum ada komentar untuk pelajaran ini.
Jadilah yang pertama memulai diskusi atau mengajukan pertanyaan!