次のビューの遷移

次のビューの遷移

Next.js App Router で View Transitions API を使用します。

デモ。

免責事項

このライブラリは、View Transitions と Next.js App Router の基本的な使用例を対象としています。同時レンダリング、サスペンス、ストリーミングなどのより複雑なアプリケーションやユースケースでは、今後も新しいプリミティブと API を React と Next.js のコアとして開発する必要があります (詳細)。

インストール

お気に入りのパッケージ マネージャーを使用して、 next-view-transitionsパッケージをインストールします。例えば：

pnpm install next-view-transitions

使用法

レイアウト ファイル内のコンポーネントでコンテンツをラップします。

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

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

次に、ビューの遷移をトリガーする必要があるリンクにコンポーネントを使用します。

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

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

または、プログラムによるナビゲーションにuseTransitionRouterフックを使用します。

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

それでおしまい！

ライセンス

マサチューセッツ工科大学