Next.js의 Image 컴포넌트와 관련된 경고 메시지 해결하기

Next.js 프로젝트에서 이미지를 사용하면서 발생한 첫 번째 경고 메시지

// 이미지를 렌더링할 때 width나 height 중 하나만 변경된 경우 발생하는 경고 메시지
Image with src "/imgs/index-1.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

경고가 발생한 코드

import { TextImageProps } from "@/types/interfaces/indexInterface";
import React from "react";
import Image from "next/image";

const TextImage: React.FC<TextImageProps> = ({ title, text, image }) => {
  return (
    <div className="flex items-center justify-center pt-20 pb-20 space-x-32">
      <div>
        <div className="mb-4 text-4xl">{title}</div>
        <div className="text-l">{text}</div>
      </div>
      <Image
        src={image}
        alt="마피아게임"
        width={600}
        height={300}
      />
    </div>
  );
};

export default TextImage;

위 코드에서는 width와 height를 지정하고 있지만 경고가 발생했다.

구글링을 통해 이미지 크기를 CSS 스타일로 명시적으로 지정해 주어야 한다는 사실을 알게 되었다.
https://github.com/vercel/next.js/issues/40762

[NEXT-649] next/future/image parent position warning · Issue #40762 · vercel/next.js

 

해결된 코드

<Image
  src={image}
  alt="마피아게임"
  width={600}
  height={300}
  style={{ width: 600, height: 300 }}
/>

Image 컴포넌트에 style prop을 사용하여 width와 height를 명시적으로 설정하면 된다.

 

 

Next.js 프로젝트에서 이미지를 사용하면서 발생한 두 번째 경고 메시지

// Next.js의 Image 컴포넌트에는 "priority"라는 prop을 사용하라는 경고 메시지
Image with src "/imgs/index-1.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

 

 

경고가 발생한 코드

<Image
  src={image}
  alt="마피아게임"
  width={600}
  height={300}
  style={{ width: 600, height: 300 }}
/>

 

경고 메시지에서 제공한 링크를 눌러봤다.
https://nextjs.org/docs/pages/api-reference/components/image#priority

Components: <Image> | Next.js

 

 

해결된 코드

<Image
  src={image}
  alt="마피아게임"
  width={600}
  height={300}
  style={{ width: 600, height: 300 }}
  priority={true}
/>

Image 컴포넌트에 priority prop을 true로 설정하여, 페이지 로드 시 해당 이미지의 로딩이 우선적으로 이루어지게 만든다.
페이지의 Largest Contentful Paint(LCP)를 개선하는데 도움이 된다.

 

---

 

해결 안됨

(5/31) 서버를 종료했다가 yarn dev로 다시 서버를 시작해봤다. 첫 번째 경고 메시지가 다시 생겼다. 다시 찾아보자..