My Opinion: Next.js Folder Structure

Disclaimer

Struktur folder ini hanya berlaku untuk Nextjs app router dengan***`src`*** directory. Sesuaikan struktur folder ini dengan kebutuhan spesifik proyek Anda.

Dalam proyek Next.js, struktur folder yang rapi dan terorganisir sangat penting untuk mempermudah pengembangan dan pemeliharaan aplikasi. Berikut ini adalah struktur folder yang saya gunakan beserta penjelasan dan opini saya mengenai kelebihan dan kekurangannya.

Struktur Folder Utama

public/

Folder public untuk menyimpan asset publik. Semua file yang ditempatkan di sini dapat diakses melalui root**URL aplikasi.

src/

Folder src adalah folder utama yang berisi semua kode sumber aplikasi Next.js.

Di dalam folder src, saya membuat beberapa sub-folder yang mengelompokan kode sesuai dengan kegunaanya.

Struktur Sub Foldersrc

app/

Tempat aplikasi Next.js dijalankan, termasuk konfigurasi utama seperti router dan layout aplikasi. Ini adalah lokasi di mana aplikasi dijalankan dan diatur.

Baca selengkapnya di Dokumentasi Nextjs.

components/

Berisi komponen-komponen yang digunakan di seluruh aplikasi. Folder ini mengelompokkan komponen global, komponen HOC (high order component), dan beberapa komponen spesifik tetapi bersifat global.

Di dalamnya, saya biasanya membuat beberapa sub-folder seperti ini,

• cards: Mengandung komponen kartu yang digunakan di berbagai tempat.

• containers: Berisi komponen yang bertindak sebagai kontainer untuk elemen lain.

• **HOCs:**Higher-Order Components, komponen yang membungkus komponen lain untuk menambahkan fungsionalitas.

• shared: Komponen yang sering digunakan di berbagai bagian aplikasi.

• typography: Komponen untuk elemen tipografi seperti judul, paragraf, dll.

configs/

Berisi konfigurasi aplikasi seperti konfigurasi API, pengaturan environtment, atau konfigurasi library pihak ketiga.

Contoh beberapa file konfigurasi saya seperti ini,

modules/

Menyimpan modul-modul bisnis atau fitur-fitur spesifik dari aplikasi. Contoh,

Sebuah module biasanya dapat terdiri dari:

• components: Komponen-komponen terkait dengan modul atau fitur tertentu.

• services: Logika bisnis dan operasional yang terkait dengan modul, dapat digunakan secara internal di berbagai bagian aplikasi.

• api: route, controller, dan service untuk mengelola interaksi dengan API*backend. Layanan di sini digunakan untuk menyediakan API bagi aplikasi lain yang ingin mengakses backend* aplikasi ini.

• repositories: Logika untuk mengakses dan memanipulasi data dari sumber data, seperti database.

• queries: Query**GraphQL* untuk mengambil data dari server*.

• mutations: Mutation**GraphQL* untuk mengubah data di server*.

• entities: Definisi entitas atau model data yang digunakan dalam modul ini.

Sub-folder dari sebuah module tergantung dari module apa yang dibangun dan apa yang menjadi tujuan module tersebut. Bisa jadi sebuah module tidak memerlukan sub-folder mutations, queries atau sub-folder lainya.

styles/

Berisi file-filestyling**global* seperti CSS atau SASS* untuk mengatur tampilan aplikasi secara keseluruhan.

types/

Menyimpan tipe typescript atau definisi proptypes**global** untuk memastikan tipe data yang konsisten di seluruh aplikasi.

stores/

Folder ini dapat digunakan untuk menyimpan state management stores seperti Redux atau Zustand, yang menyimpan state aplikasi secara global.

packages/

Folder ini digunakan untuk menyimpan paket atau library internal yang bisa digunakan di berbagai bagian aplikasi. Ini bisa berupa utilities atau helper functions.

Kelebihan dan Kelemahan Struktur Folder Ini

Kelebihan:

1. Organisasi yang Jelas: Memisahkan fitur dan komponen membuat kode lebih mudah untuk ditemukan dan dikelola.

2. Skalabilitas: Struktur ini memudahkan penambahan fitur baru tanpa membuat kekacauan.

3. Pemeliharaan: Mempermudah tim dalam memahami dan memelihara kode.

Kelemahan:

1. Kerumitan Awal: Membutuhkan pemahaman awal yang baik tentang struktur folder untuk memulai.

2. Overhead: Beberapa folder mungkin tampak berlebihan untuk aplikasi kecil.

3. Penggunaanservices: Perlu aturan jelas untuk membedakan penggunaan service di api dan modules.

Aturan Penggunaan dan Struktur Folder

Aturan Penamaan Sub-folder

• Gunakan penamaan majemuk (plural) untuk sub-folder.

  • Contoh: cards, containers.

• Gunakan penamaan tunggal (singular) untuk file di dalam sub-folder.

  • Contoh: profile.card.tsx, login.form.tsx.

Aturan Penggunaan services

Services di dalamapi

• Tujuan:

  • Menyediakan logika server-side untuk API yang berinteraksi dengan client atau aplikasi lain.

  • Digunakan secara eksklusif oleh controller**API**.

• Penggunaan:

  • Hanya boleh digunakan oleh controller**API**.

  • Bisa digunakan oleh controller lain dalam folder api untuk keperluan yang sama.

  • Berinteraksi langsung dengan repositori untuk mengakses atau memodifikasi data.

Services sebuah modul di dalam foldermodules

• Tujuan:

  • Menyediakan logika bisnis spesifik untuk fitur atau modul tertentu dalam aplikasi.

  • Digunakan oleh komponen frontend atau bagian lain dari aplikasi.

• Penggunaan:

  • Hanya boleh digunakan oleh komponen dalam aplikasi yang terkait dengan modul tersebut.

  • Fokus pada tugas seperti validasi data, manipulasi state, atau pemanggilan layanan eksternal selain API.

  • Dapat mengakses repositori jika diperlukan, namun lebih fokus pada logika bisnis dan validasi data.

Aturan untuk Folder dan File styles

• Pisahkan styles global dan styles spesifik komponen.

  • Global styles di folder styles (contoh: global.css).

  • Styles spesifik komponen di dekat komponen terkait (contoh: button.tsx dan button.module.css).

Praktek Terbaik (Best Practice)

Konsistensi dalam Penamaan

• Selalu gunakan konvensi penamaan yang konsisten untuk folder dan file.

• Pastikan penamaan folder bersifat jamak dan penamaan file bersifat tunggal.

Pisahkan Logika Bisnis dan Tampilan

• Pisahkan logika bisnis dalam service dan repository, sementara komponen harus fokus pada tampilan dan interaksi pengguna.

Dokumentasi dan Komentar

• Tambahkan komentar dan dokumentasi untuk menjelaskan fungsi-fungsi penting, terutama di service dan controller.

Review Kode

• Pastikan semua layanan digunakan sesuai dengan aturan ini.

• Lakukan review kode untuk memastikan services di dalam api hanya digunakan oleh controller API, dan services di dalam modules hanya digunakan oleh komponen frontend.

Linting dan Format Kode

• Gunakan tools linting seperti ESLint untuk menjaga konsistensi kode.

• Gunakan formatter seperti Prettier untuk memastikan format kode tetap rapi.

Edukasi Tim

• Edukasi tim tentang pentingnya mengikuti aturan ini melalui sesi pelatihan atau workshop.

• Dokumentasikan aturan ini secara tertulis dan pastikan mudah diakses oleh semua anggota tim.

Dengan struktur folder yang baik dan aturan yang jelas, pengembangan aplikasi Next.js menjadi lebih teratur dan efisien. Struktur ini membantu menjaga konsistensi dan mempermudah pemeliharaan kode, membuat tim Anda dapat bekerja dengan lebih baik.