Next.js View Transitions 頁面轉場動畫教學

以前想在 Next.js 裡做頁面切換動畫，你要不就用 Framer Motion 的 AnimatePresence，要不就自己手刻一套 transition 邏輯，兩種都不輕鬆。但現在 Next.js 16 原生支援了 View Transitions API，加上 React 19 的 <ViewTransition> 元件，只要幾行程式碼就能讓頁面切換像原生 App 一樣絲滑。

今天我要帶你從基礎概念到實戰應用，完整搞懂怎麼在 Next.js 裡用 View Transitions。

什麼是 View Transitions API？

View Transitions API 是瀏覽器原生的 API，讓你能在 DOM 更新的前後自動產生過渡動畫。它的核心機制是：

瀏覽器在 DOM 更新前截取一張「舊畫面」的截圖
DOM 更新完成後，截取一張「新畫面」
自動在兩張截圖之間做 crossfade 動畫
你可以用 CSS 自訂這個動畫效果

最棒的是，這一切都在瀏覽器層面處理，效能超好——因為是在合成器（compositor）層做的動畫，不會觸發 layout 或 paint。

在 Next.js 16 中啟用 View Transitions

首先，確保你的 next.config.js 有啟用實驗性功能：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
};

module.exports = nextConfig;

基本用法：React 的 ViewTransition 元件

React 19 提供了 <ViewTransition> 元件，它是 View Transitions API 的 React 封裝。在 Next.js 裡，你可以用它來包裹任何需要轉場動畫的內容：

import { ViewTransition } from 'react';

export default function Layout({ children }) {
  return (
    <div className="min-h-screen">
      <nav className="sticky top-0 bg-white shadow">
        {/* 導航列不需要轉場，保持固定 */}
      </nav>
      <ViewTransition name="page-content">
        <main className="container mx-auto py-8">
          {children}
        </main>
      </ViewTransition>
    </div>
  );
}

name 屬性很重要——它告訴瀏覽器哪些元素要做「配對動畫」。相同 name 的元素在頁面切換時會被自動配對，產生 morph 效果。

實戰：文章列表 → 文章詳情的轉場

來做一個最常見的場景：點擊卡片，卡片「展開」成文章頁面。

列表頁

// app/blog/page.tsx
import { ViewTransition } from 'react';
import Link from 'next/link';

export default function BlogList({ posts }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {posts.map((post) => (
        <Link href={`/blog/${post.slug}`} key={post.id}>
          <ViewTransition name={`post-image-${post.id}`}>
            <img
              src={post.cover}
              className="w-full aspect-video object-cover rounded-lg"
              alt={post.title}
            />
          </ViewTransition>
          <ViewTransition name={`post-title-${post.id}`}>
            <h2 className="text-xl font-bold mt-3">{post.title}</h2>
          </ViewTransition>
        </Link>
      ))}
    </div>
  );
}

詳情頁

// app/blog/[slug]/page.tsx
import { ViewTransition } from 'react';

export default function BlogPost({ post }) {
  return (
    <article>
      <ViewTransition name={`post-image-${post.id}`}>
        <img
          src={post.cover}
          className="w-full aspect-video object-cover rounded-xl"
          alt={post.title}
        />
      </ViewTransition>
      <ViewTransition name={`post-title-${post.id}`}>
        <h1 className="text-3xl font-bold mt-6">{post.title}</h1>
      </ViewTransition>
      <div className="prose mt-4">{post.content}</div>
    </article>
  );
}

因為列表頁和詳情頁的圖片和標題都用了相同的 name（post-image-{id} 和 post-title-{id}），瀏覽器會自動產生「圖片位移放大 + 標題移動」的動畫效果。完全不需要寫任何 CSS animation。

用 CSS 自訂轉場動畫

預設是 crossfade，但你可以用 CSS 自訂：

/* globals.css */
::view-transition-old(page-content) {
  animation: slide-out 0.3s ease-in forwards;
}

::view-transition-new(page-content) {
  animation: slide-in 0.3s ease-out forwards;
}

@keyframes slide-out {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
}

::view-transition-old 控制舊頁面的退出動畫，::view-transition-new 控制新頁面的進入動畫。你可以做 slide、scale、rotate——任何 CSS 能做到的動畫都行。

跟 Server Components 的搭配

View Transitions 跟 Next.js 的 Server Components 架構完美相容。因為轉場動畫是在瀏覽器端做的，不影響伺服器端的渲染流程。如果你之前有了解過React Server Components Streaming 效能優化，會知道 RSC 的 streaming 和 View Transitions 是互補的——RSC 讓內容更快到達，View Transitions 讓切換更流暢。

搭配Next.js cache 策略，頁面資料預載 + 轉場動畫的組合可以讓使用者幾乎感覺不到頁面在「載入」。

注意事項與最佳實踐

瀏覽器支援

View Transitions API 在 Chrome 111+ 和 Edge 111+ 已穩定支援。Safari 從 18.2 開始支援。Firefox 仍在開發中。建議做 progressive enhancement——不支援的瀏覽器直接正常切換，不影響功能。

效能考量

不要一次 transition 太多元素——每個 named transition 都需要截圖
大圖片的 morph 動畫可能會有效能問題，考慮限制動畫元素的大小
轉場期間避免觸發 heavy JavaScript，以免動畫卡頓

無障礙

記得加上 prefers-reduced-motion 的處理：

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

如果你對 Next.js 的其他進階功能有興趣，像是多語系 i18n 設定，也可以搭配 View Transitions 做出語言切換的動畫效果。