Next.js 16

次期 Next.js Conf 2025 に先駆け、Next.js 16 がリリースされました。

このリリースでは、Turbopack、キャッシング、Next.js アーキテクチャの最新の改善が提供されます。前回のベータリリース以降、いくつかの新機能と改善が追加されました。

• コンポーネントのキャッシュ: Partial Pre-Rendering (PPR) を使用した新しいモデルと、インスタントナビゲーションのためのキャッシュを使用します。
• Next.js Devtools MCP: デバッグとワークフローを改善するための Model Context Protocol の統合。
• プロキシ: ネットワーク境界を明確にするために、ミドルウェアを proxy.ts に置き換えました。
• DX: ビルドと開発リクエストのログが改善されました。

前回のベータリリースから利用可能になった機能について、改めてご紹介します。

• Turbopack (安定版): すべてのアプリでデフォルトのバンドラーとなり、Fast Refresh が最大 5～10 倍、ビルドが 2～5 倍高速になります。
• Turbopack ファイルシステムキャッシング (ベータ版): 最大規模のアプリで、さらに高速な起動とコンパイル時間。
• React Compiler サポート (安定版): 自動メモ化のための組み込み統合。
• Build Adapters API (アルファ版): ビルドプロセスを変更するためのカスタムアダプターを作成できます。
• ルーティングとナビゲーションの強化: レイアウトの重複排除とインクリメンタルプリフェッチによる、最適化されたナビゲーションとプリフェッチ。
• キャッシングAPIの改善: 新しい updateTag() と、改良された revalidateTag()。
• React 19.2: View Transitions、useEffectEvent()、<Activity/>。
• 破壊的変更とその他の更新: Async params、next/image のデフォルト設定など。

Next.js 16 へのアップグレード

# 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

コードモーグがコードを完全に移行できない場合は、アップグレードガイドをお読みください。

新機能と改善点

キャッシュコンポーネント

Cache Components は、Next.js のキャッシングをより明確で柔軟にするための新しい機能セットです。新しい "use cache" ディレクティブを中心に構築されており、ページ、コンポーネント、関数をキャッシュするために使用できます。このディレクティブは、コンパイラを活用して、使用されている場所ならどこでもキャッシュキーを自動生成します。

App Router の以前のバージョンに見られた暗黙的なキャッシングとは異なり、Cache Components を使用したキャッシングは完全にオプトインです。すべてのページ、レイアウト、API ルートの動的コードはデフォルトでリクエスト時に実行されるため、Next.js はフルスタックアプリケーションフレームワークに期待されるものにより沿った、すぐに使えるエクスペリエンスを提供します。

Cache Components は、2023 年に初めて導入された Partial Prerendering (PPR) のストーリーも完成させます。PPR 以前は、Next.js は各 URL を静的にレンダリングするか動的にレンダリングするかを選択する必要があり、中間はありませんでした。PPR はこの二分法を排除し、開発者が静的ページ全体をプリレンダリングする際の高速な初期ロードを犠牲にすることなく、静的ページの一部を動的レンダリング (Suspense を介して) にオプトインできるようにしました。

next.config.ts ファイルで Cache Components を有効にできます。

const nextConfig = {
  cacheComponents: true,
};
 
export default nextConfig;

Cache Components の詳細と使用方法については、10 月 22 日の Next.js Conf 2025 で発表し、今後数週間でブログやドキュメントでさらに詳しいコンテンツを共有する予定です。

注意: ベータリリースで以前発表したように、以前の実験的な experimental.ppr フラグと設定オプションは、Cache Components の設定に置き換えられました。

ドキュメントの こちらで詳細をご覧ください。

Next.js Devtools MCP

Next.js 16 では、AI によるデバッグとアプリケーションのコンテキスト情報を提供するための Model Context Protocol 統合である Next.js DevTools MCP が導入されました。

Next.js DevTools MCP は AI エージェントに以下を提供します。

• Next.js の知識: ルーティング、キャッシング、レンダリングの動作。
• 統合ログ: コンテキストを切り替えることなく、ブラウザとサーバーのログ。
• 自動エラーアクセス: 手動でのコピーなしで、詳細なスタックトレース。
• ページ認識: アクティブなルートのコンテキスト理解。

これにより、AI エージェントは開発ワークフロー内で直接、問題を診断し、動作を説明し、修正を提案できるようになります。

ドキュメントの こちらで詳細をご覧ください。

proxy.ts (旧 middleware.ts)

proxy.ts は middleware.ts を置き換え、アプリケーションのネットワーク境界を明確にします。proxy.ts は Node.js ランタイムで実行されます。

• 対処法: middleware.ts を proxy.ts にリネームし、エクスポートされた関数を proxy にリネームします。ロジックはそのままです。
• 理由: より明確な命名と、リクエストインターセプトのための単一で予測可能なランタイム。

export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

注意: middleware.ts ファイルは Edge ランタイムのユースケースでも引き続き利用可能ですが、非推奨となり、将来のバージョンで削除される予定です。

ドキュメントの こちらで詳細をご覧ください。

ログの改善

Next.js 16 では、開発リクエストログが拡張され、時間の使い方が表示されるようになりました。

• コンパイル: ルーティングとコンパイル。
• レンダリング: コードと React のレンダリングの実行。

ビルドも拡張され、時間の使い方が表示されます。ビルドプロセス内の各ステップにかかった時間が表示されるようになりました。

   ▲ Next.js 16 (Turbopack)
 
 ✓ Compiled successfully in 615ms
 ✓ Finished TypeScript in 1114ms
 ✓ Collecting page data in 208ms
 ✓ Generating static pages in 239ms
 ✓ Finalizing page optimization in 5ms

以前のベータリリースで発表された機能は こちらです。

開発者エクスペリエンス

Turbopack (安定版)

Turbopack は開発および本番ビルドの両方で安定性を達成し、すべての新規 Next.js プロジェクトのデフォルトバンドラーになりました。この夏の初めのベータリリース以降、採用は急速に拡大しています。Next.js 15.3 以降の開発セッションの 50% 以上、本番ビルドの 20% がすでに Turbopack を実行しています。

Turbopack を使用すると、以下が期待できます。

• 本番ビルドが 2～5 倍高速
• Fast Refresh が最大 10 倍高速

これらのパフォーマンス向上をすべての Next.js 開発者に提供するために Turbopack をデフォルトにしましたが、設定は不要です。カスタム Webpack 設定を持つアプリの場合、次を実行して Webpack を使い続けることができます。

next dev --webpack
next build --webpack

Turbopackファイルシステムキャッシュ（ベータ版）

Turbopack は開発でファイルシステムキャッシングをサポートするようになりました。コンパイラ成果物をディスクに保存することで、再起動時のコンパイル時間が大幅に短縮され、特に大規模なプロジェクトで効果を発揮します。

設定でファイルシステムキャッシングを有効にする

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};
 
export default nextConfig;

Vercel の内部アプリはすべてこの機能を使用しており、大規模なリポジトリ全体で開発者の生産性が大幅に向上しています。

ファイルシステムキャッシングのイテレーションにフィードバックをお待ちしています。ぜひ試して、ご感想をお聞かせください。

create-next-app の簡略化

create-next-app は、セットアップフローの簡略化、プロジェクト構造の更新、デフォルト設定の改善により再設計されました。新しいテンプレートには、デフォルトで App Router、TypeScript ファーストの設定、Tailwind CSS、ESLint が含まれています。

Build Adapters API（アルファ版）

Build Adapters RFC に続き、コミュニティやデプロイメントプラットフォームと協力して、Build Adapters API の最初のアルファバージョンを提供しました。

Build Adaptersを使用すると、ビルドプロセスにフックするカスタムアダプターを作成でき、デプロイメントプラットフォームやカスタムビルド統合がNext.js設定を変更したり、ビルド出力を処理したりできるようになります。

const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
};
 
module.exports = nextConfig;

RFCディスカッションでフィードバックをお寄せください。

React Compiler サポート (安定版)

React Compiler の 1.0 リリースに続き、Next.js 16 では React Compiler の組み込みサポートが安定版になりました。React Compiler はコンポーネントを自動的にメモ化し、手動でのコード変更なしで不要な再レンダリングを削減します。

reactCompiler 設定オプションは experimental から安定版に昇格しました。さまざまなアプリケーションタイプにわたるビルドパフォーマンスデータを収集し続けるため、デフォルトでは有効になっていません。React Compiler は Babel を使用するため、このオプションを有効にすると、開発時およびビルド時のコンパイル時間が長くなることが予想されます。

const nextConfig = {
  reactCompiler: true,
};
 
export default nextConfig;

最新バージョンのReact Compilerプラグインをインストールする

npm install babel-plugin-react-compiler@latest

コア機能とアーキテクチャ

ルーティングとナビゲーションの強化

Next.js 16 では、ルーティングおよびナビゲーションシステムが完全にオーバーホールされ、ページ遷移がより軽量かつ高速になりました。

レイアウトの重複排除: 複数の URL を共有レイアウトとともにプリフェッチする場合、レイアウトは各リンクごとに個別にダウンロードされるのではなく、一度だけダウンロードされます。たとえば、50 個の商品リンクがあるページは、50 回ではなく 1 回だけ共有レイアウトをダウンロードするため、ネットワーク転送サイズが劇的に削減されます。

インクリメンタルプリフェッチ: Next.js は、ページ全体ではなく、キャッシュされていない部分のみをプリフェッチします。プリフェッチキャッシュは現在、

• ビューポートからリンクが外れたときにリクエストをキャンセルします。
• ホバー時またはビューポートに再入力したときにリンクのプリフェッチを優先します。
• リンクのデータが無効になったときに再プリフェッチします。
• Cache Components のような今後の機能とシームレスに連携します。

トレードオフ: 個々のプリフェッチリクエストが増加する可能性がありますが、総転送サイズは大幅に小さくなります。これはほぼすべてのアプリケーションにとって正しいトレードオフだと考えています。リクエスト数の増加が問題を引き起こす場合は、お知らせください。データチャンクをより効率的にインライン化するための追加の最適化に取り組んでいます。

これらの変更にはコードの変更は不要で、すべてのアプリでパフォーマンスを向上させるように設計されています。

キャッシングAPIの改善

Next.js 16 では、キャッシュ動作をより明確に制御するための、改良されたキャッシングAPIが導入されました。

revalidateTag() (更新済み)

revalidateTag() は、stale-while-revalidate (SWR) 動作を有効にするために、2 番目の引数として cacheLife プロファイル を必要とするようになりました。

import { revalidateTag } from 'next/cache';
 
// ✅ Use built-in cacheLife profile (we recommend 'max' for most cases)
revalidateTag('blog-posts', 'max');
 
// Or use other built-in profiles
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');
 
// Or use an inline object with a custom revalidation time
revalidateTag('products', { revalidate: 3600 });
 
// ⚠️ Deprecated - single argument form
revalidateTag('blog-posts');

プロファイル引数は、組み込みの cacheLife プロファイル名 (例: 'max'、'hours'、'days') または、next.config で定義されたカスタムプロファイル を受け付けます。インラインの { expire: number } オブジェクトを渡すこともできます。ほとんどの場合、バックグラウンドでの再検証を可能にする 'max' を使用することをお勧めします。ユーザーがタグ付けされたコンテンツをリクエストすると、Next.js がバックグラウンドで再検証している間に、キャッシュされたデータがすぐに返されます。

タグ付けされたキャッシュエントリのみを stale-while-revalidate 動作で無効にしたい場合は、revalidateTag() を使用してください。これは、最終的な一貫性に耐えられる静的コンテンツに最適です。

移行ガイド: SWR 動作のために cacheLife プロファイルを 2 番目の引数として追加する ('max' を推奨)、または read-your-writes セマンティクスが必要な場合は、Server Actions で updateTag() を使用します。

updateTag() (新規)

updateTag() は、read-your-writes セマンティクスを提供する新しい Server Actions 専用 API で、同じリクエスト内で期限切れのデータを即座に読み取ります。

'use server';
 
import { updateTag } from 'next/cache';
 
export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);
 
  // Expire cache and refresh immediately - user sees their changes right away
  updateTag(`user-${userId}`);
}

これにより、インタラクティブな機能で変更が即座に反映されることが保証されます。フォーム、ユーザー設定、またはユーザーが変更を即座に表示することを期待するあらゆるワークフローに最適です。

refresh() (新規)

refresh() は、キャッシュされていないデータのみをリフレッシュするための新しい Server Actions 専用 API です。キャッシュには一切触れません。

'use server';
 
import { refresh } from 'next/cache';
 
export async function markNotificationAsRead(notificationId: string) {
  // Update the notification in the database
  await db.notifications.markAsRead(notificationId);
 
  // Refresh the notification count displayed in the header
  // (which is fetched separately and not cached)
  refresh();
}

この API は、クライアントサイドの router.refresh() を補完します。アクションの実行後に、ページ上の他の場所で表示されるキャッシュされていないデータをリフレッシュする必要がある場合に使用します。キャッシュされたページシェルと静的コンテンツは高速なままですが、通知数、ライブメトリクス、ステータスインジケーターなどの動的データはリフレッシュされます。

React 19.2 および Canary 機能

Next.js 16 の App Router は、最新の React Canary リリース を使用しており、これには新しくリリースされた React 19.2 の機能や、段階的に安定化されているその他の機能が含まれます。主なものは以下の通りです。

• View Transitions: Transitionやナビゲーション内で更新される要素をアニメートします。
• useEffectEvent: Effectからリアクティブでないロジックを再利用可能なEffect Event関数に抽出します。
• Activity: UIをdisplay: noneで非表示にしながら、状態を維持しEffectをクリーンアップして「バックグラウンドアクティビティ」をレンダリングします。

詳細はReact 19.2の発表をご覧ください。

破壊的変更とその他の更新

バージョン要件

削除された機能

以前非推奨となり、今回削除された機能は以下の通りです。

動作の変更

これらの機能は Next.js 16 でデフォルトの動作が変更されています。

非推奨

これらの機能は Next.js 16 で非推奨となり、将来のバージョンで削除される予定です。

その他の改善

• パフォーマンスの改善: next dev および next start コマンドのパフォーマンスが大幅に最適化されました。
• next.config.ts 用 Node.js ネイティブ TypeScript: --experimental-next-config-strip-types フラグを使用して next dev、next build、next start コマンドを実行し、next.config.ts 用のネイティブ TypeScript を有効にします。

安定版リリースに先立ち、より包括的な移行ガイドをドキュメントで共有する予定です。

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

フィードバックを共有して、Next.js の未来を形作りましょう。

• GitHub Discussions
• GitHub Issues
• Discord コミュニティ

コントリビューター

Next.js は、3,000 人以上の個人開発者による共同作業の結果です。このリリースは、以下によって提供されました。

• Next.js チーム: Andrew、Hendrik、Janka、Jiachi、Jimmy、Jiwon、JJ、Josh、Jude、Sam、Sebastian、Sebbie、Wyatt、および Zack。
• Turbopack チーム: Benjamin、Josh、Luke、Niklas、Tim、Tobias、および Will。
• Next.js Docs チーム: Delba、Rich、Ismael、および Joseph。

@mischnic、@timneutkens、@unstubbable、@wyattjoh、@Cy-Tek、@lukesandberg、@OoMNoO、@ztanner、@icyJoseph、@huozhi、@gnoff、@ijjk、@povilasv、@dwrth、@obendev、@aymericzip、@devjiwonchoi、@SyMind、@vercel-release-bot、@Shireee、@eps1lon、@dharun36、@kachkaev、@bgw、@yousefdawood7、@TheAlexLichter、@sokra、@ericx0099、@leerob、@Copilot、@fireairforce、@fufuShih、@anvibanga、@hayes、@Milancen123、@martinfrancois、@lubieowoce、@gaojude、@lachlanjc、@liketiger、@styfle、@aaronbrown-vercel、@Samii2383、@FelipeChicaiza、@kevva、@m1abdullahh、@F7b5、@Anshuman71、@RobertFent、@poteto、@chloe-yan、@sireesha-siri、@brian-lou、@joao4xz、@stefanprobst、@samselikoff、@acdlite、@gwkline、@bgub、@brock-statsig、および @karlhorky に多大な感謝を！