4
votes

Next.JS implémente ".js" externe avec

3 Réponses :

-1
votes

Cela fonctionne comme prévu pour moi.

<script
dangerouslySetInnerHTML={{
  __html: `
  console.log('Console message');
`,
}}
/>

1 commentaires

Cette approche est recommandée par un ingénieur Next.js ici: github.com/ vercel / next.js / issues / 8891 # issuecomment-536192888 Bonjour, il semble que vous deviez utiliser dangerouslySetInnerHTML ici car React échappe les caractères par défaut

1
votes

Vous devez mettre tous vos scripts dans la balise Head .
Ne mettez pas de javascript brut dans la balise Head . Placez-le dans un fichier séparé et importez le script dans la balise Head

Vous pouvez créer un fichier .js , qui contient votre code js brut, dans le dossier public , puis utiliser le script dans le Head code > tag. Je ne sais pas pourquoi nous devons faire cela, mais voici comment cela fonctionne dans Next.js

Donc, pour votre problème, cela fonctionnera:

public / js /myscript.js

import Head from 'next/head';

const Layout = (props) => (
<div>
    <Head>
        {/* import external javascript */}
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="/js/myscript.js"></script>
    </Head>
    <p id="demo"></p>
</div>
);

export default Layout;

Layout.js

document.getElementById("demo").innerHTML = "Hello JavaScript";

0 commentaires

0
votes

@GunnerFan était sur la bonne voie. NextJS recommande de placer ces fichiers dans le dossier public

Donc

import Head from "next/head";

// ... elsewhere in your code 
<HEAD>
        <script type="text/javascript" src="js/myscript.js"></script>
</HEAD>

Vous pouvez vous référer directement aux fichiers du dossier, par exemple: js / Veillez à ne pas les nommer de la même manière que les fichiers du répertoire pages, c'est-à-dire INCORRECT: pages / myscript.js & js / myscript.js

Réf: https://nextjs.org/docs/basic-features/static-file-serving

0 commentaires