Next.js 16 View Transitions API 實戰:用原生轉場動畫打造絲滑頁面切換體驗
以前想在 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 做出語言切換的動畫效果。
小結
View Transitions API 是 Web 平台近年來最讓人興奮的新功能之一。Next.js 16 + React 19 的 <ViewTransition> 元件讓實作門檻降到最低——你不再需要引入任何第三方動畫 library,原生的解決方案已經夠好了。
建議從最簡單的 page-level crossfade 開始,體驗一下效果。然後再嘗試 shared element transitions(配對動畫),你會發現你的 Next.js 網站瞬間有了原生 App 的質感。
繼續閱讀
Next.js Turbopack 完整教學:Rust 驅動的打包工具設定與效能優化指南
相關文章
你可能也喜歡
探索其他領域的精選好文