반응형
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 |