Next.js와 Turbopack
Next.js 16+는 로컬 개발 시 기본적으로 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아래에 위치하며, 기본 사용에는 추가 설정이 필요하지 않습니다. - Bundle Analyzer (Next.js 16.1+): 실험적 Bundle Analyzer를 사용하여 출력을 검사하고 무거운 종속성을 찾을 수 있습니다. 설정 또는 실험적 플래그를 통해 활성화합니다 (자세한 내용은 해당 버전의 Next.js 문서를 참조).
예시
명령어
next dev
next build
next start
사용 방법
Turbopack을 사용한 로컬 개발을 위해 next dev를 실행합니다. Bundle Analyzer(Next.js 문서 참조)를 사용하여 코드 분할을 최적화하고 큰 종속성을 줄입니다. 가능한 경우 App Router와 서버 컴포넌트를 사용하는 것이 좋습니다.
모범 사례
- 안정적인 Turbopack 및 캐싱 동작을 위해 최신 Next.js 16.x를 유지하세요.
- 개발이 느린 경우 Turbopack(기본값)을 사용하고 캐시가 불필요하게 지워지지 않는지 확인하세요.
- 프로덕션 번들 크기 문제가 있는 경우 해당 버전의 공식 Next.js 번들 분석 도구를 사용하세요.