无法设置下一个优化图像

Question

我正在尝试使用下一个 js 9.3.6设置next-optimized-images 2.6.2，在此之后我想做“下一个构建”和“下一个导出”并生成一个静态站点。在此之后，我希望与亚马逊 S3 一起托管它。我希望 next-optimized-images 在开发时也优化图像。

我的next.config.js文件看起来像

const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const path = require('path')

module.exports = withPlugins(
  [
    [withSass],
    [
      optimizedImages,
      {
        optimizeImagesInDev: true
      }
    ],
    [withCSS]
  ],
  {
    webpack (config, options) {
      config.resolve.modules.push(path.resolve('./'))
      return config
    }
  }
)

我还安装了以下优化包

"image-trace-loader": "^1.0.2",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"webp-loader": "^0.6.0",

我的代码中有 webp 和 png 图像，我以这种方式导入

import infoImage1 from 'assets/img/pages/covid/infoImage1.png'

完成后，当我运行“npm run dev”时，它显示“[ event ] build page: /home”，然后没有其他任何事情发生，除了光标只是闪烁。

在 chrome 浏览器中当我尝试访问 localhost 时，页面没有加载。它仅显示在选项卡上保持逆时针旋转的加载微调器。页面上没有显示任何内容。

浏览器控制台或终端中均未显示错误消息。

谁能告诉我我哪里做错了，以及如何在静态站点设置中使下一个优化图像与下一个 js 一起使用？

提前致谢！