[태그:] 넥스트js

Invalid src prop (https://….jpg) on `next/image`, hostname “외부도메인.com” is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

이 Runtime error는 아래와 같이 next.config.ts 파일에 번들 분석을 했을 경우 Next/Image 패키지의 <Image /> 컴포넌트에 외부 도메인 경로의 이미지를 넣은 경우next.config.ts 에 설정한 images.remotePatterns 를 인식하지 못하게 되서 발생한다.

  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  });
  module.exports = withBundleAnalyzer({});

해결 방법은 매우 간단하다. 간단히 분석 모드를 끄고 빌드하면 된다.