search

Home  >  Q&A  >  body text

Insert the TradingView widget into Next.js.

<p>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? </p> <pre class="brush:php;toolbar:false;">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</pre> <p>What should you usually do</p>
P粉478188786P粉478188786487 days ago543

reply all(1)I'll reply

  • P粉930448030

    P粉9304480302023-07-28 00:11:51

    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

    reply
    0
  • Cancelreply