[Next.js] 눈물의 vercel 배포 ( ReferenceError: document is not defined) feat. lottie 애니메이션

1. 문제

Next.js 로 개발중인 Stellar Link를 Vercel 로 빌드 및 배포를 시도하였다.

그런데..... 분명 로컬 환경에서는 npm run build 를 통해 빌드가 제대로 되었는데, vecel 환경에서만 빌드가 도저히 되지 않았다.

발생했던 오류는 

[16:11:59.241] Running build in Washington, D.C., USA (East) – iad1
[16:11:59.754] Cloning github.com/heeyeon9578/Stellar-Link (Branch: main, Commit: ecadf59)
[16:12:00.080] Previous build cache not available
[16:12:01.648] Cloning completed: 1.894s
[16:12:01.981] Running "vercel build"
[16:12:02.406] Vercel CLI 39.3.0
[16:12:02.715] Installing dependencies...
[16:12:05.537] npm warn deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
[16:12:08.829] npm warn deprecated three-mesh-bvh@0.7.8: Deprecated due to three.js version incompatibility. Please use v0.8.0, instead.
[16:12:10.451] npm warn deprecated core-js@1.2.7: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
[16:12:20.619] 
[16:12:20.619] added 471 packages in 18s
[16:12:20.620] 
[16:12:20.620] 69 packages are looking for funding
[16:12:20.620]   run `npm fund` for details
[16:12:20.820] Detected Next.js version: 14.2.20
[16:12:20.824] Running "npm run build"
[16:12:21.041] 
[16:12:21.042] > stellar-link@0.1.0 build
[16:12:21.042] > next build
[16:12:21.042] 
[16:12:22.407] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[16:12:22.408] This information is used to shape Next.js' roadmap and prioritize features.
[16:12:22.408] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[16:12:22.409] https://nextjs.org/telemetry
[16:12:22.409] 
[16:12:22.464]   ▲ Next.js 14.2.20
[16:12:22.464] 
[16:12:22.532]    Creating an optimized production build ...
[16:12:51.781]  ✓ Compiled successfully
[16:12:51.782]    Linting and checking validity of types ...
[16:13:03.716]    Collecting page data ...
[16:13:06.616]    Generating static pages (0/12) ...
[16:13:06.940]    Generating static pages (3/12) 
[16:13:17.843]    Generating static pages (6/12) 
[16:13:17.884]    Generating static pages (9/12) 
[16:13:17.952] ReferenceError: document is not defined
[16:13:17.956]     at createTag (/vercel/path0/.next/server/app/page.js:1:3621)
[16:13:17.956]     at /vercel/path0/.next/server/app/page.js:1:16509
[16:13:17.959]     at /vercel/path0/.next/server/app/page.js:1:16632
[16:13:17.959]     at /vercel/path0/.next/server/app/page.js:1:19457
[16:13:17.960]     at /vercel/path0/.next/server/app/page.js:1:3286
[16:13:17.960]     at 496 (/vercel/path0/.next/server/app/page.js:1:3290)
[16:13:17.960]     at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
[16:13:17.960]     at 7195 (/vercel/path0/.next/server/app/page.js:232:172578)
[16:13:17.960]     at Object.t [as require] (/vercel/path0/.next/server/webpack-runtime.js:1:128)
[16:13:17.960]     at require (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18678) {
[16:13:17.961]   digest: '362491951'
[16:13:17.961] }
[16:13:17.962] 
[16:13:17.962] Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
[16:13:17.962] 
[16:13:17.962] ReferenceError: document is not defined
[16:13:17.963]     at createTag (/vercel/path0/.next/server/app/page.js:1:3621)
[16:13:17.963]     at /vercel/path0/.next/server/app/page.js:1:16509
[16:13:17.963]     at /vercel/path0/.next/server/app/page.js:1:16632
[16:13:17.963]     at /vercel/path0/.next/server/app/page.js:1:19457
[16:13:17.963]     at /vercel/path0/.next/server/app/page.js:1:3286
[16:13:17.963]     at 496 (/vercel/path0/.next/server/app/page.js:1:3290)
[16:13:17.964]     at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
[16:13:17.964]     at 7195 (/vercel/path0/.next/server/app/page.js:232:172578)
[16:13:17.964]     at Object.t [as require] (/vercel/path0/.next/server/webpack-runtime.js:1:128)
[16:13:17.964]     at require (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18678)
[16:13:17.977]  ✓ Generating static pages (12/12)
[16:13:17.979] 
[16:13:17.982] > Export encountered errors on following paths:
[16:13:17.982] 	/page: /
[16:13:18.023] Error: Command "npm run build" exited with 1
[16:13:18.449]

 

로 결국 요점만 파악해보자면,

---

 

ReferenceError: document is not defined

---

 

인데.... document 를 사용한 코드를 다양한 방법으로 수정해봐도 도저히 고쳐지지 않았다. 

보면 알겠지만, document 를 사용한 스크립트에 'use client' 도 추가해보고, 

 

 

useEffect 에서 처음 화면 로딩시 (즉, 의존성 배열에 아무값도 안넣었을 때)

typeof document !== undefined

일때만 코드가 실행되도록 변경도 해봤다.

 

하지만.... 모두 소용없었고,,,, 진심 포기하고 싶을정도로 이유를 알기 어려웠다.

 

그러다가, 
https://bori-note.tistory.com/54

ReferenceError: document is not defined (feat. Next.js + lottie)

해당 포스트를 접하게 되었다!

 

어?  나도 Next.js , lottie 애니메이션 사용하는데 같은 오류가 나셨잖아..?

바로 적용해보기로 했다!!!!!!

 

2. 문제 원인

바로....

import Lottie from 'lottie-react';

 

였다!!!!!

 

로티 애니메이션을 불러오는데 DOM 로드 전에 순서가 꼬인 것이다.

 

3. 해결 방법

import dynamic from 'next/dynamic';
const Lottie = dynamic(() => import('lottie-react'), { ssr: false });

 

로 변경해주었다.

이렇게 하면, 클라이언트 전용으로 설정되어 오류가 없어진다.

무사히 빌드 및 배포에 성공할 수 있었다!!!!!