[nextJS] nextJS에서 image 불러올 때

💻 _components 폴더 안의 tsx 파일에서 public 폴더 안의 이미지를 사용하려 할 때

기존 방식

import Image from 'next/image';

const Header = () => {
  const LOGO_IMG = '/public/assets/images/logoImg.svg';

  return (
    <div>
      <Image src={LOGO_IMG} alt="logoImage" width={28} height={33} priority />
    </div>
  );
};

export default Header;

nextJS에서 위 방식을 사용하면 이미지가 깨져서 보이지 않는다.

nextJS 방식

import Image from 'next/image';

const Header = () => {
  const LOGO_IMG = '/assets/images/logoImg.svg';

  return (
    <div>
      <Image src={LOGO_IMG} alt="logoImage" width={28} height={33} priority />
    </div>
  );
};

export default Header;

위 코드와 같이 public 경로를 제외하고 적어줘야 이미지가 정상적으로 출력된다.

❓ 왜 그럴까

nextJS는 assets 파일을 불러올 때 자동으로 public 폴더부터 경로를 잡도록 되어있기 때문이다.

이걸 몰라서 처음부터 조금 헤맸다..! 간단할지라도 또 까먹을 수 있으니 꼭 기록하자 📝