انتقالات العرض التالي

انتقالات العرض التالي

استخدم واجهة برمجة تطبيقات View Transitions في جهاز توجيه تطبيق Next.js.

تجريبي .

تنصل

تستهدف هذه المكتبة حالات الاستخدام الأساسية لعرض التحولات وجهاز توجيه التطبيقات Next.js. مع التطبيقات وحالات الاستخدام الأكثر تعقيدًا مثل العرض المتزامن والتشويق والبث، لا تزال البدائيات وواجهات برمجة التطبيقات الجديدة بحاجة إلى التطوير لتصبح جوهر 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 >
  )
}

هذا كل شيء!

رخصة

معهد ماساتشوستس للتكنولوجيا.