viewTransition

viewTransition est un drapeau expérimental qui active la nouvelle API View Transitions expérimentale dans React. Cette API vous permet d'utiliser l'API native View Transitions du navigateur pour créer des transitions fluides entre les états de l'interface utilisateur.

Pour activer cette fonctionnalité, vous devez définir la propriété viewTransition sur true dans votre fichier next.config.js.

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

module.exports = nextConfig

Note importante : Cette fonctionnalité n'est pas développée ou maintenue par l'équipe Next.js - il s'agit d'une API expérimentale de l'équipe React. Elle en est encore aux premiers stades et n'est pas recommandée pour une utilisation en production. L'implémentation est encore en cours d'itération et son comportement pourrait changer dans les futures versions de React. L'activation de cette fonctionnalité nécessite de comprendre la nature expérimentale de l'API. Pour en comprendre pleinement le comportement, référez-vous à la pull request React et aux discussions associées.

Utilisation

Une fois activée, vous pouvez importer le composant ViewTransition depuis React dans votre application :

import { unstable_ViewTransition as ViewTransition } from 'react'

Cependant, la documentation et les exemples sont actuellement limités, et vous devrez vous référer directement au code source de React et aux discussions pour comprendre son fonctionnement.

Démo en direct

Consultez notre Démo Next.js View Transition pour voir cette fonctionnalité en action.

À mesure que cette API évoluera, nous mettrons à jour notre documentation et partagerons plus d'exemples. Cependant, pour l'instant, nous déconseillons fortement d'utiliser cette fonctionnalité en production.