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

Question

我在将 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 时不会出现该问题。

Answer 1

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

Answer 2

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

Answer 3

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

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

• Use next start to run a server, which includes the Image Optimization API.
• Use any provider which supports Image Optimization (like Vercel).
• Configure a third-party loader in next.config.js.
• Use the loader prop for next/image.

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

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

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

因此，对于那些也面临此问题的人，请尝试将路径设置为 /，如下所示：

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

Answer 4

使用akamai

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

我改用这个：

// next.config.js

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

它对我所关心的一切都有效。

images.loader 的可能值是：[默认、imgix、cloudinary、akamai、自定义]
参考：https://nextjs.org/docs/api-reference/next/image#built-in-loaders