Next.js Image 컴포넌트에서 이미지가 안 보일 때 해결법 (완벽 가이드)

Next.js를 사용하다 보면 자주 겪는 문제가 바로 Image 컴포넌트에서 이미지가 보이지 않는 상황입니다.
처음 배우는 초보자부터 실무에서 프로젝트를 진행하는 개발자까지 흔히 마주치는 부분이죠.

이번 글에서는 이미지가 안 보이는 원인과 해결법을 단계별로 정리하면서, 동시에 **검색 최적화(SEO)**와 애드센스 광고 효율까지 고려한 글을 작성했습니다. 🚀

Next.js Image 컴포넌트를 써야 하는 이유

React에서는 <img> 태그로 이미지를 쉽게 넣을 수 있는데, 왜 Next.js에서는 굳이 next/image 컴포넌트를 제공할까요?

그 이유는 바로 이미지 최적화 덕분입니다.

자동 리사이징 지원 (기기에 맞게 크기 조정)
WebP 등 최신 이미지 포맷 변환
Lazy Loading 기본 적용 → 성능 향상
구글 SEO 점수 개선

즉, 블로그, 쇼핑몰, 회사 홈페이지 등 어떤 프로젝트든 속도와 검색 노출을 동시에 챙길 수 있습니다.
그런데, 문제는… 이미지가 안 뜨는 경우가 많다는 것입니다.

Next.js Image가 안 보이는 대표적인 원인

1. 도메인 미설정

외부 이미지를 불러올 때는 반드시 next.config.js에 도메인을 등록해야 합니다.

// next.config.js
module.exports = {
  images: {
    domains: ['example.com', 'cdn.myserver.com'],
  },
};

이 설정이 없으면 브라우저 콘솔에서
"Image from unauthorized host" 에러가 발생합니다.

2. 로컬 이미지 경로 오류

Next.js에서는 public 폴더 안에 이미지를 넣고, 절대 경로(/)로 접근해야 합니다.

✅ 올바른 예시:

<Image src="/logo.png" width={200} height={100} alt="로고" />

❌ 잘못된 예시:

<Image src="public/logo.png" ... />  // public을 직접 쓰면 안 됨

3. width, height 미설정

Next.js Image는 크기를 반드시 알아야 최적화를 수행합니다.
따라서 width, height가 없으면 이미지가 보이지 않거나 경고가 뜹니다.

✅ 예시:

<Image src="/banner.png" width={800} height={400} alt="배너" />

반응형 레이아웃에서는 fill 속성을 활용하세요.

<div style={{ position: "relative", width: "100%", height: "300px" }}>
  <Image src="/banner.png" alt="배너" fill style={{ objectFit: "cover" }} />
</div>

4. 로더(loader) 문제

외부 CDN, AWS S3, Cloudflare 등을 쓸 때 로더 설정이 잘못되면 이미지가 깨집니다.

const customLoader = ({ src }) => {
  return `https://cdn.myserver.com/${src}`;
};

<Image
  loader={customLoader}
  src="product1.jpg"
  width={500}
  height={500}
  alt="상품"
/>

5. 개발 환경 vs 배포 환경 차이

로컬 개발에서는 잘 보이는데, 배포(Vercel/Netlify) 후에만 깨지는 경우도 있습니다.
이 경우는 보통:

basePath 설정 누락
. env 환경 변수에서 URL 오류
Vercel / Netlify에서 도메인 허용 문제

를 확인해야 합니다.

단계별 해결 방법

이미지가 안 보일 때는 아래 순서대로 확인하세요.

next.config.js → images.domains에 도메인 추가했는가?
로컬 이미지 → public 폴더 안에 두고 / 경로로 접근했는가?
width, height, fill 중 하나를 반드시 지정했는가?
커스텀 로더 → 올바른 URL 반환하는지 확인했는가?
배포 환경(basePath, ENV 값) 문제는 없는가?

실무에서 자주 쓰는 팁

브라우저에서 직접 열어보기
이미지 주소를 브라우저에 붙여 넣어 열리면 Next.js 문제, 열리지 않으면 서버 문제입니다.
임시로 최적화 끄기→ 문제 원인 파악에 유용합니다.

<Image src="/test.png" alt="테스트" width={200} height={200} unoptimized />

→ 문제 원인 파악에 유용합니다.

CDN과 함께 쓰기
Cloudflare, AWS CloudFront 등 CDN을 쓸 때는 반드시 next.config.js에 도메인을 추가해야 합니다.

마무리 정리

Next.js Image 컴포넌트에서 이미지가 안 보이는 문제는 대부분 단순한 설정 문제입니다.
✅ 도메인 허용
✅ public 경로 확인
✅ 크기 지정
✅ 배포 환경 점검

이 네 가지만 체크하면 대부분 해결됩니다.

이미지 최적화는 단순히 화면에 띄우는 것 이상의 의미가 있습니다.
SEO 향상, 속도 개선, 사용자 경험 개선까지 챙길 수 있기 때문에 반드시 꼼꼼하게 설정하는 습관이 필요합니다.

이제 Next.js 프로젝트에서 이미지가 안 보이더라도, 이 글만 보면 바로 해결할 수 있을 거예요.

하콩망고