연결 전에

• Next.js 앱이 GitHub 저장소에 있다. 올리는 명령은 저장과 동기화에 있다.
• 로컬에서 npm run build가 끝나 있다. 로컬에서 실패한 빌드는 Vercel에서도 실패한다.
• package.json이 저장소 루트에 있다. 하위 폴더에만 있으면 나중에 Root Directory를 그 폴더로 지정한다.

가져오기

1. Vercel에 가입하고 GitHub로 로그인한다. 저장소 읽기 권한을 허용해야 목록에 나온다.
2. Add New, Project에서 그 저장소를 Import 한다.
3. Framework Preset이 Next.js인지 확인한다. 빌드 명령은 npm run build로 두고, 출력 폴더를 out으로 바꾸지 않는다.
4. 운영 브랜치가 main인지 확인한다. 저장소 기본 브랜치가 main이면 그렇게 잡힌다.
5. Deploy를 누른다. 환경 변수가 필요한 화면은 이 시점에 실패할 수 있다. 키는 다음 단원에서 넣고 다시 배포한다.

연결된 뒤에는 빌드 결과 폴더를 직접 올리지 않는다. GitHub에 푸시하면 Vercel이 그 커밋을 받아 다시 빌드한다.

자주 막히는 자리

• 목록에 저장소가 없다. GitHub 권한에서 그 저장소를 허용한 뒤 목록을 새로고침한다.
• 프리셋이 Other다. package.json의 next 의존성을 확인하고, 앱이 있는 폴더를 Root Directory로 지정한다.
• 모노레포라 루트에 Next.js가 없다. Root Directory만 앱 폴더로 좁힌다. 저장소 전체를 다른 프로젝트로 바꾸지 않는다.

GitHub Actions로 빌드한 뒤 CLI로 올리는 길은 따로 있다. 이 강좌의 기본 경로는 대시보드의 Git 연결이다. 절차가 다르면 Vercel Git 문서 (새 창)를 본다.