Next.js仅客户端加载Instagram embed.js遇window.instgrm未定义问题

你的问题在于Instagram的embeds.js脚本加载完成后，不会立即将instgrm对象挂载到window上，且脚本的初始化依赖页面中已存在的Instagram嵌入DOM元素。另外，onload事件仅表示脚本文件下载完成，内部的初始化逻辑还未执行完毕，所以此时访问window.instgrm会得到undefined。

核心错误点 #

1. 缺少目标嵌入元素：Instagram脚本会先扫描页面中的Instagram嵌入标签（如<blockquote class="instagram-media">），如果没有找到对应元素，不会初始化instgrm对象。
2. 初始化时机不匹配：脚本onload触发时，内部的instgrm初始化逻辑尚未完成，直接访问会获取不到对象。
3. 未处理重复加载：多次触发useEffect会重复插入脚本，可能导致冲突。

修正方案 #

方案1：使用原生JS优化加载逻辑 #

确保页面中存在Instagram嵌入元素后，再加载脚本，并通过监听对象变化来获取instgrm：

import { useEffect } from 'react';

export default function InstagramPost() {
  useEffect(() => {
    // 避免重复加载脚本
    if (window.instgrm) {
      window.instgrm.Embeds.process();
      return;
    }

    // 确认嵌入元素存在
    const embedElement = document.querySelector('.instagram-media');
    if (!embedElement) return;

    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://platform.instagram.com/en_US/embeds.js';

    // 监听window对象变化，等待instgrm初始化
    const observer = new MutationObserver(() => {
      if (window.instgrm) {
        observer.disconnect();
        window.instgrm.Embeds.process();
        console.log(window.instgrm); // 此时可正常访问
      }
    });
    observer.observe(window, { attributeFilter: ['instgrm'] });

    document.body.appendChild(script);

    // 清理函数
    return () => {
      observer.disconnect();
      if (script.parentNode) script.parentNode.removeChild(script);
    };
  }, []);

  return (
    {/* 插入从Instagram复制的嵌入代码 */}
    <blockquote 
      className="instagram-media" 
      data-instgrm-permalink="https://www.instagram.com/p/你的帖子ID/" 
      data-instgrm-version="14"
    >
      <div>
        <a href="https://www.instagram.com/p/你的帖子ID/" target="_blank" rel="noopener noreferrer"></a>
      </div>
    </blockquote>
  );
}

方案2：使用Next.js官方next/script组件（推荐） #

Next.js的next/script组件专门优化第三方脚本加载，能更好地适配框架的 hydration 和加载策略：

import Script from 'next/script';

export default function InstagramEmbed() {
  const handleScriptLoad = () => {
    // 延迟一小段时间等待初始化完成
    setTimeout(() => {
      if (window.instgrm) {
        window.instgrm.Embeds.process();
      }
    }, 500);
  };

  return (
    <>
      {/* Instagram嵌入元素 */}
      <blockquote 
        className="instagram-media" 
        data-instgrm-permalink="https://www.instagram.com/p/你的帖子ID/" 
        data-instgrm-version="14"
      >
        <div>
          <a href="https://www.instagram.com/p/你的帖子ID/" target="_blank" rel="noopener noreferrer"></a>
        </div>
      </blockquote>

      {/* 使用lazyOnload策略，页面空闲时加载脚本 */}
      <Script
        src="https://platform.instagram.com/en_US/embeds.js"
        strategy="lazyOnload"
        onLoad={handleScriptLoad}
      />
    </>
  );
}

关键注意事项 #

• 必须确保页面中存在完整的Instagram嵌入DOM结构（可直接从Instagram帖子的「嵌入」选项复制代码）。
• 不要依赖onload事件立即访问instgrm，需等待内部初始化完成，使用MutationObserver或短延迟都是可靠的方式。
• 避免重复加载脚本，每次加载前先检查window.instgrm是否已存在。

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