transisi tampilan berikutnya

transisi tampilan berikutnya

Gunakan Lihat API Transisi di Router Aplikasi Next.js.

Demo .

Penafian

Pustaka ini ditujukan untuk kasus penggunaan dasar View Transitions dan Next.js App Router. Dengan aplikasi dan kasus penggunaan yang lebih kompleks seperti rendering bersamaan, Suspense, dan streaming, primitif dan API baru masih perlu dikembangkan menjadi inti React dan Next.js di masa mendatang (selengkapnya).

Instalasi

Gunakan manajer paket favorit Anda untuk menginstal paket next-view-transitions . Misalnya:

pnpm install next-view-transitions

Penggunaan

Bungkus konten Anda dengan komponen di dalam file layout:

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

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

Kemudian, gunakan komponen untuk link yang perlu memicu transisi tampilan:

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

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

Atau gunakan kait useTransitionRouter untuk navigasi terprogram:

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

Itu saja!

Lisensi

MIT.