Use ViewTransition from Canary release channel

Author: eps1lon

crates/next-core/src/next_config.rs

@@ -864,7 +864,6 @@ pub struct ExperimentalConfig {
     trust_host_header: Option<bool>,
 
     url_imports: Option<serde_json::Value>,
-    view_transition: Option<bool>,
     /// This option is to enable running the Webpack build in a worker thread
     /// (doesn't apply to Turbopack).
     webpack_build_worker: Option<bool>,
@@ -1722,11 +1721,6 @@ impl NextConfig {
         Vc::cell(self.experimental.taint.unwrap_or(false))
     }
 
-    #[turbo_tasks::function]
-    pub fn enable_view_transition(&self) -> Vc<bool> {
-        Vc::cell(self.experimental.view_transition.unwrap_or(false))
-    }
-
     #[turbo_tasks::function]
     pub fn enable_cache_components(&self) -> Vc<bool> {
         Vc::cell(self.experimental.cache_components.unwrap_or(false))

crates/next-core/src/next_import_map.rs

@@ -127,14 +127,13 @@ pub async fn get_next_client_import_map(
     match &ty {
         ClientContextType::Pages { .. } => {}
         ClientContextType::App { app_dir } => {
-            let react_flavor = if *next_config.enable_ppr().await?
-                || *next_config.enable_taint().await?
-                || *next_config.enable_view_transition().await?
-            {
-                "-experimental"
-            } else {
-                ""
-            };
+            // Keep in sync with file:///./../../../packages/next/src/lib/needs-experimental-react.ts
+            let react_flavor =
+                if *next_config.enable_ppr().await? || *next_config.enable_taint().await? {
+                    "-experimental"
+                } else {
+                    ""
+                };
 
             import_map.insert_exact_alias(
                 rcstr!("react"),
@@ -833,12 +832,7 @@ async fn apply_vendored_react_aliases_server(
 ) -> Result<()> {
     let ppr = *next_config.enable_ppr().await?;
     let taint = *next_config.enable_taint().await?;
-    let view_transition = *next_config.enable_view_transition().await?;
-    let react_channel = if ppr || taint || view_transition {
-        "-experimental"
-    } else {
-        ""
-    };
+    let react_channel = if ppr || taint { "-experimental" } else { "" };
     let react_condition = if ty.should_use_react_server_condition() {
         "server"
     } else {

docs/01-app/03-api-reference/05-config/01-next-config-js/viewTransition.mdx

@@ -4,7 +4,7 @@ description: Enable ViewTransition API from React in App Router
 version: experimental
 ---
 
-`viewTransition` is an experimental flag that enables the new experimental [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) in React. This API allows you to leverage the native View Transitions browser API to create seamless transitions between UI states.
+`viewTransition` is an experimental flag that enables the new [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_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.
 
@@ -19,19 +19,18 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-> Important Notice: This feature is not developed or maintained by the Next.js team — it is an experimental API from the React team. It is still in **early stages** and **not recommended for production use**. The implementation is still being iterated on, and its behavior may change in future React releases.
-> Enabling this feature requires understanding the experimental nature of the API. To fully grasp its behavior, refer to the [React pull request](https://github.com/facebook/react/pull/31975) and related discussions.
+> 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](https://react.dev/reference/react/addTransitionType) for navigations. Next.js specific transition types are not implemented yet.
 
 ## Usage
 
-Once enabled, you can import the `ViewTransition` component from React in your application:
+You can import the [`<ViewTransition>` Component](https://react.dev/reference/react/ViewTransition) from React in your application:
 
 ```jsx
-import { unstable_ViewTransition as ViewTransition } from 'react'
+import { ViewTransition } from 'react'
 ```
 
-However, documentation and examples are currently limited, and you will need to refer directly to React’s source code and discussions to understand how this works.
-
 ### Live Demo
 
 Check out our [Next.js View Transition Demo](https://view-transition-example.vercel.app) to see this feature in action.

package.json

@@ -163,8 +163,8 @@
     "@types/jest": "29.5.5",
     "@types/node": "20.17.6",
     "@types/node-fetch": "2.6.1",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.10",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
     "@types/relay-runtime": "14.1.13",
     "@types/string-hash": "1.1.1",
     "@types/trusted-types": "2.0.3",
@@ -319,8 +319,8 @@
       "@babel/parser": "7.27.0",
       "@babel/types": "7.27.0",
       "@babel/traverse": "7.27.0",
-      "@types/react": "19.1.16",
-      "@types/react-dom": "19.1.10",
+      "@types/react": "19.2.2",
+      "@types/react-dom": "19.2.1",
       "@types/retry": "0.12.0",
       "jest-snapshot": "30.0.0-alpha.6",
       "react": "19.3.0-canary-a4eb2dfa-20251006",

packages/next/src/lib/needs-experimental-react.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from '../server/config-shared'
 
+// Keep in sync with Turbopack's experimental React switch: file://./../../../../crates/next-core/src/next_import_map.rs
 export function needsExperimentalReact(config: NextConfig) {
-  const { ppr, taint, viewTransition } = config.experimental || {}
-  return Boolean(ppr || taint || viewTransition)
+  const { ppr, taint } = config.experimental || {}
+  return Boolean(ppr || taint)
 }

packages/next/src/server/config-shared.ts

@@ -653,7 +653,7 @@ export interface ExperimentalConfig {
   useLightningcss?: boolean
 
   /**
-   * Enables view transitions by using the {@link https://github.com/facebook/react/pull/31975 unstable_ViewTransition} Component.
+   * Enables view transitions by using the {@link https://react.dev/reference/react/ViewTransition ViewTransition} Component.
    */
   viewTransition?: boolean