Apakah Next.js dan apa yang ditambahkannya ke React?

Question

Accepted Answer

**Next.js** adalah **kerangka kerja** React full-stack. React sendiri hanyalah pustaka UI — ia merender komponen tetapi membiarkan perutean, pengambilan data, rendering server, dan peralatan build kepada Anda. Next.js menyediakan semua itu di luar kotak, ditambah waktu proses server. ## Apa yang React saja tinggalkan (dan Next.js tambahkan) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Contoh konkret: rute hanyalah file ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` Dalam React biasa Anda akan memasang router, mengonfigurasi rute, dan menyiapkan build. Di Next.js, membuat file *adalah* rute. ## Mengapa tim memilihnya - **SEO & kinerja** — HTML yang dirender server berarti konten berada dalam respons awal (baik untuk perayap dan cat pertama cepat), tidak seperti SPA React klien-saja yang mengirimkan halaman kosong lalu menggerakkan. - **Full-stack dalam satu proyek** — frontend dan backend (rute API, Tindakan Server) hidup bersama. - **Default siap produksi** — pemisahan kode otomatis, optimasi gambar/font, caching. ## Mengapa hal ini penting Next.js adalah kerangka kerja React paling populer karena mengubah React dari pustaka UI menjadi platform aplikasi lengkap — menangani strategi rendering, perutean, data, dan backend sehingga Anda fokus pada fitur daripada pipa. Ini adalah pilihan default ketika Anda memerlukan SEO, kinerja, atau logika sisi server dengan React.