nextjs에서 viewTransition 사용해보기

viewTransition이란?

페이지 또는 컴포넌트가 바뀔 때 이전/이후 화면을 캡쳐해서 부드럽게 전환해주는 웹 표준 API로 아직 react나 nextjs에서는 실험적인 기능으로 밖에 사용하지 못한다.
이런 ui나 페이지 전환을 사용할 수 있는 웹 표준들이 안정화되면 웹뷰 앱을 만들어도 네이티브 앱처럼 자연스럽게 화면이 전환이 되서 엄청 유용할 것 같아서 미리 사용해봤다.

nextjs에서 사용법

// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    viewTransition: true,
  },
};

export default nextConfig;

nextjs에는 next.config.ts 파일에 여러 설정을 추가할 수 있는데 ViewTransition 속성도 여기에 추가할 수 있다. 실험적인 기능이라 experimental 속성 아래에 있다.
추가하면 nextjs 앱은 config가 변경된 것을 파악하고 자동으로 다시 시작한다. 그 후엔 ViewTransition 컴포넌트를 불러와서 사용하면 된다.

import { ViewTransition } from "react";

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

기본적으로는 다른것들을 정의하지 않고 ViewTransition으로 감싸주어도 부드럽게 나오는 것을 알 수 있다.
나의 경우는 블로그 포스트를 클릭 했을 시 자연스럽게 페이지와 연결된 부분이 생기길 바래서 name 속성을 사용했다.

<ViewTransition name={`post-${slug}-title`}>
    <h1>
        {post.title}
    </h1>
</ViewTransition>

위에 처럼 name을 지정해주고, 똑같은 name이 이동하려는 페이지가 있으면 연결된 형태의 애니메이션을 볼 수 있다. 그것 말고는 리액트에서는 일반적인 경우엔 이름을 지정하지 않기를 권장한다.

기타

ViewTransition을 사용하다 보니 SSGOI라는 페이지 전환 라이브러리도 알게 되었다. 공식문서 보러가기 너무 깔끔하게 페이지 전환하는 것을 보니 프로젝트에서 꼭 사용하고 싶다고 느껴졌다.