logo标签列表

Next.JS如何使用<script>标签引入外部的.js文件？

javascripthtmlreactjsnext.jsreact-dom
16

我正在使用Next.js构建一个网站，尝试实现外部的.js文件（Bootstrap.min.js和Popper.min.js），但是它没有显示出来。我不确定问题出在哪里！

I implemented it like this: 

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;

看起来对我来说很好？我错过了什么，它没有像应该的那样显示！

当我尝试在页面内部运行脚本时，它只显示了“Hello JavaScript”，但仅持续了很短的时间，然后就消失了？

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

我该如何修复它？

请帮忙！

我正在使用： "next": "^8.0.3", "react": "^16.8.4", "react-dom": "^16.8.4"

1
你好，请问你是怎么解决这个问题的？ - Stanly Medjo
4个回答
19
  1. 你需要将所有的脚本放在 Head 标签内。
  2. 不要将原始 JavaScript 代码放在 Head 标签内。将其放入单独的文件中，并在 Head 标签中导入该脚本。

您可以创建一个包含原始 JS 代码的 .js 文件，并将其放在 public 文件夹中，然后在 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;
12
你可以使用next/script中的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;
2
仅适用于 Next.js >= 11。 - jonathancardoso
不适用于dangerouslySetInnerHTML。我在其中应用了字符串，但没有起作用。 - Jayna Tanawala
3

对我来说，这按预期工作。

<script
dangerouslySetInnerHTML={{
  __html: `
  console.log('Console message');
`,
}}
/>
这种方法是由 Next.js 工程师在此处推荐的：https://github.com/vercel/next.js/issues/8891#issuecomment-536192888“嗨，看起来你需要在这里使用 dangerouslySetInnerHTML，因为 React 默认会转义字符。” - user2465896
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/<你的文件>。但要注意不要与页面目录中的文件同名，即不正确的做法是：pages/myscript.js 和 js/myscript.js。
参考文献：https://nextjs.org/docs/basic-features/static-file-serving
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接