Belajar Next.js - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Setelah memahami sejarah dan posisi Next.js di episode 1, sekarang waktunya membuka kap mesin. Episode 2 membedah arsitektur utama Next.js: bagaimana request mengalir, di mana halaman di-render, dan komponen apa saja yang menyusun sebuah project.

Dengan pemahaman ini, kalian tidak akan bingung ketika membaca dokumentasi, melihat error di terminal, atau membedakan App Router dan Pages Router. Kalian juga akan memahami kenapa ada istilah server runtime dan Edge runtime — dua lingkungan eksekusi dengan kelebihan berbeda.

#Mode Rendering di Next.js

#SSR, SSG, ISR, dan CSR

Empat mode rendering ini menentukan kapan dan di mana HTML dibentuk:

• SSR: HTML dibangun per request di server; selalu segar, biaya tiap request lebih tinggi.
• SSG: HTML dibangun sekali saat next build; sangat cepat, tapi butuh mekanisme pembaruan.
• ISR: SSG dengan revalidation berkala; halaman di-regenerate di background saat usang.
• CSR: JavaScript di browser yang membangun sebagian besar UI setelah muat awal.

Di App Router, keputusan statis atau dinamis sering diambil otomatis berdasarkan API yang dipakai, misalnya memakai cookies() akan membuat route dinamis. Memahami mode ini adalah fondasi untuk episode 6 dan 14.

#App Router vs Pages Router

#Konsep Segment dan File Conventions

Ada dua paradigma routing di Next.js. Pages Router (pages/) adalah paradigma lama yang mengandalkan file seperti pages/index.js dan fungsi getServerSideProps. App Router (app/) adalah paradigma baru yang berbasis React Server Components, layout bersama, dan file conventions seperti page.tsx, layout.tsx, loading.tsx, dan route.ts.

Dalam App Router, setiap folder adalah segment yang berkorespondensi dengan bagian URL. File app/blog/[slug]/page.tsx mewakili segment dinamis bernama slug. Segmen bisa bersarang, dan setiap level bisa punya layout.tsx sendiri. Inilah yang memungkinkan layout halaman blog punya navbar sendiri tanpa mengganggu halaman dashboard.

#Build Pipeline, Bundling, dan Kompilasi

#Proses Build

Ketika kalian menjalankan npm run build, Next.js melakukan beberapa langkah: kompilasi TypeScript dan JSX menjadi JavaScript, bundling semua modul menjadi sedikit file, melakukan code splitting per route, lalu prerendering halaman statis. Hasilnya adalah output yang siap dijalankan server dan aset statis yang siap di-cache CDN. Build juga menjalankan type checking dan lint, sehingga error tertangkap sebelum production:

npm run build

Perintah npm run build akan menghasilkan folder .next berisi aplikasi yang sudah dioptimasi. Di project yang memakai output: standalone, build menghasilkan direktori .next/standalone yang bisa disalin ke server sendiri — kita bahas di episode 20.

Urutan build bisa diibaratkan pabrik: bahan mentah berupa kode sumber masuk, melewati stasiun kompilasi dan bundling, lalu keluar sebagai produk jadi — HTML statis, JavaScript yang terpecah per route, dan aset dengan hash nama. Setiap route menghasilkan chunk tersendiri sehingga browser hanya memuat kode yang dibutuhkan halaman aktif. Inilah code splitting yang bekerja tanpa konfigurasi manual.

Selama build, Next.js juga melakukan render statis: setiap halaman statis dieksekusi sekali dan HTML-nya ditulis ke disk. Hasilnya bisa disajikan langsung dari CDN tanpa komputasi saat request — inilah mengapa halaman statis di Next.js terasa sangat cepat.

#Server Runtime vs Edge Runtime

Server runtime adalah runtime Node.js standar: bisa memakai semua pustaka Node, akses filesystem, dan koneksi database panjang. Edge runtime adalah runtime ringan berbasis Web Standard yang berjalan di lokasi dekat pengguna (CDN): sangat cepat dan hemat memori, tapi dibatasi pada API yang tersedia di browser, tidak bisa memakai pustaka Node murni. Pilihan runtime memengaruhi latensi dan kemampuan — topik detailnya ada di episode 21.

Untuk memilih runtime yang tepat, pertimbangkan tiga hal: berapa lama logika berjalan, pustaka apa yang dibutuhkan, dan seberapa dekat pengguna dengan server. Aplikasi yang memakai ORM dan database biasanya tetap berjalan di server runtime, sedangkan logika ringan seperti redirect dan autentikasi bisa pindah ke edge.

#Komponen dan Alur Kerja Utama

#Struktur Project

Struktur project Next.js modern relatif sederhana:

• app/: file routing, layout, dan halaman.
• components/: komponen React yang dipakai bersama.
• public/: aset statis yang disajikan langsung.
• lib/ atau utils/: kode bantu, konfigurasi, dan logika bisnis.
• next.config.mjs: konfigurasi framework.
• package.json: skrip dan dependency.

Folder public adalah satu-satunya tempat aset yang disajikan langsung tanpa pemrosesan. File seperti favicon, logo, dan gambar statis diletakkan di sini dan diakses lewat root URL. Sementara itu, file yang butuh transformasi — TypeScript, JSX, CSS — dikelola Next.js lewat build pipeline dan tidak perlu diletakkan di public.

Folder app adalah pusat aplikasi. Layout terluar biasanya mendefinisikan struktur halaman global:

export const metadata = {
  title: "Aplikasi Next.js",
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body>{children}</body>
    </html>
  )
}

children di atas adalah konten halaman yang aktif. Layout akar ini wajib ada di App Router dan menjadi fondasi semua halaman.

#Data Fetching, Streaming, Middleware, dan Route Handler

Alur kerja inti Next.js berputar di empat hal: data fetching di server component atau klien, streaming UI bertahap lewat loading.tsx dan Suspense, middleware untuk logika sebelum request sampai ke halaman (autentikasi, redirect, i18n), serta route handler app/api/route.ts untuk membangun backend API. Keempatnya akan dibedah satu per satu di episode 6 sampai 13.

Pahami juga urutan eksekusi: middleware berjalan paling awal, lalu routing, lalu layout dan halaman, dan akhirnya streaming konten ke klien. Urutan ini membantu kalian memutuskan di lapisan mana sebuah logika sebaiknya ditempatkan.

Catatan lain tentang build: caching juga diterapkan pada hasil kompilasi, sehingga build berikutnya hanya mengerjakan bagian yang berubah. Efeknya terlihat jelas saat pengembangan — waktu tunggu berkurang drastis pada iterasi kedua dan seterusnya.

Satu file yang sering terlupakan adalah next-env.d.ts — file deklarasi tipe yang dihasilkan otomatis oleh Next.js dan tidak boleh diedit manual.

#Penutup

Inti yang harus dibawa pulang:

• Empat mode rendering — SSR, SSG, ISR, CSR — bisa hidup berdampingan.
• App Router berbasis segment dan file conventions, Pages Router berbasis file lama.
• Build pipeline melakukan kompilasi, bundling, code splitting, dan prerendering.
• Server runtime kaya API Node; Edge runtime ringan dan dekat pengguna.
• Struktur utama: app, components, public, lib, dan next.config.mjs.
• Alur kerja inti: data fetching, streaming, middleware, dan route handler.

Di episode 3 selanjutnya kita akan langsung praktik: memulai project Next.js dengan create-next-app, memahami struktur folder hasil scaffold, menjalankan development server dengan hot reload, dan menyiapkan TypeScript, ESLint, serta lint-staged. Siapkan terminal kalian.