'Error: Image Optimization using Next.js default loader is not compatible with `next export`
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.
Solution 1:[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:[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:[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: '/',
},
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | suther |
Solution 2 | |
Solution 3 | Ibrahim BHMBS |