DocumentationShowcaseBlog
ConfigNext Config Js

ViewTransition

Enable ViewTransition API from React in App Router

viewTransition is an experimental flag that enables the new experimental View Transitions API in React. This API allows you to leverage the native View Transitions browser API to create seamless transitions between UI states.

To enable this feature, you need to set the viewTransition property to true in your next.config.js file.

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
}
 
module.exports = nextConfig

Important Notice: This feature is not developed or maintained by the Next.js team — it is an experimental API from the React team. It is still in early stages and not recommended for production use. The implementation is still being iterated on, and its behavior may change in future React releases. Enabling this feature requires understanding the experimental nature of the API. To fully grasp its behavior, refer to the React pull request and related discussions.

Usage

Once enabled, you can import the ViewTransition component from React in your application:

import { unstable_ViewTransition as ViewTransition } from 'react'

However, documentation and examples are currently limited, and you will need to refer directly to React’s source code and discussions to understand how this works.

Live Demo

Check out our Next.js View Transition Demo to see this feature in action.

As this API evolves, we will update our documentation and share more examples. However, for now, we strongly advise against using this feature in production.

Previous

UseLightningcss

Next

Webpack

On this page