Question

我正在使用Next.Js建立一个网站，我试图实现一个外部.js文件（Bootstrap.min.js和Popper.min.js），但未显示。我不确定是什么问题！

我是这样实现的：

 从'next / head'导入Head；

//部分
从'./nav'导入Nav

const布局=（属性）=>（

    <头>
        网站

        {/ *元标记* /}
         
         
        
        {/ *标准页面CSS * /}
        
        
        {/ * Bootstrap CSS * /}
        

        {/ *首先使用jQuery，然后使用Popper.js，然后使用Bootstrap JS * /}
        
        
        
    
    
    {props.children}

）;

导出默认布局；

对我来说看起来不错吗？我想念的是什么，它没有按预期投射！

当我尝试页面内的脚本时，它在很短的时间内显示“ Hello JavaScript”，然后消失了吗？

我该如何解决？

请帮助！

我正在使用： “ next”：“ ^ 8.0.3”， “ react”：“ ^ 16.8.4”， “ react-dom”：“ ^ 16.8.4”

Answer 1

您需要将所有脚本放入Head标记内。
请勿将原始javascript放在Head标记内。将其放在单独的文件中，然后将脚本导入Head标签

您可以在.js文件夹中创建一个public文件，其中包含原始js代码，然后使用Head标签中的脚本。我不确定为什么我们必须这样做，但这就是Next.js中的工作方式

因此对于您的问题，这将起作用：

public/js/myscript.js

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

Layout.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;

Answer 2

@GunnerFan在正确的道路上。 NextJS建议将这些文件放在public文件夹中

所以

import Head from "next/head";

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

您可以直接引用文件夹中的文件，例如：js/<your file> 注意不要将它们与pages目录中的文件命名相同，即错误：pages/myscript.js和js/myscript.js

参考：https://nextjs.org/docs/basic-features/static-file-serving

Answer 3

这按我的预期进行。

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

Next.JS使用<script>实现外部“ .js”

3 个答案: