Next JS 포트폴리오 프로젝트 이미지 오류

최근 제가 만들고 배포한 포트폴리오 프로젝트가 잘 배포되어 있는지 확인을 해보았는데 아래와 같이 오류가 발생하는 중이었습니다.

이미지 오류

 

이 문제를 해결하기 위해 network tab을 봤을 때 notion에서 이미지를 가져오는데 이때 이미지가 aws로 배포되어 있는데 도메인에 변경이 있는 듯했습니다.

 

 

그래서 network tab에 잡힌 도메인 주소를 next.config.js에 추가해 주었다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: [
      "prod-files-secure.s3.us-west-2.amazonaws.com", // 추가 한 도메인
      "s3.us-west-2.amazonaws.com",
      "images.unsplash.com",
      "www.notion.so",
    ],
    format: ["image/png", "image/webp", "image/jpeg"],
  },
};

module.exports = nextConfig;

 

 

현재는 정상적으로 나오는 듯합니다.

https://next-portfolio-puce-kappa.vercel.app/