NextJS에서 Prisma를 사용한 Vercel에 배포 오류 해결 방법

Next.js

 

 

 

🤷‍♂️ Next.js, Prisma, Postgresql 프로젝트

---

지금 Next.js, Prisma, Postgresql 활용해서 개인 프로젝트로 Vercel에 배포하려는 첨 보는 에러 메시지에 황당했습니다.

 

로컬에서 빌드도 잘되고 환경변수도 잘 세팅되어 있고 계속 문제해결을 위해서 골머리를 앓고 있었습니다.

 

 

 

문제의 에러 메시지

Learn how: https://pris.ly/d/vercel-build
    at fa (/vercel/path0/node_modules/@prisma/client/runtime/library.js:33:69)
    at new t (/vercel/path0/node_modules/@prisma/client/runtime/library.js:131:739)
    at 3822 (/vercel/path0/.next/server/app/api/auth/check-email/route.js:1:1860)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
    at 1862 (/vercel/path0/.next/server/app/api/auth/check-email/route.js:1:957)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
    at r (/vercel/path0/.next/server/app/api/auth/check-email/route.js:1:2422)
    at /vercel/path0/.next/server/app/api/auth/check-email/route.js:1:2461
    at t.X (/vercel/path0/.next/server/webpack-runtime.js:1:1285)
    at /vercel/path0/.next/server/app/api/auth/check-email/route.js:1:2435 {
  clientVersion: '5.16.1',
  errorCode: undefined
}
> Build error occurred
Error: Failed to collect page data for /api/auth/check-email
    at /vercel/path0/node_modules/next/dist/build/utils.js:1268:15

 

Prisma 관련된 에러 같기도 하고 환경변수 셋팅이 잘못된 에러인 거 같기도 하면서 도통 이해가 되지 않았습니다.

 

드디어 문제의 원인을 찾았습니다.

build 과정에서 Prisma는 prisma generate 명령어로 schema.prisma 파일에 변경 사항이나 스키마 구조가 변경되었을 때 prisma.client 상태를 최신으로 유지하기위해서 최신화를 시켜야 되는데 build 과정에서 해당 명령어를 생략해서 나타나는 에러였습니다.

 

프로젝트에 package.json에서 build scripts에 prisma generate 추가해 주면 Vercel 배포 시에 prisma schema를 최신상태를 유지해 주기 때문에 오류를 해결합니다.

 

package.json build scripts에 prisma generate 명령어를 추가해주면 됩니다.

 

build 과정에서 prisma generate 명령어로 schema를 최신화 해주면서 Vercel 배포를 완료했습니다. 

 

vercel

 

 

 

자바스크립트 뿌시기

https://itibiza.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88-javascript-%ED%95%A8%EC%88%98-%EC%8A%A4%EC%BD%94%ED%94%84-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

[자바스크립트 시리즈] javascript 함수 스코프 이해하기

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리