1import { useRouter } from 'next/compat/router'; 2import nprogress from 'nprogress'; 3import { useEffect } from 'react'; 4 5/** 6 * Set up nprogress using NextJS Router events. 7 * This hook listens to these three events: 8 * - routeChangeStart → start 9 * - routeChangeComplete → done 10 * - routeChangeError → done 11 */ 12export function useNProgress() { 13 const router = useRouter(); 14 15 useEffect(function didMount() { 16 router?.events.on('routeChangeStart', nprogress.start); 17 router?.events.on('routeChangeComplete', nprogress.done); 18 router?.events.on('routeChangeError', nprogress.done); 19 20 return function didUnmount() { 21 router?.events.off('routeChangeStart', nprogress.start); 22 router?.events.off('routeChangeComplete', nprogress.done); 23 router?.events.off('routeChangeError', nprogress.done); 24 }; 25 }, []); 26} 27