에러 와라라라라라락

문제

lottie를 사용하는 모든 파일에서 Reference Error가 발생하는 것을 확인했다. Next.js의 SSR 환경에서 동작하지 않는 것 같다.

해결

lottie는 자스의 window를 사용한다! window는 클라이언트 사이드에만 정의되어있기 때문에 서버에서 찾지를 못한다. 따라서 dynamic import로 lottie를 가져오고 SSR시 사용하지 않도록 해준다.

아래의 기존 코드를

import Lottie from 'react-lottie-player';
import lottieJson from '../public/lotties/이름.json';

다음과 같이 바꿔준다.

import dynamic from 'next/dynamic';
const Lottie = dynamic(() => import('react-lottie-player'), { ssr: false });
import lottieJson from '../public/lotties/이름.json';

next/dynamic 공식문서

Optimizing: Lazy Loading