[ISSUE][Next.js] image 태그에 priority 적용하라는 warning message

warn-once.js:16 Image with src "/main-logo.svg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Read more: https://nextjs.org/docs/api-reference/next/image#priority

 

 

https://nextjs.org/docs/pages/api-reference/components/image#priority

Components: <Image> | Next.js

넥스트에서 이미지는 보통 레이지로딩이 된다.

즉, 화면에 보일 때야 로딩을 시작하는데 첫 로딩 시 보이는 이미지는 레이지로딩을 할 필요가 없다고 한다. (스크롤하지 않아도 첫 화면에서 바로 보이는 것들) 그런 것들은 priority 붙여주어서 해결하면 됨!

아래 주석처리된 것을 풀면 에러가 사라진다.

      <Image
          onClick={onClickLogo}
          width={100}
          height={30}
          src={"/main-logo.svg"}
          alt="logo"
          // priority={true}
        />