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

``bash

Using npm

npm install next-view-transitions

Using yarn

yarn add next-view-transitions

Using pnpm

pnpm install next-view-transitions
`

Basic Usage

$3

`jsx
import { ViewTransitions } from "next-view-transitions";

export default function RootLayout({ children }) {
return (


{children}


);
}
`

$3

`jsx
import { Link } from "next-view-transitions";

export default function Navigation() {
return (

);
}
`

$3

`jsx
import { useTransitionRouter } from "next-view-transitions";

export default function Component() {
const router = useTransitionRouter();

const handleNavigation = () => {
router.push("/dashboard");
};

return Go to Dashboard;
}
`

Custom Transition Styles

`css
@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

$3

Wrapper component that enables View Transitions.

Props:

- children: Required React children
- fallback: Optional custom behavior for unsupported browsers

$3

Replacement for Next.js Link with transitions.

Props:

- All Next.js Link props
- transitionOptions: Additional options for the transition (optional)

$3

Hook providing a router object with View Transitions enabled.

Troubleshooting

- Transitions not working?

- Ensure your browser supports View Transitions API.
- Wrap your app with .
- Use the Link` component from this library.

- Flash of unstyled content?
- Adjust transition durations or add specific styles for elements.

License

MIT