AI가 만든 Next.js 이미지가 배포 환경에서 표시되지 않아요
next/image에 외부 URL을 넣은 뒤 로컬 또는 배포 환경에서 이미지만 표시되지 않을 때 호스트 설정을 확인합니다.
빠른 답변
next/image의 실제 이미지 hostname과 next.config.js의 images.remotePatterns 또는 images.domains 설정이 일치하는지 확인합니다.
- 적용 범위
- 이 가이드의 시작 증상과 각 분기 조건이 일치하는 경우문맥: 바이브 코딩
- 출처
- Next.js
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 대상
- 사이트 운영자, 웹 에이전시, 프리랜서
이 가이드가 맞는 경우
- 애플리케이션 오류 메시지
- 정적 자산 로드 실패
상황별 다음 단계
호스팅사·개발자에게 전달할 내용
변경 전 기록
- 실패한 이미지 URL의 호스트·경로와 배포 커밋·Next.js 버전을 기록합니다.
- 이미지 URL에 포함된 서명·토큰·개인정보를 제거합니다.
알아둘 점
확인 순서
- 브라우저에 표시된 이미지 URL에서 protocol·hostname·port·pathname을 원문으로 기록합니다.
next.config.js의images.remotePatterns와 실제 URL의 네 항목을 한 글자씩 비교합니다.- 로컬 개발 서버와 배포 서버가 서로 다른 설정 파일 또는 환경 변수를 읽는지 확인합니다.
- 문구가 일치하면 Invalid src prop: hostname is not configured under images in your next.config.js를 확인합니다.
모든 hostname을 허용하는 와일드카드를 먼저 추가하지 마십시오. 실제로 사용하는 이미지 호스트만 등록하고 배포 후 응답 상태와 리다이렉트를 다시 확인하십시오.
참고 자료
Invalid src prop on next/image (새 창에서 열림)
Next.js · 공식 자료 · 확인 범위: 외부 이미지 URL의 protocol, hostname, port, pathname 조건이 설정과 일치해야 합니다. · 확인일: 2026-08-04