viewTransition

viewTransition ist ein experimentelles Flag, das die neue experimentelle View Transitions API in React aktiviert. Diese API ermöglicht es Ihnen, die native View Transitions Browser-API zu nutzen, um nahtlose Übergänge zwischen UI-Zuständen zu erstellen.

Um diese Funktion zu aktivieren, müssen Sie die Eigenschaft viewTransition in Ihrer next.config.js-Datei auf true setzen.

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

module.exports = nextConfig

Wichtiger Hinweis: Diese Funktion wird nicht vom Next.js-Team entwickelt oder gewartet – es handelt sich um eine experimentelle API des React-Teams. Sie befindet sich noch in einem frühen Stadium und ist nicht für den Produktionseinsatz empfohlen. Die Implementierung wird noch weiterentwickelt, und das Verhalten kann sich in zukünftigen React-Versionen ändern. Die Aktivierung dieser Funktion setzt ein Verständnis des experimentellen Charakters der API voraus. Um das Verhalten vollständig zu verstehen, lesen Sie den React Pull Request und die zugehörigen Diskussionen.

Verwendung

Nach der Aktivierung können Sie die ViewTransition-Komponente aus React in Ihrer Anwendung importieren:

import { unstable_ViewTransition as ViewTransition } from 'react'

Allerdings sind Dokumentation und Beispiele derzeit begrenzt, und Sie müssen sich direkt auf den Quellcode und die Diskussionen von React beziehen, um zu verstehen, wie dies funktioniert.

Live-Demo

Sehen Sie sich unsere Next.js View Transition Demo an, um diese Funktion in Aktion zu sehen.

Während sich diese API weiterentwickelt, werden wir unsere Dokumentation aktualisieren und weitere Beispiele bereitstellen. Bis dahin raten wir jedoch dringend davon ab, diese Funktion in der Produktion einzusetzen.