How to show a loading bar when changing routes in NextJS

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