[에러일지] Next.js: "url" parameter is not allowed

문제

import Image from "next/image"

이미지 최적화 Image 태그에서 외부 리소스가 적용하지 않음

이미지 url를 주소창에 입력하면 정상 작동한다

해결

next.config.js 파일에서 domains 수정

module.exports = withBundleAnalyzer({
  images: {
    domains: [images.url.com],
  },
});

domains 속성은 애플리케이션에서 허용하는 이미지 도메인 목록을 지정한다

허용된 도메인에서만 이미지를 불러올 수 있다

보안상의 이유로 애플리케이션이 특정 도메인에서만 이미지를 허용할 때 사용함

remotePatterns 은 보다 유연한 이미지 로딩 패턴을 정의하는 데 사용

다양한 도메인에서 이미지를 가져와야 하는 경우, 프로토콜과 호스트 이름을 유연하게 설정할 수 있다

Next.js 14부터 사용되지 않는다

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: domains,
      },
    ],
  },