Vercel로 배포하기

package.json에 코드 추가 -> 이 명령어들은 직접 호출하진 않고 vercel이 호출하는 용으로 넣어줌

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

vercel 홈페이지 들어감
1. Add New > Project
2. 내 깃허브 디렉토리랑 연결해서 맞는 프로젝트 import
3. Project Name 적기
4. 나머지는 냅두기(명령어 이미 json으로 푸시까지 해둠)

5. 빌드 되다가 오류가 생김 ...

• 타입스크립트 썼는데 설치를 안했다고 오류가 나옴(npm instal
  l --save-dev typescript) 등등등 오류가 몇개 나옴 ㅠㅠ

6. 버셀에서 오류 계속 찾는것보다 로컬 환경(?)에서 먼저 확인할 수 있음

• 터미널에 npm run build 하면 오류를 알려줌. 고치고 푸시하자.
• 오류 싹 고치고 빌드했더니 오류들 박박박 먹더니 성공나옴!

-> 수많은 오류 끝에 드디어 성공 ...ㅠㅠㅠㅠㅠㅠ 배포도 어렵다.

Vercel Dashboard
https://vercel.com/dashboard

typescript 설치
npm install --save-dev typescript

---

1. Vercel에 배포 준비

먼저, package.json 파일에 Vercel이 자동으로 호출할 수 있는 스크립트를 추가한다. 이는 Vercel이 배포 시 자동으로 실행하는 명령어들이다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

2. Vercel로 배포하기

1. Vercel 홈페이지 접속: Vercel Dashboard로 들어간다.
2. 새 프로젝트 추가: 'Add New' > 'Project'를 클릭한다.
3. GitHub 연동: Vercel에서 내 GitHub 계정을 연동하여 원하는 프로젝트를 선택한다.
4. 프로젝트 이름 설정: 프로젝트 이름을 설정한다.
5. 기타 설정은 기본값으로 두기: 기본적으로 package.json에 필요한 명령어가 이미 설정되어 있으므로 나머지 설정은 기본값을 사용한다.

3. 배포 중 오류 발생

배포 중에 오류가 발생할 수 있다. 예를 들어, 타입스크립트를 사용했지만 해당 라이브러리가 설치되지 않아 오류가 나는 경우가 있을 수 있다.

오류 메시지: 타입스크립트 설치가 안 되어 있다는 오류가 발생.
해결 방법: 타입스크립트를 devDependencies에 설치한다.

npm install --save-dev typescript

4. 로컬 환경에서 오류 확인 및 수정

• 배포 오류를 Vercel에서 찾기보다는 로컬 환경에서 먼저 확인하고 수정하는 것이 좋다.

• 로컬에서 빌드 실행: 터미널에서 npm run build 명령어를 실행하여 오류를 확인한다.

• 오류 수정: 오류를 고친 후 수정된 코드를 GitHub에 푸시

5. 배포 성공

모든 오류를 수정한 후 다시 빌드를 하면 Vercel에서 정상적으로 배포가 완료됩니다. 여러 번의 오류를 겪었지만 결국 성공적,,,
어쩌다보니 성공이 되었다...... 수많은 실패들

-> 저 중에 성공한 것들로만 쓰자^^