Next.JS 实现外部“.js”<script>
[英]Next.JS implement external ".js" with <script>
问题描述
Im Building a website with Next.Js and I tried to implement an external .js file (Bootstrap.min.js & Popper.min.js) but it is not displayed.
我用 Next.Js 构建了一个网站，我试图实现一个外部 .js 文件（Bootstrap.min.js 和 Popper.min.js），但它没有显示出来。 Im not sure what the problem is!我不确定是什么问题！
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;
It looks good to me?我觉得好看吗？ what am I missing, it's not projecting as it should!我错过了什么，它没有像它应该的那样投射！
When I tried a script inside the page it shows "Hello JavaScript" for a very short time and then it disappears?当我在页面内尝试脚本时，它会在很短的时间内显示“Hello JavaScript”然后消失？
<p id="demo"></p> <script>document.getElementById("demo").innerHTML = "Hello JavaScript";</script>
How do i fix it?我如何解决它？
Please help!请帮忙！
Im Using: "next": "^8.0.3", "react": "^16.8.4", "react-dom": "^16.8.4"我正在使用：“next”：“^8.0.3”，“react”：“^16.8.4”，“react-dom”：“^16.8.4”
4 个解决方案
解决方案1
11 2020-05-17 08:01:24
- You need to put all your scripts inside the
Headtag.您需要将所有脚本放在Head标签中。 - Don't put raw javascript inside the
Headtag.不要将原始 javascript 放在Head标签中。 Put it in a separate file and import the script in theHeadtag把它放在一个单独的文件中，并在Head标签中导入脚本
You can create a .js file, which contains your raw js code, in the public folder and then use the script in the Head tag.您可以在public文件夹中创建一个.js文件，其中包含您的原始 js 代码，然后使用Head标记中的脚本。 I am not sure why we have to do this, but this is how it works in Next.js我不确定为什么我们必须这样做，但这就是它在 Next.js 中的工作方式
So for your problem, this will work:因此，对于您的问题，这将起作用：
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
3 2019-11-09 09:09:04
This is working as Expected for me.这对我来说按预期工作。
<script
dangerouslySetInnerHTML={{
__html: `
console.log('Console message');
`,
}}
/>
解决方案3
1 2020-06-15 13:45:40
@GunnerFan was in the right path. @GunnerFan 走在正确的道路上。 NextJS recommends putting these files in the public folder NextJS 建议将这些文件放在public文件夹中
So所以
import Head from "next/head";
// ... elsewhere in your code
<HEAD>
<script type="text/javascript" src="js/myscript.js"></script>
</HEAD>
You can refer to files in the folder directly, eg: js/<your file> Be careful not to name them same as files in the pages directory, ie INCORRECT: pages/myscript.js & js/myscript.js您可以直接引用文件夹中的文件，例如： js/<your file>注意不要与 pages 目录中的文件命名相同，即 INCORRECT: pages/myscript.js & js/myscript.js
Ref: https://nextjs.org/docs/basic-features/static-file-serving参考： https : //nextjs.org/docs/basic-features/static-file-serving
解决方案4
1 2021-08-13 07:46:56
You can use Script tag from next/script for importing external .js files.您可以使用next/script Script标签来导入外部.js文件。
The following is an example snippet from one of my projects.以下是我的一个项目的示例片段。 I had to import the script at the end of the page due to some DOM manipulations so the Script tag worked exceptionally well :)由于某些 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;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.