Adding View Transitions to a Next.js App

Next.js view transitions work by wrapping the content that changes between two routes in React's ViewTransition component, so the browser animates between the old and new version instead of swapping them instantly on navigation.

App.tsx

// app/blog/[slug]/page.tsx
import { ViewTransition } from "react";
 
export default function BlogPost({ title }: { title: string }) {
  return (
    <ViewTransition name="post-title">
      <h1>{title}</h1>
    </ViewTransition>
  );
}

Navigate from a list of posts to this page, and if the list also wraps its own title in a ViewTransition with the same name, the browser animates the title smoothly from its position in the list to its position on the post page instead of just replacing it outright.

Why no install step is needed

The App Router already runs on a React version that includes ViewTransition, so importing it directly from react works without adding a separate package or an experimental flag to the project's configuration. The component itself is still considered part of React's newer feature set, so treat it as evolving rather than as settled API surface, even though it works today with no setup and no separate opt-in step for a project already running on the App Router.

What actually needs to match

Both the outgoing and incoming element need the same name value for the browser to treat them as one continuous element to animate between. Without a matching name on both sides, the content just changes the normal way, with no animation at all, since the browser has nothing to connect the two elements across the navigation.

Different animations for different navigations

Pass transitionTypes to a Link to tell a ViewTransition which kind of navigation just happened, such as moving forward through a list versus going back.

App.tsx

// app/nav.tsx
import Link from "next/link";
 
export default function PostLink({ slug }: { slug: string }) {
  return <Link href={`/blog/${slug}`} transitionTypes={["nav-forward"]}>Read post</Link>;
}

A view transition further down the tree can check for "nav-forward" and apply a different animation than it would for a back navigation, without the link itself needing any extra logic beyond this one prop. This is what lets a list-to-detail navigation feel different from a detail-to-list return, using the same underlying component on both routes.

For how a click reaches the new route before any animation runs, see Client-Side Navigation in Next.js: What Happens on a Link Click. For the rest of the props a link accepts alongside transitionTypes, read The Next.js Link Component: Props and Behavior Explained.