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 pull request 及相關討論。

使用方式

啟用後，您可以從 React 中導入 ViewTransition 元件到應用程式中：

import { unstable_ViewTransition as ViewTransition } from 'react'

然而，目前文件和範例有限，您需要直接參考 React 的原始碼和討論才能理解其運作方式。

即時示範

查看我們的 Next.js View Transition 示範 以觀看此功能的實際效果。

隨著此 API 的演進，我們將更新文件並分享更多範例。但目前我們強烈建議不要在正式環境中使用此功能。