Memulai menggunakan Next.js

Di sini tidak dikupas pembahasan apa itu Next.js. Dengan harapan rekan-rekan sudah baca-baca mengenai Framework Reactjs yang satu ini.
Saat ini yang akan dikupas mengenai bagaimana caranya pertama kali akan memulai menggunakan Next.js.

Jika dilihat di halaman https://nextjs.org/docs/getting-started syarat yang harus dipenuhi adalah :

  • Instalasi Node.JS 14.6.0 atau yang paling baru nya
  • OS : WIndows, Linux atau Mac
  • Kalau di Windows, saya biasanya install GIT SCM untuk memudahkan penggunaan Git Versioning di Windows. Untuk cara-caranya bisa dilihat disini

Jika hal di atas sudah terpenuhi, berikut langkah-langkah yang biasa saya lakukan (rekan-rekan lainnya mungkin punya kebiasaan yang lain) :

Langkah 1 : Membuat Folder

Siapkan sebuah folder yang nantinya akan menyimpan project-project atau aplikasi yang akan dibangun. Kali ini saya membuat sebuah folder Tutorial.

Langkah 2 : Menggunakan perintah create-next-app

Masuk ke folder Tutorial yang sudah disiapkan di atas

Jalankan perintah berikut

npx create-next-app@latest --js

Nanti akan muncul pertanyaan-pertanyaan seperti di bawah ini :

Isikan nama project nya (secara otomatis akan buat folder dengan nama project tersebut)

Untuk Opsi lainnya sementara kita “ENTER” saja

Memulai menggunakan Next.js

Jika sudah selesai, biasanya saya jalankan editor Visual Code dengan cara click kanan folder project tersebut, lalu pilih Open with Code

Open With Code

Jalankan Terminal

Jalankan Terminal

Jalankan perintah di bawah ini pada terminal

npm run dev

sehinga nanti muncul

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 5.8s (170 modules)

Silahkan jalankan browser, lalu akses ke http://localhost:3000 sehingga muncul seperti berikut

Next.js aplikasi
Dengan munculnya halaman di atas artinya Anda telah berhasil membuat Aplikasi sederhana dengan menampilkan Landing Page.

1 thought on “Memulai menggunakan Next.js”

  1. Pingback: Pengaturan Path di Next.js - Stelselmatig

Leave a Comment

Your email address will not be published. Required fields are marked *