Insérez le widget TradingView dans Next.js.

Question

J'essaie d'insérer le widget TradingView dans mon projet Next.js, mais il n'affiche rien. Est-ce que je fais quelque chose de mal ici?

importer React depuis 'react'
importer {Casque} depuis "react-helmet"

function CalendrierÉconomique() {
  retour (
    <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">Suivez tous les marchés sur TradingView</span>
          ≪/a>
        </div>
        <Casque>
          <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js" async>
          {`
            {
              "largeur": "100%",
              "hauteur": "100%",
              "colorTheme": "sombre",
              "isTransparent": faux,
              "locale": "fr",
              "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>
        </Casque>
      </div>
    </div>
  )
}

exporter par défaut EconomicCalendar

Que devez-vous faire habituellement

Answer 1

Si vous utilisez Next.js, vous n'avez pas besoin d'utiliser React Helmet pour insérer des balises de script dans la tête. Next.js possède son propre script pour optimiser et gérer le JavaScript tiers. Ou vous pouvez écrire du JavaScript en ligne en ajoutant un script en ligne.

Veuillez vous référer à la documentation officielle https://nextjs.org/docs/app/building-your-application/optimizing/scripts