개념

프로젝트 하나 안에 배포가 여러 개 쌓입니다.

프로젝트

Vercel 프로젝트는 Git 저장소 하나와 연결된다. 그 저장소의 Next.js 앱이 빌드 대상이다. 화면 코드는 React와 Next.js에 있고, 표와 로그인은 Supabase에 있다. Vercel은 그 앱을 실행할 자리를 제공한다.

배포

배포(Deployment)는 커밋 하나를 빌드한 결과다. 결과마다 주소가 생긴다. 빌드가 끝나면 그 주소로 그 시점의 앱을 연다.

이름 언제 생기나
운영(Production) 운영 브랜치에 푸시하거나 머지할 때. 기본 브랜치는 main이다. 방문자가 보는 프로젝트 도메인은 이 배포를 가리킨다.
미리보기(Preview) 운영 브랜치가 아닌 브랜치에 푸시할 때, Pull Request를 열 때. 배포마다 주소가 다르다. 운영 주소는 바뀌지 않는다.

운영 브랜치는 하나다. 미리보기 브랜치는 여러 개일 수 있다. 브랜치를 나누는 방법은 GitHub · 브랜치·PR에 있다.

빌드와 실행

Framework Preset이 Next.js이면 빌드 명령은 npm run build다. 빌드가 끝난 앱을 Node가 실행한다. Next.js 16은 Node.js 20.9 이상이 필요하다. 프로젝트 설정의 Node.js 버전이 그보다 낮으면 빌드가 거절된다.

output: 'export'는 HTML 파일만 뽑는 다른 모드다. 서버 함수와 Proxy가 빠진다. 그 차이는 Next.js 배포 단원에 있다. 이 강좌의 기본은 서버 기능을 유지하는 Next.js 배포다.

처음부터 HTML 파일만 있는 저장소는 Framework Preset을 Other로 두고 빌드 명령을 비운다. 절차는 정적 사이트에 있다.

하지 않는 일

  • 테이블을 만들거나 SQL을 실행하지 않는다. 그건 PostgreSQL과 Supabase다.
  • 컴포넌트를 그려 주지 않는다. 화면은 React, 경로는 Next.js다.
  • Git 이력을 저장하지 않는다. 푸시 전에 커밋은 GitHub 쪽 일이다.