DocsDigest
Back to listLanguage: JA
OpenAINext.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.

openaienmodel: gpt-5-mini-2025-08-07

Next.js 16.1 — Turbopack caching, bundle analyzer, and easier debugging

next.jsturbopackbundle-analyzerdebuggingperformancedevtools

Key Points

  • Turbopack file system caching is stable
  • Experimental interactive bundle analyzer
  • Use next dev --inspect for targeted debugging

Summary

Next.js 16.1 improves developer feedback loops and stability, with Turbopack file system caching enabled by default for next dev, an experimental interactive Bundle Analyzer, better handling of transitive external dependencies, and an easier Node.js debugging flow. The release also includes smaller installs, new upgrade tooling, and several developer tooling improvements aimed at faster local builds and clearer diagnostics.

Key Points

  • Turbopack file system caching for next dev is stable and on by default. Compiler artifacts are persisted to disk, dramatically reducing restart compile times (examples: large internal app cold 15s → cached 1.1s ~14× faster).
  • Experimental Next.js Bundle Analyzer for Turbopack: interactive UI to inspect production bundles, filter by route, view full import chains, trace server→client imports, and analyze CSS/assets. Use the experimental analyze command to launch the tool.
  • Easier debugging: run next dev --inspect to attach the Node.js inspector only to the running app process (no need for NODE_OPTIONS=--inspect).
  • Transitive external dependencies: Turbopack now resolves and externalizes transitive deps specified via serverExternalPackages, removing the need to add indirect packages to your package.json.
  • Other practical improvements:
    • ~20MB smaller installs due to Turbopack caching simplifications.
    • New next upgrade command to streamline upgrades.
    • DevTools MCP get_routes tool to list app routes.
    • generateStaticParams timing included in dev request timings.
    • next build logs worker thread counts for page data collection and static generation.
    • Improved async import bundling in dev and relative source map paths for server code.

Upgrade

  • Automated: npx @next/codemod@canary upgrade latest
  • Manual: npm install next@latest react@latest react-dom@latest
  • New project: npx create-next-app@latest

Notes

  • Bundle Analyzer is experimental and will be improved; please share feedback on the dedicated GitHub discussion. File system caching for next build will be stabilized in a future release.

Full Translation

Translations

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

openaijamodel: gpt-5-mini-2025-08-07

Next.js 16.1

ブログに戻る — 2025年12月18日（木）

投稿者: Luke Sandberg (@lukeisandberg)、Tim Neutkens (@timneutkens)

Next.js 16.1

Next.js 16.1 は、開発ワークフローの高速化と安定性向上に注力したリリースです。Turbopack とツール周りに大きな更新が含まれています。

主なハイライト

  • Turbopack ファイルシステムキャッシュ（next dev 向け、stable）: デフォルトで有効になり、コンパイル時間が改善されます。
  • 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 ファイルシステムキャッシュ（next dev）

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

以下は「最初のルートのコンパイル時間」の例です（Cold = キャッシュなし、Cached = キャッシュあり）：

対象改善率ColdCached
react.dev~10× faster3.7s380ms
nextjs.org~5× faster3.5s700ms
大規模な Vercel 内部アプリ~14× faster15s1.1s

Vercel 内部のアプリケーションでは過去一年間この機能を運用してきました。Turbopack のファイルシステムキャッシュの実装方法については、Luke Sandberg の Next.js Conf 講演をご覧ください。今後は next build に対してもファイルシステムキャッシュの安定化を進めます。詳細はドキュメントを参照し、専用の GitHub Discussion でフィードバックを共有してください。

Next.js Bundle Analyzer（experimental）

Next.js 16.1 には Turbopack に対応した実験的な Bundle Analyzer が含まれます。サーバー・クライアント双方のバンドルサイズ最適化が容易になり、Core Web Vitals の改善、Lambda のコールドスタート時間短縮、肥大化した依存関係の特定に役立ちます。

コマンド:

  • next experimental-analyze

このコマンドを実行すると、プロダクションバンドルを検査するインタラクティブ UI が起動します。大きなモジュールを特定したり、そのモジュールが含まれる理由（インポートチェーン）を確認できます。

機能例:

  • ルートごとにバンドルをフィルタ
  • モジュールが含まれる理由をフルで表示（インポートチェーン）
  • サーバー→クライアント境界や動的インポートを跨いだインポートのトレース
  • CSS やその他のインポート資産のサイズ表示
  • クライアント / サーバー表示の切替

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

next dev --inspect でのデバッグが簡単に

next dev に --inspect を渡すことで Node.js デバッガーを有効化できるようになりました。従来は NODE_OPTIONS=--inspect を渡す必要があり、Next.js が起動するすべてのプロセスにインスペクタがアタッチされていましたが、今回の変更により自分のコードを実行しているプロセスのみにインスペクタをアタッチできます。

serverExternalPackages の改善（推移的外部依存の取り扱い）

serverExternalPackages を使うと依存関係をバンドルせずに保持できますが、以前は直接の依存関係に対してしか安定して動作しませんでした。たとえば、あなたの使用するライブラリが内部で sqlite に依存していて、sqlite を外部化したい場合、sqlite を自分の package.json に追加する必要がありました—直接の依存ではないのにです。

この回避策は内部実装の漏洩やメンテナンス負担、複数パッケージが同一依存の異なるバージョンを要求する場合の競合を招いていました。Next.js 16.1 では Turbopack 側でこの問題を修正し、serverExternalPackages に対して推移的依存を正しく解決して外部化できるようになりました。追加設定は不要です。

その他のアップデート

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

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

フィードバックを共有して Next.js の将来を形作る手助けをしてください:

  • GitHub Discussions
  • GitHub Issues
  • Discord Community

コントリビューター

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 ドキュメントチーム: 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

ご協力ありがとうございました！