[Next.js] (4) 외부 이미지 파일 사용하기

외부 이미지 파일 사용하기

1) getStaticProps(SSG)를 사용하여 photos api 서버에 요청을 보내고, 데이터를 받아온다.

export const getStaticProps = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/photos?_start=0&_end=10`
  );
  const photos = await res.json(); // res를 json으로 변환하여 photos에 담는다.

  return {
    props: {
      photos: photos,
    },
  };
};

 

2) next에서 기본으로 제공해주는 image 컴포넌트를 import 받는다.

import Image from "next/image";

 

3) Photos 컴포넌트에서 photos api 서버에서 받아온 데이터를 li 태그로 출력하고, 2번에서 import 받아온 Image 컴포넌트를 사용하여 이미지를 출력한다.

const photos = ({ photos }) => {
  console.table(photos);
  return (
    <div>
      <Header title="My Photos"></Header>
      <ul>
        {photos.map((photo) => {
          return (
            <li key={photo.id}>
              <Image
                src={photo.thumbnailUrl}
                width={100}
                height={100}
                alt={photo.title}
              ></Image>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

이때 아래와 같은 오류가 발생 하는 데 

thumbnailUrl이 외부 url이기 때문에 오류가 발생 하였다.

이를 해결하기 위해서는 next.config.js에서 아래처럼 별도의 설정을 해주고 다시 개발자 모드를 구동 시켜야 적용된다.

next.config.js

---