在“next.config.js”中找不到“exportPathMap”。从“./pages”生成地图答案

【问题标题】：Error: Image Optimization using Next.js default loader is not compatible with `next export`在“next.config.js”中找不到“exportPathMap”。从“./pages”生成地图
【发布时间】：2021-04-05 19:59:29
【问题描述】：

在将 Next.js 部署到 Netlify 时出现此错误。

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

Possible solutions:

6:47:15 AM:   - Use `next start`, which starts the Image Optimization API.
6:47:15 AM:   - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM:   - Configure a third-party loader in `next.config.js`.
6:47:15 AM:  -  Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM:   at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)

部署到 Vercel 时不会出现该问题。

【问题讨论】：

标签： reactjs deployment next.js netlify

【解决方案1】：

将image.loader 设置为imgix 会导致开发和构建错误。

我用这个代替：

// next.config.js

module.exports = {
  images: {
    loader: 'akamai',
    path: '',
  },
}

它只适用于我关心的一切。

【讨论】：

【解决方案2】：

我在使用next export 命令时遇到了同样的问题。我仍然收到此错误：

错误：使用 Next.js 的默认加载器进行图像优化与 next export 不兼容。可能的解决方案：

使用next start 运行服务器，其中包括图像优化 API。

使用任何支持图像优化的提供程序（如 Vercel）。

在next.config.js中配置第三方加载器。

为next/image 使用loader 属性。

所以，为了让我的自定义加载器正常工作，我需要设置空字符串的路径：

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '',
  },
}

但是，当我打开生成的 index.html 文件时，没有加载任何图像或 JS。

因此，对于那些也面临这种情况的人，请尝试将路径设置为/：

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '/',
  },
}

【讨论】：

这是 next.config.js 文件吗？
@DeepKakkar 是的，在next.config.js 文件中
如果我不在 Vercel 上部署，这是否可行？，只需要使用next export 导出构建。目前在导出过程中出现图像优化错误
@DeepKakkar 是的，在此解决方法之后它应该可以在其他地方工作。我在 Netlify 中对其进行了测试，错误消失了

【解决方案3】：

避免此问题的最佳方法是使用 Vercel 进行部署，我在 netlify 上托管的 next.js 站点存在其他问题，但自从我重新部署到 vercel 后，所有问题都消失了

【讨论】：

是的，我在使用 Cloudflare Pages 时遇到了问题。
好心，如果您找到答案用户，请点赞

【解决方案4】：

您似乎使用下一个/图像。但是next/images 不适用于静态页面（使用next export 生成）对于静态页面，请使用此图像优化器：next-optimized-images

【讨论】：

哇，感谢您的回答，但我找不到使用此依赖项延迟加载图像的方法。你知道这样做的方法吗？
@R.Karlus 应该包括在内。通过搜索 lazy: github.com/cyrilwanner/next-optimized-images 查看相关文档