next/image` changed in version 13에 따른 경고를 없애보자.

what the...good

 

 

Next.js로 블로그를 만들어 보고 있는 와중에 Image에 대한 경고가 발생했다.

블로그에는 우선 로컬 데이터를 이용하여 이미지와 내용들을 Promise를 사용하여 불러오는데, 이미지가 많은 만큼 경고 또한 오지게 많았다.

 

 

 

Read more를 통해 해당 경고에 대한 공식 문서를 읽어보았다.

 

`next/image` changed in version 13

 

내용은 Next.js 13에서 next/image 컴포넌트에 대한 주요 변경 사항을 설명하고 있다. 이전 레거시 컴포넌트와 비교하여 새로운 next/image 컴포넌트의 변경 사항을 다음과 같은 설명 한다.

 

이 오류가 발생한 이유

1. <img> 주위의 <span> 래퍼를 제거하고 네이티브 계산된 가로세로 비율을 지원합니다.
2. 캐노니컬 스타일 prop을 지원합니다.
3. 레이아웃 prop을 스타일이나 클래스 이름으로 대체합니다.
4. objectFit prop을 스타일이나 클래스 이름으로 대체합니다.
5. objectPosition prop을 스타일이나 클래스 이름으로 대체합니다.
6. IntersectionObserver 구현을 네이티브 지연 로딩으로 대체합니다.
7. 네이티브 동등물이 없기 때문에 lazyBoundary prop을 제거합니다.
8. 네이티브 동등물이 없기 때문에 lazyRoot prop을 제거합니다.
9. 로더 구성을 loader prop으로 대체합니다.
10. alt prop을 선택적에서 필수로 변경합니다.

html 구성을 바꾸고, 속성들을 변경하기 복잡하므로, 위의 변경 사항을 고려하여 코드를 업데이트하고, 새로운 next/image 컴포넌트의 기능을 계속 활용할 수 있게 next/legacy/image로 임포트 부분을 변경하면 경고들이 사라진다.