DocumentationShowcaseBlog

viewTransition

Enable ViewTransition API from React in App Router

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.

On this page