본문 바로가기
Frontend/Next.js

The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead

by 디스코비스킷 2024. 2. 14.
반응형

외부도메인을 사용해서 이미지 경로를 설정할때
애플리케이션을 보호하기 위해 특정 도메인에 해당하는 이미지만 사용할 수 있도록 설정을 하는것이다.

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에러가 발생한다.

반응형

최근댓글

최근글

© Copyright 2023 jngmnj