7a93093332
Changelog Updated dependencies Migrated to Typescript Use CSS from npm module Documentation / Examples Make sure the linting passes by running pnpm lint The examples guidelines are followed from our contributing doc
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import type { AppProps } from 'next/app'
|
|
import { useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import NProgress from 'nprogress'
|
|
import 'nprogress/nprogress.css'
|
|
|
|
export default function App({ Component, pageProps }: AppProps) {
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
const handleStart = (url: string) => {
|
|
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} />
|
|
</>
|
|
)
|
|
}
|