27 de junio, 2021 - 2 min
Posiblemente hayas notado que algunas veces, al usar Nextjs, la navegación entre página y página no es inmediata. Esto es debido a que Nextjs se toma un tiempo para descargar la data que la página destino necesita, y por ello es necesario implementar un Loader que indique al usuario que la transición se está llevando acabo. Para ello podemos usar el paquete NProgress. Estos snippets muestran como integrarlo con Nextjs.
Instala nprogress
yarn add nprogress @types/nprogress
Implementa los event-listeners necesarios en _app.tsx
import * as React from 'react'; import NProgress from 'nprogress'; import { useRouter } from 'next/router'; // pages/_app.tsx function MyApp({ Component, pageProps }) { const router = useRouter(); React.useEffect(() => { const handleStart = () => { 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 <Component {...pageProps} /> } export default MyApp
Agregamos algunas reglas de css para personalizar la barra y loader de nprogress
/* globals.css */ /* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: rgba(167, 139, 250, 0.8); position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 4px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px rgba(167, 139, 250, 0.8), 0 0 5px rgba(167, 139, 250, 0.8); opacity: 1; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: rgba(167, 139, 250, 0.8); border-left-color: rgba(167, 139, 250, 0.8); border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Listo! Eso sería todo. Este sitio web tiene exactamente el mismo código de arriba, si navegas de página en página podrá notar una pequeña barra de carga en la parte superior.
¡Gracias por leer!