nextjs에서 viewTransition 사용해보기
2026. 01. 14.
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라는 페이지 전환 라이브러리도 알게 되었다. 공식문서 보러가기 너무 깔끔하게 페이지 전환하는 것을 보니 프로젝트에서 꼭 사용하고 싶다고 느껴졌다.