Javascript Can'；设置下一个优化的图像

我正在尝试使用下一代js 9.3.6设置下一代优化图像2.6.2，之后我想进行“下一代构建”和“下一代导出”，并生成一个静态站点。在这之后，我希望用AmazonS3来主持它。我想下一个优化图像优化图像，同时发展太

我的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一起工作

---

提前谢谢

我也有同样的问题！你有没有找到解决办法？你有没有试过nextjs 10？