Next.js에서 Next Image CSS 문제 해결하기

다음 이미지가 클래스 속성을 사용하지 않음

Next.js와 next/image 컴포넌트를 사용하여 이미지를 표시하는 경우, CSS 스타일이 적용되지 않는 문제가 발생할 수 있습니다. 특히 Tailwind CSS와 같은 추가 라이브러리를 사용하는 경우 더욱 당혹스러울 수 있습니다. 이 블로그 포스트에서는 이 문제가 발생하는 이유와 가능한 해결책을 살펴보겠습니다.

next/image 컴포넌트에서 스타일링 문제

next/image 컴포넌트 내부에서 스타일이 작동하지 않는 일반적인 이유 중 하나는 이미지 요소가 렌더링되는 방식 때문입니다. <img> 요소와 그에 대한 래핑 요소는 내부적으로 className 프롭을 통해 전달된 일부 값보다 우선하는 인라인 스타일을 가지고 있습니다.

임시 해결책

이 문제를 해결하기 위해 next/image 컴포넌트에 직접 적용하는 대신 래퍼 요소를 추가하고 여기에 마진 스타일을 적용할 수 있습니다. 이렇게 하면 스타일이 보존되고 올바르게 적용됩니다. 다음은 예시입니다:

<div className="mt-3">
  <Image
    data-testid="close-icon"
    src="/CloseIcon.svg"
    alt="닫기 탐색 모음"
    height="24"
    width="24"
  />
</div>

next/future/image 컴포넌트 사용

대안으로 next/future/image 컴포넌트를 사용할 수도 있습니다. 이 컴포넌트는 기본적으로 추가적인 래퍼가 없는 단일 <img> 요소를 렌더링합니다. 이 컴포넌트는 더 이상 래퍼의 스타일 오버라이드에 제약을 받지 않습니다. next/future/image 컴포넌트를 사용하려면 다음과 같이 next.config.js 파일에 다음 코드를 추가하십시오:

module.exports = {
  experimental: {
    images: {
      allowFutureImage: true
    }
  }
}

next/image 컴포넌트로 마이그레이션

next/future/image 컴포넌트는 next/image 컴포넌트로 변환되었다는 것을 언급하는 것이 좋습니다. next/image 컴포넌트도 단일 <img> 요소를 렌더링하며 className이나 styles를 사용하여 직접 스타일링할 수 있습니다.

추가적인 해결책

커뮤니티에서 제안하는 몇 가지 추가적인 해결책은 다음과 같습니다:

layout=”fill” 사용

<div className="mt-3" height="24" width="24">
  <Image
    data-testid="close-icon"
    src="/CloseIcon.svg"
    alt="닫기 탐색 모음"
    layout="fill"
  />
</div>

Framer Motion 사용

import { motion } from "framer-motion";

<motion.img
  className="mt-3"
  data-testid="close-icon"
  src="/CloseIcon.svg"
  alt="닫기 탐색 모음"
  height="24"
  width="24"
/>

objectFit 사용

<div style='width:104px;height:104px;position:relative;'>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>

이러한 해결책 중 하나를 구현하면 Next.js 프로젝트에서 next/image 컴포넌트에 CSS 스타일을 적용할 수 있습니다. 이 블로그 포스트가 이 문제를 극복하고 이미지 렌더링 경험을 개선하는 데 도움이 되기를 바랍니다.

참고 자료 : 

reactjs