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

Engineering
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする
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のタイムラインを表示させることができているはず。