vercel-react-view-transitions

Wrap each page component in a type-keyed ViewTransition and tag navigations with transitionTypes on next/link or addTransitionType inside startTransition. Place the boundary in page components, not layouts, since layouts persist across navigations and never fire enter/exit.

Give two ViewTransition boundaries the same name prop on the source and target views; when one unmounts and the other mounts in the same transition, they morph. Names must be globally unique, and the target must be rendered at navigation time for the pair to form.

No. The Next.js App Router bundles React canary internally, so ViewTransition works out of the box without installing react@canary. Outside Next.js, you must install react@canary and react-dom@canary since ViewTransition is not in stable React.

Common causes include default="none" without an explicit share prop, type-keyed animations where the navigation never adds the type, and wrapping ViewTransition inside a DOM node which suppresses enter/exit. Only startTransition, useDeferredValue, or Suspense activate transitions; regular setState does not.

View transitions work in Chromium 125+, Firefox 144+, and Safari 18.2+. React requires the v2 object form of startViewTransition. Unsupported browsers skip animations gracefully, so the app remains fully functional without them.

Flicker happens when the same element renders in both the fallback and the content, causing it to fade against itself. Fix it by rendering that element outside the Suspense boundary or pinning it with a unique view-transition-name.