Agregando un loader
Clase 20 de 23 • Curso de Next.js 2018
Contenido del curso
Sergio Alejandro Trejo Cuxim
student•
hace 7 años
Noel Zenon Callapiña Angles
student•
hace 6 años
Clase 20 de 23 • Curso de Next.js 2018
Contenido del curso
Sergio Alejandro Trejo Cuxim
Noel Zenon Callapiña Angles
Sergio Toshio Minei
Ivan Trujillo
Raúl F. Bautista Gómez
Fabián andres Pedraza Borhorquez
William Velázquez
William Velázquez
William Velázquez
Pablo Tabares Hernandez
Diego Guevara
Diego Forero
Diego Guevara
Carlos Arboleda
Esta es la versión actualizada para Next.js V9
Router.events.on('routeChangeStart', () => NProgress.start() ); Router.events.on('routeChangeComplete', () => NProgress.done() ); Router.events.on('routeChangeError', () => NProgress.done() );
Muchas Gracias!! tu tip me ayudó!!!
Loaders
Se va a usar nprogress para mostrar un loader al cargar las páginas.
$ npm add nprogress
Para usarlo, se debe agregar las siguientes líneas de código al inicio del componente princioan o Layout:
import NProgress from 'nprogress'; import Router from 'next/router'; Router.onRouteChangeStart = (url) => { NProgress.start() } Router.onRouteChangeComplete = () => NProgress.done() Router.onRouteChangeError = () => NProgress.done()
Además se debe de agregar la hoja de estilos de nprogress a los estilos globales del proyecto.
Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.
Custom Hook con el loading del curso:
import * as React from "react"; import { useRouter } from "next/router"; import NProgress from "nprogress"; export const useLoading = () => { const router = useRouter(); React.useEffect(() => { const handleStart = () => NProgress.start(); const handleComplete = () => NProgress.done(); router.events.on("routeChangeStart", handleStart); router.events.on("routeChangeComplete", handleComplete); router.events.on("routeChangeError", handleComplete); return () => { router.events.off("routeChangeStart", handleStart); router.events.off("routeChangeComplete", handleComplete); router.events.off("routeChangeError", handleComplete); }; }); };
Luego lo importan en Layout y lo ejecutan:
import Link from "next/link"; import Head from "next/head"; import { useLoading } from "../hooks/useLoading"; export const Layout = ({ children, title, }: { children: React.ReactChild | React.ReactChild[]; title: string; }) => { useLoading(); return ( <div className=" flex flex-col h-screen w-screen "> <Head> <title>{title}</title> <meta name="viewport" content="width=device-width, initial-scale=1" ></meta> </Head> <header className="bg-purple-900 p-4 text-white text-center"> <Link href="/"> <a>Podcasts</a> </Link> </header> <div className="flex flex-col flex-1 items-center overflow-auto"> {children} </div> </div> ); };
Aquí encontraran el CSS del ejemplo
Gracias
Hoja de estilos de nprogress 😃
Ejemplo with-loading the next.js
😄
Enlace a NProgress.js
😃
Router.onRouteChangeStart = (url) => { NProgress.start() } Router.onRouteChangeComplete = () => NProgress.done() Router.onRouteChangeError = () => NProgress.done()
Hola, como se debe importar en Nextjs una CSS desde un archivo externo?
Puedes usar este plugin
Gracias!
Por si quieren crear su propio Loading component…
import { useRouter } from 'next/router'; const Loading = () => { const router = useRouter(); const [ loading, setLoading ] = React.useState(''); React.useEffect(() => { const handleStart = (url) => url !== router.pathname && setLoading(true); const handleComplete = (url) => url !== router.pathname && setLoading(false); router.events.on('routeChangeStart', handleStart); router.events.on('routeChangeComplete', handleComplete); router.events.on('routeChangeError', handleComplete); return () => { router.events.off('routeChangeStart', handleStart); router.events.off('routeChangeComplete', handleComplete); router.events.off('routeChangeError', handleComplete); }; }); return loading && <div>Loading...</div>; }; export default Loading;
Despues solo importenlo en Layout 🙃