다음 보기 전환

다음 보기 전환

Next.js 앱 라우터에서 View Transitions API를 사용하세요.

데모 .

부인 성명

이 라이브러리는 View Transitions 및 Next.js App Router의 기본 사용 사례를 목표로 합니다. 동시 렌더링, Suspense 및 스트리밍과 같은 보다 복잡한 애플리케이션 및 사용 사례를 통해 새로운 기본 요소 및 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 >
  )
}

그게 다야!

특허

MIT.