http 200 dans les outils de développement de chrome. J'ai essayé d'utiliser une bibliothèque appelée Loadjs de npm code> pour charger les scripts à l'intérieur de componentDidMount mais j'ai obtenu exactement le même résultat que l'utilisation de la balise .
y a-t-il une bonne façon de faire chose si simple dans Next.js dont je ne suis pas au courant?
Voici le code inclus dans le fichier pages / index.js .
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/malihu-custom-scrollbar-plugin@3.1.5/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 liés ont manqué un script qui exécuterait réellement les fonctions pour chaque action.
4 Réponses :
Cela fonctionne pour moi:
Créez un dossier pour vos fichiers statiques:
dans votre index.js
import Head from 'next/head';
import MyAwesomeComponent from '../components/mycomponent';
export default () => (
<div>
<Head>
<script type="text/javascript" src="/static/hello.js"></script>
</Head>
<MyAwesomeComponent />
</div>
)
J'espère que cette aide,
À propos
Puisse-t-il vous aider Dossier public Nextjs
Déplacez votre dossier statique dans le dossier public de 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>
)
Vous pouvez également exécuter le code js ceci
<script
dangerouslySetInnerHTML={{
__html: `
let a = 1;
functionCall();
`,
}}
></script>
Parfois, vous voulez que le script s'exécute sans avoir à accéder au réseau, ce qui risque de perdre des informations précieuses dans le cas des scripts d'analyse, etc.
La meilleure expérience de développeur que j'ai trouvée est de faire ceci:
alert('Freedom!!!!!!!!!!!!!!!');
https://github.com /vercel/next.js/blob/canary/packages/next/next-server/server/config.ts#L33
module.exports = {
env: {
rawJsFromFile: fs.readFileSync('./rawJsFromFile.js').toString()
}
}
rawJsFromFile. js
...
<Head>
<script type="text/javascript" dangerouslySetInnerHTML={{ __html: process.env.rawJsFromFile }}></script>
</Head>
...
J'espère que cela sauve quelqu'un d'heures de frustation :)
Avez-vous essayé de saisir les balises de script dans un document personnalisé? Consultez cette page pour plus d'informations sur la création d'une balise de document personnalisée dans nextjs. nextjs.org/docs/#custom-document
Avez-vous trouvé une solution à cela? Pouvez-vous partager s'il vous plaît?
Hey @Sleek, vérifie si ma réponse fonctionne pour toi
@Sleek les scripts fonctionnaient mais je n'appelais aucune fonction, donc il ne semblait pas qu'ils étaient fonctionnels.