Next.jsで作ったWebサービスにTwitterのタイムラインを表示させたい

Next.jsのアプリにTwitterのタイムラインを表示させる方法

Next.jsを使ってウェブサイトにTwitterのタイムラインを表示させたい場合、以下の手順に従って実装が可能。

Twitterの埋め込みウィジェットのコードを取得

まずはこちらのサイトからTwitterのウィジットのコードを取得する。

遷移先で以下のような画面が表示されるので、タイムラインを表示させたいTwitterアカウントのURLをコピペする。

そうすると、以下のような表示がされるので、『Embedded Timeline』を選択し、『Copy Code』をクリックする。

そうすると以下のようなコードを取得できる。

<a class=”twitter-timeline” href=”https://twitter.com/PHARMA_W0RKS?ref_src=twsrc%5Etfw”>Tweets by PHARMA_W0RKS</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

Next.jsのコンポーネントを作成する

以下のようにタイムラインを表示するコンポーネントを作る。

肝となるのはuseEffectの部分。

useEffect は、Reactのhooksのひとつで、副作用 (side effects) を実行するために使われる。

副作用とは、データの取得や変更、DOMの更新、イベントリスナーの設定など、コンポーネントに関連する外部の状態に影響を与える処理のことを指す。

# TwitterTimeline.tsx
import React, { useEffect } from 'react';

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

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

  return (
   <a 
     className="twitter-timeline" 
     href="https://twitter.com/PHARMA_W0RKS?ref_src=twsrc%5Etfw" 
     target="_blank" rel="noopener noreferrer" 
    > 
    Tweets by PHARMA_W0RKS 
   </a>
  );
};

export default TwitterTimeline;

まずTwitterのウィジェットスクリプトを読み込むための<script>タグを動的に作成し、それをdocument.bodyに追加している。

これにより、ページにTwitterのウィジェットが表示されるようになる。

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

useEffect が返す関数は、クリーンアップ関数と呼ばれる。

この関数は、コンポーネントがアンマウントされる前に実行され、副作用が行った変更を元に戻すために使われる。

この例では、動的に追加した<script>タグをdocument.bodyから削除する。これにより、不要になったスクリプトがページに残らないようになる。

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

表示させたいページにTwitterTimelineコンポーネントをインポートする

最後に先ほど作ったコンポーネントを表示したいページからインポートする。

import TwitterTimeline from '../components/TwitterTimeline';

// 他のコード...

// コンポーネントを表示させたい場所に追加
<TwitterTimeline />

これでNext.jsのプロジェクトにTwitterのタイムラインを表示させることができているはず。