Prerequisites

• Next.js application with version 11 or higher

Getting started

Firstly, we must install the NProgress npm module

npm install nprogress

And its types

npm install --save-dev @types/nprogress

Usage

Importing styles

To use the module, open your _app.tsx file. We must import the required styles from nprogress.

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

import "nprogress/nprogress.css";

export default function MyApp({ Component, pageProps }) {
  return /* ... */
}

Router events

We'll add a useEffect in our component and add 2 handlers to handle routeChangeStart and routeChangeComplete. More info about router events.

import * as React from "react";
import Router from "next/router";
import NProgress from "nprogress"

export default function MyApp({ Component, pageProps }) {
  /* ... */
  React.useEffect(() => {
    const handleRouteStart = () => NProgress.start();
    const handleRouteDone = () => NProgress.done();

    Router.events.on("routeChangeStart", handleRouteStart);
    Router.events.on("routeChangeComplete", handleRouteDone);
    Router.events.on("routeChangeError", handleRouteDone);

    return () => {
      // Make sure to remove the event handler on unmount!
      Router.events.off("routeChangeStart", handleRouteStart);
      Router.events.off("routeChangeComplete", handleRouteDone);
      Router.events.off("routeChangeError", handleRouteDone);
    };
  }, []);
  /* ... */
};

Done

That's it! Start your dev server and see the changes!

Examples

Stackblitz example

GitHub example