How to Add Animated Page Transitions in Next.js Using Only the Browser API

The View Transitions API, available natively in modern browsers, lets developers animate DOM state changes by calling document.startViewTransition() without any external animation library. Same-document transitions landed in Chrome 111 in March 2023, with cross-document support following in Chrome 126 in June 2024, and Firefox and Safari have since adopted the same-document version. In a Next.js App Router project, smooth page transitions can be achieved by wrapping router.push inside document.startViewTransition, effectively making React's DOM update the transition callback. Individual elements can be animated independently by assigning a unique view-transition-name CSS property, enabling shared-element effects such as a thumbnail expanding into a hero image. A key gotcha is that duplicate view-transition-name values within a single snapshot will cause the browser to skip the transition entirely, so every name must remain unique.