Error: Image Optimization using Next.js' default loader is not compatible with `next export`

Hello,

Im trying to deploy a Static site with Cloudflare Pages and Next.js.

Im Struggling with put a Image (Banner) on the Header…

|22:54:59.359|Error: Image Optimization using Next.js' default loader is not compatible with `next export`.|
|---|---|
|22:54:59.359|  Possible solutions:|
|22:54:59.359|    - Use `next start` to run a server, which includes the Image Optimization API.|
|22:54:59.360|    - Use any provider which supports Image Optimization (like Vercel).|
|22:54:59.360|    - Configure a third-party loader in `next.config.js`.|
|22:54:59.360|    - Use the `loader` prop for `next/image`.|
|22:54:59.360|  Read more: https://nextjs.org/docs/messages/export-image-api|
|22:54:59.360|    at /opt/buildhome/repo/node_modules/next/dist/export/index.js:157:23|
|22:54:59.360|    at async Span.traceAsyncFn (/opt/buildhome/repo/node_modules/next/dist/trace/trace.js:79:20)|
|22:54:59.371|Failed: build command exited with code: 1|

i read this that is possible with custom loader:
https://developers.cloudflare.com/images/image-resizing/integration-with-frameworks/

I added this to my index.js.

...................
const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

const cloudflareLoader = ({ src, width, quality }) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/playground_assets/${paramsString}/${normalizeSrc(src)}`;
};
....................
        <header data-role="Accordion" className="home-header">
          <div className="home-container1">
            <Image
              loader={cloudflareLoader}
              src="/banner-1400w.png"
              className="home-image"
              width={100}
              height={100}
            />
          </div>
...........

But still get the error…
anyone know how to fixx this?

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.