Tugas Akhir
Penjelasan
Sekarang saatnya menggabungkan semua yang sudah dipelajari — dari App Router sampai CSS Modules — jadi satu aplikasi utuh. Kamu akan membuat aplikasi "Catatan" sederhana yang menggabungkan file-based routing, Server Component untuk menampilkan data, dan Server Action untuk menambah data baru.
Tugas
Buat app/catatan/page.js sebagai Server Component async yang fetch daftar catatan dari '/api/catatan' (anggap sudah ada) dan menampilkannya sebagai daftar. Buat app/catatan/actions.js dengan Server Action tambahCatatan(formData) ber-'use server' yang membaca field 'judul' dan 'isi', lalu (secara konsep) menyimpannya. Buat form di app/catatan/page.js yang memakai action={tambahCatatan} langsung. Buat juga app/catatan/loading.js sederhana untuk fallback loading.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Kalau bingung mulai dari mana, kerjakan Server Component untuk menampilkan daftar catatan dulu (pakai data dummy hardcode kalau API belum siap), cek hasilnya di browser, baru tambahkan Server Action untuk form-nya. Program besar selalu lebih mudah kalau dipecah jadi langkah-langkah kecil.