Skip to content
dev-docs

viewTransition

Source URL: https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition

viewTransition

Section titled “viewTransition”

This feature is currently experimental and subject to change, it is not recommended for production.

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.

/** @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

Section titled “Usage”

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

import { ViewTransition } from 'react'

Live Demo

Section titled “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.

Section titled “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.”