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
사용법
로컬 개발을 위해 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 번들 분석 도구를 사용하세요.