Pengenalan Next.js: Kenapa Pakai Framework Ini?

Apa itu Next.js?

Next.js adalah framework React yang dibuat oleh Vercel. Kalau React hanya library untuk membangun antarmuka, Next.js menambahkan semua yang dibutuhkan aplikasi web produksi: routing, rendering di server, optimasi gambar dan font, sampai deployment yang gampang.

Bayangkan React sebagai mesin mobil. Mesin saja belum bisa jalan jauh. Next.js adalah mobil lengkapnya: ada bodi (routing), AC (optimasi), dan GPS (SEO).

Kenapa tidak React saja?

React murni me-render semuanya di browser (client-side rendering). Akibatnya dua hal: halaman pertama dimuat lama karena browser harus mengunduh JavaScript dulu, dan mesin pencari kesulitan membaca kontenmu. Next.js menyelesaikan keduanya dengan server-side rendering dan static generation.

Hal yang dibawa Next.js

Berikut kemampuan inti yang akan kamu pelajari di track ini:

• File-based routing. Folder di app/ otomatis jadi URL. Tidak perlu konfigurasi router manual.
• Server Component. Komponen di-render di server secara default, jadi JavaScript yang dikirim ke browser lebih sedikit.
• Server Actions. Menulis fungsi server langsung dari komponen, tanpa bikin API terpisah.
• Optimasi bawaan. Gambar, font, dan script dioptimasi otomatis.

Versi yang kita pakai

Track ini memakai App Router (Next.js 13 ke atas, kita pakai Next.js 14+). Ada juga Pages Router versi lama yang masih dipakai banyak project, tapi App Router adalah standar masa depan dan yang kita pelajari di sini.

# Cek versi Next.js yang terinstal nanti dengan:
npx next --version

Kapan pakai Next.js?

Pakai Next.js kalau kamu butuh SEO (blog, landing page, toko online), halaman yang harus cepat dibuka, atau aplikasi full-stack dengan backend ringan. Kalau hanya butuh dashboard internal tanpa SEO, React biasa atau Vite juga cukup.

Kesalahan umum pemula

• Mengira Next.js sama dengan React. Next.js dibangun di atas React, tapi menambah routing, rendering server, dan optimasi. Kalau kamu belum paham komponen dan props React, kuatkan dulu dasarnya sebelum lanjut.
• Mengikuti tutorial Pages Router yang sudah lama. Banyak tutorial lama memakai folder pages/. Di track ini kita memakai App Router (app/). Pastikan tutorial yang kamu ikuti menyebut App Router.
• Berpikir semua harus Next.js. Untuk landing page statis sederhana atau prototype cepat, Vite + React kadang lebih ringan. Pilih alat sesuai kebutuhan, bukan karena tren.

Latihan singkat

1. Tulis di catatanmu: tiga perbedaan React murni vs Next.js dengan bahasamu sendiri.
2. Cari satu website yang kamu suka, tebak apakah ia butuh SEO dan rendering server. Tulis alasanmu dalam dua kalimat.

Rangkuman

• Next.js adalah framework React untuk web produksi: routing, rendering server, dan optimasi bawaan.
• Keunggulan utama dibanding React murni: SEO lebih baik dan halaman pertama lebih cepat dimuat.
• Track ini memakai App Router (Next.js 14+) sebagai standar modern.
• Next.js ideal untuk situs yang butuh SEO dan kecepatan; untuk backend berat tetap pisahkan layanan backend.

Catatan teknis: Next.js bukan pengganti backend seperti Laravel atau Express untuk aplikasi berat. Ia cocok untuk backend ringan (form, API sederhana, autentikasi). Untuk logika bisnis kompleks, tetap pisahkan backend-nya.