Bit Group Asia

2. Struktur Direktori: Versi Next.js (App Router)

Next.js menggunakan File-based Routing di folder app/. Struktur ini dioptimalkan untuk Server Components dan Streaming.

Catatan Penting: Next.js memiliki proxy bawaan (built-in proxy) melalui rewrites di next.config.ts dan Auth Guard melalui proxy.js.

A. Struktur Modular Saat Ini

Struktur ini adalah standar terbaru yang kita gunakan. Mengandalkan app/ untuk routing dan pembagian per folder layer secara general (tanpa folder features).

my-project/
├── app/                        # PUSAT ROUTING (File-based) — route files ONLY
│   ├── (auth)/                 # Route Group (Tidak masuk URL)
│   │   ├── login/
│   │   │   └── page.tsx        # URL: /login
│   │   └── layout.tsx
│   ├── dashboard/
│   │   └── page.tsx            # URL: /dashboard
│   └── layout.tsx              # Root Layout
├── components/                 # UI COMPONENTS (Atomic Design)
│   ├── atoms/                  # Button, Input, Badge, Icon
│   ├── molecules/              # SearchBar, DatePicker, Modal
│   ├── organisms/              # Header, Sidebar, Footer
│   ├── templates/              # MainLayout, AuthLayout
│   └── providers/              # AppProvider, ReduxProvider
├── services/                   # GLOBAL API SERVICES (Axios instances)
├── store/                      # GLOBAL STATE (Redux Slices / Zustand)
│   └── slices/
├── hooks/                      # SHARED CUSTOM HOOKS
├── helpers/                    # SPECIFIC HELPERS (Regex, formatting)
├── utils/                      # GENERAL UTILITIES (Cookie, Date, String)
├── constants/                  # APP-WIDE CONSTANTS & CONFIGS
├── theme.js                    # THEME CONFIGURATION
├── proxy.js                    # AUTH GUARD & ROLE-BASED ACCESS ✅
├── next.config.ts              # PROXY (rewrites) & Next.js Config ✅
└── tsconfig.json

B. Struktur Feature-Based Architecture

Struktur ini digunakan pada proyek di mana fungsionalitas dipecah lagi ke dalam sub-folder features/ berdasarkan domain bisnisnya.

my-project/
├── app/                        # PUSAT ROUTING (File-based) — route files ONLY
│   ├── (auth)/                 # Route Group
│   │   ├── login/
│   │   │   └── page.tsx        # URL: /login
│   │   └── layout.tsx
│   ├── dashboard/
│   │   └── page.tsx            # URL: /dashboard
│   └── layout.tsx              # Root Layout
├── components/                 # GLOBAL UI COMPONENTS (Atomic Design)
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   ├── templates/
│   └── providers/
├── features/                   # BUSINESS MODULES (Feature-based)
│   ├── [feature-name]/
│   │   ├── components/         # Feature-specific components
│   │   ├── hooks/              # Feature-specific hooks
│   │   └── types.ts            # Feature-specific types
├── services/                   # GLOBAL API SERVICES (Axios instances)
├── store/                      # GLOBAL STATE (Jotai / Zustand atoms)
│   └── atoms/
├── hooks/                      # SHARED CUSTOM HOOKS
├── types/                      # GLOBAL TYPES & INTERFACES
├── utils/                      # HELPERS & UTILITIES
├── constants/                  # APP-WIDE CONSTANTS & CONFIGS
├── proxy.js                    # AUTH GUARD & ROLE-BASED ACCESS ✅
├── next.config.ts              # PROXY (rewrites) & Next.js Config ✅
└── tsconfig.json

C. Analisis Perbandingan: Modular vs Feature-Based (Pros & Cons)

Memilih struktur yang tepat sangat krusial bagi skalabilitas proyek. Berikut perbandingan komprehensif antara Struktur Modular (Layer-First) dan Struktur Feature-Based (Domain-First):

Aspek / Kriteria📦 Struktur Modular (A)🎯 Struktur Feature-Based (B)
Kesesuaian SkalaProyek kecil hingga menengah (Small-to-Medium Project).Proyek skala besar (Enterprise/Multi-team).
Kelebihan (Pros)- Navigasi file sangat mudah dan intuitif.<br>- Kurva pembelajaran (learning curve) rendah untuk developer baru.<br>- Sangat mudah membagikan logika/komponen global.- Kapsulitas Tinggi: Perubahan terisolasi di dalam folder fitur terkait.<br>- High Cohesion, Low Coupling: Mencegah kekacauan folder global (bloat).<br>- Scalable & Future-Proof: Mempermudah migrasi ke Monorepos atau Micro-Frontends.
Kekurangan (Cons)- Folder global (components/, hooks/) bisa menjadi sangat besar dan sulit dicari.<br>- Rentan terjadi ketergantungan melingkar (circular dependency).- Struktur lebih kompleks dengan boilerplate yang tinggi.<br>- Potensi kebingungan tim tentang penempatan file yang bersifat setengah global.

Mengapa Struktur Modular Saat Ini Dipilih sebagai Standar Utama?

Struktur Modular yang tercantum pada Poin A dipilih sebagai standar utama karena memiliki dasar arsitektur yang kuat dan sangat direkomendasikan untuk proyek skala menengah ke atas:

  1. Pemisahan Peran Secara Tegas (Separation of Concerns - SoC): Dengan memisahkan file berdasarkan fungsi teknisnya (components untuk UI, services untuk koneksi API, store untuk state global, hooks untuk logic), kode menjadi sangat terorganisir dan memiliki batasan tanggung jawab yang jelas (Single Responsibility Principle).

  2. Metodologi Atomic Design untuk Reusabilitas UI: Pengelompokan folder components/ menjadi atoms, molecules, organisms, dan templates mempermudah tim dalam membangun UI yang konsisten dan terstandardisasi. Pola ini terbukti mengurangi duplikasi komponen secara signifikan.

  3. Praktik Terbaik Next.js (Membatasi Folder app/ Hanya untuk Routing): Menyimpan file logika dan komponen di luar folder app/ (seperti components/, services/, dll.) adalah pola organisasi yang direkomendasikan langsung oleh Next.js untuk menjaga agar direktori rute tetap bersih dari file-file non-rute.

Referensi Resmi Arsitektur:

© 2026 Bit Group Asia. All rights reserved.

ArchitectureSecurityGuidelines