Insert the TradingView widget into Next.js.

Question

I'm trying to insert the TradingView widget into my Next.js project, but it's not showing anything. Am I doing something wrong here?

import React from 'react'
import { Helmet } from "react-helmet"

function EconomicCalendar() {
  return (
    <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">Track all markets on TradingView</span>
          </a>
        </div>
        <Helmet>
          <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js" async>
          {`
            {
              "width": "100%",
              "height": "100%",
              "colorTheme": "dark",
              "isTransparent": false,
              "locale": "en",
              "importanceFilter": "-1,0,1",
              "currencyFilter": "AUD,USD,CAD,CNY,EUR,FRF,DEM,ITL,JPY,KRW,MYR,MXN,NZD,SGD,ZAR,ESP,CHF,TRL,GBP"
            }
          `}
          </script>
        </Helmet>
      </div>
    </div>
  )
}

export default EconomicCalendar

What should you usually do

Answer 1

If you are using Next.js, you do not need to use React Helmet to insert script tags into the head. Next.js has its own Script to optimize and manage third-party JavaScript. Or you can write inline JavaScript by adding inline script.

Please refer to the official documentation https://nextjs.org/docs/app/building-your-application/optimizing/scripts