Use View Transitions API in Next.js App Router. Source Code ↗
️🔴 Your browser doesn’t support View Transitions.️🟢 Your browser supports View Transitions.
Go to /demo with custom transition →
This library is aimed at basic use cases of View Transitions and Next.js App Router. With more complex applications and use cases like concurrent rendering, Suspense and streaming, new primitives and APIs still need to be developed into the core of React and Next.js in the future (more).
Use your favorite package manager to install the next-view-transitions
package:
pnpm install next-view-transitions
Wrap your content with the <ViewTransitions>
component inside the layout file:
import { ViewTransitions } from 'next-view-transitions'
export default function Layout({ children }) {
return (
<ViewTransitions>
<html lang='en'>
<body>
{children}
</body>
</html>
</ViewTransitions>
)
}
Then, use the <Link>
component for links that need to trigger a view transition:
import { Link } from 'next-view-transitions'
export default function Component() {
return (
<div>
<Link href='/about'>Go to /about</Link>
</div>
)
}
Or use the useTransitionRouter()
hook to navigate manually:
import { useTransitionRouter } from 'next-view-transitions'
export default function Component() {
const router = useTransitionRouter()
return (
<div>
<button onClick={() => {
router.push('/about')
}}>
Go to /about
</button>
</div>
)
}
That’s it!