Next.jsでscriptが読み込まれない時の解消方

「Next.jsでscriptが読み込まれない時の解消方」のアイキャッチ画像

Twitter widgetやHubspotのscriptをheaderに入れたけど、動かない!という場合は、適宜下記のように実装することで問題を解消することができます🙏

useEffect(() => {
    const tweet = document.createElement('script');
    tweet.setAttribute('src', 'https://platform.twitter.com/widgets.js');
    tweet.setAttribute('defer', 'true');
    document.head.appendChild(tweet);
  }, []);

参考記事

Next.js アプリケーションで静的にツイートを埋め込む 「static-tweet」 を使いやすくカスタマイズしてみた