Membangun Kode Program yang Baik dengan JavaScript dan

Next.js 15

Sumber : https://liupurnomo.com/praktik-terbaik-javascript-next-js

1. Pendahuluan: Mengapa Kode yang Baik Penting?

Dalam pengembangan perangkat lunak modern, kualitas kode program tidak hanya
diukur dari kemampuannya untuk berfungsi dengan benar. Konsep "kode bersih"
(clean code) telah menjadi fondasi penting bagi setiap pengembang profesional. Kode
bersih melampaui sekadar fungsionalitas; kode ini harus dirancang dengan
keanggunan, efisiensi, dan, yang terpenting, kemudahan pemahaman bagi
pengembang lain—termasuk diri Anda di masa depan.1

Manfaat utama dari kode yang bersih sangat beragam dan saling berkaitan. Pertama,
kode yang bersih sangat mudah dibaca, memungkinkan pengembang untuk
memahami tujuan dan alur logikanya secara sekilas.1 Keterbacaan yang tinggi secara
langsung mengarah pada kemudahan pemeliharaan, di mana modifikasi dan proses

debugging menjadi lebih sederhana dan cepat.1 Selain itu, kode yang bersih
cenderung lebih mudah digunakan kembali dalam skenario yang berbeda,
meningkatkan efisiensi pengembangan secara keseluruhan.1 Aspek penting lainnya
adalah kemampuan uji (testability) yang tinggi, sehingga mempermudah penulisan
unit test untuk memverifikasi fungsionalitas.1 Terakhir, kode bersih dirancang untuk
skalabilitas, memungkinkannya berkembang dan beradaptasi dengan kebutuhan
proyek yang terus bertambah tanpa menjadi terlalu kompleks atau sulit dikelola.1

Sebaliknya, mengabaikan prinsip-prinsip kode yang baik dapat menimbulkan dampak

negatif yang signifikan. Kode yang tidak terorganisir, sering disebut sebagai "kode
spaghetti," dapat menyebabkan pemborosan waktu yang besar bagi pengembang di
kemudian hari.4 Hal ini karena pengembang akan menghabiskan lebih banyak waktu
untuk menguraikan logika yang membingungkan daripada berfokus pada
pengembangan fitur baru atau perbaikan. Akibatnya, risiko munculnya

bug meningkat secara drastis, dan siklus pengembangan menjadi lebih lambat dari
yang seharusnya.5 Keterbacaan yang buruk menghambat pemahaman, yang pada
gilirannya memperlambat proses

debugging dan penambahan fitur baru. Ini semua berkontribusi pada akumulasi
"utang teknis" (technical debt) yang dapat membebani proyek di masa depan,
menjadikannya semakin sulit dan mahal untuk dikelola.3 Oleh karena itu, investasi
dalam menulis kode yang baik sejak awal merupakan strategi yang mengurangi biaya
pengembangan jangka panjang dan memastikan keberlanjutan proyek seiring waktu.
Kode yang baik adalah aset berharga, bukan sekadar biaya tambahan.

2. Prinsip Kode Bersih dalam JavaScript

Prinsip-prinsip kode bersih adalah panduan fundamental untuk membangun

perangkat lunak yang tidak hanya berfungsi, tetapi juga mudah dipahami, dipelihara,
dan diperluas. Penerapan prinsip-prinsip ini sangat krusial dalam ekosistem
JavaScript, terutama dengan kompleksitas yang dibawa oleh kerangka kerja modern
seperti Next.js.

Penamaan yang Bermakna

Penamaan yang bermakna adalah salah satu pilar utama kode bersih. Nama variabel,
fungsi, dan kelas harus secara jelas menunjukkan tujuan dan konteksnya.1
Penggunaan nama satu huruf atau nama yang tidak jelas, seperti

const d = new Date(); atau let u = getUser();, harus dihindari karena dapat
membingungkan dan membuat kode sulit dibaca.1 Sebaliknya, nama yang deskriptif
seperti

const currentDate = new Date(); atau let currentUser = getUser(); jauh lebih informatif
dan mudah dipahami.1

Selain itu, penggunaan const untuk nilai yang tidak akan berubah, alih-alih let atau var,
adalah praktik yang sangat dianjurkan.1 Ini mempromosikan imutabilitas, yang
mengurangi efek samping yang tidak terduga dan membuat kode lebih prediktabil.
Konsistensi dalam konvensi penamaan harus dipertahankan di seluruh basis kode.1
Nama fungsi juga harus jelas menggambarkan apa yang mereka lakukan, misalnya

processUserPayment(paymentData) lebih baik daripada proc(data).1

Konsistensi dalam konvensi penamaan dan struktur folder merupakan fondasi untuk
skalabilitas dan pemeliharaan jangka panjang. Ketika sebuah proyek berkembang,
jumlah file dan komponen meningkat secara eksponensial. Tanpa konvensi penamaan
yang konsisten dan struktur folder yang logis, pengembang akan menghabiskan lebih
banyak waktu untuk mencari file dan memahami tujuannya. Hal ini secara langsung
mengurangi efisiensi dan meningkatkan kemungkinan kesalahan. Oleh karena itu,
investasi awal dalam mendefinisikan dan menegakkan konvensi ini, seringkali melalui
alat seperti ESLint 9, akan menghasilkan keuntungan besar dalam produktivitas dan
kualitas kode seiring waktu.

Berikut adalah perbandingan konvensi penamaan yang umum digunakan dalam

pengembangan JavaScript dan Next.js:

Tabel 1: Perbandingan Konvensi Penamaan

Pola Penamaan Kasus Penggunaan Manfaat Contoh

Umum

PascalCase Nama komponen Mudah UserProfile,

React, antarmuka mengidentifikasi IUserProps,
TypeScript, nama komponen, standar TAuthState 7
kelas React, jelas secara
visual

camelCase Variabel, props, Standar JavaScript, userSettings,

fungsi, custom hooks, mudah ditulis dan fetchUserData,
event handlers dibaca isModalOpen,
handleInputChange,
useAuthState 7

kebab-case Nama file, URL, kelas Mudah dibaca, ramah user-profile.tsx,

CSS URL, kompatibilitas product-card.tsx 7
lintas OS

UPPER_SNAKE_CASE Konstanta, nilai enum Menunjukkan nilai API_ENDPOINT,

tetap, mudah MAX_ITEMS,
 dibedakan dari OrderStatus.PENDIN
variabel G4

Tabel ini mengkonsolidasikan berbagai konvensi penamaan yang tersebar di beberapa

sumber, menyediakannya dalam satu referensi yang mudah diakses. Ini membantu
pengembang dengan cepat mengidentifikasi pola yang benar untuk elemen kode
yang berbeda, mengurangi ambiguitas, dan memastikan konsistensi di seluruh proyek.
Konsistensi adalah pilar pemeliharaan kode, dan tabel ini secara langsung mendukung
tujuan tersebut.

Fungsi Kecil dan Terfokus

Setiap fungsi harus melakukan tepat satu hal.1 Prinsip ini, yang dikenal sebagai

Single Responsibility Principle, sangat penting untuk meningkatkan keterbacaan dan

kemampuan uji kode.2 Fungsi yang melakukan terlalu banyak hal menjadi sulit
dipahami, di-debug, dan diuji. Memecah tugas kompleks menjadi fungsi-fungsi yang
lebih kecil dan terfokus tidak hanya meningkatkan kejelasan tetapi juga mendorong
penggunaan kembali kode.

Selain itu, jumlah parameter fungsi harus dibatasi. Jika sebuah fungsi membutuhkan
banyak parameter, disarankan untuk menggunakan objek untuk meneruskan
parameter-parameter tersebut.1 Misalnya, daripada

createUser(firstName, lastName, email, age, location), lebih baik menggunakan

createUser(userConfig) di mana userConfig adalah objek yang berisi semua detail
pengguna.1 Pendekatan ini membuat tanda tangan fungsi lebih bersih dan lebih
mudah dipahami.

Penggunaan Komentar yang Efektif

Kode yang bersih harus sebisa mungkin mendokumentasikan dirinya sendiri, artinya
kode itu sendiri harus cukup jelas sehingga tidak memerlukan komentar yang
berlebihan.1 Komentar harus digunakan secara bijaksana dan strategis. Fokus utama
komentar adalah menjelaskan "mengapa" suatu keputusan desain atau implementasi
dibuat, bukan hanya "bagaimana" kode tersebut bekerja.1 Misalnya, komentar dapat
menjelaskan niat di balik bagian kode yang rumit atau batasan tertentu yang mungkin
tidak jelas dari kode itu sendiri.13 Mengulang kembali kode dalam bentuk prosa adalah
praktik yang tidak dianjurkan.13

Penting juga untuk menjaga komentar agar tetap mutakhir dengan perubahan kode.12
Komentar yang usang dapat lebih membingungkan daripada membantu. Untuk
catatan singkat, gunakan komentar satu baris (

//). Untuk penjelasan yang lebih panjang atau untuk menonaktifkan blok kode besar
selama debugging, komentar multi-baris (/* */) dapat digunakan.12 Untuk dokumentasi
API yang lebih terperinci dan terstruktur, JSDoc (

/** */) adalah standar yang direkomendasikan.12 JSDoc memungkinkan pengembang

untuk menulis dokumentasi langsung dalam kode menggunakan sintaks khusus yang
dapat diurai oleh alat untuk menghasilkan dokumentasi otomatis.

Pemanfaatan Fitur Modern JavaScript

Evolusi JavaScript dan penerapannya di React/Next.js menunjukkan pergeseran dari

pendekatan yang lebih longgar ke praktik yang lebih terstruktur dan disiplin. Fitur-fitur
modern JavaScript (ES6+) bukan hanya tentang sintaksis yang lebih baru, tetapi
tentang mendorong imutabilitas, kejelasan, dan penanganan asinkron yang lebih baik,
yang secara kolektif meningkatkan prediktabilitas dan mengurangi bug.
●​ Optional Chaining (?.): Fitur ini memungkinkan akses properti objek yang aman
tanpa perlu pemeriksaan null atau undefined yang berlebihan. Misalnya, const
streetName = user?.address?.street; jauh lebih bersih daripada const streetName
= user && user.address && user.address.street;.1
●​ Destructuring: Destructuring array dan objek membuat kode lebih ringkas dan
mudah dibaca saat mengekstrak nilai dari struktur data. Ini mengurangi
boilerplate dan meningkatkan kejelasan tentang data apa yang sedang
digunakan.1
●​ Promises: Untuk menangani operasi asinkron, seperti panggilan API atau operasi
I/O, Promises menawarkan cara yang terorganisir dan mudah dibaca untuk
mengelola alur kontrol, menghindari apa yang dikenal sebagai "callback hell".4
Penggunaan​
 async/await di atas Promises semakin menyederhanakan kode asinkron.
●​ ES6 Classes: Meskipun pola fungsional seringkali lebih disukai dalam Next.js 15,
ES6 Classes masih dapat digunakan untuk mengorganisir logika bisnis dan
mempromosikan prinsip DRY (Don't Repeat Yourself) melalui pewarisan.4 Ini
memungkinkan struktur kode yang lebih terorganisir dan mudah diperluas.

Kode yang mudah dibaca secara inheren lebih mudah dipelihara. Nama yang
bermakna dan fungsi yang kecil/terfokus secara langsung berkontribusi pada
keterbacaan ini. Fitur modern JavaScript seperti destructuring dan optional chaining
mengurangi verbositas dan meningkatkan kejelasan, yang pada gilirannya mengurangi
kemungkinan kesalahan. Penggunaan const mempromosikan imutabilitas, yang
merupakan prinsip kunci dalam meminimalkan efek samping dan membuat kode lebih
prediktabil, sehingga lebih mudah untuk di-debug dan diuji.

Struktur Kode dan Modularisasi

Memisahkan kekhawatiran (separation of concerns) adalah prinsip penting dalam

struktur kode yang baik. Fungsionalitas yang dapat digunakan kembali harus
ditempatkan dalam file JavaScript-nya sendiri.4 Mengelompokkan file terkait ke dalam
folder berbasis fitur membantu menjaga kode tetap terorganisir dan fokus.10 Sebagai
contoh, semua komponen yang terkait dengan fitur autentikasi dapat ditempatkan
dalam

src/features/auth/components/login-form.tsx.10

Dalam struktur proyek, penting untuk membedakan antara direktori utils dan lib.
Direktori utils harus berisi fungsi utilitas murni yang tidak memiliki efek samping dan
dapat diuji secara terisolasi, seperti fungsi pemformatan tanggal atau manipulasi
string.18 Sebaliknya, direktori

lib diperuntukkan bagi fungsionalitas yang lebih kompleks yang sering berinteraksi
dengan layanan eksternal, berisi logika bisnis, atau mengelola state, seperti
konfigurasi klien API, pembantu otentikasi, atau koneksi database.18 Pendekatan
modular ini meningkatkan keterbacaan, pemeliharaan, dan skalabilitas aplikasi.
3. Membangun Aplikasi Next.js 15 yang Baik

Next.js 15 membawa sejumlah peningkatan signifikan dalam arsitektur dan praktik

pengembangan, khususnya dengan fokus pada App Router dan pemanfaatan Server
Components. Memahami perubahan ini adalah kunci untuk membangun aplikasi yang
efisien, skalabel, dan aman.

3.1. Arsitektur Next.js 15: App Router, Server & Client Components

Next.js 15, dengan App Router-nya, memperkenalkan paradigma rendering baru yang
secara fundamental mengubah cara aplikasi dibangun. Secara default, layout dan
halaman dalam App Router adalah Server Components (SC) 20, yang memungkinkan
pengambilan data dan rendering UI di sisi server.

Memahami Peran Server Components (RSC) dan Client Components (CC)

●​ Server Components (SC):

○​ SC dieksekusi secara eksklusif di server, sebelum HTML dikirim ke klien.20 Ini
berarti SC dapat langsung mengambil data dari database atau API yang
berada dekat dengan sumber data, mengurangi latensi jaringan.20
○​ Keuntungan keamanan yang signifikan adalah kemampuan SC untuk
menggunakan kunci API, token, dan rahasia lainnya tanpa mengeksposnya ke
sisi klien, karena kode ini tidak pernah dikirim ke browser.20
○​ SC berkontribusi pada pengurangan ukuran bundle JavaScript yang dikirim ke
browser, karena logika rendering dan pengambilan data tetap berada di
server.20
○​ Hal ini juga meningkatkan First Contentful Paint (FCP) dan memungkinkan
streaming konten secara progresif ke klien, memberikan pengalaman
pengguna yang lebih cepat.20
○​ Namun, SC tidak dapat menggunakan API khusus browser (seperti window
atau localStorage) atau React state hooks (seperti useState atau useEffect)
karena mereka tidak berjalan di lingkungan browser.20
●​ Client Components (CC):
○​ CC dieksekusi di browser, setelah halaman awal dimuat dan di-hydrate.20
○​ CC adalah pilihan yang tepat ketika diperlukan interaktivitas, seperti
penggunaan state dan event handlers (onClick, onChange).20
○​ Mereka juga memungkinkan penggunaan logika lifecycle (useEffect) dan API
khusus browser.20
○​ Custom hooks yang mengelola state atau side effects juga harus digunakan
dalam CC.20
○​ CC secara eksplisit ditandai dengan direktif "use client" di bagian atas file.20
○​ Penting untuk diingat bahwa CC berkontribusi pada ukuran bundle JavaScript
yang dikirim ke klien.20 Oleh karena itu, disarankan untuk menempatkan
direktif​
"use client" pada komponen interaktif spesifik daripada menandai bagian
besar UI sebagai CC, untuk meminimalkan ukuran bundle JS klien.20
●​ Interleaving SC dan CC: Next.js memungkinkan pencampuran SC dan CC dalam
pohon komponen. SC dapat diteruskan sebagai prop ke CC, memungkinkan UI
yang dirender server bersarang secara visual di dalam komponen klien.20 Pola
umum adalah menggunakan​
children untuk membuat slot dalam <ClientComponent>, seperti modal yang
menggunakan client state untuk mengaktifkan visibilitas, tetapi berisi konten yang
diambil di server.20

Pergeseran ke App Router di Next.js 15 membuat pemahaman tentang SC dan CC

menjadi fundamental. Memahami karakteristik inti mereka membantu pengembang
menginternalisasi model mental baru untuk membangun aplikasi Next.js, memastikan
mereka menempatkan logika di tempat yang tepat untuk kinerja, keamanan, dan SEO
yang optimal.

Tabel 3: Perbandingan Server Components vs. Client Components

Aspek Server Component (SC) Client Component (CC)

Lokasi Rendering Di server, sebelum mengirim Di browser, setelah halaman

HTML ke klien dimuat

Dampak SEO Ramah SEO, data disertakan Tidak ramah SEO, data diambil
dalam HTML awal secara dinamis

Visibilitas Kode Sumber Data terlihat di kode sumber Data diambil secara dinamis;
HTML browser tidak terlihat di kode sumber
 Reaktivitas Tidak reaktif; dirancang untuk Reaktif; cocok untuk elemen
data statis UI interaktif

Kasus Penggunaan Terbaik Data penting untuk SEO Data spesifik pengguna, data
(misalnya, posting blog), data dinamis, data yang sering
statis atau jarang berubah, diperbarui, interaktivitas UI
data sensitif

API yang Didukung Akses database, API internal, State, event handlers, lifecycle
variabel lingkungan server hooks, API browser

Ukuran Bundle JS Mengurangi ukuran bundle JS Berkontribusi pada ukuran

klien bundle JS klien

Strategi Rendering (SSR, SSG, ISR, CSR, RSC) dan Kapan Menggunakannya

Next.js 15 menawarkan berbagai strategi rendering yang fleksibel untuk

mengoptimalkan kinerja, skalabilitas, dan pengalaman pengguna.24 Pemilihan strategi
yang tepat sangat bergantung pada kasus penggunaan spesifik dan kebutuhan
caching.
●​ Server-Side Rendering (SSR): HTML dihasilkan pada setiap permintaan di
server.24 Ini sangat ideal untuk konten dinamis yang membutuhkan data segar
pada setiap permintaan, seperti situs berita atau dasbor keuangan dengan data​
real-time.24 SSR juga sangat menguntungkan untuk SEO karena mesin pencari
menerima konten HTML yang sudah dirender sepenuhnya, bukan hanya kerangka
yang menunggu JavaScript untuk mengisi data.23
●​ Static Site Generation (SSG): Halaman di-pre-render pada waktu build.24 Ini
menghasilkan halaman yang sangat cepat untuk pengguna akhir karena HTML
sudah siap disajikan. SSG sangat cocok untuk halaman statis seperti blog, situs
pemasaran, atau dokumentasi yang kontennya tidak sering berubah.24
●​ Incremental Static Regeneration (ISR): ISR adalah pendekatan hibrida yang
menggabungkan manfaat SSG dengan kemampuan untuk memperbarui halaman
statis tanpa harus membangun kembali seluruh situs.24 Ini ideal untuk aplikasi
skala besar yang membutuhkan kesegaran konten periodik tanpa overhead SSR
penuh, seperti halaman produk yang diperbarui secara berkala.24
●​ Client-Side Rendering (CSR): Konten dirender di browser menggunakan
JavaScript, seringkali dengan useEffect untuk mengambil data setelah halaman
dimuat.24 CSR tidak ramah SEO karena data tidak termasuk dalam HTML awal
 yang dilihat oleh​
crawler mesin pencari.23 Namun, ini sangat cocok untuk konten dinamis yang
sering berubah atau bergantung pada interaksi pengguna, seperti dasbor yang
dilindungi autentikasi atau antarmuka yang sangat interaktif.23
●​ React Server Components (RSC): Next.js 15 meningkatkan dukungan untuk
RSC, yang memungkinkan pengambilan dan pemrosesan data di server sambil
menjaga interaktivitas di sisi klien.25 RSC secara signifikan mengurangi ukuran
bundle JavaScript dan meningkatkan waktu muat halaman dengan memindahkan
logika data ke server.25

Perubahan default caching untuk GET Route Handlers dan Client Router Cache
menjadi uncached by default di Next.js 15 26 adalah indikasi kuat bahwa Next.js
mendorong pengembang untuk secara eksplisit mengelola strategi

caching mereka. Ini adalah pergeseran dari "optimasi otomatis" ke "kontrol yang lebih
besar dan tanggung jawab pengembang yang lebih besar" untuk kinerja. Implikasinya
adalah bahwa tanpa pemahaman yang tepat, aplikasi yang di-upgrade ke Next.js 15
mungkin mengalami penurunan kinerja yang tidak terduga, atau sebaliknya,
pengembang dapat mencapai kinerja yang lebih baik dengan mengoptimalkan
caching secara strategis. Ini juga terkait dengan penggunaan React Server
Components, di mana data diambil di server dan kemudian dapat di-cache secara
otomatis oleh Next.js untuk rute yang di-prerender, tetapi untuk data dinamis,
pengembang perlu mengelola caching secara eksplisit.

Tabel 2: Perbandingan Strategi Rendering Next.js 15

Fitur / SSR SSG (Static RSC (React CSR ISR

Strategi (Server-Side Site Server (Client-Side (Incremental
Rendering) Generation) Components Rendering) Static
) Regeneratio
n)

Ramah SEO ✅ ✅ ✅ ❌ ✅
Kinerja ⚡ (Baik) 🚀 (Sangat 🔥 (Sangat ⚡ (Baik) 🚀 (Sangat
Cepat) Baik) Cepat)

Data Dinamis ✅ ❌ ✅ ✅ ✅
Interaktivitas ⚡ (Baik) ⚡ (Baik) ✅ 🚀 (Sangat ⚡ (Baik)
Klien (Interaktif) Interaktif)
 Kasus Konten Blog, situs Mengurangi Dasbor Konten
Penggunaan real-time, pemasaran, JS bundle, interaktif, sering
SEO-kritis dokumentasi data di data diperbarui
server pengguna secara
berkala

Tabel ini memberikan ikhtisar yang jelas tentang berbagai strategi rendering yang
dibahas. Ini membantu pengembang membuat keputusan yang tepat tentang strategi
rendering mana yang akan digunakan berdasarkan kebutuhan spesifik halaman,
seperti SEO, frekuensi pembaruan data, dan interaktivitas. Memahami nuansa ini
adalah kunci untuk mengoptimalkan kinerja dan pengalaman pengguna di Next.js 15.

3.2. Struktur Proyek dan Konvensi Penamaan Next.js

Struktur proyek yang terorganisir dengan baik adalah fondasi untuk aplikasi Next.js
yang skalabel dan mudah dipelihara. Konsistensi dalam konvensi penamaan dan
struktur folder adalah kunci untuk mengurangi beban kognitif bagi pengembang dan
memfasilitasi kolaborasi yang efektif.

Organisasi Folder

●​ Direktori src: Meskipun Next.js dapat berfungsi tanpa direktori src,

penggunaannya direkomendasikan untuk memisahkan kode sumber dari file
konfigurasi, mempermudah implementasi tooling, dan menjaga direktori root
tetap bersih.18 Ini juga membuat struktur proyek lebih konsisten dengan proyek
JavaScript/TypeScript lainnya.
●​ Direktori app: Dengan App Router di Next.js 15, direktori app adalah pusat dari
sistem routing. File yang ditempatkan langsung di app akan memengaruhi rute
root aplikasi. Subfolder dalam app secara otomatis membuat rute baru.18
●​ Grup Rute: Folder yang dibungkus dalam tanda kurung (misalnya, (auth))
digunakan untuk mengelompokkan rute tanpa memengaruhi struktur URL.10 Ini
sangat berguna untuk mengorganisir segmen aplikasi yang berbeda, seperti​
(auth)/login atau (dashboard)/settings.
●​ File Khusus: Next.js memiliki file khusus yang melayani tujuan spesifik dalam
sistem routing:
 ○​ layout.tsx: Untuk tata letak bersama di seluruh segmen rute.10
○​ page.tsx: Untuk mendefinisikan halaman rute.10
○​ error.tsx: Untuk menangani kesalahan dalam segmen rute.10
○​ loading.tsx: Untuk menampilkan UI loading saat data sedang diambil.10
●​ Komponen: Komponen dapat dipisahkan menjadi dua kategori utama:
○​ ui (atau components/ui): Berisi blok bangunan dasar yang dapat digunakan
kembali dan tidak terikat pada logika bisnis spesifik, seperti tombol, input,
atau modal.18
○​ Komponen Fitur: Terikat pada fitur atau domain bisnis tertentu dan
ditempatkan di dalam folder fitur terkait (misalnya,
src/features/user/components/UserProfile).18
●​ utils vs. lib: Perbedaan antara utils dan lib seringkali membingungkan.
○​ utils: Untuk fungsi utilitas murni yang tidak memiliki efek samping, tidak
bergantung pada layanan eksternal, dan dapat diuji secara terisolasi
(misalnya, fungsi pemformatan tanggal, validasi sederhana).18
○​ lib: Untuk fungsionalitas yang lebih kompleks yang sering berinteraksi dengan
layanan eksternal, berisi logika bisnis, atau mengelola state (misalnya,
konfigurasi klien API, pembantu otentikasi, koneksi database).18
●​ Gaya (Styling): Gaya dapat diorganisir dalam direktori styles global untuk CSS
umum, dan menggunakan CSS Modules yang diletakkan bersama komponen
untuk gaya spesifik komponen (misalnya, Button.module.css untuk Button.tsx).18
●​ Monorepo: Untuk aplikasi yang lebih besar atau proyek dengan banyak aplikasi
yang saling terkait, struktur monorepo dapat dipertimbangkan, dengan direktori
apps untuk aplikasi Next.js individual dan direktori packages untuk kode bersama
seperti pustaka UI atau konfigurasi umum.18

Praktik Terbaik dalam Organisasi Folder:

●​ Jaga Struktur Datar: Hindari nesting folder yang terlalu dalam. Jika banyak
subfolder muncul, pertimbangkan restrukturisasi.18
●​ Gunakan File index: Buat file index untuk mengekspor beberapa komponen atau
utilitas dari satu folder, menyederhanakan impor.18
●​ Dokumentasikan Struktur: Pertahankan file README.md di root proyek yang
menjelaskan struktur folder dan konvensi yang digunakan.18
●​ Konsisten: Setelah struktur dipilih, patuhi secara konsisten di seluruh proyek.18
●​ Pertimbangkan Co-location: Tempatkan file-file terkait (misalnya, komponen
dan gayanya) berdekatan.18
Konvensi Penamaan File dan Komponen

Konvensi penamaan yang konsisten sangat penting untuk keterbacaan dan

pemeliharaan kode dalam proyek Next.js.
●​ Nama File: Nama file harus menggunakan kebab-case (misalnya, user-profile.tsx)
untuk memastikan kompatibilitas di berbagai sistem operasi dan URL, serta untuk
keterbacaan yang optimal.7 Nama file harus tetap pendek namun deskriptif.10
●​ Nama Komponen React: Nama komponen React harus mengikuti PascalCase
(misalnya, UserProfile).7 Ini membantu membedakan komponen React dari elemen
HTML standar. Penting untuk dicatat bahwa React mengharuskan nama
komponen dimulai dengan huruf kapital agar dapat dikenali sebagai komponen.27
●​ Variabel dan Props: Gunakan camelCase untuk variabel dan props (misalnya,
userSettings, isModalOpen).7
●​ Custom Hooks: Ikuti camelCase dengan awalan use (misalnya, useAuthState,
useFormInput).7
●​ Konstanta dan Enum: Gunakan UPPER_SNAKE_CASE untuk konstanta dan nilai
enum (misalnya, API_ENDPOINT, MAX_ITEMS).4
●​ Event Handlers: Nama event handler harus dalam camelCase dan diawali
dengan handle atau on (misalnya, handleInputChange, onButtonClick).7
●​ Type dan Interface TypeScript: PascalCase adalah konvensi standar untuk
nama type dan interface TypeScript (misalnya, IUserProps, TAuthState).7

Ketika sebuah proyek tumbuh, jumlah file dan komponen meningkat secara
eksponensial. Tanpa konvensi penamaan yang konsisten dan struktur folder yang
logis, pengembang akan menghabiskan lebih banyak waktu untuk mencari file dan
memahami tujuannya. Hal ini secara langsung mengurangi efisiensi dan meningkatkan
kemungkinan kesalahan. Oleh karena itu, investasi awal dalam mendefinisikan dan
menegakkan konvensi ini akan menghasilkan keuntungan besar dalam produktivitas
dan kualitas kode seiring waktu.

3.3. Optimasi Performa

Next.js 15 dirancang untuk memberikan kinerja yang optimal secara default melalui
berbagai fitur bawaan. Namun, untuk mencapai performa puncak, pengembang perlu
memahami cara kerja fitur-fitur ini dan kapan harus menyesuaikan perilaku default
untuk kasus penggunaan spesifik.

Optimasi Pengambilan Data

Next.js 15 mendukung berbagai strategi pengambilan data, termasuk SSG, ISR, SSR,
CSR, dan React Server Components (RSC).24 Pemilihan strategi yang tepat
berdasarkan kasus penggunaan dan kebutuhan

caching sangat penting untuk kinerja.24 RSC, khususnya, memungkinkan pengambilan

data di server, yang secara signifikan mengurangi ukuran bundle JavaScript klien.20

API fetch di Next.js 15 telah ditingkatkan dengan deduplikasi permintaan otomatis dan
caching.29 Ini berarti permintaan yang sama ke URL yang sama dengan opsi yang
sama hanya akan menghasilkan satu permintaan jaringan. Jika data tidak ingin di-

cache, opsi cache: 'no-store' dapat digunakan untuk memilih rendering dinamis.29
Untuk deduplikasi permintaan yang tidak menggunakan

fetch (misalnya, ORM atau database), React.cache dapat digunakan.29

Streaming adalah teknik penting untuk meningkatkan waktu muat awal dan
pengalaman pengguna. Dengan loading.js atau <Suspense>, Next.js dapat segera
menampilkan UI loading sementara data sedang diambil di server, memberikan umpan
balik instan kepada pengguna.28 Untuk

caching dan sinkronisasi data di sisi klien, pustaka seperti SWR atau React Query
dapat dipertimbangkan.17

Optimasi Gambar (next/image)

Komponen <Image> dari next/image adalah fitur kunci untuk optimasi gambar di
Next.js. Ini secara otomatis mengoptimalkan ukuran gambar, menyajikan ukuran yang
benar untuk setiap perangkat, dan menggunakan format modern seperti WebP.28
Komponen ini juga secara otomatis mencegah pergeseran tata letak (Cumulative
Layout Shift) saat gambar dimuat, yang penting untuk pengalaman visual yang stabil.31
Fitur lazy loading bawaan browser digunakan untuk memuat gambar hanya saat
masuk ke viewport, yang mempercepat waktu muat halaman.32 Komponen

<Image> juga dapat mengubah ukuran gambar sesuai permintaan, bahkan untuk
gambar yang disimpan di server jarak jauh.32 Untuk gambar lokal yang diimpor secara
statis, Next.js secara otomatis menentukan lebar dan tinggi intrinsik. Untuk gambar
jarak jauh,

width dan height harus disediakan secara manual, atau properti fill dapat digunakan
untuk membuat gambar mengisi ukuran elemen induknya.32 Penting untuk
mendefinisikan daftar pola URL yang didukung di

next.config.js untuk gambar jarak jauh guna memastikan keamanan.32

Optimasi Font (next/font)

Modul next/font secara otomatis mengoptimalkan font dan menghilangkan permintaan

jaringan eksternal, yang meningkatkan privasi dan kinerja.33 Ini mencakup fitur

self-hosting bawaan untuk file font apa pun, memastikan pemuatan font web yang
optimal tanpa pergeseran tata letak.33 Untuk Google Fonts,

next/font secara otomatis melakukan self-host, menyimpannya sebagai aset statis dan
menyajikannya dari domain yang sama dengan deployment, sehingga tidak ada
permintaan yang dikirim ke Google oleh browser.33 Untuk font lokal, pengembang
dapat menentukan

src file font lokal mereka.33 Next.js juga meng-

inline CSS font pada waktu build, menghilangkan perjalanan pulang-pergi ekstra yang
sebelumnya diperlukan untuk mengambil deklarasi font.34

Optimasi Ukuran Bundle

Mengelola ukuran bundle JavaScript sangat penting untuk kinerja aplikasi.

@next/bundle-analyzer adalah plugin Next.js yang membantu mengelola ukuran
bundle dengan menghasilkan laporan visual dari ukuran setiap paket dan
dependensinya.35 Informasi ini dapat digunakan untuk mengidentifikasi dependensi
besar, memecah kode, atau melakukan

lazy-loading.

Dynamic imports (next/dynamic) adalah teknik kunci untuk menunda pemuatan Client
Components dan pustaka yang diimpor, hanya menyertakannya dalam bundle klien
saat dibutuhkan.36 Misalnya, modal dapat dimuat hanya saat pengguna mengkliknya.37

Untuk mengoptimalkan impor paket (misalnya, pustaka ikon yang mengekspor ratusan
modul), opsi optimizePackageImports di next.config.js dapat digunakan untuk hanya
memuat modul yang benar-benar digunakan, sambil tetap memberikan kemudahan
penulisan pernyataan import dengan banyak named exports.35

Dalam hal manipulasi data, disarankan untuk menghindari forEach saat memutasi
data. Sebaliknya, penggunaan map, reduce, atau filter lebih disukai untuk
meminimalkan mutasi, yang sejalan dengan prinsip kode bersih.11 Selain itu,

useCallback untuk fungsi dan useMemo untuk perhitungan yang mahal dapat
digunakan untuk menghindari re-render yang tidak perlu pada komponen React, yang
juga berkontribusi pada kinerja.40

Pemantauan Performa

Next.js secara otomatis mengumpulkan metrik Web Vitals, seperti Largest Contentful
Paint (LCP) dan First Input Delay (FID).28 Metrik ini membantu mengidentifikasi

bottleneck kinerja. Mengintegrasikan Web Vitals dengan alat analitik memungkinkan

pemantauan real-time dan wawasan mendalam untuk optimasi kinerja berkelanjutan.28

Next.js 15 secara agresif mendorong "kinerja secara default" melalui fitur-fitur seperti
RSC, optimasi gambar/font bawaan, dan next/dynamic. Namun, ini juga berarti
pengembang perlu memahami cara kerja fitur-fitur ini dan kapan harus "opt-out" atau
menyesuaikan perilaku default untuk kasus penggunaan spesifik, daripada hanya
mengandalkan otomatisasi. Next.js 15 dirancang untuk mengurangi JavaScript yang
dikirim ke klien dan mempercepat waktu muat awal. Ini dicapai melalui RSC, optimasi
gambar, dan font. Namun, untuk mencapai kinerja optimal, pengembang tidak bisa
hanya mengandalkan default. Mereka harus secara aktif menganalisis bundle,
menggunakan dynamic imports secara strategis, dan memilih strategi rendering yang
tepat berdasarkan kebutuhan data dan interaktivitas. Ini menunjukkan bahwa
meskipun Next.js menyediakan alat canggih, pemahaman mendalam tentang
arsitektur dan praktik terbaik tetap krusial.

3.4. Penanganan Kesalahan yang Robust

Penanganan kesalahan yang efektif adalah komponen krusial dari aplikasi yang stabil
dan dapat diandalkan. Dalam Next.js 15, strategi penanganan kesalahan dirancang
untuk membedakan antara kesalahan yang diharapkan dan pengecualian yang tidak
tertangkap, serta menyediakan mekanisme yang terstruktur untuk mengelolanya.

Strategi Penanganan Kesalahan

Kesalahan dapat dikategorikan menjadi dua jenis utama: kesalahan yang diharapkan
dan pengecualian yang tidak tertangkap.41 Kesalahan yang diharapkan adalah kondisi
yang dapat terjadi selama operasi normal aplikasi, seperti kegagalan validasi formulir
atau permintaan jaringan yang gagal. Untuk jenis kesalahan ini, disarankan untuk
menanganinya secara eksplisit dan mengembalikannya sebagai nilai ke klien, daripada
menggunakan blok

try/catch atau melempar error.41 Pendekatan ini memungkinkan penanganan yang

lebih terkontrol dan terprediksi.

Pengecualian yang tidak tertangkap, di sisi lain, adalah error tak terduga yang
menunjukkan bug atau masalah dalam logika aplikasi yang seharusnya tidak terjadi.
Error ini harus ditangani dengan melempar error yang kemudian akan ditangkap oleh
error boundaries.41 Secara umum, semua panggilan asinkron, seperti panggilan Axios,
harus dibungkus dalam blok

try-catch untuk menangani error dengan anggun.23

Error Boundaries (error.js, global-error.js)

Next.js menggunakan error boundaries untuk menangani pengecualian yang tidak

tertangkap dalam komponen React.41 Sebuah

error boundary dibuat dengan menambahkan file error.js di dalam segmen rute dan
mengekspor komponen React.41 Ini secara otomatis membungkus segmen anak atau
komponen

page.js yang bersarang, dan jika error dilemparkan di dalamnya, error tersebut akan
ditangkap dan UI fallback yang ditentukan dalam error.js akan ditampilkan.44

Error akan menggelembung ke error boundary induk terdekat, memungkinkan

penanganan error yang granular di berbagai tingkat hierarki rute.41 Ketika komponen

error aktif, layout di atas error boundary akan mempertahankan state dan tetap
interaktif.44 Fitur penting lainnya adalah fungsi

reset() yang tersedia di komponen error. Fungsi ini dapat dipanggil untuk mencoba
merender ulang konten error boundary, yang sangat berguna untuk memulihkan dari
masalah sementara yang mungkin teratasi dengan percobaan ulang.41

Untuk menangani error yang terjadi di root layout (app/layout.js), Next.js menyediakan
file global-error.js yang harus ditempatkan di direktori app root.41 Berbeda dengan

error.js biasa, global-error.js harus mendefinisikan tag <html> dan <body> sendiri
karena ia menggantikan seluruh root layout saat aktif.41 Ini berfungsi sebagai
penanganan

error "catch-all" yang paling tidak granular untuk seluruh aplikasi.44 Selain itu, file

not-found.tsx digunakan untuk menangani URL yang tidak cocok di seluruh sistem,
menampilkan halaman 404 yang konsisten.42

Next.js 15, terutama dengan App Router, menyediakan sistem penanganan error yang
lebih terstruktur dan hierarkis. Ini mendorong pendekatan "defense-in-depth"
terhadap error, di mana error ditangkap dan ditangani pada tingkat granularitas yang
sesuai, mencegah kegagalan aplikasi secara keseluruhan dan memberikan
pengalaman pengguna yang lebih baik. Error adalah bagian tak terhindarkan dari
pengembangan perangkat lunak. Dengan menyediakan error.js dan global-error.js,
Next.js memungkinkan pengembang untuk mengisolasi kegagalan dan memberikan UI
fallback yang bermakna, daripada hanya menampilkan layar putih. Kemampuan untuk
mereset error boundary juga menunjukkan pergeseran ke arah aplikasi yang lebih
tangguh yang dapat pulih dari masalah sementara tanpa refresh penuh. Ini secara
langsung meningkatkan keandalan aplikasi dan pengalaman pengguna.

Validasi Input dan Penanganan Kesalahan API Routes

Validasi input adalah praktik keamanan yang tidak dapat dinegosiasikan. Pengembang
harus selalu memvalidasi dan membersihkan (sanitize) input yang diterima dari
klien—termasuk data formulir, parameter URL, header, dan searchParams—karena
data ini dapat dengan mudah dimodifikasi oleh pengguna jahat.21

Dalam Next.js, API Routes (di Pages Router) atau Route Handlers (di App Router)
adalah cara untuk membangun endpoint API server-side.46

Route Handlers di App Router memungkinkan ekspor beberapa fungsi untuk metode
HTTP yang berbeda (GET, POST, PUT, DELETE, dll.) dari file yang sama, memberikan
fleksibilitas yang lebih besar.47

Untuk mengakses data permintaan, req.body digunakan untuk data yang diurai dari
body permintaan, req.query untuk query string, dan req.cookies untuk cookie yang
dikirim oleh permintaan.46 Respons dapat dikirim menggunakan

res.status(code).json(body) untuk respons JSON atau res.send(body) untuk respons

HTTP umum.46 Validasi data harus diimplementasikan dalam

POST handler untuk memastikan integritas data sebelum diproses.48

3.5. Keamanan Aplikasi

Keamanan adalah aspek krusial dalam pengembangan aplikasi web. Next.js 15

menyediakan fitur-fitur yang mendukung keamanan, namun tanggung jawab utama
tetap berada pada pengembang untuk mengimplementasikan praktik terbaik secara
proaktif.

Validasi Input Pengguna

Salah satu kerentanan paling umum dalam aplikasi web adalah menerima input
pengguna secara implisit tanpa validasi yang memadai. Ini dapat membuka pintu bagi
serangan seperti Cross-Site Scripting (XSS) atau JSON Injection.49 Pengembang harus
selalu memvalidasi dan membersihkan (sanitize) semua input dari klien, karena data ini
dapat dengan mudah dimodifikasi oleh penyerang.21 Sanitasi melibatkan kombinasi

escaping, filtering, dan validasi data string.50

Penyimpanan Token dan Cookie yang Aman

Penyimpanan token autentikasi yang tidak aman adalah kesalahan umum yang dapat
dieksploitasi. Menyimpan JSON Web Tokens (JWT) di localStorage sangat rentan
terhadap serangan XSS, di mana skrip berbahaya dapat mencuri token tersebut.51
Sebagai gantinya, JWT harus selalu disimpan dalam

HttpOnly cookies.51

HttpOnly cookies tidak dapat diakses oleh JavaScript di sisi klien, sehingga mitigasi
risiko XSS.52

Selain itu, cookie harus diatur dengan flag secure untuk memastikan bahwa cookie
hanya dikirim melalui koneksi HTTPS yang terenkripsi, mencegah serangan
Man-in-the-Middle (MITM).49

Flag sameSite: 'strict' juga direkomendasikan untuk mitigasi serangan Cross-Site

Request Forgery (CSRF).51

Saat memverifikasi token yang diterima, sangat penting untuk: memverifikasi tanda
tangan token, memeriksa waktu kedaluwarsa, memvalidasi penerbit (issuer), dan
mengonfirmasi audiens (audience).51 Menggunakan pustaka seperti Auth.js dapat
sangat membantu karena ia menyediakan penanganan JWT otomatis dan rotasi token
yang aman, serta mendukung berbagai penyedia autentikasi.51 Implementasi rotasi
token dengan

refresh token juga merupakan praktik terbaik, menggunakan access token berumur
pendek (15-30 menit) dan refresh token berumur lebih panjang (hari atau minggu)
untuk meningkatkan keamanan tanpa mengorbankan pengalaman pengguna.51

Pengelolaan Variabel Lingkungan

Pengelolaan variabel lingkungan yang tepat adalah kunci untuk menjaga rahasia
aplikasi tetap aman. File .env.local harus digunakan untuk menyimpan rahasia lokal
dan tidak boleh dikomit ke sistem kontrol versi.53

Dalam Next.js, hanya variabel lingkungan yang diawali dengan NEXT_PUBLIC_ yang
akan terekspos ke bundle JavaScript sisi klien.21 Variabel tanpa awalan ini tetap hanya
tersedia di sisi server (Node.js).53 Penting untuk dipahami bahwa variabel lingkungan
publik ini di-

inline ke dalam bundle JavaScript pada waktu build, sehingga nilainya tidak dapat
diubah saat runtime.54 Untuk nilai variabel lingkungan yang perlu diakses saat

runtime, disarankan untuk menggunakan getServerSideProps atau App Router untuk

mengambilnya di server.54

Next.js 15 memungkinkan Server Components untuk secara aman mengakses variabel

lingkungan, rahasia, database, dan API internal karena mereka berjalan di lingkungan
server.21 Next.js juga memiliki fitur keamanan bawaan untuk Server Actions, seperti ID
tindakan terenkripsi dan penghapusan kode mati untuk mencegah akses publik ke
tindakan yang tidak digunakan.21

Pencegahan Kerentanan Umum

●​ XSS (Cross-Site Scripting): Terjadi ketika skrip tidak tepercaya dieksekusi di

browser pengguna. Selain validasi input, Content Security Policy (CSP) adalah
mekanisme keamanan yang kuat untuk melindungi dari XSS dengan membatasi
 sumber konten yang diizinkan untuk dimuat oleh browser.49
●​ Middleware Vulnerability (CVE-2025-29927): Kerentanan yang baru ditemukan
di Next.js versi 11.1.4 hingga 15.2.2 memungkinkan penyerang melewati
middleware dengan menambahkan header x-middleware-subrequest tertentu.56
Solusi paling efektif adalah memperbarui Next.js ke versi terbaru atau memblokir​
header berbahaya ini di tingkat web server.56
●​ JSON Injection: Terjadi ketika aplikasi web menerima dan mengurai data JSON
berbahaya tanpa sanitasi yang tepat.49 Validasi input yang ketat adalah kunci
untuk mencegah ini.
●​ Source Code Vulnerabilities: Kerentanan juga dapat berasal dari penggunaan
paket dan pustaka publik yang rentan (misalnya, dari NPM). Menggunakan alat
audit keamanan untuk memindai dependensi secara teratur sangat penting untuk
mengidentifikasi dan mengatasi kerentanan ini.50
●​ Defense-in-Depth: Pendekatan keamanan yang paling efektif adalah
"defense-in-depth," yang berarti tidak hanya mengandalkan satu lapisan
keamanan (misalnya, middleware). Sebaliknya, tambahkan lapisan keamanan
redundan di berbagai titik dalam aplikasi untuk memastikan bahwa jika satu
lapisan gagal, lapisan lain masih dapat melindungi.56

Keamanan di Next.js 15 adalah tanggung jawab bersama antara kerangka kerja dan
pengembang. Meskipun Next.js menyediakan fitur keamanan bawaan yang canggih,
pengembang harus secara proaktif mengimplementasikan praktik terbaik untuk
menutup celah yang tidak dapat ditangani oleh kerangka kerja saja. Next.js 15 secara
default menempatkan Server Components di server, yang secara inheren lebih aman
untuk data sensitif. Namun, interaksi antara Server dan Client Components dan
penggunaan API Routes/Route Handlers masih mengharuskan pengembang untuk
menerapkan validasi input yang ketat dan manajemen cookie yang aman. Kerentanan
middleware menunjukkan bahwa bahkan fitur kerangka kerja dapat memiliki celah,
menekankan pentingnya pembaruan rutin dan pendekatan "defense-in-depth". Ini
adalah siklus berkelanjutan di mana kerangka kerja menyediakan fondasi, tetapi
pengembang harus terus-menerus mengaudit dan memperkuat aplikasi mereka.

3.6. Pengujian Kode (Testing)

Pengujian adalah praktik fundamental dalam pengembangan perangkat lunak yang

memastikan kualitas, keandalan, dan stabilitas kode. Dengan Next.js 15, strategi
pengujian perlu disesuaikan dengan arsitektur baru yang melibatkan Server
Components.

Jenis Pengujian

Dalam pengembangan JavaScript dan React/Next.js, terdapat beberapa jenis

pengujian utama, masing-masing dengan tujuan dan kasus penggunaan yang
berbeda:
●​ Unit Testing: Fokus pada pengujian unit individu atau blok kode terkecil secara
terisolasi, seperti fungsi, hook, atau komponen tunggal.1 Unit test harus cepat,
ringan, dan independen dari sumber daya eksternal.58
●​ Component Testing: Merupakan versi unit testing yang lebih terfokus pada
komponen React. Ini melibatkan pengujian bagaimana komponen dirender,
interaksinya dengan props, dan perilakunya sebagai respons terhadap event
pengguna.59
●​ Integration Testing: Menguji bagaimana beberapa unit atau modul bekerja
sama. Ini dapat melibatkan kombinasi komponen, hook, dan fungsi untuk
memverifikasi interaksi antar modul dan aliran data.5
●​ End-to-End (E2E) Testing: Mensimulasikan skenario pengguna nyata dan
berinteraksi dengan seluruh aplikasi dari awal hingga akhir. E2E test memverifikasi
alur pengguna kritis dalam lingkungan yang menyerupai produksi.5
●​ Snapshot Testing: Melibatkan pengambilan output yang dirender dari komponen
dan menyimpannya ke file snapshot. Saat pengujian dijalankan, output yang
dirender saat ini dibandingkan dengan snapshot yang disimpan untuk mendeteksi
perubahan yang tidak terduga dalam perilaku atau UI.57

Tabel 4: Jenis Pengujian dan Tujuannya

Jenis Pengujian Tujuan Utama Fokus Pengujian

Unit Testing Memverifikasi unit kode Fungsi, hook, komponen

terkecil secara terisolasi tunggal

Component Testing Memverifikasi rendering dan Interaksi props, event

perilaku komponen React pengguna

Integration Testing Memverifikasi interaksi antar Kombinasi komponen, hook,

modul dan aliran data fungsi
 End-to-End (E2E) Testing Mensimulasikan alur Skenario pengguna kritis, alur
pengguna lengkap di seluruh bisnis lengkap
aplikasi

Snapshot Testing Mendeteksi perubahan UI Output yang dirender dari

atau perilaku komponen yang komponen
tidak terduga

Tabel ini memberikan ikhtisar yang jelas tentang berbagai jenis pengujian. Ini
membantu pengembang memahami tujuan spesifik dari setiap jenis pengujian, yang
penting untuk membangun strategi pengujian yang seimbang, sering disebut sebagai
"piramida pengujian".58 Memahami "apa yang harus diuji" pada setiap level adalah
fundamental untuk memastikan cakupan kode yang komprehensif dan efisien.

Manfaat Pengujian untuk Kualitas Kode

Pengujian adalah investasi yang signifikan dalam kualitas kode. Dengan menulis test,
pengembang dipaksa untuk berpikir kritis tentang desain kode, memastikan
modularitas dan kemudahan pemeliharaan.5 Pengujian membantu mendeteksi dan
mencegah

bug sejak dini, mengurangi risiko masalah yang masuk ke lingkungan produksi.5 Ini
juga bertindak sebagai jaring pengaman selama

refactoring, memastikan bahwa perubahan kode tidak merusak fungsionalitas yang

ada (regresi).5 Selain itu, pengujian otomatis mempercepat siklus pengembangan
dengan memberikan umpan balik yang cepat dan konsisten.5

Alat Pengujian Populer

Beberapa alat pengujian populer tersedia untuk pengembangan JavaScript dan

Next.js:
●​ Jest: Merupakan framework pengujian JavaScript yang sangat populer, sering
digunakan untuk Unit Testing dan Snapshot Testing.57​
next/jest secara otomatis mengkonfigurasi Jest untuk proyek Next.js.61 Namun,
 perlu dicatat bahwa Jest saat ini tidak mendukung​
unit test untuk Server Components asinkron secara langsung, sehingga E2E test
direkomendasikan untuk kasus tersebut.61
●​ React Testing Library (RTL): Sering digunakan bersama Jest, RTL berfokus
pada pengujian komponen React dengan cara yang menyerupai bagaimana
pengguna akan berinteraksi dengan aplikasi, bukan detail implementasi internal.59
RTL menyediakan​
custom matchers yang nyaman seperti .toBeInTheDocument() untuk
memudahkan penulisan assertion.61
●​ Cypress: Framework pengujian E2E dan Komponen yang kuat, memungkinkan
pengembang untuk menulis test yang mensimulasikan interaksi pengguna secara
real-time di browser.5
●​ Playwright: Pustaka Node.js yang mendukung pengujian E2E dan Integrasi di
berbagai browser. Playwright menawarkan kemampuan untuk mengotomatiskan
interaksi browser dan memverifikasi fungsionalitas aplikasi secara komprehensif.57
●​ Vitest: Alternatif Jest yang lebih cepat untuk unit testing, menawarkan
pengalaman pengembangan yang serupa dengan fokus pada kecepatan.59

Pengujian Komponen Server dan API Routes

Pergeseran arsitektur Next.js 15 dengan Server Components memperkenalkan

kompleksitas baru dalam pengujian. Meskipun unit testing tetap penting untuk logika
yang terisolasi, pengujian komponen server asinkron membutuhkan pendekatan yang
berbeda, seringkali mendorong ke arah E2E testing.
●​ Server Components: Untuk komponen server asinkron (misalnya, yang
mengambil data menggunakan searchParams atau fetch), pengembang dapat
memanggil komponen tersebut sebagai fungsi dan await hasilnya, lalu me-render
hasilnya dengan RTL.63 Ini memungkinkan pengujian perilaku komponen server
meskipun mereka tidak berjalan di browser.
●​ API Routes / Route Handlers: Untuk menguji API Routes atau Route Handlers di
Next.js, pustaka next-test-api-route-handler (NTARH) sangat direkomendasikan.64
NTARH secara tepat mengemulasi penanganan rute Next.js, memungkinkan
pengembang untuk menulis​
unit dan integration test tanpa perlu boilerplate yang rumit atau mocking
lingkungan yang berlebihan. NTARH mendukung App Router (mulai Next.js
14.0.4+) dan Pages Router.64
Server Components berjalan di server dan tidak memiliki state atau side effects klien.
Ini membuat unit testing SC yang murni fungsional relatif mudah. Namun, ketika SC
berinteraksi dengan pengambilan data asinkron atau API eksternal, pengujian unit
menjadi lebih menantang karena lingkungan server. Ini mendorong pengembang untuk
lebih mengandalkan pengujian integrasi (untuk API Routes/Route Handlers) dan
pengujian E2E (untuk alur pengguna penuh yang melibatkan SC dan CC). Implikasinya
adalah bahwa piramida pengujian di Next.js 15 mungkin perlu penyesuaian, dengan
penekanan yang lebih besar pada pengujian integrasi dan E2E untuk memastikan
interaksi yang benar di seluruh tumpukan server-klien.

3.7. Dokumentasi Kode yang Efektif

Dokumentasi kode yang efektif adalah cerminan dari kode yang bersih dan praktik
pengembangan yang matang. Ini bukan sekadar tugas tambahan, tetapi bagian
integral dari siklus hidup pengembangan yang meningkatkan kolaborasi, mengurangi
friksi, dan memastikan keberlanjutan proyek.

Pentingnya Dokumentasi

Dokumentasi kode memainkan peran krusial dalam berbagai aspek pengembangan

perangkat lunak:
●​ Memfasilitasi Onboarding: Dokumentasi yang jelas, ringkas, dan komprehensif
dapat mempercepat proses onboarding pengembang baru, membantu mereka
memahami codebase dengan cepat dan mulai berkontribusi.14
●​ Meningkatkan Koordinasi Tim: Dalam proyek tim, dokumentasi kode yang
konsisten memastikan bahwa setiap anggota tim dapat memahami kode, terlepas
dari siapa yang menulisnya. Ini berfungsi sebagai alat komunikasi yang sangat
efektif dalam tim.8
●​ Membantu dalam QA, Pengujian, dan Debugging: Dokumentasi yang baik
memberikan wawasan tentang tujuan kode, yang dapat membantu
mengidentifikasi perbedaan antara perilaku yang dimaksudkan dan aktual.
Selama pengujian dan debugging, kode yang didokumentasikan dengan baik
mempermudah pemahaman logika dan fungsionalitas yang sedang diuji.14
●​ Mengurangi Waktu Terbuang: Tanpa dokumentasi yang memadai, pengembang
dapat menghabiskan waktu berlebihan untuk memecahkan masalah atau bahkan
menulis ulang kode yang sudah ada karena tidak memahami niat aslinya.66
●​ Memitigasi Kehilangan Pengetahuan: Dokumentasi yang baik membantu
mempertahankan pengetahuan proyek bahkan ketika pengembang kunci
meninggalkan tim, memastikan keberlanjutan proyek.66
●​ Membantu Kepatuhan: Dokumentasi yang tepat juga dapat membantu melacak
dan memverifikasi kepatuhan terhadap standar keamanan, privasi, dan industri.66

Jenis Dokumentasi

●​ Inline Comments: Ini adalah bentuk dokumentasi kode yang paling sederhana,
berupa catatan yang ditulis langsung dalam kode, biasanya di atas atau di
samping baris kode yang dijelaskan.14 Komentar ini sangat berharga untuk
menjelaskan bagian kode yang kompleks atau rumit. Penting untuk fokus pada
menjelaskan "mengapa" suatu keputusan dibuat atau batasan apa yang ada,
daripada hanya "bagaimana" kode itu bekerja.12
●​ JSDoc: JSDoc adalah standar dokumentasi populer untuk JavaScript yang
memungkinkan pengembang menulis dokumentasi langsung dalam kode
menggunakan sintaks khusus (/**... */).12 Alat​
parser JSDoc dapat memindai komentar ini dan menghasilkan situs web
dokumentasi HTML. Tag umum JSDoc meliputi @param (untuk parameter fungsi),
@returns (untuk nilai kembalian), @throws (untuk error yang mungkin
dilemparkan), @type (untuk tipe variabel), @typedef (untuk mendefinisikan tipe
kustom), @callback (untuk fungsi callback), dan @enum (untuk tipe enumerasi).15
Disarankan untuk menyertakan contoh penggunaan umum dalam JSDoc dan
menggunakan sintaks Markdown dalam komentar JSDoc untuk pemformatan
yang lebih kaya.14
●​ README Files dan External Guides:
○​ File README: Biasanya memberikan gambaran umum tingkat tinggi tentang
proyek, termasuk tujuan kode, cara menginstal dan menjalankannya, serta
contoh penggunaan.14
○​ Panduan Eksternal: Bisa lebih komprehensif dan terperinci, menjelaskan
arsitektur kode, menyediakan walkthrough dan tutorial, serta penjelasan
mendalam tentang fitur-fitur kompleks.14
Praktik Terbaik JSDoc

●​ Tempatkan komentar JSDoc segera sebelum kode yang didokumentasikan.16

●​ Setiap komentar JSDoc harus dimulai dengan urutan /** agar dikenali oleh parser
JSDoc.16
●​ Gunakan tag JSDoc untuk memberikan informasi lebih lanjut tentang kode,
seperti @constructor untuk kelas.16
●​ Dokumentasikan dependensi modul dengan jelas untuk mengklarifikasi
persyaratan lingkungan.14
●​ Jelaskan struktur callback secara rinci, termasuk parameter, urutan, dan
penggunaan tipikal.14
●​ Gunakan tag seperti @alias (untuk membuat alias simbol), @tutorial (untuk
menautkan ke tutorial), @link (untuk menautkan ke dokumentasi lain), dan
@inheritdoc (untuk mewarisi komentar dari kelas/fungsi induk) untuk dokumentasi
yang lebih kaya dan saling terhubung.15

Kode yang bersih dan mendokumentasikan diri sendiri mengurangi kebutuhan akan
komentar yang berlebihan. Namun, untuk logika yang kompleks atau keputusan
desain, komentar yang menjelaskan "mengapa" menjadi sangat berharga. JSDoc
melangkah lebih jauh dengan menyediakan struktur standar untuk
mendokumentasikan API, yang secara langsung mendukung intellisense IDE dan
pembuatan dokumentasi otomatis. Ini secara kolektif meningkatkan pengalaman
pengembang (DX) dan mengurangi kurva pembelajaran untuk pengembang baru,
yang pada akhirnya mengarah pada tim yang lebih efisien dan codebase yang lebih
tangguh.

3.8. Refactoring dan Pemeliharaan Kode

Refactoring dan code review adalah dua praktik yang saling melengkapi yang
membentuk tulang punggung pemeliharaan kode berkelanjutan. Refactoring
meningkatkan struktur internal, sementara code review memastikan kualitas dan
konsistensi eksternal. Keduanya sangat penting untuk proyek yang tumbuh dan
berkembang, mengubah pemeliharaan dari tugas reaktif menjadi proses proaktif.
Konsep dan Manfaat Refactoring

Refactoring adalah proses meningkatkan struktur internal kode tanpa mengubah

perilaku eksternalnya.1 Tujuannya adalah untuk membuat kode lebih mudah dibaca,
dipelihara, dan siap untuk pembaruan di masa mendatang.3 Ini melibatkan
penyederhanaan struktur kode yang ada dan penghapusan kode duplikat.

Manfaat utama dari refactoring meliputi:

●​ Peningkatan Pemeliharaan dan Keterbacaan: Kode yang terorganisir dengan
baik lebih mudah dipahami, terutama ketika banyak pengembang berkolaborasi.3
●​ Peningkatan Efisiensi Debugging: Debugging menjadi lebih sederhana ketika
kode terstruktur dengan baik, memungkinkan identifikasi bug lebih cepat.3
●​ Penghapusan "Code Smells": Refactoring mengidentifikasi dan menghilangkan
indikator masalah desain seperti kode duplikat, kelas besar, atau metode panjang,
yang dapat menyebabkan masalah di masa depan.3
●​ Kinerja yang Dioptimalkan: Dengan menghilangkan kode yang berlebihan dan
mengoptimalkan algoritma, refactoring dapat meningkatkan kinerja aplikasi.3
●​ Pengurangan Biaya Pengembangan di Masa Depat: Meskipun refactoring
memerlukan investasi waktu awal, ia mengurangi "utang teknis" dan menghemat
biaya di masa depan dengan membuat penambahan fitur baru dan perbaikan bug
menjadi lebih mudah.3 Ini juga mempermudah penambahan fitur baru dan
perbaikan​
bug.3

Praktik Terbaik untuk Refactoring Komponen

Refactoring harus dilakukan secara teratur.1 Salah satu praktik terbaik adalah
memecah komponen besar menjadi komponen yang lebih kecil dan terfokus untuk
meningkatkan kejelasan dan penggunaan kembali.17 Komponen harus berfokus pada
UI dan memicu

event, sementara data dan tindakan harus diekstraksi ke lapisan terpisah.67

Custom hooks adalah alat yang ampuh untuk mengekstrak logika stateful yang
kompleks ke dalam fungsi yang dapat digunakan kembali, mempromosikan
modularitas dan mengurangi re-render yang tidak perlu.22 Selain itu, disarankan untuk
meminimalkan penggunaan

useEffect yang tidak perlu dan lebih memilih React Server Components (RSC) serta
fitur SSR Next.js untuk optimasi.45 Konsistensi dalam gaya pengkodean harus
dipertahankan setelah

refactoring.1 Ketika

bug ditemukan, praktik terbaik adalah menulis unit test yang mereproduksi masalah
tersebut sebelum memperbaikinya; ini memastikan bug teratasi dan mencegah regresi
di masa depan.60

Code Review untuk Konsistensi dan Kualitas

Code review adalah proses sistematis di mana pengembang meninjau kode sumber
satu sama lain untuk memeriksa inkonsistensi, bug, dan kepatuhan terhadap standar
pengkodean.8 Ini adalah bagian penting dari siklus hidup pengembangan perangkat
lunak dan prinsip yang menentukan metodologi Agile.68

Manfaat Code Review:

●​ Meningkatkan Kualitas Kode: Code review mendeteksi masalah sejak dini,
mencegahnya membesar dan memastikan standar kualitas yang konsisten.8
●​ Mendukung Transfer Pengetahuan: Ini adalah platform yang sangat baik bagi
pengembang untuk belajar dari satu sama lain, berbagi teknik yang andal, pola
desain, dan konvensi pengkodean.8
●​ Memastikan Konsistensi: Code review membantu menegakkan gaya
pengkodean dan standar yang konsisten, membuat codebase lebih mudah dibaca
dan dipelihara.8
●​ Mempermudah Pengujian QA: Kode yang konsisten lebih mudah dipahami oleh
penguji QA, menyederhanakan proses pengujian.68
●​ Mendorong Kepemilikan Kolektif: Proses ini menciptakan rasa kepemilikan
kolektif atas perangkat lunak, karena tim secara bersama-sama memeriksa kode
sumber.68

Praktik Terbaik Code Review:

●​ Gunakan Panduan Gaya Pengkodean yang Konsisten: Adopsi panduan gaya
yang mapan seperti Airbnb atau Google.8
●​ Terapkan Aturan Pemformatan Kode: Gunakan alat seperti ESLint atau Prettier
untuk secara otomatis menegakkan aturan pemformatan kode.8
●​ Fokus pada Modularisasi dan Enkapsulasi: Pastikan kode dipecah menjadi
komponen modular dengan tanggung jawab yang jelas.8
●​ Tulis Komentar yang Jelas dan Ringkas: Komentar harus menjelaskan logika
kompleks atau bagian kode yang rumit.8
●​ Otomatiskan Pengujian: Integrasikan pengujian otomatis (unit, integrasi, E2E) ke
dalam pipeline Continuous Integration/Continuous Delivery (CI/CD).8
●​ Gunakan Alat Code Review Otomatis: Manfaatkan alat seperti Qodo Merge,
Greptile, atau Codacy untuk secara otomatis memindai masalah sintaksis,
keamanan, dan pelanggaran standar.70 Alat-alat ini dapat memberikan umpan
balik yang cepat dan kontekstual.70
●​ Berikan Umpan Balik yang Konstruktif: Fokus pada perbaikan kode daripada
mengkritik pengembang, mendorong budaya peningkatan berkelanjutan.69

Seiring pertumbuhan aplikasi, kompleksitasnya meningkat. Tanpa refactoring, kode

dapat menjadi sulit dipahami dan dimodifikasi, yang mengarah pada "utang teknis".
Refactoring secara aktif mengurangi kompleksitas ini, membuat kode lebih mudah
dibaca dan diuji. Code review bertindak sebagai mekanisme penegakan dan transfer
pengetahuan, memastikan bahwa praktik refactoring yang baik diterapkan secara
konsisten di seluruh tim. Alat code review otomatis mempercepat proses ini,
memungkinkan umpan balik yang cepat dan berkelanjutan, yang pada akhirnya
mengarah pada codebase yang lebih sehat dan tim yang lebih kolaboratif.

4. Kesimpulan dan Rekomendasi Lanjutan

Membangun kode program yang baik, khususnya dalam konteks JavaScript dan
kerangka kerja modern seperti Next.js 15, adalah investasi strategis yang memberikan
dividen jangka panjang dalam bentuk kualitas, efisiensi, dan skalabilitas. Laporan ini
telah menguraikan prinsip-prinsip inti dan praktik terbaik yang diperlukan untuk
mencapai tujuan tersebut.

Ringkasan Prinsip Utama:

●​ Prioritas Kode Bersih: Kode yang baik adalah aset, bukan hanya biaya. Ini
 mengutamakan keterbacaan, pemeliharaan, dan skalabilitas, memastikan bahwa
aplikasi dapat berkembang tanpa menjadi beban.
●​ Fondasi JavaScript yang Kuat: Patuhi prinsip kode bersih inti: gunakan
penamaan yang bermakna dan konsisten, buat fungsi tetap kecil dan terfokus,
serta manfaatkan komentar secara bijaksana untuk menjelaskan "mengapa"
daripada "bagaimana". Manfaatkan fitur modern JavaScript seperti optional
chaining, destructuring, dan Promises untuk kode yang lebih ringkas dan
prediktabil.
●​ Memanfaatkan Arsitektur Next.js 15: Pahami dan manfaatkan sepenuhnya
arsitektur App Router, dengan membedakan secara jelas peran Server
Components (untuk pengambilan data dan keamanan sisi server) dan Client
Components (untuk interaktivitas sisi klien). Pilih strategi rendering (SSR, SSG, ISR,
CSR, RSC) yang paling sesuai dengan kebutuhan data dan SEO setiap halaman.
●​ Optimasi Performa Holistik: Prioritaskan kinerja melalui optimasi pengambilan
data (dengan deduplication dan streaming), penggunaan komponen next/image
dan next/font untuk aset yang dioptimalkan, serta pengelolaan ukuran bundle
yang cermat melalui dynamic imports dan analisis bundle.
●​ Keandalan dan Keamanan Sejak Dini: Implementasikan penanganan kesalahan
yang robust menggunakan error boundaries (error.js, global-error.js) untuk
mengisolasi masalah dan memberikan pengalaman pengguna yang mulus.
Terapkan praktik keamanan yang komprehensif, termasuk validasi input pengguna
yang ketat, penyimpanan token yang aman dalam HttpOnly cookies, dan
pengelolaan variabel lingkungan yang tepat.
●​ Budaya Pengujian yang Kuat: Terapkan budaya pengujian yang kuat di setiap
lapisan aplikasi, mulai dari unit test hingga end-to-end test. Manfaatkan alat
seperti Jest, React Testing Library, Cypress, atau Playwright, dan sesuaikan
strategi pengujian untuk Server Components dan API Routes.
●​ Dokumentasi dan Kolaborasi: Dokumentasikan kode secara efektif, terutama
menggunakan JSDoc, untuk memfasilitasi onboarding tim baru, meningkatkan
koordinasi, dan mengurangi kehilangan pengetahuan. Lakukan refactoring dan
code review secara teratur untuk menjaga kualitas dan konsistensi kode, serta
mendorong peningkatan berkelanjutan dalam tim.

Langkah Selanjutnya untuk Peningkatan Berkelanjutan:

Untuk terus meningkatkan kualitas kode dan praktik pengembangan, disarankan untuk
mengambil langkah-langkah berikut:
●​ Integrasi Alat Otomatis: Integrasikan alat linting (misalnya, ESLint dengan
konfigurasi Airbnb 11) dan pemformatan (misalnya, Prettier 8) ke dalam alur kerja
 CI/CD. Ini akan secara otomatis menegakkan standar pengkodean dan
memastikan konsistensi di seluruh​
codebase, memberikan umpan balik instan kepada pengembang.
●​ Adopsi TypeScript Penuh: Jika belum sepenuhnya diadopsi, pertimbangkan
untuk beralih sepenuhnya ke TypeScript. TypeScript menambahkan keamanan
tipe, yang membantu menangkap error pada waktu kompilasi, meningkatkan
keterbacaan kode, dan meningkatkan produktivitas pengembang.19
●​ Eksplorasi Pola Desain: Jelajahi pola desain JavaScript dan React yang lebih
canggih (misalnya, Module Pattern, Singleton Pattern, Observer Pattern,
Higher-Order Components, Render Props, dan Hooks Pattern).22 Memahami dan
menerapkan pola-pola ini dapat mengarah pada arsitektur yang lebih skalabel,
modular, dan mudah dipelihara.
●​ Tetap Terkini: Lingkungan pengembangan web, terutama Next.js dan React,
berkembang pesat. Tetap up-to-date dengan rilis dan praktik terbaik terbaru
sangat penting untuk memanfaatkan fitur dan optimasi baru.26 Ikuti dokumentasi
resmi dan komunitas pengembang.
●​ Audit Keamanan Berkala: Lakukan audit keamanan dan pengujian penetrasi
secara berkala pada aplikasi. Ini akan membantu mengidentifikasi kerentanan
potensial sebelum dieksploitasi, memastikan aplikasi tetap aman dalam jangka
panjang.21

Dengan menerapkan rekomendasi ini, tim pengembangan dapat membangun dan

memelihara aplikasi Next.js 15 yang tidak hanya memenuhi persyaratan fungsional
tetapi juga unggul dalam kinerja, keamanan, dan pemeliharaan, sehingga memberikan
nilai maksimal bagi pengguna dan bisnis.

Works cited

1.​ Clean Code in JavaScript: A Comprehensive Guide - DEV Community, accessed

June 13, 2025,
https://dev.to/alaa-samy/clean-code-in-javascript-a-comprehensive-guide-152j
2.​ Best Practices for Writing Maintainable JavaScript Code - PixelFreeStudio Blog,
accessed June 13, 2025,
https://blog.pixelfreestudio.com/best-practices-for-writing-maintainable-javascri
pt-code/
3.​ Code Refactoring in 2025: Best Practices & Popular Techniques - Maruti Techlabs,
accessed June 13, 2025,
https://marutitech.com/code-refactoring-best-practices/
4.​ 5 Tips to Organize Your JavaScript Code Without a Framework - BDO USA,
accessed June 13, 2025,
https://www.bdo.com/insights/digital/5-tips-to-organize-your-javascript-code-wi
thout-a-framework
5.​ Master Testing with JavaScript: Improve Code Quality Fast - Devzery, accessed
June 13, 2025,
https://www.devzery.com/post/master-testing-with-javascript-improve-code-qu
ality-fast
6.​ Best practices to write JavaScript code - Codementor, accessed June 13, 2025,
https://www.codementor.io/@riza/best-practices-to-write-javascript-code-238xt
11q41
7.​ Naming Conventions in React for Clean & Scalable Code - Sufle, accessed June
13, 2025, https://www.sufle.io/blog/naming-conventions-in-react
8.​ JavaScript Best Practices for Code Review | GeeksforGeeks, accessed June 13,
2025, https://www.geeksforgeeks.org/javascript-best-practices-for-code-review/
9.​ React Naming Conventions You should follow as a Junior Developer - clean-code,
accessed June 13, 2025, https://m.youtube.com/watch?v=OEDE9KqQCkg
10.​Next.js File Naming Best Practices - Shipixen, accessed June 13, 2025,
https://shipixen.com/blog/nextjs-file-naming-best-practices
11.​ JavaScript style guide - GitLab Docs, accessed June 13, 2025,
https://docs.gitlab.com/development/fe_guide/style/javascript/
12.​Comment JavaScript Code Effectively - Daily.dev, accessed June 13, 2025,
https://daily.dev/blog/comment-javascript-code-effectively
13.​Guidelines for writing JavaScript code examples - MDN Web Docs, accessed
June 13, 2025,
https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Code_style_gui
de/JavaScript
14.​Code Documentation Javascript: Methods and Best Practices - Swimm, accessed
June 13, 2025,
https://swimm.io/learn/code-documentation/code-documentation-javascript-met
hods-and-best-practices
15.​JSDoc: The ultimate guide to documenting your JavaScript code - precodes,
accessed June 13, 2025,
https://precodes.hashnode.dev/jsdoc-the-ultimate-guide-to-documenting-your-j
avascript-code
16.​Getting Started with JSDoc 3, accessed June 13, 2025,
https://jsdoc.app/about-getting-started
17.​How to write clean NextJS code? - Reddit, accessed June 13, 2025,
https://www.reddit.com/r/nextjs/comments/1j7yyy9/how_to_write_clean_nextjs_co
de/
18.​The Ultimate Guide to Organizing Your Next.js 15 Project Structure - Wisp CMS,
accessed June 13, 2025,
https://www.wisp.blog/blog/the-ultimate-guide-to-organizing-your-nextjs-15-pro
ject-structure
19.​Best architecture setup for a highly scalable, complex app using Next.js 15 (App
Router + React)? : r/nextjs - Reddit, accessed June 13, 2025,
https://www.reddit.com/r/nextjs/comments/1k0hssv/best_architecture_setup_for_
a_highly_scalable/
20.​Getting Started: Server and Client Components - Next.js, accessed June 13, 2025,
 https://nextjs.org/docs/app/getting-started/server-and-client-components
21.​Guides: Data Security | Next.js, accessed June 13, 2025,
https://nextjs.org/docs/app/guides/data-security
22.​React Design Patterns and Best Practices for 2025 - Telerik.com, accessed June
13, 2025, https://www.telerik.com/blogs/react-design-patterns-best-practices
23.​Fetching Data with Axios in Next.js 15: A Complete Guide - DEV Community,
accessed June 13, 2025,
https://dev.to/joodi/fetching-data-with-axios-in-nextjs-15-a-complete-guide-hed
24.​Maximizing Next.js 15 SSR for SEO and Beyond: When to Use It - Wisp CMS,
accessed June 13, 2025,
https://www.wisp.blog/blog/maximizing-nextjs-15-ssr-for-seo-and-beyond-when
-to-use-it
25.​Mastering Rendering in Next.js 15: A Deep Dive into SSR, RSC, and More!,
accessed June 13, 2025,
https://dev.to/hasunnilupul/mastering-rendering-in-nextjs-15-a-deep-dive-into-ss
r-rsc-and-more-2md8
26.​Next.js 15, accessed June 13, 2025, https://nextjs.org/blog/next-15
27.​Should the component name start with capital letter? : r/nextjs - Reddit, accessed
June 13, 2025,
https://www.reddit.com/r/nextjs/comments/1gnapqe/should_the_component_nam
e_start_with_capital/
28.​Next.js 15 Best Practices: Unlocking the Full Potential of Modern Web
Development, accessed June 13, 2025,
https://www.antanaskovic.com/blog/next-js-15-best-practices-unlocking-the-full
-potential-of-modern-web-development
29.​Getting Started: Fetching Data and Streaming - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/app/getting-started/fetching-data
30.​Next.js App Router vs Page Router Comparison - Pagepro, accessed June 13,
2025, https://pagepro.co/blog/app-router-vs-page-router-comparison/
31.​nextjs.org, accessed June 13, 2025,
https://nextjs.org/docs/app/getting-started/images#:~:text=The%20Next.js,autom
atically%20when%20images%20are%20loading.
32.​Getting Started: Image Optimization - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/app/getting-started/images
33.​Getting Started: Font Optimization - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/app/getting-started/fonts
34.​SEO: Optimizing Fonts | Next.js, accessed June 13, 2025,
https://nextjs.org/learn/seo/fonts
35.​Guides: Package Bundling - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/app/guides/package-bundling
36.​Reducing NextJS Bundle Size by 30%: A Practical Guide - Coteries, accessed
June 13, 2025, https://www.coteries.com/en/articles/reduce-size-nextjs-bundle
37.​Guides: Lazy Loading | Next.js, accessed June 13, 2025,
https://nextjs.org/docs/app/guides/lazy-loading
38.​Guides: Lazy Loading | Next.js, accessed June 13, 2025,
 https://nextjs.org/docs/pages/guides/lazy-loading
39.​Next.JS Best Practices: Tips For Writing Efficient Code - CodeWalnut, accessed
June 13, 2025, https://www.codewalnut.com/learn/next-js-best-practices-tips
40.​React Hooks Best Practices: Write Cleaner Code Faster - DhiWise, accessed June
13, 2025,
https://www.dhiwise.com/blog/design-converter/react-hooks-best-practices-eve
ry-developer-should-know
41.​Getting Started: Error Handling | Next.js, accessed June 13, 2025,
https://nextjs.org/docs/app/getting-started/error-handling
42.​Next.js 15: Error Handling best practices - for code and routes - Dev and Deliver,
accessed June 13, 2025,
https://devanddeliver.com/blog/frontend/next-js-15-error-handling-best-practice
s-for-code-and-routes
43.​Robust JavaScript Exception Handling: Best Practices and Tools, accessed June
13, 2025, https://bugfender.com/blog/javascript-exception-handling/
44.​Error Handling - Routing - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/14/app/building-your-application/routing/error-handling
45.​Optimized Next.js TypeScript Best Practices with Modern UI/UX rule by MTZN,
accessed June 13, 2025,
https://cursor.directory/optimized-nextjs-typescript-best-practices-modern-ui-u
x
46.​Routing: API Routes - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/pages/building-your-application/routing/api-routes
47.​Building APIs with Next.js, accessed June 13, 2025,
https://nextjs.org/blog/building-apis-with-nextjs
48.​API in Next.js 15: GET & POST Route Handler Examples - Wisp CMS, accessed
June 13, 2025,
https://www.wisp.blog/blog/nextjs-15-api-get-and-post-request-examples
49.​JavaScript Security Best Practices You Must Know - ZeroThreat, accessed June
13, 2025, https://zerothreat.ai/blog/javascript-security-best-practices
50.​JavaScript Security | JavaScript Vulnerabilities - Snyk, accessed June 13, 2025,
https://snyk.io/articles/javascript-security/
51.​Best Practices in Implementing JWT in Next.js 15 - Wisp CMS, accessed June 13,
2025,
https://www.wisp.blog/blog/best-practices-in-implementing-jwt-in-nextjs-15
52.​Debate: Should all API calls in Next.js 15 App Router go through BFF (Backend for
Frontend) for security? : r/nextjs - Reddit, accessed June 13, 2025,
https://www.reddit.com/r/nextjs/comments/1ju9gv1/debate_should_all_api_calls_in
_nextjs_15_app/
53.​How to configure Next.js environmental variables - LogRocket Blog, accessed
June 13, 2025,
https://blog.logrocket.com/configure-environment-variables-next-js/
54.​Guides: Environment Variables - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/pages/guides/environment-variables
55.​How to set a Content Security Policy (CSP) for your Next.js application, accessed
 June 13, 2025, https://nextjs.org/docs/pages/guides/content-security-policy
56.​CVE-2025-29927 – Understanding the Next.js Middleware Vulnerability - Strobes
Security, accessed June 13, 2025,
https://strobes.co/blog/understanding-next-js-vulnerability/
57.​Top 9 JavaScript Testing Frameworks | BrowserStack, accessed June 13, 2025,
https://www.browserstack.com/guide/top-javascript-testing-frameworks
58.​Types of tests: unit, integration, and end-to-end - JavaScript Testing: From Jest
Basics to Advanced Mocking | StudyRaid, accessed June 13, 2025,
https://app.studyraid.com/en/read/11915/379631/types-of-tests-unit-integration-a
nd-end-to-end
59.​Guides: Testing - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/pages/guides/testing
60.​Best Practices for Unit Testing to Ensure Code Quality, accessed June 13, 2025,
https://blog.pixelfreestudio.com/best-practices-for-unit-testing-to-ensure-code
-quality/
61.​Testing: Jest - Next.js, accessed June 13, 2025,
https://nextjs.org/docs/pages/guides/testing/jest
62.​Set Up Jest for Next.js 15 · Issue #50 · StarShopCr/StarShop-Frontend - GitHub,
accessed June 13, 2025,
https://github.com/StarShopCr/StarShop-Frontend/issues/50
63.​4. Testing (async) searchParams with Jest in Next 15 - DEV Community, accessed
June 13, 2025,
https://dev.to/peterlidee/4-testing-async-searchparams-with-jest-in-next-15-2h2
o
64.​next-test-api-route-handler - npm, accessed June 13, 2025,
https://www.npmjs.com/package/next-test-api-route-handler
65.​Easily unit/integration test your API routes with NTARH! · vercel next.js · Discussion
#60838, accessed June 13, 2025,
https://github.com/vercel/next.js/discussions/60838
66.​Why code documentation is key to success - Upsun, accessed June 13, 2025,
https://upsun.com/blog/code-documentation/
67.​What would be a good way to refactor my component? : r/nextjs - Reddit,
accessed June 13, 2025,
https://www.reddit.com/r/nextjs/comments/1l78fly/what_would_be_a_good_way_t
o_refactor_my_component/
68.​The Importance of Code Reviews - 3Pillar Global, accessed June 13, 2025,
https://www.3pillarglobal.com/insights/blog/the-importance-of-code-reviews/
69.​The Importance of Code Reviews - Code Institute Global, accessed June 13,
2025, https://codeinstitute.net/global/blog/the-importance-of-code-reviews/
70.​9 Best Automated Code Review Tools for Developers [2025] - Qodo, accessed
June 13, 2025, https://www.qodo.ai/learn/code-review/automated/
71.​Best Resources for Next.js 15 Best Practices & Clean Code?" : r/nextjs - Reddit,
accessed June 13, 2025,
https://www.reddit.com/r/nextjs/comments/1j6nqdy/best_resources_for_nextjs_15
_best_practices_clean/
72.​JavaScript Design Patterns: Best Practices for Building Scalable and Maintainable
Code, accessed June 13, 2025,
https://blog.msar.me/javascript-design-patterns-best-practices-for-building-scal
able-and-maintainable-code
73.​Scalable JavaScript Design Patterns - Addy Osmani, accessed June 13, 2025,
https://addyosmani.com/scalablejs/
74.​Hooks Pattern - Patterns.dev, accessed June 13, 2025,
https://www.patterns.dev/react/hooks-pattern/