nächste Ansicht Übergänge

Next-View-Übergänge

Verwenden Sie die View Transitions-API im Next.js App Router.

Demo .

Haftungsausschluss

Diese Bibliothek ist auf grundlegende Anwendungsfälle von View Transitions und Next.js App Router ausgerichtet. Bei komplexeren Anwendungen und Anwendungsfällen wie gleichzeitigem Rendering, Suspense und Streaming müssen in Zukunft noch neue Grundelemente und APIs zum Kern von React und Next.js entwickelt werden (mehr).

Installation

Verwenden Sie Ihren bevorzugten Paketmanager, um das Paket next-view-transitions zu installieren. Zum Beispiel:

pnpm install next-view-transitions

Verwendung

Wickeln Sie Ihren Inhalt mit der -Komponente in die Layoutdatei ein:

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

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

Verwenden Sie dann die -Komponente für Links, die einen Ansichtsübergang auslösen müssen:

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

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

Oder verwenden Sie den useTransitionRouter Hook für die programmatische Navigation:

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

Das ist es!

Lizenz

MIT.