Next.js 16 (beta)

Next.js 16 (beta) が利用可能になりました。この早期リリースでは、安定版リリースに先駆けて、Turbopack、キャッシング、Next.js アーキテクチャの最新の改善点にアクセスできます。このリリースでの主なハイライトは以下のとおりです。

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

ベータ版を試して、フィードバックをお寄せください。 皆様のテストは、安定版リリース前に問題点を特定し、Next.js を改善するのに役立ちます。遭遇したバグや問題は、GitHub で報告してください。

ベータ版にアップグレードする

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade beta
 
# ...or upgrade manually
npm install next@beta react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@beta

開発者エクスペリエンス

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 RFC に続き、コミュニティやデプロイメントプラットフォームと協力して、Build Adapters API の最初のアルファ版を提供しました。

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

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

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

React Compiler サポート (安定版)

Next.js 16 では、React Compiler の 1.0 リリースに続き、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 をプリフェッチする場合、レイアウトは各 Link に対して個別にダウンロードされるのではなく、一度だけダウンロードされます。たとえば、50 個の製品リンクを持つページでは、共有レイアウトが 50 回ではなく 1 回ダウンロードされるため、ネットワーク転送サイズが劇的に削減されます。

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

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

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

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

PPR と Cache Components

Next.js 16 では、実験的な Partial Pre-Rendering (PPR) フラグと設定オプションが削除されました。PPR は Cache Components に統合されています。

Next.js 16 以降、experimental.cacheComponents 設定を使用して PPR をオプトインできます。実装には違いがあり、Cache Components は、Next.js Conf および Next.js 16 安定版リリースに先立って文書化され発表される、追加の機能と動作をもたらします。

PPR を利用している場合 (experimental.ppr = true): 現在使用している Next.js canary のピン留めされたバージョンに留まってください。移行に問題がある場合は、現時点では現在のバージョンに留まり、安定版リリースに先立って移行ガイドを提供します。

改善されたキャッシング 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 で定義されたカスタムプロファイル を渡すことができます。また、インラインの { revalidate: 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, and Zack.
• Turbopack チーム: Benjamin, Josh, Luke, Niklas, Tim, Tobias, and Will.
• Next.js Docs チーム: Delba, Rich, Ismael, and 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 に感謝します！