Iman Sugirman

Fullstack Developer Experience 6 years, using Laravel and ReactJs

Menggunakan NProgress di Nextjs

24 Februari 2022
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 }) ...