【Next.js (App Router) × microCMS × Netlify】リッチエディタの埋め込みが表示されない問題を解決した話

クライアントから連絡がありCMSの埋め込み機能を使って外部サイトリンクを置いた時「リロードをしないと表示されない」と連絡が来たので急遽対応しました。

1. 問題

• microCMSのリッチエディタの機能の埋め込みがリロードしないと表示されない

2. 環境

項目	バージョン
Next.js	15 (App Router)
Netlify	サイト設定 output: "standalone"

---

3. 原因：embed.jsがロードされてない & iframely-embedが動いてない

検証ツールで該当部分を確認すると

<div class="iframely-embed">
    <div class="iframely-responsive" style="height: 140px; padding-bottom: 0;">
        <a href="https://www.example.jp" 
            data-iframely- url="https://cdn.iframe.ly/api/iframe?url=https....">
        </a>
    </div>
</div>

このようになっており正常な場合(リロード後)は画像のようにiframeタグが生成されています

じゃあロードするようにすればいいんじゃねと思い以下のように解決しました。

---

4. 解決策

"use client";
import { useEffect } from "react";
import Script from "next/script";

export default function 省略....

  // content が変わるたびに再パース
  useEffect(() => {
    (window as any).iframely?.load();
  }, [content]);

  return (
    <>
      {/* embed.js を一度だけロード */}
      <Script
        src="https://cdn.iframe.ly/embed.js"
        strategy="afterInteractive"
        onLoad={() => (window as any).iframely?.load()}
      />

      {/* リッチテキスト本体 */}
      <div key={index} className={className}>
        ...
      </div>
    </>
  );
}

---

5.感想

一旦これで解決したので様子見です。
どなたか他にいい方法があればご教授して欲しいです。
ちなみにTikTokの埋め込みの場合は

<Script
    src="https://www.tiktok.com/embed.js"
    strategy="afterInteractive"
    onLoad={() => {
          (window as any).iframely?.load();
        }}
/>

これでいけます