Resolving React fetchPriority Prop Warning in Next.js

Problem Statement

When migrating to recent React (18.3.1+) and Next.js (14.2.3+) versions, developers may encounter this console warning:

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. 
If you accidentally passed it from a parent component, remove it from the DOM element.

This occurs because:

1. React's type declarations don't recognize the fetchPriority attribute
2. Next.js Image component injects this property for resource loading optimization
3. Newer React versions perform stricter prop validation

Recommended Solution: Upgrade Next.js

Official Fix Available

Next.js versions ≥14.2.4 contain a permanent solution. Update your dependencies:

npm install next@14.2.4
# or
yarn add next@14.2.4

Verify Your Upgrade

After updating, confirm the version in package.json:

{
  "dependencies": {
    "next": "14.2.4" 
  }
}

Alternative Workarounds

1. Pin React Version (Temporary Fix)

Prevent inadvertent minor version upgrades by removing version range specifiers:

{
  "dependencies": {
    "react": "18.1.0",
    "react-dom": "18.1.0"
  }
}

Run npm install or yarn install to synchronize changes.

2. Upgrade to React 19 (Future-Proof)

If your ecosystem supports it, React 19 resolves the prop validation issue:

npm install react@latest react-dom@latest

::: caution Compatibility Note Verify third-party library compatibility before upgrading React major versions :::

Why This Happens

• fetchPriority is a modern HTML attribute for resource loading hints
• Next.js automatically adds it to optimize <Image> components
• React ≥18.2.0 validates DOM props against known HTML attributes
• The mismatch occurs because fetchPriority wasn't in React's DOM typings

Additional Notes

1. Don't rename to fetchpriority - it would disable browser optimization
2. Ignore CI warnings temporarily using Jest --silent flag:

npx jest --silent

3. Legacy Next.js versions (<14.2.4) will show warnings until upgraded
4. This doesn't impact runtime functionality - only a development warning

Implement either the Next.js upgrade or React version pinning to resolve the warning immediately. The Next.js upgrade is preferred as it maintains access to latest features and security patches.