vercel-react-view-transitions

Wrap page components in the React ViewTransition component and trigger updates inside startTransition, useDeferredValue, or Suspense. Control the animation with enter, exit, and share props mapped to CSS classes targeting ::view-transition-old and ::view-transition-new pseudo-elements.

Enable experimental.viewTransition in next.config.js so Link navigations run inside startViewTransition, then use the transitionTypes prop on next/link to tag direction. Wrap each page component, not the layout, in a type-keyed ViewTransition.

Yes, but you must install react@canary and react-dom@canary because ViewTransition is not in stable React. In Next.js the App Router already bundles React canary internally, so no extra install is needed.

The ViewTransition must appear before any DOM nodes in its parent, and the state update must be inside startTransition. Also check that no parent ViewTransition wraps it, since nested VTs never fire enter/exit inside an exiting parent.

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

Give ViewTransition components on both the source and target views the same globally unique name, such as photo-${id}, and set share="morph". When one unmounts and the other mounts in the same transition, the element morphs between views.