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