Next.js <-> vercel 배포

**npm 설치 안했다면 

npm install next react react-dom

 

 

방법1.  터미널로 진행

1-1. Next.js 프로젝트 생성

먼저 Next.js 프로젝트를 만든다.
(이미 있는 프로젝트가 있다면 이 단계는 건너뛰어도 됨.)

 

 

npx create-next-app@latest my-next-app
cd my-next-app

---

1-2. GitHub에 프로젝트 올리기

Vercel은 GitHub, GitLab, Bitbucket과 연동해서 배포할 수 있다.
아래는 GitHub 기준.

 

git init
git add .
git commit -m "init: Next.js 프로젝트 생성"
git branch -M main
git remote add origin https://github.com/사용자명/레포명.git
git push -u origin main

---

1-3. Vercel 계정 생성 및 프로젝트 연동

1. Vercel 홈페이지에 가입 (GitHub 계정으로 로그인 추천)
2. "New Project" 클릭
3. GitHub에서 방금 올린 레포 선택
4. "Import" 클릭

---

1-4. 배포 설정 및 환경 변수 추가

1. 프로젝트를 가져오면 기본적으로 Next.js를 감지해서 자동으로 설정됨
2. 빌드 커맨드는 기본값(next build)을 그대로 사용하면 됨
3. .env.local에 있는 환경 변수를 Vercel 대시보드에서 추가할 수 있음
   • Project Settings → Environment Variables에서 추가

---

 

방법2. https://vercel.com/  웹에서 진행

 

2-1.  홈페이지가면 아래와 같은 화면나온다.

 

간단히 next.js > Deploy 버튼 누르면 

next.js 프로젝트 생성 및 git repository 한번에 만들어진다. 

 

 

 

 

 

 

위 단계가 끝나서 Dashboard 로 가면 오른쪽 상단에 아래와 같이 버튼이 있다. 

 

"Repository"는 위단계로 새로 생성된 git repository로 이동되고,

"visit" 은 자동으로 배포된 웹페이지로 이동된다. ( Vercel이 제공하는 도메인(https://your-project.vercel.app)이 생성된거다)

 

 

---

** 커스텀 도메인 연결 (선택)

1. Vercel에서 제공하는 기본 도메인이 아닌, 자신만의 도메인을 연결할 수도 있음
2. Project Settings → Domains에서 원하는 도메인 추가 가능

---

** 자동 배포 (CI/CD)

Vercel은 기본적으로 GitHub와 연결되면 자동 배포가 설정됨.
즉, main 브랜치에 push하면 자동으로 빌드 & 배포가 이루어짐.

코드 수정 후 push하면 자동배포됨:

 

git add .
git commit -m "fix: 업데이트 내용"
git push origin main

---

8. Vercel CLI 사용 (선택)

Vercel의 명령어 기반 툴(CLI)을 사용하면 로컬에서도 쉽게 배포할 수 있음.

설치

npm install -g vercel

 

로그인

vercel login

 

로컬에서 배포

vercel

 

vercel

• 처음 실행하면 몇 가지 질문이 나오는데, 기본값 선택하면 됨.
• 이후 배포 URL이 생성됨.

 

 

 

 

***이때, Preview 로 배포가 된다.  preview로 운영에 반영 전 확인하고 운영에 반영한다. 

 

 

 

프리뷰 -> 프로덕션 배포

vercel --prod