DEV Community

Adebola
Adebola

Posted on

How to show a loading bar when changing routes in NextJS

Nprogress

Setting up

I spent days trying to find the right thing to google on how to setup the blue loading bar that shows at the top of your screen when navigating between routes in NextJS. It's important to have this loading indicator to signify that a route change is occuring to avoid users assuming that the application has frozen.
This article assumes that you already have NextJS setup. To get started, we need to install the nprogress library.
Run

npm install nprogress
Enter fullscreen mode Exit fullscreen mode

In _app.js

Inside pages/_app.js, add the following piece of code.

import NProgress from "nprogress"
import Head from "next/head"
import Router from "next/router"

Router.onRouteChangeStart = url => {
  NProgress.start()
}

Router.onRouteChangeComplete = () => NProgress.done()

Router.onRouteChangeError = () => NProgress.done()

export default function MyApp() {
    return (
        <>
            <Head>
               <link
                rel="stylesheet"
                href="https://cdnjs.cloudflare.com/ajax/libs    /nprogress/0.2.0/nprogress.min.css"
          />
             </Head>
              <Component {pageProps} key={route} />
        </>
      )
}
Enter fullscreen mode Exit fullscreen mode

Above, we access the Router object available inside next/router to ensure. onRouteChangeStart i.e when a Route change is in progress, NProgress will run i.e NProgress.start. Once the route change is done i.e onRouteChangeComplete, we call the done method on NProgress. We call the same method if there's an error.
I had issues using the NProgress stylesheet from the nprogress package within my application and resorted to using the stylesheet they provide via their CDN. Without the stylesheet, you won't notice anything on the screen.
Now, when you navigate to any page within your application, you should see a blue loading bar at the top of your screen

Top comments (10)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
gyenabubakar profile image
Gyen Abubakar

Can you explain why we should use this instead?

Collapse
 
italodeandra profile image
Ítalo Andrade

You shouldn't. It actually doesn't really matter. I deleted the comment to avoid confusion.

Collapse
 
frulow profile image
Frulow

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

Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeError", () => () => NProgress.done());`

Collapse
 
farskid profile image
Farzad YZ

For the latest NextJS, you need to use Router.events.on.
More info: nextjs.org/docs/api-reference/next...

Collapse
 
alabius profile image
Sunday Alabi

How do i implement for page refresh and not changing route

Collapse
 
typicoul profile image
Luteya Coulston

I've been searching for this, nice article

Collapse
 
sunisstillhigh profile image
Daniel Ivanov

Good article. Short, simple and useful :)

Collapse
 
marcillien profile image
Marc Illien

Where is {route} coming from?

Collapse
 
theinfosecguy profile image
Keshav Malik

Really great article :)