ViewTransition

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

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

/** @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 デモをご覧ください。

このAPIが進化するにつれて、ドキュメントを更新し、さらに多くの例を共有していきます。しかし、現時点では、この機能を本番環境で使用することは強く推奨されません。