Image

트러블슈팅외부 url 사용 시 config 지정 필요

트러블슈팅

외부 url 사용 시 config 지정 필요

notion image
Next.js의 next/image는 기본적으로 외부 URL의 이미지를 차단한다.
프로젝트 내부에 포함된 이미지가 아니라, 외부 URL로부터 이미지를 가져올 경우 url을 명시해줘야 한다.
next.config.mjs 파일을 열고 아래 예시처럼 허용할 url을 명시하자.
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

export default nextConfig;