nextjs config_error ai_generated true

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

ID: nextjs/invalid-image-remote-patterns

Also available as: JSON · Markdown · 中文

93%Fix Rate

86%Confidence

1Evidence

2023-08-05First Seen

Version Compatibility

Version	Status	Introduced	Deprecated	Notes
Next.js 13.0.0	active	—	—	—
Next.js 14.0.0	active	—	—	—
Next.js 14.2.0	active	—	—	—

Root Cause

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

中文

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

Official Documentation

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

Workarounds

95% success Ensure each object in remotePatterns has at least a hostname field. Example: `images: { remotePatterns: [{ hostname: 'example.com' }, { hostname: 'cdn.example.com', protocol: 'https' }] }`.
```
Ensure each object in remotePatterns has at least a hostname field. Example: `images: { remotePatterns: [{ hostname: 'example.com' }, { hostname: 'cdn.example.com', protocol: 'https' }] }`.
```
90% success If allowing all hosts, use a wildcard hostname: `images: { remotePatterns: [{ hostname: '**' }] }`. Note: this is insecure for production; use specific hostnames instead.
```
If allowing all hosts, use a wildcard hostname: `images: { remotePatterns: [{ hostname: '**' }] }`. Note: this is insecure for production; use specific hostnames instead.
```
85% success Use the deprecated `domains` array instead of remotePatterns for simple cases: `images: { domains: ['example.com'] }`. Note: domains is deprecated in Next.js 14 but still works.
```
Use the deprecated `domains` array instead of remotePatterns for simple cases: `images: { domains: ['example.com'] }`. Note: domains is deprecated in Next.js 14 but still works.
```

中文步骤

确保 remotePatterns 中的每个对象至少有一个 hostname 字段。示例：`images: { remotePatterns: [{ hostname: 'example.com' }, { hostname: 'cdn.example.com', protocol: 'https' }] }`。

如果允许所有主机，使用通配符 hostname：`images: { remotePatterns: [{ hostname: '**' }] }`。注意：这在生产环境中不安全，请使用特定的 hostname。

对于简单情况，使用已弃用的 `domains` 数组代替 remotePatterns：`images: { domains: ['example.com'] }`。注意：domains 在 Next.js 14 中已弃用，但仍然有效。

Dead Ends

Common approaches that don't work:

100% fail
The hostname field is still required even if protocol is specified; Next.js will still throw the same error.
90% fail
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.
80% fail
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.