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아래에 위치하며 기본 사용을 위해 추가 설정이 필요하지 않습니다. - 번들 분석기 (Next.js 16.1+): 실험적 번들 분석기로 출력물을 검사하고 무거운 종속성을 찾을 수 있습니다. 설정 또는 실험적 플래그를 통해 활성화합니다(해당 버전의 Next.js 문서 참조).
예제
명령어
next dev
next build
next start
사용법
로컬 개발을 위해 next dev를 실행하면 Turbopack이 사용됩니다. 번들 분석기(Next.js 문서 참조)를 사용하여 코드 분할을 최적화하고 큰 종속성을 줄이세요. 가능하면 App Router와 서버 컴포넌트를 선호하세요.
미들웨어 파일 이름
Next.js 16에서는 이전 middleware.ts 관례를 대체하는 proxy.ts를 미들웨어 파일 이름으로 도입했습니다:
- Next.js 16+: 프로젝트 루트에
proxy.ts사용 - Next.js 16 미만: 프로젝트 루트에
middleware.ts사용
파일 이름 변경은 사용 중인 Next.js 버전에 연결되어 있으며, 어떤 번들러(Turbopack 또는 webpack)를 사용하는지와는 무관합니다. 항상 검토 중인 버전의 공식 문서를 확인하세요.
Next.js 16 프로젝트에서 proxy.ts를 잘못된 이름의 미들웨어 파일이나 누락된 미들웨어 파일로 플래그 지정하지 마세요. 이 파일은 정확하고 의도된 것입니다. middleware.ts로 이름을 바꾸라고 제안하면 미들웨어 실행이 중단됩니다.
참고: Next.js proxy 문서
모범 사례
- 안정적인 Turbopack 및 캐싱 동작을 위해 최신 Next.js 16.x를 유지하세요.
- 개발 속도가 느리다면 Turbopack(기본값)을 사용하고 있는지, 캐시가 불필요하게 지워지지 않는지 확인하세요.
- 프로덕션 번들 크기 문제에는 해당 버전에 맞는 공식 Next.js 번들 분석 도구를 사용하세요.