Image Optimization using Next.js default loader is not compatible with 'next Export'

생성일

Dec 14, 2021 02:43 PM

태그

Next.js

작성자

해결 완료

🔥 문제

⭐ 해결 방법

이미지 로더의 문제였다.

보통 이미지 로더는, 개발 서버에서는 domains만 잘 걸어줘도 해결이 됐다.

하지만, 배포를 할 때에는 export를 하게 되고, export할 때에는 반드시 loader를 설정해주어야 하는 듯하다.

따라서 결정적인 힌트를 준 문서는 바로 이다.


/** @type {import('next').NextConfig} */

module.exports = {
  images: {
    loader: 'imgix',
    path: '',
    domains: ['picsum.photos'],
  },
  reactStrictMode: true,
  // exportPathMap: () => ({
  // '/login': { page: '/login' },
  // '/owner/success': { page: '/owner/success' },
  // '/register/success': { page: '/register/success' },
  // '/register': { page: '/register' },
  // '/': { page: '/' },
  // '/history/events': { page: '/history/events' },
  // '/history/reviews': { page: '/history/reviews' },
  // '/likes/event': { page: '/likes/event' },
  // '/likes/shop': { page: '/likes/shop' },
  // '/owner/change': { page: '/owner/change' },
  // '/profile/edit': { page: '/profile/edit' },
  // }),
};

여기서, imgix라는 prefix를 설정해준 다음, 아무 path를 null로 해놓고, 해당 도메인을 next.config.js에 걸어놨더니, 큰 이상 없이 잘 동작하였다!

👏🏻 참고자료

새벽에 미친 듯한 원인 추적... 아주 눈물이 났다^^...

https://nextjs.org/docs/api-reference/next/image#loader-configuration

https://nextjs.org/docs/messages/prerender-error

https://stackoverflow.com/questions/65124094/next-image-does-not-load-images-from-external-url-after-deployment

https://programming119.tistory.com/235

https://github.com/vercel/next.js/issues/21079