Next.js에서 페이지 전환 효과 간단하게 적용하기

Next.js는 페이지 전환 효과를 기본적으로 제공하지 않지만, framer-motion 라이브러리를 사용하면 쉽게 적용할 수 있습니다.

1. framer-motion 설치

우선, framer-motion을 설치해야 합니다. 다음 명령어를 실행하여 설치합니다.

npm install framer-motion
// or
yarn add framer-motion

2. 페이지 전환 효과 적용

framer-motion을 설치했으면, 페이지 전환 효과를 _App.tsx 페이지에 적용하면 간단하게 끝납니다.

import React from 'react';
import { AppProps } from 'next/app';
import { motion } from 'framer-motion';
import { useRouter } from 'next/router';

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
  // ... other codes
  const router = useRouter();
  return (
    <motion.div
      key={router.route}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.3 }}
    >
	  <Component {...pageProps} />
    </motion.div>
  );
  // ... other codes
};

export default App;

 

위 코드를 간략하게 설명하자면 motion.div는 framer-motion의 컴포넌트입니다.

key는 컴포넌트의 고유한 키를 지정합니다.

initial은 컴포넌트가 처음 로드될 때 투명도를 0으로 설정합니다.

animate은 컴포넌트가 표시될 때 투명도를 1로 변경합니다.

exit은 컴포넌트가 숨겨질 때 투명도를 0으로 변경합니다.

transition은 페이지 전환 효과의 지속 시간을 0.3초로 설정합니다.

이제 페이지가 로드되면 페이지가 투명하게 표시되다가 0.3초 후 투명도가 1로 변경됩니다.

그리고 페이지가 이동할 때는 페이지가 다시 투명하게 표시됩니다.

 

이외에도 framer-motion에는 정말 다양한 종료의 애니메이션을 쉽게 적용할 수 있으니 시간이 되시면 이외에도 다양한 애니메이션을 확인하시기 바랍니다.