Next-view-transitions-2 NPM

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-transitions

Basic 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 children
fallback: Optional custom behavior for unsupported browsers

`<Link>` Component

Replacement for Next.js Link with transitions.

Props:

All Next.js Link props
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 Link component from this library.
Flash of unstyled content?
- Adjust transition durations or add specific styles for elements.

License

MIT

next next.js view transitions route transitions app router

0.3.4

5 months ago