Lottie (w/ next.js)

지난 번에 Vue 에서 Lottie 사용하는 방법을 정리했는데,
이제는 React + Next 기반 프로젝트를 하고 있어서 다시금 Lottie 정리 !

 

🚨 next 의 ssr 렌더링 때문에 document is not defined 이슈 발생

 

⇒ dynamic import 로 대체

(이미 next 사용자에겐 나름 익숙하기 때문에 next/dynamic 에 대한 설명은 생략)

단, lazy-loading 관련 next 공식 문서를 참고용으로 첨부

 

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading

Optimizing: Lazy Loading | Next.js

 

1. 일단 Lottie 를 그냥 사용할 수는 없고 라이브러리를 필수로 받긴 해야한다. 라이브러리 선택은 본인의 몫

나의 경우 이전부터 쓰던 lottie-web 을 선택했다.

 

https://www.npmjs.com/package/lottie-web

lottie-web

 

2. Lottie.tsx

여러 기능들은 일단 제외하고 기본 기능만 갖고 있는 Lottie 용 컴포넌트 작성

import React, { useState, useRef, useEffect } from "react";
import Lottie from "lottie-web";

// Lottie 컴포넌트 정의
const LottieComponent = ({
                           animationData,
                           ...restProps
                         }) => {
  // Lottie 애니메이션 컨테이너에 대한 ref
  const animationContainer = useRef<any>(null);
  const [animationInstance, setAnimationInstance] = useState<any>(null);

  useEffect(() => {
    const animationOptions = {
      container: animationContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice",
      },
    } as any;

    // Lottie 애니메이션 로드
    const animation = Lottie.loadAnimation(animationOptions);
    // Lottie 애니메이션 상태 업데이트
    setAnimationInstance(animation);

    //  컴포넌트 unmount 시 애니메이션 제거
    return () => {
      animation.destroy();
    };
  }, [animationData]);

  return <div ref={animationContainer} {...restProps} />;
};

export default LottieComponent;

 

 

 

3. Lottie 를 사용하고자 하는 컴포넌트에 dynamic import 를 사용해서 이전에 만들어둔 Lottie 컴포넌트를 데려온다.

그냥 import 를 하면 위에서 언급한 것처럼 runtime 오류가 나는데, 나의 경우 오류는 아래와 같았다.

 

(next 14 + app router 에서는 그냥 잘 보이긴 한다 화면 상으로는,, 빌드 시 위의 에러 발생)

아무쪼록 에러가 안 보이는 편이 낫기 때문에 ssr 을 false 로 설정할 수 있는 dynamic import 로 Lottie 를 데려와서,

 

'use client';

import dynamic from "next/dynamic";
import lottieTest from '../../../public/assets/lottie/lottieTest.json';
export default function Test() {
  const Lottie = dynamic(() => import('../../util/common/Lottie'), {ssr: false});

  return (
    <main>
      <div className='w-72'>
        <Lottie animationData={lottieTest} />
      </div>
    </main>
  )
}

 

위와 같이 적용하고자 하는 lottie json 파일을 넣어주면 된다. 끗 - ! 😊

 

** References

https://velog.io/@smurf_/내가-답답해서-적어두는-리액트에서-쓰는-Lottie-Web

내가 답답해서 적어두는 리액트에서 쓰는 Lottie-Web