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