Cara Membuat Loading Page di React JS menggunakan NextJS

Pernahkah kamu membuat project NEXTJS, dan sadar kalau pada saat kamu loncar dari halaman satu ke halaman yang lain, kamu tidak tau atau melihat adanya proses/loading di dalam website kamu? aneh bukan? tanpa progress loading semuanya menjadi seakan lebih lama dari pada biasanya, maka dari itu, kita wajib memberikan progress loading di dalam website kita, sehingga user yang lain dapat mengetahui berapa lama lagi dia dapat mengakses halaman tujuan dia, dan setidaknya pengalaman user tersebut di dalam website kita akan lebih baik, maka dari itu saya ingin mengenalkan NProgress, NProgress ini merupakan library yang di kembangkan oleh rstacruz, yang dimana library ini dapat menampilkan progress bar pada saat kita load halaman yang lain, nah yuk bareng-bareng belajar gimana caranya nampilin progress bar di website NEXTJS kita masing-masing

Pertama install NProgress,

kalian bisa install NProgress dengan menjalankan perintah dibawah ini di dalam cmd kalian, pastikan kalian sudah berada di dalam folder project kalian

npm install nprogress --atau-- yarn add nprogress

lalu buka project kalian, masuk ke file _app.js kalian, lalu tinggal copy paste kode program di bawah ini

import Router from 'next/router';
import NProgress from 'nprogress'; //nprogress module
import 'nprogress/nprogress.css'; //styles of nprogress//Binding events. 
Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done());

That's it! kalian sudah menambah progress bar di website kalian, kalian bisa uji coba dengan cara buka website kalian, lalu coba masuk dari satu halaman ke halaman yang lain

Gampang bukan?? hanya beberapa menit saja, kalian sudah dapat menambah UX di dalam website kalian, hal yang sangat penting dan sangat mudah untuk di implementasikan di dalam website kalian!