TradingView ウィジェットを Next.js に挿入します。

Question

TradingView ウィジェットを Next.js プロジェクトに挿入しようとしていますが、何も表示されません。ここで私は何か間違ったことをしていますか？

「react」から React をインポート
「react-helmet」から { ヘルメット } をインポートします

関数EconomicCalendar() {
  戻る （
    <div>
      <div className="tradingview-widget-container">
        <div className="tradingview-widget-container__widget"></div>
        <div className="tradingview-widget-copyright">
          <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
            <span className="blue-text">TradingView ですべての市場を追跡</span>
          </a>
        </div>
        ＜ヘルメット＞
          <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js" async>
          {`
            {
              "幅": "100%",
              "高さ": "100%",
              "colorTheme": "ダーク",
              "isTransparent": false、
              "ロケール": "en",
              "importanceFilter": "-1,0,1",
              "通貨フィルター": "AUD、USD、CAD、CNY、EUR、FRF、DEM、ITL、JPY、KRW、MYR、MXN、NZD、SGD、ZAR、ESP、CHF、TRL、GBP"
            }
          `}
          </スクリプト>
        </ヘルメット>
      </div>
    </div>
  )
}

デフォルトのEconomicCalendar

をエクスポートします。

普段何をすべきか

Answer 1

Next.js を使用している場合は、React Helmet を使用してスクリプト タグを head に挿入する必要はありません。 Next.js には、サードパーティの JavaScript を最適化および管理するための独自のスクリプトがあります。または、インライン スクリプトを追加してインライン JavaScript を記述することもできます。

公式ドキュメントを参照してください https://nextjs.org/docs/app/building-your-application/optimizing/scripts