Add Youtube like Progress Bar in Next.js Page Load

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