Next.js✖️MicroCMSでInstagramの埋め込みURLを読み込み

久しぶりの更新となりました。まとまった知見がなさそうだったので、書きました。

結論

以下をPage読み込み時に実装すればおkです。

import { useEffect } from 'react';

export function useInstagramEmbbed() {
  useEffect(() => {
    const s = document.createElement("script");
    s.setAttribute("src", "//www.instagram.com/embed.js");
    s.setAttribute("async", "true");
    document.head.appendChild(s);

    if ((window as any).instgrm) {
          (window as any).instgrm.Embeds.process()
    }
  })
}

課題

• Pageの読み込みごとにいちいちdocumentの中からinstagramの埋め込みURLを検索してるので遅いです。(個人ブログくらいだとセーフかも、、？)

参考記事

-- ReactでinstagramのEmbed