text: import { useEffect } from 'react'
  import Link from 'next/link'
  import { useRouter } from 'next/router'
  import NProgress from 'nprogress'
  import '../public/nprogress.css'
  
  export default function App({ Component, pageProps }) {
    const router = useRouter()
  
    useEffect(() => {
      const handleStart = (url) => {
        console.log(`Loading: ${url}`)
        NProgress.start()
      }
      const handleStop = () => {
        NProgress.done()
      }
  
      router.events.on('routeChangeStart', handleStart)
      router.events.on('routeChangeComplete', handleStop)
      router.events.on('routeChangeError', handleStop)
  
      return () => {
        router.events.off('routeChangeStart', handleStart)
        router.events.off('routeChangeComplete', handleStop)
        router.events.off('routeChangeError', handleStop)
      }
    }, [router])
  
    return (
      <>
        <nav>
          <style jsx>{`
            a {
              margin: 0 10px 0 0;
            }
          `}</style>
          <Link href="/">
            <a>Home</a>
          </Link>
          <Link href="/about">
            <a>About</a>
          </Link>
          <Link href="/forever">
            <a>Forever</a>
          </Link>
          <a href="/non-existing">Non Existing Page</a>
        </nav>
        <Component {...pageProps} />
      </>
    )
  }
  