Next.js와 Turbopack
Next.js 16+는 로컬 개발 시 기본적으로 Turbopack을 사용합니다. Turbopack은 Rust로 작성된 증분 번들러로, 개발 서버 시작과 핫 업데이트 속도를 획기적으로 향상시킵니다.
사용 시점
- Turbopack (기본 dev): 일상적인 개발에 사용합니다. 특히 대규모 앱에서 더 빠른 콜드 스타트와 HMR을 제공합니다.
- Webpack (레거시 dev): Turbopack 버그가 발생하거나 dev에서 webpack 전용 플러그인을 사용해야 하는 경우에만 사용합니다.
--webpack(또는 Next.js 버전에 따라--no-turbopack; 해당 릴리스 문서 확인) 플래그로 비활성화합니다. - 프로덕션: 프로덕션 빌드 동작(
next build)은 Next.js 버전에 따라 Turbopack 또는 webpack을 사용할 수 있습니다. 사용 중인 버전의 공식 Next.js 문서를 확인하세요.
사용 대상: Next.js 16+ 앱을 개발하거나 디버깅할 때, 느린 dev 시작 또는 HMR을 진단할 때, 프로덕션 번들을 최적화할 때.
작동 방식
- Turbopack: Next.js 개발을 위한 증분 번들러입니다. 파일 시스템 캐싱을 사용하여 재시작 속도가 훨씬 빠릅니다 (예: 대규모 프로젝트에서 5~14배).
- dev 기본값: Next.js 16부터
next dev는 비활성화하지 않는 한 Turbopack으로 실행됩니다. - 파일 시스템 캐싱: 재시작 시 이전 작업을 재사용합니다. 캐시는 일반적으로
.next에 위치하며, 기본 사용에는 추가 설정이 필요하지 않습니다. - Bundle Analyzer (Next.js 16.1+): 출력을 검사하고 무거운 의존성을 찾기 위한 실험적인 Bundle Analyzer입니다. 설정이나 실험 플래그를 통해 활성화합니다 (버전에 맞는 Next.js 문서 참조).
예시
명령어
next dev
next build
next start
사용법
로컬 개발을 위해 next dev를 실행합니다. Bundle Analyzer(Next.js 문서 참조)를 사용하여 코드 분할을 최적화하고 큰 의존성을 줄입니다. 가능하면 App Router와 서버 컴포넌트를 선호합니다.
미들웨어 파일 이름 지정
Next.js 16에서는 미들웨어 파일 이름으로 proxy.ts를 도입하여 이전 middleware.ts 규칙을 대체했습니다.
- Next.js 16+: 프로젝트 루트에
proxy.ts사용 - Next.js 16 이전: 프로젝트 루트에
middleware.ts사용
파일 이름 변경은 사용 중인 번들러(Turbopack 또는 webpack)가 아니라 Next.js 버전에 연결되어 있습니다. 항상 검토 중인 버전의 공식 문서를 확인하세요.
Next.js 16 프로젝트에서 proxy.ts를 잘못된 이름의 미들웨어 파일로 표시하지 마십시오. 이 파일은 올바르며 의도된 것입니다. middleware.ts로 이름을 바꾸라고 제안하면 미들웨어 실행이 중단됩니다.
참고: Next.js proxy 문서
모범 사례
- 안정적인 Turbopack 및 캐싱 동작을 위해 최신 Next.js 16.x를 유지하세요.
- dev 속도가 느리다면 Turbopack(기본값)을 사용 중이고 캐시가 불필요하게 지워지지 않는지 확인하세요.
- 프로덕션 번들 크기 문제가 발생하면 해당 버전의 공식 Next.js 번들 분석 도구를 사용하세요.