Next.js中Instagram图片域名频繁变动时如何正确配置域名规则

配置正确性说明 #

你使用的domains: ["instagram.*"]配置在Next.js 12及更早版本中完全生效，可以匹配所有以instagram.开头的CDN域名，满足Instagram动态CDN的加载需求，没有功能性错误。

更规范的实现方案 #

Next.js 13及以上版本官方已经废弃domains配置项，更推荐使用规则更精准、安全性更高的remotePatterns配置，既能覆盖所有Instagram的CDN域名，也能避免通配符范围过大带来的潜在安全隐患：

// next.config.js 配置示例
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'instagram.*.fbcdn.net',
        pathname: '/**',
      },
    ],
  },
}

该配置可以精准匹配所有后缀为fbcdn.net、前缀为instagram.的官方CDN域名，比泛用的instagram.*适配性更强、合规性更高。
如果你仍在使用旧版本Next.js无需升级，原有配置也可以正常运行。

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