[Next.js] react 와는 다른 이미지 import 방법 설명과 Image 컴포넌트 활용하기

Next.js에서 import로 이미지를 가져올 때, 해당 이미지는 객체 형태로 임포트됩니다. 

이 객체는 다음과 같은 속성들을 포함합니다

 

• src: 실제 이미지 경로
• height: 이미지 높이
• width: 이미지 너비
• 기타 메타데이터

그러므로 src={logo.src} 로 접근해야 하며,

react 에서 사용했던 것 처럼 src={logo}  이런 식으로 작성할 경우 이미지 바인딩이 불가능하게 됩니다. 

import Link from "next/link";
import logo from "@/assets/logo.png";

export default function MainHeader() {
  return (
    <header>
      <Link href="/">
        <img src={logo.src} alt="귀여운 곰돌이 이미지입니다" />
      </Link>
    </header>
  );
}

 

 

더 나은 방법으로는 Image 컴포넌트를 사용하는 것입니다

 

import Link from "next/link";
import Image from "next/image";  // Image 컴포넌트 추가
import logo from "@/assets/logo.png";

export default function MainHeader() {
  return (
    <header>
      <Link href="/">
        <Image 
          src={logo}
          alt="A plate with food"
          priority
          // width와 height는 자동으로 설정됨
        />
      </Link>
    </header>
  );
}

 

Image 컴포넌트의 장점은 다음과 같습니다.

 

• 자동 이미지 최적화 ( 사이즈 및 webp 확장자)
• 지연 로딩 지원
• CLS(Cumulative Layout Shift) 방지
  • 이미지가 없는 상태로 페이지 로드되는 현상 방지
  • 텍스트가 먼저 표시 되는 현상 방지
  • 이미지가 나중에 로드되면서 텍스트가 아래로 밀리는 현상 방지
• 자동 크기 조정

 

 

https://nextjs.org/docs/app/api-reference/components/image

Components: <Image> | Next.js