nextjs : image/remotepatterns

애플리케이션을 악의적인 사용자로부터 보호하기 위해서는 외부 이미지 사용에 대한 구성이 필요합니다. 이는 Next.js 이미지 최적화 API에서 외부 계정에서만 제공되는 이미지만 서비스할 수 있도록 보장합니다. 다음과 같이 next.config.js 파일의 remotePatterns 속성으로 이러한 외부 이미지를 구성할 수 있습니다

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

참고: 위의 예제는 next/image의 src 속성이 https://example.com/account123/로 시작해야 합니다. 다른 프로토콜, 호스트 이름, 포트 또는 일치하지 않는 경로는 400 Bad Request로 응답합니다.

다음은 next.config.js 파일의 remotePatterns 속성의 또 다른 예제입니다:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
        port: '',
      },
    ],
  },
}

Good to know:
참고: 위의 예제는 next/image의 src 속성이 https://img1.example.com 또는 https://me.avatar.example.com로 시작해야 합니다. 다른 프로토콜, 포트 또는 일치하지 않는 호스트 이름은 400 Bad Request로 응답합니다.

와일드카드 패턴은 경로 이름과 호스트 이름 모두에 사용할 수 있으며 다음과 같은 구문을 가지고 있습니다:

• • : 단일 경로 세그먼트 또는 서브도메인과 일치합니다.
• ** : 끝에 있는 경로 세그먼트나 시작 부분에 있는 서브도메인의 어떤 수의 경로 세그먼트와 일치합니다. ** 구문은 패턴의 중간에서 작동하지 않습니다.

알아두면 좋은 점: 프로토콜, 포트 또는 경로 이름을 생략하면 와일드카드 **가 함축됩니다. 이는 의도하지 않은 URL을 최적화하는 것이 가능할 수 있기 때문에 권장되지 않습니다.