Kenapa Next.js

Kenapa ini penting

Sebelum belajar alat baru, kamu perlu tahu masalah apa yang mau diselesaikan. Kalau tidak, Next.js cuma terasa seperti "React dengan aturan tambahan yang merepotkan". Begitu paham alasannya, setiap aturan (folder app, "use client", "use cache") jadi masuk akal.

Next.js juga dipakai luas di dunia kerja. Banyak lowongan frontend di Indonesia menulis "React/Next.js" sebagai satu paket, dan dokumentasi resmi React sendiri menyarankan memakai framework saat membuat aplikasi baru. Jadi ini bukan sekadar pilihan gaya, tapi keterampilan yang dicari.

Konsep inti

React murni vs framework

Aplikasi yang kamu buat dengan Vite di fase sebelumnya disebut SPA (Single Page Application). Cara kerjanya:

1. Browser meminta halaman, server mengirim HTML yang hampir kosong: cuma <div id="root"></div> dan tag <script>.
2. Browser mengunduh file JavaScript (bisa ratusan KB).
3. JavaScript berjalan, React membangun tampilan, lalu baru mengambil data dari API.
4. Setelah data datang, barulah user melihat isi halaman.

Bayangkan kamu pesan nasi goreng, lalu pelayan datang membawa kompor, wajan, beras, dan resep, dan kamu disuruh masak sendiri di meja. Hasilnya memang nasi goreng, tapi kamu menunggu lama, dan kalau kompormu (HP murah) lemah, makin lama lagi.

Framework seperti Next.js membuat dapurnya ada di server. Server memasak HTML yang sudah berisi konten, lalu mengirimnya ke browser. User langsung melihat isi halaman. JavaScript tetap dikirim, tapi hanya untuk bagian yang memang interaktif (tombol, form, dropdown).

Empat cara merender halaman

Di Next.js 16 dengan Cache Components, keempatnya bisa dicampur dalam satu halaman. Bagian statis (header, menu) dibuat saat build, bagian yang di-cache diperbarui berkala, dan bagian personal (keranjang belanja) dikirim belakangan lewat streaming. Teknik ini disebut Partial Prerendering (PPR), dan di Next.js 16 ini jadi perilaku bawaan saat Cache Components aktif. Kamu akan melihatnya di modul Caching.

SEO: kenapa HTML dari server penting

SEO (Search Engine Optimization) adalah usaha agar halaman muncul di hasil pencarian Google. Mesin pencari membaca HTML. Kalau HTML-mu kosong dan isinya baru muncul setelah JavaScript jalan, crawler harus kerja ekstra, dan banyak crawler lain (preview link WhatsApp, Facebook, X) sama sekali tidak menjalankan JavaScript. Itu sebabnya link SPA yang dibagikan ke grup WhatsApp sering tampil tanpa judul dan gambar. Dengan Next.js, judul, deskripsi, dan gambar Open Graph sudah ada di HTML sejak awal.

Full-stack dalam satu proyek

Next.js bukan cuma frontend. Dalam satu proyek kamu bisa:

• Query database langsung dari komponen (Server Component), tanpa membuat API terpisah.
• Membuat endpoint API (route.js) untuk aplikasi mobile atau webhook.
• Menerima kiriman form dengan Server Action (fungsi 'use server').
• Menjalankan kode sebelum request sampai ke halaman lewat proxy.js (dulu bernama middleware.js).

API key dan password database tetap di server dan tidak pernah terkirim ke browser.

Posisi Next.js di antara pilihan lain

Tidak ada yang "paling benar". Untuk camp ini kita pilih Next.js karena paling banyak dipakai di industri, dokumentasinya lengkap, dan satu proyek bisa menampung frontend sekaligus backend ringan.

Sedikit sejarah: Pages Router vs App Router

Next.js lama memakai folder pages/ dengan fungsi seperti getServerSideProps dan getStaticProps. Sistem itu disebut Pages Router dan masih didukung untuk proyek lama. Sejak Next.js 13, ada App Router (folder app/) yang dibangun di atas React Server Components. Semua proyek baru sebaiknya memakai App Router, dan seluruh materi ini memakai App Router. Kalau di tutorial kamu melihat getServerSideProps, itu tanda tutorialnya untuk Pages Router.

Contoh kode

Bandingkan HTML yang diterima browser dari SPA biasa dan dari Next.js. Kamu bisa membuktikannya dengan curl (atau "View Page Source" di browser).

# SPA Vite (setelah npm run build && npm run preview)
curl -s http://localhost:4173 | grep -o '<div id="root">.*</div>'
# → <div id="root"></div>          ← kosong, isi baru muncul setelah JS jalan

# Next.js (setelah npm run build && npm start)
curl -s http://localhost:3000/blog | grep -o '<li>.*</li>' | head -3
# → <li><a href="/blog/halo-nextjs">Halo, Next.js!</a></li> ...  ← konten sudah ada

Halaman Next.js pertamamu cukup satu file. Perhatikan: tidak ada useEffect, tidak ada useState untuk loading. Komponen boleh async karena berjalan di server.

// app/page.jsx, Server Component (bawaan di App Router)
export default async function HomePage() {
  // fetch berjalan di SERVER, bukan di browser user
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1')
  const user = await res.json()

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Halo dari server!</h1>
      <p>User pertama di API: {user.name}</p>
    </main>
  )
}
// → HTML yang dikirim ke browser sudah berisi "User pertama di API: Leanne Graham"

Bandingkan dengan versi SPA yang harus mengurus loading sendiri:

// Versi SPA (React + Vite), semua terjadi di browser
import { useEffect, useState } from 'react'

export default function HomePage() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then((res) => res.json())
      .then(setUser)
  }, [])

  if (!user) return <p>Memuat...</p> // → crawler sering hanya melihat teks ini
  return <p>User pertama di API: {user.name}</p>
}

Kesalahan umum

1. Menganggap Next.js "pengganti" React. Next.js memakai React. Semua yang kamu pelajari (komponen, props, hooks) tetap berlaku. Next.js menambah routing, rendering di server, dan caching.
2. Mengikuti tutorial Pages Router untuk proyek App Router. getServerSideProps, getStaticProps, dan _app.js tidak berlaku di folder app/. Cek dulu apakah tutorial memakai app/ atau pages/.
3. Memakai Next.js untuk semua hal. Dashboard internal kecil tanpa kebutuhan SEO mungkin lebih sederhana dengan Vite. Pilih alat sesuai kebutuhan, bukan tren.
4. Mengira "server" berarti harus sewa VPS. Proyek Next.js bisa di-deploy ke platform seperti Vercel, Netlify, atau Cloudflare yang mengurus servernya untukmu, atau dijalankan sendiri dengan next start di server Node.js.
5. Percaya tutorial lama soal caching. Model caching berubah besar di Next.js 15 dan 16. Selalu cek versi tutorial dan dokumentasi resmi.

Latihan

1. Mudah, Buka dua situs: satu SPA (misalnya proyek Vite-mu) dan satu situs Next.js (misalnya nextjs.org). Klik kanan → View Page Source. Catat perbedaan isi <body> keduanya.
2. Sedang, Untuk setiap halaman berikut, tentukan strategi render yang paling cocok (CSR/SSR/SSG/ISR) dan alasannya: (a) halaman "Tentang Kami", (b) daftar harga emas yang berubah tiap menit, (c) halaman profil yang hanya bisa dilihat user yang login, (d) katalog 5.000 produk yang stoknya berubah beberapa kali sehari.
3. Menantang, Tulis ulang komponen SPA di atas menjadi Server Component Next.js yang menampilkan tiga user pertama (/users?_limit=3) dalam bentuk daftar.

// app/page.jsx
export default async function HomePage() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users?_limit=3')
  const users = await res.json()

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Tiga user pertama</h1>
      <ul className="list-disc pl-6">
        {users.map((u) => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </main>
  )
}
// → Leanne Graham, Ervin Howell, Clementine Bauch

Ringkasan

• SPA merender di browser; Next.js merender di server sehingga HTML sudah berisi konten saat diterima.
• Ada empat pola render (CSR, SSR, SSG, ISR), dan Next.js 16 bisa mencampurnya dalam satu halaman lewat Partial Prerendering.
• HTML dari server membuat SEO dan preview link di media sosial jauh lebih baik.
• Next.js adalah framework full-stack: Server Component, Route Handler, Server Action, dan proxy dalam satu proyek.
• Gunakan App Router (folder app/); Pages Router hanya untuk proyek lama.