Pengenalan Next.js — CompileDaily Study

Penjelasan

Next.js adalah framework React full-stack — dibangun DI ATAS React, tapi menambahkan fitur yang tidak dimiliki React sendirian: routing berbasis file, Server Components (render di server, bukan cuma di browser), Server Actions, optimasi gambar, dan banyak lagi, tanpa perlu menyusun sendiri dari library-library terpisah seperti kalau pakai React murni.

Instalasi & Cara Menjalankan

1. Pastikan Node.js sudah terinstal, cek dengan: node --version
2. Buat project baru: npx create-next-app@latest nama-project
3. Ikuti pertanyaan interaktifnya (TypeScript, ESLint, Tailwind, App Router — pilih Yes untuk App Router karena itu standar modern)
4. Masuk ke folder project: cd nama-project
5. Jalankan server pengembangan: npm run dev
6. Buka http://localhost:3000 di browser — kalau muncul halaman default Next.js, instalasi berhasil

Praktikum

Instal Next.js lewat npx create-next-app@latest belajar-nextjs (pilih App Router saat ditanya). Masuk ke foldernya, jalankan npm run dev, dan buka http://localhost:3000 di browser untuk memastikan halamannya muncul.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Next.js punya DUA sistem routing berbeda: App Router (folder app/, modern, direkomendasikan untuk project baru) dan Pages Router (folder pages/, versi lama). Materi ini semuanya memakai App Router — kalau menemukan tutorial lama yang memakai folder pages/, itu pendekatan sebelumnya.