NEXT.js as your Web Development Framework (Bahasa Indonesia) - Introduction

Akhir-akhir ini, Next.js menjadi web development framework yang cukup powerful bagi Javascript Developer. Cara kerja Next.js meng-compile kode javascript yang akan dioptimasi menjadi sebuah file yang siap di-deploy dan diakses oleh user, memungkinkan aplikasi kita dapat diakses sangat cepat dengan infrastruktur CDN dan Edge.

Next.js sendiri adalah sebuah React Framework dimana kita dapat mengembangkan sebuah web aplikasi berbasis React dengan beberapa fitur yang dapat mengoptimasi aplikasi lebih baik dibandingkan React Application biasa. Point utama kenapa saya tertarik menggunakan Next.js yaitu dia mampu memperbaiki salah satu kekurangan dari React Application, yaitu Page Rendering.

Diantara fitur-fitur lainnya di Next.js, solusi Page Rendering menjadi hal yang paling penting jika ingin mengembangkan aplikasi yang SEO friendly. Selain fitur ini, hal lain yang saya suka yaitu Next.js merupakan Full-stack Framework, sehingga saya tidak perlu pusing menggunakan berbagai framework berbeda untuk mengembangkan aplikasi. Cukup satu framework saja, saya bisa mengelola FrontEnd sekaligus Backend secara bersamaan.

Seri ini, saya akan berusaha membahas all you need to know untuk memulai menggunakan Next.js sebagai web development framework untuk aplikasi kalian selanjutnya. Beberapa hal yang akan saya bahas akan meliputi atau tidak terbatas pada:

Create Next Application

Page-based routing system with dynamic routes support

Next Pre-Rendering

Next data fetching

Next API Routes

Many more...

Before we begin, ada baiknya kalian sudah setidaknya paham atau lebih baik mahir secara teknikal dengan bebera stack programming:

Walaupun kalian bisa menggunakan framework lain sebagai backendnya (PHP, Golang, Python), tapi pada series ini, kita akan menggunakan nodejs sebagai backend utama. Lagipula, Next.js menggunakan nodejs secara default

Hingga saat ini (Next 12), kita bisa install next app dengan command:

command ini akan menginstall package next application dengan sebuah template awal yang disediakan pada folder next-starter yang akan menjadi folder kerja kita. Jika berhasil, kita bisa lihat tampilan awal folder kerja kita sebagai berikut:

then, untuk memeriksa apakah aplikasi telah ter-install dengan baik, kita jalankan server next dengan command npm run dev (development mode)

Secara default server akan berjalan pada port 3000, sehingga jika kita akses http://localhost:3000, maka kita bisa melihat halaman index dari aplikasi kita.

Kalian telah menginstall next application di mesin kalian dan secara teknis aplikasi sudah dapat digunakan dan siap di-deploy ke server kalian masing-masing.

next part, kita akan bahas lebih detail lagi tentang struktur file dan folder yang berlaku di Next.js yang akan berhubungan dengan bagaimana cara kerja Next.js sebagai web development framework.