본문 바로가기
👩🏻‍💻 Front-end/🌐 Web

[Next.js] package.json 파일의 dev, build, start 스트립트

by su-no 2024. 5. 2.

스크립트 살펴보기

Next.js 프로젝트의 package.json 파일에는 일반적으로 다음과 같은 스크립트가 포함됩니다:

  • dev: 개발 모드에서 Next.js 애플리케이션을 실행합니다.
  • build: Next.js 애플리케이션을 프로덕션 빌드로 준비합니다.
  • start: 프로덕션 빌드된 Next.js 애플리케이션을 실행합니다.

dev 스크립트

  • 개발 모드에서 Next.js 애플리케이션을 실행합니다.
  • 코드 변경 시 자동으로 새로고침되어 즉시 반영됩니다.
  • 디버깅 및 개발 목적으로 사용됩니다.

build 스크립트

  • Next.js 애플리케이션을 프로덕션 빌드로 준비합니다.
  • 최적화된 HTML, CSS, JavaScript 파일을 생성합니다.
  • 정적 파일 및 서버 사이드 렌더링(SSR) 코드를 포함합니다.
  • 배포를 위해 애플리케이션을 준비하는 데 사용됩니다.

start 스크립트

  • 프로덕션 빌드된 Next.js 애플리케이션을 실행합니다.
  • build 스크립트로 생성된 최적화된 파일을 사용하여 애플리케이션을 실행합니다.
  • 프로덕션 환경에서 애플리케이션을 실행하는 데 사용됩니다.

요약하면, dev 스크립트는 개발 목적으로, build 스크립트는 프로덕션 배포를 위한 빌드 목적으로, start 스크립트는 프로덕션 환경에서 애플리케이션을 실행하는 데 사용됩니다. 각 스크립트는 Next.js 애플리케이션의 개발, 빌드, 실행 단계에서 중요한 역할을 합니다.

참고 자료

[1] Getting Started: Installation (https://nextjs.org/docs/getting-started/installation)
[2] next.js 프로젝트 초기설정하기 (https://velog.io/@jay/next.js-project-initialization)
[3] How to have 2 postbuild scripts in next.js package.json (https://stackoverflow.com/questions/70405478/how-to-have-2-postbuild-scripts-in-next-js-package-json)
[4] [Next.js] - Pre-build scripts (https://velog.io/@henrynoowah/Next.js-Pre-build-scripts)
[5] [Next.js] - Pre-build scripts (https://velog.io/@henrynoowah/Next.js-Pre-build-scripts)
[6] Building Your Application: Deploying (https://nextjs.org/docs/pages/building-your-application/deploying)
[7] Getting Started: Installation (https://nextjs.org/docs/getting-started/installation)
[8] How to run scripts before every build on Next.js (https://kontent.ai/blog/how-to-run-scripts-before-every-build-on-next-js/)
[9] Getting Started: Installation (https://nextjs.org/docs/getting-started/installation)
[10] next.js 프로젝트 초기설정하기 (https://velog.io/@jay/next.js-project-initialization)
[11] How to run scripts before every build on Next.js (https://kontent.ai/blog/how-to-run-scripts-before-every-build-on-next-js/)
[12] How to have 2 postbuild scripts in next.js package.json (https://stackoverflow.com/questions/70405478/how-to-have-2-postbuild-scripts-in-next-js-package-json)