How to show a loading bar when changing routes in NextJS

Image for post
Image for post
loading bar on github route change

Setting Up

npm install nprogress

In \_app.js

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

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