Menjalankan npm run dev
Menjalankan development server Next.js, membuka URL lokal, dan memahami alur edit-save-refresh.
Tujuan belajar
- Menjalankan dev server dari root project
- Membuka local URL yang ditampilkan terminal
- Memahami hubungan terminal, source code, dan browser lokal
- Membedakan dev server dari deployment
Isi lesson
6 blok- 1.Next.js app berjalan lewat development serverBelum selesaiWajib
- 2.Jalankan development serverBelum selesaiWajib
- 3.Cek app di browser lokalBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Port sudah digunakan atau script tidak ditemukanBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Next.js app berjalan lewat development server
WajibNext.js memproses module, route, dan App Router sebelum browser menampilkan app. Jalankan development server dari root project yang berisi package.json. Terminal akan memberi local URL, biasanya `http://localhost:3000`, yang dapat dibuka di browser.
Biarkan terminal dev server tetap aktif saat mengembangkan app. Setelah file disimpan, Next.js biasanya memperbarui halaman secara otomatis. URL localhost hanya tersedia di perangkat kamu dan belum berarti project sudah online atau ter-deploy.
Bagian ini memengaruhi progres lesson.
Jalankan development server
Wajibnpm run devCommand ini menjalankan script dev dari package.json. Jalankan setelah masuk ke folder `fluent-next-dashboard`. Baca URL yang ditampilkan terminal, lalu buka URL tersebut di browser daripada menebak port sendiri.
Bagian ini memengaruhi progres lesson.
Cek app di browser lokal
WajibKerjakan di perangkat kamu:
- Jalankan `npm run dev` dari root project.
- Buka local URL yang muncul di terminal.
- Pastikan starter page Next.js tampil tanpa error.
- Ubah satu teks kecil di app/page.tsx, simpan, lalu lihat apakah browser memperbarui hasilnya.
- Biarkan terminal tetap berjalan saat mengedit project.
Tindakan ini tidak bisa divalidasi otomatis oleh FluentStack. Pastikan browser benar-benar menampilkan app lokal sebelum menandai selesai.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Dari folder mana `npm run dev` seharusnya dijalankan?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
OpsionalPort sudah digunakan atau script tidak ditemukan
Jika terminal menyebut port sudah digunakan, tutup dev server project lain atau gunakan port yang ditawarkan Next.js. Jika script dev tidak ditemukan, cek apakah terminal berada di folder yang punya package.json. Jangan menghapus node_modules sebagai langkah pertama; baca pesan error dan cek lokasi folder terlebih dahulu.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- npm run dev menjalankan development server dari package.json.
- Buka URL yang diberikan terminal, biasanya localhost:3000.
- Terminal perlu tetap aktif saat app dikembangkan.
- Edit dan simpan satu file untuk memastikan workflow lokal benar-benar berjalan.
- Berikutnya, kamu akan membangun route dan layout kecil di app directory.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Next.js app berjalan lewat development server.