web-dev-qa-db-fra.com

Next.js charge les balises <script> mais ne les exécute pas

J'intègre une application React existante dans Next.js pour les fonctionnalités de référencement principalement).

j'ai collé les liens des fichiers css à l'intérieur du <Header> faire Next.js et ils semblent très bien fonctionner. quand j'ai essayé de faire la même chose avec les fichiers javascript en utilisant le <script> tag, il n'exécute pas le code dans ces scripts. mais je peux les voir chargés de http 200 dans les outils de développement chrome dev.

J'ai essayé d'utiliser une bibliothèque appelée Loadjs de npm pour charger les scripts à l'intérieur de componentDidMount mais j'ai obtenu exactement le même résultat qu'en utilisant <script> tag.

existe-t-il un moyen approprié de faire une chose aussi simple dans Next.js que je ne connais pas?

Voici le code inclus dans le pages/index.js fichier.

  import React from "react"
  import Head from 'next/head'
  import MyAwesomeComponent from "../components/mycomponent.js"
  export default () => (
    <div>
      <Head>

        <link type="text/css" rel="stylesheet" href="static/css/chatwidget.css" />
        <link type="text/css" rel="stylesheet" href="static/css/download.css" />

        <script type="text/javascript" src="static/libs/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.mCustomScrollbar.concat.min.js"></script>
        <script type="text/javascript" src="static/libs/bootstrap.min.js"></script>
        <script type="text/javascript" src="static/libs/owl.carousel.min.js"></script>
        <script type="text/javascript" src="static/scripts/chatHead.js"></script>
        <script type="text/javascript" src="static/libs/jquery.magnific-popup.js"></script>
      </Head>

      <MyAwesomeComponent /> {/* a simple React component that returns  : <p>Hello World </p>*/}
    </div>
  )

Désolé pour la réponse tardive. il s'est avéré que tous les scripts que j'ai liés manquaient un script qui exécuterait réellement le functions pour chaque action.

javascriptreactjsnext.js
6
Sharl Sherif

Que cela vous aide dossier public Nextjs

Déplacez votre dossier statique dans un dossier public dans votre répertoire racine

export default () => (
    <div>
      <Head>

        <link type="text/css" rel="stylesheet" href="/static/css/chatwidget.css" />
        <link type="text/css" rel="stylesheet" href="/static/css/download.css" />

        <script type="text/javascript" src="/static/libs/jquery.min.js"></script>
        ...
      </Head>

      <MyAwesomeComponent /> 
    </div>
  )
0
Parth Bambhaniya

Vous pouvez également exécuter ce code js

          <script
            dangerouslySetInnerHTML={{
              __html: `
                      let a = 1;
                      functionCall();
                  `,
            }}
          ></script>
0
Maysam Torabi