⚠️ 문제 상황

Next.js에서 이미지를 import해서 아래처럼 사용하면
TypeScript 에러가 발생한다.

import * as Image from "@/assets";

<img src={Image.Logo} alt="로고" />

🔍 에러 원인

Next.js에서 PNG, JPG 이미지를 import하면
string이 아니라 StaticImageData 객체가 반환된다.

{
  src: string;
  width: number;
  height: number;
}

하지만 <img> 태그는 다음과 같이 정의되어 있다.

<img src="string" />

즉 <img>는 string만 받는데 Next.js는 객체를 넘기고 있기 때문에 타입 에러가 발생한다.

🔥 해결 방법

Next.js에서 제공하는 next/image 컴포넌트를 사용한다.

import Image from "next/image";
import { Logo } from "@/assets";

<Image src={Logo} alt="로고 아이콘" />

코드는 이런식으로 짤 수 있다.