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. The App Router bundles React canary internally, so ViewTransition works without installing react@canary.

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.

In Next.js App Router, no — React canary is bundled internally and ViewTransition works out of the box. Outside Next.js, you must install react@canary and react-dom@canary because ViewTransition is not in stable React.

Common causes: the state update is not inside startTransition, default="none" suppresses the trigger without an explicit prop, or a type-keyed animation never receives its transition type. router.back() and browser back buttons carry no transition types, so typed animations resolve to their default.

React's ViewTransition needs Chromium 125+, Firefox 144+, or Safari 18.2+, since it relies on the v2 object form of startViewTransition. Unsupported browsers skip animations gracefully, so no fallback code is required.

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