Next.js Mastery: Dasar, Routing & Rendering

Selamat datang di Fase 4. Sampai sini kamu sudah bisa membangun aplikasi React 19 dengan hooks, merapikannya dengan Tailwind CSS v4, dan mengambil data dengan TanStack Query. Semua itu berjalan di browser. Masalahnya, aplikasi sungguhan butuh lebih dari itu: halaman yang langsung tampil walau internet lambat, halaman yang bisa dibaca Google, URL yang rapi untuk ratusan artikel, tempat aman untuk menyimpan API key, dan cara menyimpan hasil query agar server tidak kerja dua kali. Next.js adalah framework di atas React yang menyediakan semua itu dalam satu paket.

Di materi ini kamu belajar fondasi Next.js versi terbaru dengan App Router: membuat proyek, routing berbasis folder, route dinamis, layout dan halaman loading/error, perbedaan Server Component dan Client Component, mengambil data langsung di server, caching dengan "use cache", optimasi gambar dan font, sampai metadata untuk SEO. Semua versi dan API di sini sudah dicek pada Oktober 2026: next 16.4.3 (dicek dengan npm view next version), create-next-app 16.4.3, React 19.3.0, dan dokumentasi resmi yang ikut terpasang di node_modules/next/dist/docs/. Semua contoh kode sudah dijalankan di proyek uji dengan npm run build sampai lolos. Next.js 16 membawa banyak perubahan dibanding tutorial lama di internet: Turbopack jadi bundler bawaan, params dan searchParams berupa Promise, middleware.ts diganti proxy.ts, dan Cache Components ("use cache") aktif secara default di proyek baru. Kalau kamu menemukan tutorial yang berbeda, cek tahunnya dulu.