Skip to content
Configurationnext.config.jsviewTransition
You are currently viewing the Beta version of the documentation.

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 flag that enables the new 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: 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. automatically adding 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 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.