How to show a loading bar when changing routes in NextJS

loading bar on github route change

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

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} />
</>
)
}

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

--

--

--

Growth at Moni(YC W22) | Adebola.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

TDD with JavaScript Using Jest

How to add custom fonts manually in React Native app?

NativeScript Vue — Navigation and Modals

Material UI — Modals

Mainichi: A React and Redux Tale Pt. 2 — Redux

Calling Stored Procedure with NodeJS and MSSQL

Getting Started with AWS Lambda and Node.js

UI Development with Chakra UI Vue — Icons

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adebola Adeniran

Adebola Adeniran

Growth at Moni(YC W22) | Adebola.dev

More from Medium

A tale of SEO

How to submit a form on Netlify with React Final Form.

Website Clone, Using React.

React HOC