Next.js 15 RC（リリース候補版）

Next.js 15 リリース候補版（RC）が利用可能になりました。この早期バージョンでは、今後の安定版リリース前に最新機能をテストできます。

• React: React 19 RC、React Compiler（実験的機能）、ハイドレーションエラー改善のサポート
• キャッシュ: fetch リクエスト、GET Route Handlers、クライアントナビゲーションがデフォルトでキャッシュされなくなりました
• 部分プリレンダリング（実験的機能）: 段階的導入のための新しいLayoutとPage設定オプション
• next/after（実験的機能）: レスポンスのストリーミング完了後にコードを実行する新しいAPI
• create-next-app: デザインの更新と、ローカル開発でTurbopackを有効化する新しいフラグ
• 外部パッケージのバンドリング（安定版）: App RouterとPages Router向けの新しい設定オプション

今すぐNext.js 15 RCをお試しください:

npm install next@rc react@rc react-dom@rc

React 19 RC

Next.jsのApp Routerは、Reactのcanaryチャンネル上に構築されており、開発者はv19リリース前にこれらの新しいReact APIを使用してフィードバックを提供できます。

Next.js 15 RCではReact 19 RCをサポートしており、Actionsなどのクライアントとサーバー両方の新機能が含まれています。

詳細については、Next.js 15アップグレードガイド、React 19アップグレードガイド、およびReact Conf基調講演をご覧ください。

注: 一部のサードパーティライブラリはReact 19と互換性がない場合があります。

React Compiler（実験的機能）

React Compilerは、MetaのReactチームが作成した新しい実験的コンパイラです。このコンパイラはプレーンなJavaScriptセマンティクスとReactのルールを深く理解することで、コードに自動最適化を追加します。コンパイラはuseMemoやuseCallbackなどのAPIを通じて開発者が手動で行うメモ化の量を減らし、コードをよりシンプルでメンテナンスしやすく、エラーが発生しにくくします。

Next.js 15では、React Compilerのサポートを追加しました。

babel-plugin-react-compilerをインストール:

npm install babel-plugin-react-compiler

次に、next.config.jsにexperimental.reactCompilerオプションを追加:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;

オプションで、コンパイラを「オプトイン」モードで実行するように設定できます:

const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
 
module.exports = nextConfig;

注: React Compilerは現在、Next.jsではBabelプラグインを通じてのみ使用可能で、ビルド時間が遅くなる可能性があります。

React Compilerと利用可能なNext.js設定オプションについて詳しく学べます。

ハイドレーションエラーの改善

Next.js 14.1ではエラーメッセージとハイドレーションエラーの改善が行われました。Next.js 15では、さらに改善されたハイドレーションエラービューを追加しています。ハイドレーションエラーでは、問題のソースコードと解決方法の提案が表示されるようになりました。

例えば、これはNext.js 14.1での以前のハイドレーションエラーメッセージです:

Next.js 15 RCでは以下のように改善されました:

キャッシュの更新

Next.js App Routerは、意見のあるキャッシュのデフォルト設定でリリースされました。これらは、必要に応じてオプトアウトできるようにしながら、デフォルトで最もパフォーマンスの高いオプションを提供するように設計されていました。

皆様のフィードバックに基づき、キャッシュヒューリスティックと、部分プリレンダリング（PPR）やfetchを使用するサードパーティライブラリとの相互作用を再評価しました。

Next.js 15では、fetchリクエスト、GET Route Handlers、およびClient Router Cacheのキャッシュデフォルトを、キャッシュありからキャッシュなしに変更します。以前の動作を維持したい場合は、引き続きキャッシュをオプトインできます。

今後数ヶ月でNext.jsのキャッシュをさらに改善していく予定です。詳細はNext.js 15 GA発表で共有します。

fetchリクエストはデフォルトでキャッシュされなくなりました

Next.jsはWeb fetch APIのcacheオプションを使用して、サーバーサイドのfetchリクエストがフレームワークの永続的なHTTPキャッシュとどのように相互作用するかを設定します:

fetch('https://...', { cache: 'force-cache' | 'no-store' });

• no-store - リモートサーバーからリソースを毎回取得し、キャッシュを更新しません
• force-cache - キャッシュからリソースを取得（存在する場合）またはリモートサーバーから取得してキャッシュを更新します

Next.js 14では、cacheオプションが提供されていない場合、動的関数または動的設定オプションが使用されていない限り、デフォルトでforce-cacheが使用されていました。

Next.js 15では、cacheオプションが提供されていない場合、デフォルトでno-storeが使用されます。つまり、fetchリクエストはデフォルトでキャッシュされません。

以下の方法でfetchリクエストのキャッシュをオプトインできます:

• 単一のfetch呼び出しでcacheオプションをforce-cacheに設定
• 単一のルートでdynamicルート設定オプションを'force-static'に設定
• LayoutまたはPage内のすべてのfetchリクエストをforce-cacheを使用するようにオーバーライドするためにfetchCacheルート設定オプションを'default-cache'に設定（明示的に独自のcacheオプションを指定している場合を除く）

GET Route Handlersはデフォルトでキャッシュされなくなりました

Next.js 14では、GET HTTPメソッドを使用するRoute Handlersは、動的関数または動的設定オプションを使用しない限り、デフォルトでキャッシュされていました。Next.js 15では、GET関数はデフォルトでキャッシュされません。

export dynamic = 'force-static'などの静的ルート設定オプションを使用して、引き続きキャッシュをオプトインできます。

sitemap.ts、opengraph-image.tsx、icon.tsxなどの特別なRoute Handlersやその他のメタデータファイルは、動的関数または動的設定オプションを使用しない限り、デフォルトで静的のままです。

クライアントルーターキャッシュがデフォルトでページコンポーネントをキャッシュしなくなりました

Next.js 14.2.0で、ルーターキャッシュのカスタム設定を可能にする実験的なstaleTimesフラグを導入しました。

Next.js 15ではこのフラグは引き続き利用可能ですが、ページセグメントのstaleTimeを0にするデフォルト動作に変更します。これにより、アプリ内を移動する際、クライアントは常にナビゲーションの一部としてアクティブになるページコンポーネントからの最新データを反映します。ただし、以下の重要な動作は変更されません:

• 部分レンダリングをサポートするため、共有レイアウトデータはサーバーから再取得されません
• ブラウザがスクロール位置を復元できるよう、戻る/進むナビゲーションは引き続きキャッシュから復元されます
• loading.jsは5分間（またはstaleTimes.static設定値）キャッシュされます

以下の設定で以前のクライアントルーターキャッシュ動作を選択できます:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
module.exports = nextConfig;

部分プリレンダリング(PPR)の段階的導入（実験的）

Next.js 14では部分プリレンダリング(PPR)を導入しました - これは静的レンダリングと動的レンダリングを同じページで組み合わせる最適化です。

現在Next.jsは、cookies()、headers()、キャッシュされていないデータリクエストなどの動的関数を使用しない限り、デフォルトで静的レンダリングを行います。これらのAPIはルート全体を動的レンダリングに切り替えます。PPRでは、動的UIをSuspenseバウンダリでラップできます。新しいリクエストが来ると、Next.jsはすぐに静的なHTMLシェルを提供し、同じHTTPリクエスト内で動的部分をレンダリングしてストリーミングします。

段階的な導入を可能にするため、特定のレイアウトとページをPPRに選択するexperimental_pprルート設定オプションを追加しました:

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
	     <StaticComponent />
	     <Suspense fallback={...}>
		     <DynamicComponent />
	     </Suspense>
     </>
  };
}

この新しいオプションを使用するには、next.config.jsファイルでexperimental.ppr設定を'incremental'に設定する必要があります:

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
 
module.exports = nextConfig;

すべてのセグメントでPPRが有効になると、ppr値をtrueに設定してアプリ全体と将来のすべてのルートで有効にすることが安全とみなされます。

PPRのロードマップについては、Next.js 15 GAブログ投稿で詳しく説明します。

部分プリレンダリングの詳細をご覧ください。

レスポンス後のコード実行 with next/after（実験的）

ユーザーリクエストを処理する際、サーバーは通常レスポンスの計算に直接関連するタスクを実行します。しかし、ロギング、分析、その他の外部システム同期などのタスクが必要になる場合があります。

これらのタスクはレスポンスに直接関係ないため、ユーザーが完了を待つ必要はありません。ユーザーへのレスポンス後に作業を延期することは、サーバーレス関数がレスポンス終了後すぐに計算を停止するため課題があります。

after()はこの問題を解決する新しい実験的APIで、レスポンスのストリーミング終了後に処理される作業をスケジュールでき、プライマリレスポンスをブロックせずにセカンダリタスクを実行できます。

使用するには、next.config.jsにexperimental.afterを追加します:

const nextConfig = {
  experimental: {
    after: true,
  },
};
 
module.exports = nextConfig;

次に、Server Components、Server Actions、Route Handlers、またはMiddlewareで関数をインポートします。

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // セカンダリタスク
  after(() => {
    log();
  });
 
  // プライマリタスク
  return <>{children}</>;
}

next/afterの詳細をご覧ください。

create-next-appの更新

Next.js 15では、create-next-appを新しいデザインで更新しました。

create-next-appを実行すると、ローカル開発でTurbopackを有効にするかどうかを尋ねる新しいプロンプトが表示されます（デフォルトはNo）。

✔ next devでTurbopackを使用しますか？ … No / Yes

--turboフラグでTurbopackを有効にできます。

npx create-next-app@rc --turbo

新しいプロジェクトの開始をさらに簡単にするため、CLIに新しい--emptyフラグが追加されました。これにより余分なファイルやスタイルが削除され、最小限の「hello world」ページが作成されます。

npx create-next-app@rc --empty

外部パッケージのバンドル最適化（安定版）

外部パッケージのバンドルはアプリケーションのコールドスタートパフォーマンスを向上させます。App Routerでは、外部パッケージはデフォルトでバンドルされ、新しいserverExternalPackages設定オプションで特定のパッケージを除外できます。

Pages Routerでは、外部パッケージはデフォルトでバンドルされませんが、既存のtranspilePackagesオプションでバンドルするパッケージリストを提供できます。この設定オプションでは、各パッケージを指定する必要があります。

App RouterとPages Routerの設定を統一するため、App Routerのデフォルト自動バンドルに合わせた新しいオプションbundlePagesRouterDependenciesを導入します。必要に応じてserverExternalPackagesで特定のパッケージを除外できます。

const nextConfig = {
  // Pages Routerで外部パッケージを自動バンドル:
  bundlePagesRouterDependencies: true,
  // App RouterとPages Routerの両方で特定パッケージをバンドル除外:
  serverExternalPackages: ['package-name'],
};
 
module.exports = nextConfig;

外部パッケージの最適化の詳細をご覧ください。

その他の変更

• 【破壊的変更】 Reactの最低バージョンが19 RCになりました
• 【破壊的変更】 next/image: squooshを削除し、オプション依存関係としてsharpを採用（PR）
• 【破壊的変更】 next/image: デフォルトのContent-Dispositionをattachmentに変更（PR）
• 【破壊的変更】 next/image: srcに先頭または末尾のスペースがある場合にエラー（PR）
• 【破壊的変更】 Middleware: 推奨されないReact APIインポートを制限するためreact-server条件を適用（PR）
• 【破壊的変更】 next/font: 外部@next/fontパッケージのサポートを削除（PR）
• 【破壊的変更】 next/font: font-familyハッシュを削除（PR）
• 【破壊的変更】 キャッシュ: force-dynamicがfetchキャッシュにno-storeデフォルトを設定（PR）
• 【破壊的変更】 設定: swcMinify（PR）、missingSuspenseWithCSRBailout（PR）、outputFileTracing（PR）の動作をデフォルトで有効化し、非推奨オプションを削除
• 【破壊的変更】 Speed Insightsの自動計測を削除（専用の@vercel/speed-insightsパッケージを使用する必要あり）（PR）
• 【破壊的変更】 動的サイトマップルートの.xml拡張子を削除し、開発と本番間のサイトマップURLを統一（PR）
• 【改善】 Metadata: Vercelホスティング時のmetadataBase環境変数フォールバックを更新（PR）
• 【改善】 optimizePackageImportsでの名前空間と名前付きインポートの混在時のツリーシェイキングを修正（PR）
• 【改善】 並列ルート: マッチしないキャッチオールルートに既知のパラメータを提供（PR）
• 【改善】 設定bundlePagesExternalsが安定版になり、bundlePagesRouterDependenciesに改名
• 【改善】 設定serverComponentsExternalPackagesが安定版になり、serverExternalPackagesに改名
• 【改善】 create-next-app: 新しいプロジェクトはデフォルトで全ての.envファイルを無視（PR）
• 【ドキュメント】 認証ドキュメントを改善（PR）
• 【ドキュメント】 @next/envパッケージ（PR）

詳細は、アップグレードガイドをご覧ください。

コントリビューター

Next.jsは、3,000人以上の個人開発者、GoogleやMetaなどの業界パートナー、そしてVercelのコアチームの共同作業の結果です。このリリースは以下の方々によってもたらされました:

• Next.jsチーム: Andrew, Balazs, Ethan, Janka, Jiachi, Jimmy, JJ, Josh, Sam, Sebastian, Sebbie, Shu, Steven, Tim, Wyatt, Zack
• Turbopackチーム: Alex, Benjamin, Donny, Leah, Maia, OJ, Tobias, Will
• Next.jsドキュメント: Delba, Steph, Michael, Anthony, Lee

@devjiwonchoi, @ijjk, @Ethan-Arrowood, @sokra, @kenji-webdev, @wbinnssmith, @huozhi, @domdomegg, @samcx, @Jaaneek, @evanwinter, @wyattjoh, @kdy1, @balazsorban44, @feedthejim, @ztanner, @ForsakenHarmony, @kwonoj, @delbaoliveira, @stipsan, @leerob, @shuding, @xiaohanyu, @timneutkens, @dvoytenko, @bobaaaaa, @bgw, @gaspar09, @souporserious, @unflxw, @kiner-tang, @Ehren12, @EffectDoplera, @IAmKushagraSharma, @Auxdible, @sean-rallycry, @Jeffrey-Zutt, @eps1lon, @jeanmax1me, @unstubbable, @NilsJacobsen, @PaulAsjes, @adiguno, @ryan-nauman, @zsh77, @KagamiChan, @steveluscher, @MehfoozurRehman, @vkryachko, @chentsulin, @samijaber, @begalinsaf, @FluxCapacitor2, @lukahartwig, @brianshano, @pavelglac, @styfle, @symant233, @HristovCodes, @karlhorky, @jonluca, @jonathan-ingram, @mknichel, @sopranopillow, @Gomah, @imddc, @notrab, @gabrielrolfsen, @remorses, @AbhiShake1, @agadzik, @ryota-murakami, @rishabhpoddar, @rezamauliadi, @IncognitoTGT, @webtinax, @BunsDev, @nisabmohd, @z0n, @bennettdams, @joeshub, @n1ckoates, @srkirkland, @RiskyMH, @coopbri, @okoyecharles, @diogocapela, @dnhn, @typeofweb, @davidsa03, @imranolas, @lubieowoce, @maxhaomh, @mirasayon, @blvdmitry, @hwangstar156, @lforst, @emmerich, @christian-bromann, @Lsnsh, @datner, @hiro0218, @flybayer, @ianmacartney, @ypessoa, @ryohidaka, @icyJoseph, @Arinji2, @lovell, @nsams, @Nayeem-XTREME, @JamBalaya56562, @Arindam200, @gaojude, @qqww08, @todor0v, @coltonehrman, @wiessonの皆様にも協力いただきました！