Menggunakan NProgress di Nextjs

Jika Anda sedang membangun aplikasi Next.js atau aplikasi Server-Side Rendering (SSR), akan terlihat keren jika ada bilah progress yang menunjukkan progress saat memuat halaman baru. Saat ini saya (Jan 2021) membangun boilerplate Next.js untuk aplikasi baru saya dan saya ingin menambahkan komponen progress bar karena jika saya tidak membuat komponen yang dapat dimodifikasi dengan mudah dengan melewatkan props, itu akan sia-sia karena Saya harus melakukan kembali semua pekerjaan untuk semua aplikasi baru saya.

Berikut cara membuat Progress Bar di Nextjs:

pertama kita install dulu package nprogress di project :

yarn add nprogress --save

Edit app.js

...
import "nprogress/nprogress.css";
import { Router } from 'next/router';
import nProgress from 'nprogress';

Router.events.on("routeChangeStart", nProgress.start);
Router.events.on("routeChangeError", nProgress.done);
Router.events.on("routeChangeComplete", nProgress.done);

export function App({ Component, pageProps })
...