| name | nextjs-turbopack |
| description | Next.js 16+와 Turbopack — 증분 번들링, 파일 시스템 캐싱, 개발 속도, 그리고 Turbopack vs webpack 선택 시점. |
| origin | ECC |
Next.js와 Turbopack
Next.js 16+는 로컬 개발을 위해 기본적으로 Turbopack을 사용합니다. Turbopack은 Rust로 작성된 증분 번들러로, 개발 서버 시작과 핫 업데이트 속도를 크게 향상시킵니다.
사용 시점
- Turbopack (기본 개발 모드): 일상적인 개발에 사용하세요. 특히 대규모 앱에서 콜드 스타트와 HMR 속도가 훨씬 빠릅니다.
- Webpack (레거시 개발 모드): Turbopack 버그가 발생하거나 개발 중에 webpack 전용 플러그인이 꼭 필요한 경우에만 사용하세요.
--webpack(또는 Next.js 버전에 따라 --no-turbopack) 플래그로 비활성화할 수 있습니다.
- 프로덕션: 프로덕션 빌드 동작(
next build)은 Next.js 버전에 따라 Turbopack 또는 webpack을 사용할 수 있습니다. 해당 버전의 공식 Next.js 문서를 확인하세요.
다음 경우에 사용하세요: Next.js 16+ 앱 개발 또는 디버깅, 느린 개발 서버 시작 또는 HMR 진단, 프로덕션 번들 최적화.
동작 방식
- Turbopack: Next.js 개발용 증분 번들러입니다. 파일 시스템 캐싱을 사용하여 재시작 속도가 매우 빠릅니다(대규모 프로젝트에서 5~14배 향상).
- 개발 모드 기본값: Next.js 16부터
next dev는 별도 설정이 없으면 Turbopack으로 실행됩니다.
- 파일 시스템 캐싱: 재시작 시 이전 작업 결과를 재사용합니다. 캐시는 보통
.next 아래에 위치하며, 기본 사용에는 추가 설정이 필요 없습니다.
- 번들 분석기 (Next.js 16.1+): 실험적인 번들 분석기를 통해 출력을 검사하고 무거운 의존성을 찾을 수 있습니다. 설정이나 실험적 플래그를 통해 활성화하세요(Next.js 문서 참고).
예시
명령어
next dev
next build
next start
사용법
Turbopack을 이용한 로컬 개발을 위해 next dev를 실행하세요. 번들 분석기(Next.js 문서 참고)를 사용하여 코드 스플리팅을 최적화하고 무거운 의존성을 정리하세요. 가급적 App Router와 서버 컴포넌트를 사용하세요.
모범 사례
- 안정적인 Turbopack 및 캐싱 동작을 위해 최신 Next.js 16.x 버전을 유지하세요.
- 개발 속도가 느리다면 Turbopack(기본값)이 사용 중인지, 캐시가 불필요하게 삭제되고 있지는 않은지 확인하세요.
- 프로덕션 번들 크기 문제의 경우, 해당 버전의 공식 Next.js 번들 분석 도구를 사용하세요.
