следующий просмотр переходов

переходы следующего просмотра

Используйте API View Transitions в маршрутизаторе приложений Next.js.

Демо .

Отказ от ответственности

Эта библиотека предназначена для базовых вариантов использования View Transitions и Next.js App Router. Учитывая более сложные приложения и варианты использования, такие как параллельный рендеринг, приостановка и потоковая передача, в будущем по-прежнему необходимо разрабатывать новые примитивы и API для ядра React и Next.js (подробнее).

Установка

Используйте свой любимый менеджер пакетов, чтобы установить пакет next-view-transitions . Например:

pnpm install next-view-transitions

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

Оберните свой контент компонентом внутри файла макета:

 import { ViewTransitions } from 'next-view-transitions'

export default function Layout ( { children } ) {
  return (
    < ViewTransitions >
      < html lang = 'en' >
        < body >
          { children }
        < / body >
      < / html >
    < / ViewTransitions >
  )
}

Затем используйте компонент для ссылок, которые должны инициировать переход представления:

 import { Link } from 'next-view-transitions'

export default function Component ( ) {
  return (
    < div >
      < Link href = '/about' > Go to /about < / Link >
    < / div >
  )
}

Или используйте хук useTransitionRouter для программной навигации:

 import { useTransitionRouter } from 'next-view-transitions'

export default function Component ( ) {
  const router = useTransitionRouter ( )

  return (
    < div >
      < button onClick = { ( ) => {
        // All Next.js router methods are supported
        router . push ( '/about' )
      } } > Go to /about < / button >
    < / div >
  )
}

Вот и все!

Лицензия

Массачусетский технологический институт.