NextJS next.config.js图片域名是否支持正则？Giphy多域名如何处理

结论：images.domains不支持正则表达式 #

NextJS 的 images.domains 配置仅接受精确匹配的字符串，不支持正则或通配符（早期版本）。你配置的 "media\\d.giphy.com" 会被当作普通字符串处理，无法匹配 media0.giphy.com 这类实际域名，因此触发报错。

解决方案 #

根据你的 NextJS 版本，推荐以下两种可行方案：

方案1：使用 remotePatterns（NextJS 12.3.0+ 首选） #

从 NextJS 12.3.0 开始，images.remotePatterns 支持 glob 风格的通配符匹配，能精准适配 Giphy 的数字后缀域名。修改 next.config.js 如下：

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'media[0-9].giphy.com', // 匹配 media 后接单个数字的域名
        pathname: '/**', // 允许该域名下所有路径的图片资源
      },
    ],
  },
};

module.exports = nextConfig;

如果需要匹配多数字后缀（如 media10.giphy.com），可将 hostname 改为 media*.giphy.com，但前者的匹配范围更精确。

方案2：放宽域名匹配范围（兼容所有版本） #

若你的 NextJS 版本低于 12.3.0，或不想使用 remotePatterns，可直接枚举已知的 Giphy 媒体域名，或允许所有 Giphy 子域名：

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    dangerouslyAllowSVG: true,
    // 枚举已知域名
    domains: ['media0.giphy.com', 'media1.giphy.com', 'media2.giphy.com'],
    // 或允许所有 Giphy 子域名（部分旧版本支持该通配符写法）
    // domains: ['*.giphy.com'],
  },
};

module.exports = nextConfig;

注意：*.giphy.com 通配符写法的兼容性需结合你的 NextJS 版本确认，不确定的话优先选择枚举方式。

特殊场景：自定义域名校验 #

如果需要更复杂的匹配规则（如复杂正则），可以自定义图片加载逻辑绕过内置校验，但该方法需额外开发，仅推荐用于特殊需求场景。

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