포스트

[이제와서 시작하는 Next.js 마스터하기 #13] Turbopack으로 개발 루프 개선

게시
Next.js Turbopack
Next.js Turbopack
By YonYonWare
10 분읽는 시간
[이제와서 시작하는 Next.js 마스터하기 #13] Turbopack으로 개발 루프 개선

“변경하고 확인하는 시간을 줄이면 개발 리듬이 달라집니다.” - Turbopack으로 Next.js 개발 루프를 점검해봅니다.

🎯 이 글에서 배울 내용

  • Turbopack이 무엇인지
  • Webpack vs Turbopack 비교
  • Turbopack 활성화 방법
  • 성능 최적화 팁
  • 마이그레이션 시 확인할 호환성 기준

예상 소요 시간: 25분 난이도: 초급

⚡ Turbopack이란?

Rust로 작성된 Next.js 내장 번들러입니다. Next.js 16에서는 Turbopack이 기본 번들러 흐름에 포함되며, 개발 서버와 빌드 모두에서 사용할 수 있습니다.

Webpack은 여전히 중요한 생태계 자산이지만, Turbopack은 Next.js 앱의 서버/클라이언트 그래프를 한 번에 이해하도록 설계되어 Fast Refresh와 빌드 시간을 줄이는 데 초점을 둡니다.

Turbopack은 타입 체크 도구가 아닙니다. JavaScript와 TypeScript 변환은 처리하지만, 타입 오류는 IDE, tsc --noEmit, 또는 CI의 별도 스크립트로 확인해야 합니다.

속도 비교

1
2
3
4
5
6

Webpack:  ████████████████████ 60초
Turbopack: ██ 12초 (5배 빠름!)

Fast Refresh:
Webpack:  ███ 3초
Turbopack: < 1초 (10배 빠름!)

실제 속도는 프로젝트 규모, 플러그인, Babel 설정, CSS 처리 방식에 따라 달라집니다. 따라서 “무조건 몇 배 빠르다”로 기억하기보다, 현재 프로젝트에서 next dev와 next build 시간을 직접 비교하는 습관이 좋습니다.

🚀 Turbopack 사용하기

1. 개발 모드

1
2
3
4
5

# Next.js 16 새 프로젝트는 기본적으로 Turbopack 흐름을 사용합니다.
npm run dev

# Webpack으로 비교 실행이 필요할 때
npx next dev --webpack

2. 프로덕션 빌드 (Next.js 16)

1
2
3
4

npm run build

# Webpack으로 fallback 비교
npx next build --webpack

🔧 설정

Turbopack 설정은 next.config.ts의 turbopack 키에서 관리합니다. 예전 Next.js 13-15.2 계열에서 쓰던 experimental.turbo는 Next.js 16 기준으로 turbopack으로 옮겨야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;

CSS, PostCSS, 최신 JavaScript 변환 같은 기본 기능은 별도 loader 설정 없이 동작합니다. 위 예시처럼 loader를 추가하는 경우는 SVG를 React 컴포넌트로 가져오는 등 특별한 변환이 필요할 때로 제한하세요.

경로 alias도 turbopack.resolveAlias로 관리할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  turbopack: {
    resolveAlias: {
      '@components': './src/components',
      '@lib': './src/lib',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
};

export default nextConfig;

tsconfig.json의 paths만으로 충분한 프로젝트라면 중복 설정을 만들 필요는 없습니다. 빌드 도구별 alias가 서로 어긋나면 개발 서버는 되는데 테스트나 Storybook이 깨지는 식의 문제가 생길 수 있습니다.

Webpack 설정이 남아 있다면?

커스텀 Webpack 플러그인을 많이 쓰는 프로젝트는 한 번에 바꾸기보다 다음 순서로 점검하세요.

  1. next dev로 기본 동작을 확인합니다.
  2. 빌드가 깨지면 next dev --webpack으로 기존 동작과 비교합니다.
  3. SVG, MDX, Sass, 경로 alias 같은 자주 쓰는 설정부터 Turbopack 호환 여부를 확인합니다.
  4. 팀 CI에는 next build 시간을 기록해 변경 전후 차이를 남깁니다.

다음 항목이 있다면 더 신중하게 봐야 합니다.

점검 항목 확인할 것
webpack() 설정 Turbopack에서는 그대로 적용되지 않으므로 turbopack 설정으로 옮길 수 있는지 확인
커스텀 Sass 함수 Rust 기반 처리와 맞지 않을 수 있어 Webpack fallback 필요 여부 확인
특수 loader @svgr/webpack, yaml-loader처럼 필요한 loader만 최소 적용
monorepo 링크 패키지 파일 시스템 root 감지가 맞는지, 필요하면 turbopack.root 검토
Yarn PnP Turbopack 지원 계획이 없는 영역이므로 패키지 매니저 전략 확인

📊 성능 측정

1
2
3
4
5

# 빌드 시간 측정
time npx next build

# 개발 서버 시작 시간
time npx next dev

더 정확한 비교를 하려면 .next 폴더를 지운 첫 실행과, 캐시가 쌓인 두 번째 실행을 나눠서 봅니다.

1
2
3

rm -rf .next
time npx next build
time npx next build

개발 서버 성능이나 메모리 이슈를 보고해야 한다면 Turbopack trace를 남길 수 있습니다.

1

NEXT_TURBOPACK_TRACING=1 npx next dev

이 명령은 .next/dev/trace-turbopack 파일을 생성합니다. 팀 내부 기록이나 GitHub 이슈를 만들 때 재현 경로, Node 버전, 패키지 매니저, trace 파일을 함께 남기면 원인 파악이 빨라집니다.

확인할 지표:

  • 개발 서버 첫 준비 시간
  • Fast Refresh 반영 시간
  • 프로덕션 빌드 전체 시간
  • CI에서 TypeScript, lint, page generation이 각각 차지하는 시간
  • Webpack 전용 플러그인 때문에 fallback이 필요한 영역
  • 타입 체크와 lint가 빌드 시간에서 차지하는 비중

🧪 실습: 프로젝트에서 비교하기

  1. 현재 프로젝트의 next dev 시작 시간을 기록합니다.
  2. 작은 컴포넌트를 수정하고 Fast Refresh 시간을 확인합니다.
  3. next build 결과에서 단계별 소요 시간을 확인합니다.
  4. --webpack 옵션으로 한 번 더 실행해 차이를 비교합니다.
  5. 차이가 큰 경우 README나 팀 문서에 기준 명령어를 남깁니다.

Turbopack은 “설정 하나로 끝”이라기보다, 팀의 개발 루프를 얼마나 짧게 만드는지 확인할 때 가치가 잘 드러납니다.

마이그레이션 체크리스트

  • experimental.turbo를 쓰고 있다면 turbopack 키로 옮겼는가?
  • Webpack 전용 플러그인이 남아 있다면 대체 설정 또는 fallback 기준을 정했는가?
  • tsc --noEmit 또는 next build 외 타입 체크 명령을 CI에서 돌리는가?
  • .next 삭제 후 첫 빌드와 캐시 빌드 시간을 분리해 기록했는가?
  • next dev --webpack, next build --webpack으로 비교 가능한 기준을 남겼는가?
  • SVG/MDX/Sass처럼 팀에서 자주 쓰는 변환이 실제 화면에서 동작하는가?

🎯 오늘 배운 내용 정리

  1. Turbopack
    • Rust 기반 Next.js 내장 번들러
    • 개발 서버와 프로덕션 빌드에서 안정화
    • 프로젝트에 따라 속도 차이가 다르므로 직접 측정 필요
  2. 운영 팁
    • 기본은 next dev, next build
    • 비교나 fallback이 필요하면 --webpack
    • 커스텀 Webpack 설정은 Turbopack 호환성을 따로 점검
    • 타입 체크와 lint는 별도 검증 단계로 유지

📚 시리즈 네비게이션

“Turbopack의 가치는 숫자로 확인한 짧아진 피드백 루프에서 드러납니다.” ⚡

Next.js, Tutorial
nextjs turbopack performance build optimization
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.