Next.js 16.2

claudejamodel: claude-sonnet-4-20250514

Next.js 16.2

投稿者: Jimmy Lai @ feedthejim、Tim Neutkens @ timneutkens

Next.js 16.2には、パフォーマンスの改善、デバッグ機能の向上、Agentsの改善、そして200以上のTurbopackの修正と改善が含まれています。

主な改善点

高速なTime-to-URL: next devの起動が約400%高速化
高速なレンダリング: レンダリングが約50%高速化
新しいデフォルトエラーページ: 再設計された組み込み500ページ
Server Function ログ: Server Function実行の開発ターミナルログ
Hydration差分インジケーター: エラーオーバーレイでのサーバー/クライアント差分の明確化
--inspect for next start: 本番サーバーにNode.jsデバッガーをアタッチ

また、このリリースの2つの主要分野について専用の詳細記事も公開しています：

Turbopack: より高速なビルド、SRIサポート、postcss.config.ts、tree shakingの改善、Server Fast Refresh、200以上のバグ修正
AI改善: create-next-appでのAGENTS.md、ブラウザログ転送、next-browser（実験的）

アップグレード方法

今すぐアップグレードするか、以下のコマンドで開始してください：

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

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

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

開発環境でのTime-to-URLの高速化

next dev実行時にlocalhost:3000が準備完了になるまでの時間を大幅に改善しました。同じマシンとプロジェクトで、デフォルトアプリケーションでNext.js 16.1と比較して起動が約87%高速化されました。

レンダリングの高速化

Server Componentsペイロードのデシリアライゼーションを最大350%高速化するReactへの変更に貢献しました。以前の実装ではJSON.parseのreviverコールバックを使用していましたが、これはパースされたJSONのすべてのキー・バリューペアに対してV8のC++/JavaScript境界を越えていました。

新しいアプローチでは2段階のプロセスを使用します：プレーンなJSON.parse()に続いて純粋なJavaScriptでの再帰的ウォークです。これにより境界越えのオーバーヘッドが排除され、変換が不要なプレーン文字列のショートサーキットなどの最適化が追加されます。

実際のNext.jsアプリケーションでは、RSCペイロードサイズに応じて、HTMLへのレンダリングが25%から60%高速化されます。

サーバーレンダリング時間の比較

テストケース	改善率	変更前	変更後
1000項目のServer Component Table	26%高速化	19ms	15ms
ネストしたSuspenseを持つServer Component	33%高速化	80ms	60ms
Payload CMSホームページ	34%高速化	43ms	32ms
リッチテキストを含むPayload CMS	60%高速化	52ms	33ms

新しいデフォルトエラーページ

本番環境で表示されるデフォルトエラーページが再設計されました。アプリケーションでエラーが発生し、カスタムのglobal-error.tsxやerror.tsxを定義していない場合、Next.jsは組み込みのフォールバックページをレンダリングします。このフォールバックは、よりクリーンで現代的なデザインに更新されました。

Server Functionログ

Next.jsは開発中にServer Function実行をターミナルにログ出力するようになりました。各ログには関数名、引数、実行時間、定義されているファイルが表示されます。

Hydration差分インジケーター

hydrationの不一致が発生した場合、エラーオーバーレイはサーバーからのコンテンツとクライアントからのコンテンツを明確にラベル付けするようになりました。差分は+ Client / - Serverの凡例を使用し、何が分岐したかを即座に明確にします。

`next start`での`--inspect`

Next.js 16.1では開発中にNode.jsデバッガーをアタッチするためのnext dev --inspectが導入されました。16.2では、これがnext startに拡張され、本番サーバーにNode.jsデバッガーをアタッチできるようになりました。

next start --inspect

これは問題のデバッグやCPU・メモリ使用量のプロファイリングに便利です。Node.jsデバッガーの使用方法の詳細については、Chromeドキュメントを参照してください。

`next/link`の`transitionTypes`プロパティ

<Link>コンポーネントはtransitionTypesプロパティを受け入れるようになりました。これは、ナビゲーション時に適用するView Transitionのタイプを指定する文字列の配列です。各タイプは、ナビゲーションTransition中にReact.addTransitionTypeに渡され、ナビゲーションの方向やコンテキストに基づいて異なるアニメーションをトリガーできます。

<Link href="/about" transitionTypes={['slide']}>
  About
</Link>

これはApp Routerでのみサポートされています。Pages RouterはナビゲーションにReact Transitionsを使用しないためです。Pages RouterリンクでのtransitionTypesは静かに無視されるため、共有リンクコンポーネントは両方のルーターで動作します。

view transitionsの詳細については、ドキュメントを参照してください。

高速化されたImageResponse

ImageResponseが大幅な改善で更新されました：

基本画像で2倍高速、複雑な画像で最大20倍高速なImageResponse
インラインCSS変数、text-indent、text-decoration-skip-ink、box-sizing、display: contents、position: static、gapのパーセンテージ値のサポートを含む、CSSとSVGカバレッジの改善
デフォルトフォントがNoto SansからGeist Sansに変更

ImageResponseの詳細については、ドキュメントを参照してください。

開発オーバーレイでのエラー原因

エラーオーバーレイはError.causeチェーンを表示するようになり、他のエラーをラップするエラーのデバッグが容易になりました。原因は最大5レベルの深さまで、トップレベルエラーの下にフラットリストで表示されます。

Adapters

Adaptersが安定版になりました。これは、プラットフォームがビルドプロセスをカスタマイズできる新しいAPIです。これは、Next.js設定を変更したり、ビルド出力を処理する必要があるデプロイメントプラットフォームやカスタムビルド統合に便利です。

Adaptersのより詳細な概要を来週共有予定です。

複数のアイコン形式

同じベース名で異なる拡張子を持つ複数のアイコンファイル（例：icon.pngとicon.svg）が、appディレクトリで自動的に処理されるようになりました。これはブラウザフォールバックサポートに便利です。モダンブラウザはSVGアイコンを使用でき、古いブラウザはPNGにフォールバックします。両方の形式は別々の<link>タグとしてレンダリングされます。

実験的機能

`unstable_catchError()`

error.jsファイル規約によるエラー回復体験を拡張し、unstable_catchError()はコンポーネントレベルでエラー境界のより細かい制御を提供します。

unstable_catchError()を使用してカスタムエラー境界を作成することで、コンポーネントツリーの任意の場所に配置できます。unstable_catchError()によって作成されたエラー境界は、呼び出し元から渡されたpropsと、2番目の引数としてErrorInfo値を受け取ります。これはerror.jsファイル規約に渡されるpropsと同じ形状です。

error.jsと同様に、unstable_catchError()はClient Componentsからのみ呼び出すことができます。

// app/custom-error-boundary.tsx
'use client';

import { unstable_catchError, type ErrorInfo } from 'next/error';

function CustomErrorBoundary(
  props: { title: string },
  { error, unstable_retry }: ErrorInfo,
) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{error.message}</p>
      <button onClick={() => unstable_retry()}>Try again</button>
    </div>
  );
}

export default unstable_catchError(CustomErrorBoundary);

// app/page.tsx
import CustomErrorBoundary from './custom-error-boundary';

export default function Page() {
  return (
    <CustomErrorBoundary title="Oops! Something went wrong!">
      <Component />
    </CustomErrorBoundary>
  );
}

`error.tsx`での`unstable_retry()`

新しいunstable_retry()プロパティがerror.tsxコンポーネントで利用可能になりました。以前のreset()プロパティはエラー状態をクリアして子要素を再レンダリングするだけで、一時的なレンダリングエラーには有効ですが、データフェッチやRSCフェーズからのエラーには役立ちませんでした。

unstable_retry()はstartTransition()内でrouter.refresh()とreset()を呼び出し、データを再フェッチしてセグメントを再レンダリングする組み込みリトライロジックを提供します。これは、ほとんどのエラー回復シナリオでreset()よりも推奨されると予想されます。

// app/error.tsx
'use client';

import type { ErrorInfo } from 'next/error';

export default function Error({ error, unstable_retry }: ErrorInfo) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <p>{error.message}</p>
      <button onClick={() => unstable_retry()}>Try again</button>
    </div>
  );
}

`experimental.prefetchInlining`

Next.js 16では、クライアントがルートツリーの各セグメントに対して個別のリクエストを発行するセグメント別プリフェッチが導入されました。これにより、兄弟ルート間で共有されるレイアウトが一度フェッチされて再利用されるため、キャッシュ効率が向上しますが、リクエスト量が増加します。

新しいexperimental.prefetchInliningオプションは、ルートのすべてのセグメントデータを単一のレスポンスにバンドルし、プリフェッチリクエストの数をリンクあたり1つに削減します。トレードオフは、共有レイアウトデータがキャッシュされて再利用されるのではなく、インライン化されたレスポンス間で重複することです。

// next.config.ts
const nextConfig = {
  experimental: {
    prefetchInlining: true,
  },
};

export default nextConfig;

これは、小さなセグメントが自動的にインライン化され、大きなセグメントが別々のままになるサイズベースのヒューリスティックへの足がかりです。

`experimental.cachedNavigations`

このフラグは、Cached Navigationsの動作を独立して制御します。これは、ナビゲーションと初期HTML読み込みからの静的および動的Server Componentsデータをキャッシュし、再訪問を即座に提供できるようにします。cacheComponentsが有効である必要があります。

`experimental.appNewScrollHandler`

React Fragment refsを使用したApp Router用の再設計されたスクロールとフォーカス管理システムです。新しいハンドラーは、ナビゲーション後のフォーカス管理方法を改善します。セグメント内の深い場所にある最初のフォーカス可能な子孫にフォーカスする代わりに（コンテンツをスキップする可能性がある）、アクティブな要素をぼかし、ブラウザナビゲーションの動作と一致させます。

// next.config.ts
const nextConfig = {
  experimental: {
    appNewScrollHandler: true,
  },
};

export default nextConfig;

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

フィードバックを共有し、Next.jsの未来を形作るのにご協力ください：

貢献者

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

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

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

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

@acdlite、@unstubbable、@mischnic、@sokra、@ztanner、@mmastrac、@bgw、@lukesandberg、@wyattjoh、@huozhi、@eps1lon、@jwueller、@brookemosby、@delbaoliveira、@icyJoseph、@gaojude、@hanzala-sohrab、@dango0812、@ijjk、@msmx-mnakagawa、@Juneezee、@davidgolden、@LucianBuzzo、@devjiwonchoi、@alexcarpenter、@jaffarkeikei、@BradErz、@mintydev789、@naaa760、@Suhaib3100、@pavan-sh、@amannn、@fireairforce、@JamBalaya56562、@wheresrhys、@ericrav、@lubieowoce、@Thomas465xd、@bgub、@wbinnssmith、@Netail、@robert-j-webb、@bencmbrook、@shadcn、@sigmachirality、@abhishekmardiya、@vvscode、@feedthejim、@freek-boon-greenberry、@andrewimm、@alubbe、@FurryR、@01-binary、@andrewdamelio、@swarnava、@gnoff、@kristiyan-velkov、@styfle、@haydenbleasel、@rishishanbhag、@tdarthur、@lavanitha、@karlhorkyの皆様、ご協力ありがとうございました！

Summary

Summary

Key Points

Translations

Next.js 16.2

主な改善点

アップグレード方法

開発環境でのTime-to-URLの高速化

レンダリングの高速化

サーバーレンダリング時間の比較

新しいデフォルトエラーページ

Server Functionログ

Hydration差分インジケーター

`next start`での`--inspect`

`next/link`の`transitionTypes`プロパティ

高速化されたImageResponse

開発オーバーレイでのエラー原因

Adapters

複数のアイコン形式

実験的機能

`unstable_catchError()`

`error.tsx`での`unstable_retry()`

`experimental.prefetchInlining`

`experimental.cachedNavigations`

`experimental.appNewScrollHandler`

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

貢献者

Summary

Summary

Key Points

Translations

Next.js 16.2

主な改善点

アップグレード方法

開発環境でのTime-to-URLの高速化

レンダリングの高速化

サーバーレンダリング時間の比較

新しいデフォルトエラーページ

Server Functionログ

Hydration差分インジケーター

next startでの--inspect

next/linkのtransitionTypesプロパティ

高速化されたImageResponse

開発オーバーレイでのエラー原因

Adapters

複数のアイコン形式

実験的機能

unstable_catchError()

error.tsxでのunstable_retry()

experimental.prefetchInlining

experimental.cachedNavigations

experimental.appNewScrollHandler

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

貢献者

`next start`での`--inspect`

`next/link`の`transitionTypes`プロパティ

`unstable_catchError()`

`error.tsx`での`unstable_retry()`

`experimental.prefetchInlining`

`experimental.cachedNavigations`

`experimental.appNewScrollHandler`