[Next.js] Next.js 에서 aos 사용법 (Animation On Scroll)

1. AOS 설치

yarn add aos
yarn add @types/aos

또는

npm i aos --save
npm i @types/aos --save

2. AOS Init()

import AOS from 'aos';
import 'aos/dist/aos.css';

export default function AOSPage() {

useEffect(() => {
    AOS.init()
}, []);

return (
        <h1 data-aos="fade-up">넥스트에서도 AOS 된당!!!</h1>
    );

}

저는 AOS에서 하라는대로 했는데 Next.js라 그런지 자꾸 안되어 Github issue를 뒤져서 방법을 찾아냈습니다. 저 같은 경우 import ‘aos/dist/aos.css’를 하지 않아서 css가 안먹은거였습니다. 아시다시피 AOS가 CSS로 Animation을 만드는거라 css파일이 필요한데, next.js에서는 어떻게 build되는지 정확히 이해하지 못한게 문제였나봅니다.

이번 문제의 해결 방법은 Github Issue를 통해 해결했습니다.

https://github.com/michalsnik/aos/issues/799