next view transitions

การเปลี่ยนมุมมองถัดไป

ใช้ View Transitions API ในเราเตอร์แอป Next.js

สาธิต

ข้อสงวนสิทธิ์

ไลบรารีนี้มุ่งเป้าไปที่กรณีการใช้งานพื้นฐานของ View Transitions และ Next.js App Router ด้วยแอปพลิเคชันและกรณีการใช้งานที่ซับซ้อนมากขึ้น เช่น การเรนเดอร์พร้อมกัน, Suspense และการสตรีม พื้นฐานและ API ใหม่ยังคงต้องได้รับการพัฒนาให้เป็นแกนหลักของ React และ Next.js ในอนาคต (เพิ่มเติม)

การติดตั้ง

ใช้ตัวจัดการแพ็คเกจที่คุณชื่นชอบเพื่อติดตั้งแพ็คเกจ next-view-transitions ตัวอย่างเช่น:

pnpm install next-view-transitions

การใช้งาน

ล้อมเนื้อหาของคุณด้วยองค์ประกอบ <ViewTransitions> ภายในไฟล์เลย์เอาต์:

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

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

จากนั้น ใช้ส่วนประกอบ <Link> สำหรับลิงก์ที่ต้องกระตุ้นการเปลี่ยนมุมมอง:

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

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

หรือใช้ useTransitionRouter hook สำหรับการนำทางแบบเป็นโปรแกรม:

 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 >
  )
}

แค่นั้นแหละ!

ใบอนุญาต

เอ็มไอที.