viewTransition

viewTransition es una bandera experimental que habilita la nueva API de Transiciones de Vista (View Transitions API) experimental en React. Esta API permite aprovechar la API nativa de transiciones de vista del navegador para crear transiciones fluidas entre estados de la interfaz de usuario.

Para activar esta función, debe establecer la propiedad viewTransition en true en su archivo next.config.js.

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

module.exports = nextConfig

Aviso importante: Esta función no es desarrollada ni mantenida por el equipo de Next.js — es una API experimental del equipo de React. Se encuentra en etapas iniciales y no se recomienda para uso en producción. La implementación aún está en iteración y su comportamiento podría cambiar en futuras versiones de React. Habilitar esta función requiere comprender la naturaleza experimental de la API. Para entender completamente su comportamiento, consulte la solicitud de extracción (pull request) de React y las discusiones relacionadas.

Uso

Una vez habilitada, puede importar el componente ViewTransition desde React en su aplicación:

import { unstable_ViewTransition as ViewTransition } from 'react'

Sin embargo, la documentación y los ejemplos son actualmente limitados, y deberá consultar directamente el código fuente y las discusiones de React para entender cómo funciona.

Demostración en vivo

Consulte nuestra Demostración de Transición de Vista en Next.js para ver esta función en acción.

A medida que esta API evolucione, actualizaremos nuestra documentación y compartiremos más ejemplos. Sin embargo, por ahora, recomendamos encarecidamente no usar esta función en producción.

On this page