Next에서 AOS 라이브러리 사용하기

🦮AOS Library Install

터미널에서 AOS를 설치해줍니다.

npm install --save aos@next

또는

yarn add aos@next

정상적으로 설치가 완료된 것을 확인하기 위해 setting.json 파일에서 "aos": "^3.0.0-beta.6"를 확인합니다.

---

Next 환경으로 돌아와 다음과 같이 AOS를 import 해줍니다.

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

export default function TEST() {
  AOS.init();
  return (
    <section className='flex-col'>
      <div
    	data-aos="fade-up"
    	data-aos-easing="ease-out"
    	data-aos-duration="500"
    	data-aos-once="true"
    	data-aos-delay="300"
        className="text-bluePoint text-6xl font-bold">TEST</div>
    </section>
  );
}

---

🦮AOS Option

옵션	설명
data-aos	애니메이션 효과명
data-aos-offset	애니메이션 효과가 시작될 객체의 위치
data-aos-delay	애니메이션 재생 대기시간
data-aos-duration	애니메이션의 재생시간 설정
data-aos-easing	애니메이션 흐름 설정

더 자세한 내용은 AOS Github에서 확인하실 수 있습니다.

AOS Github
AOS site

👍너무나 쉽게 적용되는 모습..👍

---

SSR Error

구현은 아무렇지 않게 작동하였지만.. 왼쪽 하단에 에러가 출력되어 있었다. 에러의 이유는 초기 렌더링과 서버에서 렌더링된 것이 일치하지 않기 때문이었다..흑흑

서버에서 렌더링된 페이지와 클라이언트에서 렌더링된 페이지 간의 구조나 데이터가 다를 때 발생한다고 합니다..😥

Next.js는 SSR(Server-Side Rendering) 기반의 프레임워크로, 웹 페이지를 서버에서 렌더링하고 렌더링된 페이지를 클라이언트로 전송하여 웹의 초기 로딩 성능을 개선하는데 탁월한 기능을 가지고 있다고 합니다.

즉, Next.js는 서버에서 HTML을 클라이언트로 보내주는 방식입니다. 이로인해 유저가 빠르게 화면을 인식할 수 있지만, 유저가 상호작용을 하기 전에는 script가 로드되지 않습니다.

---

당연히 AOS를 이용하기 전에는 오류가 나지 않았으니 AOS의 문제임이 확실했고, 결국 해결책을 찾을 수 있었다.

해결책은 정말 간단하게도, AOS 초기화해주는 부분을 useEffect로 감싸주면 끝이었다..(?)

---

'use client'
import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

export default function TEST() {

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

  return (
    <section className='flex-col'>
      <div
    	data-aos="fade-up"
    	data-aos-easing="ease-out"
    	data-aos-duration="500"
    	data-aos-once="true"
    	data-aos-delay="300"
          className="text-bluePoint text-6xl font-bold">TEST</div>
    </section>
  );
}

---

오류 해결..🙄