DocsDigest
一覧へLanguage: EN
ClaudeNext.js2025/12/18 20:00

Next.js 16.1

要点だけを先に読めるように短く再構成したセクションです。

元記事
OpenAIClaude

Quick Digest

要約

要点だけを先に読めるように短く再構成したセクションです。

claudejamodel: claude-sonnet-4-20250514

Next.js 16.1: Turbopackの高速化とBundle Analyzerの導入

nextjsturbopackbundle-analyzerperformancecachingdebuggingdevelopmentoptimization

Key Points

  • Turbopackキャッシュで開発サーバー起動が最大14倍高速化
  • 実験的Bundle Analyzerでバンドル最適化が可能
  • next dev --inspectでデバッグが簡単に

Summary

Next.js 16.1は開発ワークフローの高速化と安定性向上に焦点を当てたリリースです。Turbopackのファイルシステムキャッシュが安定版となり、新しいBundle Analyzerツールが実験的機能として追加されました。

Key Points

  • Turbopackファイルシステムキャッシュ（安定版）: next devのコンパイル時間が大幅に短縮（最大14倍高速化）
  • Bundle Analyzer（実験的）: インタラクティブなUIでバンドルサイズの最適化が可能
  • デバッグの改善: next dev --inspectでNode.jsデバッガーを簡単に有効化
  • 推移的外部依存関係: Turbopackが自動的に推移的依存関係を処理
  • インストールサイズ削減: 約20MB小さくなったインストールサイズ
  • 新しいアップグレードコマンド: next upgradeコマンドでより簡単なアップグレード

Full Translation

翻訳

原文の流れを保ったまま読める翻訳セクションです。

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の皆様、ご協力ありがとうございました！