vercel-react-view-transitions

Wrap page components in the React `<ViewTransition>` component and trigger navigation inside `startTransition`. Use `enter` and `exit` props with CSS classes targeting `::view-transition-old` and `::view-transition-new` pseudo-elements to control the animation.

Enable `experimental.viewTransition` in next.config.js so `<Link>` navigations run inside `document.startViewTransition`. Add `transitionTypes` on `<Link>` for directional animations, and place type-keyed `<ViewTransition>` wrappers in page components, not layouts.

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

Common causes are wrapping the `<ViewTransition>` inside a DOM node instead of placing it first, updating state outside `startTransition`, or nesting it inside a parent VT in a layout. Nested VTs never fire enter/exit inside a parent VT.

Give two `<ViewTransition>` components the same unique `name` on the source and target views, with one unmounting and the other mounting in the same transition. Use the `share` prop with a morph CSS class to control the animation.

`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` with `addTransitionType('nav-back')` instead.