next/image 에러

import { IProjectProps } from "@/types/project";
import Image from "next/image";

export default function ProjectItem({
  data: { properties, cover },
}: IProjectProps) {
  const title = properties.Name.title[0].plain_text;
  const link = properties.Link?.url;
  const video = properties.Video.url;
  const description = properties.Description.rich_text[0].plain_text;
  const img = cover.external.url;
  const skill = properties.Skills.multi_select[0].name;
  const startDate = properties.Date.date.start;
  const startEnd = properties.Date.date.end;

  return (
    <div>
      <Image src={img} alt="" width={100} height={60} />
    </div>
  );
}

next 에서 제공하는 image 문법을 사용할 때 그냥 사용하게 되면 위와같이 에러가 발생합니다.

next 에서는 외부에서 데이터를 가져오고나 할 때에는 도메인을 설정을 해줘야한다.

마침 위에 에러에서 친절하게 알려준다. 저 도메인을 설정해달라고!

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["user-images.githubusercontent.com"],
  },
};

module.exports = nextConfig;

위 코드 처럼 도메인을 저장해주면 에러는 사라진다.

단 next.config.js 를 수정했으면 서버를 껏다가 다시 켜야만 한다.