Why remove ViewTransition?

[HM-Suiji]

In Next.js, the previously experimental feature viewTransition has been disabled for some reason, and there is no mention of it on the official website. I believe this feature is very important, especially since the 16.3 documentation still includes content related to using viewTransition: https://nextjs.org/docs/app/guides/view-transitions. However, it seems that the feature has been turned off, making viewTransition merely a decorative element. Will it be re-enabled in a future version? What was the reason for completely disabling it at this point?

[icyJoseph]

That flag used to gate the availability of ViewTransition when imported from react. That's not needed anymore, because ViewTransition went from React-experimental to React-canary.

• Remove inert experimental.viewTransition flag #96098

Everything listed in the guide linked, https://nextjs.org/docs/app/guides/view-transitions, should work out of the box, without any configuration flags.

[paramjeetn]

In Next.js App Router, the experimental viewTransition configuration flag was paused/refactored because the underlying React core team introduced native first-class support for the View Transitions API in React 19 (<ViewTransition> / startTransition).

Current State & Recommended Approach:

Rather than relying on Next.js-specific experimental router flags, the modern standard is utilizing React 19's transition hooks or CSS native @view-transition rules:

'use client'

import { useTransition } from 'react'
import { useRouter } from 'next/navigation'

export function NavigationLink({ href, children }: { href: string; children: React.ReactNode }) {
  const router = useRouter()
  const [isPending, startTransition] = useTransition()

  const handleNavigate = () => {
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        startTransition(() => {
          router.push(href)
        })
      })
    } else {
      router.push(href)
    }
  }

  return (
    <a onClick={handleNavigate} className="cursor-pointer">
      {children}
    </a>
  )
}

Once React 19 <ViewTransition> stabilization lands in general availability, Next.js App Router will integrate it natively at the layout boundary without experimental flags.

[HM-Suiji]

That's true. All thank you.