Setelah mengenal struktur folder Next.js, sekarang kita akan mencoba menjalankan project yang sudah dibuat sebelumnya.

Dalam proses pengembangan website, kita membutuhkan sebuah development server agar bisa melihat hasil pekerjaan secara langsung melalui browser tanpa harus melakukan build setiap kali ada perubahan kode.

Next.js sudah menyediakan development server bawaan yang bisa kita jalankan menggunakan NPM. Jadi, kita tidak perlu menginstal server tambahan untuk mulai mengembangkan aplikasi secara lokal.

1. Membuka Project di Code Editor

Pertama, pastikan kalian sudah membuka folder project tutorial_next_js menggunakan Cursor AI atau code editor lainnya.

Kemudian, buka terminal bawaan code editor.

Pastikan posisi terminal sudah berada di dalam direktori utama project. Jika belum, kalian bisa masuk menggunakan perintah:

cd tutorial_next_js

Sesuaikan nama folder dan lokasi project dengan yang kalian gunakan sebelumnya.

2. Menjalankan Development Server

Selanjutnya, jalankan perintah berikut melalui terminal:

npm run dev

Perintah tersebut akan menjalankan script dev yang sudah didefinisikan di dalam file package.json.

Secara default, Next.js akan menjalankan aplikasi menggunakan development server dan menyediakan alamat lokal untuk mengakses website.

Jika berhasil, terminal akan menampilkan informasi kurang lebih seperti berikut:

▲ Next.js
- Local:    http://localhost:3000
- Network:  http://192.168.x.x:3000

✓ Starting...
✓ Ready in 2s

Perlu diperhatikan bahwa informasi dan waktu yang ditampilkan bisa berbeda tergantung versi Next.js dan kondisi komputer masing-masing.

3. Membuka Website di Browser

Jika development server sudah berhasil dijalankan, sekarang buka browser yang biasa kalian gunakan.

Kemudian, akses alamat berikut:

http://localhost:3000

Jika semuanya berjalan dengan baik, kalian akan melihat halaman awal Next.js yang menandakan project berhasil dijalankan.

Sampai di sini, kita sudah berhasil menjalankan project Next.js secara lokal.

4. Mengenal Hot Reload

Salah satu hal yang cukup membantu ketika menggunakan Next.js adalah fitur Fast Refresh.

Fitur ini memungkinkan kita melihat perubahan tampilan website secara otomatis ketika melakukan perubahan pada kode selama development server berjalan.

Sebagai contoh, coba buka file berikut:

app/page.tsx

Kemudian, cari bagian teks yang ingin kalian ubah. Kalian bisa mencoba mengganti salah satu tulisan pada halaman tersebut, lalu simpan file.

Setelah itu, perhatikan browser kalian.

Next.js akan mendeteksi perubahan tersebut dan memperbarui tampilan halaman secara otomatis tanpa perlu menjalankan ulang development server secara manual.

Fitur ini tentu akan sangat membantu ketika kita mulai membangun tampilan blog nantinya.

5. Menghentikan Development Server

Jika kalian sudah selesai melakukan pengembangan atau ingin menghentikan server sementara, caranya cukup sederhana.

Kembali ke terminal tempat development server berjalan, kemudian tekan kombinasi tombol:

Ctrl + C

Dengan begitu, development server akan berhenti dan alamat localhost:3000 tidak lagi bisa diakses sampai server dijalankan kembali.

Jika ingin melanjutkan development, kalian cukup menjalankan perintah:

npm run dev

6. Bagaimana Jika Port 3000 Sudah Digunakan?

Dalam beberapa kondisi, mungkin kalian akan menemukan pesan bahwa port 3000 sudah digunakan oleh aplikasi lain.

Tidak perlu khawatir, karena Next.js bisa menggunakan port alternatif.

Misalnya, jika port 3000 sedang digunakan, Next.js mungkin akan menjalankan aplikasi melalui port 3001.

Contohnya:

▲ Next.js
- Local: http://localhost:3001
✓ Ready

Jika mendapatkan kondisi seperti ini, kalian cukup membuka alamat yang ditampilkan oleh terminal.

Jadi, jangan selalu berasumsi bahwa project harus berjalan di port 3000. Ikuti saja alamat yang diberikan oleh Next.js.

Kesimpulan

Pada tahap ini kita sudah mempelajari cara menjalankan development server menggunakan Next.js.

Beberapa perintah yang perlu kalian ingat:

Perintah	Fungsi
npm run dev	Menjalankan development server
Ctrl + C	Menghentikan development server

Selain itu, kita juga sudah mengenal fitur Fast Refresh yang memungkinkan perubahan kode langsung terlihat di browser selama proses development.

Sampai di sini, persiapan awal project Next.js kita sudah selesai. Selanjutnya, kita akan mulai masuk ke tahap pengembangan website blog, dimulai dari mengenal dan membuat Routing menggunakan App Router.