📌

Next.jsで複数ツイートを埋め込みたい

2 min read

CatNoseさんのJSでツイートを埋め込むときのベストプラクティスの記事を参考に複数ツイート読み込みを実現しようとしていました。

上記の記事からの変更点

基本はCatNoseさんの記事にまとまってるので、どのように変更したかだけ記載します。
(とりあえず、動くようにしただけなのでパフォーマンス最適化されてるか否かは未計測です...!)

  • スニペットは利用せず、widgets.jsを読み込むように変更
  • useEffectの利用をやめました
  • next/scriptのScriptコンポーネントを使うようにしました

というわけでこうなった。

実装

page.tsx
import { useRef } from 'react';
import { GetStaticPaths, GetStaticPropsContext, InferGetStaticPropsType, NextPage } from 'next';
import Script from 'next/script';

type Props = InferGetStaticPropsType<typeof getStaticProps>;

const Page: NextPage<Props> = ({ tweetList }) => {
    const containerElem = useRef(null);

    return (
        <>
            <Script
                // strategy="afterInteractive"(defaultでOKなので特に設定しない)
                src='https://platform.twitter.com/widgets.js'
                onLoad={() => {
                    (window as any).twttr.widgets.load(containerElem.current);
                }}
            />

            <ul ref={containerElem}>
                {tweetList.map((tweet) => (
                    <li key={tweet.id} style={{ margin: '4rem' }}>
                        {/** twitter-widgets.jsが blockquote.twitter-tweetを探すので、blockquoteは必要 */}
                        <blockquote className="twitter-tweet">
                            {/** 子要素にaタグでツイートのURLを指定してあげれば、widgets.jsが処理してくれるので、これでOK */}
                            <a href={tweet.url} />
                        </blockquote>
                    </li>
                ))}
            </ul>
        </>
    )
}

export const getStaticProps = async () => {
    // do something
    return any;
}

export default Page;

参考記事

Discussion

ログインするとコメントできます