2025.7.1 화요일의 공부기록
Next.js에서는 기본 HTML <img> 태그에서 지원하지 않는 여러 가지 강력한 기능을 제공하는 Image 컴포넌트를 사용할 수 있다. 이번 글에서는 Next.js Image 컴포넌트의 주요 특징과 활용 방법을 자세히 알아보자.
Next.js Image 컴포넌트란?
Next.js의 Image 컴포넌트는 이미지를 웹페이지에 최적화된 형태로 쉽게 배치할 수 있도록 도와주는 강력한 도구이다.
기본적인 HTML의 <img> 태그와 달리 다양한 최적화 기능을 자동으로 지원한다.
1. Content Shift 방지 (레이아웃 이동 방지)
이미지가 로딩되기 전후에 컴포넌트의 위치가 밀리는 현상(content shift)을 방지해 준다.
사용자는 콘텐츠가 갑자기 이동하는 좋지 않은 유저 경험을 예방한다.
2. 자동 이미지 최적화 (Automatic Optimization)
- 화면 크기, 해상도에 따라 이미지의 압축률과 포맷을 자동 조정한다.
- 웹 페이지의 로딩 성능을 크게 향상시킨다.
3. Lazy Loading 지원
- 사용자가 이미지를 보기 전까지 로딩을 지연시켜, 초기 로딩 성능을 최적화할 수 있다.
필수 속성 (props)
Next.js Image 컴포넌트는 다음 속성들이 필수적으로 제공되어야 한다.
| Props | 설명 | 타입 |
|---|---|---|
src | 이미지 경로(URL) | string |
width | 이미지 너비 (픽셀 단위) | number |
height | 이미지 높이 (픽셀 단위) | number |
alt | 이미지 대체 텍스트 (접근성 및 SEO에 필수) | string |
이미지의 크기를 정확히 모르는 경우, fill 속성을 사용한다.
fill 속성으로 부모 컴포넌트 크기 채우기
이미지의 너비와 높이를 미리 알 수 없는 경우에는 fill 속성을 활용한다.
fill 속성 사용법
- 이미지가 부모 컴포넌트를 꽉 채우도록 할 때 매우 유용하다.
- 부모 요소에 반드시 CSS로
position: relative,position: fixed, 또는position: absolute를 지정해 주어야 한다. fill사용 시,Image컴포넌트에 자동으로position: absolute가 적용된다.
사용 예시:
import Image from "next/image";
export default function Example() {
return (
<div className="relative w-full h-60">
<Image
src="/example.jpg"
fill
alt="예시 이미지"
className="object-cover"
/>
</div>
);
}위의 예시에서 이미지가 부모 요소를 자동으로 꽉 채우게 된다.
반응형 이미지 적용 예시 (sizes prop 사용)
여러 화면 크기에 최적화된 이미지를 제공할 때 sizes prop을 사용하여 반응형 이미지를 쉽게 구현할 수 있다.
<Image
src="/example.jpg"
alt="반응형 이미지 예시"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="object-cover"
/>이렇게 설정하면 브라우저는 화면 크기에 따라 최적화된 이미지 크기를 자동으로 선택하여 제공한다.
Image 컴포넌트 사용 시 주의사항
- 외부 도메인의 이미지를 로드하려면
next.config.js에 허용된 도메인을 설정해야 한다.
Next.js Image 컴포넌트와 외부 이미지 제한
Next.js의 Image 컴포넌트는 기본적으로 이미지 최적화를 자동으로 수행하여 성능과 로딩 속도를 향상시킨다. 하지만 보안상 이유로 외부 사이트의 이미지를 로드할 때는 기본적으로 최적화가 허용되지 않는다.
즉, 다음과 같은 코드는 기본 설정에서는 에러를 발생시킨다:
import Image from "next/image";
export default function Example() {
return (
<Image
src="https://avatars.githubusercontent.com/example.jpg"
width={200}
height={200}
alt="외부 이미지"
/>
);
}이를 해결하려면 Next.js 설정에서 허용할 이미지의 호스트 이름을 명시적으로 등록해야 한다.
이미지 호스트 등록하기 (next.config.mjs)
따라서 Next.js에서 외부 호스트의 이미지를 허용하려면 프로젝트 루트의 next.config.mjs에 images.remotePatterns 옵션을 사용하여 호스트를 등록해야 한다.
설정 예시 코드 (next.config.mjs):
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
hostname: "avatars.githubusercontent.com", // 허용할 이미지 호스트
},
],
},
};
export default nextConfig;이렇게 설정한 뒤에는 프로젝트를 다시 실행해야 설정이 적용된다.
remotePatterns 설정 세부 옵션
remotePatterns 옵션에서는 다양한 속성을 통해 세부적인 URL 패턴을 설정할 수 있다.
| 옵션 | 설명 | 예시 |
|---|---|---|
| protocol | 이미지 요청 프로토콜 (http, https) | https |
| hostname | 이미지의 호스트 이름 (domain.com) | avatars.githubusercontent.com |
| port | 포트 번호 (필요한 경우만 설정) | 8080 |
| pathname | 이미지 경로 (정규 표현식 지원) | /images/** |
예시:
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "avatars.githubusercontent.com",
pathname: "/u/**", // 이 경로 하위의 모든 이미지 허용
},
{
protocol: "https",
hostname: "example.com",
},
],
},
};
export default nextConfig;