Next.jsで発生するReactのfetchPriority警告の解決方法

ReactとNext.jsを最新バージョンにアップグレードした際、以下の警告が発生することがあります：

Warning: React does not recognize the `fetchPriority` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fetchpriority` instead.

この警告は主にNext.jsのnext/imageコンポーネント使用時に発生し、最適化されていないfetchPriority属性の扱いが原因です。本記事では効果的な解決策を解説します。

根本原因

この問題はNext.js 14.2.4以前のバージョンに存在するReactとの互換性問題で、React 18.3.xで追加されたfetchPriority属性が適切に処理されないために発生します。

推奨解決策: Next.jsのバージョンアップデート

最も確実かつ公式な解決方法は、Next.jsを14.2.4以上にアップグレードすることです。バージョン14.2.4では公式にこの問題が修正されています。

package.jsonを以下のように修正：

{
  "dependencies": {
    // 他の依存関係
    "next": "14.2.4", // アップデート必須
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

アップグレード実行コマンド：

npm install next@14.2.4
# または
yarn add next@14.2.4

ポイント

バージョン指定時に^を使わず固定バージョンにすると、予期しない更新を防げます。 例："next": "14.2.4"（キャレット記号なし）

代替解決策

1. Reactのバージョンを固定する（一時的回避策）

Next.jsを即時にアップグレードできない場合、Reactを18.2.0に固定：

{
  "dependencies": {
    // 他の依存関係
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

注意点：

• 新機能/セキュリティパッチを受け取れない
• 根本解決ではないため、あくまで一時的な回避策

2. React 19へのアップグレード

React 19ではDOM屬性ハンドリングが改善されており、警告が発生しない可能性があります：

npm install react@canary react-dom@canary

注意

Next.jsがReact 19を完全サポートしていないため、プロダクション環境では非推奨

非推奨回避策（警告抑制のみ）

テスト環境などでのみ一時的に警告を無視（根本解決ではありません）：

# Jest使用時
npx jest --silent

警告

この方法はコンソール出力を抑制するだけであり、根本原因を解決しません。プロダクション環境では絶対に使用しないでください。

最終判断フローチャート

最新のNext.jsを使用することで、Reactの機能変更への追従性が向上し、同様の互換性問題を未然に防げます。特にnext/imageなどコアコンポーネントを利用する場合は、常に公式アップデートを適用してください。