Next.js에서 Image 컴포넌트를 사용할 때 발생하는 `fetchPriority` prop 오류 해결 방법

Warning: React does not recognize the `fetchPriority` prop on a DOM element.

이 문제는 최근 버전의 react와 react-dom에서 발생하는 버그다. 관련된 문제는 Stack Overflow와 GitHub 이슈에서도 찾아볼 수 있다.

 

 

문제의 원인

React의 18.3.1에서 `fetchPriority` prop이 DOM 요소에서 인식되지 않는 버그가 있다. 이로 인해 Next.js의 Image 컴포넌트가 올바르게 동작하지 않고 오류가 발생한다.

 

 

해결 방법

react와 react-dom의 버전을 18.2.0으로 롤백하면 된다.

 

1. package.json 파일 수정

{
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    // 다른 의존성들...
  }
}

 

2. 의존성 설치(yarn 사용 중)

yarn install

 

3. Next.js 서버 재시작

yarn dev

 

주의사항
버전 롤백은 일시적인 해결책일 수 있다. 추후 react, react-dom의 버그가 수정되면 다시 최신 버전으로 업데이트하는 것이 좋다. 관련 릴리즈 노트를 주기적으로 확인하자.