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

Next.js 16.1

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

元記事
OpenAIClaude

Quick Digest

要約

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

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

Next.js 16.1 のリリースまとめ

next.jsturbopackbundle-analyzerdebuggingserverexternalpackagesupgrade

Key Points

  • Turbopackファイルキャッシュ安定化
  • 実験的バンドルアナライザー追加
  • next dev --inspectで簡易デバッグ

Summary

Next.js 16.1 は開発ワークフローの高速化と安定性改善が中心のリリースです。主な変更点は Turbopack のファイルシステムキャッシュの next dev での安定化（デフォルト有効）、実験的な対話型 Bundle Analyzer、next dev --inspect による簡易デバッグ、そして serverExternalPackages のトランジティブ依存の外部化対応です。開発サーバーの再起動や初期コンパイルが大幅に速くなり、バンドル最適化やデバッグが実務的に行いやすくなっています。

Key Points

  • Turbopack のファイルシステムキャッシュが next dev で安定化・デフォルト有効。大規模プロジェクトで再起動やキャッシュ時のコンパイルが数倍高速化。
  • 実験的 Bundle Analyzer (next experimental-analyze) を導入。ルートごとのバンドル、インポートチェーン、クライアント/サーバービュー、CSS 等の資産サイズを対話的に分析可能。
  • next dev --inspect により Node デバッガをプロセス単位で簡単に接続できるように改善（従来の NODE_OPTIONS ワークアラウンド不要）。
  • serverExternalPackages がトランジティブ（間接）依存を自動的に外部化するよう改善され、パッケージ.json に手動で追加する必要がなくなった。
  • アップグレード手順（例）: npx @next/codemod@canary upgrade latest または npm install next@latest react@latest react-dom@latest。新規作成は npx create-next-app@latest。新しい next upgrade コマンドも追加。
  • その他の改善点: インストール容量が約20MB削減、generateStaticParams の実行時間が開発時のリクエストタイミングに記録される、ビルドワーカーログの改善、非同期インポートのチャンク削減、サーバー側ソースマップの相対パス出力。

Practical notes

  • まずローカルで自動アップグレードまたは手動アップデートを試し、next dev のキャッシュ挙動を確認してください。
  • バンドル肥大の調査は next experimental-analyze でルート単位・モジュールチェーンを確認すると効果的です。
  • ネイティブモジュールやネイティブ依存を持つライブラリを扱う場合は、serverExternalPackages の挙動変化により依存管理が簡素化されていることを確認してください。

Full Translation

翻訳

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

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

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