② Vercel 실전 — Next.js 배포 10분 완성

준비물

• GitHub 계정
• Next.js 프로젝트 하나 (또는 npx create-next-app@latest)
• Vercel 계정 (vercel.com) — GitHub으로 로그인 가능

1. GitHub에 프로젝트 올리기

git init
git add .
git commit -m "initial commit"
gh repo create my-site --public --source=. --push

또는 GitHub 웹에서 새 레포 만들고 git remote add origin ... && git push -u origin main.

2. Vercel에 프로젝트 연결

1. Vercel 대시보드 → Add New → Project
2. GitHub 레포 목록에서 선택 → Import
3. Framework Preset: Next.js 자동 감지
4. Deploy 클릭

약 1~3분 뒤 your-project.vercel.app 주소가 발급됩니다.

3. 환경변수 넣기

.env.local 에 있던 키를 Vercel에도 복사해 둬야 합니다.

• Project → Settings → Environment Variables
• Key, Value 입력
• Environment: Production / Preview / Development 중 적용 범위 선택
• Save 후 한 번 더 배포(Redeploy)해야 반영

예시:

ANTHROPIC_API_KEY = sk-ant-xxxx   (Production, Preview)
NEXT_PUBLIC_SITE_URL = https://myssite.com   (Production)

4. 커스텀 도메인 붙이기

1. Project → Settings → Domains → myssite.com 입력
2. Vercel이 요구하는 A 또는 CNAME 레코드를 도메인 레지스트라에 추가
   • 루트: A 76.76.21.21
   • www: CNAME cname.vercel-dns.com
3. DNS 전파 후 자동 SSL 발급, HTTPS 활성화

팁: 루트(myssite.com)와 www(www.myssite.com)를 둘 다 추가한 뒤, 한쪽을 Primary로 지정하면 자동 리디렉션됩니다.

5. 프리뷰 배포 — 협업의 진짜 핵심

Vercel은 GitHub에 push하는 모든 브랜치/PR 마다 고유 URL로 자동 배포해줍니다.

• PR을 열면 my-site-git-feature-x.vercel.app 같은 URL 댓글이 자동으로 달림
• 디자이너·기획자에게 이 URL을 공유 → 프로덕션은 건드리지 않고 리뷰
• 머지되면 자동으로 프로덕션 배포

6. 빌드가 실패하면 — 디버깅 순서

1. Deployments → 해당 배포 → Logs 확인
2. 에러 메시지 맨 위쪽 줄부터 읽는다 (아래는 뒤따른 에러)
3. 로컬에서 동일한 노드 버전으로 빌드 재현
   • package.json 에 "engines": { "node": ">=20" } 명시 권장
4. .env 누락이면 Settings → Env Vars 추가 후 Redeploy

7. 알아두면 좋은 Vercel 기능

• Edge Functions — 글로벌 CDN에서 돌아가는 초저지연 함수
• Analytics — 실사용자 지표 (유료 플랜)
• Serverless Functions — app/api/** 의 Route Handler가 이걸로 배포됨
• ISR — revalidate 옵션으로 정적이지만 주기적으로 재생성

8. 상용 서비스라면 Pro 플랜을 써라

Hobby(무료)는 비상업적 프로젝트 전용입니다. 상업 사이트는 Pro. 공식 가격: vercel.com/pricing.

다음 편: Netlify 실전 — 폼 처리·리디렉션 룰·엣지 함수가 필요할 때 강력한 대안.