[Next.js] next/image src 외부 이미지 URL로 설정하기

Next.js의 Image 컴포넌트의 src 속성을 외부 경로로 설정하게 되면 아래와 같은 에러가 발생합니다.

 

Unhandled Runtime Error
Error: Invalid src prop
(...image URL) on `next/image`, hostname "...img URL hostname" is not configured under images in your `next.config.js`

 

 

Next.js의 12.3.0 이후 버전에서는 next.config.js 파일에 아래와 같은 설정을 추가해주면 에러가 해결되며, 외부 경로의 이미지를 사용할 수 있습니다.

 

// next.config.js
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com', // image URL hostname
        port: '',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

 

 

참고자료

- https://nextjs.org/docs/messages/next-image-unconfigured-host