Next.js add top progress bar fetch and router events using NProgress

Here are the steps to show the top progress bar like Youtube.

First, install nprogress package using the below command

npm install nprogress

Then create components/TopProgressBar.js and add the following code

import Router from "next/router";
import NProgress from "nprogress";

let timer;
let state;
let activeRequests = 0;
const delay = 5;

const load = () => {
  if (state === "loading") {
    return;
  }

  state = "loading";

  timer = setTimeout(function () {
    NProgress.start();
  }, delay);
}

const stop = () => {
  if (activeRequests > 0) {
    return;
  }

  state = "stop";

  clearTimeout(timer);
  NProgress.done();
}

Router.events.on("routeChangeStart", load);
Router.events.on("routeChangeComplete", stop);
Router.events.on("routeChangeError", stop);

const originalFetch = window.fetch;
window.fetch = async function (...args) {
  if (activeRequests === 0) {
    load();
  }

  activeRequests++;

  try {
    const response = await originalFetch(...args);
    return response;
  } catch (error) {
    return Promise.reject(error);
  } finally {
    activeRequests -= 1;
    if (activeRequests === 0) {
      stop();
    }
  }
};

export default function () {
  return null;
}

Finally, add this component to _app.js

import "nprogress/nprogress.css";

const TopProgressBar = dynamic(() => {
    return import("components/TopProgressBar");
}, { ssr: false });

export default function MyApp({ Component, pageProps }) {
    return <>
        <TopProgressBar />
        <Component {...pageProps} />
    </>
}

That's it. It will show the top progress bar automatically.