Using NProgress with Next.js

September 08, 2021

2 min read



  • 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


Importing styles

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

Custom app

If you do not have an _app file yet, you can copy this template below. This example comes from Next.js' docs.

Open template
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();"routeChangeStart", handleRouteStart);"routeChangeComplete", handleRouteDone);"routeChangeError", handleRouteDone);

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


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