Next 15에서 이미지 import 하기

1. 이미지 경로 public vs src/app

1) public 폴더

프로젝트 내부에 루트에 public 폴더 내부에 cat.jpg가 있다고 하면
아래와 같이 import를 할 수 있다.

💚 특징

• build시 별도 처리를 하지 않음
• Next.js의 Image Optimization API를 통해 서버 사이드에서 on-demand 리사이징
• 페이지 주소(URL)로 이미지에 직접 접근 가능
• 배경 화면에 사용할 이미지 등
• blur 효과 적용 시 blurDataURL을 직접 입력해야 한다.
  (이미지 파일을 Base64 방식으로 인코딩- Plaiceholder 라이브러리 등을 활용 )

export default function MyComponent() {
  return (
    <Image
      src="/cat.jpg" // 경로를 문자열로 직접 지정
      alt="Cat"
      width={500}
      height={300}
    />
  );
}

2) src/app 내부

src 폴더 내부의 이미지 경로를 import 해서 사용

import catImage from './cat.png';

export default function Example() {
  return <Image src={catImage} alt="Cat" />;
}

💚 특징

• 이미지를 build 타임에 리사이징/압축/최적화
• /public이 아니라 _next/static/media/ 폴더에 배포
• 정적 파일 경로와 이미지 크기, blurDataURL(for blur-up effect) 등이 포함
• 작은 정적 이미지 (썸네일, 아이콘 등)에 사용

❌ public 폴더 내부에 있는 이미지 파일을 import하는 것은 next에서 권장하지 않는다.
(배포(build 후) 환경에서는 문제 생길 가능성 존재)

import catImage from "../../public/cat.jpg"; // ❌ 지양

export default function MyComponent() {
  return <Image src={catImage} alt="Cat" />;
}

2. background image 적용

<div> ... </div> 영역에 background-image를 적용할 수 있다.

// module css 파일
.banner {
    font-size : 90px;
    width: 300px;
    height: 500px;
    background-image: url('/background.jpg'); // public/background.jpg 파일
    background-size: 100% auto; 
    background-repeat: no-repeat;
    background-position: center;
}

import style from "./Home.module.css";

...

<div className={style.banner}></div>

이런식으로 적용하면, Image 태그에 사용할 수 있는 object-fit같은 설정을 사용할 수가 없고, 최적화 기능또한 사용할 수 없다. 배경 이미지를 사용할 경우, Image 태그를 사용하면서 다른 요소들과 레이어를 중첩시키는 방법으로 사용하는 방법이 좋을 것 같다.