Skip to content
Configurationnext.config.jsViewTransition

ViewTransition

This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.

viewTransition is an experimental feature that a feature flag to enable the new experimental View Transitions API with React. This new API allows you to leverage the View Transition browser API to create seamless transitions.

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

Note: This feature is highly experimental and may change in future releases.

Usage

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

import { unstable_ViewTransition as ViewTransition } from 'react'

For more details on how to use this feature, refer to the original View Transitions pull request in the React repository. This feature builds upon the native browser implementation of View Transitions.

Live Demo

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

We will continue to expand our documentation and examples as this API evolves.