Next.js Image报错‘hostname未配置’，手动配置next.config.js无效求助

next.config.js 是否会自动生成？ #

Next.js 默认不会自动生成 next.config.js 文件，只有当你需要自定义框架配置（比如图片域名白名单、构建选项等）时，才需要手动在项目根目录创建该文件。你的操作是正确的。

修复 next/image 图片加载报错的步骤 #

1. 检查 next.config.js 配置格式是否正确 #

确保配置结构符合 Next.js v15 的要求，以下是针对 Cloudinary 的标准配置示例：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        port: '',
        pathname: '/**', // 允许该域名下所有路径的图片
      },
    ],
  },
};

export default nextConfig;

• 注意：pathname 需根据你的 Cloudinary 图片实际路径调整，比如你的图片路径是 res.cloudinary.com/your-cloud-name/**，可以将 pathname 设为 /your-cloud-name/** 以缩小权限范围。
• 确保没有拼写错误，比如 hostname 中的 res.cloudinary.com 必须完全匹配图片 URL 的域名。

2. 重启 Next.js 开发服务器 #

修改 next.config.js 后，配置不会热重载，必须完全停止并重新启动开发服务器，否则新配置不会生效。

3. 验证 next/image 组件的使用 #

确保你使用的是 Next.js 官方的 next/image 组件，且 src 属性的域名确实是 res.cloudinary.com，没有使用错误的协议（比如 http 而非配置的 https）。

4. 排查特殊场景 #

如果以上步骤都无效，检查是否存在以下情况：

• 项目根目录是否正确：next.config.js 必须放在项目根目录（和 package.json 同级），不能放在子目录中。
• 是否有其他配置冲突：比如是否同时配置了 domains（旧版配置方式）和 remotePatterns，两者不能混用，v15 推荐使用 remotePatterns。

内容的提问来源于stack exchange，提问作者Atul Jha