Next.js 16 (beta)

投稿者: Andrew Clark @ acdlite, Jimmy Lai @ feedthejim, Jiwon Choi @ devjiwonchoi, JJ Kasper @ _ijjk, Tobias Koppers @ wSokra

Next.js 16 (beta) が利用可能になりました。この早期リリースでは、安定版リリースに先立ち、Turbopack、キャッシュ、Next.jsアーキテクチャの最新改善にアクセスできます。

このリリースのハイライト

• Turbopack (stable): すべてのアプリのデフォルトバンドラーとなり、Fast Refreshが最大5-10倍高速、ビルドが2-5倍高速
• Turbopack File System Caching (beta): 大規模アプリでのさらに高速な起動とコンパイル時間
• React Compiler Support (stable): 自動メモ化のための組み込み統合
• Build Adapters API (alpha): ビルドプロセスを変更するカスタムアダプターの作成
• Enhanced Routing: レイアウト重複排除とインクリメンタルプリフェッチによる最適化されたナビゲーションとプリフェッチ
• Improved Caching APIs: 新しい updateTag() と改良された revalidateTag()
• React 19.2: View Transitions、useEffectEvent()、<Activity/>
• Breaking Changes: 非同期params、next/imageのデフォルト、その他

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

ベータ版へのアップグレード

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

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

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

開発者体験

Turbopack (stable)

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 File System Caching (beta)

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 (alpha)

Build Adapters RFCに従い、コミュニティとデプロイメントプラットフォームと協力してBuild Adapters APIの最初のアルファ版を提供しました。Build Adaptersを使用すると、ビルドプロセスにフックするカスタムアダプターを作成でき、デプロイメントプラットフォームやカスタムビルド統合がNext.js設定を変更したり、ビルド出力を処理したりできます。

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

module.exports = nextConfig;

RFC discussionでフィードバックをお寄せください。

React Compiler Support (stable)

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をプリフェッチする際、レイアウトは各Linkごとに個別にではなく、一度だけダウンロードされます。例えば、50個の商品リンクがあるページでは、共有レイアウトを50回ではなく1回だけダウンロードし、ネットワーク転送サイズを劇的に削減します。

インクリメンタルプリフェッチ: Next.jsはページ全体ではなく、キャッシュにまだない部分のみをプリフェッチします。プリフェッチキャッシュは以下のようになりました：

• リンクがビューポートから離れるとリクエストをキャンセル
• ホバー時またはビューポートに再入場時にリンクプリフェッチを優先
• データが無効化されたときにリンクを再プリフェッチ
• Cache Componentsなどの今後の機能とシームレスに連携

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

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

PPRとCache Components

Next.js 16では、experimental 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';

// ✅ 組み込みcacheLifeプロファイルを使用（ほとんどの場合'max'を推奨）
revalidateTag('blog-posts', 'max');

// または他の組み込みプロファイルを使用
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');

// またはカスタム再検証時間でインラインオブジェクトを使用
revalidateTag('products', { revalidate: 3600 });

// ⚠️ 非推奨 - 単一引数形式
revalidateTag('blog-posts');

プロファイル引数は、組み込みcacheLifeプロファイル名（'max'、'hours'、'days'など）またはnext.configで定義されたカスタムプロファイルを受け入れます。インライン{ revalidate: number }オブジェクトも渡せます。

ほとんどの場合、長期間有効なコンテンツのバックグラウンド再検証を有効にする'max'の使用を推奨します。ユーザーがタグ付きコンテンツをリクエストすると、Next.jsがバックグラウンドで再検証している間、キャッシュされたデータを即座に受け取ります。

適切にタグ付けされたキャッシュエントリのみをstale-while-revalidate動作で無効化したい場合にrevalidateTag()を使用してください。これは最終的整合性を許容できる静的コンテンツに理想的です。

移行ガイダンス: SWR動作のために第2引数にcacheLifeプロファイル（'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);
  
  // キャッシュを期限切れにして即座に更新 - ユーザーは変更を即座に確認
  updateTag(`user-${userId}`);
}

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

refresh() (新規)

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

'use server';
import { refresh } from 'next/cache';

export async function markNotificationAsRead(notificationId: string) {
  // データベースの通知を更新
  await db.notifications.markAsRead(notificationId);
  
  // ヘッダーに表示される通知数を更新
  // （別途取得されキャッシュされていない）
  refresh();
}

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

React 19.2とCanary機能

Next.js 16のApp Routerは、新しくリリースされたReact 19.2機能と段階的に安定化されている他の機能を含む最新のReact Canaryリリースを使用しています。

ハイライト：

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

詳細はReact 19.2 announcementをご覧ください。

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

バージョン要件

変更	詳細
Node.js 20.9+	最小バージョンが20.9.0 (LTS)に。Node.js 18はサポート終了
TypeScript 5+	最小バージョンが5.1.0に
ブラウザ	Chrome 111+、Edge 111+、Firefox 111+、Safari 16.4+

削除

以下の機能は以前に非推奨となり、現在削除されました：

削除	代替
AMPサポート	すべてのAMP APIと設定が削除（useAmp、export const config = { amp: true }）
next lintコマンド	BiomeまたはESLintを直接使用。next buildはリンティングを実行しなくなりました。codemodが利用可能：npx @next/codemod@canary next-lint-to-eslint-cli
devIndicatorsオプション	設定からappIsrStatus、buildActivity、buildActivityPositionが削除。インジケーターは残存
serverRuntimeConfig、publicRuntimeConfig	環境変数（.envファイル）を使用
experimental.turbopackの場所	設定がトップレベルのturbopackに移動（experimentalではなくなりました）
experimental.dynamicIOフラグ	experimental.cacheComponentsに名前変更
experimental.pprフラグ	PPRフラグが削除。Cache Componentsプログラミングモデルに発展
export const experimental_ppr	ルートレベルPPRエクスポートが削除。Cache Componentsプログラミングモデルに発展
自動scroll-behavior: smooth	オプトバックインするにはHTMLドキュメントにdata-scroll-behavior="smooth"を追加
unstable_rootParams()	今後のマイナーリリースで出荷予定の代替APIを開発中
同期params、searchParamsプロパティアクセス	非同期を使用する必要があります：await params、await searchParams
同期cookies()、headers()、draftMode()アクセス	非同期を使用する必要があります：await cookies()、await headers()、await draftMode()
Metadataイメージルートparams引数	非同期paramsに変更。generateImageMetadataからのidがPromise<string>になりました
クエリ文字列付きローカルsrcのnext/image	画像最適化が必要になりました