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

Question

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

Gij*_*Heg 11 html javascript reactjs react-dom next.js

我用 Next.Js 构建了一个网站，我试图实现一个外部 .js 文件（Bootstrap.min.js 和 Popper.min.js），但它没有显示出来。我不确定是什么问题！

我是这样实现的：

import Head from 'next/head';

//partials
import Nav from './nav'

const Layout = (props) => (
<div>
    <Head>
        <title>Site</title>

        {/* Meta tags */}
        <meta charset="utf-8"></meta>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>
        
        {/* Standard page css */}
        <link rel="stylesheet" type="text/css" href="/static/css/page.css"/>
        
        {/* Bootstrap CSS */}
        <link rel="stylesheet" href="/static/includes/bootstrap.min.css"/>

        {/* jQuery first, then Popper.js, then Bootstrap JS */}
        <script src="/static/includes/popper.min.js"></script>
        <script type="text/javascript" src="/static/includes/bootstrap.min.js"></script>
        
    </Head>
    <Nav/>
    {props.children}
</div>
);

export default Layout;

Run Code Online (Sandbox Code Playgroud)

我觉得好看吗？我错过了什么，它没有像它应该的那样投射！

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

<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = "Hello JavaScript";</script>

Run Code Online (Sandbox Code Playgroud)

我如何解决它？

请帮忙！

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

Answer 1

小智 13

您可以使用Script标签 fromnext/script导入外部.js文件。

以下是我的一个项目的示例片段。由于一些 DOM 操作，我必须在页面末尾导入脚本，因此该Script标签工作得非常好:)

import Script from "next/script";
import Content from "../components/Content";
import Header from "../components/Header";

const index = () => {
  return (
    <div>
      <Header />
      <Content />
      <Script type="text/javascript" src="./assets/js/main.js" />
    </div>
  );
};

export default index;

Run Code Online (Sandbox Code Playgroud)

仅适用于 Next.js >= 11 (2认同)

Answer 2

Gun*_*Fan 11

您需要将所有脚本放在Head标签中。
不要将原始 javascript 放入Head标签中。把它放在一个单独的文件中并在Head标签中导入脚本

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

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

public/js/myscript.js

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

Run Code Online (Sandbox Code Playgroud)

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;

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，7 月前
查看次数：	14299 次
最近记录：	4 年，2 月前

Next.JS 使用 &lt;script&gt; 实现外部“.js”

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