You need to set up a custom image loader in Next.js

In your next.config.js file, add this property to the export:

images: {
  loader: "custom"
}

And make a script called loader.js that exports this:

function imageLoader({ src }) {
  return `/images/${src}`; // REPLACE WITH YOUR IMAGE DIRECTORY
}

module.exports = imageLoader;

For each Image component, set the loader prop manually:

const imageLoader = require("PATH TO loader.js");

<Image loader={imageLoader} />

I created a npm module so that we can use the Next.js <Image/> component with optimized images while using the static export functionality.

https://www.npmjs.com/package/next-image-export-optimizer

The library wraps the <Image /> component of Next.js and automatically creates optimized images using sharp.js at export time.

It uses a custom loader to create a srcset for the <img /> that the <Image /> component of Next.js creates. Then at build/export time, the images inside the public/images folder (as an example) are optimized with sharp.js and copied into the build folder.

I'm going to add onto skara9's answer because it didn't quite work for me. I found a thread on github discussing it and the answer there worked for me. It just wraps around the NextJS image component and works pretty flawlessly for me.

// components/Image.js
import NextImage from "next/image";

// opt-out of image optimization, no-op
const customLoader = ({ src }) => {
  return src
}

export default function Image(props) {
  return (
    <NextImage
      {...props}
      loader={customLoader}
    />
  );
}

Make sure you change your imports and update your next.config.js

import Image from '../components/Image.js'