3. Next.js 앱 Vercel 배포
Vercel은 Next.js에 최적화되어 있어 배포가 간단합니다. Next.js 프로젝트가 nextjs-frontend/에 있다고 가정합니다.
3.1. Git 저장소 연결
Vercel 대시보드로 이동하여 "New Project"를 클릭하고 Git 저장소(GitHub, GitLab, Bitbucket)를 연결합니다. Vercel은 일반적으로 Next.js 프로젝트를 자동으로 감지합니다.
3.2. 프로젝트 설정 구성
프로젝트를 가져올 때 Vercel은 구성을 요청합니다. Next.js 앱이 하위 디렉토리(예: nextjs-frontend/)에 있는 경우 루트 디렉토리를 지정해야 합니다.
- 프로젝트 이름: YourAppName
- 프레임워크 프리셋: Next.js
- 루트 디렉토리:
nextjs-frontend - 빌드 및 출력 설정: 일반적으로 기본값으로 둡니다 (Vercel이 Next.js 빌드 명령을 자동으로 감지합니다).
"Deploy"를 클릭합니다. 그러면 Vercel이 Next.js 애플리케이션을 빌드하고 배포합니다.
3.3. 환경 변수 (필요한 경우)
Next.js 앱이 환경 변수(예: .env.local)를 사용하는 경우 Vercel 프로젝트 설정의 "Environment Variables"에서 추가할 수 있습니다.
예를 들어, Next.js 앱이 API 엔드포인트를 알아야 하는 경우 다음 변수를 추가할 수 있습니다.
- 이름:
NEXT_PUBLIC_API_URL - 값:
https://your-vercel-domain.vercel.app/api(또는 사용자 지정 도메인)
환경 변수를 추가한 후 Vercel 배포를 다시 시작해야 합니다.