I'm encountering a problem while attempting to build and export my Next.JS project. The issue lies with Image Optimization error during the export process.
To address this, I have developed a custom loader by creating a file /services/imageLoader.js containing the following code:
export default function LocalImageLoader({src, width, quality}) {
var fileName = src.split("/").pop();
return `./_next/static/media/${fileName}`;
}
In all pages where I utilize the next/image component, I have included the loader attribute, pointing to my LocalImageLoader function like so:
import LocalImageLoader from '../services/imageLoader';
import logoImage from '../resources/images/logo.png';
// more code followed by
<Image loader={LocalImageLoader} src={logoImage} alt="Logo" className="img-fluid" />
// yet more code here
However, when running npm run export (configured in package.json as next build && next export), I encounter the subsequent error message:
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.
- Utilize a provider that supports Image Optimization (e.g., Vercel).
- Configure a third-party loader in `next.config.js`.
- Apply 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)
If anyone can help me identify what I might be doing incorrectly, I would greatly appreciate it!
Thank you!