I'm trying to build and export my Next.JS project, and I'm stuck with Image Optimization error while exporting.
I've created a custom loader, creating a file /services/imageLoader.js with the following content:
export default function LocalImageLoader({src, width, quality}) {
var fileName = src.split("/").pop();
return `./_next/static/media/${fileName}`;
}
And, inside all my pages where I used the next/image component, I've added the loader attribute to , pointing to my LocalImageLoader funcion, this way:
import LocalImageLoader from '../services/imageLoader';
import logoImage from '../resources/images/logo.png';
// boring stuff here
<Image loader={LocalImageLoader} src={logoImage} alt="Logo" className="img-fluid" />
// more boring stuff here
After that, everytime I try to run npm run export (I've set up the export script in my package.json, that runs next build && next export), and the following error comes in my screen:
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 for `next/image`.
Read more: https://nextjs.org/docs/messages/export-image-api
at /home/raphael/Projects/Next/learning/testProject/node_modules/next/dist/export/index.js:256:23
at async Span.traceAsyncFn (/home/raphael/Projects/Next/learning/testProject/node_modules/next/dist/trace/trace.js:74:20)
Can someone say me what I'm doing wrong?
Thanks!
You forgot to add your custom loader to next.config.js. You will need to do something like in snippet below. In case if you won't succeed there are available loaders, because default loader won't work when you export.
module.exports = {
images: {
loader: 'custom',
path: 'https://example.com/myaccount/',
},
}
More info here: https://nextjs.org/docs/api-reference/next/image#loader-configuration