Next.js View Transitions – Smooth Page Animations Made Easy

Sep 10, 2025

Modern websites feel more engaging when page transitions are smooth instead of instantly switching from one page to another. That’s exactly what the View Transitions API offers, and with the next-view-transitions package, you can easily use it in your Next.js App Router project.

🌟 What are View Transitions?

The View Transitions API is a browser feature that allows smooth, animated transitions between different pages or states. Instead of instantly replacing content, it makes your app feel like a native mobile app by animating changes.

👉 Example:

Clicking a link to another page smoothly fades in instead of flashing white.
Buttons, cards, or layouts animate naturally as the user navigates.

⚠️ Disclaimer

This library is great for basic use cases with the Next.js App Router. However, for advanced use cases like concurrent rendering, Suspense, or streaming, React and Next.js are still developing new primitives and APIs.

🛠️ Installation

First, install the package with your favorite package manager:

pnpm install next-view-transitions

Or with npm/yarn:

npm install next-view-transitions
# or
yarn add next-view-transitions

🚀 Usage

1. Wrap Your Layout

Wrap your app with <ViewTransitions> in your layout file.

import { ViewTransitions } from 'next-view-transitions'

export default function Layout({ children }) {
  return (
    <ViewTransitions>
      <html lang="en">
        <body>
          {children}
        </body>
      </html>
    </ViewTransitions>
  )
}

2. Use Link for Navigation

Use the Link component to automatically apply view transitions on navigation.

import { Link } from 'next-view-transitions'

export default function Component() {
  return (
    <div>
      <Link href="/about">Go to /about</Link>
    </div>
  )
}

3. Navigate with `useTransitionRouter()`

For programmatic navigation, use the useTransitionRouter() hook.

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!

With just a few lines of code, you’ve added smooth page transitions to your Next.js app. No more hard cuts between routes—your site now feels polished and delightful.

✅ Conclusion

The Next.js View Transitions package is a simple but powerful tool to improve the user experience in your Next.js App Router projects. While it’s still evolving and doesn’t yet cover every complex use case, it’s an easy win for making your app feel modern and smooth.