Next.js v15のアップデートで気づいたloggingの出力の変化

Next.js v15のアップデートで気づいたloggingの出力の変化

Next.js v14からv15へのアップデートで、同一エンドポイントへのfetchが複数回ログに表示されるようになった原因の調査。
Clock Icon2025.05.05

Next.jsのバージョンをv14からv15に上げると、next.config.jsのloggingの出力が変わっていたため調査しました。

https://nextjs.org/docs/app/api-reference/config/next-config-js/logging

発生したこと

Next.jsのバージョンをv14からv15に上げると、同じエンドポイントにリクエストしているfetchがそのfetch回数分ログに出力されていました。

Request Memoizationされていないのかとも思ったのですが、Request Memoizationをオプトアウトするには次のコードが必要になります。

// Request Memoizationをオプトアウトする
const { signal } = new AbortController()
fetch(url, { signal })

そのため、ログの出力が自分の考えている出力ではなさそうと考えました。

実際に確認する

実際に確認してみます。

https://github.com/hbsnow-sandbox/nextjs-v15-cache

今回利用したバージョンについては、次のとおりです。

  • Next.js v14.2.28
  • Next.js v15.3.1

次のようなコンポーネントをpage.tsxに複数配置することで確認します。

https://github.com/hbsnow-sandbox/nextjs-v15-cache/blob/main/apps/v15/src/app/no-store/_hello.tsx

API

APIはすべてCopilotに用意してもらいました。

エンドポイントに/api/helloがあるだけで、リクエストがあるとlogを出力するだけです。今回はリクエストされたときにログが出力できれば役割を十分満たせます。

Next.js v14.2.28

no-store force-cache

options.cacheno-storeforce-cacheともにNext.jsのloggingで表示されるログは1つです。

Next.js v15.3.1

no-store force-cache

options.cacheno-storeforce-cacheともにfetchの数だけログが表示されます。

これが自分のv14からv15にバージョンアップ作業で発生した事象になります。このログだけを見ると複数回APIへのリクエストをしていそうですが、serverのログから実際には1度しかリクエストしていないことが確認できました。

GitHubのdiscussionsに、このログについての質問があったのですが、特に回答はありませんでした。

またこの現象、発生したプロジェクトとそうでないプロジェクトがあって、起こらないプロジェクトではReact cache functionを使っていました。

https://github.com/hbsnow-sandbox/nextjs-v15-cache/blob/main/apps/v15/src/app/react-cache-no-store/_hello.tsx

no-store + React.cache force-cache + React.cache

この場合、ログの表示がv14と同様になります。

HMRの挙動について

Next.js v15のローカルでの開発環境では、ソースコードを変更したときのHMRでAPIに再度リクエストをすることがありません。

この挙動はloggingの設定でhmrRefreshestrueにすることで確認できます。

const nextConfig: NextConfig = {
  logging: {
    fetches: {
      fullUrl: true,
      hmrRefreshes: true,
    },
  },
}

この挙動は現在experimentalのserverComponentsHmrCachefalseにすることで無効化できます。

https://nextjs.org/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache

またこちらはNext.js v15以降でのみ設定可能です。

さいごに

Next.js v14からv15にバージョンアップすると、React cache functionを使用していない場合にnext.config.jsのlogging設定による出力挙動が変化していることが確認しました。

実際にこのログの表示が意図されているものかどうかはわからなかったので、若干もやは残ったままになってしまいましたがこの記事がどなたかの役に立てば幸いです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.