IT技术 - Next.JS 使用 <script> 实现外部“.js” - 吾爱随笔录

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

IT技术 javascript html reactjs next.js react-dom

2021-03-24 06:11:04

我用 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>

我如何解决它？

请帮忙！

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

4个回答

您需要将所有脚本放在Head标签中。
不要将原始 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;

您可以使用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;

仅适用于 Next.js >= 11

2021-06-17 06:11:04

这对我来说是预期的。

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

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

2021-06-10 06:11:04

@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目录中的文件命名相同，即INCORRECT: pages/myscript.js&js/myscript.js

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

其它你可能感兴趣的问题

上一篇NextJS，在 getServerSideProps 中预加载 Redux 数据下一篇理解：警告：不能给函数组件提供引用