Iman Sugirman

Iman Sugirman

Fullstack Developer, Software Engineer, Frontend Developer berpengalaman selama lebih dari 6 tahun
Laravel
Nodejs
Docker
Nextjs
React
Mongodb

Menggunakan NProgress di Nextjs

24 Februari 2022
Menggunakan NProgress di Nextjs
Cloud Server Untuk Nextjs
Dapatkan Gratis $200 Untuk Deploy Nextjs Sekarang
Deploy Now

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 }) ...
Cloud Server Untuk Nextjs
Dapatkan Gratis $200 Untuk Deploy Nextjs Sekarang
Deploy Now