👩🏻💻 Next.js 이미지 관련 오류 1,2,3 발생
(1) Image with src has legacy prop "layout". Did you forget to run the codemod?
> codemod 설치
(2) Image with src~~may not render properly as a child of a flex container.
Consider wrapping the image with a div to configure the width.
> <div>태그로 이미지 감싸주기
(3) Image with src was detected as the Largest Contentful Paint (LCP).
Please add the "priority" property if this image is above the fold.
> priority 작성해주기
(1) [오류] Image with src has legacy prop "layout". Did you forget to run the codemod?
{imgSrc && (
<Image
className="rounded-t-xl"
src={imgSrc}
alt="cover image"
width="100"
height="60"
layout="responsive"
objectFit="none"
quality={100}
/>
)}이미지 layout 또는 objectFit에서 발생하는 오류인 줄 알았으나..!
▼ https://nextjs.org/docs/messages/next-image-upgrade-to-13
`next/image` changed in version 13
Using App Router Features available in /app
nextjs.org
공식문서 확인하니,
예전 버전의 이미지 컴포넌트는 'next/legacy/image'로 변경되어 자동으로 변경해주는 codemod를 제공함
npx @next/codemod next-image-to-legacy-image .
설치 후에 해당 오류 건 없어짐!
그리고 두번째 오류 발생.
(2) [오류] Image with src~~may not render properly as a child of a flex container.
Consider wrapping the image with a div to configure the width.
> 그대로 직독직해하면, 다음 이미지를 플렉스 컨테이너 자식으로 렌더링 되지 않음
> 위의 <Image> 전체를 <div>로 감싸는 것을 추천한다고 하여, 그대로 하니 해결!
그리고 세번째 오류 발생.
(3) [오류] Image with src was detected as the Largest Contentful Paint (LCP).
Please add the "priority" property if this image is above the fold.
https://nextjs.org/docs/pages/api-reference/components/image-legacy#priority
Components: <Image> (Legacy) | Next.js
Backwards compatible Image Optimization with the Legacy Image component.
nextjs.org
> Largest Contentful Paint element에 priority property 를 추가해주기 [성능향상]
=> 이 속성은 Next.js가 이미지 로딩을 우선시 함.
* 추가
> next.js는 build time에 remote files를 접근하지 못함으로 반드시 width와 height를 적어야 함
끝.