Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara membuat RESTful API menggunakan Laravel. Dan pada kesempatan kali ini kita akan belajar membuat project baru di Next.js.
Apa itu Next.js ?
Next.js is an open-source web development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
Next.js merupakan framework dari React.js yang bersifat open source dan dibangun di atas Node.js. Next.js sangat populer karena kemudahannya dan mendukung beberapa fitur yang sangat bagus, seperti SSR and SSG, routing based file, zero config, fast refresh, TypeScript support, image optimization dan masih banyak lagi.
Kenapa Menggunakan Next.js ?
Yang pertama tentu kemudahannya, karena dengan menggunakan Next.js kita sudah tidak perlu melakukan konfigurasi secara manual untuk routing dan lain sebagainya.
Dan seperti yang kita tahu, ketika membangun aplikasi berbasis React.js, kita akan kesulitan dalam membuat aplikasi tersebut menjadi SEO friendly. Tapi dengan menggunakan Next.js kita akan lebih mudah, karena dukungan SSR yang build in di dalamnya.
Langkah 1 - Installasi Node.js
Sebelum kita membuat project baru menggunakan Next.js, maka kita perlu melakukan installasi Node.js terlebih dahulu di dalam komputer.
Silahkan lakukan installasi Node Js di komputer masing-masing, untuk link unduh Node Js bisa melalui berikut ini : https://nodejs.org/en/download/. SIlahkan di install sesuai dengan sistem operasi yang digunakan.
Untuk mengetahui apakah Node Js berhasil terinstall, kita bisa menjalankan perintah di bawah ini di dalam terminal/CMD :
node -v
Ketika kita menginstall Node Js maka secara otomatis NPM juga ikut terinstall, kita bisa mencoba melihatnya di :
npm -v
Langkah 2 - Membuat Project Baru di Next.js
Setelah berhasil melakukan installasi Node.js, sekarang kita akan lanjutkan belajar bagaimana cara membuat project baru di Next.js.
Silahkan masuk ke dalam folder dimana teman-teman akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD :
npx create-next-app@12.1.4 next-crud
Perintah di atas digunakan untuk membuat project Next.js baru dengan nama next-crud. Silahkan tunggu proses installasinya sampai selesai.
Langkah 3 - Menjalankan Project Next.js
Setelah berhasil melakukan proses installasi, sekarang kita akan belajar menjalankan project tersebut. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :
cd next-crud
Perintah di atas digunakan untuk melakukan navigasi ke dalam folder next-crud. Setelah itu, jalankan perintah berikut ini.
npm run dev
Silahkan tunggu proses compile sampai selesai dan project kita akan dijalankan di dalam localhost menggunakan port 3000.
Sampai disini pembahasan kita tentang bagaimana cara membuat project Next.js baru dan sekaligus belajar menjalankannya.
Di artikel selanjutnya kita akan belajar bagaimana cara melakukan installasi Bootstrap dan membuat layout beserta component untuk halaman aplikasi.
Terima kasih.