1. Pengenalan Next.js
Next.js adalah framework React yang dikembangkan oleh Vercel yang memungkinkan Anda membangun aplikasi web full-stack dengan mudah. Next.js menambahkan fitur-fitur penting di atas React seperti server-side rendering (SSR), static site generation (SSG), routing otomatis, API routes, dan optimasi gambar — semuanya out of the box.
Sejak diluncurkan pada tahun 2016, Next.js telah menjadi framework React paling populer untuk produksi. Perusahaan besar seperti Netflix, TikTok, Twitch, Hulu, dan Nike menggunakan Next.js untuk membangun website mereka.
Mengapa Memilih Next.js?
| Fitur | Penjelasan |
|---|---|
| Server-Side Rendering | Halaman di-render di server, menghasilkan HTML yang langsung dikirim ke browser — lebih cepat dan SEO-friendly |
| Static Site Generation | Halaman bisa di-build saat build time untuk performa maksimal |
| File-Based Routing | Cukup buat file di folder, routing otomatis dibuat — tidak perlu konfigurasi manual |
| API Routes | Buat API backend langsung di dalam proyek Next.js tanpa server terpisah |
| Optimasi Otomatis | Image optimization, font optimization, script optimization — semua built-in |
| Full-Stack | Frontend dan backend dalam satu proyek yang sama |
Next.js vs React vs Framework Lain
| Aspek | Next.js | React (SPA) | Remix |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | CSR saja | SSR |
| Routing | File-based (App Router) | React Router (manual) | File-based |
| API | API Routes / Route Handlers | Perlu backend terpisah | Loader/Action |
| SEO | 🟢 Sangat baik | 🟡 Perlu SSR setup | 🟢 Sangat baik |
| Belajar | 🟡 Sedang | 🟢 Mudah | 🟡 Sedang |
| Deployment | Vercel, Docker, Self-host | Static hosting | Various |
/"belajar-nextjs/"/
/"node_modules/"/
public/
/"next.svg"/
/"vercel.svg"/
src/
app/
/"layout.tsx"/
/"page.tsx"/
/"globals.css"/
about/
/"page.tsx"/
blog/
/"page.tsx"/
(slug)/
/"page.tsx"/
api/
hello/
/"route.ts"/
/".env.local"/
/"next.config.js"/
/"package.json"/
/"tsconfig.json"/Next.js versi terbaru menggunakan App Router secara default (folder app/). Versi lama menggunakan Pages Router (folder pages/). Untuk proyek baru, gunakan App Router karena mendukung fitur-fitur terbaru seperti React Server Components dan streaming.
2. SSR vs CSR: Memahami Rendering
Salah satu alasan utama menggunakan Next.js adalah dukungan berbagai strategi rendering. Memahami perbedaan antara Client-Side Rendering (CSR) dan Server-Side Rendering (SSR) sangat penting untuk membangun aplikasi web yang cepat dan SEO-friendly.
Client-Side Rendering (CSR)
Pada CSR, seluruh aplikasi di-render di browser menggunakan JavaScript. Browser pertama-tama menerima HTML kosong, lalu JavaScript dijalankan untuk mengisi konten. Ini adalah cara kerja default React SPA (Single Page Application).
# Alur Client-Side Rendering (CSR):
#
# 1. User mengakses halaman
# 2. Server mengirim HTML kosong + bundle JS besar
# 3. Browser mengunduh JS (bisa 1-3 detik)
# 4. JavaScript dijalankan → render konten
# 5. User baru bisa melihat dan berinteraksi
#
# ❌ Masalah:
# - Loading lambat (blank screen sampai JS selesai)
# - SEO buruk (search engine melihat HTML kosong)
# - First Contentful Paint (FCP) lama
# Contoh: React SPA biasa dengan React Router
# → Semua rendering terjadi di browser
# → Data di-fetch dari client setelah halaman dimuat
Server-Side Rendering (SSR)
Pada SSR, halaman di-render di server setiap kali ada request. Server mengirim HTML lengkap yang langsung bisa ditampilkan browser — tanpa menunggu JavaScript.
# Alur Server-Side Rendering (SSR):
#
# 1. User mengakses halaman
# 2. Server meng-fetch data dan render komponen
# 3. Server mengirim HTML lengkap ke browser
# 4. Browser langsung menampilkan konten
# 5. JavaScript "hydration" → interaktif
#
# ✅ Keuntungan:
# - Konten langsung terlihat (FCP cepat)
# - SEO sangat baik (search engine dapat HTML lengkap)
# - Cocok untuk konten dinamis yang sering berubah
# Di Next.js, gunakan fungsi ini untuk SSR:
# export async function generateMetadata() { ... }
# fetch() dengan cache: 'no-store'
Perbandingan Rendering di Next.js
| Metode | Kapan Render | Konten | Cocok Untuk |
|---|---|---|---|
| SSR (Dynamic) | Setiap request | Terbaru | Dashboard, halaman user |
| SSG (Static) | Saat build | Statis | Blog, landing page |
| ISR | Saat build + revalidate | Semi-dinamis | E-commerce, berita |
| CSR | Di browser | Dinamis | App interaktif |