Use CSS View Transitions API in Next.js App Router.
Demo.
Use your favorite package manager to install the next-view-transitions package. For example:
pnpm install next-view-transitionsWrap 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>
)
}That's it!
MIT.