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

【问题标题】：Next.JS implement external ".js" with <script>Next.JS 使用 <script> 实现外部“.js”
【发布时间】：2019-08-05 13:04:13
【问题描述】：

我正在使用 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;

我觉得不错？我错过了什么，它没有按应有的方式投射！

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

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

我该如何解决？

请帮忙！

我正在使用： "下一个": "^8.0.3", “反应”：“^16.8.4”， “反应域”：“^16.8.4”

【问题讨论】：

您好，请问您是怎么解决的？

标签： javascript html reactjs next.js react-dom

【解决方案1】：

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

您可以在public 文件夹中创建一个包含原始js 代码的.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;

【讨论】：

【解决方案2】：

您可以使用next/script 中的Script 标签来导入外部.js 文件。

以下是我的一个项目中的示例 sn-p。由于一些 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;

【讨论】：

仅适用于 Next.js >= 11
不能使用 dangerouslySetInnerHTML。我在其中应用字符串但没有用

【解决方案3】：

这对我来说按预期工作。

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

【讨论】：

这里的 Next.js 工程师推荐这种方法：github.com/vercel/next.js/issues/8891#issuecomment-536192888Hi, it looks like you need to use dangerouslySetInnerHTML here since React escapes the characters by default

【解决方案4】：

@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

【讨论】：