Next.js View Transitions

Expert guidance on view transitions in Next.js — shared element morphs, Suspense reveals, directional navigation, crossfades, and CSS animations.

@doc-version: 16.2.6

Core Concepts

View Transitions ใช้ browser's View Transitions API ผ่าน React <ViewTransition> component:

• Shared element morph — same element animates between routes
• Suspense reveal — skeleton → content with animation
• Directional slide — forward/back navigation direction
• Crossfade — content swap within same route

Setup

// next.config.ts
import type { NextConfig } from 'next'