Apa itu Next.js dan apa yang ditambahkan melebihi React?

Question

Accepted Answer

**Next.js** adalah **framework** React full-stack. React sendiri hanya sebuah library UI — ia merender komponen tetapi meninggalkan routing, pengambilan data, rendering server, dan build tooling kepada Anda. Next.js menyediakan semua itu dari awal, plus runtime server. ## Apa yang React 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 hanya sebuah file ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` Dalam React murni Anda harus menginstal router, mengonfigurasi rute, dan menyiapkan build. Di Next.js, membuat file *adalah* rute. ## Mengapa tim memilihnya - **SEO & performa** — HTML yang dirender server berarti konten ada dalam respons awal (baik untuk crawler dan cat pertama cepat), tidak seperti React SPA hanya-klien yang mengirim halaman kosong lalu menghidrasi. - **Full-stack dalam satu proyek** — frontend dan backend (API routes, Server Actions) hidup bersama. - **Default siap produksi** — pemisahan kode otomatis, optimasi gambar/font, caching. ## Mengapa ini penting Next.js adalah framework React paling populer karena mengubah React dari library UI menjadi platform aplikasi lengkap — menangani strategi rendering, routing, data, dan backend sehingga Anda fokus pada fitur bukan plumbing. Ini adalah pilihan default ketika Anda membutuhkan SEO, performa, atau logika sisi server dengan React.