nextjsinstalasisetupPemula3 mnt baca

Instalasi Project Next.js Baru

Membuat project Next.js dari nol dengan create-next-app dan memahami opsi yang ditawarkan.

Syarat

Kamu butuh Node.js versi 18.17 atau lebih baru. Cek dulu di terminal:

bash
node --version
npm --version

Kalau belum punya, unduh dari nodejs.org. Pilih versi LTS biar stabil.

Membuat project

Jalankan perintah ini di folder tempat kamu menyimpan project:

bash
npx create-next-app@latest belajar-next

Installer akan menanyakan beberapa opsi. Berikut jawaban yang disarankan untuk track ini:

  • TypeScript? Yes. Type safety menghemat waktu debugging.
  • ESLint? Yes. Menangkap kesalahan umum otomatis.
  • Tailwind CSS? Yes. Styling jadi cepat (atau No kalau mau CSS murni).
  • src/ directory? No. Kita pakai struktur app/ di root biar simpel.
  • App Router? Yes. Ini standar yang kita pakai.
  • Turbopack? Yes untuk dev. Lebih cepat dari Webpack.

Menjalankan project

bash
cd belajar-next
npm run dev

Buka http://localhost:3000 di browser. Kamu akan melihat halaman selamat datang Next.js. Edit file app/page.tsx, simpan, dan lihat perubahannya langsung tanpa refresh. Ini namanya hot reload.

Perintah penting

  • npm run dev: menjalankan server development.
  • npm run build: membangun versi produksi (wajib lolos sebelum deploy).
  • npm start: menjalankan hasil build produksi.
  • npm run lint: memeriksa kualitas kode.

Kesalahan umum pemula

  • Node.js versi terlalu lama. create-next-app terbaru butuh Node 18.17+. Kalau instalasi gagal dengan error aneh, cek node --version dulu sebelum menyalahkan yang lain.
  • Menjalankan npm run dev di server production. Mode dev lambat dan tidak aman untuk production. Selalu npm run build lalu npm start.
  • Salah memilih opsi installer. Kalau tidak sengaja memilih Pages Router, paling gampang adalah buat project baru daripada migrasi manual.

Latihan singkat

  1. Buat project baru bernama coba-next, jalankan, dan ubah teks di app/page.tsx. Pastikan hot reload bekerja.
  2. Jalankan npm run build di project tersebut dan perhatikan outputnya: berapa halaman yang di-generate?

Rangkuman

  • Syarat: Node.js 18.17+ dan npm. Buat project dengan npx create-next-app@latest.
  • Jawab Yes untuk TypeScript, ESLint, Tailwind, dan App Router.
  • npm run dev untuk development, npm run build + npm start untuk production.
  • Jangan pernah menjalankan mode dev di production.

Catatan teknis: Jangan pernah menjalankan npm run dev di production. Mode dev tidak dioptimasi dan lambat. Selalu pakai npm run build lalu npm start untuk production.