Suryadi Kurniawan Suryadi is a digital content writer at Niagahoster. He keeps on pursuing opportunities to engage with more people through articles about WordPress, Internet Marketing and other IT-related issues. During his free time, he enjoys playing Clash Royale a lot.

Cara Membuat Aplikasi Next JS dengan Mudah

5 min read

[FI] Apa itu Next js

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:
cara membuat aplikasi next js dengan pengecekan status node js sudah terpasang
  • Pastikan npm package installer juga sudah terinstall
tutorial crud next js dengan melakukan pengecekan npm installer

Nah, setelah semua hal di atas sudah siap, saatnya memulai tutorial crud Next JS dengan langkah berikut:

  1. Mempersiapkan Project
  2. Membuat Project
  3. Melakukan Setup .env
  4. Membuat Halaman Article Index
  5. Membuat Delete Method
  6. Membuat Halaman Article Create
  7. Membuat Halaman Article Update
  8. 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.

cara membuat aplikasi next js dengan create next app

Perintah tersebut akan membuka semua command console untuk mengkonfirmasi inisiasi Next JS base project.

cara membuat aplikasi next js dengan mendownload 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.

cara membuat aplikasi next js dengan mendownload base project next js

Jangan lupa, pastikan setelah proses di atas muncul informasi yang menunjukkan inisiasi project berhasil:

informasi bahwa 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.

cara membuat aplikasi next js dengan perintah npm run dev

Buka browser Anda, dan akses http://localhost:3000 sebagai entry point dari Next JS

tampilan depan next js

Bukalah editor Anda dan perhatikan struktur project direktori dari Next JS

struktur direktori 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.

tutorial aplikasi next.js dengan inisiasi routing

Hasilnya bisa langsung diakses

halaman index

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:

contoh lain page injdex.js
halaman create

Sebelum memulai membuat aplikasi, install satu aplikasi yang akan digunakan untuk melakukan HTTP request. Anda bisa menggunakan axios atau fetch untuk HTTP request native.

cara membuat aplikasi next js dengan perintah axios

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
dua file default next js

Masukkan value pada masing masing file tersebut

tutorial aplikasi next.js dengan memasukkan value di jsonplace holder

Lalu hubungkan (binding) value API_ENDPOINT pada environment variable ke next.config.js supaya Next.JS dapat mengenali API_ENDPOINT ini ketika proses render.

module export pada tutorial aplikasi next.js

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:

data json placeholder pada proses cara membuat aplikasi next js

Untuk melakukan fetch data dari JSON Placeholder, gunakanlah getStaticProps dari Next.JS selama rendering berlangsung.

penggunaan getstaticprops pada cara membuat aplikasi next js

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. 

langkah awal delete untuk cara membuat aplikasi next js

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.

delete article pada salah satu langkah cara membuat aplikasi next js

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

konfirmasi delete
pilihan delete

Jika respon API berhasil dan tanpa error, maka record akan terhapus.

setelah menghapus, maka akan muncul informasi deleted

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:

tampilan awal create pada cara membuat aplikasi next js

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.

perintah submitarticle sebagai langkah dalam cara membuat aplikasi next js

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

submit form pada cara membuat aplikasi next js

Hasilnya akan tampak sebagai berikut:

hasil dari submit form di langkah create article cara membuat aplikasi next js
halaman ketika mengisikan create article cara membuat aplikasi next js

Dari response terlihat simulasi penambahan data ke JSON Placeholder berhasil dilakukan. Untuk memastikannya, cek HTTP request log melalui network information di browser.

proses pending create article cara membuat aplikasi next js

Seperti terlihat, tampak proses pending yang artinya request sedang berlangsung. Dan, berikut ini respon saat dinyatakan berhasil.

respon saat request URL
tampilan saat request payload network
status proses create app

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:

tampilan update dengan cara copy paste

Kami akan mencoba mengambil detail resource berdasarkan unique ID yang dikirim di uri. Dalam Next.JS istilah ini sering disebut Dynamic Routing.

export asyng pada unique ID

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:

tampilan error saat proses tutorial crud next js

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.

memilih file yang akan diupload di cpanel

Setelah file berhasil terupload, extract file.

melakukan ekstrak file di cpanel

Selanjutnya, masuk ke  halaman utama cPanel dan pilih Setup Node.js App.

memilih menu setup node js di cpanel

Kemudian, klik CREATE APPLICATION untuk membuat deployment Next JS.

tampilan create application node js di cpanel

Setelah itu, isi beberapa form yang dibutuhkan, seperti ini, lalu click  CREATE.

create application node js

Setelah proses selesai, klik RUN NPM INSTALL untuk menginstall node_modules ke dalam directory aplikasi dan lakukan RESTART

melakukan run install npm

Coba akses domain Anda dengan tampilan seperti contoh berikut:

hasil halaman index project next js
hasil tampilan create project
hasil tampilan update tutorial crud next js

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:

  1. Melakukan Setup Environtment Variable
  2. Membuat Halaman Index
  3. Membuat Delete Method
  4. Membuat Halaman Create
  5. Membuat Halaman Update
  6. 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!

Suryadi Kurniawan Suryadi is a digital content writer at Niagahoster. He keeps on pursuing opportunities to engage with more people through articles about WordPress, Internet Marketing and other IT-related issues. During his free time, he enjoys playing Clash Royale a lot.

Leave a Reply

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