How do View Transitions work with next/link transitionTypes in Next.js 16.2?

Q: How do View Transitions work with next/link transitionTypes in Next.js 16.2?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes you know ` ` and basic CSS animations. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs (the `link` reference and the view transitions guide) and, in the **Verified** section, by driving a 16.4.2 lab in Chromium 141 with Playwright and recording every `document.startViewTransition` call. ## 1. Why This Even Matters — A Story First In a film, a cut from one scene to the next is instant, but editors use the direction of movement to tell you where you are going. A character walking off to the right and the next shot entering from the left feels like continuity. The same cut with no movement feels like a jump. Web navigation has always been the jump cut: one page disappears and the next appears. View transitions add the editing. The interesting pa

The problem

Question presented to candidate: "Designers want the photo detail page to slide in from the right when you open it and slide back when you return to the gallery, and no animation for other navigations. Next.js 16.2 added transitionTypes on <Link>. How does that work end to end, and what do you need in the app today?"

What a strong answer should cover:

The browser View Transitions API snapshots the old and new UI and animates between them; React's <ViewTransition> component drives it declaratively.
App Router navigations are React Transitions, so <ViewTransition> animates on navigation automatically.
transitionTypes={["nav-forward"]} on <Link> (added in 16.2) passes those strings to React.addTransitionType inside the navigation; <ViewTransition enter={{ "nav-forward": "...", default: "none" }}> maps types to CSS classes.
The CSS lives in ::view-transition-old(.class) / ::view-transition-new(.class) rules; respect prefers-reduced-motion.
Version detail: <ViewTransition> is stable in React 19.3 and imported from react; on 16.4.2 the old experimental.viewTransition flag is rejected, and browsers without support simply do not animate.

Clarifying questions expected:

"Which navigations count as forward and back?" — the type is not automatic; you assign it per link.
"What about the browser back button?" — it is not a <Link> click, so it carries no type.

Code / implementation expected: Yes — two pages, the links with types, a shared <ViewTransition> wrapper and the CSS.

nextjs
navigation
view-transitions
next-16

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes you know `` and basic CSS animations. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs (the link reference and the view transitions guide) and, in the Verified section, by driving a 16.4.2 lab in Chromium 141 with Playwright and recording every document.startViewTransition call.

1. Why This Even Matters — A Story First

In a film, a cut from one scene to the next is instant, but editors use the direction of movement to tell you where you are going. A character walking off to the right and the next shot entering from the left feels like continuity. The same cut with no movement feels like a jump.

Web navigation has always been the jump cut:

The solution is hidden so you can try first

8 min read · 8 sections

Read the code

Page wrapper mapping types to animations

import { ViewTransition } from "react";

export function Slide({ children }: { children: React.ReactNode }) {
  return (
    <ViewTransition
      enter={{ "nav-forward": "nav-forward", "nav-back": "nav-back", default: "none" }}
      exit={{ "nav-forward": "nav-forward", "nav-back": "nav-back", default: "none" }}
      default="none"
    >
      {children}
    </ViewTransition>
  );
}

Links with transition types

// app/vt/page.tsx
import Link from "next/link";
import { Slide } from "./slide";

export default function Gallery() {
  return (
    <Slide>
      <main>
        <h1>Gallery</h1>
        <Link href="/vt/detail" transitionTypes={["nav-forward"]}>Open photo</Link>
      </main>
    </Slide>
  );
}

// app/vt/detail/page.tsx
// <Link href="/vt" transitionTypes={["nav-back"]}>Back to gallery</Link>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.