Next.js配置remotePatterns仍报图片Host未配置错误，如何排查？

问题描述 #

在Next.js 13.3.1版本中，已在next.config.js配置图片远程域名规则：

images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "s3-eu-central-1.amazonaws.com",
        port: "",
        pathname: "/mycompany-data-bucket-dev/**",
      },
    ],
  },

但使用next/image组件加载图片时，仍收到错误：

Error: Invalid src prop (https://s3-eu-central-1.amazonaws.com/mycompany-data-bucket-dev/media/images/default-female/default-female-500-500.jpg) on `next/image`, hostname "s3-eu-central-1.amazonaws.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

已重启本地开发服务器（运行在localhost:3000）并核对错误信息，需排查问题，包括如何打印运行时Next.js配置。

排查步骤 #

1. 打印运行时Next.js配置验证 #

方法1：修改next.config.js启动时打印

将静态配置改为函数形式，在服务器启动时输出配置：

module.exports = (phase, { defaultConfig }) => {
  const config = {
    ...defaultConfig,
    images: {
      remotePatterns: [
        {
          protocol: "https",
          hostname: "s3-eu-central-1.amazonaws.com",
          port: "",
          pathname: "/mycompany-data-bucket-dev/**",
        },
      ],
    },
  };
  // 打印images配置到控制台
  console.log("当前加载的Images配置:", JSON.stringify(config.images, null, 2));
  return config;
};

重启开发服务器后，查看终端输出，确认remotePatterns是否正确加载。

方法2：在页面组件中读取并打印

在任意页面组件中添加以下代码，访问页面后查看控制台：

import getConfig from 'next/config';

const { serverRuntimeConfig } = getConfig();

// 在组件渲染时打印配置
console.log("运行时Images配置:", serverRuntimeConfig.images);

通过浏览器开发者工具的控制台（或服务器终端）确认配置是否正确加载。

2. 其他排查方向 #

• 验证路径通配符匹配：当前pathname为/mycompany-data-bucket-dev/**，理论上匹配目标图片路径，但可尝试简化规则（如改为/mycompany-data-bucket-dev/*或/**）测试，排除通配符逻辑问题。
• 确认配置文件位置：确保next.config.js在项目根目录，Next.js仅读取根目录的配置文件。
• 检查配置覆盖情况：若项目使用next-compose-plugins等配置合并工具，确认images配置未被其他插件或环境变量覆盖。
• 清除缓存：删除.next文件夹后重启服务器，或执行npm run build重新构建，避免旧缓存导致配置未生效。
• 核对协议与端口：确认图片URL的协议为https、端口为空，与配置完全一致。

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