Hook to use NProgress in a Next.js application

use-nprogress.js

import { useRef, useEffect } from "react";
import NProgress from "nprogress";
import Router from "next/router";

function useNProgress(showAfterMs = 300, options = {}) {
  const timer = useRef(null);

  function routeChangeStart() {
    const { showAfterMs } = this.props;
    clearTimeout(timer.current);
    timer.current = setTimeout(NProgress.start, showAfterMs);
  }

  function routeChangeEnd() {
    clearTimeout(timer.current);
    NProgress.done();
  }

  useEffect(() => {
    if (options) {
      NProgress.configure(options);
    }

    Router.events.on("routeChangeStart", this.routeChangeStart);
    Router.events.on("routeChangeComplete", this.routeChangeEnd);
    Router.events.on("routeChangeError", this.routeChangeEnd);

    return () => {
      Router.events.off("routeChangeStart", this.routeChangeStart);
      Router.events.off("routeChangeComplete", this.routeChangeEnd);
      Router.events.off("routeChangeError", this.routeChangeEnd);
    }
  }, [showAfterMs, options]);
}

export default useNProgess;