Advanced · Level 16: Frontend ArchitectureAdvanced60 menitBahasa Indonesia

Feature Folders

Mengelompokkan code berdasarkan area product agar perubahan satu feature tidak tersebar ke banyak folder generik.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan kapan feature folder mengurangi biaya mencari dan mengubah code
Membedakan route file dengan implementation feature
Menempatkan component, service, type, dan content yang hanya dipakai satu feature di dekat feature itu
Menghindari folder kosong atau lapisan baru sebelum masalahnya nyata

Feature FoldersNext.jsCode OrganizationMaintainability

Isi lesson

6 blok

1.
Mulai dari perubahan yang ingin dipermudahBelum selesaiWajib
2.
Dari folder berdasarkan jenis file ke feature coursesBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan membuat feature folder sebagai ritualBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Mulai dari perubahan yang ingin dipermudah

Wajib

Feature folder bukan aturan bahwa setiap folder harus memiliki components, hooks, services, types, tests, dan constants sejak hari pertama. Ia berguna ketika satu area product mulai memiliki beberapa bagian yang berubah bersama. Misalnya feature courses memiliki card, filter, query data, type response, dan content copy yang biasanya disentuh dalam satu pekerjaan. Menaruh semuanya dekat feature membuat engineer dapat memahami scope perubahan tanpa mencari ke seluruh project. Route App Router tetap boleh tipis: route memilih page atau layout, sementara implementation feature hidup di boundary yang lebih jelas.

Bagian ini memengaruhi progres lesson.

Dari folder berdasarkan jenis file ke feature courses

Wajib

bash

Sebelum
src/
  components/CourseCard.tsx
  components/CourseFilter.tsx
  lib/getCourses.ts
  types/course.ts
  content/course-copy.ts
  app/courses/page.tsx

Sesudah
src/
  app/courses/page.tsx
  features/courses/
    components/CourseCard.tsx
    components/CourseFilter.tsx
    services/get-courses.ts
    types.ts
    content.ts
    index.ts

Perubahan ini tidak mengharuskan semua code masuk ke features. CourseCard, query, type, dan copy dipindahkan karena mereka dimiliki courses. app/courses/page.tsx tetap menjaga route convention Next.js dan dapat mengimpor public entry dari feature. Bila CourseCard kemudian dipakai oleh beberapa feature dengan API yang stabil, barulah ada alasan untuk memindahkannya ke shared UI. Jangan memindahkan file hanya karena namanya memiliki kata Course.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Organize course feature folder

Arahkan route courses ke public entry feature dan tempatkan component, service, type, serta content di boundary courses.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan feature folder paling membantu sebuah project?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Opsional

Jangan membuat feature folder sebagai ritual

Folder features tidak membuat code otomatis modular. Jika page tetap mengimpor detail internal acak, service memanggil component, atau feature saling mengimpor tanpa arah, struktur baru hanya memindahkan kebingungan. Mulai dari satu feature yang nyata, tentukan public entry yang kecil, lalu lihat apakah perubahan berikutnya menjadi lebih mudah.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Feature folder mengelompokkan code berdasarkan area product yang berubah bersama.
Route file menjaga convention framework; implementation feature dapat berada di boundary yang lebih jelas.
Component, service, type, dan content yang hanya dipakai satu feature biasanya dimulai dekat owner-nya.
Struktur baru harus mengurangi biaya perubahan, bukan menambah folder kosong.
Berikutnya, kita menentukan UI mana yang benar-benar layak menjadi shared component.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari perubahan yang ingin dipermudah.

Memuat progres Review module