viewTransition

viewTransition — это экспериментальный флаг, который включает новый экспериментальный View Transitions API в React. Этот API позволяет использовать нативный View Transitions API браузера для создания плавных переходов между состояниями интерфейса.

Чтобы включить эту функцию, необходимо установить свойство viewTransition в значение true в файле next.config.js.

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

module.exports = nextConfig

Важное замечание: Эта функция не разрабатывается и не поддерживается командой Next.js — это экспериментальный API от команды React. Он находится на ранней стадии и не рекомендуется для использования в production. Реализация все еще дорабатывается, и ее поведение может измениться в будущих версиях React. Включение этой функции требует понимания экспериментальной природы API. Чтобы полностью понять его поведение, обратитесь к пул-реквесту React и связанным обсуждениям.

Использование

После включения вы можете импортировать компонент ViewTransition из React в вашем приложении:

import { unstable_ViewTransition as ViewTransition } from 'react'

Однако документация и примеры в настоящее время ограничены, и вам потребуется обращаться непосредственно к исходному коду React и обсуждениям, чтобы понять, как это работает.

Живой пример

Ознакомьтесь с нашим Next.js View Transition Demo, чтобы увидеть эту функцию в действии.

По мере развития этого API мы будем обновлять нашу документацию и делиться дополнительными примерами. Однако на данный момент мы настоятельно не рекомендуем использовать эту функцию в production.