Next.js 이미지 삽입

Next.js 14에서 이미지를 효과적으로 관리하고 사용하는 방법을 알아보겠습니다.
Next.js는 public 폴더를 사용하여 이미지를 관리하며, 내장된 Image 컴포넌트를 통해 성능 최적화된 이미지를 쉽게 사용할 수 있습니다.

---

public 폴더에 이미지 저장

Next.js에서는 이미지를 public 폴더에 넣어 사용합니다.

// page.tsx
// public/images 하위에 이미지를 넣었을 경우
export default function Page() {
  return (
    <>
      <img src="/images/dummy-image-1.png" alt="이미지" />
    </>
  );
}

 

 

Image 컴포넌트 사용

Next.js는 이미지를 처리할 수 있는 Image 컴포넌트를 제공합니다.
이를 통해 이미지 로딩 성능을 최적화할 수 있습니다.

 

로컬 이미지 사용

로컬에 저장된 이미지를 Image 컴포넌트로 사용하려면 이미지를 import하여 사용합니다.

import Image from "next/image";
import dummyImage from "/public/images/dummy-image-1.png";

export default function Page() {
  return (
    <>
      <Image src={dummyImage} alt="이미지" priority={false} />
    </>
  );
}

 

외부 이미지 사용

외부 이미지를 사용할 경우 width와 height 속성은 필수입니다.

import Image from "next/image";

export default function Page() {
  return (
    <>
      <Image
        src="https://cdn.pixabay.com/photo/2017/01/03/22/00/tower-1950742_1280.jpg"
        alt="이미지"
        width={1280}
        height={853}
        priority={true}
      />
    </>
  );
}

`Image` 컴포넌트를 사용할 때 `width`와 `height` 속성은 필수입니다. 사용하지 않을 경우 `fill` 속성을 사용할 수 있습니다. `fill`을 사용할 때 부모 요소는 `relative`, `fixed`, `absolute` 중 하나여야 합니다.

`priority` 속성은 이미지 로딩의 우선 순위를 지정합니다.
남용하지 말고 초기 이미지 로딩이 중요한 페이지에서 사용해야 합니다.