Next.js 16.2

Back to Blog
Wednesday, March 18th 2026

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

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

主な内容

• Faster Time-to-URL : 約 400% 速い next dev の起動
• Faster Rendering : レンダリングが最大で約 50% 高速化
• New Default Error Page : 再設計された組み込みの 500 ページ（デフォルトのエラーページ）
• Server Function Logging : 開発中のターミナルに Server Function 実行ログを出力
• Hydration Diff Indicator : エラーオーバーレイでサーバー/クライアントの差分を明示表示
• --inspect for next start : 本番サーバーに Node.js デバッガをアタッチ可能

また、このリリースで特に重要な 2 つの領域について個別の深掘り記事を公開しました:

• Turbopack : より高速なビルド、SRI サポート、postcss.config.ts、ツリーシェイキング改善、Server Fast Refresh、及び 200+ のバグ修正
• AI Improvements : AGENTS.md が create-next-app に含まれるようになったこと、ブラウザログの転送、next-browser（実験的）など

今すぐアップグレードするか、新しいプロジェクトを始めてください:

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest

# ...or upgrade manually
npm install next@latest react@latest react-dom@latest

# ...or start a new project
npx create-next-app@latest

Faster Time-to-URL in Development

next dev 実行時に localhost:3000 が使用可能になるまでの時間を大幅に短縮しました。同じマシンとプロジェクトで、デフォルトアプリケーションにおける Next.js 16.1 と比較してスタートアップが約 87% 速くなっています。

Faster Rendering

React 側への貢献により、Server Components のペイロードのデシリアライズが最大で 350% 高速化しました。従来の実装では JSON.parse の reviver コールバックを使っており、パースされた JSON の各キー・バリューごとに V8 の C++/JavaScript 境界を越えていました。わずかな no-op reviver でも JSON.parse は reviver なしに比べて約 4 倍遅くなります。

新しいアプローチでは二段階の処理を採用しています: まず通常の JSON.parse() を行い、その後純粋な JavaScript の再帰走査で変換を行います。これにより境界越えのオーバーヘッドがなくなり、変換の必要がないプレーンな文字列を短絡するなどの最適化が可能になります。

実際の Next.js アプリケーションでは、RSC ペイロードのサイズに依存しますが、HTML へのレンダリングが 25%〜60% 高速化します。

サーバーレンダリング時間の例

ケース	改善率	Before	After
Server Component Table with 1000 items	26% faster	19ms	15ms
Server Component with nested Suspense	33% faster	80ms	60ms
Payload CMS homepage	34% faster	43ms	32ms
Payload CMS with rich text	60% faster	52ms	33ms

New Default Error Page

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

Server Function Logging

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

Hydration Diff Indicator

ハイドレーション不一致が発生した場合、エラーオーバーレイにおいてサーバー由来のコンテンツとクライアント由来のコンテンツが明確にラベル付けされます。差分は「+ Client / - Server」の凡例を使って、どこが差異を生じたか直感的に分かるようになっています。

--inspect for next start

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

next start --inspect

これは問題のデバッグや CPU / メモリ使用状況のプロファイリングに有用です。Node.js デバッガの使い方については Chrome のドキュメントを参照してください。

transitionTypes Prop for next/link

<Link> コンポーネントは transitionTypes プロップ（ナビゲーション時に適用する View Transitions の種類を示す文字列配列）を受け取るようになりました。各タイプはナビゲーションの Transition 中に React.addTransitionType へ渡され、ナビゲーションの方向や文脈に基づいて異なるアニメーションをトリガーできます。

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

これは App Router でのみサポートされています。Pages Router はナビゲーションで React Transitions を使用しないためです。Pages Router のリンクに対する transitionTypes は無視されるため、共通のリンクコンポーネントを両ルーター間で共有できます。View transitions の詳細はドキュメントを参照してください。

Faster ImageResponse

ImageResponse が大幅に改善されました:

• 基本的な画像で 2x、複雑な画像では最大 20x 速くなりました
• インライン CSS 変数、text-indent、text-decoration-skip-ink、box-sizing、display: contents、position: static、および gap のパーセンテージ値など、CSS と SVG のサポートが向上
• デフォルトフォントが Noto Sans から Geist Sans に変更

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

Error Causes in the Dev Overlay

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

Adapters

Adapters が安定化しました。これはプラットフォームがビルドプロセスをカスタマイズできる新しい API です。デプロイプラットフォームやカスタムビルド統合で Next.js の設定を変更したり、ビルド出力を処理したりする際に有用です。Adapters に関する詳細は来週共有予定です。

Multiple Icon Formats

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

Experimental Features

unstable_catchError()

error.js の慣習によるエラー回復体験を拡張する unstable_catchError() は、コンポーネントレベルでより細かいエラーバウンダリ制御を提供します。unstable_catchError() を使ってカスタムエラーバウンダリを作成すると、コンポーネントツリー内の任意の場所に配置できます。unstable_catchError() で作成されるエラーバウンダリは、呼び出し側から渡される props と、第二引数として ErrorInfo を受け取ります。ErrorInfo の形状は error.js に渡される props と同じです。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>
  );
}

unstable_retry() in error.tsx

error.tsx コンポーネントで新たに unstable_retry() プロップが利用可能になりました。従来の reset() プロップはエラー状態をクリアして子を再レンダリングするだけで、一時的なレンダリングエラーには有効ですが、データ取得や RSC フェーズで発生するエラーには十分ではありません。

unstable_retry() は startTransition() 内で router.refresh() と reset() を呼び出し、データを再取得してセグメントを再レンダリングするビルトインのリトライロジックを提供します。多くのエラー回復シナリオでは reset() より unstable_retry() の使用が推奨されます。

例:

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 つのリンクあたりのプリフェッチ要求数を 1 件に減らします。トレードオフとして、共有レイアウトデータがインライン化されたレスポンス間で重複し、キャッシュと再利用の恩恵が減る場合があります。

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

export default nextConfig;

これは、サイズベースのヒューリスティック（小さなセグメントは自動的にインライン化し、大きなセグメントは分離する）に向けた中間段階です。

experimental.cachedNavigations

このフラグは Cached Navigations の挙動を独立して制御します。ナビゲーションや初回 HTML ロードからの静的・動的な Server Components のデータをキャッシュして、再訪問時に即時提供できるようにします。cacheComponents が有効である必要があります。

experimental.appNewScrollHandler

App Router 用のスクロールとフォーカス管理システムを React Fragment refs を使って再設計しました。新しいハンドラはナビゲーション後のフォーカス管理を改善します。セグメント内の最初のフォーカス可能な子要素に深くフォーカスする（コンテンツを飛ばしてしまう）代わりに、現在アクティブな要素を blur する挙動に変更し、ブラウザのナビゲーション動作に近づけています。

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

export default nextConfig;

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

Next.js の今後を形作るためにフィードバックを共有してください:

• GitHub Discussions
• GitHub Issues
• Discord
• Community

コントリビューター

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 他多数

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