[Bug] Vercel 배포 시 Prerender Error로 인한 빌드 실패

[sangjin025]

겪고 있는 문제

Vercel 배포 시 "yarn run build"가 1번 코드로 실패하며 빌드가 중단됩니다.

에러 로그

Vercel 빌드 로그에서 아래와 같은 에러가 발생했습니다.

18:49:30.030 Running build in Washington, D.C., USA (East) – iad1
18:49:30.030 Build machine configuration: 2 cores, 8 GB
18:49:30.365 Cloning github.com/sangjin025/FlowPlan-front (Branch: main, Commit: 26a9ffe)
18:49:30.371 Previous build caches not available.
18:49:30.841 Cloning completed: 475.000ms
18:49:31.289 Running "vercel build"
18:49:31.670 Vercel CLI 48.8.0
18:49:31.974 Installing dependencies...
18:49:32.343 yarn install v1.22.19
18:49:32.408 [1/4] Resolving packages...
18:49:32.564 [2/4] Fetching packages...
18:49:51.345 [3/4] Linking dependencies...
18:49:55.573 [4/4] Building fresh packages...
18:49:55.683 Done in 23.34s.
18:49:55.706 Detected Next.js version: 14.2.16
18:49:55.708 Running "yarn run build"
18:49:55.871 yarn run v1.22.19
18:49:55.890 $ next build
18:49:56.490 Attention: Next.js now collects completely anonymous telemetry regarding usage.
18:49:56.490 This information is used to shape Next.js' roadmap and prioritize features.
18:49:56.491 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:
18:49:56.491 https://nextjs.org/telemetry
18:49:56.491 
18:49:56.545   ▲ Next.js 14.2.16
18:49:56.546 
18:49:56.596    Creating an optimized production build ...
18:50:14.924  ✓ Compiled successfully
18:50:14.925    Skipping validation of types
18:50:14.925    Skipping linting
18:50:15.188    Collecting page data ...
18:50:16.544    Generating static pages (0/9) ...
18:50:16.985  ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/404". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
18:50:16.985     at o (/vercel/path0/.next/server/chunks/681.js:1:10884)
18:50:16.985     at c (/vercel/path0/.next/server/chunks/681.js:1:21824)
18:50:16.986     at u (/vercel/path0/.next/server/chunks/113.js:1:1174)
18:50:16.986     at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
18:50:16.986     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
18:50:16.986     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
18:50:16.986     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:16.986     at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
18:50:16.986     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
18:50:16.986     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:16.987 
18:50:16.987 Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
18:50:16.987 
18:50:16.992    Generating static pages (2/9) 
18:50:17.081  ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/login". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
18:50:17.082     at o (/vercel/path0/.next/server/chunks/681.js:1:10884)
18:50:17.082     at c (/vercel/path0/.next/server/chunks/681.js:1:21824)
18:50:17.082     at u (/vercel/path0/.next/server/chunks/113.js:1:1174)
18:50:17.082     at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
18:50:17.082     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
18:50:17.082     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
18:50:17.082     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.082     at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
18:50:17.083     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
18:50:17.083     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.083 
18:50:17.083 Error occurred prerendering page "/login". Read more: https://nextjs.org/docs/messages/prerender-error
18:50:17.083 
18:50:17.084    Generating static pages (4/9) 
18:50:17.149  ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/new-project". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
18:50:17.149     at o (/vercel/path0/.next/server/chunks/681.js:1:10884)
18:50:17.150     at c (/vercel/path0/.next/server/chunks/681.js:1:21824)
18:50:17.150     at u (/vercel/path0/.next/server/chunks/113.js:1:1174)
18:50:17.153     at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
18:50:17.153     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
18:50:17.154     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
18:50:17.154     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.154     at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
18:50:17.154     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
18:50:17.154     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.154 
18:50:17.154 Error occurred prerendering page "/new-project". Read more: https://nextjs.org/docs/messages/prerender-error
18:50:17.154 
18:50:17.175  ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
18:50:17.176     at o (/vercel/path0/.next/server/chunks/681.js:1:10884)
18:50:17.176     at c (/vercel/path0/.next/server/chunks/681.js:1:21824)
18:50:17.176     at u (/vercel/path0/.next/server/chunks/113.js:1:1174)
18:50:17.177     at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
18:50:17.177     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
18:50:17.177     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
18:50:17.177     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.177     at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
18:50:17.178     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
18:50:17.178     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.178 
18:50:17.178 Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
18:50:17.178 
18:50:17.179    Generating static pages (6/9) 
18:50:17.205  ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/profile". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
18:50:17.205     at o (/vercel/path0/.next/server/chunks/681.js:1:10884)
18:50:17.206     at c (/vercel/path0/.next/server/chunks/681.js:1:21824)
18:50:17.206     at u (/vercel/path0/.next/server/chunks/113.js:1:1174)
18:50:17.206     at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
18:50:17.206     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
18:50:17.207     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
18:50:17.207     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.207     at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
18:50:17.207     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
18:50:17.207     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.207 
18:50:17.208 Error occurred prerendering page "/profile". Read more: https://nextjs.org/docs/messages/prerender-error
18:50:17.208 
18:50:17.235  ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/projects". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
18:50:17.235     at o (/vercel/path0/.next/server/chunks/681.js:1:10884)
18:50:17.239     at c (/vercel/path0/.next/server/chunks/681.js:1:21824)
18:50:17.239     at u (/vercel/path0/.next/server/chunks/113.js:1:1174)
18:50:17.239     at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
18:50:17.239     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
18:50:17.239     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
18:50:17.239     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.240     at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
18:50:17.240     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
18:50:17.240     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.240 
18:50:17.240 Error occurred prerendering page "/projects". Read more: https://nextjs.org/docs/messages/prerender-error
18:50:17.240 
18:50:17.263  ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/settings". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
18:50:17.263     at o (/vercel/path0/.next/server/chunks/681.js:1:10884)
18:50:17.263     at c (/vercel/path0/.next/server/chunks/681.js:1:21824)
18:50:17.263     at u (/vercel/path0/.next/server/chunks/113.js:1:1174)
18:50:17.263     at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
18:50:17.264     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
18:50:17.264     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
18:50:17.264     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.264     at nB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
18:50:17.264     at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
18:50:17.264     at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
18:50:17.264 
18:50:17.265 Error occurred prerendering page "/settings". Read more: https://nextjs.org/docs/messages/prerender-error
18:50:17.265 
18:50:17.267  ✓ Generating static pages (9/9)
18:50:17.310 
18:50:17.311 > Export encountered errors on following paths:
18:50:17.311 	/(auth)/login/page: /login
18:50:17.311 	/(dashboard)/new-project/page: /new-project
18:50:17.311 	/(dashboard)/page: /
18:50:17.311 	/(dashboard)/profile/page: /profile
18:50:17.311 	/(dashboard)/projects/page: /projects
18:50:17.312 	/(dashboard)/settings/page: /settings
18:50:17.312 	/_not-found/page: /_not-found
18:50:17.351 error Command failed with exit code 1.
18:50:17.352 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:50:17.372 Error: Command "yarn run build" exited with 1

원인 분석

Next.js가 페이지를 서버에서 미리 렌더링 하려는 시점에, localStorage나 sessionStorage 같이 브라우저(클라이언트)에서만 사용 가능한 API에 접근하여 에러가 발생

해결 방안

Prerender가 필요 없는 파일들에 'use client' 지시어를 추가