View Transitions en Next.js 16 con React 19.2: animando la navegación entre páginas

React 19.2 introdujo <ViewTransition>, un componente que envuelve la View Transitions API nativa del navegador en algo que React puede coordinar con su ciclo de renderizado. Next.js 16 conecta ese componente con las navegaciones del App Router: cambiar de página deja de ser un corte seco y pasa a ser una animación fluida, sin librerías externas ni CSS de transición escrito a mano.

El problema que resuelve

La View Transitions API del navegador (document.startViewTransition) existe desde hace tiempo, pero usarla directamente en una SPA con React era incómodo: hay que capturar el DOM antes y después del cambio, y React no sabía nada de eso, así que coordinar la transición con un re-render solía romperse o requerir trucos.

<ViewTransition> resuelve esto a nivel de React: envuelves el contenido que quieres animar, y React se encarga de invocar la API del navegador en el momento correcto del commit.

Uso básico en el App Router

// app/blog/[slug]/page.tsx
import { unstable_ViewTransition as ViewTransition } from 'react';

export default function PostPage({ post }: { post: Post }) {
  return (
    <ViewTransition>
      <article>
        <h1>{post.title}</h1>
        <img src={post.image} alt={post.title} />
      </article>
    </ViewTransition>
  );
}

Al navegar de /blog a /blog/[slug], Next.js anima la transición entre ambos estados en vez de reemplazar el DOM de golpe. Por defecto el navegador hace un cross-fade; con view-transition-name puedes animar elementos concretos (como la imagen de portada) de una posición a otra, el efecto "morph" típico de apps nativas.

<ViewTransition name={`post-image-${post.slug}`}>
  <img src={post.image} alt={post.title} />
</ViewTransition>

Next.js asigna el mismo name al elemento correspondiente en la página de destino, y el navegador interpola tamaño y posición automáticamente.

Activarlo en el proyecto

Es una feature experimental: hay que habilitarla explícitamente.

// next.config.js
module.exports = {
  experimental: {
    viewTransition: true,
  },
};

Cosas a tener en cuenta

• Soporte de navegador: Chrome y Edge la soportan bien; Safari y Firefox van más atrás. Sin soporte, la navegación simplemente ocurre sin animación (degrada con elegancia, no rompe nada).
• prefers-reduced-motion: el navegador respeta esta preferencia automáticamente y desactiva la animación si el usuario la tiene activada a nivel de sistema.
• No sustituye a Framer Motion para animaciones complejas dentro de una misma página; su punto fuerte es específicamente la transición entre estados de navegación.

Diferencias clave

---

Animar navegaciones solía requerir o bien una librería de peso, o bien CSS quebradizo sincronizado a mano con el router. Con <ViewTransition> en React 19.2 y su integración en Next.js 16, el navegador hace el trabajo pesado y React solo tiene que decirle qué envolver.