From 0c99e7f70d7ab9bad9edb0f2bd3f1581bee54a2b Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 5 Mar 2025 16:38:23 +0100 Subject: [PATCH 1/4] docs reword the docs --- .../05-config/01-next-config-js/viewTransition.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx b/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx index ab7b73d3fcc0d..0b877ab2abcfe 100644 --- a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx +++ b/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx @@ -19,7 +19,8 @@ const nextConfig = { module.exports = nextConfig ``` -> Note: This feature is highly experimental and may change in future releases. +> Important Notice: This feature is not developed or maintained by the Next.js team—it is an experimental addition from the React team. It is still in **early stages** and **not recommended for production use**. The implementation is evolving, 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. ## Usage @@ -29,10 +30,10 @@ Once enabled, you can import the `ViewTransition` component from React in your a import { unstable_ViewTransition as ViewTransition } from 'react' ``` -For more details on how to use this feature, refer to the [original View Transitions pull request](https://github.com/facebook/react/pull/31975) in the React repository. This feature builds upon the native browser implementation of View Transitions. +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. -We will continue to expand our documentation and examples as this API evolves. +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. From 6c80f540a8328682485287871e4f146d6bf2275a Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 5 Mar 2025 16:39:31 +0100 Subject: [PATCH 2/4] docs reword the docs --- .../05-config/01-next-config-js/viewTransition.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx b/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx index 0b877ab2abcfe..a640796193faf 100644 --- a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx +++ b/docs/01-app/04-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 feature that a feature flag to enable the new experimental [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) with React. This new API allows you to leverage the View Transition browser API to create seamless transitions. +`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) with 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. From bfee695b3df3a74ebc51bc3043bb99fc563f8b51 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 7 Mar 2025 18:22:06 +0100 Subject: [PATCH 3/4] Update docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx Co-authored-by: JJ Kasper --- .../05-config/01-next-config-js/viewTransition.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx b/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx index a640796193faf..d189f606909b7 100644 --- a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx +++ b/docs/01-app/04-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) with 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 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. To enable this feature, you need to set the `viewTransition` property to `true` in your `next.config.js` file. From e302306c1052336d79a74967b1a935dc9a48aeed Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 7 Mar 2025 18:22:22 +0100 Subject: [PATCH 4/4] Update docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx Co-authored-by: JJ Kasper --- .../05-config/01-next-config-js/viewTransition.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx b/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx index d189f606909b7..40ce79336d9c2 100644 --- a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx +++ b/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx @@ -19,7 +19,7 @@ const nextConfig = { module.exports = nextConfig ``` -> Important Notice: This feature is not developed or maintained by the Next.js team—it is an experimental addition from the React team. It is still in **early stages** and **not recommended for production use**. The implementation is evolving, and its behavior may change in future React releases. +> 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. ## Usage