목차
framer-motion이란?
https://github.com/framer/motion
GitHub - framer/motion: Open source, production-ready animation and gesture library for React
Open source, production-ready animation and gesture library for React - framer/motion
github.com
Framer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.
AnimatePresence와 motion.div를 사용하여 페이지 전환 애니메이션을 적용할 수 있다.
설치방법
npm install framer-motion
사용방법
PageTransition.tsx 추가
src/components/PageTranstion/PageTransition.tsx파일추가클라이언트 컴포넌트로 작성해줘야한다.
'use client';
import { usePathname } from 'next/navigation';
import { AnimatePresence, motion } from 'framer-motion';
import React from 'react';
interface PageTransitionProps {
children: React.ReactNode;
}
function PageTransition({ children }: PageTransitionProps) {
const pathname = usePathname();
return (
<AnimatePresence mode="wait">
<motion.div
key={pathname}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.5 }}
>
{children}
</motion.div>
</AnimatePresence>
);
}
export default PageTransition;
layout.tsx에 PageTransition으로 감싸주기
모든 페이지에 적용하기위해
src/app/layout.tsx에 위에서만든 PageTransition컴포넌트로 컴포넌트를감싸주면 된다.
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import 'prismjs/themes/prism.css';
import { Flex } from 'antd';
import { HeaderV1 } from '@/containers';
import RQProvider from '@/app/RQProvider';
import PageTransition from '@/components/PageTransition/PageTransition';
import StoreProvider from './StoreProvider';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<StoreProvider>
<RQProvider>
<PageTransition>
<Flex gap="middle" style={{ minHeight: '100vh' }}>
<HeaderV1 />
{children}
</Flex>
</PageTransition>
</RQProvider>
</StoreProvider>
</body>
</html>
);
}
위에 사항들을 다 적용하였다면 테스트
해당 과정을 다 마치고 테스트를해보면 애니메이션이 적용되어있다.
'Next.js' 카테고리의 다른 글
| [Next.js, styled-components] Next.js에 styled-components 설정하기 (0) | 2024.06.07 |
|---|---|
| [Next.js, TS,Zustand] 페이지 이동전 로딩효과 추가하기 (0) | 2024.05.30 |
| [Next.js,TS] 특정폴더에만 Eslint 적용하기 (0) | 2024.05.30 |
| [Next.js, TypeScript] airbnb 및 커스텀 TS 세팅 (1) | 2024.05.29 |
| [Next.js]웹 페이지 전환 효과를 주는 방법들 (0) | 2024.05.24 |
