Next JS adalah framework frontend berbasis React dengan banyak fitur yang memudahkan developer untuk membuat website atau aplikasi. Berbeda dengan React, Next.JS menggunakan konsep SSR (Server Side Rendering) yang cukup penting untuk kebutuhan tertentu, seperti SEO.
Lalu, bagaimana cara membuat aplikasi Next JS yang bagus?
Tutorial Aplikasi JS Berikutnya
Sebelum memulai cara membuat aplikasi Next JS, berikut adalah persiapan yang harus Anda lakukan, yaitu:
- Pastikan Node.JS diinstal:
- Pastikan npm package installer juga sudah terinstall
- Visual Studio Code (atau editor favorit Anda lainnya)
- Peramban
- Terminal / CMD
- API palsu, contoh https://jsonplaceholder.typicode.com/
Nah, setelah semua hal di atas sudah siap, saatnya untuk memulai tutorial Crud JS Berikutnya dengan langkah-langkah berikut:
- Mempersiapkan Proyek
- Membuat Proyek
- Melakukan Pengaturan .env
- Membuat Halaman Indeks Artikel
- Membuat Metode Hapus
- Membuat Halaman Artikel Buat
- Membuat Halaman Pembaruan Artikel
- Melakukan penyebaran proyek
Yuk simak langkah-langkahnya satu per satu!
1. Persiapan Proyek
Langkah pertama cara membuat aplikasi Next JS adalah menyiapkan projectnya.
Pertama. buka terminal / cmd, lalu arahkan ke direktori / folder tempat proyek JS Berikutnya disimpan
Kemudian, ketik perintah npx create-next-app untuk memulai template proyek dasar 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.
halaman depan js berikutnya
Buka editor Anda dan lihat struktur direktori proyek JS Berikutnya
struktur direktori js berikutnya
Buat halaman baru di direktori yang disebut artikel. Di Next JS sudah ada React Router, jadi ketika Anda ingin membuat halaman baru, secara default tidak perlu memulai perutean, cukup tambahkan halaman baru di direktori halaman.
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 (Variabel Lingkungan)
Langkah selanjutnya dalam tutorial aplikasi JS Berikutnya adalah membuat proyek dengan terlebih dahulu mengatur variabel lingkungan.
Sekarang, karena proyek ini menggunakan integrasi API dengan https://jsonplaceholder.typicode.com/ yang merupakan API Palsu, data yang ada tidak dapat dimanipulasi secara nyata. Misalnya saat menghapus suatu data, akan ada respon jika data tersebut dihapus, namun sebenarnya tidak benar-benar terhapus.
Dengan begitu, kita hanya akan mensimulasikan bagaimana request dan response API di Next.JS nantinya.
Secara default Next.JS dapat membaca variabel lingkungan, yang harus Anda lakukan adalah membuat 2 file berikut:
- .env.local – lingkungan selama pengembangan
- .env.production.local – lingkungan saat proses produksi
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. Buat Halaman Indeks Artikel
Langkah selanjutnya dari tutorial crud JS selanjutnya adalah membuat halaman indeks artikel. Jika Anda mengikuti langkah sebelumnya, di direktori pages akan ada file index.js.
Sekarang kita buat tampilan sederhana berupa tabel yang berisi data dari JSON Placeholder seperti ini:
data json placeholder tentang proses cara membuat aplikasi js berikutnya
Untuk mengambil data dari Placeholder JSON, gunakan getStaticProps dari Next.JS selama rendering.
Axios akan membuat permintaan http ke endpoint https://jsonplaceholder.typicode.com/posts untuk mendapatkan sumber daya atau data dari postingan, atau artikel. process.env.API_ENDPOINT akan mengambil nilai variabel lingkungan yang telah disetel sebelumnya.
Hasilnya akan diubah menjadi prop sehingga dapat digunakan untuk mengulang dan mengisi isi tabel.
Perhatikan pada baris L21, di sini props dapat diakses dari fungsi render dan dimasukkan ke dalam status lokal bernama article. Setelah itu, kita dapat mengulang konten dalam artikel status ke dalam tabel L67.
4. Buat Metode Hapus
Setelah membuat halaman indeks artikel, langkah selanjutnya dalam panduan mentah JS Berikutnya adalah membuat metode penghapusan. Hal termudah untuk dilakukan setelah berhasil mengambil data adalah membuat fungsi hapus.
langkah pertama hapus untuk cara membuat aplikasi js selanjutnya
Kami mencoba mengaktifkan tombol hapus yang ada di setiap artikel.
Pada dasarnya, setiap tombol akan dipicu oleh acara klik. Misalnya seperti pada contoh ini L76. Ketika tombol diklik akan memicu metode/fungsi bernama deleteArticle(), dan masing-masing akan mengirimkan ID sebagai parameter untuk setiap artikel.
Sebelumnya, kami menambahkan status lokal di baris L22 yang dapat digunakan sebagai UX sederhana saat memuat permintaan HTTP. Berikut ini contoh ketika Anda mengklik tombol hapus
- konfirmasi hapus
- opsi menu hapus
- Jika respons API berhasil dan tanpa kesalahan, catatan akan dihapus.
Setelah dihapus, informasi yang dihapus akan muncul
Namun karena menggunakan Fake API, maka saat direfresh, data ID 1 akan muncul kembali.
5. Buat Artikel Buat Halaman Halaman
Di direktori pages, sudah ada file create.js saat mengikuti langkah sebelumnya. File ini akan digunakan sebagai formulir untuk mensimulasikan penambahan data melalui JSON Placeholder di Next.JS.
Ini adalah langkah selanjutnya cara membuat aplikasi Next JS dan seperti inilah tampilannya:
Untuk daftar User ID isi manual L50, karena tujuannya untuk menambah data. Tetapi jika Anda ingin menggunakan data pengambilan untuk ID Pengguna itu, Anda dapat menggunakan metode yang sama seperti di Indeks Artikel.
Menambahkan data/sumber daya akan ditangani dengan metode yang disebut submitArticle, yang dipicu saat formulir dikirimkan.
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 respon tersebut terlihat bahwa simulasi penambahan data pada JSON Placeholder telah berhasil dilakukan. Untuk memastikannya, periksa log permintaan HTTP melalui informasi jaringan di browser.
Seperti terlihat, tampak proses pending yang artinya request sedang berlangsung. Dan, berikut ini respon saat dinyatakan berhasil.
Dari informasi diatas terlihat bahwa payload yang dikirim dan respon yang diterima adalah sama. Jadi, bisa dikatakan penambahan data/sumber daya baru telah berhasil.
6. Buat Halaman Pembaruan Artikel
Selanjutnya, dalam tutorial Crud JS Berikutnya, Anda perlu membuat halaman artikel pembaruan. Untuk membuatnya, akan ada perbedaan, pada penamaan filenya.
Umumnya, saat memperbarui data, diperlukan parameter ID unik, seperti http://localhost:3000/articles/2.
Angka 2 di URI adalah parameter jalur ID unik untuk sumber daya atau data. Agar dapat menangani parameter dinamis ini, nama file di Next.JS disertakan dalam contoh kurung siku [updateId].js.
Nah, untuk pembuatan halaman tidak jauh berbeda dengan panduan Article Create, jadi kita tinggal copy paste saja seperti ini:
Kami akan mencoba mengambil detail resource berdasarkan unique ID yang dikirim di uri. Dalam Next.JS istilah ini sering disebut dynamic rautin.
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:
Itu karena Next.JS belum dapat mengenali rute dinamis apa pun yang ada di rute/halaman ini. Itulah bagian terpenting saat melakukan update resource/data yang merupakan implementasi dari dynamic route Next.JS.
Proses selanjutnya dalam mengupdate data ini sama dengan proses create yaitu input/formulir, submit, handle submit dan membuat request HTTP ke JSON Placeholder.
7. Melakukan Deployment
Setelah berhasil membangun aplikasi CRUD sederhana dengan simulasi Fake API, langkah selanjutnya adalah men-deploy/menjalankan proyek ini ke hosting.
Untuk itu pastikan Anda sudah memiliki akun hosting yang sudah memiliki Node.JS Selector.
Pertama, upload file project nextjs-articles ke file manager di dalam cpanel. Ada dua cara untuk melakukan ini: manual dan kloning dari GIT. Dalam panduan ini, kita akan menggunakan metode pertama.
Untuk mulai mengunggah file, kompres direktori nextjs-articles menjadi file .zip tetapi pastikan direktori node_modules tidak disertakan. Setelah itu buka file manager cpanel dan pilih upload.
pilih file yang akan diupload di cpanel
Setelah file berhasil diupload, ekstrak file tersebut.
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 formulir yang diperlukan, seperti ini, lalu klik BUAT.
buat simpul aplikasi js
Setelah proses selesai, klik RUN NPM INSTALL untuk menginstal node_modules ke dalam direktori aplikasi dan lakukan RESTART.
Coba akses domain Anda dengan tampilan seperti contoh berikut:
- hasil halaman indeks proyek js berikutnya
- Buat hasil tampilan proyek
- hasil halaman pembaruan proyek js berikutnya
- crud next js tutorial update tampilan hasil
- Voila, aplikasi Next.JS telah berhasil dibuat dan dijalankan di Niagahoster Cloud Hosting.
Kesimpulan
Anda telah mempelajari cara membangun aplikasi Next JS dan menyebarkannya ke hosting. Cukup mudah, bukan?
Setelah mempersiapkan untuk membuat sebuah proyek, langkah-langkah yang perlu Anda lakukan adalah:
- Menyiapkan Variabel Lingkungan
- Membuat Halaman Indeks
- Membuat Metode Hapus
- Membuat Halaman Buat
- Membuat Halaman Pembaruan
- Melakukan penyebaran
- Jika Anda mengikuti langkah-langkahnya dengan tepat, Anda akan berhasil membuat aplikasi yang bagus.
Namun, jika sesuatu tidak berhasil, coba yang berikut ini:
- Gunakan perintah npm run build di direktori proyek sebelum mengunggah ke pengelola file
- Kompres direktori ke zip dengan memasukkan node_modules di dalamnya
- Unggah ulang ke pengelola file
- Jika memungkinkan lakukan pengaturan ulang di Aplikasi Node.js.
Baca juga : Mari Kenali Jenis Jenis Layanan Hosting
Jika Anda pebisnis yang menjual produk/jasa apapun dan ingin meningkatkan penjualan bisnis, maka Anda perlu memiliki situs website toko online untuk mempromosikan produk. Anda dapat membuat website toko online di Jasa Pembuatan Website Toko Online Profesional. Dengan bantuan dari jasa pembuatan website akan membatu anda untuk mewujudkan situs website yang di dambakan.
Terimakasih dan semoga bermanfaat… Salam sukses untuk kita semua ?
