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() );
Introducción a Next.JS
¿Dónde aprender Next.js actualizado?
¿Qué es Next.JS?
Creando nuestra primera página
Styled JSX
Server Side Rendering
Aprende qué es Server Side Rendering
Intro a getInitialProps
Utilizando el componente Link
Recibiendo Parámetros
Performance de Get Initial Props
Vista de Podcasts
Componentes Reutilizables
Creando componentes en React
Reorganizar la vista de podcasts
Navegación Avanzada
Gestionando Errores
Personalizando errores
¿Cómo diseñar URLs?
Configurando Next Routes
Implementando Next Routes
Vistas HÃbridas
Implementar el Modal
Agregando un loader
Publicando nuestra app
Mejores prácticas en Github
Publicar la app con now
Conclusiones del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 5
Preguntas 1
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() );
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>
);
};
Router.onRouteChangeStart = (url) => {
NProgress.start()
}
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()
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 🙃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?