Cara Membuat Aplikasi Next JS dengan Mudah

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 […] The post Cara Membuat Aplikasi Next JS dengan Mudah appeared first on Niagahoster Blog.

Cara Membuat Aplikasi Next JS dengan Mudah
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)BrowserTerminal / CMDFake API, contoh https://jsonplaceholder.typicode.com/ Nah, setelah semua hal di atas sudah siap, saatnya memulai tutorial crud Next JS dengan langkah berikut: Mempersiapkan ProjectMembuat ProjectMelakukan Setup .envMembuat Halaman Article IndexMembuat Delete MethodMembuat Halaman Article CreateMembuat Halaman Article UpdateMelakukan 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 JSKemudian, 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 VariableMembuat Halaman IndexMembuat Delete MethodMembuat Halaman CreateMembuat Halaman UpdateMelakukan 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 managertLakukan compress directory menjadi zip dengan menyertakan node_modules didalamnyaLakukan upload ulang ke file managerJika 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.