コンテンツにスキップ
設定next.config.jsviewTransition

viewTransition

この機能は現在実験的であり、変更される可能性があります。本番環境での使用は推奨されません。お試しいただき、GitHubでフィードバックをお寄せください。

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 固有のトランジションタイプはまだ実装されていません。

使用方法

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

import { ViewTransition } from 'react'

ライブデモ

ぜひ、Next.js View Transition デモ をご覧ください。

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