Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: reword the docs of veiw transition flag #76841

Merged
merged 4 commits into from
Mar 7, 2025
+5 −4
Merged

docs: reword the docs of veiw transition flag #76841

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c99e7f
docs reword the docs
huozhi Mar 5, 2025
6c80f54
docs reword the docs
huozhi Mar 5, 2025
bfee695
Update docs/01-app/04-api-reference/05-config/01-next-config-js/viewT…
huozhi Mar 7, 2025
e302306
Update docs/01-app/04-api-reference/05-config/01-next-config-js/viewT…
huozhi Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) 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.

Expand All @@ -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 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

Expand All @@ -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.
Loading