Next.jsでX（旧Twitter）のシェアボタンcomponentを作りたい

X（旧Twitter）のシェアボタンをNext.jsのcomponentを作ったので、その時のメモ書き。

X（旧Twitter）のシェアボタンをNext.jsで実装する

結論から言うと、以下のように書くとX（旧Twitter）のShareボタンcomponentを作れる。

# TwitterShareButton.tsx
import { useEffect } from "react";

function TwitterShareButton() {
  useEffect(() => {
    // Twitterのスクリプトを動的にロード
    const script = document.createElement("script");
    script.src = "https://platform.twitter.com/widgets.js";
    script.charset = "utf-8";
    script.async = true;
    document.body.appendChild(script);

    // コンポーネントのアンマウント時にスクリプトを削除することで、リソースをクリーンアップ
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <a 
　　　　　　　　　　　href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
　　　　　　　　　　　className="twitter-share-button"
　　　　　　　　　　　data-show-count="false">
　　　　　　　　　　Tweet
　　　　　　　　</a>
  );
}

export default TwitterShareButton;

以下、簡単にコードの解説をする。

    const script = document.createElement('script');
    script.src = 'https://platform.twitter.com/widgets.js';
    script.charset = 'utf-8';
    script.async = true;
    document.body.appendChild(script);

新しい<script> タグを作成し、Twitter の widgets.js スクリプトをそのソースとして設定している。

このスクリプトは、ページ上の Twitter ボタンを自動的に変換して動作するボタンにしてくれる。

そして、この新しいスクリプトタグを document.body に追加している。

    return () => {
      document.body.removeChild(script);
    };

ここでは、useEffect のクリーンアップ関数を返している。

この関数は、コンポーネントがアンマウントされるとき（DOM から削除されるとき）に実行される。

この場合、動的に追加した Twitter のスクリプトをページから削除している。

これにより、不要なリソースを解放し、ページのパフォーマンス問題やその他の問題を防ぐことができる。

以上。