Next.JS 使用 <script> 实现外部“.js”
Posted
技术标签:
【中文标题】Next.JS 使用 <script> 实现外部“.js”【英文标题】：Next.JS implement external ".js" with <script> 【发布时间】：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”
【问题讨论】：
您好，请问您是怎么解决的？ 【参考方案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
【讨论】：
以上是关于Next.JS 使用 <script> 实现外部“.js”的主要内容，如果未能解决你的问题，请参考以下文章
React / JSX：渲染的 <script> 标记将等号和引号添加到异步属性
使用 <Image /> 标签时如何在 Next.js 中删除移动视图中的空白？
Next.js 导航栏：单击来自不同 <nav> 组的链接时突出显示不清晰