인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다. Kua님께서 질문하신 내용은 Next.js 설정 중 images.domains의 사용 중단과 관련된 문제입니다. 대신 remotePatterns를 사용하여 이미지를 불러오는 방법에 대해 안내 드리겠습니다.

Next.js 버전 12 이상부터는 images.domains가 remotePatterns로 대체되었습니다. remotePatterns는 외부 도메인 이미지의 가져오기를 더 세부적으로 구성할 수 있는 기능을 제공합니다.

설정 방법:

1. next.config.js 파일을 열고 images 속성을 수정하여 remotePatterns를 추가합니다.
   
2. protocol, hostname, pathname 등의 속성을 사용해 허용할 외부 이미지 소스를 지정합니다.
   

예제 코드:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'shopping-phinf.pstatic.net',
        pathname: '**',
      },
      // 다른 외부 이미지 소스도 추가할 수 있습니다.
    ],
  },
}

위와 같이 설정하면 https 프로토콜을 사용하여 ‘shopping-phinf.pstatic.net’ 도메인에서 모든 경로(**)의 이미지를 로드할 수 있습니다.

참고 링크:

• Next.js 이미지 컴포넌트 문서에서 remotePatterns 사용법
  

이 방법은 다양한 외부 출처의 이미지를 안전하게 가져오는 데 도움이 됩니다. 이미지를 설정할 때 이 패턴을 사용하여 보다 세부적으로 제어할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.