Error: Image Optimization using Next.js default loader is not compatible with `next export`
Solution 1
Seems you use next/images.
But next/images
don't work with static pages (generated with next export
)
For static pages use this image-optimizer : next-optimized-images instead
Solution 2
use akamai
setting images.loader
to 'imgix'
caused dev and build errors.
i used this instead:
// next.config.js
module.exports = {
images: {
loader: 'akamai',
path: '',
},
}
it just works for all i care about.
possible values for images.loader
are: [ default, imgix, cloudinary, akamai, custom ]
reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders
Solution 3
I faced the same problem when using next export
command. I still receive this error:
Error: Image Optimization using Next.js' default loader is not compatible with
next export
. Possible solutions:
- Use
next start
to run a server, which includes the Image Optimization API.- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in
next.config.js
.- Use the
loader
prop fornext/image
.
So, to make my custom loader working correctly, I needed to set a path to an empty string:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '',
},
}
BUT, when I open the resultant index.html
file, none of the images or JS loaded.
So, for those who facing this also, please try to set the path to a /
as such:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '/',
},
}
Chukwu3meka
I'd say, am a Fullstack developer 👻 I've worked on Mobile, Desktop and Web development 💬 I'm also a Computer Science graduate 🎓 am currently learning Flutter and also interested in Cyber Security 📚
Updated on April 30, 2022Comments
-
Chukwu3meka about 2 years
I got this error when deploying Next.js to Netlify.
Error: Image Optimization using Next.js default loader is not compatible with `next export`. Possible solutions: 6:47:15 AM: - Use `next start`, which starts the Image Optimization API. 6:47:15 AM: - Use Vercel to deploy, which supports Image Optimization. 6:47:15 AM: - Configure a third-party loader in `next.config.js`. 6:47:15 AM: - Read more: https://err.sh/next.js/export-image-api. 6:47:15 AM: at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)
The problem does not occur when deploying to Vercel.
-
R. Karlus about 3 yearsWow, thanks for this answer, but I couldn't find a way to lazy load the images using this dependency. Do you know a way of doing this?
-
suther about 3 years@R.Karlus Should be included. See the docs for it by searching for
lazy
: github.com/cyrilwanner/next-optimized-images -
Kris Krause over 2 yearsYeah, I had issue using Cloudflare Pages.
-
Deep Kakkar over 2 yearsIs this next.config.js file ?
-
Ibrahim BHMBS over 2 years@DeepKakkar Yes, in the
next.config.js
file -
Deep Kakkar over 2 yearswill this work if I will not deploy on Vercel? , just need to export build using
next export
. Currently getting Image optimization error during export -
Ibrahim BHMBS over 2 years@DeepKakkar Yes, it should work elsewhere after this workaround. I tested it in Netlify and the error went away
-
Libu Mathew over 2 yearsFor me it worked after setting path: '/'
-
Neil about 2 yearsYou know you've gone seriously wrong when the solution to your bug is to change your hosting provider...
-
Chukwu3meka almost 2 yearsI choose to think different @Neil
-
Nilupul Heshan almost 2 yearsme too.. worked after put path: '/'