logo

JEONGGON

    블로그
github
mode
목 차
down-arrow

Next.js 배포

2024.02.20.

post-thumbnail

Deployment

1. 배포하기

1-1. package.json 명령어 추가

// package.json

{
  ...
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  ...
}
  1. "build": "next build" : 어플리케이션을 실제로 production 용으로 만들기
  2. "start": "next start" : 어플리케이션을 production 모드로 시작해 줌
  • 해당 명령어를 직접 호출하지는 않으며, Vercel(클라우드 플랫폼 회사, Next.js 개발 및 프로젝트 배포 운영)이 호출함

- push 전에 프로젝트가 build 가능한지 확인하기

  • npm run build 실행
    • 에러 발생 요소를 미리 확인 할 수 있음

1-2. push 하기

  • 추가된 명령어와 함께 소스코드 GitHub에 push 하기

1-3. Vercel에 접속

  1. Add New -> Project 클릭

add new

  1. 배포할 프로젝트의 레포지토리 선택

select repo

  1. 프로젝트 이름 작성, 루트 디렉토리(‘./‘)는 수정하면 안 됨

setting

  1. Build and Output Settings

    • package.json의 스크립트에서 작성한 npm run buildnpm run start 자동으로 실행 될 것임
  2. API 환경변수 키 값이 있을 경우, 작성

  3. Deploy 클릭

    • 에러가 발생하여 배포가 안 될 수 있음
    • 해당 문제를 해결하고 재배포 진행
nextjsframeworkreactdeployvercel
profile

조정곤

주니어 프론트엔드 개발자

github
linkedin
instagram
email

< 이전글

TypeScript 클래스

다음글 >

Next.js CSS modules

Nextjs 포스트 (13)

down-arrow