next/image가 외부 사진만 깨지는 건 경로 오타가 아니라 그 호스트가 images.remotePatterns에 없어 넥스트가 막은 줄입니다. 카카오 CDN 프로필, protocol과 hostname, 프리뷰 재빌드, unoptimized 남용 금지. Next.js, 카카오 로그인, 버셀, 1인 개발자 기준. 2026년 9월 Next.js Image 공식 문서.
next/image가 외부 사진만 깨지는 건 파일 경로가 틀린 게 아니라, 그 호스트가 images.remotePatterns에 없어서 넥스트가 일부러 막은 줄입니다. 로컬 public JPG는 보이는데 카카오 프로필만 깨지면, 컴포넌트보다 설정 한 칸부터 보세요.
콘솔에 hostname is not configured under images in your next.config가 뜨는 순간이 바로 그 차단입니다. img 태그로 바꾸면 보이지만, 최적화와 레이아웃 시프트 방지는 빠집니다.
도메인을 한 줄 허용하기 전에 프로토콜과 경로 패턴을 맞춥니다. 근거는 Next.js 미설정 호스트 문서와 Image 컴포넌트에 있습니다.
허용 목록에 그 호스트가 없는 차단입니다. Next.js는 외부 URL을 최적화 프록시로 받아 오므로, 아무 도메이나 열면 오픈 프록시가 됩니다. 그래서 기본은 막고, 설정에 적은 패턴만 통과시킵니다.
같은 사이트 안의 정적 파일은 목록이 필요 없습니다. 카카오 프로필이나 토스 브랜드처럼 바깥 주소에서 받아 오는 사진만 호스트가 달라서 목록이 필요합니다. 깨진 칸을 컴포넌트부터 의심하지 말고, 주소창에 붙여 넣은 그 사진의 앞부분 도메인부터 읽으세요.
하이드레이션 미스매치와 자리도 다릅니다. 서버 HTML과 브라우저 첫 그림이 어긋나면 콘솔에 hydration 에러가 나고, 이미지 호스트 미설정은 빌드 또는 런타임에 hostname 메시지가 납니다. 화면 불일치는 하이드레이션 미스매치를 보세요.
먼저 기억할 것 | 에러에 찍힌 hostname 문자열을 그대로 복사하세요. www 유무, CDN 서브도메인이 한 글자만 달라도 다른 호스트입니다.
프로토콜, 호스트, 경로를 나눠 적습니다. 예전 images.domains는 호스트만 적었고, 지금은 remotePatterns가 권장입니다.
| 필드 | 예 | 실수 |
|---|---|---|
| protocol | https | http로 적으면 https URL이 막힘 |
| hostname | k.kakaocdn.net | kakaocdn.net만 적으면 서브가 안 맞음 |
| pathname | /** | 너무 좁히면 하위 경로만 깨짐 |
| port | 비움(기본 443) | 로컬 3000 이미지를 외부처럼 적음 |
카카오 프로필은 콘솔 앱마다 CDN 호스트가 조금 다를 수 있습니다. 깨진 이미지 URL을 주소창에 붙여 호스트만 떼서 넣으세요. 와일드카드 호스트를 넓게 열면 보안 구멍이 되니, 실제로 쓰는 CDN만 적습니다.
next.config.js remotePatterns 예시/** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'k.kakaocdn.net', pathname: '/**', }, { protocol: 'https', hostname: 't1.kakaocdn.net', pathname: '/**', }, ], }, } module.exports = nextConfig
설정 파일이 빌드에 안 들어갔거나, 프리뷰만 다른 이미지 호스트를 씁니다. 로컬에선 public 폴더 샘플을 보고, 프리뷰에선 카카오 실프로필 URL을 넣는 식이죠.
버셀 배포 후 설정 변경은 재배포가 필요합니다. next.config.js를 고치고 저장만 한 채 예전 빌드가 서빙되면 같은 차단이 남습니다. 프리뷰 URL을 하드 리프레시해도 서버 설정은 안 바뀝니다.
trailing slash와 OG 이미지 경로가 꼬이면 사진이 아니라 리다이렉트만 받을 수 있습니다. 넥스트가 정적 PNG에 슬래시를 붙이면 일부 크롤러는 이미지를 못 가져갑니다. 화면의 next/image 차단과는 다른 칸이니, 콘솔 메시지에 hostname이 있는지부터 가릅니다.
허용 목록으로 안 되는 예외만 우회합니다. unoptimized는 넥스트 최적화 프록시를 건너뛰고 브라우저가 원본 URL을 직접 받습니다. 호스트 검사는 피하지만, 리사이즈와 포맷 변환도 빠집니다.
사용자마다 호스트가 다른 프로필 URL, 또는 토스 가맹 이미지가 도메인 여러 개로 흩어질 때는 로더를 직접 쓰기도 합니다. 다만 로더가 다시 외부 URL을 부르면 CSP와 CORS가 붙습니다. 헤더가 막히면 CORS와 보안 헤더를 같이 보세요.
모듈 경로를 못 찾아 이미지 컴포넌트 자체가 안 뜨는 줄은 이 글이 아닙니다. next/image를 못 찾으면 Cannot find module입니다. hostname 메시지가 있을 때만 설정을 고치세요.
img로 전부 바꾸지 말 것 | 잠깐 확인용은 됩니다. 레이아웃 시프트와 큰 원본 전송이 남으니, 호스트를 알면 remotePatterns로 되돌리세요.
카카오 사용자 객체의 프로필 URL은 앱 검수와 동의 항목에 따라 비어 있을 수 있습니다. 호스트 설정과 빈 문자열은 다른 칸입니다. URL이 빈 채 Image에 들어가면 호스트 에러가 아니라 잘못된 src 경고가 납니다.
URL이 있는데도 깨지면, 그 문자열이 http://인지 https://인지, 호스트가 k.kakaocdn.net인지 img1.kakaocdn.net인지 그대로 적습니다. 로컬 더미 아바타는 public에 두고, 실프로필만 외부 패턴을 타게 분기하세요.
| 증상 | 원인 | 다음 |
|---|---|---|
| hostname is not configured | remotePatterns 없음 | 설정에 호스트 추가 |
| Invalid src | 빈 문자열, 상대경로 오타 | 카카오 필드 존재 여부 |
| 로컬만 보임 | 프리뷰 미재배포 | 설정 커밋 후 재빌드 |
| 사진은 있고 CSP 차단 | img-src에 CDN 없음 | 보안 헤더 글 |
공식 문서 다섯 곳을 기준으로 적었습니다.
내부 연계: 하이드레이션 미스매치, CORS, 보안 헤더, 모듈을 찾을 수 없음
인용한 동작은 2026년 9월 공개 문서 기준입니다.
같은 출처 정적 파일은 허용 목록이 필요 없고, 카카오 CDN은 호스트가 다릅니다. 콘솔에 찍힌 hostname을 remotePatterns에 그대로 넣으세요.
지금은 remotePatterns가 권장입니다. protocol과 pathname까지 적을 수 있어 더 좁게 열 수 있습니다. 옛 domains만 있는 설정은 호스트 문자열만 맞습니다.
next.config 변경은 재빌드가 필요합니다. 저장만 하고 예전 배포가 서빙되면 차단이 남습니다. 커밋 후 프리뷰가 새로 빌드됐는지 확인하세요.
호스트 검사는 피합니다. 최적화와 레이아웃 시프트 방지는 빠집니다. 호스트를 알면 목록에 넣고 Image를 유지하는 편이 낫습니다.
최적화 프록시가 오픈 프록시가 됩니다. 카카오, 토스처럼 실제로 쓰는 CDN만 적으세요. 사용자마다 호스트가 다르면 그 경우만 unoptimized를 검토합니다.
hostname is not configured면 넥스트 설정입니다. img-src 위반이면 보안 헤더입니다. 콘솔 문장에 hostname이 있는지, CSP 지시어가 있는지로 가릅니다.
