- Published on
10단계: Next.js 배포 및 Vercel 사용법
Next.js 배포 및 Vercel 사용법
Next.js는 Vercel에서 개발된 프레임워크로, Vercel과의 통합 배포가 가장 빠르고 효율적입니다.
자동 빌드, CDN 연동, 커스텀 도메인 연결 등 배포에 필요한 기능이 모두 포함되어 있습니다.
10-1. Vercel이란?
- Next.js 개발사(구 ZEIT)가 만든 클라우드 플랫폼
- GitHub/GitLab/Bitbucket 저장소와 연동 가능
- 서버리스 API, 정적 파일, 이미지 최적화 자동 적용
- 무료 요금제로 시작 가능, 커스텀 도메인도 지원
10-2. 프로젝트 준비
# 소스코드를 GitHub에 업로드
git init
git add .
git commit -m "init"
git remote add origin https://github.com/your/repo.git
git push -u origin main
.env.local은 커밋하지 않도록 .gitignore에 추가해야 합니다.
빌드 스크립트는 기본적으로 다음과 같습니다:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
10-3. Vercel 연결 및 배포
- https://vercel.com에 로그인
- "New Project" → GitHub 저장소 선택
- 설정은 기본값으로 그대로 진행
- 배포 완료 후 URL 자동 생성됨
예시:
https://<project-name>.vercel.app
10-4. 환경변수 등록
Vercel 대시보드 → 프로젝트 → Settings → Environment Variables
예:
GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=yyy
NEXTAUTH_URL=https://yourdomain.vercel.app
Production,Preview,Development환경별로 구분 가능
10-5. 커스텀 도메인 연결
- Vercel 대시보드 > Domains 탭 → 도메인 추가
- 안내에 따라 DNS 레코드(CNAME 또는 A) 설정
- SSL 인증서 자동 적용
10-6. 배포 후 확인 사항
| 항목 | 점검 내용 |
|---|---|
| API Routes | /api/hello 호출 정상 여부 확인 |
| 이미지 최적화 | 외부 이미지 도메인 등록 여부 (next.config.js) |
| SEO 메타 태그 | head 구성 확인 |
| 반응형 레이아웃 | 모바일에서 UI 깨짐 없는지 확인 |
| 환경변수 반영 여부 | 실제 배포 URL에서 값 잘 적용되는지 확인 |
요약
- Vercel은 Next.js 공식 호스팅 플랫폼으로, GitHub 연동으로 자동 배포가 가능합니다.
- 커밋 → 빌드 → 배포가 자동화되고, 배포 URL도 즉시 생성됩니다.
- 환경변수, 커스텀 도메인, 배포 이력 관리까지 간단하게 구성할 수 있습니다.
심화학습
Q1. 빌드 시 next build가 실패하면 Vercel에서 어떤 방식으로 에러를 보여줄까?
A: Vercel의 Deploy Logs에서 해당 에러의 로그를 실시간으로 출력합니다. 콘솔 기반 빌드 로그에서 에러 위치와 메시지를 확인할 수 있습니다.
Q2. Vercel의 서버리스 구조는 API Routes와 어떤 방식으로 연동되는가?
A: /api/* 경로로 생성된 Next.js API 파일은 Vercel의 서버리스 함수(Lambda)로 자동 배포되며, 요청 시마다 실행됩니다.
Q3. 다국어(i18n), SSR 등 복잡한 설정이 있을 때 Vercel에서 발생할 수 있는 이슈는 무엇이 있을까?
A: SSR에서 외부 API 호출 시 시간 초과, 환경변수 누락, i18n 설정 충돌 등이 발생할 수 있으며, 서버리스 특성상 상태가 유지되지 않음에 유의해야 합니다.