transiciones de vista siguiente

transiciones de siguiente vista

Utilice la API View Transitions en Next.js App Router.

Demostración .

Descargo de responsabilidad

Esta biblioteca está dirigida a casos de uso básicos de View Transitions y Next.js App Router. Con aplicaciones y casos de uso más complejos, como renderizado concurrente, suspenso y streaming, aún es necesario desarrollar nuevas primitivas y API en el núcleo de React y Next.js en el futuro (más).

Instalación

Utilice su administrador de paquetes favorito para instalar el paquete next-view-transitions . Por ejemplo:

pnpm install next-view-transitions

Uso

Envuelva su contenido con el componente dentro del archivo de diseño:

 import { ViewTransitions } from 'next-view-transitions'

export default function Layout ( { children } ) {
  return (
    < ViewTransitions >
      < html lang = 'en' >
        < body >
          { children }
        < / body >
      < / html >
    < / ViewTransitions >
  )
}

Luego, use el componente para los enlaces que necesitan activar una transición de vista:

 import { Link } from 'next-view-transitions'

export default function Component ( ) {
  return (
    < div >
      < Link href = '/about' > Go to /about < / Link >
    < / div >
  )
}

O utilice el gancho useTransitionRouter para navegación programática:

 import { useTransitionRouter } from 'next-view-transitions'

export default function Component ( ) {
  const router = useTransitionRouter ( )

  return (
    < div >
      < button onClick = { ( ) => {
        // All Next.js router methods are supported
        router . push ( '/about' )
      } } > Go to /about < / button >
    < / div >
  )
}

¡Eso es todo!

Licencia

MIT.