microCMS + Next.jsで埋め込んだツイートを表示する｜基本編

microCMSではリッチエディタにツイートを埋め込むことができますが、Next.jsの静的サイトジェネレータ (SSG)で作成したサイトで表示させたところ、上手く表示されなかったり、表示されたり不安定でした。今回はその事象の解決方法を説明します。

調査する際に処理をさらに追加すればパフォーマンスを改善できることが分かったのですが、記載が多くなってしまうため別途記事を作成する予定です。

【2023/3/27 追記】パフォーマンス改善についての記事を作成しました。

事象の原因
解決方法
- ツイートを表示するページの修正
- ツイート表示用jsファイルの読み込み
おわりに
参考

埋め込んだツイートがうまく表示されない時は、下の画像の様になりました。

環境

Next.js 13.0.5
React 18.2.0
typescript 4.9.3

事象の原因

埋め込んだツイートをmicroCMSのAPIから取得すると下のようになっています。こちらのscriptがツイートを装飾して表示しているのですが、これが実行されない時があるというのが事象の原因です。

<blockquote class="twitter-tweet">
  // ツイート内容が入る
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

解決方法

ツイートを表示するページの修正

ページの遷移時にツイートの表示処理が実行されるようにします。具体的にはまずツイートを表示するページに対して下のようにuseEffectを使ってwindow.twttr.widgets.load()が実行されるようにします。

下のサンプルコードはブログの記事詳細ページを例としています。

//  pages/blog/[id].tsx
import React, { useEffect } from "react";

// ===== 追加する処理 ここから =====
declare global {
  // windowにtwttrが存在しないとエラーになるので、any型で宣言
  var twttr: any;
}
// ===== 追加する処理 ここまで =====

export default function BlogId({ blog }: Props) {

  // ===== 追加する処理 ここから =====
  const { asPath } = useRouter();

  useEffect(
    () => {
      try {
        // ツイート読込みを実行
        window.twttr.widgets.load();
      } catch (err) {
        console.error(err);
      }
    },
    // ページ遷移時にもuseEffectを実行するため、asPathを指定
    [asPath]
  );
  // ===== 追加する処理 ここまで =====

  return (
    <main>
      {/* リッチエディタの内容を展開 */}
      <div
        dangerouslySetInnerHTML={{
          __html: `${blog.body}`,
        }}
      />
    </main>
  );
}

ツイート表示用jsファイルの読み込み

次にwindow.twttr.widgets.load()を実行できるよう、ツイート表示用jsファイルの読み込み処理を追加します。

こちらは Web サイト全体で一度だけ読み込まれていればいいようですので、pages/_document.tsxに処理を記載します。

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* ===== 追加する処理 ここから ===== */}
          <Script
            id="twitter-widget"
            src="https://platform.twitter.com/widgets.js"
            strategy="afterInteractive"
          />
          {/* ===== 追加する処理 ここまで ===== */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}