Pockit
Back

2026年Turbopack完全ガイド：Next.jsのRust製バンドラー徹底解説

最近Next.js 16にアップデートしたなら、何か違いに気づいたはずです。開発サーバーが1秒かからずに起動する。HMRが瞬きする間もなく適用される。そして最大の変化：Turbopackが今やデフォルトのバンドラーになりました—フラグ不要です。

JavaScriptバンドリングが大きく変わりつつあります。

Turbopackは2022年にVercelが「Webpackの後継者」として発表して以来開発が続いていました。Next.js 15でdev用にstableになり、**Next.js 16（2025年10月）ですべてのアプリケーションのデフォルトバンドラーになりました。最新のNext.js 16.1（2025年12月）**ではFile System Cachingがstableになり、さらに高速になりました。

見ていきましょう。

Turbopackとは何か

TurbopackはVercelが作ったRustベースのJavaScript/TypeScriptバンドラーです。元々はNext.js専用に設計されましたが、フレームワーク非依存で使えるよう計画中です。Webpackのドロップイン置換ではありません—2026年にバンドリングがどう動くべきかをゼロから考え直して作られたものです。

Webpackの問題

Webpackは2012年にリリースされた時、JavaScriptバンドリングに革命を起こしました。でも当時の時代に合わせて設計されていました：

  • プロジェクトのファイルは数百個で、数万個ではなかった
  • Node.jsが唯一のランタイムだった
  • TypeScriptとJSXはメインストリームじゃなかった
  • HMRはあれば嬉しい機能で、必須じゃなかった

2026年になると、Webpackのアーキテクチャが限界を見せています：

# 典型的なNext.js 14プロジェクト（Webpack）
コールドスタート: 12-45秒
HMRアップデート: 1-5秒
フルリビルド: 30-120秒

Webpackのせいじゃありません—JavaScriptがバンドリングのような計算集約型タスクに根本的に遅いんです。どんなに最適化してもV8の性能天井を超えられません。

Rustの強み

TurbopackはRustで書かれています。これにより複数の利点があります：

  1. ネイティブ性能: Rustはマシンコードにコンパイルされ、V8オーバーヘッドがない
  2. 真の並列処理: Rustの所有権モデルでGC停止なしに安全なマルチスレッディングが可能
  3. メモリ効率: 手動メモリ管理でガベージコレクションスパイクがない
  4. 設計から増分的: Rustの型システムが正しい増分計算の構築を容易にする

でもRustだけが秘密兵器じゃないんです。Turbopackは全く違う設計思想で作られています。

ターボエンジン

Turbopackの核心には「ターボエンジン」があります。メモ化と増分計算システムです。スマートキャッシュだと考えてください：

  1. すべて記憶: 全関数呼び出し結果がキャッシュされる
  2. 依存関係追跡: どの出力がどの入力に依存しているか把握
  3. 最小限だけ無効化: ファイルが変わると影響を受ける計算だけ再実行
従来のバンドラー:
  ファイル変更 → バンドル全体を再ビルド → ブラウザに送信

Turbopack:
  ファイル変更 → 影響を受けるモジュールだけ再計算 → デルタだけブラウザに送信

だからTurbopackのHMRが瞬間移動みたいに感じるんです—本当に仕事量が少ないんです。

パフォーマンスベンチマーク

数字を見ていきましょう。実際のNext.js 15 Eコマースアプリケーションで測定しました。

テスト環境

  • プロジェクト: TypeScriptファイル2,847個、Reactコンポーネント156個
  • ハードウェア: M3 MacBook Pro、36GB RAM
  • Node.js: v22.1.0
  • Next.js: 16.1.0

コールドスタート（開発サーバー）

バンドラー時間vs Turbopack
Webpack 518.4秒23倍遅い
Turbopack0.8秒基準

HMR（Hot Module Replacement）

バンドラー時間vs Turbopack
Webpack 51.2秒60倍遅い
Turbopack20ms基準

ページコンパイル（新規ルート）

バンドラー時間vs Turbopack
Webpack 53.1秒15倍遅い
Turbopack0.2秒基準

メモリ使用量（開発サーバー実行中）

バンドラーRAMvs Turbopack
Webpack 51.8GB1.5倍多い
Turbopack1.2GB基準

数字が物語っていますね。Turbopackは開発時に圧倒的に速いです。

Turbopackを始める

Turbopackの有効化

Next.js 16+では、Turbopackがデフォルトで有効です—設定不要です。そのまま実行するだけ：

# Turbopackがデフォルトに！
next dev

# 古いNext.js 15.xの場合:
next dev --turbopack

動作確認

ターミナルで確認できます：

$ next dev --turbo
   ▲ Next.js 16.1.0 (Turbopack)
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 847ms

16.1のFile System Cachingのおかげで、2回目の起動はさらに高速になります—キャッシュ済みプロジェクトなら200ms未満もあり得ます。

設定詳細解説

Turbopackはnext.config.jsに独自の設定セクションがあります。カスタマイズできるもの：

基本設定

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // Turbopack専用オプション
    }
  }
};

module.exports = nextConfig;

カスタムローダー

Webpackの最大の機能の一つがカスタムローダーです。Turbopackは異なる構文でサポートしています：

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        // SVGをReactコンポーネントとして
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
        // GraphQLファイル
        '*.graphql': {
          loaders: ['graphql-tag/loader'],
          as: '*.js',
        },
        // YAMLサポート
        '*.yaml': {
          loaders: ['yaml-loader'],
          as: '*.json',
        },
      },
    },
  },
};

注意: すべてのWebpackローダーがTurbopackで動作するわけではありません。Turbopackチームが互換性リストを管理しています。

パスエイリアス

パスエイリアスを使っているならtsconfig.jsonとTurbopack両方で設定してください：

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        // @componentsをsrc/componentsにマッピング
        '@components': './src/components',
        '@utils': './src/utils',
        '@hooks': './src/hooks',
        // 古いパッケージ互換性用
        'underscore': 'lodash',
      },
    },
  },
};

Webpackからの移行

プロジェクトにカスタムWebpack設定があれば移行に作業が必要です。

一般的な移行シナリオ

カスタムWebpackプラグイン

移行前（Webpack）:

// next.config.js
const nextConfig = {
  webpack: (config, { isServer }) => {
    config.plugins.push(new MyCustomPlugin());
    return config;
  },
};

移行後（Turbopack）:
ほとんどのWebpackプラグインはまだTurbopack代替がありません。オプション：

  1. その機能がTurbopackに内蔵されているか確認
  2. 互換性のあるローダーを代わりに使用
  3. その特定機能はWebpackを継続使用

CSS処理

Turbopackは以下を内蔵サポート：

  • CSS Modules ✅
  • Sass/SCSS ✅
  • PostCSS ✅
  • Tailwind CSS ✅

内蔵設定:

// postcss.config.js (Turbopackでもそのまま動作)
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

まだ動かないもの

2026年1月時点で、一部機能はまだWebpack専用です：

機能ステータス
カスタムWebpackプラグイン❌ 未サポート
webpack()設定関数❌ 未サポート
一部サードパーティローダー⚠️ 部分サポート
本番ビルド✅ Stable (16+)
Standalone出力✅ サポート
Edge Runtime✅ サポート

Turbopackで本番ビルド

2026年のビッグニュース：Turbopack本番ビルドが安定化しました。

本番Turbopackの有効化

# Next.js 16+ではデフォルト（Turbopack使用）
next build

# 明示的フラグ（古いバージョン用）
next build --turbopack

本番ベンチマーク

同じEコマースプロジェクトで：

バンドラービルド時間バンドルサイズvs Turbopack
Webpack 5142秒2.1MB基準
Turbopack38秒2.0MB3.7倍高速

Turbopack本番ビルドはかなり速く、改善されたツリーシェイキングのおかげで若干小さいバンドルを生成します。

Turbopack vs 他のバンドラー

他のバンドラーと比較するとどうでしょうか？

Turbopack vs Vite

側面TurbopackVite
アーキテクチャ増分RustネイティブESM + esbuild
開発サーバー~800msコールドスタート~300msコールドスタート
HMR~20ms~50ms
本番Turbopack使用Rollup使用
フレームワークNext.js特化フレームワーク非依存
成熟度安定（2025）安定（2020）

結論: Viteはコールドスタートが速いですがTurbopackはHMRが速いです。Viteがより柔軟でTurbopackはNext.jsにより最適化されています。

Turbopack vs Rspack

側面TurbopackRspack
言語RustRust
Webpack互換限定的高い
HMR優秀良好
エコシステム成長中Webpack互換
フォーカスNext.js汎用

結論: Webpackプラグイン互換性が必要ならRspackがより良い選択です。Next.jsオールインならTurbopackが良いです。

よくある問題の解決

"Module not found"エラー

Turbopack切り替え後にモジュール解決エラーが出たら：

Error: Cannot find module '@/components/Button'

解決: Turbopackでエイリアスが設定されているか確認：

// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        '@': './src',
      },
    },
  },
};

ローダー互換性問題

Webpackローダーが動かない場合：

Error: Turbopack does not support the 'raw-loader' loader

オプション:

  1. 内蔵?rawインポートクエリを使用： 
    import content from './file.txt?raw';
  2. Turbopack互換の代替を探す
  3. 開発用に一時的にWebpackフォールバック

いつWebpackを維持すべきか

Turbopackの利点にもかかわらず、こんな場合はWebpackがまだ正しい選択かもしれません：

  1. 特定のWebpackプラグインに依存していてTurbopack代替がない
  2. バンドルサイズ最大最適化が必要でWebpack最適化プラグインをすべて使いたい
  3. Next.jsを使っていないでスタンドアロンTurbopackを待ちたくない
  4. カスタムWebpack設定が膨大で移行コストが高い

ハイブリッドアプローチ

開発はTurbopack、本番はWebpackを使えます：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build"  // 16+では両方Turbopack
  }
}

本番でWebpackが必要なら15.xに留まるか設定を調整してください。

Turbopackの未来

2026年ロードマップ

Vercel発表に基づく：

  • Q1 2026: Next.js 16でTurbopackデフォルト
  • Q2 2026: スタンドアロンTurbopack（Next.js専用じゃない）
  • Q3 2026: カスタム変換用プラグインAPI
  • Q4 2026: 完全なWebpack設定移行ツール

結論

TurbopackはJavaScriptバンドリングの考え方自体を変えるものです。「速いWebpack」じゃなく—今のWebアプリ規模に合わせて設計された新しい構造です。

使うべきでしょうか？

  • 開発用: はい、絶対に。速度差が本当に大きいです。
  • 本番用: はい、Next.js 16.1+なら。安定していて速いです。
  • 移行が複雑なら: 開発だけTurbopack、本番はWebpackという使い分けもありです。

JavaScriptエコシステムがRust製ツールに移行しています。SWCがBabelを置き換えました。BiomeがESLintに挑戦しています。そしてTurbopackがWebpackに挑戦しています。今日切り替えても来年切り替えても、エコシステムはこの方向に向かっています。

next devで始めて自分で違いを感じてみてください。0.5秒のHMRを経験したら、もう戻れなくなりますよ。🚀

TurbopackNext.jsWebpackRustBundlerJavaScriptPerformanceWeb Development

関連ツールを見る

Pockitの無料開発者ツールを試してみましょう

PDFロック解除
文書のアクセス権を取り戻しましょう。ファイルをアップロードすることなく、ブラウザ内で安全にPDFのパスワードを解除します。
使ってみる
PDF パスワード設定・保護
大切な文書を保護しましょう。パスワードでPDFをロックし、権限のないユーザーの閲覧を防ぎます。すべての処理はブラウザ内で完結します。
使ってみる
コード整形・圧縮
1行にギュッと詰まった圧縮コードを読みやすく整形したり、本番用にサイズを小さくしたり。JS、CSS、HTML対応。ブラウザで完結するからコードは外に出ません。
使ってみる
JSONフォーマッター
乱雑なデータを見た目良く整理しましょう。JSONの構文エラーを自動で修正し、読みやすい形式に整形します。
使ってみる
CSSアニメーション生成
CSSアニメーションをコードなしで作成。fade、slide、bounceなどのプリセットを選んで、速度やイージングを調整すればすぐに使える@keyframesコードが完成！
使ってみる
CSS Grid生成ツール
CSS Gridレイアウトをビジュアルで作成—構文は覚えなくてOK！列・行・間隔・配置を設定して1fr/minmaxサイズも調整。リアルタイムプレビューで確認してクリーンなCSS出力。
使ってみる