prochaine vue des transitions

transitions de la vue suivante

Utilisez l’API View Transitions dans Next.js App Router.

Démo .

Clause de non-responsabilité

Cette bibliothèque est destinée aux cas d'utilisation de base de View Transitions et Next.js App Router. Avec des applications et des cas d'utilisation plus complexes tels que le rendu simultané, Suspense et le streaming, de nouvelles primitives et API doivent encore être développées au cœur de React et Next.js à l'avenir (plus d'informations).

Installation

Utilisez votre gestionnaire de packages préféré pour installer le package next-view-transitions . Par exemple:

pnpm install next-view-transitions

Usage

Enveloppez votre contenu avec le composant dans le fichier de mise en page :

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

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

Ensuite, utilisez le composant pour les liens qui doivent déclencher une transition de vue :

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

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

Ou utilisez le hook useTransitionRouter pour la navigation par programmation :

 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 >
  )
}

C'est ça!

Licence

MIT.