nextjs config_error ai_generated true

错误：next.config.js 中的 remotePatterns 配置无效。每个模式都需要 'hostname' 字段。

Error: Invalid remotePatterns configuration in next.config.js. The 'hostname' field is required for each pattern.

ID: nextjs/invalid-image-remote-patterns

其他格式: JSON · Markdown 中文 · English
93%修复率
86%置信度
1证据数
2023-08-05首次发现

版本兼容性

版本状态引入弃用备注
Next.js 13.0.0 active — — —
Next.js 14.0.0 active — — —
Next.js 14.2.0 active — — —

根因分析

next.config.js 中的 `images.remotePatterns` 数组包含一个没有 `hostname` 字段的对象，该字段是必需的。Next.js 要求每个模式至少有一个 hostname 来匹配远程图像 URL。

English

The `images.remotePatterns` array in next.config.js contains an object without a `hostname` field, which is mandatory. Next.js requires each pattern to have at least a hostname to match remote image URLs.

generic

官方文档

https://nextjs.org/docs/app/api-reference/components/image#remotepatterns

解决方案

  1. 确保 remotePatterns 中的每个对象至少有一个 hostname 字段。示例：`images: { remotePatterns: [{ hostname: 'example.com' }, { hostname: 'cdn.example.com', protocol: 'https' }] }`。
  2. 如果允许所有主机，使用通配符 hostname：`images: { remotePatterns: [{ hostname: '**' }] }`。注意：这在生产环境中不安全，请使用特定的 hostname。
  3. 对于简单情况，使用已弃用的 `domains` 数组代替 remotePatterns：`images: { domains: ['example.com'] }`。注意：domains 在 Next.js 14 中已弃用，但仍然有效。

无效尝试

常见但无效的做法:

  1. 100% 失败

    The hostname field is still required even if protocol is specified; Next.js will still throw the same error.

  2. 90% 失败

    While a wildcard hostname is allowed, it must still be explicitly provided as a string; omitting the hostname field entirely will still cause the error.

  3. 80% 失败

    An empty array will not match any remote images, causing a different error: 'Invalid src prop on next/image, hostname is not configured' for any remote image.