Next.js 외부 이미지 가져올때 설정

next.config.js 에 

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: ['www.sample.com'],
    },
}

export default nextConfig;

 

설정을 하고

 

import Image from 'next/image'

function MyComponent() {
  return (
    <Image
      src="https://www.sample.com/my-image.jpg"
      alt="Description of the image"
      width={500}
      height={300}
    />
  )
}

export default MyComponent;

 

으로 표시한다.