-
Next.js에서 페이지 전환 효과 간단하게 적용하기Next.js 2023. 9. 4. 17:40728x90
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에는 정말 다양한 종료의 애니메이션을 쉽게 적용할 수 있으니 시간이 되시면 이외에도 다양한 애니메이션을 확인하시기 바랍니다.
'Next.js' 카테고리의 다른 글
Next.js로 SEO 최적화하기 (0) 2024.06.26 Next.js 14버전 정리 (0) 2023.11.01 Next.js Image 태그 height auto로 사용하기 (update 13 version) (0) 2023.08.04 Next.js Conf에서 발표된 Next.js 13버전 정리 (0) 2022.10.29 Next Image 똑똑하게 사용하기(feat. Vercel Deploy) (0) 2022.10.24