
Next.js v15のアップデートで気づいたloggingの出力の変化
Next.jsのバージョンをv14からv15に上げると、next.config.jsのloggingの出力が変わっていたため調査しました。
発生したこと
Next.jsのバージョンをv14からv15に上げると、同じエンドポイントにリクエストしているfetchがそのfetch回数分ログに出力されていました。
Request Memoizationされていないのかとも思ったのですが、Request Memoizationをオプトアウトするには次のコードが必要になります。
// Request Memoizationをオプトアウトする
const { signal } = new AbortController()
fetch(url, { signal })
そのため、ログの出力が自分の考えている出力ではなさそうと考えました。
実際に確認する
実際に確認してみます。
今回利用したバージョンについては、次のとおりです。
- Next.js v14.2.28
- Next.js v15.3.1
次のようなコンポーネントをpage.tsxに複数配置することで確認します。
API
APIはすべてCopilotに用意してもらいました。
エンドポイントに/api/hello
があるだけで、リクエストがあるとlogを出力するだけです。今回はリクエストされたときにログが出力できれば役割を十分満たせます。
Next.js v14.2.28
no-store |
force-cache |
---|---|
![]() |
![]() |
options.cache
がno-store
、force-cache
ともにNext.jsのloggingで表示されるログは1つです。
Next.js v15.3.1
no-store |
force-cache |
---|---|
![]() |
![]() |
options.cache
がno-store
、force-cache
ともにfetchの数だけログが表示されます。
これが自分のv14からv15にバージョンアップ作業で発生した事象になります。このログだけを見ると複数回APIへのリクエストをしていそうですが、serverのログから実際には1度しかリクエストしていないことが確認できました。
GitHubのdiscussionsに、このログについての質問があったのですが、特に回答はありませんでした。
またこの現象、発生したプロジェクトとそうでないプロジェクトがあって、起こらないプロジェクトではReact cache functionを使っていました。
no-store + React.cache |
force-cache + React.cache |
---|---|
![]() |
![]() |
この場合、ログの表示がv14と同様になります。
HMRの挙動について
Next.js v15のローカルでの開発環境では、ソースコードを変更したときのHMRでAPIに再度リクエストをすることがありません。
この挙動はloggingの設定でhmrRefreshes
をtrue
にすることで確認できます。
const nextConfig: NextConfig = {
logging: {
fetches: {
fullUrl: true,
hmrRefreshes: true,
},
},
}
この挙動は現在experimentalのserverComponentsHmrCache
をfalse
にすることで無効化できます。
またこちらはNext.js v15以降でのみ設定可能です。
さいごに
Next.js v14からv15にバージョンアップすると、React cache functionを使用していない場合にnext.config.jsのlogging設定による出力挙動が変化していることが確認しました。
実際にこのログの表示が意図されているものかどうかはわからなかったので、若干もやは残ったままになってしまいましたがこの記事がどなたかの役に立てば幸いです。