View Transitions in Next.js: How I Added Animated Page Changes Without a Library

Short summary

A practical guide to using the browser's View Transitions API in a Next.js App Router app to animate page changes without any animation library. The author covers document.startViewTransition(), assigning unique view-transition-name values for shared-element effects, wrapping router.push for client navigations, and the experimental React <ViewTransition> component. The main gotcha: duplicate view-transition-name values cause the browser to skip the transition.

• •View Transitions API cross-fades or morphs between two DOM states via document.startViewTransition()
• •In Next.js, wrap router.push or use experimental.viewTransition for client-side animated navigations
• •Each view-transition-name must be unique per snapshot or the browser silently skips that transition

Generated with AI, which can make mistakes.