| name | nextjs-turbopack |
| description | Next.js 16+와 Turbopack의 증분 번들링, 파일시스템 캐시, 개발 속도, Turbopack과 webpack 선택 기준을 다룹니다. |
| origin | ECC |
Next.js와 Turbopack
Next.js 16+는 로컬 개발에서 기본적으로 Turbopack을 사용합니다. Turbopack은 Rust로 작성된 증분 번들러로, 개발 서버 시작과 핫 업데이트를 크게 빠르게 만듭니다.
사용 시점
- Turbopack(기본 개발): 일상적인 개발에 사용합니다. 특히 큰 앱에서 콜드 스타트와 HMR이 더 빠릅니다.
- Webpack(레거시 개발): Turbopack 버그를 만나거나 개발 환경에서 webpack 전용 플러그인에 의존할 때만 사용합니다.
--webpack 또는 버전에 따라 --no-turbopack으로 비활성화합니다.
- 프로덕션:
next build의 실제 동작은 Next.js 버전에 따라 Turbopack 또는 webpack일 수 있으므로 공식 문서를 확인합니다.
다음 상황에서 사용합니다.
- Next.js 16+ 앱을 개발하거나 디버깅할 때
- 느린 개발 서버 시작 또는 HMR을 진단할 때
- 프로덕션 번들을 최적화할 때
동작 방식
- Turbopack: Next.js 개발용 증분 번들러입니다. 파일시스템 캐시를 사용해 재시작 속도가 훨씬 빨라집니다.
- 개발 기본값: Next.js 16부터
next dev는 별도 비활성화가 없으면 Turbopack으로 실행됩니다.
- 파일시스템 캐시: 이전 작업 결과를 재사용합니다. 캐시는 보통
.next 아래에 있으며 기본 사용에는 추가 설정이 필요 없습니다.
- Bundle Analyzer(Next.js 16.1+): 출력 결과와 무거운 의존성을 살펴보는 실험적 번들 분석 도구입니다. 설정 방법은 사용 중인 버전의 문서를 봅니다.
예시
명령어
next dev
next build
next start
사용 방식
로컬 개발은 next dev로 실행합니다. 코드 분할과 큰 의존성 정리를 위해 번들 분석 도구를 사용합니다. 가능하면 App Router와 서버 컴포넌트를 우선합니다.
모범 사례
- Turbopack과 캐시 동작이 안정적인 최신 Next.js 16.x를 유지합니다.
- 개발이 느리면 Turbopack이 실제로 활성화되어 있는지, 캐시가 불필요하게 지워지고 있지 않은지 확인합니다.
- 프로덕션 번들 크기 문제가 있으면 현재 버전에 맞는 공식 번들 분석 도구를 사용합니다.
