2023년 2월 14일


Next.js는 Image 컴포넌트를 사용한 이미지 최적화를 지원한다. 그리고 외부이미지를 사용하는 경우에는 악의적인 사용을 방지하기 위한 별도의 처리가 필요하다. next.config.js 에서 remotePatterns 속성으로 옵션에 설정할 수 있다. 지정한 도메인에 있는 이미지만 가져와 Next.js의 이미지 최적화를 사용할 수 있게 해준다.

const nextConfig = {
  ***images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.blankcdn.com',
      },
    ],
  },***
};

module.exports = nextConfig;

참고

next/image | Next.js