Loading Screen on next js page transition

Question

I am trying to implement a loading screen when changing routes in my Nextjs app ,for example /home -> /about.

My current implementation is as follows. I am setting the

Answer 1

New Update with NProgress:

import Router from 'next/router'
import Link from 'next/link'
import Head from 'next/head'
import NProgress from 'nprogress'

Router.events.on('routeChangeStart', (url) => {
  console.log(`Loading: ${url}`)
  NProgress.start()
})
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())

export default function App({ Component, pageProps }) {
  return (
    <>
      
        {/* Import CSS for nprogress */}
        
      
      
    
  )
}

If you use Tailwind CSS, copy the code from here: https://unpkg.com/nprogress@0.2.0/nprogress.css and paste the code into your global CSS file.

if you want to disable the spinner add the below code in your _app.tsx/jsx file and remove the spinner styles from CSS.

NProgress.configure({ showSpinner: false });

Source Links:

• https://github.com/rstacruz/nprogress
• https://nextjs.org/docs/api-reference/next/router