01View Transitions API

View Transitions API

RecommendedNativePerformant#next-view-transitions

Native browser API for page transition animations. Zero JavaScript for the animations themselves — everything is handled by the browser through CSS keyframes and GPU acceleration. The most performant and future-proof solution.

Quick Start

📦npm install next-view-transitions
🔧Wrap layout with <ViewTransitions>
🔗Use Link from next-view-transitions
🎨Customize with CSS ::view-transition-* pseudo-elements

Installation

Terminal

1npm install next-view-transitions

Layout Setup

app/layout.tsx

1import { ViewTransitions } from 'next-view-transitions'
2
3export default function Layout({ children }: { children: React.ReactNode }) {
4  return <ViewTransitions>{children}</ViewTransitions>
5}

Using Links

app/page.tsx

1'use client'
2
3import { Link } from 'next-view-transitions'
4
5export default function Page() {
6  return (
7    <div>
8      <h1>Home Page</h1>
9      <Link href="/about">Go to About</Link>
10    </div>
11  )
12}

Try Page A Try Page B