[Next.js, Github Pages] Image 컴포넌트 에러 해결

문제 상황

<Image src="/images/profile.png" width={100} height={100} alt="profile" />

Next.js의 Image 컴포넌트를 사용하여 프로필 이미지를 불러오도록 작성했는데,

아래와 같은 에러가 발생했다.

Error: Image Optimization using the default loader is not compatible with `{ output: 'export' }`.
  Possible solutions:
    - Remove `{ output: 'export' }` and run "next start" to run server mode including the Image Optimization API.
    - Configure `{ images: { unoptimized: true } }` in `next.config.js` to disable the Image Optimization API.
  Read more: <https://nextjs.org/docs/messages/export-image-api>

에러 내용은 ‘기본 로더를 사용하는 이미지 최적화는 { output: 'export' } 와 사용할 수 없다’ 이다.

 

문제 원인

{ output: 'export' } 는 Github Pages로 정적 사이트를 배포하기 위해 next.config.js 파일에 추가해둔 설정이였는데, 이 부분이 문제가 되었다.

찾아보니, Next.js의 Image 컴포넌트는 이미지 최적화를 위한 작업이 서버에서 처리되기 때문에,

정적 HTML, CSS, JS 파일만을 생성하고 Next.js 서버를 사용하지 않는 { output: 'export' } 설정은 이미지 최적화 기능과 함께 사용할 수 없는 것이였다.

 

해결 방법

에러 내용에 나와있는 해결 방법은 두가지이다.

1. { output: 'export' } 설정을 제거한다. → Github Pages로 배포할 때 필요하기 때문에 ❌
2. next.config.js 파일에 images: { unoptimized: true } 설정을 추가하여 이미지 최적화 기능을 비활성화 한다. → ⭕️

2번 방법으로 수정하니, 에러 없이 Image 태그를 사용할 수 있었다.

 

Next.js가 제공하는 기본 이미지 로더 말고, Cloudinary 같은 커스텀 로더를 사용한다면 이미지 최적화를 비활성화하지 않아도 된다고 한다.

나중에 Cloudinary 를 사용해서 이미지를 최적화하는 것도 고려해봐야겠다.

 

이미지 최적화 비활성화된 <Image /> vs <img />

그러다 이미지 최적화를 위해 Next.js의 Image 컴포넌트를 사용하는 것인데,

이미지 최적화 기능이 비활성화되면 그냥 img 태그를 사용하는 것과 뭐가 다를까?라는 궁금증이 생겼다.

 

찾아보니 이미지 최적화가 비활성화된 Image 컴포넌트여도 Img 태그보다 나은 점이 몇가지가 있었다.

• width, height 속성이 필수로 요구되며, 이 정보로 이미지의 레이아웃을 미리 예약하여 페이지 로딩 중에 레이아웃 시프트를 방지한다.
• 이미지가 뷰포트에 들어올 때까지 로드되지 않는 Lazy Loading이 기본적으로 제공되어 성능 최적화가 된다.
• layout="responsive” 속성을 통해 반응형 이미지로 설정할 수 있다.

위 장점들을 보면, 이미지 최적화가 비활성화된 Image 컴포넌트가 img 태그보다 성능과 편의 면에서 더 좋은 것을 확인할 수 있다.

이미지 최적화가 되지 않는 점은 아쉽지만, 다른 점들을 생각해 Image 컴포넌트를 사용해 개발을 진행해야겠다.

 

 

 

출처

https://nextjs.org/docs/messages/export-image-api

Export with Image Optimization API

https://nextjs.org/docs/pages/building-your-application/deploying/static-exports