viewTransition

viewTransition is an experimental flag that enables the newView 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 theviewTransition property totrue in yournext.config.js file.

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

Important Notice: The<ViewTransition> Component is already available in React's Canary release channel.experimental.viewTransition is only required to enable deeper integration with Next.js features e.g. automaticallyadding Transition types for navigations. Next.js specific transition types are not implemented yet.

Usage

You can import the<ViewTransition> Component from React in your application:

import { ViewTransition }from'react'

Live Demo

Check out ourNext.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.