Next JS adalah framework frontend berbasis React dengan banyak fitur yang memudahkan developer membuat website atau aplikasi. Berbeda dengan React, Next.JS menggunakan konsep SSR (Server Side Rendering) yang cukup penting untuk kebutuhan tertentu, misalnya SEO.
Lalu, bagaimana cara membuat aplikasi Next JS dengan baik?
Anda sudah menemukan artikel yang tepat. Melalui tutorial aplikasi Next JS berikut, Anda akan belajar membuat sebuah aplikasi sederhana menggunakan Next.JS yang terintegrasi dengan `Fake API` seperti https://jsonplaceholder.typicode.com/.
Selanjutnya, aplikasi tersebut akan dideploy di Cloud Hosting Niagahoster. Di hosting? Memangnya bisa? Buktikan bersama, yuk!
Tutorial Aplikasi Next JS
Sebelum memulai cara membuat aplikasi Next JS, inilah persiapan yang harus Anda lakukan, yaitu:
- Pastikan Node.JS sudah terinstall:
- Pastikan npm package installer juga sudah terinstall
- Visual Studio Code (atau editor lain favorit Anda)
- Browser
- Terminal / CMD
- Fake API, contoh https://jsonplaceholder.typicode.com/
Nah, setelah semua hal di atas sudah siap, saatnya memulai tutorial crud Next JS dengan langkah berikut:
- Mempersiapkan Project
- Membuat Project
- Melakukan Setup .env
- Membuat Halaman Article Index
- Membuat Delete Method
- Membuat Halaman Article Create
- Membuat Halaman Article Update
- Melakukan deploy project
Mari simak langkahnya satu-persatu!
1. Persiapan Project
Langkah pertama dalam cara membuat aplikasi Next JS adalah melakukan persiapan project.
Pertama-tama. buka terminal / cmd, lalu arahkan ke direktori / folder tempat menyimpan project Next JS
Kemudian, ketikkan perintah npx create-next-app untuk memulai base project template dari Next JS.
Perintah tersebut akan membuka semua command console untuk mengkonfirmasi inisiasi Next JS base project.
Selanjutnya, masukkan nama project, bebas dengan nama apapun. Di sini, kami menggunakan nama nextjs-articles. Selanjutnya, npm akan melanjutkan proses inisiasi dan mulai mendownload base project Next JS.
Jangan lupa, pastikan setelah proses di atas muncul informasi yang menunjukkan inisiasi project berhasil:
Jika menemukan error, coba pahami apa errornya atau lakukan ulang perintah inisiasinya.
Kemudian, gunakan perintah cd nextjs-articles untuk masuk ke dalam console project. Setelah itu, ketikkan perintah npm run dev untuk menjalankan projectnya.
Buka browser Anda, dan akses http://localhost:3000 sebagai entry point dari Next JS
Bukalah editor Anda dan perhatikan struktur project direktori dari Next JS
Buatlah page baru di dalam direktori bernama articles. Di dalam Next JS sudah terdapat React Router, maka ketika ingin membuat halaman baru, secara default tidak perlu melakukan inisiasi routing, cukup menambahkan halaman baru di dalam direktori pages.
Hasilnya bisa langsung diakses
Cara kerjanya sama dengan page serving oleh web server. Jika Anda membuat nama page index.js maka tidak perlu dipanggil http://localhost:3000/index index akan selalu menjadi page utama dari direktori tersebut. Contoh lain seperti ini:
Sebelum memulai membuat aplikasi, install satu aplikasi yang akan digunakan untuk melakukan HTTP request. Anda bisa menggunakan axios atau fetch untuk HTTP request native.
2. Setup .env (Environment Variable)
Langkah selanjutnya dalam tutorial aplikasi Next JS adalah membuat project dengan melakukan setup environment variable terlebih dahulu.
Nah, karena project ini menggunakan integrasi API dengan https://jsonplaceholder.typicode.com/ yang merupakan Fake API, maka data yang ada tidak bisa dimanipulasi secara nyata. Misalnya, ketika menghapus sebuah data, akan ada respon kalau data terhapus, tapi sebenarnya tidak benar-benar terhapus.
Dengan begitu, kami hanya akan mensimulasikan bagaimana request dan response API di Next.JS.
Secara default Next.JS sudah mampu membaca environment variable, yang harus Anda lakukan adalah membuat 2 file berikut :
- .env.local – environment selama proses development
- .env.production.local – environment ketika proses production
Masukkan value pada masing masing file tersebut
Lalu hubungkan (binding) value API_ENDPOINT pada environment variable ke next.config.js supaya Next.JS dapat mengenali API_ENDPOINT ini ketika proses render.
3. Membuat Halaman Article Index
Langkah tutorial crud Next JS berikutnya adalah membuat halaman article index. Kalau mengikuti mengikuti langkah sebelumnya, di direktori pages akan terdapat file index.js.
Nah, kami membuat tampilan sederhana berupa tabel yang berisi data dari JSON Placeholder seperti ini:
Untuk melakukan fetch data dari JSON Placeholder, gunakanlah getStaticProps dari Next.JS selama rendering berlangsung.
Axios akan melakukan http request ke endpoint https://jsonplaceholder.typicode.com/posts untuk mendapatkan resources atau data dari posts, atau articles. process.env.API_ENDPOINT akan mengambil value dari environment variable yang sudah disetup sebelumnya.
Hasilnya akan dijadikan sebuah props sehingga bisa digunakan untuk melakukan looping dan mengisi konten dari tabel.
Perhatikan pada baris L21, di sini props dapat diakses dari render function dan dimasukkan ke dalam local state bernama articles. Setelah itu, kami bisa melakukan looping konten di dalam state articles ke dalam tabel L67.
4. Membuat Delete Method
Setelah membuat halaman article index, langkah dalam panduan crud Next JS berikutnya adalah membuat delete method. Hal paling mudah dikerjakan setelah berhasil melakukan data fetching adalah membuat fungsi hapus.
Kami mencoba memfungsikan tombol hapus yang ada di setiap artikel.
Pada dasarnya, setiap tombol akan di trigger oleh sebuah event click. Contohnya seperti pada contoh ini L76. Ketika tombol diklik akan mentrigger method/function bernama deleteArticle(), dan masing masing akan mengirim ID sebagai parameter untuk setiap article.
Sebelumnya, telah ditambahkan local state di baris L22 yang dapat digunakan sebagai UX sederhana ketika loading HTTP request berlangsung. Inilah contoh ketika Anda klik tombol delete
Jika respon API berhasil dan tanpa error, maka record akan terhapus.
Namun, karena menggunakan Fake API, maka ketika melakukan refresh, data ID 1 akan muncul kembali.
5. Membuat Halaman Article Create
Dalam direktori pages, sudah ada file create.js ketika mengikuti langkah sebelumnya. File ini akan dijadikan form untuk mensimulasi penambahan data melalui JSON Placeholder dalam Next.JS.
Inilah langkah berikutnya dalam cara membuat aplikasi Next JS dan berikut ini tampilannya:
Untuk daftar User ID, isikan manual L50, karena objektifnya adalah di penambahan datanya. Tapi jika Anda ingin menggunakan fetch data juga untuk User ID tersebut bisa menggunakan cara seperti pada Article Index.
Dalam melakukan penambahan data/resource akan dihandle oleh sebuah method bernama submitArticle, yang di trigger ketika form submit.
Sebelum melakukan submit form, tiap value yang dimasukkan di inputan, akan disimpan ke dalam local state, yang eventnya bisa Anda lihat di line L58 dan L62
Hasilnya akan tampak sebagai berikut:
Dari response terlihat simulasi penambahan data ke JSON Placeholder berhasil dilakukan. Untuk memastikannya, cek HTTP request log melalui network information di browser.
Seperti terlihat, tampak proses pending yang artinya request sedang berlangsung. Dan, berikut ini respon saat dinyatakan berhasil.
Dari informasi di atas, tampak juga payload dikirim dan response yang diterima hasilnya sama. Jadi, bisa dianggap penambahan data/resource baru telah berhasil.
6. Membuat Halaman Article Update
Selanjutnya, di dalam tutorial crud Next JS, Anda perlu membuat halaman artikel update. Untuk membuatnya, akan ada perbedaan, pada penamaan filenya.
Umumnya, ketika melakukan update data, diperlukan parameter unique ID, seperti http://localhost:3000/articles/2.
Angka 2 pada URI tersebut merupakan path parameter unique ID untuk sebuah resource atau data. Supaya bisa menghandle parameter dinamis tersebut, penamaan file pada Next.JS disertai dalam square bracket contoh [updateId].js.
Nah, untuk pembuatan halamannya tidak jauh berbeda dengan panduan Article Create, jadi kami melakukan copy paste saja seperti berikut ini:
Kami akan mencoba mengambil detail resource berdasarkan unique ID yang dikirim di uri. Dalam Next.JS istilah ini sering disebut Dynamic Routing.
Seperti terlihat, terdapat penggunakan method getStaticPaths yang digunakan untuk melakukan listing dynamic route parameter yang boleh digunakan dalam Next.JS. Jika tidak dilakukan, maka yang akan terjadi adalah informasi error sebagai berikut:
Hal itu karena Next.JS belum dapat mengenali dynamic route apa saja yang ada di dalam route/halaman ini. Itulah bagian paling penting ketika membuat update resource/data yang merupakan penerapan dynamic route Next.JS.
Untuk proses selanjutnya dalam update data ini sama dengan proses create, yaitu melakukan input/form, submit, handle submit dan melakukan HTTP request ke JSON Placeholder.
7. Melakukan Deployment
Setelah berhasil membangun aplikasi CRUD sederhana dengan simulasi Fake API, langkah berikutnya adalah mendeploy/menjalankan project ini ke dalam hosting.
Untuk itu pastikan Anda sudah memiliki akun hosting yang sudah mempunyai Node.JS Selector. Di panduan ini, kami menggunakan Cloud Hosting Niagahoster.
Pertama, upload file project nextjs-articles ke file manager di dalam cpanel. Ada dua cara untuk melakukan ini, yaitu: manual dan clone dari GIT. Di panduan ini, kami akan menggunakan cara pertama.
Untuk mulai melakukan upload file, lakukan compress directory nextjs-articles menjadi sebuah .zip file tapi pastikan directory node_modules tidak diikutkan. Setelah itu, bukalah file manager cpanel dan pilih upload.
Setelah file berhasil terupload, extract file.
Selanjutnya, masuk ke halaman utama cPanel dan pilih Setup Node.js App.
Kemudian, klik CREATE APPLICATION untuk membuat deployment Next JS.
Setelah itu, isi beberapa form yang dibutuhkan, seperti ini, lalu click CREATE.
Setelah proses selesai, klik RUN NPM INSTALL untuk menginstall node_modules ke dalam directory aplikasi dan lakukan RESTART
Coba akses domain Anda dengan tampilan seperti contoh berikut:
Voila, aplikasi Next.JS berhasil dibuat dan diijalankan di Cloud Hosting Niagahoster.
Kesimpulan
Anda sudah belajar bagaimana cara membuat aplikasi Next JS dan melakukan deploy ke hosting. Cukup mudah, bukan?
Setelah melakukan persiapan untuk melakukan pembuatan project, langkah yang perlu Anda lakukan adalah:
- Melakukan Setup Environtment Variable
- Membuat Halaman Index
- Membuat Delete Method
- Membuat Halaman Create
- Membuat Halaman Update
- Melakukan Deployment
Jika mengikuti langkahnya dengan tepat, Anda akan berhasil membuat aplikasi dengan baik. Namun, kalau ada yang tidak berhasil, coba lakukan cara berikut:
- Gunakan perintan npm run build di directory project sebelum melakukan upload ke file managert
- Lakukan compress directory menjadi zip dengan menyertakan node_modules didalamnya
- Lakukan upload ulang ke file manager
- Jika memungkinkan lakukan setup ulang di Node.js App
Demikianlah panduan tutorial CRUD Next JS. Semoga informasi ini bermanfaat dan selamat mencoba!
The post Cara Membuat Aplikasi Next JS dengan Mudah appeared first on Niagahoster Blog.
source https://www.niagahoster.co.id/blog/cara-membuat-aplikasi-nextjs/
