X（旧Twitter）のポストを埋め込み表示できるようにする（Next.js）

"use client"; // クライアントサイドでの処理（useEffect）が必要なため追加

// 1. 先頭で Script をインポート
import Script from "next/script";

// ...中略

export default function Article({ data, relatedContents }: Props) {
  // --- X(Twitter)の埋め込みを再描画する処理 ---
  useEffect(() => {
    // ページが表示された時に、埋め込みツイートをスキャンして表示させる
    // @ts-ignore
    if (window.twttr && window.twttr.widgets) {
      // @ts-ignore
      window.twttr.widgets.load();
    }
  }, [data]); // 記事データが変わるたびに実行

  if (!data || !data.main) {
    return <div>記事が見つかりませんでした。</div>;
  }

  // ...中略

  return (
    <>
      {/* X(Twitter)のウィジェットスクリプトを読み込み */}
      <Script
        src="https://platform.twitter.com/widgets.js"
        strategy="afterInteractive"
      />
      {/* ...以下、既存のコード */}