vercel-react-view-transitions

Wrap page components in the React ViewTransition component and trigger navigation inside startTransition. Use addTransitionType to tag direction (nav-forward or nav-back) and map types to CSS classes for directional slide animations.

Give two ViewTransition components the same name prop on the source and target views, with one unmounting and one mounting in the same transition. Names must be globally unique, so use IDs like photo-${id}.

Yes, the Next.js App Router bundles React canary internally, so ViewTransition works out of the box. Enable experimental.viewTransition in next.config.js to animate Link navigations, and use the transitionTypes prop on next/link in Next.js 15 canary or 16+.

Common causes are wrapping the ViewTransition inside a DOM node instead of placing it first, updating state outside startTransition, or nesting page VTs inside a layout VT. Also check that default="none" is not blocking the trigger you want.

router.back() and browser back/forward buttons fire synchronous popstate events, which are incompatible with startViewTransition. Use router.push() with an explicit URL inside startTransition instead.

In Next.js, no — the App Router already bundles React canary internally. Outside Next.js, you must install react@canary and react-dom@canary because ViewTransition is not yet in stable React.