Smooth Page Transitions in Next.js 15 – A Deep Dive Guide

Jun 17, 2025

......

Next.js 15 View Transitions API Tutorial

Loading...

Related tutorials

Better T-Stack

Better-T-Stack: The TypeScript CLI That Actually Gets Modern App

Read more

Next.js Image Preloading

Building a Smart BlurImage Component in Next.js 15 App Router

Read more

React Query and Next.js Server Components diagram

How to Use React Query with Next.js Server Components - Demo

Read more

Get the Next.js weekly drop

Free weekly notes on App Router, auth, and frontend stacks that ship. No spam—just what's worth your inbox.

By subscribing you agree to our Privacy Policy.

I've been building Next.js apps for years, and I've always struggled with page transitions. Framer Motion felt heavy. Custom solutions broke constantly. CSS animations never felt quite right.

Then Next.js 15 dropped the View Transitions API support, and everything changed.

What Makes This Different

The View Transitions API isn't another JavaScript animation library. It's a browser-native feature that handles transitions at the rendering level. Think hardware acceleration, minimal bundle size, and buttery smooth animations that don't block your UI.

The best part? Next.js made it ridiculously simple to implement.

Getting Started: 5-Minute Setup

Step 1: Install the Package

bash

# Choose your package manager
npm install next-view-transitions
yarn add next-view-transitions  
pnpm add next-view-transitions

Step 2: Enable View Transitions

Update your next.config.js:

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
};

module.exports = nextConfig;

Step 3: Wrap Your App

In your root layout, add the ViewTransitions provider:

jsx

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

export default function RootLayout({ children }) {
  return (
    <ViewTransitions>
      <html lang="en">
        <body className="font-sans">
          {children}
        </body>
      </html>
    </ViewTransitions>
  )
}

Step 4: Use the Enhanced Navigation Components

Now you need to use the special Link component and router hook for transitions to actually work. For links, replace Next.js's default Link with the transition-enabled version:

jsx

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

export default function Navigation() {
  return (
    <nav className="flex space-x-4">
      <Link href="/about" className="hover:text-blue-600">
        About
      </Link>
      <Link href="/blog" className="hover:text-blue-600">
        Blog
      </Link>
      <Link href="/contact" className="hover:text-blue-600">
        Contact
      </Link>
    </nav>
  )
}

jsx

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

export default function BlogPost() {
  const router = useTransitionRouter()

  const handleNavigation = () => {
    // All Next.js router methods work with transitions
    router.push('/blog/next-post')
    // router.replace('/dashboard')
    // router.back()
  }

  return (
    <div className="prose max-w-none">
      <h1>My Blog Post</h1>
      <p>Content here...</p>
      
      <button 
        onClick={handleNavigation}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
      >
        Read Next Post
      </button>
    </div>
  )
}

css

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

css

::view-transition-old(root) {
  animation: slide-out-left 350ms ease-in-out;
}

::view-transition-new(root) {
  animation: slide-in-right 350ms ease-in-out;
}

@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }
}

css

::view-transition-old(root) {
  animation: scale-down 300ms ease-in-out;
}

::view-transition-new(root) {
  animation: scale-up 300ms ease-in-out;
}

@keyframes scale-down {
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

@keyframes scale-up {
  from {
    transform: scale(1.05);
    opacity: 0;
  }
}

css

/* Different transition for blog posts */
[data-route*="/blog"] ::view-transition-old(root) {
  animation: slide-up 400ms ease-out;
}

[data-route*="/blog"] ::view-transition-new(root) {
  animation: slide-down 400ms ease-out;
}

css

/* Transition specific components */
::view-transition-old(header),
::view-transition-new(header) {
  animation-duration: 200ms;
}

::view-transition-old(main),
::view-transition-new(main) {
  animation-duration: 400ms;
}

jsx

// app/layout.js
import { ViewTransitions } from 'next-view-transitions'
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <ViewTransitions>
      <html lang="en">
        <body className="bg-white text-gray-900">
          <nav className="border-b border-gray-200 p-4">
            <div className="max-w-4xl mx-auto flex justify-between items-center">
              <h1 className="text-xl font-bold">My Blog</h1>
              <div className="space-x-4">
                <a href="/" className="hover:text-blue-600">Home</a>
                <a href="/blog" className="hover:text-blue-600">Blog</a>
                <a href="/about" className="hover:text-blue-600">About</a>
              </div>
            </div>
          </nav>
          <main className="max-w-4xl mx-auto p-4">
            {children}
          </main>
        </body>
      </html>
    </ViewTransitions>
  )
}