Turbopack Complete Guide | Next.js Ultra-Fast Bundler

Introduction

Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust. Created by Vercel (the team behind Next.js and Webpack), it’s designed as the successor to Webpack.

Performance

Webpack (large app):

• Cold start: 16s
• HMR: ~500ms

Turbopack:

• Cold start: 4s (4x faster)
• HMR: ~10ms (50x faster)

Why So Fast?

1. Written in Rust - Native performance
2. Incremental computation - Only rebuilds what changed
3. Optimized caching - Function-level memoization
4. Lazy bundling - Only bundles requested modules

Real-World Adoption

Turbopack represents the future of JavaScript bundling:

Created by Industry Leaders:

• Tobias Koppers - Original creator of Webpack
• Vercel team - Builders of Next.js (27M downloads/week)
• Written in Rust - Leveraging systems programming for maximum speed

Production Integration:

• Next.js 13+: Built-in development bundler (default with --turbo)
• Vercel platform: Powers builds for millions of Next.js deployments
• Used by companies: Any team using Next.js 13+ can opt-in

Market Position:

• Released October 2022 - First Rust-based React framework bundler
• Integrated with Next.js - Automatic adoption by Next.js users (27M weekly downloads)
• Development-ready - Stable for local development as of 2026
• Production coming - Full production support in active development

Performance Benchmarks (Vercel’s tests on large apps):

• 10x faster HMR than Webpack: 10ms vs 500ms updates
• 4x faster cold starts: 4s vs 16s initial compilation
• 700x faster than Webpack in incremental builds for 3,000+ modules

Why Vercel Built Turbopack:

• Webpack’s architecture (created 2012) wasn’t designed for today’s massive apps
• JavaScript-based bundlers hit fundamental speed limits
• Module Federation needed but with native-speed foundation
• Monorepo support required from day one

Technology Foundation:

• Turbo Engine: Incremental computation library (open source)
• Function-level caching: Memoizes at granular level
• Lazy compilation: Only bundles requested pages/routes
• Native parallelism: Rust’s concurrency model

Adoption Roadmap:

• ✅ Dev mode: Stable in Next.js (2023)
• ✅ Turborepo integration: Works with monorepos
• 🔄 Production builds: Beta as of 2026
• 🔄 Standalone CLI: Planned for non-Next.js projects

When to Use Turbopack:

• ✅ Next.js 13+ projects (just add --turbo)
• ✅ Large apps with 1,000+ components
• ✅ Teams needing fastest possible HMR
• ⏳ Wait for production builds (coming soon)
• ❌ Non-Next.js projects (not yet supported)

Community Impact:

• Inspired Rspack (ByteDance’s Rust Webpack clone)
• Pushed Vite to optimize further
• Proved Rust viable for JavaScript tooling

Turbopack is Webpack’s spiritual successor - built by the same creator but designed for 2020s-era web development scale.

1. Getting Started

Turbopack is built into Next.js 13+:

npx create-next-app@latest my-app
cd my-app

Enable Turbopack

# Development with Turbopack
npm run dev -- --turbo

# Or update package.json
{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

2. Features

Automatic Configuration

No config needed! Turbopack automatically handles:

• ✅ TypeScript
• ✅ JSX/TSX
• ✅ CSS/SCSS
• ✅ CSS Modules
• ✅ PostCSS
• ✅ Images
• ✅ Fonts
• ✅ JSON

Hot Module Replacement

// app/page.tsx
export default function Page() {
  return <div>Hello, Turbopack!</div>;
}

// Edit and save - updates in ~10ms!

Code Splitting

Automatic code splitting:

// Automatically creates separate chunk
const Heavy = dynamic(() => import('./HeavyComponent'));

3. CSS Support

Plain CSS

/* styles.css */
.button {
  background: blue;
}

import './styles.css';

export default function Button() {
  return <button className="button">Click</button>;
}

CSS Modules

/* Button.module.css */
.button {
  background: blue;
}

import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.button}>Click</button>;
}

Tailwind CSS

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ]
};

Works automatically with Turbopack!

SCSS/SASS

npm install sass

// styles.scss
$primary: blue;

.button {
  background: $primary;
}

import './styles.scss';

4. Image Optimization

Next.js Image optimization works with Turbopack:

import Image from 'next/image';
import logo from './logo.png';

export default function Page() {
  return <Image src={logo} alt="Logo" width={200} height={200} />;
}

5. Environment Variables

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...

export default function Page() {
  // Client-side (NEXT_PUBLIC_ prefix)
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  
  return <div>{apiUrl}</div>;
}

6. Incremental Computation

Turbopack’s secret sauce: function-level memoization

// Component A changes
function ComponentA() {
  return <div>Changed!</div>;
}

// Component B doesn't change - Turbopack SKIPS rebuilding it
function ComponentB() {
  return <div>Unchanged</div>;
}

Traditional bundlers: Rebuild entire bundle Turbopack: Only rebuild ComponentA

7. Performance Comparison

Large App (30k modules)

Bundler	Cold Start	HMR
Webpack 5	52s	2.3s
Vite	3.1s	~100ms
Turbopack	1.8s	~10ms

Medium App (1k modules)

Bundler	Cold Start	HMR
Webpack 5	16s	500ms
Vite	1.2s	~50ms
Turbopack	700ms	~5ms

8. Next.js Integration

App Router

// app/page.tsx
export default function Home() {
  return <h1>Hello, Turbopack!</h1>;
}

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Server Components

// app/users/page.tsx (Server Component)
async function getUsers() {
  const res = await fetch('https://api.example.com/users');
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

API Routes

// app/api/users/route.ts
export async function GET() {
  const users = await db.user.findMany();
  return Response.json({ users });
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.user.create({ data: body });
  return Response.json({ user }, { status: 201 });
}

9. Debugging

# Verbose logging
NEXT_TURBOPACK_LOG_LEVEL=trace npm run dev -- --turbo

# Debug output
DEBUG=turbopack:* npm run dev -- --turbo

10. Best Practices

1. Use for Development Only (Currently)

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build"
  }
}

2. Monitor Memory Usage

Turbopack uses more memory for caching:

NODE_OPTIONS='--max-old-space-size=4096' npm run dev -- --turbo

3. Clear Cache on Issues

rm -rf .next
npm run dev -- --turbo

11. Known Limitations (2026)

Currently Supported

• ✅ TypeScript/JavaScript
• ✅ CSS/SCSS/CSS Modules
• ✅ Images and fonts
• ✅ App Router
• ✅ Server Components
• ✅ API Routes

Coming Soon

• ⏳ Production builds
• ⏳ Webpack loader compatibility
• ⏳ Standalone CLI
• ⏳ Plugin system

12. Migration from Webpack

Step 1: Update Next.js

npm install next@latest

Step 2: Enable Turbopack

{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

Step 3: Test Your App

npm run dev

Most apps work immediately!

Step 4: Check Compatibility

// next.config.js
module.exports = {
  // Some webpack config may not work with Turbopack yet
  experimental: {
    turbo: {
      // Turbopack-specific config (optional)
    }
  }
};

Summary

Turbopack is the future of JavaScript bundling:

• 10x faster than Webpack
• Written in Rust for native speed
• Incremental computation - only rebuild what changed
• Built into Next.js 13+
• Zero configuration required

Key Takeaways:

1. 10x faster HMR than Webpack
2. Incremental computation engine
3. Built for Next.js (production support coming)
4. Written in Rust for native speed
5. Zero config, works out of the box

Next Steps:

• Build with [Next.js 15](/en/blog/nextjs-15-complete-guide/
• Compare [Webpack](/en/blog/webpack-complete-guide/
• Try [Vite](/en/blog/vite-complete-guide/

Resources:

• Turbopack Documentation
• Next.js Turbopack

---

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. Complete Turbopack guide for blazing fast builds. Learn the Rust-based bundler that powers Next.js 13+, incremental comp… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

---

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

• [SWC Complete Guide | Rust-Based JavaScript Compiler](/en/blog/swc-complete-guide/
• [esbuild Complete Guide | Fastest JavaScript Bundler](/en/blog/esbuild-complete-guide/
• [Next.js 15 Complete Guide | Turbopack· React 19](/en/blog/nextjs-15-complete-guide/

---

이 글에서 다루는 키워드 (관련 검색어)

Turbopack, Next.js, Build Tools, Bundler, Rust, Performance, Vercel 등으로 검색하시면 이 글이 도움이 됩니다.