반응형
외부도메인을 사용해서 이미지 경로를 설정할때
애플리케이션을 보호하기 위해 특정 도메인에 해당하는 이미지만 사용할 수 있도록 설정을 하는것이다.
The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead
당연한 말이지만 images.domains는 지원되지 않으니 images.remotePatterns를 쓰라는 얘기다.
next.config.js
파일을 수정한다.
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: [
'res.cloudinary.com'
]
}
}
module.exports = nextConfig
domains를 remotePatterns로 수정한다.
다만, 다음과 같이 객체로 속성을 지정해서 사용한다.
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
// domains: [
remotePatterns: [
{
protocol: "https",
hostname: "res.cloudinary.com",
pathname: '**',
}
],
},
};
module.exports = nextConfig
remotePatterns는 와일드카드를 통해 여러 서브도메인에 대해서 외부 경로를 설정할 수 있다.
프로토콜, 호스트이름, 포트번호, 서브도메인 등 하나라도 일치하지 않는경우 400에러가 발생한다.
반응형
'Frontend > Next.js' 카테고리의 다른 글
yarn berry와 nextjs 프로젝트 생성시 에러 해결모음... (0) | 2024.06.27 |
---|---|
could not open directory "pg_notify": No such file or directory 오류 해결하기 (0) | 2024.02.04 |
Error: Cannot find module '@npmcli/config' 해결하기.. (1) | 2024.02.04 |
Nextjs 프로젝트 git pull/clone 받고 실행 오류 (0) | 2024.02.02 |
[Next.js] 중고마켓 앱2 (1) | 2024.02.01 |