프론트엔드/Next.js

(Next.js) npm run dev와 npm start 차이

그린티_ 2025. 1. 9. 00:14
반응형

1. npm run dev (개발 모드)

  • 용도: 이 명령어는 개발 중인 Next.js 애플리케이션을 실행하는 데 사용됩니다.
  • 기능:
    • 핫 리로딩(Hot Reloading): 코드를 수정하면 페이지가 자동으로 새로고침되어 변경 사항을 실시간으로 확인할 수 있습니다. (말 그대로 변경 후 바로바로 볼 수 있습니다.)
    • 개발 도구: Next.js는 개발 도중 디버깅에 유용한 에러 메시지나 경고를 제공합니다.
    • 빌드: 코드가 수정될 때마다 즉석에서 빌드되고, 새로고침 없이 변경된 내용을 바로 반영할 수 있습니다.
  • 환경 변수: NODE_ENV는 development로 설정됩니다.

2. npm start (프로덕션 모드)

  • 용도: 이 명령어는 프로덕션 환경에서 애플리케이션을 실행할 때 사용됩니다.
  • 기능:
    • 정적 파일 사용: 미리 next build 명령어로 빌드된 파일들을 사용하여 실행합니다. 이 빌드는 코드의 최적화를 포함하여 성능을 높이는 다양한 작업을 수행합니다.
    • 핫 리로딩 없음: 코드 변경을 감지하지 않으며, 변경된 코드를 반영하려면 다시 빌드를 해야 합니다.
    • 최적화된 성능: SWC를 통한 코드 압축, 정적 자산 최적화, 불필요한 코드 제거 등 프로덕션용으로 최적화된 상태로 실행됩니다.
  • 환경 변수: NODE_ENV는 production으로 설정됩니다.

주요 차이점:

명령어 용도 리로딩 빌드 요구사항 성능 최적화 환경 변수

npm run dev 개발 모드 자동 리로딩 실시간 빌드 최적화 없음 development
npm start 프로덕션 모드 없음 사전 빌드(next build) 최적화됨 production

결론:

  • npm run dev: 개발 중 빠르게 코드를 수정하고 확인하기 위한 개발 모드에서 사용하는 것 입니다.
  • npm start: 프로덕션 환경에서 최적화된 애플리케이션을 실행할 때 사용하며, 빌드를 한 후에 실행해야 합니다.
반응형

'프론트엔드 > Next.js' 카테고리의 다른 글

(Next.js) CSR vs SSR  (1) 2025.11.26
(Next.js) 서버 컴포넌트 + 클라이언트 상태 관리 전략  (0) 2025.11.12
(Next.js) 주요 특징 SSR vs SSG  (0) 2025.05.12
(Next.js) PWA 구현  (4) 2025.01.07