Implementing View-Transition API in a Next.js 14 Application

Overview

This guide explains how to implement the View-Transition API in a Next.js 14 application. The View-Transition API allows smooth transitions between different views, enhancing user experience without relying heavily on third-party libraries. It’s an excellent way to provide polished navigation in modern web apps.

Prerequisites

Before getting started, ensure you meet the following prerequisites:

• Familiarity with Next.js 14 and React.
• Basic understanding of modern JavaScript and DOM manipulation.
• A Next.js 14 application set up and running locally.

Getting Started with View-Transition API

1. Triggering the View Transition

Next.js generates Multi-Page Applications (MPAs), but some elements behave like in a Single Page Application (SPA). For example, the Link component navigates to a new route, loading a new HTML document but doesn’t trigger a view transition by default.

To implement the View-Transition API, intercept the onClick event of the Link component. Then, call the document.startViewTransition method to trigger the transition:

import { useRouter } from 'next/navigation';
import React from 'react';

const ExampleComponent = () => {
  const router = useRouter();

  const onLinkClickHandler = (event) => {
    event.preventDefault();

    if (document.startViewTransition) {
      document.startViewTransition(() => {
        router.push('/newRoute');
      });
    } else {
      router.push('/newRoute');
    }
  };

  return (
    <a href="/newRoute" onClick={onLinkClickHandler}>Go to New Route</a>
  );
};

export default ExampleComponent;

2. Styling the View Transition

Once the transition is set up, you can style the transitions using CSS with @view-transition. First, set the @view-transition property to auto:

@view-transition {
  navigation: auto;
}

You can then style the leaving and incoming pages with these pseudo-elements:

::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

@keyframes move-out {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

This creates a smooth movement transition between pages.

Pro Tip: Creating a Custom Link Component

To make the transition logic reusable, you can create a custom Link component that handles the onClick event, preventing default behavior and triggering the transition:

"use client"
import { useRouter } from 'next/navigation';
import React from 'react';

const ViewTransitionLink = ({ href, children }) => {
  const router = useRouter();

  const handleClick = (event) => {
    event.preventDefault();

    if (document.startViewTransition) {
      document.startViewTransition(() => {
        router.push(href);
      });
    } else {
      router.push(href);
    }
  };

  return (
    <a href={href} onClick={handleClick}>{children}</a>
  );
};

export default ViewTransitionLink;

You can now use this ViewTransitionLink component across your application:

import ViewTransitionLink from './ViewTransitionLink';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <ViewTransitionLink href="/about">Go to About Page</ViewTransitionLink>
    </div>
  );
};

export default HomePage;

Conclusion

The View-Transition API offers a smooth and modern approach to navigating between views in a Next.js 14 application, significantly improving user experience. By following this guide, you can implement seamless transitions that give your web app a polished and engaging feel.

Always ensure to provide fallback support for browsers that don’t yet support the View-Transition API. Additionally, CSS animations can further enhance visual transitions with minimal JavaScript intervention.

For more advanced use cases, refer to the official MDN documentation on the View-Transition API.