0
180
VistasCargador de página en nextjs
¿Cómo puedo crear una página de carga entre transiciones en la misma aplicación web usando Next JS?
En este momento, en el entorno de desarrollo, las páginas tienen una transición normal, lo que significa que el CSS se aplica correctamente en cada página. El problema comienza al construir la aplicación al entorno de producción, por ejemplo, cuando hago clic en un botón que tiene un componente de enlace a otra página, aparece así durante 1 o 2 segundos:
Después de 1 o 2 segundos se procesa en consecuencia: 
Perdón por la pregunta vaga, pero no sé por dónde empezar a buscar para resolver este problema y supongo que se solucionará con dos posibles soluciones:
- Una página de carga entre las transiciones en las páginas.
- Haciendo algo en _app.js o _document.js, pero ahora mismo no sé cómo empezar a buscar aquí.
2 Respuestas
Responde la pregunta0
Debe importar el enlace del siguiente js para resolver el problema de renderizado, si desea hacer una pantalla de carga, puede usar ganchos, por ejemplo:
import {useState, useEffect} from 'react'; import Router from 'next/router'; function MyApp() { const [loading, setLoading] = useState(false); useEffect(() => { Router.events.on('routeChangeStart', () => setLoading(true)); Router.events.on('routeChangeComplete', () => setLoading(false)); Router.events.on('routeChangeError', () => setLoading(false)); return () => { Router.events.off('routeChangeStart', () => setLoading(true)); Router.events.off('routeChangeComplete', () => setLoading(false)); Router.events.off('routeChangeError', () => setLoading(false)); }; }, [Router.events]); return ( <> { (loading) ? <p>Loading...</p> : <p>Home</p> } </> ); }0
Al abordar este problema, hay dos maneras de pensar en él.
- Las entradas/salidas de páginas individuales (aparición/desaparición gradual) pueden tener animación aplicada, esto realmente significa que esos componentes pueden aplicar una transición basada en CSS a medida que se montan las rutas y la transición se aplica al elemento principal (contenedor de nivel de página)
- Los elementos individuales se pueden animar a medida que se desmontan.
Tanto para el n. ° 1 como para el n .
Estos dos enfoques se basan en las ideas anteriores.
- Si está de acuerdo con agregar Framer: https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion
- Con la transición de la página siguiente, que se enfoca más en el grupo de transición de reacción https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions