• Next.js의 공식 파트너이자 가장 쉽고 성능이 좋은 Vercel을 통해 배포해보려고 한다.

---

⭐ Vercel을 통한 배포 방법

첫번째

• GitHub에 코드 올리기
• Vercel은 GitHub와 연동하여 자동으로 배포를 진행하기 때문에 먼저 코드를 GitHub에 올려야 한다.
• 개발하면서 이미 Github에 코드를 올렸기 때문에 다음 단계로 진행한다.

두번째

• Vercel 가입: Vercel 웹사이트에 접속하여 GitHub 계정으로 로그인한다.
  

• 프로젝트 가져오기 (Import): Vercel 대시보드에서 Add New 또는 Import Project 버튼을 클릭한다.

• Import Git Repository 목록에서 포트폴리오 저장소를 선택한다.

• 설정 확인 (Configuration): Vercel이 저장소를 분석하고 Next.js 프로젝트임을 자동으로 인식한다.
• Build & Output Settings 섹션은 기본값(Next.js)으로 두어도 되지만, 'Root Directory'는 확인해야한다!
• 나의 경우 코드를 src/ 폴더에 넣었기 때문에, Root Directory가 src로 설정되어 있는지 확인해야 한다. (만약 src 폴더가 없다면 기본값인 /를 사용한다.)

세번째

• eploy 버튼 클릭: 모든 설정이 맞다면 Deploy 버튼을 클릭한다.
• 자동 빌드: Vercel이 GitHub에서 코드를 다운로드하고, 빌드(Build) 및 배포(Deploy) 과정을 자동으로 진행한다. (약 1~2분 소요)

• 인터넷에 나오는 모든 방법을 해봐도 실패해서 결국 삭제하고 다시 진행했다.
• 다시 진행하면서 알게 된게 Framework를 Next.js로 지정하고 경로를 src/로 지정했더니 Framework가 자동으로 other로 바뀌었다. (아마 이전 배포에서 이게 원인인듯 하다.)

• 다시 배포를 진행하니 이번엔 에러가 났다.
• package.json을 못찾아서 나는 에러라길래 경로를 src에서 그냥 ./로 수정했다.

성공!