ViewTransition

viewTransitionは、Reactで新しい実験的なView Transitions APIを有効にするための実験的なフラグです。このAPIを使用すると、ネイティブのView TransitionsブラウザAPIを活用して、UI状態間のシームレスな遷移を作成できます。

この機能を有効にするには、next.config.jsファイルでviewTransitionプロパティをtrueに設定する必要があります。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
}

module.exports = nextConfig

重要なお知らせ: この機能はNext.jsチームによって開発または保守されているものではなく、Reactチームによる実験的なAPIです。まだ初期段階であり、本番環境での使用は推奨されません。実装はまだ進行中であり、将来のReactリリースでその動作が変更される可能性があります。 この機能を有効にするには、APIの実験的な性質を理解する必要があります。その動作を完全に把握するには、Reactのプルリクエストおよび関連する議論を参照してください。

使用方法

一度有効にすると、アプリケーション内でReactからViewTransitionコンポーネントをインポートできます:

import { unstable_ViewTransition as ViewTransition } from 'react'

しかし、現在のところドキュメントや例は限られており、これがどのように機能するかを理解するためには、Reactのソースコードや議論を直接参照する必要があります。

ライブデモ

この機能が実際にどのように動作するかを確認するには、Next.js View Transition Demoをご覧ください。

このAPIが進化するにつれて、ドキュメントを更新し、より多くの例を共有する予定です。しかし、現時点では、この機能を本番環境で使用することは強くお勧めしません。