Sua Blog
next export 중 Image Optimization 에러 해결
2022-08-22 — nextjs
Next.js 프로젝트를 Cloudflare pages로 배포하다가 Image Optimization관련 에러가 발생했다.
에러 발생 이유
'next export'를 사용하여 빌드시 이미지를 최적화할 수 없다. 'next/image'의 컴포넌트를 사용하려면 default loader가 아닌 다른 로더를 사용하도록 설정해줘야 한다.
// next.config.js
const nextConfig = {
reactStrictMode: true,
images: {
loader: 'akamai',
path: '/',
},
};
내장 로더
- Default: 'next dev', 'next start', 사용자 정의 서버일 때 자동으로 설정
- Vercel: Vercel에 배포할 때 자동으로 작동되고 설정 필요하지 않음
- Imgix: loader: 'imgix'
- Cloudinary: loader: 'cloudinary'
- Akamai: loader: 'akamai'
- Custom: loader: 'custom'을 사용하면 next/image component에 사용자 지정 클라우드 공급자를 사용한다.