Component Products

Kalau aplikasi kita semakin besar, komponen akan makin banyak. Kalau semua ditaruh langsung di dalam components, nanti folder itu akan "penuh sesak" dan susah dicari. Nah, untuk menjaga kerapian dan keteraturan, kita bisa mengelompokkan komponen berdasarkan fitur.

Jadi kalau ada fitur produk, kita buat folder products. Semua komponen terkait produk masuk ke situ. Inilah yang disebut feature-based folder structure atau modular structure.

Hirarki Folder yang Akan Dibuat

Struktur folder yang akan kita buat adalah sebagai berikut:

components/
├── products/
│   ├── Breadcrumbs.tsx
│   ├── DeleteConfirmDialog.tsx
│   ├── ProductForm.tsx
│   └── ProductTable.tsx

Di sini kita fokus pada folder products/.

Fungsi dari Setiap File di dalam products

Mari kita bedah satu per satu fungsi komponennya:

a. Breadcrumbs.tsx

• Untuk menampilkan navigasi jalur (misalnya: Home → Products).
• Membantu pengguna tahu posisi halaman yang sedang diakses.

b. DeleteConfirmDialog.tsx

• Modal dialog untuk konfirmasi sebelum menghapus produk.
• Penting karena aksi hapus biasanya irreversible (tidak bisa dibatalkan).

c. ProductForm.tsx

• Form input produk (nama, harga, deskripsi, dll).
• Bisa digunakan untuk menambah maupun mengedit produk.

d. ProductTable.tsx

• Tabel daftar produk.
• Menampilkan daftar rpdocuk dan berisi kolom: Nama Produk, Harga, Aksi (Edit/Delete).

Kesimpulan

Dengan membuat folder products di dalam components, kita telah:

1. Membagi komponen berdasarkan fitur → struktur jadi lebih rapi.
2. Menyiapkan komponen penting untuk manajemen produk:
   • Breadcrumbs → navigasi halaman
   • DeleteConfirmDialog → konfirmasi hapus
   • ProductForm → tambah/edit produk
   • ProductTable → daftar produk

Pada materi selanjutnya, kita akan mulai mengkonfigurasi masing-masing component ini, agar benar-benar bisa digunakan dalam halaman produk di aplikasi Next.js.