[Next.js] Vercel에서 Next.js 프로젝트 배포 도중에 만난 에러 : No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"

1. Vercel에서 Next.js 배포 중 만난 첫 에러 ㅠ

1.1. root 디렉토리 관련 에러

첫 Next.js 프로젝트를 스마트폰에서 테스트해 보기 위해서 Vercel에서 배포를 진행해봤다. 이번 프로젝트에서는 웹 AR이 킬러 콘텐츠였기 때문에 단말기의 카메라 제어가 필수이다. 카메라는 보안 문제로 http에서는 제어가 불가하고 https에서만 가능하다(단, 카메라를 탑재하고 있는 노트북을 이용해 개발할 때 로컬에서의 제어에는 http라도 문제없다). Vercel에서 배포하면 https는 기본으로 적용된다. 또한 깃허브와 연동되어 있어 푸시만 해도 변경내용이 자동으로 빌드된다.

 

Vercel의 편리한 기능 덕분에 간편하게 배포가 될 거라 생각했는데-개인적 경험으로는-꼭 그렇지는 않았다. [그림 1]은 배포 시 만난 첫 에러인데, 이것 외에도 수많은 에러 몹(?)들을 클리어해야 했다!

[그림 1] root 디렉토리 관련 에러

 

1.2. root 디렉토리 명을 프로젝트 디렉토리 명으로 변경해야

위 에러는 Vercel에 기본값으로 제공하는 디렉토리 명이 아닌 Next.js 프로젝트 생성 시 지정한 디렉토리 명으로 변경하면 해결되는 간단한 문제였다. 

 

참고 자료
https://wnsdufdl.tistory.com/504

 

2. 두번째 에러 ㅠ

2.1. 의존성 설치 에러

첫 에러의 경우 배포 프로세스가 시작되자마자 발생했다면, 이번 에러는 한참 진행이-잘-되던 중에 가슴 덜컹하게 발생했다! 에러 메시지는 다음과 같다.

Build Failed
Command "npm install" exited with 1

에러메시지의 내용으로 짐작할 수 있다시피 의존성 설치에서 발생한 에러다. 지금 진행하는 프로젝트의 경우 의존성 설치 시 --force 옵션을 추가해야 한다. Vercel에서는 Build & Development Settings에서 Install Command에 해당 내용을 작성해 주면 된다. Override 토글도 On 해줬다(그림 2 참조).

 

[그림 2] 빌드 세팅에 npm install --force 추가

 

참고 자료
https://efficientuser.com/2022/11/24/npm-install-force-in-vercel-deployment/

 

3. 로컬에서 빌드해 보고 배포하자!

개발자 모드(npm run dev)로 프로젝트를 실행하면 아무 문제없었기에 대수롭지 않게 생각했는데, 빌드(npm run build) 시에-위에서 언급한 에러뿐만 아니라-수많은 에러를 만났다. Vercel에 배포전에 로컬에서 빌드해 보고 에러 없이 성공적으로 빌드가 되면 배포하는 것이 좋겠다!