Struktur dan Pattern Next-Light
Next-Light mengikuti pola dasar Next.js Page Router, dengan pendekatan yang dirancang agar setiap bagian aplikasi memiliki tempat yang jelas. Ini memastikan pengembangan dapat berjalan rapi, terukur, dan mudah dikerjakan oleh banyak developer dalam satu tim. Struktur ini bukan sekadar susunan folder, tetapi juga aturan kerja yang menjaga konsistensi dan kejelasan alur kode.
Struktur Folder Utama
Next-Light menggunakan struktur umum Page Router, di mana seluruh halaman ditempatkan di dalam folder 'pages'. Struktur ini memungkinkan setiap route terpetakan secara eksplisit dan mudah dilacak. Di luar folder 'pages', terdapat pengelompokan khusus untuk komponen, konteks, dan style agar tiap bagian aplikasi tetap terorganisir.
Tiga Jenis Komponen dalam Next-Light
Komponen dalam Next-Light dibagi menjadi tiga kategori untuk membedakan peran dan tujuannya. Pembagian ini mempermudah pengembangan fitur, menjaga kebersihan kode, serta membuat struktur proyek lebih mudah dipahami. Berikut adalah jenis komponen yang disediakan:
1. Base Component
Base Component berisi komponen dasar yang sudah disediakan oleh Next-Light. Ini mencakup tombol, input, kartu, navigasi, layout, dan komponen fundamental lain yang menjadi dasar UI aplikasi. Komponen-komponen ini dirancang fleksibel, konsisten, serta mengikuti style internal Next-Light. Biasanya, komponen di folder ini tidak perlu diubah kecuali untuk improvement global.
2. Construct Component
Construct Component digunakan untuk komponen yang bukan bagian dari komponen dasar, seperti 'TransactionStatusBadge' atau komponen visual lain yang digunakan untuk fitur spesifik. Di dalam folder ini, disarankan membuat folder per modul atau fitur agar lebih mudah dipelihara dan dilacak. Jika membutuhkan komponen custom baru, folder ini adalah tempatnya.
3. Structure Component
Structure Component digunakan untuk bagian struktur halaman, seperti partial halaman, floating section, layout tambahan, atau potongan UI yang menyusun satu halaman lengkap. Sama seperti Construct Component, sangat disarankan mengelompokkan komponen berdasarkan modul atau fitur di dalam folder ini.
Folder Context
Seluruh context React dikumpulkan pada folder 'context'. Pendekatan ini menjaga state global tetap rapi dan mudah ditemukan. Setiap modul atau fitur yang membutuhkan context baru disarankan membuat file terpisah agar tidak bercampur dengan logic lain.
Folder Style
Style global maupun style khusus dikumpulkan pada folder 'style'. Struktur ini membantu pengaturan tampilan aplikasi tetap terukur dan mencegah style berserakan di berbagai tempat yang sulit ditelusuri.
Pattern Pengembangan Next-Light
Next-Light tidak hanya mengatur struktur folder, tetapi juga memberikan pola kerja yang bertujuan menjaga kestabilan dan konsistensi. Berikut adalah prinsip-prinsip dasar pattern pengembangan di Next-Light:
1. Jangan Mengubah Base Component Secara Berlebihan
Jika sebuah fitur membutuhkan tampilan atau perilaku komponen yang berbeda, jangan mengubah base component secara langsung. Sebagai gantinya, buat komponen baru di 'ConstructComponent'. Ini mencegah perubahan global yang tidak sengaja mempengaruhi modul lain.
2. Gunakan Komponen dan Utility Sesuai Aturan
Setiap komponen dan utility di Next-Light sudah memiliki properti dan alur kerja yang disusun rapi. Gunakan sesuai aturan agar fungsionalitas dan konsistensi tetap terjaga. Mengubah alur internal tanpa alasan kuat dapat menimbulkan error yang sulit dilacak.
3. Hindari Perubahan yang Mengganggu Fungsi Modul Lain
Jika ingin melakukan modifikasi, pastikan perubahan tersebut tidak mengganggu komponen atau fitur lain. Next-Light mengutamakan kestabilan dan konsistensi sehingga perubahan harus dilakukan secara terukur dan sesuai modularitas.
Pattern Umum Next.js dan React yang Dianjurkan
Selain pattern khusus yang diterapkan Next-Light, ada beberapa pola umum dalam ekosistem Next.js dan React yang sangat dianjurkan untuk menjaga kualitas kode serta memudahkan pengembangan jangka panjang. Pattern berikut melengkapi alur kerja Next-Light dan membantu memastikan aplikasi tetap stabil, mudah dipahami, serta efisien:
- Gunakan Komponen Kecil dan Terfokus — Pecah UI menjadi komponen-komponen kecil yang hanya bertanggung jawab pada satu hal. Pendekatan ini memudahkan testing, penggantian, dan pemeliharaan.
- Letakkan Logika di Luar Komponen UI — Hindari menulis proses berat atau logika data di dalam komponen. Gunakan helper, utility, atau context agar komponen tetap bersih dan mudah dibaca.
- Hindari Prop Drilling Berlebihan — Jika data perlu diakses banyak komponen, gunakan context atau state management lain agar aliran data tetap rapi.
- Optimalkan Rendering — Gunakan memoization seperlunya, seperti
React.memoatauuseMemo, untuk komponen kompleks yang sering menerima props serupa. Ini membantu menjaga performa. - Konsisten Dalam Penamaan dan Struktur File — Gunakan pola penamaan yang sama untuk semua komponen, hook, dan utility. Konsistensi ini mempermudah onboarding anggota tim baru.
- Manfaatkan API Next.js — Fitur seperti Image Optimization, Link prefetching, dan file routing sebaiknya digunakan maksimal untuk memaksimalkan performa aplikasi.
- Jangan Menumpuk Logic di Satu File — Pisahkan logic, utility, dan UI agar setiap file memiliki tanggung jawab yang jelas. Ini sejalan dengan prinsip SRP (Single Responsibility Principle).