domains는 deprecated 되었습니다.
next configuration에서
images.domains는 deprecated 되었음으로 remotePatterns를 사용하시길 권장드립니다.
images : {
remotePatterns: [
{
protocol: 'https',
hostname: 'shopping-phinf.pstatic.net',
pathname: '**',
}
]
}https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. Kua님께서 질문하신 내용은 Next.js 설정 중 images.domains의 사용 중단과 관련된 문제입니다. 대신 remotePatterns를 사용하여 이미지를 불러오는 방법에 대해 안내 드리겠습니다.
Next.js 버전 12 이상부터는 images.domains가 remotePatterns로 대체되었습니다. remotePatterns는 외부 도메인 이미지의 가져오기를 더 세부적으로 구성할 수 있는 기능을 제공합니다.
설정 방법:
next.config.js파일을 열고images속성을 수정하여remotePatterns를 추가합니다.
protocol,hostname,pathname등의 속성을 사용해 허용할 외부 이미지 소스를 지정합니다.
예제 코드:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'shopping-phinf.pstatic.net',
pathname: '**',
},
// 다른 외부 이미지 소스도 추가할 수 있습니다.
],
},
}
위와 같이 설정하면 https 프로토콜을 사용하여 ‘shopping-phinf.pstatic.net’ 도메인에서 모든 경로(**)의 이미지를 로드할 수 있습니다.
참고 링크:
이 방법은 다양한 외부 출처의 이미지를 안전하게 가져오는 데 도움이 됩니다. 이미지를 설정할 때 이 패턴을 사용하여 보다 세부적으로 제어할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
에러핸들링- rootlayout에 관하여
0
51
2
버셀로 서버 배포 후 접속 시 500 에러 발생
0
101
2
컴포넌트와 레이아웃
0
70
2
@/styles/globals.css'
0
81
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
92
2
next.js 프로젝트
0
89
1
Next.js + Tanstack Query BFF 구조 질문
1
107
2
Next.js 사전렌더링 이해하기 부분
0
102
2
모달 관련 질문
0
107
3
렌더링 관련 질문
0
127
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
120
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
110
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
129
2
npx prisma db push 시 에러가 뜹니다.
0
153
3
vercel 배포를 실패하였습니다.
0
176
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
115
2
getServerSideProps 함수와 SSR의 관계
0
148
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
107
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
170
2
일반적인 nextjs project architecture에 대하여..
0
134
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
119
2
배포 시 오류 발생
0
136
2
백엔드 서버 오류납니다.
0
130
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
130
1





