Vercel部署的NextJS中Instagram Basic Display API图片无法渲染

问题分析与解决方案 #

1. 替换域名配置为更精确的匹配规则 #

Instagram图片通常来自多个子域名（如scontent-iad3-1.cdninstagram.com、scontent-lax3-2.cdninstagram.com等），仅在vercel.json中配置固定域名无法覆盖所有情况。建议改用next.config.js（或next.config.mjs）的remotePatterns配置，支持通配符匹配所有子域名：

在项目根目录创建/修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.cdninstagram.com',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'instagram.com',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

2. 确保配置文件被正确部署 #

• 检查next.config.js未被.gitignore忽略，已提交到Git仓库。
• 部署前推送最新代码到远程仓库，保证Vercel能读取到更新后的配置。

3. 清除Vercel构建缓存并重新部署 #

旧缓存可能导致配置不生效，操作步骤：

1. 登录Vercel控制台，进入对应项目。
2. 打开「Deployments」页面，选择最新部署记录，点击「Redeploy」。
3. 勾选「Clear build cache」选项后重新部署。

4. 验证图片URL有效性 #

确认media_url返回的链接可正常访问，过滤掉因隐私设置、帖子删除导致的无效图片链接。

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