A highly popular package for adding progress bars to JavaScript apps is NProgress.
We can simply add a progress bar on page loads by attaching listeners to Next’s router routeChangeStart and routeChangeComplete events.
First off, we have to install this package.
npm install --save nprogress
Then, we can use nprogress in _app.js file and attach it to our router events.
// _app.jsx
import NProgress from "nprogress";
import Router from "next/router";
import { useEffect } from "react";
const App = ({ Component, pageProps }) => {
useEffect(() => {
Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());
}, []);
return <Component {...pageProps} />;
};
Advanced usage easing and speed
Adjust animation settings of the progress bar using easing (a CSS easing string) and speed (in ms). (default: ease and 200)
Add below line above useEffect function inside _app.js file
javascriptNProgress.configure({ easing: 'ease', speed: 500 });
Also Read :
Add Placeholder Image in NextJs
Top comments (0)