next-view-transitions-2
v0.3.4
Published
View Transitions API for Next.js App Router
Maintainers
seanuchihaReadme
next-view-transitions
Use View Transitions API in Next.js App Router for smooth, animated page transitions.
Features
- 🔄 Seamless page transitions using the native View Transitions API
- 🚀 Zero-config setup with Next.js App Router
- 🧩 Simple drop-in components (
ViewTransitions,Link) - 🔧 Programmatic navigation support with
useTransitionRouter - 📱 Progressive enhancement for browsers that don't support View Transitions
Browser Compatibility
The View Transitions API is currently supported in:
- Chrome 111+
- Edge 111+
- Opera 97+
- Safari 16.4+
For unsupported browsers, the library falls back to standard navigation without animations.
Installation
# Using npm
npm install next-view-transitions
# Using yarn
yarn add next-view-transitions
# Using pnpm
pnpm install next-view-transitionsBasic Usage
1. Wrap your application with <ViewTransitions>
import { ViewTransitions } from "next-view-transitions";
export default function RootLayout({ children }) {
return (
<ViewTransitions>
<html lang="en">
<body>{children}</body>
</html>
</ViewTransitions>
);
}2. Use <Link> for navigation
import { Link } from "next-view-transitions";
export default function Navigation() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</nav>
);
}3. Programmatic Navigation
import { useTransitionRouter } from "next-view-transitions";
export default function Component() {
const router = useTransitionRouter();
const handleNavigation = () => {
router.push("/dashboard");
};
return <button onClick={handleNavigation}>Go to Dashboard</button>;
}Custom Transition Styles
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
::view-transition-old(root) {
animation: 300ms fade-out ease-in-out forwards;
}
::view-transition-new(root) {
animation: 300ms fade-in ease-in-out forwards;
}API Reference
<ViewTransitions> Component
Wrapper component that enables View Transitions.
Props:
children: Required React childrenfallback: Optional custom behavior for unsupported browsers
<Link> Component
Replacement for Next.js Link with transitions.
Props:
- All Next.js
Linkprops transitionOptions: Additional options for the transition (optional)
useTransitionRouter()
Hook providing a router object with View Transitions enabled.
Troubleshooting
Transitions not working?
- Ensure your browser supports View Transitions API.
- Wrap your app with
<ViewTransitions>. - Use the
Linkcomponent from this library.
Flash of unstyled content?
- Adjust transition durations or add specific styles for elements.
License
MIT