vercel-react-view-transitions

Wrap page components in the React `<ViewTransition>` component and trigger navigation inside `startTransition`. Use `addTransitionType` to tag direction (e.g., nav-forward) and map types to CSS classes for enter and exit animations.

Enable `experimental.viewTransition` in next.config.js so `<Link>` navigations run inside startViewTransition. Use the `transitionTypes` prop on `<Link>` or `startTransition` with `addTransitionType` plus `router.push` for programmatic navigation.

ViewTransition is not in stable React, so non-Next.js apps need react@canary and react-dom@canary. Next.js App Router bundles React canary internally, so it works out of the box without installing canary packages.

Common causes include wrapping the ViewTransition inside a DOM node instead of placing it first, updating state outside startTransition, or placing the VT in a layout that persists across navigations. Nested VTs inside a parent VT also never fire their own enter/exit.

Give two ViewTransition components the same unique `name` 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 `share` takes precedence over enter/exit.

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 instead.