DocsDigest
Back to listLanguage: JA
ClaudeNext.jsDec 18, 2025, 8:00 PM

Next.js 16.1

A condensed section focused on the key takeaways first.

Original Post
OpenAIClaude

Quick Digest

Summary

A condensed section focused on the key takeaways first.

claudeenmodel: claude-sonnet-4-20250514

Next.js 16.1: Faster Development with Turbopack Caching and Bundle Analysis

nextjsturbopackperformancedevelopmentbundlingcachingdebugging

Key Points

  • Up to 14× faster development server restart times
  • New experimental Bundle Analyzer for optimization
  • Simplified debugging with --inspect flag

Summary

Next.js 16.1 delivers significant performance improvements for development workflows with stable Turbopack file system caching, experimental bundle analysis tools, and enhanced debugging capabilities.

Key Points

  • Turbopack File System Caching: Now stable and enabled by default for next dev, providing up to 14× faster compile times on restart
  • Bundle Analyzer (Experimental): New interactive tool for analyzing production bundles with route filtering and import chain visualization
  • Improved Debugging: Simplified debugging with next dev --inspect flag instead of NODE_OPTIONS
  • Transitive Dependencies: Automatic handling of transitive external dependencies in serverExternalPackages
  • Smaller Installs: 20MB reduction in installation size
  • Enhanced Tooling: New next upgrade command and improved async import bundling

Full Translation

Translations

A translation section that keeps the flow of the original article.

claudejamodel: claude-sonnet-4-20250514

Next.js 16.1

Next.js 16.1

投稿者: Luke Sandberg @ lukeisandberg
Tim Neutkens @ timneutkens

Next.js 16.1は、より高速な開発ワークフローと安定性の向上に焦点を当て、Turbopackとツールチェーンのメジャーアップデートを提供します。

主な機能

  • Turbopack File System Caching for next dev (stable): デフォルトでnext devのコンパイル時間を改善
  • Next.js Bundle Analyzer (experimental): 新しいインタラクティブツールでコードを最適化
  • より簡単なデバッグ: next dev --inspectでNext.jsアプリをデバッグ
  • 推移的外部依存関係: Turbopackが警告なしで推移的外部依存関係を自動処理

今すぐアップグレード

# 自動アップグレードCLIを使用
npx @next/codemod@canary upgrade latest

# ...または手動でアップグレード
npm install next@latest react@latest react-dom@latest

# ...または新しいプロジェクトを開始
npx create-next-app@latest

Turbopack File System Caching for next dev

Turbopackのファイルシステムキャッシュがnext devで安定版となり、デフォルトで有効になりました。コンパイラのアーティファクトがディスクに保存されるため、開発サーバーの再起動時、特に大規模プロジェクトでコンパイル時間が大幅に短縮されます。

初回ルートコンパイル時間

react.dev ~10倍高速

  • Cold: 3.7s → 3.7s
  • Cached: 380ms → 380ms

nextjs.org ~5倍高速

  • Cold: 3.5s → 3.5s
  • Cached: 700ms → 700ms

大規模なVercel内部アプリ ~14倍高速

  • Cold: 15s → 15s
  • Cached: 1.1s → 1.1s

Vercelの内部アプリケーションでは、過去1年間この機能を実際に使用してきました。Turbopackのファイルシステムキャッシュがどのように構築されたかについて詳しく知りたい場合は、Next.js ConfでのLuke Sandbergの講演をご覧ください。

このリリース後、next buildのファイルシステムキャッシュを安定化する予定です。詳細についてはドキュメントをご覧いただき、専用のGitHub discussionでフィードバックをお寄せください。

Next.js Bundle Analyzer (experimental)

Next.js 16.1には、Turbopackと連携する新しい実験的なBundle Analyzerが含まれています。サーバーとクライアントの両方のコードでバンドルサイズを最適化しやすくなり、Core Web Vitalsの改善、Lambdaコールドスタート時間の短縮、肥大化した依存関係の特定に役立ちます。

next experimental-analyze

このコマンドを実行すると、本番バンドルを検査し、大きなモジュールを特定し、それらが含まれる理由を確認できるインタラクティブUIが起動します。

インタラクティブBundle Analyzerデモを開いて、モジュールグラフを探索してみてください。

Bundle AnalyzerはNext.jsに深く統合されており、以下のことが可能です：

  • ルート別にバンドルをフィルタリング
  • モジュールが含まれる理由を示す完全なインポートチェーンを表示
  • サーバーからクライアントコンポーネントの境界と動的インポートを跨いだインポートを追跡
  • CSSやその他のインポートされたアセットのサイズを表示
  • クライアントビューとサーバービューを切り替え

Bundle Analyzerは初期開発段階にあり、今後のリリースでさらに改善される予定です。専用のGitHub discussionでフィードバックをお寄せください。

next dev --inspectによる簡単なデバッグ

next devに--inspectを渡すことで、Node.jsデバッガーを有効にできるようになりました。以前はNODE_OPTIONS=--inspectを渡す必要があり、コードを実行するプロセスだけでなく、Next.jsによって生成されるすべてのプロセスにインスペクターがアタッチされていました。

serverExternalPackagesの処理改善

Next.jsではserverExternalPackagesを使用して依存関係をバンドルしないようにできます。以前は、これは直接依存関係に対してのみ確実に動作していました。内部的にsqliteのようなものに依存するライブラリを使用し、sqliteを外部化する必要がある場合、直接の依存関係ではないにも関わらず、自分のpackage.jsonに追加する必要がありました。

この回避策は内部実装の詳細を漏洩させ、メンテナンスの負担を生み、複数のパッケージが同じ依存関係の異なるバージョンを必要とする場合に解決不可能なバージョン競合を引き起こす可能性がありました。

Next.js 16.1では、Turbopackでこの問題が修正され、追加設定なしでserverExternalPackagesの推移的依存関係を正しく解決し外部化するようになりました。

その他のアップデート

  • 20MB小さなインストール: Turbopackファイルシステムキャッシュレイヤーの簡素化により、Next.jsのインストールサイズが約20MB小さくなりました
  • 新しいnext upgradeコマンド: 新しいnext upgradeコマンドでアップグレードが簡単になりました。今後はこれを実行するだけでNext.jsのバージョンをアップグレードできます
  • MCP get_routesツール: Next.js DevTools MCPサーバーに、アプリケーション内のルートの完全なリストを取得するget_routesツールが追加されました
  • generateStaticParamsのタイミング: generateStaticParamsに費やされた時間が、開発時のリクエストに表示されるタイミングの一部としてログに記録されるようになりました
  • ビルドワーカーのログ: next buildの「Collecting page data」と「Generating static pages」で使用されるワーカースレッド数がログに記録されるようになりました
  • 非同期インポートバンドリングの改善: Turbopackで開発時の非同期インポートのバンドリングが改善され、生成されるチャンク数が削減され、特定の病的だが実世界のケースを回避できるようになりました
  • 相対ソースマップパス: Turbopackがサーバーサイドコード用に相対ファイルパスを持つソースマップを生成するようになり、Node.jsやその他のエコシステムツールとの互換性が向上しました

フィードバックとコミュニティ

フィードバックをお寄せいただき、Next.jsの未来を形作るお手伝いをしてください：

貢献者

Next.jsは3,700人を超える個人開発者の共同作業の結果です。このリリースは以下の方々によってもたらされました：

Next.jsチーム: Andrew、Hendrik、Janka、Jiachi、Jimmy、Jiwon、JJ、Josh、Jude、Sam、Sebastian、Sebbie、Wyatt、Zack

Turbopackチーム: Benjamin、Luke、Niklas、Tim、Tobias、Will

Next.js Docsチーム: Delba、Rich、Ismael、Joseph

@kdy1、@eps1lon、@SyMind、@bgw、@swarnava、@devjiwonchoi、@ztanner、@ijjk、@huozhi、@icyJoseph、@acdlite、@unstubbable、@gnoff、@gusfune、@lukesandberg、@sokra、@hayes、@shuding、@wyattjoh、@marjan-ahmed、@timneutkens、@ajstrongdev、@zigang93、@mischnic、@Nayeem-XTREME、@hamirmahal、@eli0shin、@tessamero、@gaojude、@jamesdaniels、@georgesfarah、@timeyoutakeit、@sequencerr、@Strernd、@lucasadrianof、@wbinnssmith、@hamidreza-nateghi、@jokokoloko、@dijonmusters、@H01001000、@xusd320、@lubieowoce、@KaziMahbuburRahman、@zhiyanzhaijie、@feedthejim、@that-one-arab、@JamBalaya56562、@shrink、@florianliebig、@allenzhou101、@benmerckx、@ymc9、@Marukome0743、@pyrytakala、@danpeleg4、@gaearon、@styfle、@jhuleatt、@muhammadsyaddad、@roelvan、@SukkaWの皆様、ご協力ありがとうございました！

Next.js 16.1 | Next.js | DocsDigest