Next.js Image 100% 사이즈

Next.js Image 컴포넌트

Next.js Image 컴포넌트는 SEO 최적화를 위하여 Next.js(Vercel)에서 개발한 컴포넌트이다. 보통 HTML에서 <img> 태그에서 width와 height 값을 입력하지 않으면 구글이나 기타 포털사이트에서 SEO 관련하여 나쁜 점수를 받게 된다. Cumulative Layout Shift(누적 레이아웃 이동, CLS)라는 항목인데, 초기 이미지 로딩시 이미지가 밀리는 현상을 말한다.  따라서 Next.js Image 컴포넌트를 쓰게 되면 필수적으로 `src, alt, width, height` 값을 필수적으로 입력해야한다.

import Image from 'next/image'

...
<Image
        alt="Vercel logo"
        src={vercel}
        width={...}
        height={...}
      />

Next.js Image

https://nextjs.org/docs/api-reference/next/image

next/image | Next.js

 

그럼 여기서는 드는 궁금증, 과연 100% 반응형으로 이미지를 어떻게 만들까?

바로 방법은 Fill 이라는 Props 값을 이용하는 것이다.

반응형

fill

fill은 width나 height 값을 대신하여 이미지의 상위 요소를 채우도록 하는 값으로, boolean(true or false) 값으로 적용된다.

다양한 방법이 있겠으나 필자의 경우 Image 컴포넌트의 상단 요소, 예를 들어 아래의 코드 예시에서는 `grid-element` 클래스를 스타일링해준다.

Next.js 100% Image

import Image from 'next/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      alt="..."
      fill
    />
  </div>
)

 

.grid-element {
    img {
        width: 100%;
        height: 100%;
        position: relative !important;
        object-fit: cover;
    }
}

위와 같이 코드를 작성하면 반응형(responsive)으로 width값을 따로 입력하지 않아도 이미지 100% 크기로 표시된다. 

 

 

*해당 방법은 우선 Next.js 13버전 기준이다. 버전에 따라 다른 방법이 있을 수도 있으니 참조 바란다.

 

Sizes (간단한 다른 방법, 2023)

<Image
  src="url"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }} // optional
/>

 

Sizes (간단한 다른 방법, 2024)

https://pusha.tistory.com/entry/Nextjs-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9D%B4%EB%AF%B8%EC%A7%80-2024

[Next.js] 반응형 이미지 2024