Pengenalan Next.js 16 & Ecosystem Overview — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

Arsitektur hybrid Next.js 16: Server Rendering (SSR), Static Site Generation (SSG), & Client Side Rendering (CSR)
Integrasi React 19 (Server Components, Actions, use Optimistic Hooks)
Peningkatan kecepatan build & dev server dengan Turbopack Engine

📌 Mengapa Next.js 16 Menjadi standar Framework Full-Stack?

Next.js 16 adalah iterasi terbaru dari framework React buatan Vercel yang dirancang khusus untuk membangun aplikasi web modern berskala enterprise. Di versi 16, fokus utama terletak pada performa kompilasi ultra-cepat dengan Turbopack, model caching yang lebih eksplisit dan terprediksi, serta dukungan native untuk fitur-fitur React 19.

Fitur Unggulan Next.js 16:

React Server Components (RSC): Komponen React yang di-render 100% di server tanpa menambah ukuran JavaScript bundle di browser client.
Turbopack Dev Engine: Pengganti Webpack berbasis Rust yang memberikan waktu HMR (Hot Module Replacement) hingga 10x lebih cepat.
Explicit Caching Controls: Kontrol caching transparan menghindari bug data usang (stale data).
Server Actions: Mengeksekusi mutasi data server langsung dari form React tanpa perlu menulis boilerplate API endpoint.

⚙️ Perbandingan App Router vs Legacy Pages Router

Sejak Next.js 13+, Vercel memperkenalkan App Router (direktori app/) yang menggantikan Pages Router konvensional (direktori pages/).

Pages Router: Menggunakan struktur file sederhana berbasis path, namun seluruh komponen secara default di-bundle untuk client. State management & data fetching dilakukan via getServerSideProps atau getStaticProps.
App Router (Next.js 16): Menggunakan arsitektur berbasis folder & file spesial (page.tsx, layout.tsx, loading.tsx). Secara default SELURUH komponen adalah Server Component.

💻 Contoh Struktur Aplikasi Next.js 16

app/page.tsx

// Next.js 16 React Server Component (RSC)
export default async function HomePage() {
  // Fetching data langsung di dalam Server Component tanpa useEffect!
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();

  return (
    <main class="p-8 font-sans">
      <h1 class="text-3xl font-bold">Welcome to Next.js 16!🚀</h1>
      <p class="mt-2 text-gray-400">GitHub Stars: {repo.stargazers_count}</p>
    </main>
  );
}