Struktur dan Pattern Next-Light

Next-Light mengikuti pola dasar Next.js App 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 App Router, di mana seluruh halaman ditempatkan di dalam folder 'app' dengan dibuat menjadi folder di tiap modul/fitur. Struktur ini memungkinkan setiap route terpetakan secara eksplisit dan mudah dilacak. Di luar folder 'app', terdapat pengelompokan khusus untuk komponen, konteks, style, dll agar tiap bagian aplikasi tetap ter-organisir.

Kelompokkan Komponen Berdasarkan Level Kegunaan

Berdasarkan pattern Next-Light komponen dibagi menjadi tiga level untuk membedakan peran dan tujuannya. Pembagian ini mempermudah pengembangan fitur, menjaga kebersihan kode, serta membuat struktur proyek lebih mudah dipahami. Berikut adalah penjelasan tiap level komponen:

1. Base Component:

Base Component berisi komponen dasar (terdapat bawaan 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 aplikasi. Biasanya, komponen di folder ini tidak perlu diubah kecuali untuk improvement global. Tujuan utama komponen ini adalah menjaga konsistensi bentuk UI aplikasi

2. Construct Component:

Construct Component digunakan untuk komponen yang bukan bagian dari komponen dasar, seperti "ProductCard" atau komponen visual lain yang digunakan untuk fitur spesifik (tapi bersifat global). Di dalam folder ini, Jika membutuhkan komponen custom baru, folder ini adalah tempatnya. Tujuannya adalah menyimpan komponen custom yang bersifat global

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 (ini adalah folder komponen yang sangat opsional). Tujuannya adalah menyimpan struktur halaman yang bersifat global

Komponen Spesifik dan Struktur Modul

Buat Construct Component dan Structure Component yang lebih spesifik di dalam setiap folder modul/fitur agar pengembangan setiap modul lebih ter-organisir. buat dengan nama "_construct" dan "_structure" buat salah satu atau keduanya jika dibutuhkan saja.

Kumpulkan Context

Seluruh context management dikumpulkan pada folder "context" pada root project. 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.

Kumpulkan Style

Style global maupun style khusus dikumpulkan pada folder "style". Struktur ini membantu pengaturan tampilan aplikasi tetap ter-ukur dan mencegah style berserakan di berbagai tempat yang sulit di telusuri.

Gambaran Struktur Folder

Kode berhasil di copy!
5
  • Folder app — Semua kode utama aplikasi / website berada di dalam folder ini, setiap modul / fitur akan dibuat folder di dalamnya.
  • Folder module — Semua kode spesifik di modul / fitur berada di dalam folder ini, memiliki file utama "page.tsx", disarankan memisahkan setiap bagian component di "_construct" & "_structure" dan memisahkan logika program di "_service".
  • Folder _constructs — Komponen kecil yang spesifik hanya digunakan di tiap modul / fitur berada di folder ini.
  • Folder _structures — Komponen lebih besar yang spesifik hanya digunakan di tiap modul / fitur berada di folder ini.
  • Folder _services — Logika kompleks yang spesifik hanya digunakan di tiap modul / fitur berada di folder ini.
  • File page — File kode utama halaman di module / fitur ini.
  • Folder components — Semua komponen yang bersifat global berada di folder ini. dengan memisahkan komponen berdasarkan level komponen.
  • Folder base.components — Semua komponen dasar berada di folder ini.
  • Folder construct.components — Semua komponen yang lebih besar, seperti "ProductCard" berada di folder ini.
  • Folder structure.components — Semua komponen struktur modul atau fitur aplikasi yang bersifat global, seperti "DetailProductPage" berada di folder ini.
  • Folder context — Semua "React Context" berada di folder ini.
  • Folder public — Semua public file, public document, gambar, dll berada di folder ini.
  • Folder styles — Semua styling css berada di folder ini.
  • Folder utils — Semua utilitas yang bersifat global berada di folder ini.

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:

Siapkan Base Component di Awal Ketika Development Jangan Mengubah Secara Berlebihan

Base Component menjaga konsistensi bentuk UI, 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.

Gunakan Komponen dan Utilitas Sesuai Aturan:

Jangan mengubah properti atau fungsi yang ada di Base Component dan Utilitas Dasar secara berlebihan, Setiap komponen dan utilitas 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.

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.

Gunakan Komponen dan Utilitas Yang Tersedia:

Jika tidak ada kebutuhan yang sangat custom sangat disarankan untuk tetap menggunakan komponen dan utilitas yang sudah tersedia sebelumnya, jangan terlalu banyak membuat komponen dan utilitas yang tidak benar-benar dibutuhkan.

Penggunaan cache:

Tidak semua cocok menggunakan cache di Client Side, Gunakan hanya di tempat / fitur yang sering di akses oleh user, jangan banyak menggunakan cache yang tidak diperlukan. Perhatikan penggunakan revalidate cache untuk menjaga data tetap up-to-date

Penggunaan Hook:

Sangat disarankan untuk menggunakan React Hook untuk memisahkan kode Logic dengan UI

Penggunaan Toggle:

Sangat disarankan untuk menggunakan Toggle Context yang sudah disediakan Next-Light dalam pembuatan state toggle seperti Modal, Floating Page, dll

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.memo atau useMemo, 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).
Dengan mengikuti pattern umum ini bersamaan dengan aturan internal Next-Light, proyek akan lebih mudah dikembangkan, lebih stabil, dan lebih siap untuk dikerjakan dalam tim besar maupun jangka panjang.