我创建了一个npm模块，这样我们就可以在使用静态导出功能的同时使用Next.js组件和优化的图像。
https://www.npmjs.com/package/next-image-export-optimizer
该库 Package 了Next.js的组件，并在导出时使用sharp.js自动创建优化的图像。
它使用自定义加载器为Next.js组件创建的创建srcset。然后在构建/导出时，public/images文件夹中的图像（例如）会使用sharp.js进行优化，并复制到构建文件夹中。

您需要在Next.js中设置自定义图像加载器
在next.config.js文件中，将此属性添加到导出中：

images: {
  loader: "custom"
}

然后编写一个名为loader.js的脚本，导出以下内容：

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

module.exports = imageLoader;

对于每个Image组件，手动设置loader属性：

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

<Image loader={imageLoader} />

我将把skara9的答案加进去，因为它对我不太起作用。我在github上找到了一个thread讨论它，那里的答案对我很有效。它只是 Package 在NextJS图像组件周围，对我来说非常简单。

// 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}
    />
  );
}

确保更改导入并更新next.config.js

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

现在最简单的解决方案是选择退出下一个图像优化。这对我的项目来说不是问题。你可以把这个添加到next.config.js中：

output: 'export',
images: {
    unoptimized: true,
}

或者，您可以使用不需要服务器运行时的自定义加载器，我不建议这样做，因为：
1.使用像cloudinary这样受支持的云图像加载器可能更容易。
1.您可以轻松使用Next的内置图像优化器，您可以使用next start启动。
但是，如果你真的想使用自定义的预处理器和加载器，你可以像前面的回答中提到的那样使用https://www.npmjs.com/package/next-image-export-optimizer。

对于那些想要从2023年起使用next.js导出优化图像的人，您可以在这里阅读更多信息！
https://next-export-optimize-images.vercel.app/docs/comparison#next-image-export-optimizer
安装它

yarn add -D next-export-optimize-images

并用作nextjs插件

const withExportImages = require(  "next-export-optimize-images");
module.exports = withExportImages({...baseConfig, output: "export"})

然后更改构建脚本

{
-  "build": "next build",
+  "build": "next build && next-export-optimize-images",
}

就是你要做的