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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14/** @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;

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

지금은 내린 사이트입니다. 이후 만든 Next.js 포트폴리오는 next-umsungjun.vercel.app 에 있습니다.

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

프로젝트의 다른 글