Menu

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

注意：<ViewTransition> コンポーネントは、React の Canary リリースチャネルで既に利用可能です。 experimental.viewTransition は、Next.js 機能との深い統合を有効にするためにのみ必要です。例えば、ナビゲーション用に自動的に Transition タイプを追加する場合などです。Next.js 固有のトランジションタイプはまだ実装されていません。

使用方法

アプリケーションで React から <ViewTransition> コンポーネントをインポートできます：

import { ViewTransition } from 'react'

ライブデモ

この機能の動作を確認するには、Next.js View Transition Demo をご確認ください。

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